Files

Jean-Luc Makiola 62546f744b 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

2026-04-06 15:03:30 +02:00

3.4 KiB

Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed

phase

plan

subsystem

tags

requires

provides

affects

tech-stack

key-files

key-decisions

patterns-established

requirements-completed

duration

completed

21-item-catalog-detail-pages

react

tanstack-router

detail-page

edit-mode

collection

phase	provides
20-fab-full-screen-catalog-search	Global item hooks, catalog search overlay, FAB menu

Private item detail page at /items/:id with edit mode toggle

Enhanced catalog detail page at /global-items/:id with Add to Collection stub

21-02

21-03

phase-22

added

patterns

Detail page edit mode via local useState toggle

Form state initialized from item data on edit enter

created

modified

src/client/routes/items/$itemId.tsx

src/client/routes/global-items/$globalItemId.tsx

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

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

DETAIL-01

DETAIL-02

DETAIL-03

4min

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:

Task 1: Create private item detail page with edit mode toggle - 3228bca (feat)
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

3.4 KiB Raw Blame History