Jean-Luc Makiola
3228bcadbe
- Full detail page at /items/:id with hero image, name, spec badges, notes, product link - Edit mode toggle: read-only by default, editable inputs when Edit clicked - Save persists via useUpdateItem, Cancel reverts to read-only - Duplicate and Delete actions via existing hooks/dialogs - Back link to /collection, loading shimmer, error state - CategoryPicker and ImageUpload in edit mode
12 KiB
12 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 21-item-catalog-detail-pages | 01 | execute | 1 |
|
true |
|
|
Purpose: These are the navigation targets that card click handlers will point to in Plan 03. They must exist before rewiring.
Output: Two route files — one new (items/$itemId.tsx), one enhanced (global-items/$globalItemId.tsx)
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/21-item-catalog-detail-pages/21-CONTEXT.md @.planning/phases/21-item-catalog-detail-pages/21-RESEARCH.md@src/client/routes/global-items/$globalItemId.tsx @src/client/hooks/useItems.ts @src/client/hooks/useGlobalItems.ts @src/client/hooks/useFormatters.ts @src/client/components/ItemForm.tsx @src/client/components/CategoryPicker.tsx @src/client/components/ImageUpload.tsx
From src/client/hooks/useItems.ts:
export function useItem(id: number | null): UseQueryResult<ItemWithCategory>;
export function useUpdateItem(): UseMutationResult<ItemWithCategory, Error, { id: number } & Partial<CreateItem>>;
export function useDeleteItem(): UseMutationResult<{ success: boolean }, Error, number>;
export function useDuplicateItem(): UseMutationResult<Item, Error, number>;
interface ItemWithCategory {
id: number; name: string; weightGrams: number | null; priceCents: number | null;
quantity: number; categoryId: number; notes: string | null; productUrl: string | null;
imageFilename: string | null; createdAt: string; updatedAt: string;
categoryName: string; categoryIcon: string;
}
From src/client/hooks/useGlobalItems.ts:
export function useGlobalItem(id: number): UseQueryResult<GlobalItemWithDetails>;
// GlobalItemWithDetails includes: id, brand, model, description, category, weightGrams, priceCents, imageUrl, ownerCount
From src/client/hooks/useFormatters.ts:
export function useFormatters(): { weight: (g: number) => string; price: (cents: number) => string; };
From src/client/components/ItemForm.tsx:
interface FormData {
name: string; weightGrams: string; priceDollars: string; quantity: number;
categoryId: number; notes: string; productUrl: string; imageFilename: string | null;
}
Per D-01: Route at `/items/:id`, full page showing all item data.
Per D-02: Hero section — large product image (or placeholder icon using LucideIcon with categoryIcon), item name as h1 title, key specs as badges (weight via `useFormatters().weight`, price via `useFormatters().price`, category name).
Per D-03: Personal section below hero — notes (rendered as paragraph), quantity (if > 1), purchase price (priceCents formatted), product link (as external link button), image. For reference items, COALESCE merge is transparent — useItem already returns merged data, no special handling needed.
Per D-05: Page is read-only by default. Clean aesthetic, spacious gallery-like layout.
Per D-06: Back navigation at top — `<Link to="/collection">← Back to collection</Link>`.
Per D-07: Actions section — "Edit" button (top-right), "Duplicate" button (uses `useDuplicateItem`), "Delete" button (uses `useUIStore.openConfirmDelete` which triggers the existing ConfirmDialog).
Per D-04: Edit mode toggle. Local `useState<boolean>(false)` for `isEditing`. When "Edit" clicked, `setIsEditing(true)`. In edit mode:
- Name becomes text input
- Weight becomes number input (display in grams, store as string like ItemForm does)
- Price becomes dollar input (convert cents to dollars for display, back to cents on save)
- Quantity becomes number input
- Category becomes CategoryPicker component
- Notes becomes textarea
- Product URL becomes text input
- Image becomes ImageUpload component
- Show Save and Cancel buttons. Save calls `useUpdateItem().mutate({ id, name, weightGrams: parsed, priceCents: parsed, quantity, categoryId, notes, productUrl, imageFilename })` with `onSuccess: () => setIsEditing(false)`. Cancel calls `setIsEditing(false)`.
- Initialize form state from item data when entering edit mode (in the toggle handler or via useEffect when isEditing becomes true AND item data is available).
Layout: `max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6` (matches existing global item detail page).
Loading state: shimmer placeholders (same pattern as `$globalItemId.tsx`).
Error state: "Item not found" with back link.
Image placeholder when no image: centered LucideIcon with categoryIcon, bg-gray-50 container.
Do NOT import from UIStore for panel state (openEditPanel, closePanel, etc.) — this page replaces the panel.
Per D-08: Enhance existing route — add "Add to Collection" button and improve layout.
Per D-09: Layout improvements:
- Hero image section: if `item.imageUrl` exists, show in `aspect-[16/9] bg-gray-50 rounded-xl overflow-hidden` (already exists). If no image, show a placeholder div with a package icon.
- Brand as small uppercase label above model title (already exists).
- Model as h1 title (already exists).
- Manufacturer specs as badges: weight, price, category (already exists).
- Description section (already exists).
- Owner count badge (already exists).
Per D-10: "Add to Collection" button — prominent placement after the header/badges section. Styled as `bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors`. This is a STUB — onClick shows a console.log("Add to collection — wired in Phase 22") or a brief toast/alert. The actual flow is Phase 22. Match the same stub pattern as the Add button in CatalogSearchOverlay.
Per D-11: No edit functionality on this page. Read-only display only.
Per D-12: This page is accessible from catalog search overlay — no changes needed here (overlay card click wiring happens in Plan 03).
Specific enhancements to the existing page:
1. Add image placeholder when no imageUrl (currently the image section is skipped entirely — add a placeholder div)
2. Add "Add to Collection" button between badges and description
3. Ensure layout is consistent with the new item detail page from Task 1 (same max-width, padding, spacing)
4. Add tags display if the item has tags (optional, Claude's discretion — subtle tag chips below badges)
<success_criteria>
- Item detail page at
/items/:idrenders all item data in gallery-like layout - Edit mode toggle works: read-only by default, editable when toggled
- Catalog detail page shows "Add to Collection" button (stub)
- Both pages follow consistent layout patterns (max-w-3xl, same spacing)
- Lint passes cleanly </success_criteria>