Redesign admin sidebar: collapsible categories, icons, role-accurate nav

Regroup the flat 12-link staff sidebar into collapsible category sections
(Content / Moderation / System, with Dashboard and Account ungrouped) and
add a small inline-SVG icon per item. Category collapse state persists in
localStorage and the group holding the active route auto-opens.

Gate each item by role to match server-side enforcement so the sidebar no
longer shows links that would 403: Content is admin/editor, Moderation is
admin/moderator, System (Users, Settings, Hero Editor, Authentication,
Discord Bot, Web Bot Activity) is admin-only. Existing moderator confinement
(Moderation + Account only, plus redirect) is preserved.

Rename "Bot Activity" to "Web Bot Activity" to distinguish the bot-scoring
view from the Discord Bot.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/routes/admin/AdminLayout.jsx

@@ -1,27 +1,87 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'
 
-// `roles` (when present) restricts which roles see a nav item. Items without it
+// Small inline stroke icons (16px, currentColor) — same style as ProviderIcon.
-// are shown to admin/editor as before. Moderators are further confined to just
+// One shared frame keeps them terse; each item just supplies its path(s).
-// their own section + account security (see the redirect effect below).
+function Icon({ children, size = 16 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {children}
+    </svg>
+  )
+}
+const IconHome = () => <Icon><path d="M3 10.5 12 3l9 7.5" /><path d="M5 9.5V21h14V9.5" /></Icon>
+const IconPosts = () => <Icon><path d="M5 3h14v18H5z" /><path d="M8 8h8M8 12h8M8 16h5" /></Icon>
+const IconWiki = () => <Icon><path d="M4 4h9a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" /><path d="M20 4h-2a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h2z" /></Icon>
+const IconActivity = () => <Icon><path d="M3 12h4l3 8 4-16 3 8h4" /></Icon>
+const IconShield = () => <Icon><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" /><path d="M9 12l2 2 4-4" /></Icon>
+const IconUsers = () => <Icon><circle cx="9" cy="8" r="3" /><path d="M3 20a6 6 0 0 1 12 0" /><path d="M16 6a3 3 0 0 1 0 6M17 20a6 6 0 0 0-3-5" /></Icon>
+const IconGear = () => <Icon><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" /></Icon>
+const IconHero = () => <Icon><path d="M3 5h18v14H3z" /><circle cx="8" cy="10" r="1.6" /><path d="M4 18l5-5 3 3 3-4 5 6" /></Icon>
+const IconKey = () => <Icon><circle cx="8" cy="12" r="4" /><path d="M12 12h9M18 12v3M15 12v2" /></Icon>
+const IconBot = () => <Icon><rect x="4" y="8" width="16" height="11" rx="2" /><path d="M12 8V4M8 13h.01M16 13h.01M9 17h6" /></Icon>
+const IconPulse = () => <Icon><path d="M3 12h3l2 6 4-14 2 8h7" /></Icon>
+const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>
+
+// Nav is grouped into collapsible categories. A group with no `title` renders
+// its items ungrouped (Dashboard at top, Account at bottom). Each item's `roles`
+// (when present) matches server-side enforcement so the sidebar never shows a
+// link that would 403; an item without `roles` is visible to everyone.
+// Moderators are further confined to just their section + account (see below).
 const NAV = [
-  { to: '/admin', label: 'Dashboard', end: true },
+  {
-  { to: '/admin/posts', label: 'Posts' },
+    items: [
-  { to: '/admin/wiki', label: 'Wiki' },
+      { to: '/admin', label: 'Dashboard', end: true, icon: IconHome, roles: ['admin', 'editor', 'moderator'] },
-  { to: '/admin/hero', label: 'Hero Editor' },
+    ],
-  { to: '/admin/moderation', label: 'Moderation', roles: ['admin', 'moderator'] },
+  },
-  { to: '/admin/settings', label: 'Settings' },
+  {
-  { to: '/admin/activity', label: 'Activity' },
+    title: 'Content',
-  { to: '/admin/bot-activity', label: 'Bot Activity' },
+    items: [
-  { to: '/admin/discord-bot', label: 'Discord Bot' },
+      { to: '/admin/posts', label: 'Posts', icon: IconPosts, roles: ['admin', 'editor'] },
-  { to: '/admin/auth-providers', label: 'Authentication' },
+      { to: '/admin/wiki', label: 'Wiki', icon: IconWiki, roles: ['admin', 'editor'] },
-  { to: '/admin/users', label: 'Users' },
+      { to: '/admin/activity', label: 'Activity', icon: IconActivity, roles: ['admin', 'editor'] },
-  { to: '/admin/account', label: 'Account' },
+    ],
+  },
+  {
+    title: 'Moderation',
+    items: [
+      { to: '/admin/moderation', label: 'Moderation', icon: IconShield, roles: ['admin', 'moderator'] },
+    ],
+  },
+  {
+    title: 'System',
+    items: [
+      { to: '/admin/users', label: 'Users', icon: IconUsers, roles: ['admin'] },
+      { to: '/admin/settings', label: 'Settings', icon: IconGear, roles: ['admin'] },
+      { to: '/admin/hero', label: 'Hero Editor', icon: IconHero, roles: ['admin'] },
+      { to: '/admin/auth-providers', label: 'Authentication', icon: IconKey, roles: ['admin'] },
+      { to: '/admin/discord-bot', label: 'Discord Bot', icon: IconBot, roles: ['admin'] },
+      { to: '/admin/bot-activity', label: 'Web Bot Activity', icon: IconPulse, roles: ['admin'] },
+    ],
+  },
+  {
+    items: [
+      { to: '/admin/account', label: 'Account', icon: IconUser },
+    ],
+  },
 ]
 
