feat: simplify admin workspace

components/admin-shell-server.tsx

@@ -4,7 +4,13 @@ import { getSessionDiscordId } from "@/lib/auth/auth";
 import { getDiscordMemberProfile } from "@/lib/discord/discord";
 import { AdminShell } from "@/components/admin-shell";
 
-export async function AdminShellServer({ children }: { children: React.ReactNode }) {
+export async function AdminShellServer({
+  children,
+  healthStatus,
+}: {
+  children: React.ReactNode;
+  healthStatus?: React.ReactNode;
+}) {
   const session = await getServerSession(authOptions);
   const discordId = getSessionDiscordId(session);
   let profile = null;
@@ -18,6 +24,7 @@ export async function AdminShellServer({ children }: { children: React.ReactNode
       userName={session?.user?.name ?? ""}
       userImage={session?.user?.image ?? ""}
       profile={profile}
+      healthStatus={healthStatus}
     >
       {children}
     </AdminShell>

components/admin-shell.tsx

@@ -8,6 +8,7 @@ import {
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuItem,
   SidebarMenuButton,
@@ -17,8 +18,8 @@ import {
 } from "@/components/ui/sidebar";
 import {
   ClipboardList,
+  House,
   KeyRound,
-  LayoutDashboard,
   LucideIcon,
   Server,
   Upload,
@@ -34,37 +35,52 @@ interface NavItem {
   disabled?: boolean;
 }
 
-const NAV_ITEMS: NavItem[] = [
+const NAV_GROUPS: { label: string; items: NavItem[] }[] = [
   {
-    href: "/admin",
-    label: "Dashboard",
-    icon: LayoutDashboard,
-    isActive: (pathname) => pathname === "/admin",
+    label: "Workspace",
+    items: [
+      {
+        href: "/admin",
+        label: "Home",
+        icon: House,
+        isActive: (pathname) => pathname === "/admin",
+      },
+      {
+        href: "/admin/form",
+        label: "Forms",
+        icon: ClipboardList,
+        isActive: (pathname) => pathname.startsWith("/admin/form"),
+      },
+    ],
   },
   {
-    href: "/admin/form",
-    label: "Form",
-    icon: ClipboardList,
-    isActive: (pathname) => pathname === "/admin/form",
+    label: "Operations",
+    items: [
+      {
+        href: "/admin/backend",
+        label: "Backend",
+        icon: Server,
+        isActive: (pathname) => pathname.startsWith("/admin/backend"),
+      },
+      {
+        href: "/admin/upload",
+        label: "Upload",
+        icon: Upload,
+        isActive: (pathname) => pathname.startsWith("/admin/upload"),
+        disabled: true,
+      },
+    ],
   },
   {
-    href: "/admin/backend",
-    label: "Backend",
-    icon: Server,
-    isActive: (pathname) => pathname.startsWith("/admin/backend"),
-  },
-  {
-    href: "/admin/upload",
-    label: "Upload",
-    icon: Upload,
-    isActive: (pathname) => pathname.startsWith("/admin/upload"),
-    disabled: true,
-  },
-  {
-    href: "/admin/login",
-    label: "Login",
-    icon: KeyRound,
-    isActive: (pathname) => pathname.startsWith("/admin/login"),
+    label: "Platform access",
+    items: [
+      {
+        href: "/admin/login",
+        label: "Login",
+        icon: KeyRound,
+        isActive: (pathname) => pathname.startsWith("/admin/login"),
+      },
+    ],
   },
 ];
 
@@ -73,11 +89,13 @@ export function AdminShell({
   userName,
   userImage,
   profile,
+  healthStatus,
 }: {
   children: React.ReactNode;
   userName?: string;
   userImage?: string;
   profile?: DiscordMemberProfile | null;
+  healthStatus?: React.ReactNode;
 }) {
   const pathname = usePathname();
 
@@ -105,29 +123,37 @@ export function AdminShell({
           </SidebarHeader>
 
           <SidebarContent>
-            <SidebarGroup>
-              <SidebarGroupContent>
-                <SidebarMenu>
-                  {NAV_ITEMS.map(({ href, label, icon: Icon, isActive, disabled }) => (
-                    <SidebarMenuItem key={href}>
-                      {disabled ? (
-                        <SidebarMenuButton disabled tooltip={`${label} temporarily disabled`}>
-                          <Icon />
-                          <span>{label}</span>
-                        </SidebarMenuButton>
-                      ) : (
-                        <SidebarMenuButton asChild isActive={isActive(pathname)}>
-                          <Link href={href}>
+            {healthStatus}
+            {NAV_GROUPS.map((group) => (
+              <SidebarGroup key={group.label}>
+                <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {group.items.map(({ href, label, icon: Icon, isActive, disabled }) => (
+                      <SidebarMenuItem key={href}>
+                        {disabled ? (
+                          <SidebarMenuButton disabled tooltip={`${label} temporarily disabled`}>
                             <Icon />
                             <span>{label}</span>
-                          </Link>
-                        </SidebarMenuButton>
-                      )}
-                    </SidebarMenuItem>
-                  ))}
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
+                          </SidebarMenuButton>
+                        ) : (
+                          <SidebarMenuButton
+                            asChild
+                            isActive={isActive(pathname)}
+                            tooltip={label}
+                          >
+                            <Link href={href}>
+                              <Icon />
+                              <span>{label}</span>
+                            </Link>
+                          </SidebarMenuButton>
+                        )}
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            ))}
           </SidebarContent>
         </Sidebar>