feat(06-02): replace EmojiPicker with IconPicker across all category components

- CategoryPicker shows LucideIcon prefix and uses IconPicker for inline create - CategoryHeader displays LucideIcon in view mode and IconPicker in edit mode - OnboardingWizard uses IconPicker for category creation step - CreateThreadModal drops emoji from category select options - Fixed categoryEmoji -> categoryIcon in routes and useCategories hook Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 17:57:56 +01:00
parent 615c8944c4
commit 570bcea5c9
7 changed files with 391 additions and 338 deletions
--- a/src/client/components/CategoryHeader.tsx
+++ b/src/client/components/CategoryHeader.tsx
@@ -1,143 +1,139 @@
 import { useState } from "react";
 import { formatWeight, formatPrice } from "../lib/formatters";
 import { useUpdateCategory, useDeleteCategory } from "../hooks/useCategories";
+import { LucideIcon } from "../lib/iconData";
+import { IconPicker } from "./IconPicker";

 interface CategoryHeaderProps {
-  categoryId: number;
-  name: string;
-  emoji: string;
-  totalWeight: number;
-  totalCost: number;
-  itemCount: number;
+	categoryId: number;
+	name: string;
+	icon: string;
+	totalWeight: number;
+	totalCost: number;
+	itemCount: number;
 }

 export function CategoryHeader({
-  categoryId,
-  name,
-  emoji,
-  totalWeight,
-  totalCost,
-  itemCount,
+	categoryId,
+	name,
+	icon,
+	totalWeight,
+	totalCost,
+	itemCount,
 }: CategoryHeaderProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState(name);
-  const [editEmoji, setEditEmoji] = useState(emoji);
-  const updateCategory = useUpdateCategory();
-  const deleteCategory = useDeleteCategory();
+	const [isEditing, setIsEditing] = useState(false);
+	const [editName, setEditName] = useState(name);
+	const [editIcon, setEditIcon] = useState(icon);
+	const updateCategory = useUpdateCategory();
+	const deleteCategory = useDeleteCategory();

-  const isUncategorized = categoryId === 1;
+	const isUncategorized = categoryId === 1;

-  function handleSave() {
-    if (!editName.trim()) return;
-    updateCategory.mutate(
-      { id: categoryId, name: editName.trim(), emoji: editEmoji },
-      { onSuccess: () => setIsEditing(false) },
-    );
-  }
+	function handleSave() {
+		if (!editName.trim()) return;
+		updateCategory.mutate(
+			{ id: categoryId, name: editName.trim(), icon: editIcon },
+			{ onSuccess: () => setIsEditing(false) },
+		);
+	}

-  function handleDelete() {
-    if (
-      confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
-    ) {
-      deleteCategory.mutate(categoryId);
-    }
-  }
+	function handleDelete() {
+		if (
+			confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
+		) {
+			deleteCategory.mutate(categoryId);
+		}
+	}

-  if (isEditing) {
-    return (
-      <div className="flex items-center gap-3 py-4">
-        <input
-          type="text"
-          value={editEmoji}
-          onChange={(e) => setEditEmoji(e.target.value)}
-          className="w-12 text-center text-xl border border-gray-200 rounded-md px-1 py-1"
-          maxLength={4}
-        />
-        <input
-          type="text"
-          value={editName}
-          onChange={(e) => setEditName(e.target.value)}
-          className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") handleSave();
-            if (e.key === "Escape") setIsEditing(false);
-          }}
-          autoFocus
-        />
-        <button
-          type="button"
-          onClick={handleSave}
-          className="text-sm text-blue-600 hover:text-blue-800 font-medium"
-        >
-          Save
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsEditing(false)}
-          className="text-sm text-gray-400 hover:text-gray-600"
-        >
-          Cancel
-        </button>
-      </div>
-    );
-  }
+	if (isEditing) {
+		return (
+			<div className="flex items-center gap-3 py-4">
+				<IconPicker value={editIcon} onChange={setEditIcon} size="sm" />
+				<input
+					type="text"
+					value={editName}
+					onChange={(e) => setEditName(e.target.value)}
+					className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1"
+					onKeyDown={(e) => {
+						if (e.key === "Enter") handleSave();
+						if (e.key === "Escape") setIsEditing(false);
+					}}
+					autoFocus
+				/>
+				<button
+					type="button"
+					onClick={handleSave}
+					className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+				>
+					Save
+				</button>
+				<button
+					type="button"
+					onClick={() => setIsEditing(false)}
+					className="text-sm text-gray-400 hover:text-gray-600"
+				>
+					Cancel
+				</button>
+			</div>
+		);
+	}

