From 6de8a475d1bf75f3b41e93e59d29ec66a18fd529 Mon Sep 17 00:00:00 2001
From: Patrick Britton <admin@pbritton.dev>
Date: Sun, 8 Feb 2026 18:19:56 -0600
Subject: [PATCH] feat: reorganize admin sidebar into collapsible grouped
 hierarchy (Users & Content, Moderation & Safety, Platform)

---
 admin/src/components/Sidebar.tsx | 165 +++++++++++++++++++++++++++----
 1 file changed, 145 insertions(+), 20 deletions(-)

diff --git a/admin/src/components/Sidebar.tsx b/admin/src/components/Sidebar.tsx
index c766b27..3df8b58 100644
--- a/admin/src/components/Sidebar.tsx
+++ b/admin/src/components/Sidebar.tsx
@@ -6,34 +6,146 @@ import { useAuth } from '@/lib/auth';
 import { cn } from '@/lib/utils';
 import {
   LayoutDashboard, Users, FileText, Shield, ShieldCheck, Scale, Flag,
-  Settings, Activity, LogOut, ChevronLeft, ChevronRight, Sliders, FolderTree, HardDrive, AtSign, Brain, ScrollText, Wrench, Bot,
+  Settings, Activity, LogOut, ChevronLeft, ChevronRight, ChevronDown,
+  Sliders, FolderTree, HardDrive, AtSign, Brain, ScrollText, Wrench, Bot,
+  UserCog, ShieldAlert, Cog,
 } from 'lucide-react';
 import { useState } from 'react';
 
