feat(06-03): update display components to use categoryIcon with LucideIcon

- Rename categoryEmoji to categoryIcon in ItemCard, CandidateCard, ThreadCard, ItemPicker
- Import and render LucideIcon at appropriate sizes (36px placeholder, 14-16px badges)
- Update hook interfaces to match server API (categoryIcon instead of categoryEmoji)
- Rename iconData.ts to iconData.tsx (contains JSX)
- Update useCategories mutation type to use icon instead of emoji

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/CandidateCard.tsx

@@ -1,4 +1,5 @@
 import { formatPrice, formatWeight } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 
 interface CandidateCardProps {
@@ -7,7 +8,7 @@ interface CandidateCardProps {
 	weightGrams: number | null;
 	priceCents: number | null;
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 	imageFilename: string | null;
 	threadId: number;
 	isActive: boolean;
@@ -19,7 +20,7 @@ export function CandidateCard({
 	weightGrams,
 	priceCents,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 	imageFilename,
 	threadId,
 	isActive,
@@ -41,7 +42,7 @@ export function CandidateCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<span className="text-3xl">{categoryEmoji}</span>
+						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
 					</div>
 				)}
 			</div>
@@ -61,7 +62,7 @@ export function CandidateCard({
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						{categoryEmoji} {categoryName}
+						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
 					</span>
 				</div>
 				<div className="flex gap-2">

src/client/components/ItemCard.tsx

@@ -1,4 +1,5 @@
 import { formatPrice, formatWeight } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 
 interface ItemCardProps {
@@ -7,7 +8,7 @@ interface ItemCardProps {
 	weightGrams: number | null;
 	priceCents: number | null;
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 	imageFilename: string | null;
 	onRemove?: () => void;
 }
@@ -18,7 +19,7 @@ export function ItemCard({
 	weightGrams,
 	priceCents,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 	imageFilename,
 	onRemove,
 }: ItemCardProps) {
@@ -71,7 +72,7 @@ export function ItemCard({
 					/>
 				) : (
 					<div className="w-full h-full flex flex-col items-center justify-center">
-						<span className="text-3xl">{categoryEmoji}</span>
+						<LucideIcon name={categoryIcon} size={36} className="text-gray-400" />
 					</div>
 				)}
 			</div>
@@ -91,7 +92,7 @@ export function ItemCard({
 						</span>
 					)}
 					<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
-						{categoryEmoji} {categoryName}
+						<LucideIcon name={categoryIcon} size={14} className="inline-block mr-1 text-gray-500" /> {categoryName}
 					</span>
 				</div>
 			</div>

src/client/components/ItemPicker.tsx

@@ -3,6 +3,7 @@ import { SlideOutPanel } from "./SlideOutPanel";
 import { useItems } from "../hooks/useItems";
 import { useSyncSetupItems } from "../hooks/useSetups";
 import { formatWeight, formatPrice } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 interface ItemPickerProps {
   setupId: number;
@@ -51,7 +52,7 @@ export function ItemPicker({
     number,
     {
       categoryName: string;
-      categoryEmoji: string;
+      categoryIcon: string;
       items: NonNullable<typeof items>;
     }
   >();
@@ -64,7 +65,7 @@ export function ItemPicker({
       } else {
         grouped.set(item.categoryId, {
           categoryName: item.categoryName,
-          categoryEmoji: item.categoryEmoji,
+          categoryIcon: item.categoryIcon,
           items: [item],
         });
       }
@@ -83,10 +84,10 @@ export function ItemPicker({
             </div>
           ) : (
             Array.from(grouped.entries()).map(
-              ([categoryId, { categoryName, categoryEmoji, items: catItems }]) => (
+              ([categoryId, { categoryName, categoryIcon, items: catItems }]) => (
                 <div key={categoryId} className="mb-4">
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
-                    {categoryEmoji} {categoryName}
+                    <LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
                   </h3>
                   <div className="space-y-1">
                     {catItems.map((item) => (

src/client/components/ThreadCard.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "@tanstack/react-router";
 import { formatPrice } from "../lib/formatters";
+import { LucideIcon } from "../lib/iconData";
 
 interface ThreadCardProps {
 	id: number;
@@ -10,7 +11,7 @@ interface ThreadCardProps {
 	createdAt: string;
 	status: "active" | "resolved";
 	categoryName: string;
-	categoryEmoji: string;
+	categoryIcon: string;
 }
 
 function formatDate(iso: string): string {
@@ -36,7 +37,7 @@ export function ThreadCard({
 	createdAt,
 	status,
 	categoryName,
-	categoryEmoji,
+	categoryIcon,
 }: ThreadCardProps) {
 	const navigate = useNavigate();
 
@@ -66,7 +67,7 @@ export function ThreadCard({
 			</div>
 			<div className="flex flex-wrap gap-1.5">
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
-					{categoryEmoji} {categoryName}
+					<LucideIcon name={categoryIcon} size={16} className="inline-block mr-1 text-gray-500" /> {categoryName}
 				</span>
 				<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
 					{candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}