Santhosh Janardhanan
493cb78173
Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.
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
|