Jean-Luc Makiola
62546f744b
- 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
97 lines
3.4 KiB
Markdown
97 lines
3.4 KiB
Markdown
---
|
|
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*
|