docs(03-02): complete setup frontend plan

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 12:52:38 +01:00
parent 67099551d0
commit e1e30ba52b
4 changed files with 148 additions and 13 deletions
--- a/.planning/REQUIREMENTS.md
+++ b/.planning/REQUIREMENTS.md
@@ -29,7 +29,7 @@ Requirements for initial release. Each maps to roadmap phases.

 ### Dashboard

- [ ] **DASH-01**: User sees a dashboard home page with cards linking to collection, threads, and setups
+- [x] **DASH-01**: User sees a dashboard home page with cards linking to collection, threads, and setups

 ## v2 Requirements

@@ -85,7 +85,7 @@ Which phases cover which requirements. Updated during roadmap creation.
 | SETP-01 | Phase 3 | Complete |
 | SETP-02 | Phase 3 | Complete |
 | SETP-03 | Phase 3 | Complete |
-| DASH-01 | Phase 3 | Pending |
+| DASH-01 | Phase 3 | Complete |

 **Coverage:**
 - v1 requirements: 12 total
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -61,7 +61,7 @@ Plans:
  2. User can add and remove collection items from a setup
  3. User can see total weight and cost for a setup, computed live from current item data
  4. User sees a dashboard home page with cards linking to their collection, active threads, and setups
-**Plans:** 1/3 plans executed
+**Plans:** 2/3 plans executed

 Plans:
 - [ ] 03-01-PLAN.md — Backend TDD: setup schema, service, routes, and tests with junction table
@@ -77,4 +77,4 @@ Phases execute in numeric order: 1 -> 2 -> 3
 |-------|----------------|--------|-----------|
 | 1. Foundation and Collection | 4/4 | Complete    | 2026-03-14 |
 | 2. Planning Threads | 3/3 | Complete    | 2026-03-15 |
-| 3. Setups and Dashboard | 1/3 | In Progress|  |
+| 3. Setups and Dashboard | 2/3 | In Progress|  |
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -3,15 +3,15 @@ gsd_state_version: 1.0
 milestone: v1.0
 milestone_name: milestone
 status: in_progress
-stopped_at: Completed 03-01-PLAN.md
+stopped_at: Completed 03-02-PLAN.md
 last_updated: "2026-03-15T11:43:11.000Z"
 last_activity: 2026-03-15 — Completed 03-01 setup backend
 progress:
  total_phases: 3
  completed_phases: 2
  total_plans: 10
-  completed_plans: 8
-  percent: 80
+  completed_plans: 9
+  percent: 90
 ---

 # Project State
@@ -26,11 +26,11 @@ See: .planning/PROJECT.md (updated 2026-03-14)
 ## Current Position

 Phase: 3 of 3 (Setups and Dashboard)
-Plan: 1 of 3 in current phase
+Plan: 2 of 3 in current phase
 Status: In progress
-Last activity: 2026-03-15 — Completed 03-01 setup backend
+Last activity: 2026-03-15 — Completed 03-02 setup frontend

-Progress: [████████░░] 80%
+Progress: [█████████░] 90%

 ## Performance Metrics

@@ -57,6 +57,7 @@ Progress: [████████░░] 80%
 | Phase 02 P02 | 4min | 2 tasks | 10 files |
 | Phase 02 P03 | 1min | 1 tasks | 0 files |
 | Phase 03 P01 | 8min | 2 tasks | 9 files |
+| Phase 03 P02 | 5min | 2 tasks | 14 files |

 ## Accumulated Context

@@ -84,6 +85,10 @@ Recent decisions affecting current work:
 - [Phase 02-03]: All four THRD requirements verified working end-to-end in browser
 - [Phase 03-01]: syncSetupItems uses delete-all + re-insert in transaction for simplicity
 - [Phase 03-01]: SQL COALESCE ensures 0 returned for empty setups instead of null
+- [Phase 03-02]: TotalsBar refactored with optional props for route-aware display
+- [Phase 03-02]: Setup detail computes totals client-side from items array
+- [Phase 03-02]: ItemPicker tracks selections locally, syncs batch on Done
+- [Phase 03-02]: FAB restricted to /collection gear tab only

 ### Pending Todos

@@ -96,6 +101,6 @@ None yet.

 ## Session Continuity

