Merge branch 'main' into codex/create-level4/tabs/config.ts-and-tabcontent.tsx

Refactor level pages to share section components

frontends/nextjs/src/components/level4/Level4Tabs.tsx

@@ -1,23 +1,7 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { Database as DatabaseIcon, Lightning, Code, BookOpen, HardDrives, MapTrifold, Tree, Users, Gear, Palette, ListDashes, Sparkle, Package, SquaresFour, Warning } from '@phosphor-icons/react'
-import { SchemaEditorLevel4 } from '@/components/SchemaEditorLevel4'
-import { WorkflowEditor } from '@/components/WorkflowEditor'
-import { LuaEditor } from '@/components/editors/lua/LuaEditor'
-import { LuaBlocksEditor } from '@/components/editors/lua/LuaBlocksEditor'
-import { LuaSnippetLibrary } from '@/components/editors/lua/LuaSnippetLibrary'
-import { DatabaseManager } from '@/components/managers/database/DatabaseManager'
-import { PageRoutesManager } from '@/components/managers/PageRoutesManager'
-import { ComponentHierarchyEditor } from '@/components/ComponentHierarchyEditor'
-import { UserManagement } from '@/components/UserManagement'
-import { GodCredentialsSettings } from '@/components/GodCredentialsSettings'
-import { CssClassManager } from '@/components/CssClassManager'
-import { DropdownConfigManager } from '@/components/DropdownConfigManager'
-import { QuickGuide } from '@/components/QuickGuide'
-import { PackageManager } from '@/components/PackageManager'
-import { ThemeEditor } from '@/components/ThemeEditor'
-import { SMTPConfigEditor } from '@/components/SMTPConfigEditor'
-import { ErrorLogsTab } from '@/components/level5/tabs/error-logs/ErrorLogsTab'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui'
 import type { AppConfiguration, User } from '@/lib/level-types'
