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
13 KiB
13 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 | 02 | execute | 1 |
|
true |
|
|
Purpose: Creates the navigation target for candidate card clicks (rewired in Plan 03). The thread route restructuring is a prerequisite for the nested candidate route. Output: Restructured thread route directory + new candidate detail page + add-candidate modal on thread page
<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/threads/$threadId.tsx @src/client/hooks/useCandidates.ts @src/client/hooks/useThreads.ts @src/client/components/CandidateForm.tsx @src/client/components/CandidateCard.tsx @src/client/components/CandidateListItem.tsx @src/client/stores/uiStore.ts
From src/client/hooks/useCandidates.ts:
export function useCreateCandidate(threadId: number): UseMutationResult<CandidateResponse, Error, CreateCandidate & { imageFilename?: string }>;
export function useUpdateCandidate(threadId: number): UseMutationResult<CandidateResponse, Error, UpdateCandidate & { candidateId: number; imageFilename?: string }>;
export function useDeleteCandidate(threadId: number): UseMutationResult<{ success: boolean }, Error, number>;
From src/client/hooks/useThreads.ts:
export function useThread(id: number): UseQueryResult<ThreadWithCandidates>;
export function useResolveThread(): UseMutationResult;
// ThreadWithCandidates.candidates[]: { id, threadId, name, weightGrams, priceCents, categoryId, categoryName, categoryIcon, notes, productUrl, imageFilename, imageUrl, status, pros, cons, sortOrder, createdAt, updatedAt }
From src/client/components/CandidateForm.tsx:
interface CandidateFormProps { mode: "add" | "edit"; threadId: number; candidateId?: number | null; }
interface FormData {
name: string; weightGrams: string; priceDollars: string; categoryId: number;
notes: string; productUrl: string; imageFilename: string | null; pros: string; cons: string;
}
From src/client/stores/uiStore.ts (properties used by thread page):
openCandidateAddPanel: () => void; // WILL BE REMOVED in Plan 03
openResolveDialog: (threadId: number, candidateId: number) => void; // KEEP
openConfirmDeleteCandidate: (id: number) => void; // KEEP
**Step 2: Create candidate detail page.**
Create `src/client/routes/threads/$threadId/candidates/$candidateId.tsx` with `createFileRoute("/threads/$threadId/candidates/$candidateId")`.
Per D-13: Shows candidate data — name, weight, price, notes, pros, cons, status, product link, image.
Per D-14: Edit mode toggle — same pattern as item detail page (local `useState<boolean>(false)`). In edit mode:
- Name, weight (grams string), price (dollars string), category (CategoryPicker), notes (textarea), product URL (text input), image (ImageUpload), pros (textarea), cons (textarea)
- Save button calls `useUpdateCandidate(threadId).mutate({ candidateId, name, weightGrams: parsed, priceCents: parsed, categoryId, notes, productUrl, imageFilename, pros, cons })` with `onSuccess: () => setIsEditing(false)`
- Cancel resets and exits edit mode
- Initialize form from candidate data when entering edit mode
Per D-15: Back navigation — `<Link to="/threads/$threadId" params={{ threadId: String(threadId) }}>← Back to thread</Link>`.
Per D-16: Thread-specific actions:
- "Pick as winner" button (only if thread is active/not resolved) — calls `useUIStore.openResolveDialog(threadId, candidateId)` which triggers the existing ResolveDialog in __root.tsx
- "Delete candidate" button — calls `useUIStore.openConfirmDeleteCandidate(candidateId)` which triggers the existing CandidateDeleteDialog in __root.tsx
Data fetching: Use `useThread(Number(threadIdParam))` to get the thread, then find the candidate via `thread.candidates.find(c => c.id === Number(candidateIdParam))`. This avoids needing a new API endpoint.
Layout: Same gallery-like pattern as item detail — `max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6`. Hero image section, name as h1, badges (weight, price, category, status), pros/cons sections, notes section.
Loading state: shimmer placeholders.
Error state: "Candidate not found" with back link to thread.
Status display: Show current status using the StatusBadge component (but read-only — status changes happen via the existing status cycle on the card, not on the detail page).
In `src/client/routes/threads/$threadId/index.tsx`:
1. Add local state: `const [addCandidateOpen, setAddCandidateOpen] = useState(false)`
2. Replace the existing "Add Candidate" button's `onClick={() => openCandidateAddPanel()}` with `onClick={() => setAddCandidateOpen(true)}`
3. Remove the `openCandidateAddPanel` import from useUIStore
4. Add an `AddCandidateModal` component (can be defined in the same file or as a separate component — Claude's discretion) that:
- Renders as a fixed overlay with backdrop (`fixed inset-0 z-50 flex items-center justify-center`)
- Contains a form with fields: name (required), weight (grams), price (dollars), category (CategoryPicker), notes, product URL, image (ImageUpload), pros, cons
- Uses `useCreateCandidate(threadId)` for submission
- On success: closes modal, form resets
- On cancel/backdrop click: closes modal
- Style consistent with the existing CandidateDeleteDialog and ResolveDialog patterns in `__root.tsx`
5. Render the modal conditionally: `{addCandidateOpen && <AddCandidateModal threadId={threadId} onClose={() => setAddCandidateOpen(false)} />}`
The modal should be a reasonable size (`max-w-lg`) with scrollable content if needed. Form fields should match CandidateForm's field set. Validation: name is required (show inline error if empty on submit).
<success_criteria>
- Thread route restructured without breaking existing
/threads/:threadIdfunctionality - Candidate detail page at
/threads/:threadId/candidates/:candidateIdwith edit mode - Add candidate modal replaces slide-out panel trigger on thread page
- All existing thread page functionality preserved (reorder, view modes, impact deltas)
- Lint passes cleanly </success_criteria>