# 07 — Admin shell (layout / nav / chrome)

Platform admin UI lives under `/admin/*` with a **dedicated shell** (not the tenant dashboard layout). This doc covers the shared chrome only — page bodies own their own data/actions.

Stack: **Go chi API + SvelteKit 5 / Svelte / Tailwind** (not Laravel).

## Goals

- Brand sidebar via semantic `--sidebar-*` tokens (russian-violet light / deepened dark).
- **Both themes:** `html.dark` + shared `$lib/theme.svelte`; content uses `bg-background` / `text-foreground` / `bg-card` — not a light-only paint.
- Chart tokens in `layout.css` stay preserved for analytics.
- No sticky `AdminHeader`. Theme via `ThemeToggle` in sidebar footer + mobile chrome.
- No Migration readiness / cutover banner in the shell.
- `/admin` is the **command center** (signals + curated shortcuts) — not a flat tool-card grid.
- Responsive: persistent sidebar ≥ `lg`; off-canvas drawer below; mobile menu hook only in layout.
- Accessible: skip link, `aria-current`, focus-visible rings, mobile focus trap + Escape.

## Files

| Piece | Path |
| --- | --- |
| Admin branch | `apps/web/src/routes/+layout.svelte` (`#admin-shell`) |
| Nav IA catalog | `apps/web/src/lib/admin-nav.ts` |
| Sidebar | `apps/web/src/lib/components/AdminNav.svelte` |
| Drawer state | `apps/web/src/lib/admin-nav-ui.svelte.ts` |
| Theme | `apps/web/src/lib/theme.svelte.ts` + `ThemeToggle.svelte` |
| Command center | `apps/web/src/routes/admin/+page.svelte` |
| Tokens | `apps/web/src/routes/layout.css` |

## Nav IA

Source: `ADMIN_NAV_ROUTES` / `ADMIN_NAV_SECTIONS` in `$lib/admin-nav.ts`.

| Section | Links | Gate |
| --- | --- | --- |
| **Overview** | Command center (`/admin`), Analytics | Analytics: full admin |
| **Directory** | Users & orgs | full admin |
| **Support** | Tickets, Knowledge | Knowledge: full admin |
| **Operations** | Diagnostics, Stuck products | full admin |
| **Commerce** | Billing | full admin |
| **System** | Settings | full admin |

Support-only: Tickets (+ Command center in nav; home redirects to `/admin/support`).

Footer: staff chip · ThemeToggle · Back to app · Sign out.

## Structure

```
[SkipLink]
[#admin-shell]  /* inherits html.dark tokens */
  [AdminNav #admin-sidebar]   w-[15.5rem], bg-sidebar, sidebar-* tokens
  [content lg:ml-[15.5rem]]
    SystemModeBanner / BillingRecoveryBanner
    [mobile] menu + adminPageTitle + ThemeToggle
    <main data-admin-shell="main">
```

## Page chrome contract

Use `PageShell`. Slots: `data-admin-shell="main"`, `data-admin-slot="diagnostics-panels"`, `data-admin-chrome="staff"`.