Santhosh Janardhanan
493cb78173
Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.
87 lines
3.3 KiB
Markdown
87 lines
3.3 KiB
Markdown
# Tasks: UI Foundation
|
|
|
|
## Phase 1: Install Dependencies
|
|
|
|
- [x] 1.1 Install Lucide icons: `npm install lucide-svelte`
|
|
- [x] 1.2 Verify installation in package.json
|
|
- [x] 1.3 Test import in a test file: `import { Menu } from 'lucide-svelte'`
|
|
|
|
## Phase 2: Create Types
|
|
|
|
- [x] 1.4 Create `src/lib/types/` directory if not exists
|
|
- [x] 1.5 Create `src/lib/types/layout.ts`
|
|
- [x] 1.6 Define `SidebarState` type
|
|
- [x] 1.7 Define `NavItem` interface
|
|
- [x] 1.8 Define `NavSection` interface
|
|
- [x] 1.9 Define `Theme` type
|
|
- [x] 1.10 Export all types
|
|
|
|
## Phase 3: Create Stores
|
|
|
|
### Layout Store
|
|
- [x] 1.11 Create `src/lib/stores/layout.ts`
|
|
- [x] 1.12 Implement `sidebarState` writable with localStorage persistence
|
|
- [x] 1.13 Implement `theme` writable with localStorage persistence
|
|
- [x] 1.14 Implement `toggleSidebar()` function
|
|
- [x] 1.15 Implement `setSidebarState()` function
|
|
- [x] 1.16 Implement `toggleTheme()` function
|
|
- [x] 1.17 Implement `setTheme()` function
|
|
- [x] 1.18 Add system preference detection for initial theme
|
|
|
|
### Period Store
|
|
- [x] 1.19 Create `src/lib/stores/period.ts`
|
|
- [x] 1.20 Implement `selectedPeriod` writable with localStorage persistence
|
|
- [x] 1.21 Create `selectedMonth` derived store
|
|
- [x] 1.22 Create `selectedDate` derived store
|
|
- [x] 1.23 Implement `setPeriod()` function
|
|
- [x] 1.24 Implement `previousMonth()` function
|
|
- [x] 1.25 Implement `nextMonth()` function
|
|
- [x] 1.26 Implement `currentMonth()` function
|
|
|
|
## Phase 4: Create Navigation Config
|
|
|
|
- [x] 1.27 Create `src/lib/config/` directory if not exists
|
|
- [x] 1.28 Create `src/lib/config/navigation.ts`
|
|
- [x] 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
|
|
- [x] 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
|
|
- [x] 1.31 Define ADMIN section with `roles: ['superuser']`
|
|
- [x] 1.32 Export `navigationSections` array
|
|
|
|
## Phase 5: Theme System
|
|
|
|
- [x] 1.33 Update `src/app.css` with theme CSS variables
|
|
- [x] 1.34 Add sidebar width CSS variables
|
|
- [x] 1.35 Add theme color-scheme definitions
|
|
- [x] 1.36 Test theme switching in browser console
|
|
|
|
## Phase 6: Testing
|
|
|
|
### Unit Tests
|
|
- [x] 1.37 Write test: layoutStore initializes with default values
|
|
- [x] 1.38 Write test: layoutStore.toggleSidebar cycles through states
|
|
- [x] 1.39 Write test: layoutStore theme toggle works
|
|
- [x] 1.40 Write test: periodStore initializes with current month
|
|
- [x] 1.41 Write test: periodStore.previousMonth decrements correctly
|
|
- [x] 1.42 Write test: periodStore.nextMonth increments correctly
|
|
- [x] 1.43 Write test: navigationSections has correct structure
|
|
|
|
### Component Tests
|
|
- [x] 1.44 Create test: Lucide icon renders correctly
|
|
|
|
## Phase 7: Verification
|
|
|
|
- [x] 1.45 Run `npm run check` - no type errors
|
|
- [x] 1.46 Run `npm run test:unit` - all tests pass
|
|
- [x] 1.47 Verify stores persist to localStorage
|
|
- [x] 1.48 Verify theme applies to document
|
|
|
|
## Commits
|
|
|
|
1. `feat(ui): Install lucide-svelte for icon library`
|
|
2. `feat(ui): Add layout types (SidebarState, NavItem, NavSection, Theme)`
|
|
3. `feat(ui): Create layoutStore for sidebar state and theme management`
|
|
4. `feat(ui): Create periodStore for global month/period selection`
|
|
5. `feat(ui): Add navigation configuration for sidebar menu`
|
|
6. `feat(ui): Add CSS variables for theme and layout`
|
|
7. `test(ui): Add unit tests for layout and period stores`
|