@alepha/devtools 0.16.0 → 0.19.1

package/src/ui/AppRouter.tsx

@@ -1,15 +1,11 @@
 import { $ui, midnightTheme } from "@alepha/ui";
 import {
-  IconApi,
-  IconArchive,
-  IconAtom,
   IconDashboard,
   IconDatabase,
-  IconLogs,
-  IconMessageCircle,
-  IconStack2,
+  IconList,
+  IconSettings,
+  IconSitemap,
   IconTopologyRing,
-  IconVariable,
 } from "@tabler/icons-react";
 import { $page } from "alepha/react/router";
 
@@ -27,79 +23,80 @@ export class AppRouter {
     path: "/",
     label: "Dashboard",
     icon: <IconDashboard />,
-    static: true,
     parent: this.layout,
-    lazy: () => import("./components/DevDashboard.tsx"),
+    lazy: () => import("./components/dashboard/DevDashboard.tsx"),
   });
 
-  actions = $page({
-    path: "/actions",
-    label: "Actions",
-    icon: <IconApi />,
-    static: true,
+  explorer = $page({
+    path: "/explorer",
+    label: "Explorer",
+    icon: <IconSitemap />,
     parent: this.layout,
-    lazy: () => import("./components/actions/DevActionsExplorer.tsx"),
+    lazy: () => import("./components/explorer/DevExplorer.tsx"),
   });
 
-  queues = $page({
-    path: "/queues",
-    label: "Queues",
-    icon: <IconStack2 />,
-    static: true,
+  // Database parent (tabs + NestedView)
+  db = $page({
+    path: "/db",
     parent: this.layout,
-    lazy: () => import("./components/DevQueueMonitor.tsx"),
+    lazy: () => import("./components/database/DevDatabase.tsx"),
   });
 
-  topics = $page({
-    path: "/topics",
-    label: "Topics",
-    icon: <IconMessageCircle />,
-    static: true,
-    parent: this.layout,
-    lazy: () => import("./components/DevTopicsViewer.tsx"),
+  dbErd = $page({
+    path: "/erd",
+    label: "Database",
+    icon: <IconDatabase />,
+    parent: this.db,
+    lazy: () => import("./components/database/DatabaseErd.page.tsx"),
   });
 
-  caches = $page({
-    path: "/caches",
-    label: "Caches",
-    icon: <IconArchive />,
-    static: true,
-    parent: this.layout,
-    lazy: () => import("./components/DevCacheInspector.tsx"),
+  dbEditor = $page({
+    path: "/editor",
+    label: "Database",
+    icon: <IconDatabase />,
+    parent: this.db,
+    lazy: () => import("./components/database/DatabaseEditor.page.tsx"),
   });
 
-  env = $page({
-    path: "/env",
-    label: "Environment",
-    icon: <IconVariable />,
-    static: true,
-    parent: this.layout,
-    lazy: () => import("./components/DevEnvExplorer.tsx"),
+  dbEditorTable = $page({
+    path: "/editor/:table",
+    parent: this.db,
+    lazy: () => import("./components/database/DatabaseEditor.page.tsx"),
   });
 
-  atoms = $page({
-    path: "/atoms",
-    label: "Atoms",
-    icon: <IconAtom />,
-    static: true,
-    parent: this.layout,
-    lazy: () => import("./components/DevAtomsViewer.tsx"),
+  dbEditorRecord = $page({
+    path: "/editor/:table/:id",
+    parent: this.db,
+    lazy: () => import("./components/database/DatabaseEditor.page.tsx"),
   });
 
-  db = $page({
-    path: "/db",
-    label: "DB Studio",
-    icon: <IconDatabase />,
-    static: true,
+  // Configuration parent (tabs + NestedView)
+  conf = $page({
+    path: "/conf",
     parent: this.layout,
-    lazy: () => import("./components/db/DevDbStudio.tsx"),
+    lazy: () => import("./components/configuration/DevConfiguration.tsx"),
+  });
+
+  confEnv = $page({
+    path: "/env",
+    label: "Configuration",
+    icon: <IconSettings />,
+    parent: this.conf,
+    lazy: () => import("./components/configuration/ConfigEnv.page.tsx"),
+  });
+
+  confAtoms = $page({
+    path: "/atoms",
+    label: "Configuration",
+    icon: <IconSettings />,
+    parent: this.conf,
+    lazy: () => import("./components/configuration/ConfigAtoms.page.tsx"),
   });
 
   graph = $page({
     path: "/graph",
     label: "Graph",
     icon: <IconTopologyRing />,
-    static: true,
     parent: this.layout,
     lazy: () => import("./components/graph/DevDependencyGraph.tsx"),
   });
@@ -107,9 +104,8 @@ export class AppRouter {
   logs = $page({
     path: "/logs",
     label: "Logs",
-    icon: <IconLogs />,
-    static: true,
+    icon: <IconList />,
     parent: this.layout,
-    lazy: () => import("./components/DevLogViewer.tsx"),
+    lazy: () => import("./components/logs/DevLogs.tsx"),
   });
 }

package/src/ui/components/DevLayout.tsx

@@ -1,101 +1,121 @@
-import { AdminShell, DarkModeButton, OmnibarButton, ui } from "@alepha/ui";
-import { Flex } from "@mantine/core";
 import {
-  IconApi,
-  IconArchive,
-  IconAtom,
+  ActionButton,
+  DarkModeButton,
+  DashboardShell,
+  Flex,
+  OmnibarButton,
+} from "@alepha/ui";
+import {
+  IconArrowLeft,
   IconDashboard,
   IconDatabase,
-  IconLogs,
-  IconMessageCircle,
-  IconStack2,
+  IconList,
+  IconSettings,
+  IconSitemap,
   IconTopologyRing,
-  IconVariable,
 } from "@tabler/icons-react";
+import { useInject } from "alepha/react";
+import { HttpClient } from "alepha/server";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { devMetadataSchema } from "../../schemas/DevMetadata.ts";
 
 export const DevLayout = () => {
+  const http = useInject(HttpClient);
+  const [entityCount, setEntityCount] = useState<number | null>(null);
+
+  const fetchMetadata = useCallback(async () => {
+    try {
+      const res = await http.fetch("/__devtools/api/metadata", {
+        schema: { response: devMetadataSchema },
+      });
+      setEntityCount(res.data.entities?.length ?? 0);
+    } catch {
+      // silently fail
+    }
+  }, [http]);
+
+  useEffect(() => {
+    fetchMetadata();
+  }, [fetchMetadata]);
+
+  const sidebarItems = useMemo(() => {
+    const items: any[] = [
+      {
+        label: "Dashboard",
+        icon: <IconDashboard />,
+        href: "/",
+      },
+      { type: "divider" },
+      {
+        label: "Explorer",
+        icon: <IconSitemap />,
+        href: "/explorer",
+      },
+    ];
+
+    if (entityCount === null || entityCount > 0) {
+      items.push({
+        label: "Database",
+        icon: <IconDatabase />,
+        href: "/db/erd",
+      });
+    }
+
+    items.push(
+      {
+        label: "Configuration",
+        icon: <IconSettings />,
+        href: "/conf/env",
+      },
+      { type: "divider" },
+      {
+        label: "Graph",
+        icon: <IconTopologyRing />,
+        href: "/graph",
+      },
+      {
+        label: "Logs",
+        icon: <IconList />,
+        href: "/logs",
+      },
+    );
+
+    return items;
+  }, [entityCount]);
+
   return (
-    <AdminShell
-      appShellHeaderProps={{
-        bg: ui.colors.background,
+    <DashboardShell
+      layout={"alt"}
+      appShellMainProps={{
+        style: {
+          display: "flex",
+          flexDirection: "column",
+        },
       }}
-      appShellNavbarProps={{
-        bg: ui.colors.background,
-      }}
-      sidebarResizable
+      footer={<Flex />}
+      navbarFooter={<Flex />}
+      footerHeight={24}
+      headerHeight={60}
+      navbarHeader={() => (
+        <Flex align="center" justify="center" h="100%" w="100%">
+          <ActionButton
+            href="/"
+            target="_self"
+            variant="subtle"
+            color="gray"
+            size="sm"
+          >
+            <IconArrowLeft size={18} />
+          </ActionButton>
+        </Flex>
+      )}
       sidebarProps={{
-        items: [
-          {
-            label: "Dashboard",
-            icon: <IconDashboard />,
-            href: "/",
-          },
-          { type: "divider" },
-          {
-            label: "Actions",
-            icon: <IconApi />,
-            href: "/actions",
-          },
-          {
-            label: "Queues",
-            icon: <IconStack2 />,
-            href: "/queues",
-          },
-          {
-            label: "Topics",
-            icon: <IconMessageCircle />,
-            href: "/topics",
-          },
-          {
-            label: "Caches",
-            icon: <IconArchive />,
-            href: "/caches",
-          },
-          {
-            label: "DB Studio",
-            icon: <IconDatabase />,
-            href: "/db",
-          },
-          { type: "divider" },
-          {
-            label: "Environment",
-            icon: <IconVariable />,
-            href: "/env",
-          },
-          {
-            label: "Atoms",
-            icon: <IconAtom />,
-            href: "/atoms",
-          },
-          { type: "divider" },
-          {
-            label: "Graph",
-            icon: <IconTopologyRing />,
-            href: "/graph",
-          },
-          {
-            label: "Logs",
-            icon: <IconLogs />,
-            href: "/logs",
-          },
-        ],
+        collapsed: true,
+        items: sidebarItems,
       }}
       appBarProps={{
         items: [
           { position: "left", type: "burger" },
-          {
-            position: "left",
-            element: (
-              <Flex
-                h={"60px"}
-                w={"78px"}
-                style={{
-                  marginLeft: "-32px",
-                  borderRight: "1px solid var(--mantine-color-default-border)",
-                }}
-              />
-            ),
-          },
           {
             position: "left",
             element: (

package/src/ui/components/configuration/ConfigAtoms.page.tsx

@@ -0,0 +1,5 @@
+import { ConfigAtoms } from "./ConfigAtoms.tsx";
+
+const ConfigAtomsPage = () => <ConfigAtoms />;
+
+export default ConfigAtomsPage;