Santhosh Janardhanan
b9cb5170da
- 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
67 lines
1.8 KiB
Markdown
67 lines
1.8 KiB
Markdown
# Proposal: UI Foundation
|
|
|
|
## Overview
|
|
Establish the foundational UI building blocks for Headroom's layout system. This includes types, stores, icon library, and theme configuration that all subsequent UI changes will depend on.
|
|
|
|
## Goals
|
|
- Install and configure Lucide icons for Svelte
|
|
- Create layout-related TypeScript types
|
|
- Create layout/period stores for state management
|
|
- Set up theme system (light/dark mode with persistence)
|
|
- Define navigation configuration structure
|
|
|
|
## Non-Goals
|
|
- Creating visual components (done in p02-app-layout)
|
|
- Building actual pages (done in p03+)
|
|
- API documentation (done in p00-api-documentation)
|
|
|
|
## Priority
|
|
**HIGH** - Foundation for all UI changes (p02-p05 depend on this)
|
|
|
|
## Scope
|
|
|
|
### Icon Library
|
|
- Install `lucide-svelte` package
|
|
- Create icon usage patterns/documentation
|
|
- Replace existing inline SVGs where applicable
|
|
|
|
### Types
|
|
- `SidebarState` - 'expanded' | 'collapsed' | 'hidden'
|
|
- `NavItem` - label, href, icon, roles
|
|
- `NavSection` - title, items, roles (for role-based visibility)
|
|
|
|
### Stores
|
|
- `layoutStore` - sidebar state, theme preference
|
|
- `periodStore` - global month/period selection
|
|
|
|
### Theme System
|
|
- DaisyUI theme switching via `data-theme` attribute
|
|
- Light mode default ("light" theme)
|
|
- Dark mode option ("dark" theme)
|
|
- Persistence to localStorage
|
|
- Respect system preference on first visit
|
|
|
|
### Navigation Configuration
|
|
- Centralized navigation structure
|
|
- Role-based visibility for admin section
|
|
|
|
## Success Criteria
|
|
- [ ] Lucide icons installed and working
|
|
- [ ] Types defined and exported
|
|
- [ ] Stores created with localStorage persistence
|
|
- [ ] Theme toggle functional
|
|
- [ ] Navigation config exported
|
|
- [ ] All tests pass
|
|
|
|
## Estimated Effort
|
|
1-2 hours
|
|
|
|
## Dependencies
|
|
- None (foundation change)
|
|
|
|
## Blocks
|
|
- p02-app-layout
|
|
- p03-dashboard-enhancement
|
|
- p04-content-patterns
|
|
- p05-page-migrations
|