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).
143 lines
5.7 KiB
Markdown
143 lines
5.7 KiB
Markdown
---
|
|
phase: 01-foundation-and-collection
|
|
plan: 03
|
|
subsystem: ui
|
|
tags: [react, tanstack-query, zustand, tailwind, combobox, slide-out-panel, crud-ui]
|
|
|
|
requires:
|
|
- phase: 01-foundation-and-collection/01
|
|
provides: Project scaffold, shared types, TanStack Router routes
|
|
- phase: 01-foundation-and-collection/02
|
|
provides: Item/category/totals API endpoints, image upload endpoint
|
|
provides:
|
|
- Complete collection UI with card grid grouped by category
|
|
- Slide-out panel for add/edit items with all fields
|
|
- Category picker combobox with search and inline creation
|
|
- Confirm delete dialog
|
|
- Image upload component with preview
|
|
- Sticky totals bar with global weight/cost/count
|
|
- TanStack Query hooks for items, categories, and totals
|
|
- Zustand UI store for panel and dialog state
|
|
- API fetch wrapper with error handling
|
|
affects: [01-04]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [tanstack-query-hooks, zustand-ui-store, fetch-wrapper, combobox-aria, slide-out-panel]
|
|
|
|
key-files:
|
|
created:
|
|
- src/client/lib/api.ts
|
|
- src/client/lib/formatters.ts
|
|
- src/client/hooks/useItems.ts
|
|
- src/client/hooks/useCategories.ts
|
|
- src/client/hooks/useTotals.ts
|
|
- src/client/stores/uiStore.ts
|
|
- src/client/components/TotalsBar.tsx
|
|
- src/client/components/CategoryHeader.tsx
|
|
- src/client/components/ItemCard.tsx
|
|
- src/client/components/ConfirmDialog.tsx
|
|
- src/client/components/ImageUpload.tsx
|
|
- src/client/components/CategoryPicker.tsx
|
|
- src/client/components/SlideOutPanel.tsx
|
|
- src/client/components/ItemForm.tsx
|
|
modified:
|
|
- src/client/routes/__root.tsx
|
|
- src/client/routes/index.tsx
|
|
|
|
key-decisions:
|
|
- "ItemForm converts dollar input to cents for API (display dollars, store cents)"
|
|
- "CategoryPicker uses native ARIA combobox pattern with keyboard navigation"
|
|
- "Empty state encourages adding first item with prominent CTA button"
|
|
|
|
patterns-established:
|
|
- "API wrapper: all fetch calls go through apiGet/apiPost/apiPut/apiDelete/apiUpload in lib/api.ts"
|
|
- "Query hooks: each data domain has a hook file with query + mutation hooks that handle cache invalidation"
|
|
- "UI store: Zustand store manages panel mode, editing item ID, and confirm dialog state"
|
|
- "Component composition: Root layout owns panel/dialog/FAB, collection page owns grid and grouping"
|
|
|
|
requirements-completed: [COLL-01, COLL-02, COLL-03, COLL-04]
|
|
|
|
duration: 3min
|
|
completed: 2026-03-14
|
|
---
|
|
|
|
# Phase 1 Plan 03: Frontend Collection UI Summary
|
|
|
|
**Card grid collection view with slide-out CRUD panel, category picker combobox, confirm delete, image upload, and sticky totals bar**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 3 min
|
|
- **Started:** 2026-03-14T21:43:16Z
|
|
- **Completed:** 2026-03-14T21:46:30Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 16
|
|
|
|
## Accomplishments
|
|
|
|
- Complete gear collection UI with items displayed as cards grouped by category
|
|
- Slide-out panel for add/edit with all item fields including image upload and category picker
|
|
- Category management via inline combobox creation and header edit/delete actions
|
|
- Sticky totals bar showing global item count, weight, and cost
|
|
- Delete confirmation dialog preventing accidental deletions
|
|
- Loading skeleton and empty state with onboarding CTA
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Data hooks, utilities, UI store, and foundational components** - `b099a47` (feat)
|
|
2. **Task 2: Slide-out panel, item form, category picker, and collection page** - `12fd14f` (feat)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `src/client/lib/api.ts` - Fetch wrapper with error handling and multipart upload
|
|
- `src/client/lib/formatters.ts` - Weight (grams) and price (cents to dollars) formatters
|
|
- `src/client/hooks/useItems.ts` - TanStack Query hooks for item CRUD with cache invalidation
|
|
- `src/client/hooks/useCategories.ts` - TanStack Query hooks for category CRUD
|
|
- `src/client/hooks/useTotals.ts` - TanStack Query hook for computed totals
|
|
- `src/client/stores/uiStore.ts` - Zustand store for panel mode and confirm dialog state
|
|
- `src/client/components/TotalsBar.tsx` - Sticky bar with global item count, weight, cost
|
|
- `src/client/components/CategoryHeader.tsx` - Category group header with subtotals and edit/delete
|
|
- `src/client/components/ItemCard.tsx` - Item card with image, name, and tag chips
|
|
- `src/client/components/ConfirmDialog.tsx` - Modal delete confirmation with destructive action
|
|
- `src/client/components/ImageUpload.tsx` - File upload with type/size validation and preview
|
|
- `src/client/components/CategoryPicker.tsx` - ARIA combobox with search, select, and inline create
|
|
- `src/client/components/SlideOutPanel.tsx` - Right slide-out panel with backdrop and animation
|
|
- `src/client/components/ItemForm.tsx` - Full item form with validation and dollar-to-cents conversion
|
|
- `src/client/routes/__root.tsx` - Root layout with TotalsBar, panel, dialog, and floating add button
|
|
- `src/client/routes/index.tsx` - Collection page with category-grouped card grid and empty state
|
|
|
|
## Decisions Made
|
|
|
|
- ItemForm converts dollar input to cents before sending to API (user sees $12.34, API receives 1234)
|
|
- CategoryPicker implements native ARIA combobox pattern with arrow key navigation and escape to close
|
|
- Empty collection state shows a friendly message with prominent "Add your first item" button
|
|
|
|
## Deviations from Plan
|
|
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
|
|
None.
|
|
|
|
## User Setup Required
|
|
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
|
|
- Complete collection UI ready for end-to-end testing with backend
|
|
- All CRUD operations wire through to Plan 02's API endpoints
|
|
- Ready for Plan 01-04 (onboarding wizard)
|
|
|
|
## Self-Check: PASSED
|
|
|
|
All 16 files verified present. Both task commits verified in git log (`b099a47`, `12fd14f`).
|
|
|
|
---
|
|
*Phase: 01-foundation-and-collection*
|
|
*Completed: 2026-03-14*
|