greeneclipse
8580c996c3
Drop one-shot tmp/axe scripts and agent i18n scratch so the Gitea tree is deployable.
62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
# 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"`.
|