Complete screen spec for the Master-Detail Command Center redesign. Covers all four entity types (Users, Groups, Tags, System) across every state: default, create, edit, delete confirmation, empty, and error. Desktop (1440px) and mobile (375px) flows for each entity. Includes a tablet addendum (sections A–D) covering the collapseable 768–1023px panel layout.
goto() pushes the next step; the browser back button pops it+page.svelte reads $page.url.searchParams for v and id; server load pre-fetches the selected entitytitle attribute is sufficient (no custom tooltip needed).width 200ms ease-out on .LP. Collapsed width: 32px. The inner content (overflow: hidden) disappears as the panel shrinks. The handle (.LP-handle) is a sibling element that becomes visible via display: flex when state is collapsed.listCollapsed = true in Svelte state) to give the create form maximum space. Restore list when user navigates away from the create form or saves.localStorage under key admin_list_collapsed. Restore on next visit. Do not persist across breakpoints — desktop always shows full panels regardless of tablet collapse state.transform: translateX(-160px) → translateX(0), duration 180ms ease-out. Dim overlay: background: rgba(0,0,0,.3), fade in 150ms. Tapping overlay or pressing Escape closes flyout.goto('/admin?v=groups')), 2) close flyout immediately (no wait for navigation), 3) list panel loads new entity's items. If selected entity is already active, just dismiss.isTablet = $derived(windowWidth >= 768 && windowWidth < 1024). On desktop (≥1024px) the entity nav always renders at full 120px with labels — the icon strip is tablet-only. On mobile (<768px) both panels are hidden and navigation is handled by push-routing.aria-label="Collapse list panel", aria-expanded attribute toggles. Flyout: role="dialog", aria-modal="true", focus trapped inside while open. Flyout close button: aria-label="Close navigation". Entity icons: aria-label="Users (4 items)".| Trigger | Entity | Behaviour | URL change |
|---|---|---|---|
| Click entity in nav | Any | Load list panel, clear detail, set list title | ?v=users |
| Click list item | Any | Load detail panel for that item; highlight item in list | ?v=users&id=uuid |
| Click "+ New" | Any | Add unsaved placeholder at top of list; open blank create form in detail | ?v=users&id=new |
| Submit create form (success) | Any | List refreshes; new item highlighted; detail switches to edit mode | ?v=users&id=new-uuid |
| Submit edit form (success) | Any | List subtitle updates; "Saved ✓" flashes in footer for 2s | Unchanged |
| Submit form (error) | Any | Inline error banner + field-level errors; changes preserved; button → "Retry save" | Unchanged |
| Click "Delete…" header button | Users, Groups, Tags | Detail panel switches to danger zone; list item turns red | Unchanged |
| Confirm delete (success) | Any | Item removed from list; detail → empty-selection state; count in entity nav decrements | ?v=users |
| Click different list item (dirty form) | Any | Inline warning in detail: "Save or discard first"; block navigation | Unchanged |
| Click "Discard changes" | Any | Form resets to last saved values; unsaved indicator cleared | Unchanged |
| Click System in entity nav | System | List panel hidden; detail fills remaining width with maintenance cards | ?v=system |
| Click "Action…" (System) | System | Inline confirm card expands below the button | Unchanged |
| Confirm system action | System | Button replaced by spinner + progress; on done: success banner with affected count | Unchanged |
| Browser back (mobile) | Any | Pop one step: detail → list → entity picker | URL pops one param |
| Direct URL load with params | Any | Server pre-fetches entity + item; renders correct panel state on first paint | Preserves URL |