+import { level4TabsConfig } from './tabs/config'
+import { TabContent } from './tabs/TabContent'
 
 interface Level4TabsProps {
   appConfig: AppConfiguration
@@ -36,153 +20,31 @@ export function Level4Tabs({
   onWorkflowsChange,
   onLuaScriptsChange,
 }: Level4TabsProps) {
+  const visibleTabs = level4TabsConfig.filter((tab) => (tab.nerdOnly ? nerdMode : true))
+
   return (
     <Tabs defaultValue="guide" className="space-y-6">
       <TabsList className={nerdMode ? "grid w-full grid-cols-4 lg:grid-cols-14 max-w-full" : "grid w-full grid-cols-3 lg:grid-cols-7 max-w-full"}>
-        <TabsTrigger value="guide">
-          <Sparkle className="mr-2" size={16} />
-          Guide
-        </TabsTrigger>
-        <TabsTrigger value="packages">
-          <Package className="mr-2" size={16} />
-          Packages
-        </TabsTrigger>
-        <TabsTrigger value="pages">
-          <MapTrifold className="mr-2" size={16} />
-          Page Routes
-        </TabsTrigger>
-        <TabsTrigger value="hierarchy">
-          <Tree className="mr-2" size={16} />
-          Components
-        </TabsTrigger>
-        <TabsTrigger value="users">
-          <Users className="mr-2" size={16} />
-          Users
-        </TabsTrigger>
-        <TabsTrigger value="schemas">
-          <DatabaseIcon className="mr-2" size={16} />
-          Schemas
-        </TabsTrigger>
-        {nerdMode && (
-          <>
-            <TabsTrigger value="workflows">
-              <Lightning className="mr-2" size={16} />
-              Workflows
-            </TabsTrigger>
-            <TabsTrigger value="lua">
-              <Code className="mr-2" size={16} />
-              Lua Scripts
-            </TabsTrigger>
-            <TabsTrigger value="blocks">
-              <SquaresFour className="mr-2" size={16} />
-              Lua Blocks
-            </TabsTrigger>
-            <TabsTrigger value="snippets">
-              <BookOpen className="mr-2" size={16} />
-              Snippets
-            </TabsTrigger>
-            <TabsTrigger value="css">
-              <Palette className="mr-2" size={16} />
-              CSS Classes
-            </TabsTrigger>
-            <TabsTrigger value="dropdowns">
-              <ListDashes className="mr-2" size={16} />
-              Dropdowns
-            </TabsTrigger>
-            <TabsTrigger value="database">
-              <HardDrives className="mr-2" size={16} />
-              Database
-            </TabsTrigger>
-          </>
-        )}
-        <TabsTrigger value="settings">
-          <Gear className="mr-2" size={16} />
-          Settings
-        </TabsTrigger>
-        <TabsTrigger value="errorlogs">
-          <Warning className="mr-2" size={16} />
-          Error Logs
-        </TabsTrigger>
+        {visibleTabs.map((tab) => (
+          <TabsTrigger key={tab.value} value={tab.value}>
+            <tab.icon className="mr-2" size={16} />
+            {tab.label}
+          </TabsTrigger>
+        ))}
       </TabsList>
 
-      <TabsContent value="guide" className="space-y-6">
-        <QuickGuide />
-      </TabsContent>
-
-      <TabsContent value="packages" className="space-y-6">
-        <PackageManager />
-      </TabsContent>
-
-      <TabsContent value="pages" className="space-y-6">
-        <PageRoutesManager />
-      </TabsContent>
-
-      <TabsContent value="hierarchy" className="space-y-6">
-        <ComponentHierarchyEditor nerdMode={nerdMode} />
-      </TabsContent>
-
-      <TabsContent value="users" className="space-y-6">
-        <UserManagement />
-      </TabsContent>
-
-      <TabsContent value="schemas" className="space-y-6">
-        <SchemaEditorLevel4
-          schemas={appConfig.schemas}
+      {level4TabsConfig.map((tab) => (
+        <TabContent
+          key={tab.value}
+          tab={tab}
+          appConfig={appConfig}
+          user={user}
+          nerdMode={nerdMode}
           onSchemasChange={onSchemasChange}
+          onWorkflowsChange={onWorkflowsChange}
+          onLuaScriptsChange={onLuaScriptsChange}
         />
-      </TabsContent>
-
-      {nerdMode && (
-        <>
-          <TabsContent value="workflows" className="space-y-6">
-            <WorkflowEditor
-              workflows={appConfig.workflows}
-              onWorkflowsChange={onWorkflowsChange}
-              scripts={appConfig.luaScripts}
-            />
-          </TabsContent>
-
-          <TabsContent value="lua" className="space-y-6">
-            <LuaEditor
-              scripts={appConfig.luaScripts}
-              onScriptsChange={onLuaScriptsChange}
-            />
-          </TabsContent>
-
-          <TabsContent value="blocks" className="space-y-6">
-            <LuaBlocksEditor
-              scripts={appConfig.luaScripts}
-              onScriptsChange={onLuaScriptsChange}
-            />
-          </TabsContent>
-
-          <TabsContent value="snippets" className="space-y-6">
-            <LuaSnippetLibrary />
-          </TabsContent>
-
-          <TabsContent value="css" className="space-y-6">
-            <CssClassManager />
-          </TabsContent>
-
-          <TabsContent value="dropdowns" className="space-y-6">
-            <DropdownConfigManager />
-          </TabsContent>
-
-          <TabsContent value="database" className="space-y-6">
-            <DatabaseManager />
-          </TabsContent>
-        </>
-      )}
-
-      <TabsContent value="settings" className="space-y-6">
-        <GodCredentialsSettings />
-        <ThemeEditor />
-        <SMTPConfigEditor />
-      </TabsContent>
-
-      <TabsContent value="errorlogs" className="space-y-6">
-        <ErrorLogsTab user={user} />
-      </TabsContent>
+      ))}
     </Tabs>
   )
 }

frontends/nextjs/src/components/level4/tabs/TabContent.tsx

@@ -0,0 +1,153 @@
+import { TabsContent } from '@/components/ui'
+import { SchemaEditorLevel4 } from '@/components/SchemaEditorLevel4'
+import { WorkflowEditor } from '@/components/WorkflowEditor'
+import { LuaEditor } from '@/components/editors/lua/LuaEditor'
+import { LuaBlocksEditor } from '@/components/editors/lua/LuaBlocksEditor'
+import { LuaSnippetLibrary } from '@/components/editors/lua/LuaSnippetLibrary'
+import { DatabaseManager } from '@/components/managers/database/DatabaseManager'
+import { PageRoutesManager } from '@/components/managers/PageRoutesManager'
+import { ComponentHierarchyEditor } from '@/components/ComponentHierarchyEditor'
+import { UserManagement } from '@/components/UserManagement'
+import { GodCredentialsSettings } from '@/components/GodCredentialsSettings'
+import { CssClassManager } from '@/components/CssClassManager'
+import { DropdownConfigManager } from '@/components/DropdownConfigManager'
+import { QuickGuide } from '@/components/QuickGuide'
+import { PackageManager } from '@/components/PackageManager'
+import { ThemeEditor } from '@/components/ThemeEditor'
+import { SMTPConfigEditor } from '@/components/SMTPConfigEditor'
+import { ErrorLogsTab } from '@/components/level5/tabs/error-logs/ErrorLogsTab'
+import type { AppConfiguration, User } from '@/lib/level-types'
+
+import type { Level4TabConfig } from './config'
+
+interface Level4TabContentProps {
+  tab: Level4TabConfig
+  appConfig: AppConfiguration
+  user: User
+  nerdMode: boolean
+  onSchemasChange: (schemas: any[]) => Promise<void>
+  onWorkflowsChange: (workflows: any[]) => Promise<void>
+  onLuaScriptsChange: (scripts: any[]) => Promise<void>
+}
+
+export function TabContent({
+  tab,
+  appConfig,
+  user,
+  nerdMode,
+  onSchemasChange,
+  onWorkflowsChange,
+  onLuaScriptsChange,
+}: Level4TabContentProps) {
+  if (tab.nerdOnly && !nerdMode) return null
+
+  switch (tab.value) {
+    case 'guide':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <QuickGuide />
+        </TabsContent>
+      )
+    case 'packages':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <PackageManager />
+        </TabsContent>
+      )
+    case 'pages':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <PageRoutesManager />
+        </TabsContent>
+      )
+    case 'hierarchy':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <ComponentHierarchyEditor nerdMode={nerdMode} />
+        </TabsContent>
+      )
+    case 'users':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <UserManagement />
+        </TabsContent>
+      )
+    case 'schemas':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <SchemaEditorLevel4
+            schemas={appConfig.schemas}
+            onSchemasChange={onSchemasChange}
+          />
+        </TabsContent>
+      )
+    case 'workflows':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <WorkflowEditor
+            workflows={appConfig.workflows}
+            onWorkflowsChange={onWorkflowsChange}
+            scripts={appConfig.luaScripts}
+          />
+        </TabsContent>
+      )
+    case 'lua':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaEditor
+            scripts={appConfig.luaScripts}
+            onScriptsChange={onLuaScriptsChange}
+          />
+        </TabsContent>
+      )
+    case 'blocks':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaBlocksEditor
+            scripts={appConfig.luaScripts}
+            onScriptsChange={onLuaScriptsChange}
+          />
+        </TabsContent>
+      )
+    case 'snippets':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaSnippetLibrary />
+        </TabsContent>
+      )
+    case 'css':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <CssClassManager />
+        </TabsContent>
+      )
+    case 'dropdowns':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <DropdownConfigManager />
+        </TabsContent>
+      )
+    case 'database':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <DatabaseManager />
+        </TabsContent>
+      )
+    case 'settings':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <GodCredentialsSettings />
+          <ThemeEditor />
+          <SMTPConfigEditor />
+        </TabsContent>
+      )
+    case 'errorlogs':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <ErrorLogsTab user={user} />
+        </TabsContent>
+      )
+    default:
+      return null
+  }
+}

