Jean-Luc Makiola
261c1f9d02
Archive roadmap, requirements, and phase directories to milestones/. Evolve PROJECT.md with validated requirements and key decisions. Reorganize ROADMAP.md with milestone grouping. Delete REQUIREMENTS.md (fresh for next milestone).
124 lines
5.3 KiB
Markdown
124 lines
5.3 KiB
Markdown
---
|
|
phase: 02-planning-threads
|
|
plan: 02
|
|
subsystem: ui
|
|
tags: [react, tanstack-router, tanstack-query, zustand, tabs, threads, candidates]
|
|
|
|
requires:
|
|
- phase: 02-planning-threads
|
|
provides: Thread and candidate API endpoints at /api/threads
|
|
- phase: 01-foundation-and-collection
|
|
provides: SlideOutPanel, ConfirmDialog, ItemCard, ItemForm, CategoryPicker, ImageUpload, uiStore pattern
|
|
provides:
|
|
- Tabbed home page with gear/planning views
|
|
- Thread list with card UI showing candidate count and price range
|
|
- Thread detail page with candidate card grid
|
|
- Candidate add/edit via slide-out panel with same fields as items
|
|
- Thread resolution flow with confirmation dialog and collection integration
|
|
- TanStack Query hooks for thread and candidate CRUD
|
|
affects: [03-setups-and-dashboard]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [tab navigation via URL search params, dual slide-out panel pattern, cross-query invalidation on resolution]
|
|
|
|
key-files:
|
|
created:
|
|
- src/client/hooks/useThreads.ts
|
|
- src/client/hooks/useCandidates.ts
|
|
- src/client/components/ThreadTabs.tsx
|
|
- src/client/components/ThreadCard.tsx
|
|
- src/client/components/CandidateCard.tsx
|
|
- src/client/components/CandidateForm.tsx
|
|
- src/client/routes/threads/$threadId.tsx
|
|
modified:
|
|
- src/client/stores/uiStore.ts
|
|
- src/client/routes/index.tsx
|
|
- src/client/routes/__root.tsx
|
|
|
|
key-decisions:
|
|
- "Tab navigation uses URL search params (?tab=gear|planning) via TanStack Router validateSearch for shareable URLs"
|
|
- "Candidate panel runs alongside item panel as separate SlideOutPanel instance, controlled by independent uiStore state"
|
|
- "Resolution invalidates threads, items, and totals queries for cross-tab data freshness"
|
|
- "FAB hidden on thread detail pages to avoid confusion between item add and candidate add"
|
|
|
|
patterns-established:
|
|
- "Tab navigation pattern: URL search params with z.enum().catch() for default, ThreadTabs renders underline indicator"
|
|
- "Dual panel pattern: root layout renders two SlideOutPanel instances with independent open/close state"
|
|
- "Cross-query invalidation: useResolveThread invalidates threads + items + totals on success"
|
|
|
|
requirements-completed: [THRD-01, THRD-02, THRD-03, THRD-04]
|
|
|
|
duration: 4min
|
|
completed: 2026-03-15
|
|
---
|
|
|
|
# Phase 2 Plan 02: Thread Frontend UI Summary
|
|
|
|
**Tabbed home page with thread list cards, candidate grid detail view, slide-out candidate CRUD, and resolution flow that adds winners to the collection**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 4 min
|
|
- **Started:** 2026-03-15T10:42:22Z
|
|
- **Completed:** 2026-03-15T10:46:26Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 10
|
|
|
|
## Accomplishments
|
|
- Tabbed home page switching between My Gear collection and Planning thread list
|
|
- Thread cards displaying name, candidate count, creation date, and price range chips
|
|
- Thread detail page with candidate card grid matching ItemCard visual style
|
|
- Candidate add/edit via slide-out panel with all item fields (name, weight, price, category, notes, URL, image)
|
|
- Resolution confirmation dialog that picks winner, creates collection item, and archives thread
|
|
- 63 existing tests still pass with zero regressions
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Hooks, store, tab navigation, and thread list** - `a9d624d` (feat)
|
|
2. **Task 2: Thread detail page with candidate CRUD and resolution flow** - `7d043a8` (feat)
|
|
|
|
## Files Created/Modified
|
|
- `src/client/hooks/useThreads.ts` - TanStack Query hooks for thread CRUD and resolution
|
|
- `src/client/hooks/useCandidates.ts` - TanStack Query mutation hooks for candidate CRUD
|
|
- `src/client/stores/uiStore.ts` - Extended with candidate panel and resolve dialog state
|
|
- `src/client/components/ThreadTabs.tsx` - Tab switcher with active underline indicator
|
|
- `src/client/components/ThreadCard.tsx` - Thread list card with candidate count and price range chips
|
|
- `src/client/components/CandidateCard.tsx` - Candidate card with edit, delete, and pick winner actions
|
|
- `src/client/components/CandidateForm.tsx` - Candidate form with dollar-to-cents conversion
|
|
- `src/client/routes/index.tsx` - Refactored to tabbed HomePage with CollectionView and PlanningView
|
|
- `src/client/routes/threads/$threadId.tsx` - Thread detail page with candidate grid
|
|
- `src/client/routes/__root.tsx` - Added candidate panel, delete dialog, and resolve dialog
|
|
|
|
## Decisions Made
|
|
- Tab navigation uses URL search params (?tab=gear|planning) for shareable/bookmarkable URLs
|
|
- Candidate panel is a separate SlideOutPanel instance with independent state in uiStore
|
|
- Resolution invalidates threads, items, and totals queries to keep cross-tab data fresh
|
|
- FAB hidden on thread detail pages to avoid confusion between item add and candidate add
|
|
- useMatchRoute detects thread detail page in root layout for candidate panel context
|
|
|
|
## Deviations from Plan
|
|
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
None.
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Full thread planning workflow operational end-to-end
|
|
- Thread and candidate UI consumes all API endpoints from Plan 01
|
|
- Ready for Phase 3 (Setups and Dashboard) which may reference threads for impact preview
|
|
|
|
---
|
|
*Phase: 02-planning-threads*
|
|
*Completed: 2026-03-15*
|
|
|
|
## Self-Check: PASSED
|
|
|
|
All 10 files verified present. Both commit hashes (a9d624d, 7d043a8) verified in git log.
|