Files

Santhosh Janardhanan b9cb5170da docs(ui): Add UI layout refactor plan and OpenSpec changes

- Update decision-log with UI layout decisions (Feb 18, 2026)
- Update architecture with frontend layout patterns
- Update config.yaml with TDD, documentation, UI standards rules
- Create p00-api-documentation change (Scribe annotations)
- Create p01-ui-foundation change (types, stores, Lucide)
- Create p02-app-layout change (AppLayout, Sidebar, TopBar)
- Create p03-dashboard-enhancement change (PageHeader, StatCard)
- Create p04-content-patterns change (DataTable, FilterBar)
- Create p05-page-migrations change (page migrations)
- Fix E2E auth tests (11/11 passing)
- Add JWT expiry validation to dashboard guard

2026-02-18 13:03:08 -05:00

1.9 KiB

Raw Blame History

Proposal: App Layout

Overview

Create the main application layout components including collapsible sidebar, top bar, and breadcrumbs. This establishes the structural skeleton that all authenticated pages will use.

Goals

Create AppLayout component that wraps dashboard pages
Create Sidebar component with three states (expanded, collapsed, hidden)
Create TopBar component with breadcrumbs, month selector, user menu
Create Breadcrumbs component with auto-generation from route
Implement responsive behavior (drawer on mobile)
Update root layout to conditionally use AppLayout

Non-Goals

Content components (DataTable, StatCard) - done in p04
Dashboard page implementation - done in p03
Page migrations - done in p05

Priority

HIGH - Required before any page can use new layout

Scope

AppLayout Component

Wraps Sidebar + Main content area
Handles responsive behavior
Slot for page content
Skip for public pages (login)

Sidebar Component

Three visual states: expanded (240px), collapsed (64px), hidden (0px)
Collapsible sections (Planning, Reports, Admin)
Active route highlighting
Role-based visibility (admin section)
Dark mode toggle at bottom
Keyboard shortcut: Cmd/Ctrl + \

TopBar Component

Left: Breadcrumbs
Center: Page title (optional)
Right: Month selector, User menu
Mobile: Hamburger toggle
Sticky positioning

Breadcrumbs Component

Auto-generate from route path
Home icon for root
DaisyUI breadcrumbs styling

Success Criteria

AppLayout renders correctly
Sidebar toggles between states
TopBar displays correctly
Breadcrumbs auto-generate
Responsive drawer works on mobile
Login page exempt from layout
All tests pass

Estimated Effort

4-6 hours

Dependencies

p01-ui-foundation (types, stores, icons, navigation config)

Blocks

p03-dashboard-enhancement
p04-content-patterns
p05-page-migrations

1.9 KiB Raw Blame History