---
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>