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

src/client/hooks/useCategories.ts

@@ -29,7 +29,7 @@ export function useUpdateCategory() {
     }: {
       id: number;
       name?: string;
-      emoji?: string;
+      icon?: string;
     }) => apiPut<Category>(`/api/categories/${id}`, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["categories"] });

src/client/hooks/useItems.ts

@@ -14,7 +14,7 @@ interface ItemWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 export function useItems() {

src/client/hooks/useSetups.ts

@@ -23,7 +23,7 @@ interface SetupItemWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 interface SetupWithItems {

src/client/hooks/useThreads.ts

@@ -8,7 +8,7 @@ interface ThreadListItem {
   resolvedCandidateId: number | null;
   categoryId: number;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
   createdAt: string;
   updatedAt: string;
   candidateCount: number;
@@ -29,7 +29,7 @@ interface CandidateWithCategory {
   createdAt: string;
   updatedAt: string;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
 }
 
 interface ThreadWithCandidates {

src/client/hooks/useTotals.ts

@@ -4,7 +4,7 @@ import { apiGet } from "../lib/api";
 interface CategoryTotals {
   categoryId: number;
   categoryName: string;
-  categoryEmoji: string;
+  categoryIcon: string;
   totalWeight: number;
   totalCost: number;
   itemCount: number;