docs(01-03): complete frontend collection UI plan

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.planning/phases/01-foundation-and-collection/01-03-SUMMARY.md

@@ -0,0 +1,142 @@
+---
+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*