Redesign admin/staff sidebar: collapsible categories, icons, role-accurate nav #45

wtclaude · 2026-07-08T02:55:10Z

wtclaude commented

2026-07-08 02:55:10 +00:00

Summary

Redesigns the left-side navigation in the admin/staff area (/admin). The sidebar was a flat, ungrouped list of 12 links with no hierarchy, no way to collapse anything, and role gating on only one item. This restructures it into collapsible category sections, adds a small icon per item, and makes each item's visibility match the server's role enforcement.

All changes are contained to two files — no routes, server code, or view components were touched.

What changed

The flat NAV array becomes a grouped structure rendered as an accordion:

Dashboard                       (ungrouped, top)
── CONTENT ──                   (collapsible)
   Posts · Wiki · Activity
── MODERATION ──                (collapsible)
   Moderation
── SYSTEM ──                    (collapsible)
   Users · Settings · Hero Editor · Authentication · Discord Bot · Web Bot Activity
Account                         (ungrouped, bottom)

Each titled category has a header button that expands/collapses its items, with a rotating chevron.
Collapse state persists across reloads in localStorage (admin.nav.collapsed).
The category containing the currently active route auto-opens, so navigating never hides the active item.
Each item gained a small 16px inline-SVG icon (same stroke="currentColor" style as ProviderIcon.jsx — no new dependency; icons inherit the active/inactive text color).

Role-accurate visibility

Previously only the Moderation item was role-gated; everything else was shown to both admin and editor, so an editor saw Settings / Users / Authentication / Discord Bot / Bot Activity links that 403 on use. Each item now carries a roles array matching server-side enforcement (server/src/router/v1/admin/admin.routes.js):

Content (Posts, Wiki, Activity) → admin, editor
Moderation → admin, moderator
System (Users, Settings, Hero Editor, Authentication, Discord Bot, Web Bot Activity) → admin
Dashboard → admin, editor, moderator; Account → everyone

Groups whose items are all filtered out for the current role are dropped, so no empty category headers render.

Hero Editor persists via the adminOnly settings endpoints, so it's grouped under System and gated to admins (it would 403 for editors otherwise).

Existing moderator confinement is preserved unchanged — moderators still see only Moderation + Account, and the redirect that bounces them out of other sections still applies.

Rename

"Bot Activity" → "Web Bot Activity" (nav label + header title) to distinguish the bot-scoring / IP-ban view from the Discord Bot.

Files

client/src/routes/admin/AdminLayout.jsx — grouped NAV, inline-SVG icon set, per-item role filtering, accordion collapse state (localStorage + active-route auto-open), updated TITLES.
client/src/styles/theme.css — new .admin-nav-group / -head / -chev / -items / -link classes near .admin-grid; sidebar width (236px) and mobile stacking (max-width: 760px) unchanged; reuses existing color tokens only.

Verification

npm run build (client) passes clean — 200 modules, no errors.
Manually verified in the running app logged in as admin: all categories render, collapse/expand persists across reload, active route's group auto-opens, active-link highlight unchanged, "Web Bot Activity" shows under System.

Notes / possible follow-ups

No shared ROLES constant was introduced (roles remain string literals, matching the rest of the codebase) — a future cleanup could centralize them.
Hero Editor is admin-only today because it writes adminOnly settings. If editors should manage it, a dedicated staff-writable hero endpoint would let it move back into Content.

🤖 Generated with Claude Code

## Summary Redesigns the left-side navigation in the admin/staff area (`/admin`). The sidebar was a **flat, ungrouped list of 12 links** with no hierarchy, no way to collapse anything, and role gating on only one item. This restructures it into **collapsible category sections**, adds a small icon per item, and makes each item's visibility match the server's role enforcement. All changes are contained to two files — no routes, server code, or view components were touched. ## What changed ### Grouped, collapsible navigation The flat `NAV` array becomes a grouped structure rendered as an accordion: ``` Dashboard (ungrouped, top) ── CONTENT ── (collapsible) Posts · Wiki · Activity ── MODERATION ── (collapsible) Moderation ── SYSTEM ── (collapsible) Users · Settings · Hero Editor · Authentication · Discord Bot · Web Bot Activity Account (ungrouped, bottom) ``` - Each titled category has a header button that expands/collapses its items, with a rotating chevron. - Collapse state persists across reloads in `localStorage` (`admin.nav.collapsed`). - The category containing the currently active route auto-opens, so navigating never hides the active item. - Each item gained a small 16px inline-SVG icon (same `stroke="currentColor"` style as `ProviderIcon.jsx` — no new dependency; icons inherit the active/inactive text color). ### Role-accurate visibility Previously only the Moderation item was role-gated; everything else was shown to both admin **and** editor, so an editor saw Settings / Users / Authentication / Discord Bot / Bot Activity links that **403 on use**. Each item now carries a `roles` array matching server-side enforcement (`server/src/router/v1/admin/admin.routes.js`): - **Content** (Posts, Wiki, Activity) → `admin`, `editor` - **Moderation** → `admin`, `moderator` - **System** (Users, Settings, Hero Editor, Authentication, Discord Bot, Web Bot Activity) → `admin` - **Dashboard** → `admin`, `editor`, `moderator`; **Account** → everyone Groups whose items are all filtered out for the current role are dropped, so no empty category headers render. **Hero Editor** persists via the `adminOnly` settings endpoints, so it's grouped under **System** and gated to admins (it would 403 for editors otherwise). Existing **moderator confinement** is preserved unchanged — moderators still see only Moderation + Account, and the redirect that bounces them out of other sections still applies. ### Rename "Bot Activity" → **"Web Bot Activity"** (nav label + header title) to distinguish the bot-scoring / IP-ban view from the Discord Bot. ## Files - `client/src/routes/admin/AdminLayout.jsx` — grouped `NAV`, inline-SVG icon set, per-item role filtering, accordion collapse state (localStorage + active-route auto-open), updated `TITLES`. - `client/src/styles/theme.css` — new `.admin-nav-group / -head / -chev / -items / -link` classes near `.admin-grid`; sidebar width (236px) and mobile stacking (`max-width: 760px`) unchanged; reuses existing color tokens only. ## Verification - `npm run build` (client) passes clean — 200 modules, no errors. - Manually verified in the running app logged in as **admin**: all categories render, collapse/expand persists across reload, active route's group auto-opens, active-link highlight unchanged, "Web Bot Activity" shows under System. ### Notes / possible follow-ups - No shared `ROLES` constant was introduced (roles remain string literals, matching the rest of the codebase) — a future cleanup could centralize them. - Hero Editor is admin-only today because it writes `adminOnly` settings. If editors should manage it, a dedicated staff-writable hero endpoint would let it move back into Content. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

wtclaude added 1 commit 2026-07-08 02:55:13 +00:00

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

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>

whitlocktech approved these changes 2026-07-08 02:56:09 +00:00

whitlocktech merged commit 5b3ab7f282 into main

2026-07-08 02:56:18 +00:00

whitlocktech referenced this issue from a commit

2026-07-08 02:56:18 +00:00

Merge pull request 'Redesign admin/staff sidebar: collapsible categories, icons, role-accurate nav' (#45) from feature/admin-nav-redesign into main

whitlocktech deleted branch feature/admin-nav-redesign

2026-07-08 02:56:19 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/website#45