feat(layout): finalize p01 and p02 changes
Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user