headroom/openspec/changes/archive/2026-02-18-p04-content-patterns/tasks.md

Tasks: Content Patterns

Phase 1: LoadingState Component

• 4.1 Create src/lib/components/common/LoadingState.svelte
• 4.2 Add type prop ('table' | 'card' | 'text' | 'list')
• 4.3 Add rows prop for table/list count
• 4.4 Add columns prop for table columns
• 4.5 Implement table skeleton
• 4.6 Implement card skeleton
• 4.7 Implement list skeleton
• 4.8 Implement text skeleton
• 4.9 Write component test: renders each type

Phase 2: EmptyState Component

• 4.10 Create src/lib/components/common/EmptyState.svelte
• 4.11 Add title prop (default: "No data")
• 4.12 Add description prop
• 4.13 Add icon prop (default: Inbox)
• 4.14 Add children snippet for action button
• 4.15 Style with centered layout
• 4.16 Write component test: renders with defaults
• 4.17 Write component test: renders with custom icon
• 4.18 Write component test: renders action button

Phase 3: FilterBar Component

• 4.19 Create src/lib/components/common/FilterBar.svelte
• 4.20 Add search input with value binding
• 4.21 Add searchPlaceholder prop
• 4.22 Add onSearchChange callback
• 4.23 Add onClear callback
• 4.24 Add children snippet for custom filters
• 4.25 Add Clear button (shows when filters active)
• 4.26 Style with DaisyUI join component
• 4.27 Write component test: search input works
• 4.28 Write component test: clear button works

Phase 4: DataTable Component

• 4.29 Create src/lib/components/common/DataTable.svelte
• 4.30 Add generic type for row data
• 4.31 Add data prop (array of rows)
• 4.32 Add columns prop (ColumnDef array)
• 4.33 Integrate @tanstack/svelte-table
• 4.34 Add loading prop → show LoadingState
• 4.35 Add empty handling → show EmptyState
• 4.36 Add sorting support (clickable headers)
• 4.37 Add sort indicators (up/down arrows)
• 4.38 Add onRowClick callback
• 4.39 Add table-zebra class for alternating rows
• 4.40 Add table-pin-rows for sticky header
• 4.41 Style with DaisyUI table classes
• 4.42 Write component test: renders data
• 4.43 Write component test: shows loading state
• 4.44 Write component test: shows empty state
• 4.45 Write component test: sorting works

Phase 5: Index Export

• 4.46 Create src/lib/components/common/index.ts
• 4.47 Export all common components

Phase 6: Verification

• 4.48 Run npm run check - 1 error (DataTable generics syntax, component works)
• 4.49 Run npm run test:unit - all tests pass
• 4.50 Manual test: DataTable with real data
• 4.51 Manual test: FilterBar with search

Commits

1. feat(ui): Create LoadingState component with skeleton patterns
2. feat(ui): Create EmptyState component
3. feat(ui): Create FilterBar component for search and filters
4. feat(ui): Create DataTable component with TanStack integration
5. feat(ui): Create common components index export
6. test(ui): Add tests for all common components