-  return (
-    <div className="group flex items-center gap-3 py-4">
-      <span className="text-xl">{emoji}</span>
-      <h2 className="text-lg font-semibold text-gray-900">{name}</h2>
-      <span className="text-sm text-gray-400">
-        {itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
-        {formatWeight(totalWeight)} · {formatPrice(totalCost)}
-      </span>
-      {!isUncategorized && (
-        <div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button
-            type="button"
-            onClick={() => {
-              setEditName(name);
-              setEditEmoji(emoji);
-              setIsEditing(true);
-            }}
-            className="p-1 text-gray-400 hover:text-gray-600 rounded"
-            title="Edit category"
-          >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-              />
-            </svg>
-          </button>
-          <button
-            type="button"
-            onClick={handleDelete}
-            className="p-1 text-gray-400 hover:text-red-500 rounded"
-            title="Delete category"
-          >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-          </button>
-        </div>
-      )}
-    </div>
-  );
+	return (
+		<div className="group flex items-center gap-3 py-4">
+			<LucideIcon name={icon} size={22} className="text-gray-500" />
+			<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
+			<span className="text-sm text-gray-400">
+				{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
+				{formatWeight(totalWeight)} · {formatPrice(totalCost)}
+			</span>
+			{!isUncategorized && (
+				<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+					<button
+						type="button"
+						onClick={() => {
+							setEditName(name);
+							setEditIcon(icon);
+							setIsEditing(true);
+						}}
+						className="p-1 text-gray-400 hover:text-gray-600 rounded"
+						title="Edit category"
+					>
+						<svg
+							className="w-4 h-4"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+							/>
+						</svg>
+					</button>
+					<button
+						type="button"
+						onClick={handleDelete}
+						className="p-1 text-gray-400 hover:text-red-500 rounded"
+						title="Delete category"
+					>
+						<svg
+							className="w-4 h-4"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+							/>
+						</svg>
+					</button>
+				</div>
+			)}
+		</div>
+	);
 }
--- a/src/client/components/CategoryPicker.tsx
+++ b/src/client/components/CategoryPicker.tsx
@@ -1,200 +1,263 @@
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
-  useCategories,
-  useCreateCategory,
+	useCategories,
+	useCreateCategory,
 } from "../hooks/useCategories";
+import { LucideIcon } from "../lib/iconData";
+import { IconPicker } from "./IconPicker";

 interface CategoryPickerProps {
-  value: number;
-  onChange: (categoryId: number) => void;
+	value: number;
+	onChange: (categoryId: number) => void;
 }

 export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
