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
133 lines
4.8 KiB
Markdown
133 lines
4.8 KiB
Markdown
# Tasks: App Layout
|
|
|
|
## Phase 1: Create Layout Components Directory
|
|
|
|
- [ ] 2.1 Create `src/lib/components/layout/` directory
|
|
|
|
## Phase 2: Sidebar Components
|
|
|
|
### SidebarItem
|
|
- [ ] 2.2 Create `SidebarItem.svelte`
|
|
- [ ] 2.3 Add icon prop (Lucide component)
|
|
- [ ] 2.4 Add label prop
|
|
- [ ] 2.5 Add href prop
|
|
- [ ] 2.6 Add active state styling (current path matching)
|
|
- [ ] 2.7 Handle collapsed state (icon only, tooltip on hover)
|
|
- [ ] 2.8 Write component test: renders with icon and label
|
|
|
|
### SidebarSection
|
|
- [ ] 2.9 Create `SidebarSection.svelte`
|
|
- [ ] 2.10 Add section prop (NavSection type)
|
|
- [ ] 2.11 Add expanded prop (for collapsed sidebar)
|
|
- [ ] 2.12 Render section title
|
|
- [ ] 2.13 Render SidebarItem for each item
|
|
- [ ] 2.14 Write component test: renders all items
|
|
|
|
### Sidebar
|
|
- [ ] 2.15 Create `Sidebar.svelte`
|
|
- [ ] 2.16 Import and use navigationSections
|
|
- [ ] 2.17 Import layoutStore for state
|
|
- [ ] 2.18 Implement three visual states (expanded, collapsed, hidden)
|
|
- [ ] 2.19 Add toggle button in header
|
|
- [ ] 2.20 Add logo/brand in header
|
|
- [ ] 2.21 Implement role-based section visibility
|
|
- [ ] 2.22 Add dark mode toggle in footer
|
|
- [ ] 2.23 Add keyboard shortcut (Cmd/Ctrl + \)
|
|
- [ ] 2.24 Implement CSS transitions
|
|
- [ ] 2.25 Write component test: toggle state works
|
|
- [ ] 2.26 Write component test: role-based visibility
|
|
|
|
## Phase 3: TopBar Components
|
|
|
|
### UserMenu
|
|
- [ ] 2.27 Create `UserMenu.svelte` (migrate from Navigation.svelte)
|
|
- [ ] 2.28 Import authStore for user info
|
|
- [ ] 2.29 Add dropdown with user name/avatar
|
|
- [ ] 2.30 Add logout action
|
|
- [ ] 2.31 Style with DaisyUI dropdown
|
|
|
|
### MonthSelector
|
|
- [ ] 2.32 Create `MonthSelector.svelte`
|
|
- [ ] 2.33 Import periodStore
|
|
- [ ] 2.34 Display current month (format: Feb 2026)
|
|
- [ ] 2.35 Add dropdown with month options (-6 to +6 months)
|
|
- [ ] 2.36 Add Previous/Today/Next quick actions
|
|
- [ ] 2.37 Style with DaisyUI dropdown
|
|
- [ ] 2.38 Write component test: selection updates store
|
|
|
|
### Breadcrumbs
|
|
- [ ] 2.39 Create `Breadcrumbs.svelte`
|
|
- [ ] 2.40 Import $page store for current path
|
|
- [ ] 2.41 Implement generateBreadcrumbs function
|
|
- [ ] 2.42 Render Home icon for root
|
|
- [ ] 2.43 Render segments as links
|
|
- [ ] 2.44 Style last item as current (no link)
|
|
- [ ] 2.45 Write component test: generates correct crumbs
|
|
|
|
### TopBar
|
|
- [ ] 2.46 Create `TopBar.svelte`
|
|
- [ ] 2.47 Import Breadcrumbs, MonthSelector, UserMenu
|
|
- [ ] 2.48 Add hamburger toggle for mobile
|
|
- [ ] 2.49 Implement sticky positioning
|
|
- [ ] 2.50 Style with DaisyUI
|
|
- [ ] 2.51 Write component test: renders all components
|
|
|
|
## Phase 4: AppLayout
|
|
|
|
- [ ] 2.52 Create `AppLayout.svelte`
|
|
- [ ] 2.53 Import Sidebar, TopBar
|
|
- [ ] 2.54 Add slot for page content
|
|
- [ ] 2.55 Implement flex layout (sidebar + main content)
|
|
- [ ] 2.56 Adjust main content margin based on sidebar state
|
|
- [ ] 2.57 Handle responsive behavior (mobile drawer)
|
|
- [ ] 2.58 Write component test: renders children
|
|
- [ ] 2.59 Write component test: sidebar toggle affects layout
|
|
|
|
## Phase 5: Route Integration
|
|
|
|
- [ ] 2.60 Update `src/routes/+layout.svelte`
|
|
- [ ] 2.61 Add conditional AppLayout wrapper
|
|
- [ ] 2.62 Define publicPages array (['/login', '/auth'])
|
|
- [ ] 2.63 Test: login page has NO sidebar
|
|
- [ ] 2.64 Test: dashboard page has sidebar
|
|
|
|
## Phase 6: Responsive & Mobile
|
|
|
|
- [ ] 2.65 Test: Sidebar hidden by default on mobile
|
|
- [ ] 2.66 Test: Hamburger shows sidebar on mobile
|
|
- [ ] 2.67 Test: Sidebar overlays content on mobile (not push)
|
|
- [ ] 2.68 Test: Clicking outside closes sidebar on mobile
|
|
- [ ] 2.69 Add backdrop overlay for mobile drawer
|
|
|
|
## Phase 7: E2E Tests
|
|
|
|
- [ ] 2.70 E2E test: Login redirects to dashboard with sidebar
|
|
- [ ] 2.71 E2E test: Sidebar toggle works
|
|
- [ ] 2.72 E2E test: Theme toggle works
|
|
- [ ] 2.73 E2E test: Month selector updates period store
|
|
- [ ] 2.74 E2E test: Breadcrumbs reflect current route
|
|
|
|
## Phase 8: Verification
|
|
|
|
- [ ] 2.75 Run `npm run check` - no type errors
|
|
- [ ] 2.76 Run `npm run test:unit` - all component tests pass
|
|
- [ ] 2.77 Run `npm run test:e2e` - all E2E tests pass
|
|
- [ ] 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
|
|
- [ ] 2.79 Manual test: Dark mode toggle
|
|
- [ ] 2.80 Manual test: Keyboard shortcut (Cmd/Ctrl + \)
|
|
|
|
## Commits
|
|
|
|
1. `feat(layout): Create SidebarItem component with active state`
|
|
2. `feat(layout): Create SidebarSection component`
|
|
3. `feat(layout): Create Sidebar with three states and theme toggle`
|
|
4. `feat(layout): Create UserMenu component (migrated from Navigation)`
|
|
5. `feat(layout): Create MonthSelector with period store integration`
|
|
6. `feat(layout): Create Breadcrumbs with auto-generation`
|
|
7. `feat(layout): Create TopBar with all components`
|
|
8. `feat(layout): Create AppLayout wrapper component`
|
|
9. `feat(layout): Integrate AppLayout into root layout`
|
|
10. `feat(layout): Add responsive mobile drawer behavior`
|
|
11. `test(layout): Add component tests for all layout components`
|
|
12. `test(e2e): Add E2E tests for layout functionality`
|