89db580ca4
Covers: app layout, initiatives list, initiative detail (4 tabs), agents page, inbox, settings (health + projects), and all dialogs.
3.4 KiB
3.4 KiB
App Layout
Global shell wrapping all pages. Fixed header with navigation, scrollable content area.
+============================================================================+
| CODEWALK DISTRICT |
|----------------------------------------------------------------------------|
| [ Initiatives ] [ Agents ] [ Inbox ] [ Settings ] |
+============================================================================+
| |
| max-w-7xl padded content |
| |
| <Page Outlet> |
| |
| |
| |
| |
| |
| |
| |
| |
+============================================================================+
Header Bar (56px, sticky, backdrop-blur)
+============================================================================+
| [logo] Codewalk District |
| |
| [Initiatives] [Agents] [Inbox] [Settings] |
| ^^^^^^^^^^ |
| bg-muted when active |
+============================================================================+
- Logo links to
/initiatives - Active tab gets
bg-mutedhighlight - Tabs are horizontal links below the wordmark
Error States
404 Page
+============================================================================+
| CODEWALK DISTRICT |
| [ Initiatives ] [ Agents ] [ Inbox ] [ Settings ] |
+============================================================================+
| |
| |
| (!) Page not found |
| |
| [ Back to Dashboard ] |
| |
| |
+============================================================================+
Components
<Toaster>(sonner) renders globally for toast notifications (bottom-right)<ErrorBoundary>wraps the outlet
Source
packages/web/src/layouts/AppLayout.tsxpackages/web/src/routes/__root.tsx