-const navItems = [
+type NavItem = { href: string; label: string; icon: any };
+type NavGroup = { label: string; icon: any; items: NavItem[] };
+type NavEntry = NavItem | NavGroup;
+
+function isGroup(entry: NavEntry): entry is NavGroup {
+  return 'items' in entry;
+}
+
+const navigation: NavEntry[] = [
   { href: '/', label: 'Dashboard', icon: LayoutDashboard },
-  { href: '/users', label: 'Users', icon: Users },
-  { href: '/posts', label: 'Posts', icon: FileText },
-  { href: '/moderation', label: 'Moderation', icon: Shield },
-  { href: '/appeals', label: 'Appeals', icon: Scale },
-  { href: '/reports', label: 'Reports', icon: Flag },
-  { href: '/algorithm', label: 'Algorithm', icon: Sliders },
-  { href: '/categories', label: 'Categories', icon: FolderTree },
-  { href: '/usernames', label: 'Usernames', icon: AtSign },
-  { href: '/ai-moderation', label: 'AI Moderation', icon: Brain },
-  { href: '/ai-audit-log', label: 'AI Audit Log', icon: ScrollText },
-  { href: '/content-tools', label: 'Content Tools', icon: Wrench },
-  { href: '/official-accounts', label: 'Official Accounts', icon: Bot },
-  { href: '/safe-links', label: 'Safe Links', icon: ShieldCheck },
-  { href: '/storage', label: 'Storage', icon: HardDrive },
-  { href: '/system', label: 'System Health', icon: Activity },
-  { href: '/settings', label: 'Settings', icon: Settings },
+  {
+    label: 'Users & Content',
+    icon: UserCog,
+    items: [
+      { href: '/users', label: 'Users', icon: Users },
+      { href: '/posts', label: 'Posts', icon: FileText },
+      { href: '/categories', label: 'Categories', icon: FolderTree },
+      { href: '/official-accounts', label: 'Official Accounts', icon: Bot },
+    ],
+  },
+  {
+    label: 'Moderation & Safety',
+    icon: ShieldAlert,
+    items: [
+      { href: '/moderation', label: 'Moderation Queue', icon: Shield },
+      { href: '/ai-moderation', label: 'AI Moderation', icon: Brain },
+      { href: '/ai-audit-log', label: 'AI Audit Log', icon: ScrollText },
+      { href: '/appeals', label: 'Appeals', icon: Scale },
+      { href: '/reports', label: 'Reports', icon: Flag },
+      { href: '/safe-links', label: 'Safe Links', icon: ShieldCheck },
+      { href: '/content-tools', label: 'Content Tools', icon: Wrench },
+    ],
+  },
+  {
+    label: 'Platform',
+    icon: Cog,
+    items: [
+      { href: '/algorithm', label: 'Algorithm', icon: Sliders },
+      { href: '/usernames', label: 'Usernames', icon: AtSign },
+      { href: '/storage', label: 'Storage', icon: HardDrive },
+      { href: '/system', label: 'System Health', icon: Activity },
+      { href: '/settings', label: 'Settings', icon: Settings },
+    ],
+  },
 ];
 
+function NavGroupSection({
+  group,
+  pathname,
+  collapsed,
+  open,
+  onToggle,
+}: {
+  group: NavGroup;
+  pathname: string;
+  collapsed: boolean;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const Icon = group.icon;
+  const hasActive = group.items.some(
+    (item) => pathname === item.href || pathname.startsWith(item.href)
+  );
+
+  return (
+    <div className="mb-1">
+      <button
+        onClick={onToggle}
+        className={cn(
+          'flex items-center w-full px-4 py-2 mx-2 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors',
+          collapsed ? 'justify-center' : 'justify-between',
+          hasActive ? 'text-brand-600' : 'text-gray-400 hover:text-gray-600'
+        )}
+        style={{ maxWidth: collapsed ? '48px' : 'calc(100% - 16px)' }}
+        title={collapsed ? group.label : undefined}
+      >
+        <div className="flex items-center">
+          <Icon className="w-4 h-4 flex-shrink-0" />
+          {!collapsed && <span className="ml-2">{group.label}</span>}
+        </div>
+        {!collapsed && (
+          <ChevronDown
+            className={cn(
+              'w-3.5 h-3.5 transition-transform duration-200',
+              open ? 'rotate-0' : '-rotate-90'
+            )}
+          />
+        )}
+      </button>
+      {(open || collapsed) && (
+        <div className={collapsed ? '' : 'ml-2'}>
+          {group.items.map((item) => {
+            const isActive =
+              pathname === item.href || pathname.startsWith(item.href);
+            const ItemIcon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  'flex items-center px-4 py-2 mx-2 rounded-lg text-sm font-medium transition-colors mb-0.5',
+                  isActive
+                    ? 'bg-brand-50 text-brand-600'
+                    : 'text-gray-600 hover:bg-warm-200 hover:text-gray-900'
+                )}
+                title={collapsed ? item.label : undefined}
+              >
+                <ItemIcon className="w-5 h-5 flex-shrink-0" />
+                {!collapsed && <span className="ml-3">{item.label}</span>}
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function Sidebar() {
   const pathname = usePathname();
   const { logout } = useAuth();
   const [collapsed, setCollapsed] = useState(false);
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
+    // All groups open by default
+    const defaults: Record<string, boolean> = {};
+    navigation.forEach((entry) => {
+      if (isGroup(entry)) defaults[entry.label] = true;
+    });
+    return defaults;
+  });
+
+  const toggleGroup = (label: string) => {
+    setOpenGroups((prev) => ({ ...prev, [label]: !prev[label] }));
+  };
 
   return (
     <aside
@@ -52,7 +164,20 @@ export default function Sidebar() {
 
       {/* Navigation */}
       <nav className="flex-1 py-4 overflow-y-auto">
-        {navItems.map((item) => {
+        {navigation.map((entry) => {
+          if (isGroup(entry)) {
+            return (
+              <NavGroupSection
+                key={entry.label}
+                group={entry}
+                pathname={pathname}
+                collapsed={collapsed}
+                open={!!openGroups[entry.label]}
+                onToggle={() => toggleGroup(entry.label)}
+              />
+            );
+          }
+          const item = entry;
           const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
           const Icon = item.icon;
           return (
@@ -60,7 +185,7 @@ export default function Sidebar() {
               key={item.href}
               href={item.href}
               className={cn(
-                'flex items-center px-4 py-2.5 mx-2 rounded-lg text-sm font-medium transition-colors mb-0.5',
+                'flex items-center px-4 py-2.5 mx-2 rounded-lg text-sm font-medium transition-colors mb-1',
                 isActive
                   ? 'bg-brand-50 text-brand-600'
                   : 'text-gray-600 hover:bg-warm-200 hover:text-gray-900'