+const COLLAPSE_KEY = 'admin.nav.collapsed'
+
 const TITLES = {
   '/admin': 'Dashboard',
   '/admin/posts': 'Posts',
@@ -30,7 +90,7 @@ const TITLES = {
   '/admin/moderation': 'Moderation',
   '/admin/settings': 'Site Settings',
   '/admin/activity': 'Activity Log',
-  '/admin/bot-activity': 'Bot Activity',
+  '/admin/bot-activity': 'Web Bot Activity',
   '/admin/discord-bot': 'Discord Bot',
   '/admin/auth-providers': 'Authentication',
   '/admin/users': 'Users',
@@ -44,7 +104,9 @@ const navBtnBase = {
   fontFamily: 'var(--sans)',
   fontSize: '0.92rem',
   textDecoration: 'none',
-  display: 'block',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
   transition: 'background .15s,color .15s',
 }
 
@@ -62,11 +124,40 @@ export default function AdminLayout() {
 
   // Moderators only get the moderation section + their own account security.
   const isModerator = user?.role === 'moderator'
-  const navItems = NAV.filter((n) => {
+  const visible = (item) => {
-    if (n.roles && !n.roles.includes(user?.role)) return false
+    if (item.roles && !item.roles.includes(user?.role)) return false
-    if (isModerator) return n.to === '/admin/moderation' || n.to === '/admin/account'
+    if (isModerator) return item.to === '/admin/moderation' || item.to === '/admin/account'
     return true
+  }
+  // Drop items the current role can't see, then drop any now-empty group so an
+  // empty category header never renders.
+  const navGroups = NAV
+    .map((g) => ({ ...g, items: g.items.filter(visible) }))
+    .filter((g) => g.items.length > 0)
+
+  // Accordion: track which titled categories are collapsed. Persist across
+  // reloads; default all-open. The group holding the active route auto-opens.
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return JSON.parse(localStorage.getItem(COLLAPSE_KEY)) || {}
+    } catch {
+      return {}
+    }
   })
+  const toggleGroup = (title) => {
+    setCollapsed((prev) => {
+      const next = { ...prev, [title]: !prev[title] }
+      try {
+        localStorage.setItem(COLLAPSE_KEY, JSON.stringify(next))
+      } catch {
+        /* private mode / quota — collapse is non-essential */
+      }
+      return next
+    })
+  }
+  const activeGroupTitle = navGroups.find((g) =>
+    g.title && g.items.some((i) => (i.end ? location.pathname === i.to : location.pathname.startsWith(i.to)))
+  )?.title
 
   // Confine a moderator who deep-links (or is redirected to the index) to a page
   // outside their remit — the API would 403 anyway, so send them to their home.
@@ -118,22 +209,71 @@ export default function AdminLayout() {
           </div>
         </div>
 
-        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
-          {navItems.map((n) => (
+          {navGroups.map((group, gi) => {
-            <NavLink
+            const links = group.items.map((n) => (
-              key={n.to}
+              <NavLink
-              to={n.to}
+                key={n.to}
-              end={n.end}
+                to={n.to}
-              style={({ isActive }) => ({
+                end={n.end}
-                ...navBtnBase,
+                className="admin-nav-link"
-                background: isActive ? 'var(--blue)' : 'transparent',
+                style={({ isActive }) => ({
-                color: isActive ? 'var(--ink)' : 'var(--muted)',
+                  ...navBtnBase,
-                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+                  background: isActive ? 'var(--blue)' : 'transparent',
-              })}
+                  color: isActive ? 'var(--ink)' : 'var(--muted)',
-            >
+                  borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
-              {n.label}
+                })}
-            </NavLink>
+              >
-          ))}
+                {n.icon && <n.icon />}
+                <span>{n.label}</span>
+              </NavLink>
+            ))
+
+            // Untitled groups (Dashboard, Account) render their links directly.
+            if (!group.title) {
+              return (
+                <div key={`g${gi}`} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {links}
+                </div>
+              )
+            }
+
+            // Titled groups get a collapsible header. The group with the active
+            // route stays open regardless of the stored collapse preference.
+            const isOpen = group.title === activeGroupTitle || !collapsed[group.title]
+            return (
+              <div key={group.title} className="admin-nav-group">
+                <button
+                  type="button"
+                  className="admin-nav-head sans"
+                  onClick={() => toggleGroup(group.title)}
+                  aria-expanded={isOpen}
+                >
+                  <span>{group.title}</span>
+                  <svg
+                    className="admin-nav-chev"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+                    aria-hidden="true"
+                  >
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+                {isOpen && (
+                  <div className="admin-nav-items" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                    {links}
+                  </div>
+                )}
+              </div>
+            )
+          })}
         </nav>
 
         <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>

client/src/styles/theme.css

@@ -688,6 +688,47 @@ button[disabled] {
     grid-template-columns: 1fr;
   }
 }
+/* Admin sidebar — collapsible category sections */
+.admin-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+.admin-nav-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 14px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--dim);
+  font-size: 0.66rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.admin-nav-head:hover {
+  color: var(--muted);
+}
+.admin-nav-chev {
+  transition: transform 0.15s ease;
+  flex: 0 0 auto;
+}
+.admin-nav-items {
+  padding-left: 6px;
+}
+.admin-nav-link > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.admin-nav-link svg {
+  flex: 0 0 16px;
+}
 .wiki-grid {
   display: grid;
   grid-template-columns: 230px 1fr;