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/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*