-Last session: 2026-03-15T11:43:11.000Z
-Stopped at: Completed 03-01-PLAN.md
-Resume file: .planning/phases/03-setups-and-dashboard/03-02-PLAN.md
+Last session: 2026-03-15T11:50:33.000Z
+Stopped at: Completed 03-02-PLAN.md
+Resume file: .planning/phases/03-setups-and-dashboard/03-03-PLAN.md
--- a/.planning/phases/03-setups-and-dashboard/03-02-SUMMARY.md
+++ b/.planning/phases/03-setups-and-dashboard/03-02-SUMMARY.md
@@ -0,0 +1,130 @@
+---
+phase: 03-setups-and-dashboard
+plan: 02
+subsystem: ui
+tags: [tanstack-router, react, zustand, tanstack-query, slide-out-panel]
+
+requires:
+  - phase: 03-setups-and-dashboard
+    provides: Setup CRUD API at /api/setups, junction table setup_items
+  - phase: 01-collection-core
+    provides: ItemCard, CategoryHeader, TotalsBar, SlideOutPanel, formatters
+  - phase: 02-planning-threads
+    provides: ThreadCard, ThreadTabs, useThreads hooks
+provides:
+  - Dashboard page at / with three summary cards (Collection, Planning, Setups)
+  - Collection page at /collection with gear/planning tabs (moved from /)
+  - Setups list page at /setups with inline create form
+  - Setup detail page at /setups/:id with item picker and category-grouped items
+  - ItemPicker component for checklist-based item assignment
+  - Route-aware TotalsBar with optional stats/linkTo/title props
+  - Setup query/mutation hooks (useSetups, useSetup, useCreateSetup, etc.)
+affects: [03-03-visual-verification]
+
+tech-stack:
+  added: []
+  patterns: [route-aware-totals-bar, checklist-picker-in-slide-panel, dashboard-card-grid]
+
+key-files:
+  created:
+    - src/client/routes/collection/index.tsx
+    - src/client/routes/setups/index.tsx
+    - src/client/routes/setups/$setupId.tsx
+    - src/client/components/DashboardCard.tsx
+    - src/client/components/SetupCard.tsx
+    - src/client/components/ItemPicker.tsx
+    - src/client/hooks/useSetups.ts
+  modified:
+    - src/client/routes/index.tsx
+    - src/client/routes/__root.tsx
+    - src/client/components/TotalsBar.tsx
+    - src/client/components/ItemCard.tsx
+    - src/client/hooks/useItems.ts
+    - src/client/stores/uiStore.ts
+    - src/client/routeTree.gen.ts
+
+key-decisions:
+  - "TotalsBar refactored to accept optional props instead of creating separate components per page"
+  - "Setup detail computes totals client-side from items array rather than separate API call"
+  - "ItemPicker uses local state for selections, syncs on Done button press"
+  - "FAB only visible on /collection gear tab, hidden on dashboard and setups"
+
+patterns-established:
+  - "Route-aware TotalsBar: optional stats/linkTo/title props with backward-compatible default"
+  - "Checklist picker pattern: SlideOutPanel with category-grouped checkboxes and Done/Cancel"
+  - "Dashboard card pattern: DashboardCard with icon, stats, and optional empty text"
+
+requirements-completed: [SETP-01, SETP-02, SETP-03, DASH-01]
+
+duration: 5min
+completed: 2026-03-15
+---
+
+# Phase 3 Plan 2: Setup Frontend Summary
+
+**Dashboard with summary cards, setup CRUD UI with category-grouped item picker, and route-aware TotalsBar**
+
+## Performance
+
+- **Duration:** 5 min
+- **Started:** 2026-03-15T11:45:33Z
+- **Completed:** 2026-03-15T11:50:33Z
+- **Tasks:** 2
+- **Files modified:** 14
+
+## Accomplishments
+- Dashboard at / with three summary cards linking to Collection, Planning, and Setups
+- Full setup CRUD UI: list page with inline create, detail page with item management
+- ItemPicker component in SlideOutPanel for checklist-based item assignment to setups
+- Route-aware TotalsBar that shows contextual stats per page
+- Navigation restructure moving collection to /collection with GearBox title linking home
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Navigation restructure, TotalsBar refactor, and setup hooks** - `86a7a0d` (feat)
+2. **Task 2: Setup list page, detail page, and item picker** - `6709955` (feat)
+
+## Files Created/Modified
+- `src/client/routes/index.tsx` - Dashboard page with three DashboardCard components
+- `src/client/routes/collection/index.tsx` - Collection page with gear/planning tabs (moved from /)
+- `src/client/routes/setups/index.tsx` - Setup list page with inline create form and SetupCard grid
+- `src/client/routes/setups/$setupId.tsx` - Setup detail with category-grouped items, totals bar, item picker, delete
+- `src/client/routes/__root.tsx` - Route-aware TotalsBar props, FAB visibility, resolve navigation update
+- `src/client/components/TotalsBar.tsx` - Refactored to accept optional stats/linkTo/title props
+- `src/client/components/DashboardCard.tsx` - Dashboard summary card with icon, stats, empty text
+- `src/client/components/SetupCard.tsx` - Setup list card with name, item count, weight, cost
+- `src/client/components/ItemPicker.tsx` - Checklist picker in SlideOutPanel for item selection
+- `src/client/components/ItemCard.tsx` - Added optional onRemove prop for setup item removal
+- `src/client/hooks/useSetups.ts` - TanStack Query hooks for setup CRUD and item sync/remove
+- `src/client/hooks/useItems.ts` - Added setups invalidation on item update/delete
+- `src/client/stores/uiStore.ts` - Added itemPicker and confirmDeleteSetup UI state
+- `src/client/routeTree.gen.ts` - Updated with new collection/setups routes
+
+## Decisions Made
+- TotalsBar refactored with optional props rather than creating separate components per page
+- Setup detail computes totals client-side from items array (avoids extra API call)
+- ItemPicker tracks selections locally, syncs batch on Done (not per-toggle)
+- FAB restricted to /collection gear tab only (hidden on dashboard and setups)
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+
+None
+
+## User Setup Required
+
+None - no external service configuration required.
+
+## Next Phase Readiness
+- All frontend features complete, ready for visual verification in Plan 03
+- All 87 backend tests still passing
+- TypeScript compiles clean (only pre-existing warnings in CategoryPicker/OnboardingWizard)
+
+---
+*Phase: 03-setups-and-dashboard*
+*Completed: 2026-03-15*