docs(ui): Add UI layout refactor plan and OpenSpec changes

- 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
2026-02-18 13:03:08 -05:00
parent de2d83092e
commit b9cb5170da
29 changed files with 3341 additions and 59 deletions
--- a/openspec/changes/p04-content-patterns/design.md
+++ b/openspec/changes/p04-content-patterns/design.md
@@ -0,0 +1,358 @@
+# Design: Content Patterns
+
+## DataTable Component
+
+### `src/lib/components/common/DataTable.svelte`
+```svelte
+<script lang="ts" generics="T extends Record<string, any>">
+  import { 
+    createTable, 
+    createRender,
+    type ColumnDef,
+    type SortingState
+  } from '@tanstack/svelte-table';
+  import { writable } from 'svelte/store';
+  import EmptyState from './EmptyState.svelte';
+  import LoadingState from './LoadingState.svelte';
+  import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-svelte';
+
+  interface Props {
+    data: T[];
+    columns: ColumnDef<T>[];
+    loading?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    onRowClick?: (row: T) => void;
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+  }
+
+  let { 
+    data, 
+    columns, 
+    loading = false,
+    emptyTitle = 'No data',
+    emptyDescription = 'No records found.',
+    onRowClick,
+    selectable = false,
+    selectedIds = [],
+    onSelectionChange
+  }: Props = $props();
+
+  const sorting = writable<SortingState>([]);
+  
+  const table = createTable({
+    data,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: (updater) => {
+      sorting.update(updater);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  $derived rows = $table.getRowModel().rows;
+  $derived isEmpty = !loading && rows.length === 0;
+</script>
+
+<div class="data-table overflow-x-auto">
+  {#if loading}
+    <LoadingState type="table" rows={5} columns={columns.length} />
+  {:else if isEmpty}
+    <EmptyState title={emptyTitle} description={emptyDescription} />
+  {:else}
+    <table class="table table-zebra table-pin-rows">
+      <thead>
+        {#each $table.getHeaderGroups() as headerGroup}
+          <tr>
+            {#each headerGroup.headers as header}
+              <th 
+                class={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
+                onclick={header.column.getToggleSortingHandler()}
+              >
+                <div class="flex items-center gap-2">
+                  {header.column.columnDef.header}
+                  {#if header.column.getCanSort()}
+                    {#if $sorting.find(s => s.id === header.column.id)?.desc === true}
+                      <ChevronDown size={14} />
+                    {:else if $sorting.find(s => s.id === header.column.id)?.desc === false}
+                      <ChevronUp size={14} />
+                    {:else}
+                      <ChevronsUpDown size={14} class="opacity-50" />
+                    {/if}
+                  {/if}
+                </div>
+              </th>
+            {/each}
+          </tr>
+        {/each}
+      </thead>
+      <tbody>
+        {#each rows as row}
+          <tr 
+            class={onRowClick ? 'cursor-pointer hover:bg-base-200' : ''}
+            onclick={() => onRowClick?.(row.original)}
+          >
+            {#each row.getVisibleCells() as cell}
+              <td>
+                {@html cell.renderCell()}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+```
+
+---
+
+## FilterBar Component
+
+### `src/lib/components/common/FilterBar.svelte`
+```svelte
+<script lang="ts">
+  import { Search, X } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    searchValue?: string;
+    searchPlaceholder?: string;
+    onSearchChange?: (value: string) => void;
+    onClear?: () => void;
+    children?: Snippet; // Custom filters
+  }
+
+  let { 
+    searchValue = '', 
+    searchPlaceholder = 'Search...',
+    onSearchChange,
+    onClear,
+    children 
+  }: Props = $props();
+
+  $derived hasFilters = searchValue || children;
+</script>
+
+<div class="filter-bar flex flex-wrap items-center gap-3 mb-4">
+  <!-- Search Input -->
+  <div class="join">
+    <input 
+      type="text" 
+      class="input input-sm join-item w-64"
+      placeholder={searchPlaceholder}
+      value={searchValue}
+      oninput={(e) => onSearchChange?.(e.currentTarget.value)}
+    />
+    <button class="btn btn-sm join-item" aria-label="Search">
+      <Search size={16} />
+    </button>
+  </div>
+
+  <!-- Custom Filters Slot -->
+  {#if children}
+    {@render children()}
+  {/if}
+
+  <!-- Clear Button -->
+  {#if hasFilters}
+    <button 
+      class="btn btn-ghost btn-sm gap-1"
+      onclick={() => {
+        onSearchChange?.('');
+        onClear?.();
+      }}
+    >
+      <X size={14} />
+      Clear
+    </button>
+  {/if}
+</div>
+```
+
+---
+
+## EmptyState Component
+
+### `src/lib/components/common/EmptyState.svelte`
+```svelte
+<script lang="ts">
+  import { Inbox } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    icon?: typeof Inbox;
+    children?: Snippet; // Action button
+  }
+
+  let { 
+    title = 'No data', 
+    description = 'No records found.',
+    icon: Icon = Inbox,
+    children 
+  }: Props = $props();
+</script>
+
+<div class="empty-state flex flex-col items-center justify-center py-12 text-center">
+  <div class="text-base-content/30 mb-4">
+    <Icon size={48} />
+  </div>
+  <h3 class="text-lg font-medium text-base-content/70">{title}</h3>
+  <p class="text-sm text-base-content/50 mt-1 max-w-sm">{description}</p>
+  {#if children}
+    <div class="mt-4">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+```
+
+---
+
+## LoadingState Component
+
+### `src/lib/components/common/LoadingState.svelte`
+```svelte
+<script lang="ts">
+  interface Props {
+    type?: 'table' | 'card' | 'text' | 'list';
+    rows?: number;
+    columns?: number;
+  }
+
+  let { type = 'text', rows = 3, columns = 4 }: Props = $props();
+</script>
+
+<div class="loading-state" data-type={type}>
+  {#if type === 'table'}
+    <div class="space-y-2">
+      <!-- Header -->
+      <div class="flex gap-4">
+        {#each Array(columns) as _}
+          <div class="skeleton h-8 flex-1"></div>
+        {/each}
+      </div>
+      <!-- Rows -->
+      {#each Array(rows) as _}
+        <div class="flex gap-4">
+          {#each Array(columns) as _}
+            <div class="skeleton h-10 flex-1"></div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  {:else if type === 'card'}
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body">
+        <div class="skeleton h-6 w-1/2 mb-2"></div>
+        <div class="skeleton h-4 w-full mb-1"></div>
+        <div class="skeleton h-4 w-3/4"></div>
+      </div>
+    </div>
+  {:else if type === 'list'}
+    <div class="space-y-3">
+      {#each Array(rows) as _}
+        <div class="flex items-center gap-3">
+          <div class="skeleton h-10 w-10 rounded-full"></div>
+          <div class="flex-1">
+            <div class="skeleton h-4 w-1/2 mb-1"></div>
+            <div class="skeleton h-3 w-1/4"></div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <!-- text -->
+    <div class="space-y-2">
+      <div class="skeleton h-4 w-full"></div>
+      <div class="skeleton h-4 w-5/6"></div>
+      <div class="skeleton h-4 w-4/6"></div>
+    </div>
+  {/if}
+</div>
+```
+
+---
+
+## File Structure
+```
+src/lib/components/common/
+├── DataTable.svelte      # NEW
+├── FilterBar.svelte      # NEW
+├── EmptyState.svelte     # NEW
+├── LoadingState.svelte   # NEW
+└── StatCard.svelte       # (from p03)
+```
+
+---
+
+## Usage Examples
+
+### DataTable Usage
+```svelte
+<script>
+  import DataTable from '$lib/components/common/DataTable.svelte';
+  import type { ColumnDef } from '@tanstack/svelte-table';
+
+  const columns: ColumnDef<TeamMember>[] = [
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'role', header: 'Role' },
+    { accessorKey: 'hourlyRate', header: 'Rate' },
+  ];
+
+  let data = $state([]);
+  let loading = $state(true);
+
+  onMount(async () => {
+    data = await fetchTeamMembers();
+    loading = false;
+  });
+</script>
+
+<DataTable 
+  {data} 
+  {columns} 
+  {loading}
+  emptyTitle="No team members"
+  emptyDescription="Add your first team member to get started."
+  onRowClick={(row) => navigate(`/team-members/${row.id}`)}
+/>
+```
+
+### FilterBar Usage
+```svelte
+<script>
+  import FilterBar from '$lib/components/common/FilterBar.svelte';
+
+  let search = $state('');
+  let statusFilter = $state('all');
+
+  const statuses = [
+    { value: 'all', label: 'All Statuses' },
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+  ];
+</script>
+
+<FilterBar 
+  searchValue={search}
+  searchPlaceholder="Search team members..."
+  onSearchChange={(v) => search = v}
+>
+  <select 
+    class="select select-sm"
+    bind:value={statusFilter}
+  >
+    {#each statuses as status}
+      <option value={status.value}>{status.label}</option>
+    {/each}
+  </select>
+</FilterBar>
+```
--- a/openspec/changes/p04-content-patterns/proposal.md
+++ b/openspec/changes/p04-content-patterns/proposal.md
@@ -0,0 +1,64 @@
+# Proposal: Content Patterns
+
+## Overview
+Create reusable content components for data-dense views: DataTable, FilterBar, EmptyState, and LoadingState.
+
+## Goals
+- Create DataTable component wrapping TanStack Table with DaisyUI styling
+- Create FilterBar component for reusable filter patterns
+- Create EmptyState component for no-data placeholders
+- Create LoadingState component with skeleton patterns
+
+## Non-Goals
+- Page implementations (done in p05)
+- Specific business logic
+
+## Priority
+**MEDIUM** - Reusable patterns for pages
+
+## Scope
+
+### DataTable Component
+- Wraps @tanstack/svelte-table
+- DaisyUI table styling
+- Sorting support
+- Pagination support
+- Row selection (optional)
+- Loading state
+- Empty state integration
+
+### FilterBar Component
+- Search input
+- Filter dropdowns
+- Date range picker integration
+- Clear filters button
+- Slot for custom filters
+
+### EmptyState Component
+- Icon display
+- Title and description
+- Optional action button
+- Consistent styling
+
+### LoadingState Component
+- Skeleton patterns for different content types
+- Table skeleton
+- Card skeleton
+- Text skeleton
+
+## Success Criteria
+- [ ] DataTable created with TanStack integration
+- [ ] FilterBar created with search and dropdowns
+- [ ] EmptyState created with icon and action
+- [ ] LoadingState created with skeletons
+- [ ] All tests pass
+
+## Estimated Effort
+3-4 hours
+
+## Dependencies
+- p02-app-layout
+- p03-dashboard-enhancement (can start in parallel)
+
+## Blocks
+- p05-page-migrations
--- a/openspec/changes/p04-content-patterns/tasks.md
+++ b/openspec/changes/p04-content-patterns/tasks.md
@@ -0,0 +1,79 @@
+# 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` - no type errors
+- [ ] 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`