feat: add Discord profile dropdown menu with role display and integrate with admin and form layouts via AdminShellServer.

components/admin-shell.tsx

@@ -16,21 +16,70 @@ import {
   SidebarInset,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
-import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
+import { ClipboardList, Server, LayoutDashboard, LucideIcon } from "lucide-react";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";
 
-export function AdminShell({ children }: { children: React.ReactNode }) {
+interface NavItem {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  isActive: (pathname: string) => boolean;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  {
+    href: "/admin",
+    label: "Dashboard",
+    icon: LayoutDashboard,
+    isActive: (pathname) => pathname === "/admin",
+  },
+  {
+    href: "/admin/form",
+    label: "Form",
+    icon: ClipboardList,
+    isActive: (pathname) => pathname === "/admin/form",
+  },
+  {
+    href: "/admin/backend",
+    label: "Backend",
+    icon: Server,
+    isActive: (pathname) => pathname.startsWith("/admin/backend"),
+  },
+];
+
+export function AdminShell({
+  children,
+  userName,
+  userImage,
+  profile,
+}: {
+  children: React.ReactNode;
+  userName?: string;
+  userImage?: string;
+  profile?: DiscordMemberProfile | null;
+}) {
   const pathname = usePathname();
 
   return (
     <SidebarProvider>
       <div className="flex w-full min-h-screen bg-background text-foreground">
         <Sidebar variant="sidebar" collapsible="icon">
-          <SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
-            <span className="font-bold tracking-wider text-primary text-sm uppercase">
-              Admin
-            </span>
-            <ThemeToggle />
+          <SidebarHeader className="border-b border-border py-4 px-4">
+            <div className="flex flex-row items-center justify-between">
+              <span className="font-bold text-primary text-lg">Admin</span>
+              <div className="flex items-center gap-1">
+                {(userName || profile) && (
+                  <DropdownMenuAvatar
+                    userName={userName || ""}
+                    userImage={userImage || ""}
+                    profile={profile || null}
+                    showName={false}
+                  />
+                )}
+                <ThemeToggle />
+              </div>
+            </div>
           </SidebarHeader>
 
           <SidebarContent>
@@ -38,41 +87,16 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
               <SidebarGroupLabel>Navigation</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={pathname === "/admin"}
-                    >
-                      <Link href="/admin">
-                        <LayoutDashboard className="w-4 h-4" />
-                        <span>Dashboard</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-
-                  <SidebarMenuItem>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={pathname === "/admin/form"}
-                    >
-                      <Link href="/admin/form">
-                        <ClipboardList className="w-4 h-4" />
-                        <span>Form</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-
-                  <SidebarMenuItem>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={pathname.startsWith("/admin/backend")}
-                    >
-                      <Link href="/admin/backend">
-                        <Server className="w-4 h-4" />
-                        <span>Backend</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
+                  {NAV_ITEMS.map(({ href, label, icon: Icon, isActive }) => (
+                    <SidebarMenuItem key={href}>
+                      <SidebarMenuButton asChild isActive={isActive(pathname)}>
+                        <Link href={href}>
+                          <Icon className="w-4 h-4" />
+                          <span>{label}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>
@@ -88,4 +112,4 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
       </div>
     </SidebarProvider>
   );
-}
+}