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
17 KiB
17 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 | 03 | execute | 2 |
|
|
true |
|
|
Purpose: Completes the transition from panel-based editing to full detail pages. This is the final step — navigation targets from Plans 01 and 02 must exist first. Output: All cards navigate to detail pages, panels removed, UIStore cleaned
<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/components/ItemCard.tsx @src/client/components/CandidateCard.tsx @src/client/components/CandidateListItem.tsx @src/client/components/CatalogSearchOverlay.tsx @src/client/routes/__root.tsx @src/client/stores/uiStore.ts
@.planning/phases/21-item-catalog-detail-pages/21-01-SUMMARY.md @.planning/phases/21-item-catalog-detail-pages/21-02-SUMMARY.md
ItemCard currently uses:
const openEditPanel = useUIStore((s) => s.openEditPanel);
onClick={() => openEditPanel(id)}
// Also: duplicateItem onSuccess calls openEditPanel(newItem.id)
CandidateCard currently uses:
const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
onClick={() => openCandidateEditPanel(id)}
// Props include: threadId (available for navigation)
CandidateListItem currently uses:
const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
onClick={() => openCandidateEditPanel(candidate.id)}
// candidate.threadId is available
__root.tsx panel instances (lines 189-221):
<SlideOutPanel isOpen={isItemPanelOpen} onClose={closePanel} title={...}>
<ItemForm mode="add" | mode="edit" itemId={editingItemId} />
</SlideOutPanel>
<SlideOutPanel isOpen={isCandidatePanelOpen} onClose={closeCandidatePanel} title={...}>
<CandidateForm mode="add" | mode="edit" threadId={...} candidateId={...} />
</SlideOutPanel>
UIStore properties to REMOVE:
panelMode, editingItemId, openAddPanel, openEditPanel, closePanel
candidatePanelMode, editingCandidateId, openCandidateAddPanel, openCandidateEditPanel, closeCandidatePanel
UIStore properties to KEEP:
confirmDeleteItemId, openConfirmDelete, closeConfirmDelete
confirmDeleteCandidateId, openConfirmDeleteCandidate, closeConfirmDeleteCandidate
resolveThreadId, resolveCandidateId, openResolveDialog, closeResolveDialog
// all other non-panel state
Per D-18: **CandidateCard.tsx** — Replace panel open with navigation.
1. Remove: `const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);`
2. Add: `import { useNavigate } from "@tanstack/react-router";` and `const navigate = useNavigate();`
3. Change main button `onClick`: `() => navigate({ to: "/threads/$threadId/candidates/$candidateId", params: { threadId: String(threadId), candidateId: String(id) } })`
4. Keep: openConfirmDeleteCandidate, openResolveDialog, openExternalLink from UIStore.
Per D-20: **CandidateListItem.tsx** — Replace panel open with navigation.
1. Remove: `const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);`
2. Add: `import { useNavigate } from "@tanstack/react-router";` and `const navigate = useNavigate();`
3. Change the click handler: `() => navigate({ to: "/threads/$threadId/candidates/$candidateId", params: { threadId: String(candidate.threadId), candidateId: String(candidate.id) } })`
4. Keep all other UIStore usage.
Per D-19: **CatalogSearchOverlay.tsx** — Add card click navigation to `/global-items/:id`.
1. Add: `import { useNavigate } from "@tanstack/react-router";` and `const navigate = useNavigate();`
2. Find the card/grid item rendering for search results. Wrap the card body (not the "Add" button) in a clickable element that:
- Calls `closeCatalogSearch()` then `navigate({ to: "/global-items/$globalItemId", params: { globalItemId: String(item.id) } })`
- The existing "Add" button stays separate with `e.stopPropagation()` to prevent navigation when clicking Add
3. The card body should have `cursor-pointer` and hover styling to indicate clickability
Per D-23, D-24: **uiStore.ts** — Remove panel state.
Remove from UIState interface AND implementation:
- `panelMode: "closed" | "add" | "edit"`
- `editingItemId: number | null`
- `openAddPanel: () => void`
- `openEditPanel: (itemId: number) => void`
- `closePanel: () => void`
- `candidatePanelMode: "closed" | "add" | "edit"`
- `editingCandidateId: number | null`
- `openCandidateAddPanel: () => void`
- `openCandidateEditPanel: (id: number) => void`
- `closeCandidatePanel: () => void`
KEEP all other state:
- confirmDeleteItemId, openConfirmDelete, closeConfirmDelete
- confirmDeleteCandidateId, openConfirmDeleteCandidate, closeConfirmDeleteCandidate
- resolveThreadId, resolveCandidateId, openResolveDialog, closeResolveDialog
- itemPickerOpen, openItemPicker, closeItemPicker
- confirmDeleteSetupId, openConfirmDeleteSetup, closeConfirmDeleteSetup
- createThreadModalOpen, openCreateThreadModal, closeCreateThreadModal
- externalLinkUrl, openExternalLink, closeExternalLink
- candidateViewMode, setCandidateViewMode
- selectedSetupId, setSelectedSetupId
- fabMenuOpen, openFabMenu, closeFabMenu
- catalogSearchOpen, catalogSearchMode, openCatalogSearch, closeCatalogSearch
After cleanup, do a project-wide search for any remaining references to the removed properties:
`grep -r "openEditPanel\|openAddPanel\|closePanel\|openCandidateEditPanel\|openCandidateAddPanel\|closeCandidatePanel\|panelMode\|editingItemId\|editingCandidateId\|candidatePanelMode" src/client/ --include="*.tsx" --include="*.ts"`
If any references remain, update those files to remove the dead references (likely just removing unused imports or store selectors).
<success_criteria>
- All card components navigate to detail pages instead of opening panels
- Slide-out panels completely removed from the application
- UIStore cleaned of all panel-related state
- All non-panel functionality preserved (dialogs, FAB, catalog search)
- No broken references or dead imports
- Lint passes cleanly </success_criteria>