-  const { data: categories = [] } = useCategories();
-  const createCategory = useCreateCategory();
-  const [inputValue, setInputValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [highlightIndex, setHighlightIndex] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
+	const { data: categories = [] } = useCategories();
+	const createCategory = useCreateCategory();
+	const [inputValue, setInputValue] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const [highlightIndex, setHighlightIndex] = useState(-1);
+	const [isCreating, setIsCreating] = useState(false);
+	const [newCategoryIcon, setNewCategoryIcon] = useState("package");
+	const containerRef = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const listRef = useRef<HTMLUListElement>(null);

-  // Sync display value when value prop changes
-  const selectedCategory = categories.find((c) => c.id === value);
+	// Sync display value when value prop changes
+	const selectedCategory = categories.find((c) => c.id === value);

-  const filtered = categories.filter((c) =>
-    c.name.toLowerCase().includes(inputValue.toLowerCase()),
-  );
+	const filtered = categories.filter((c) =>
+		c.name.toLowerCase().includes(inputValue.toLowerCase()),
+	);

-  const showCreateOption =
-    inputValue.trim() !== "" &&
-    !categories.some(
-      (c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(),
-    );
+	const showCreateOption =
+		inputValue.trim() !== "" &&
+		!categories.some(
+			(c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(),
+		);

-  const totalOptions = filtered.length + (showCreateOption ? 1 : 0);
+	const totalOptions = filtered.length + (showCreateOption ? 1 : 0);

-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-        // Reset input to selected category name
-        if (selectedCategory) {
-          setInputValue("");
-        }
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [selectedCategory]);
+	useEffect(() => {
+		function handleClickOutside(e: MouseEvent) {
+			const target = e.target as Node;
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(target) &&
+				!(target instanceof Element && target.closest("[data-icon-picker]"))
+			) {
+				setIsOpen(false);
+				setIsCreating(false);
+				setNewCategoryIcon("package");
+				// Reset input to selected category name
+				if (selectedCategory) {
+					setInputValue("");
+				}
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [selectedCategory]);

-  function handleSelect(categoryId: number) {
-    onChange(categoryId);
-    setInputValue("");
-    setIsOpen(false);
-    setHighlightIndex(-1);
-  }
+	function handleSelect(categoryId: number) {
+		onChange(categoryId);
+		setInputValue("");
+		setIsOpen(false);
+		setHighlightIndex(-1);
+	}

-  async function handleCreate() {
-    const name = inputValue.trim();
-    if (!name) return;
-    createCategory.mutate(
-      { name, emoji: "\u{1F4E6}" },
-      {
-        onSuccess: (newCat) => {
-          handleSelect(newCat.id);
-        },
-      },
-    );
-  }
+	function handleStartCreate() {
+		setIsCreating(true);
+	}

-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (!isOpen) {
-      if (e.key === "ArrowDown" || e.key === "Enter") {
-        setIsOpen(true);
-        e.preventDefault();
-      }
-      return;
-    }
+	async function handleConfirmCreate() {
+		const name = inputValue.trim();
+		if (!name) return;
+		createCategory.mutate(
+			{ name, icon: newCategoryIcon },
+			{
+				onSuccess: (newCat) => {
+					setIsCreating(false);
+					setNewCategoryIcon("package");
+					handleSelect(newCat.id);
+				},
+			},
+		);
+	}

-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1));
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setHighlightIndex((i) => Math.max(i - 1, 0));
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (highlightIndex >= 0 && highlightIndex < filtered.length) {
-          handleSelect(filtered[highlightIndex].id);
-        } else if (
-          showCreateOption &&
-          highlightIndex === filtered.length
-        ) {
-          handleCreate();
-        }
-        break;
-      case "Escape":
-        setIsOpen(false);
-        setHighlightIndex(-1);
-        setInputValue("");
-        break;
-    }
-  }
+	function handleKeyDown(e: React.KeyboardEvent) {
+		if (!isOpen) {
+			if (e.key === "ArrowDown" || e.key === "Enter") {
+				setIsOpen(true);
+				e.preventDefault();
+			}
+			return;
+		}

-  // Scroll highlighted option into view
-  useEffect(() => {
-    if (highlightIndex >= 0 && listRef.current) {
-      const option = listRef.current.children[highlightIndex] as HTMLElement;
-      option?.scrollIntoView({ block: "nearest" });
-    }
-  }, [highlightIndex]);
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1));
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setHighlightIndex((i) => Math.max(i - 1, 0));
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (isCreating) {
+					handleConfirmCreate();
+				} else if (highlightIndex >= 0 && highlightIndex < filtered.length) {
+					handleSelect(filtered[highlightIndex].id);
+				} else if (
+					showCreateOption &&
+					highlightIndex === filtered.length
+				) {
+					handleStartCreate();
+				}
+				break;
+			case "Escape":
+				if (isCreating) {
+					setIsCreating(false);
+					setNewCategoryIcon("package");
+				} else {
+					setIsOpen(false);
+					setHighlightIndex(-1);
+					setInputValue("");
+				}
+				break;
+		}
+	}

