chore: complete v1.1 milestone — Fixes & Polish
Archive v1.1 artifacts (roadmap, requirements, phases) to milestones/. Evolve PROJECT.md with shipped requirements and new key decisions. Reorganize ROADMAP.md with collapsed milestone groupings. Update retrospective with v1.1 lessons. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
210
.planning/milestones/v1.1-phases/06-category-icons/06-03-PLAN.md
Normal file
210
.planning/milestones/v1.1-phases/06-category-icons/06-03-PLAN.md
Normal file
@@ -0,0 +1,210 @@
|
||||
---
|
||||
phase: 06-category-icons
|
||||
plan: 03
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on: [06-01]
|
||||
files_modified:
|
||||
- src/client/components/ItemCard.tsx
|
||||
- src/client/components/CandidateCard.tsx
|
||||
- src/client/components/ThreadCard.tsx
|
||||
- src/client/components/ItemPicker.tsx
|
||||
- src/client/routes/collection/index.tsx
|
||||
- src/client/routes/setups/$setupId.tsx
|
||||
- src/client/routes/threads/$threadId.tsx
|
||||
- src/client/components/EmojiPicker.tsx
|
||||
- src/client/lib/emojiData.ts
|
||||
autonomous: true
|
||||
requirements: [CAT-02]
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Item cards display category Lucide icon in the image placeholder area (not emoji)"
|
||||
- "Item cards display Lucide icon in the category badge/pill (not emoji)"
|
||||
- "Candidate cards display category Lucide icon in placeholder and badge"
|
||||
- "Thread cards display Lucide icon next to category name"
|
||||
- "Collection view category headers use icon prop (not emoji)"
|
||||
- "Setup detail view category headers use icon prop (not emoji)"
|
||||
- "ItemPicker shows Lucide icons next to category names"
|
||||
- "Category filter dropdown in collection view shows Lucide icons"
|
||||
- "Old EmojiPicker.tsx and emojiData.ts files are deleted"
|
||||
- "No remaining emoji references in the codebase"
|
||||
artifacts:
|
||||
- path: "src/client/components/ItemCard.tsx"
|
||||
provides: "Item card with Lucide icon display"
|
||||
contains: "categoryIcon"
|
||||
- path: "src/client/components/ThreadCard.tsx"
|
||||
provides: "Thread card with Lucide icon display"
|
||||
contains: "categoryIcon"
|
||||
key_links:
|
||||
- from: "src/client/components/ItemCard.tsx"
|
||||
to: "src/client/lib/iconData.ts"
|
||||
via: "import LucideIcon"
|
||||
pattern: "LucideIcon"
|
||||
- from: "src/client/routes/collection/index.tsx"
|
||||
to: "src/client/components/CategoryHeader.tsx"
|
||||
via: "icon prop"
|
||||
pattern: "icon=.*categoryIcon"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Update all display-only components to render Lucide icons instead of emoji, and remove old emoji code.
|
||||
|
||||
Purpose: Complete the visual migration so every category icon in the app renders as a Lucide icon. Clean up old emoji code to leave zero emoji references.
|
||||
Output: All display components updated, old EmojiPicker and emojiData files deleted.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@/home/jean-luc-makiola/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@/home/jean-luc-makiola/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/06-category-icons/06-CONTEXT.md
|
||||
@.planning/phases/06-category-icons/06-01-SUMMARY.md
|
||||
|
||||
<interfaces>
|
||||
<!-- From Plan 01: LucideIcon component for rendering icons by name -->
|
||||
From src/client/lib/iconData.ts:
|
||||
```typescript
|
||||
export function LucideIcon({ name, size, className }: { name: string; size?: number; className?: string }): JSX.Element;
|
||||
```
|
||||
|
||||
<!-- Server services now return categoryIcon instead of categoryEmoji -->
|
||||
From services (after Plan 01):
|
||||
```typescript
|
||||
// All services return: { ...fields, categoryIcon: string } instead of categoryEmoji
|
||||
```
|
||||
|
||||
<!-- CategoryHeader props changed in Plan 02 -->
|
||||
From src/client/components/CategoryHeader.tsx (after Plan 02):
|
||||
```typescript
|
||||
interface CategoryHeaderProps {
|
||||
categoryId: number;
|
||||
name: string;
|
||||
icon: string; // was: emoji
|
||||
totalWeight: number;
|
||||
totalCost: number;
|
||||
itemCount: number;
|
||||
}
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Update display components to use categoryIcon with LucideIcon</name>
|
||||
<files>
|
||||
src/client/components/ItemCard.tsx,
|
||||
src/client/components/CandidateCard.tsx,
|
||||
src/client/components/ThreadCard.tsx,
|
||||
src/client/components/ItemPicker.tsx
|
||||
</files>
|
||||
<action>
|
||||
Import `LucideIcon` from `../lib/iconData` in each file.
|
||||
|
||||
**ItemCard.tsx:**
|
||||
1. Props: rename `categoryEmoji: string` to `categoryIcon: string`.
|
||||
2. Image placeholder area (the 4:3 aspect ratio area when no image): Replace `<span className="text-3xl">{categoryEmoji}</span>` with `<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />`. Use size 36 (matching the ~32-40px from CONTEXT.md for card placeholder areas).
|
||||
3. Category badge/pill below the image: Replace `{categoryEmoji} {categoryName}` with `<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}`. Use size 14 for inline badge context.
|
||||
|
||||
**CandidateCard.tsx:**
|
||||
Same changes as ItemCard — rename prop `categoryEmoji` to `categoryIcon`, replace emoji text with LucideIcon in placeholder (size 36) and badge (size 14).
|
||||
|
||||
**ThreadCard.tsx:**
|
||||
1. Props: rename `categoryEmoji: string` to `categoryIcon: string`.
|
||||
2. Category display: Replace `{categoryEmoji} {categoryName}` with `<LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}`.
|
||||
|
||||
**ItemPicker.tsx:**
|
||||
1. In the grouped items type: rename `categoryEmoji: string` to `categoryIcon: string`.
|
||||
2. Where items are grouped: change `categoryEmoji: item.categoryEmoji` to `categoryIcon: item.categoryIcon`.
|
||||
3. In the destructuring: change `categoryEmoji` to `categoryIcon`.
|
||||
4. Import `LucideIcon` and replace `{categoryEmoji} {categoryName}` with `<LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>bun run build 2>&1 | tail -10</automated>
|
||||
</verify>
|
||||
<done>
|
||||
- All four components accept `categoryIcon` prop (not `categoryEmoji`)
|
||||
- Icons render as LucideIcon components at appropriate sizes
|
||||
- No emoji text rendering remains in these components
|
||||
- Build succeeds
|
||||
</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Update route files and delete old emoji files</name>
|
||||
<files>
|
||||
src/client/routes/collection/index.tsx,
|
||||
src/client/routes/setups/$setupId.tsx,
|
||||
src/client/routes/threads/$threadId.tsx,
|
||||
src/client/components/EmojiPicker.tsx,
|
||||
src/client/lib/emojiData.ts
|
||||
</files>
|
||||
<action>
|
||||
Import `LucideIcon` from the appropriate relative path in each route file.
|
||||
|
||||
**src/client/routes/collection/index.tsx:**
|
||||
1. In the grouped items type: rename `categoryEmoji` to `categoryIcon` everywhere.
|
||||
2. Where items are grouped into categories: change `categoryEmoji: item.categoryEmoji` to `categoryIcon: item.categoryIcon`.
|
||||
3. Where CategoryHeader is rendered: change `emoji={categoryEmoji}` to `icon={categoryIcon}`.
|
||||
4. Where ItemCard is rendered: change `categoryEmoji={categoryEmoji}` to `categoryIcon={categoryIcon}`.
|
||||
5. Where ThreadCard is rendered (in planning tab): change `categoryEmoji={thread.categoryEmoji}` to `categoryIcon={thread.categoryIcon}`.
|
||||
6. In the category filter dropdown: replace `{cat.emoji} {cat.name}` with a LucideIcon + name. Use `<LucideIcon name={cat.icon} size={16} className="inline-block mr-1 text-gray-500" />` before `{cat.name}`.
|
||||
|
||||
**src/client/routes/setups/$setupId.tsx:**
|
||||
1. Same pattern — rename `categoryEmoji` to `categoryIcon` in the grouped type, grouping logic, and where CategoryHeader and ItemCard are rendered.
|
||||
2. CategoryHeader: `emoji=` -> `icon=`.
|
||||
3. ItemCard: `categoryEmoji=` -> `categoryIcon=`.
|
||||
|
||||
**src/client/routes/threads/$threadId.tsx:**
|
||||
1. Where CandidateCard is rendered: change `categoryEmoji={candidate.categoryEmoji}` to `categoryIcon={candidate.categoryIcon}`.
|
||||
|
||||
**Delete old files:**
|
||||
- Delete `src/client/components/EmojiPicker.tsx`
|
||||
- Delete `src/client/lib/emojiData.ts`
|
||||
|
||||
**Final verification sweep:** After all changes, grep the entire `src/` directory for any remaining references to:
|
||||
- `emoji` (should find ZERO in component/route files — may still exist in migration files which is fine)
|
||||
- `EmojiPicker` (should find ZERO)
|
||||
- `emojiData` (should find ZERO)
|
||||
- `categoryEmoji` (should find ZERO)
|
||||
|
||||
Fix any stragglers found.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>bun run build 2>&1 | tail -5; echo "---"; grep -r "categoryEmoji\|EmojiPicker\|emojiData\|emojiCategories" src/ --include="*.ts" --include="*.tsx" | grep -v node_modules | head -10 || echo "No emoji references found"</automated>
|
||||
</verify>
|
||||
<done>
|
||||
- Collection route passes `icon` to CategoryHeader and `categoryIcon` to ItemCard/ThreadCard
|
||||
- Setup detail route passes `icon` and `categoryIcon` correctly
|
||||
- Thread detail route passes `categoryIcon` to CandidateCard
|
||||
- Category filter dropdown shows Lucide icons
|
||||
- EmojiPicker.tsx and emojiData.ts are deleted
|
||||
- Zero references to emoji/EmojiPicker/emojiData remain in src/
|
||||
- Build succeeds
|
||||
</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `bun run build` succeeds with zero errors
|
||||
- `grep -r "categoryEmoji\|EmojiPicker\|emojiData" src/ --include="*.ts" --include="*.tsx"` returns nothing
|
||||
- `bun test` passes (no test references broken)
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- Every category icon in the app renders as a Lucide icon (cards, headers, badges, lists, pickers)
|
||||
- Old EmojiPicker and emojiData files are deleted
|
||||
- Zero emoji references remain in source code
|
||||
- Build and all tests pass
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/06-category-icons/06-03-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user