# 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