docs(21-01): complete detail pages plan — item detail with edit mode, catalog Add button

- SUMMARY.md with task commits and known stubs
- STATE.md updated to phase 21, plan 1 of 3 complete
- ROADMAP.md updated with plan progress

.planning/ROADMAP.md

@@ -266,6 +266,6 @@ Plans:
 | 18. Global Items & Public Profiles | v2.0 | 4/5 | Complete    | 2026-04-05 |
 | 19. Reference Item Model & Tags Schema | v2.0 | 3/3 | Complete    | 2026-04-05 |
 | 20. FAB & Full-Screen Catalog Search | v2.0 | 2/2 | Complete    | 2026-04-06 |
-| 21. Item & Catalog Detail Pages | v2.0 | 0/? | Not started | - |
+| 21. Item & Catalog Detail Pages | v2.0 | 1/3 | In Progress|  |
 | 22. Add-from-Catalog & Thread Integration | v2.0 | 0/? | Not started | - |
 | 23. Manual Entry Fallback | v2.0 | 0/? | Not started | - |

.planning/STATE.md

@@ -3,7 +3,7 @@ gsd_state_version: 1.0
 milestone: v1.3
 milestone_name: Research & Decision Tools
 status: planning
-stopped_at: Completed 20-02-PLAN.md
+stopped_at: Completed 21-01-PLAN.md
 last_updated: "2026-04-06T06:17:39.050Z"
 last_activity: 2026-04-06
 progress:
@@ -25,9 +25,9 @@ See: .planning/PROJECT.md (updated 2026-04-03)
 
 ## Current Position
 
-Phase: 20 of 18 (PostgreSQL Migration)
-Plan: Not started
-Status: Ready to plan
+Phase: 21 of 21 (Item & Catalog Detail Pages)
+Plan: 1 of 3 complete
+Status: Executing
 Last activity: 2026-04-06
 
 Progress: [----------] 0% (v2.0 milestone)
@@ -58,6 +58,8 @@ Key decisions made during v2.0 planning:
 - [Phase 20]: Created tags table in schema (was missing, needed for GET /api/tags endpoint)
 - [Phase 20]: FAB visible on all authenticated routes, not just collection gear tab
 - [Phase 20]: Add button on catalog search cards is a stub (Phase 21 wires actual flow)
+- [Phase 21]: Edit mode on detail pages uses local useState, not UIStore panel state
+- [Phase 21]: Add to Collection button on catalog detail page is a stub (Phase 22 wires actual flow)
 
 ### Pending Todos
 
@@ -76,6 +78,6 @@ None active.
 
 ## Session Continuity
 
-Last session: 2026-04-06T06:12:00.000Z
-Stopped at: Completed 20-02-PLAN.md
+Last session: 2026-04-06T13:02:00.000Z
+Stopped at: Completed 21-01-PLAN.md
 Resume file: None

.planning/phases/21-item-catalog-detail-pages/21-01-SUMMARY.md

@@ -0,0 +1,96 @@
+---
+phase: 21-item-catalog-detail-pages
+plan: 01
+subsystem: ui
+tags: [react, tanstack-router, detail-page, edit-mode, collection]
+
+requires:
+  - phase: 20-fab-full-screen-catalog-search
+    provides: "Global item hooks, catalog search overlay, FAB menu"
+provides:
+  - "Private item detail page at /items/:id with edit mode toggle"
+  - "Enhanced catalog detail page at /global-items/:id with Add to Collection stub"
+affects: [21-02, 21-03, phase-22]
+
+tech-stack:
+  added: []
+  patterns:
+    - "Detail page edit mode via local useState toggle"
+    - "Form state initialized from item data on edit enter"
+
+key-files:
+  created:
+    - src/client/routes/items/$itemId.tsx
+  modified:
+    - src/client/routes/global-items/$globalItemId.tsx
+
+key-decisions:
+  - "Used type assertion for imageUrl on item data (API enriches but TS interface lacks field)"
+  - "Edit mode uses local form state initialized on toggle, not controlled by UIStore"
+
+patterns-established:
+  - "Detail page pattern: hero image, name, spec badges, content sections, metadata footer"
+  - "Edit mode pattern: enterEditMode initializes form from data, Save calls mutation with onSuccess exit"
+
+requirements-completed: [DETAIL-01, DETAIL-02, DETAIL-03]
+
+duration: 4min
+completed: 2026-04-06
+---
+
+# Phase 21 Plan 01: Detail Pages Summary
+
+**Private item detail page with edit mode toggle at /items/:id, and enhanced catalog detail page with Add to Collection stub button**
+
+## Performance
+
+- **Duration:** 4 min
+- **Started:** 2026-04-06T12:57:54Z
+- **Completed:** 2026-04-06T13:02:13Z
+- **Tasks:** 2
+- **Files modified:** 2
+
+## Accomplishments
+- Full item detail page at `/items/:id` with hero image (or category icon placeholder), name, weight/price/category badges, notes, product link, and metadata
+- Edit mode toggle: read-only gallery view by default, inline editable fields with Save/Cancel when Edit clicked
+- Catalog detail page enhanced with image placeholder when no image, and "Add to Collection" stub button
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Create private item detail page with edit mode toggle** - `3228bca` (feat)
+2. **Task 2: Enhance catalog detail page with Add to Collection button** - `408025b` (feat)
+
+## Files Created/Modified
+- `src/client/routes/items/$itemId.tsx` - Private item detail page with edit mode, duplicate, delete, back nav
+- `src/client/routes/global-items/$globalItemId.tsx` - Enhanced with image placeholder and Add to Collection stub button
+
+## Decisions Made
+- Used type assertion to access `imageUrl` field that API enriches via `withImageUrl` but isn't in the TypeScript `ItemWithCategory` interface
+- Edit mode managed via local `useState<boolean>` rather than UIStore, keeping state scoped to the page
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Known Stubs
+
+| File | Line | Stub | Reason |
+|------|------|------|--------|
+| `src/client/routes/global-items/$globalItemId.tsx` | 133 | "Add to Collection" button logs to console | Actual add-from-catalog flow wired in Phase 22 (per D-10) |
+
+## Issues Encountered
+None
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Both detail pages exist and are ready for Plan 03 to rewire card click handlers to navigate here
+- Plan 02 (candidate detail page) can proceed independently
+- Phase 22 will wire the Add to Collection button to actual functionality
+
+---
+*Phase: 21-item-catalog-detail-pages*
+*Completed: 2026-04-06*