frontends/nextjs/src/components/level4/tabs/config.ts

@@ -0,0 +1,59 @@
+import {
+  BookOpen,
+  Code,
+  Database as DatabaseIcon,
+  Gear,
+  HardDrives,
+  Lightning,
+  ListDashes,
+  MapTrifold,
+  Package,
+  Palette,
+  Sparkle,
+  SquaresFour,
+  Tree,
+  Users,
+  Warning,
+} from '@phosphor-icons/react'
+
+export type Level4TabValue =
+  | 'guide'
+  | 'packages'
+  | 'pages'
+  | 'hierarchy'
+  | 'users'
+  | 'schemas'
+  | 'workflows'
+  | 'lua'
+  | 'blocks'
+  | 'snippets'
+  | 'css'
+  | 'dropdowns'
+  | 'database'
+  | 'settings'
+  | 'errorlogs'
+
+export interface Level4TabConfig {
+  value: Level4TabValue
+  label: string
+  icon: typeof DatabaseIcon
+  nerdOnly?: boolean
+}
+
+export const level4TabsConfig: Level4TabConfig[] = [
+  { value: 'guide', label: 'Guide', icon: Sparkle },
+  { value: 'packages', label: 'Packages', icon: Package },
+  { value: 'pages', label: 'Page Routes', icon: MapTrifold },
+  { value: 'hierarchy', label: 'Components', icon: Tree },
+  { value: 'users', label: 'Users', icon: Users },
+  { value: 'schemas', label: 'Schemas', icon: DatabaseIcon },
+  { value: 'workflows', label: 'Workflows', icon: Lightning, nerdOnly: true },
+  { value: 'lua', label: 'Lua Scripts', icon: Code, nerdOnly: true },
+  { value: 'blocks', label: 'Lua Blocks', icon: SquaresFour, nerdOnly: true },
+  { value: 'snippets', label: 'Snippets', icon: BookOpen, nerdOnly: true },
+  { value: 'css', label: 'CSS Classes', icon: Palette, nerdOnly: true },
+  { value: 'dropdowns', label: 'Dropdowns', icon: ListDashes, nerdOnly: true },
+  { value: 'database', label: 'Database', icon: HardDrives, nerdOnly: true },
+  { value: 'settings', label: 'Settings', icon: Gear },
+  { value: 'errorlogs', label: 'Error Logs', icon: Warning },
+]