Files
Codewalkers/docs/wireframes/app-layout.md
Lukas May 0ff65b0b02 feat: Rename application from "Codewalk District" to "Codewalkers"
Update all user-facing strings (HTML title, manifest, header logo,
browser title updater), code comments, and documentation references.
Folder name retained as-is.
2026-03-05 12:05:08 +01:00

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] Codewalkers                                                  |
|                                                                            |
|  [Initiatives]  [Agents]  [Inbox]  [Settings]                             |
|   ^^^^^^^^^^                                                               |
|   bg-muted when active                                                     |
+============================================================================+
  • Logo links to /initiatives
  • Active tab gets bg-muted highlight
  • 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.tsx
  • packages/web/src/routes/__root.tsx