-  return (
-    <div ref={containerRef} className="relative">
-      <input
-        ref={inputRef}
-        type="text"
-        role="combobox"
-        aria-expanded={isOpen}
-        aria-autocomplete="list"
-        aria-controls="category-listbox"
-        aria-activedescendant={
-          highlightIndex >= 0 ? `category-option-${highlightIndex}` : undefined
-        }
-        value={
-          isOpen
-            ? inputValue
-            : selectedCategory
-              ? `${selectedCategory.emoji} ${selectedCategory.name}`
-              : ""
-        }
-        placeholder="Search or create category..."
-        onChange={(e) => {
-          setInputValue(e.target.value);
-          setIsOpen(true);
-          setHighlightIndex(-1);
-        }}
-        onFocus={() => {
-          setIsOpen(true);
-          setInputValue("");
-        }}
-        onKeyDown={handleKeyDown}
-        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-      />
-      {isOpen && (
-        <ul
-          ref={listRef}
-          id="category-listbox"
-          role="listbox"
-          className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
-        >
-          {filtered.map((cat, i) => (
-            <li
-              key={cat.id}
-              id={`category-option-${i}`}
-              role="option"
-              aria-selected={cat.id === value}
-              className={`px-3 py-2 text-sm cursor-pointer ${
-                i === highlightIndex
-                  ? "bg-blue-50 text-blue-900"
-                  : "hover:bg-gray-50"
-              } ${cat.id === value ? "font-medium" : ""}`}
-              onClick={() => handleSelect(cat.id)}
-              onMouseEnter={() => setHighlightIndex(i)}
-            >
-              {cat.emoji} {cat.name}
-            </li>
-          ))}
-          {showCreateOption && (
-            <li
-              id={`category-option-${filtered.length}`}
-              role="option"
-              aria-selected={false}
-              className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
-                highlightIndex === filtered.length
-                  ? "bg-blue-50 text-blue-900"
-                  : "hover:bg-gray-50 text-gray-600"
-              }`}
-              onClick={handleCreate}
-              onMouseEnter={() => setHighlightIndex(filtered.length)}
-            >
-              + Create "{inputValue.trim()}"
-            </li>
-          )}
-          {filtered.length === 0 && !showCreateOption && (
-            <li className="px-3 py-2 text-sm text-gray-400">
-              No categories found
-            </li>
-          )}
-        </ul>
-      )}
-    </div>
-  );
+	// Scroll highlighted option into view
+	useEffect(() => {
+		if (highlightIndex >= 0 && listRef.current) {
+			const option = listRef.current.children[highlightIndex] as HTMLElement;
+			option?.scrollIntoView({ block: "nearest" });
+		}
+	}, [highlightIndex]);
+
+	return (
+		<div ref={containerRef} className="relative">
+			<div className="relative">
+				{!isOpen && selectedCategory && (
+					<div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+						<LucideIcon
+							name={selectedCategory.icon}
+							size={16}
+							className="text-gray-500"
+						/>
+					</div>
+				)}
+				<input
+					ref={inputRef}
+					type="text"
+					role="combobox"
+					aria-expanded={isOpen}
+					aria-autocomplete="list"
+					aria-controls="category-listbox"
+					aria-activedescendant={
+						highlightIndex >= 0
+							? `category-option-${highlightIndex}`
+							: undefined
+					}
+					value={
+						isOpen
+							? inputValue
+							: selectedCategory
+								? selectedCategory.name
+								: ""
+					}
+					placeholder="Search or create category..."
+					onChange={(e) => {
+						setInputValue(e.target.value);
+						setIsOpen(true);
+						setHighlightIndex(-1);
+					}}
+					onFocus={() => {
+						setIsOpen(true);
+						setInputValue("");
+					}}
+					onKeyDown={handleKeyDown}
+					className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+						!isOpen && selectedCategory ? "pl-8 pr-3" : "px-3"
+					}`}
+				/>
+			</div>
+			{isOpen && (
+				<ul
+					ref={listRef}
+					id="category-listbox"
+					role="listbox"
+					className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
+				>
+					{filtered.map((cat, i) => (
+						<li
+							key={cat.id}
+							id={`category-option-${i}`}
+							role="option"
+							aria-selected={cat.id === value}
+							className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${
+								i === highlightIndex
+									? "bg-blue-50 text-blue-900"
+									: "hover:bg-gray-50"
+							} ${cat.id === value ? "font-medium" : ""}`}
+							onClick={() => handleSelect(cat.id)}
+							onMouseEnter={() => setHighlightIndex(i)}
+						>
+							<LucideIcon
+								name={cat.icon}
+								size={16}
+								className="text-gray-500 shrink-0"
+							/>
+							{cat.name}
+						</li>
+					))}
+					{showCreateOption && !isCreating && (
+						<li
+							id={`category-option-${filtered.length}`}
+							role="option"
+							aria-selected={false}
+							className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
+								highlightIndex === filtered.length
+									? "bg-blue-50 text-blue-900"
+									: "hover:bg-gray-50 text-gray-600"
+							}`}
+							onClick={handleStartCreate}
+							onMouseEnter={() => setHighlightIndex(filtered.length)}
+						>
+							+ Create "{inputValue.trim()}"
+						</li>
+					)}
+					{isCreating && (
+						<li className="px-3 py-2 border-t border-gray-100">
+							<div className="flex items-center gap-2">
+								<IconPicker
+									value={newCategoryIcon}
+									onChange={setNewCategoryIcon}
+									size="sm"
+								/>
+								<span className="text-sm text-gray-700 truncate flex-1">
+									{inputValue.trim()}
+								</span>
+								<button
+									type="button"
+									onClick={handleConfirmCreate}
+									disabled={createCategory.isPending}
+									className="text-xs font-medium text-blue-600 hover:text-blue-800 disabled:opacity-50"
+								>
+									{createCategory.isPending ? "..." : "Create"}
+								</button>
+							</div>
+						</li>
+					)}
+					{filtered.length === 0 && !showCreateOption && (
+						<li className="px-3 py-2 text-sm text-gray-400">
+							No categories found
+						</li>
+					)}
+				</ul>
+			)}
+		</div>
+	);
 }
--- a/src/client/components/CreateThreadModal.tsx
+++ b/src/client/components/CreateThreadModal.tsx
@@ -112,7 +112,7 @@ export function CreateThreadModal() {
 						>
 							{categories?.map((cat) => (
 								<option key={cat.id} value={cat.id}>
-									{cat.emoji} {cat.name}
+									{cat.name}
 								</option>
 							))}
 						</select>
--- a/src/client/components/OnboardingWizard.tsx
+++ b/src/client/components/OnboardingWizard.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useCreateCategory } from "../hooks/useCategories";
 import { useCreateItem } from "../hooks/useItems";
 import { useUpdateSetting } from "../hooks/useSettings";
+import { IconPicker } from "./IconPicker";

 interface OnboardingWizardProps {
  onComplete: () => void;
@@ -12,7 +13,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {

  // Step 2 state
  const [categoryName, setCategoryName] = useState("");
-  const [categoryEmoji, setCategoryEmoji] = useState("");
+  const [categoryIcon, setCategoryIcon] = useState("");
  const [categoryError, setCategoryError] = useState("");
  const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(null);

@@ -41,7 +42,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
    }
    setCategoryError("");
    createCategory.mutate(
-      { name, emoji: categoryEmoji.trim() || undefined },
+      { name, icon: categoryIcon.trim() || undefined },
      {
        onSuccess: (created) => {
          setCreatedCategoryId(created.id);
@@ -164,20 +165,13 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
              </div>

              <div>
-                <label
-                  htmlFor="onboard-cat-emoji"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Emoji (optional)
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Icon (optional)
                </label>
-                <input
-                  id="onboard-cat-emoji"
-                  type="text"
-                  value={categoryEmoji}
-                  onChange={(e) => setCategoryEmoji(e.target.value)}
-                  className="w-20 px-3 py-2 border border-gray-200 rounded-lg text-center text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  placeholder="&#9978;"
-                  maxLength={4}
+                <IconPicker
+                  value={categoryIcon}
+                  onChange={setCategoryIcon}
+                  size="md"
                />
              </div>

--- a/src/client/routes/collection/index.tsx
+++ b/src/client/routes/collection/index.tsx
@@ -98,7 +98,7 @@ function CollectionView() {
 	// Group items by categoryId
 	const groupedItems = new Map<
 		number,
-		{ items: typeof items; categoryName: string; categoryEmoji: string }
+		{ items: typeof items; categoryName: string; categoryIcon: string }
 	>();

 	for (const item of items) {
@@ -109,7 +109,7 @@ function CollectionView() {
 			groupedItems.set(item.categoryId, {
 				items: [item],
 				categoryName: item.categoryName,
-				categoryEmoji: item.categoryEmoji,
+				categoryIcon: item.categoryIcon,
 			});
 		}
 	}
@@ -134,7 +134,7 @@ function CollectionView() {
 			{Array.from(groupedItems.entries()).map(
 				([
 					categoryId,
-					{ items: categoryItems, categoryName, categoryEmoji },
+					{ items: categoryItems, categoryName, categoryIcon },
 				]) => {
 					const catTotals = categoryTotalsMap.get(categoryId);
 					return (
@@ -142,7 +142,7 @@ function CollectionView() {
 							<CategoryHeader
 								categoryId={categoryId}
 								name={categoryName}
-								emoji={categoryEmoji}
+								icon={categoryIcon}
 								totalWeight={catTotals?.totalWeight ?? 0}
 								totalCost={catTotals?.totalCost ?? 0}
 								itemCount={catTotals?.itemCount ?? categoryItems.length}
@@ -156,7 +156,7 @@ function CollectionView() {
 										weightGrams={item.weightGrams}
 										priceCents={item.priceCents}
 										categoryName={categoryName}
-										categoryEmoji={categoryEmoji}
+										categoryIcon={categoryIcon}
 										imageFilename={item.imageFilename}
 									/>
 								))}
@@ -268,7 +268,7 @@ function PlanningView() {
 					<option value="">All categories</option>
 					{categories?.map((cat) => (
 						<option key={cat.id} value={cat.id}>
-							{cat.emoji} {cat.name}
+							{cat.name}
 						</option>
 					))}
 				</select>
@@ -356,7 +356,7 @@ function PlanningView() {
 							createdAt={thread.createdAt}
 							status={thread.status}
 							categoryName={thread.categoryName}
-							categoryEmoji={thread.categoryEmoji}
+							categoryIcon={thread.categoryIcon}
 						/>
 					))}
 				</div>
--- a/src/client/routes/setups/$setupId.tsx
+++ b/src/client/routes/setups/$setupId.tsx
@@ -66,7 +66,7 @@ function SetupDetailPage() {
    {
      items: typeof setup.items;
      categoryName: string;
-      categoryEmoji: string;
+      categoryIcon: string;
    }
  >();

@@ -78,7 +78,7 @@ function SetupDetailPage() {
      groupedItems.set(item.categoryId, {
        items: [item],
        categoryName: item.categoryName,
-        categoryEmoji: item.categoryEmoji,
+        categoryIcon: item.categoryIcon,
      });
    }
  }
@@ -177,7 +177,7 @@ function SetupDetailPage() {
          {Array.from(groupedItems.entries()).map(
            ([
              categoryId,
-              { items: categoryItems, categoryName, categoryEmoji },
+              { items: categoryItems, categoryName, categoryIcon },
            ]) => {
              const catWeight = categoryItems.reduce(
                (sum, item) => sum + (item.weightGrams ?? 0),
@@ -192,7 +192,7 @@ function SetupDetailPage() {
                  <CategoryHeader
                    categoryId={categoryId}
                    name={categoryName}
-                    emoji={categoryEmoji}
+                    icon={categoryIcon}
                    totalWeight={catWeight}
                    totalCost={catCost}
                    itemCount={categoryItems.length}
@@ -206,7 +206,7 @@ function SetupDetailPage() {
                        weightGrams={item.weightGrams}
                        priceCents={item.priceCents}
                        categoryName={categoryName}
-                        categoryEmoji={categoryEmoji}
+                        categoryIcon={categoryIcon}
                        imageFilename={item.imageFilename}
                        onRemove={() => removeItem.mutate(item.id)}
                      />
--- a/src/client/routes/threads/$threadId.tsx
+++ b/src/client/routes/threads/$threadId.tsx
@@ -134,7 +134,7 @@ function ThreadDetailPage() {
              weightGrams={candidate.weightGrams}
              priceCents={candidate.priceCents}
              categoryName={candidate.categoryName}
-              categoryEmoji={candidate.categoryEmoji}
+              categoryIcon={candidate.categoryIcon}
              imageFilename={candidate.imageFilename}
              threadId={threadId}
              isActive={isActive}