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,11 +1,13 @@
 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;
+	icon: string;
 	totalWeight: number;
 	totalCost: number;
 	itemCount: number;
@@ -14,14 +16,14 @@ interface CategoryHeaderProps {
 export function CategoryHeader({
 	categoryId,
 	name,
-  emoji,
+	icon,
 	totalWeight,
 	totalCost,
 	itemCount,
 }: CategoryHeaderProps) {
 	const [isEditing, setIsEditing] = useState(false);
 	const [editName, setEditName] = useState(name);
-  const [editEmoji, setEditEmoji] = useState(emoji);
+	const [editIcon, setEditIcon] = useState(icon);
 	const updateCategory = useUpdateCategory();
 	const deleteCategory = useDeleteCategory();

@@ -30,7 +32,7 @@ export function CategoryHeader({
 	function handleSave() {
 		if (!editName.trim()) return;
 		updateCategory.mutate(
-      { id: categoryId, name: editName.trim(), emoji: editEmoji },
+			{ id: categoryId, name: editName.trim(), icon: editIcon },
 			{ onSuccess: () => setIsEditing(false) },
 		);
 	}
@@ -46,13 +48,7 @@ export function CategoryHeader({
 	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}
-        />
+				<IconPicker value={editIcon} onChange={setEditIcon} size="sm" />
 				<input
 					type="text"
 					value={editName}
@@ -84,7 +80,7 @@ export function CategoryHeader({

 	return (
 		<div className="group flex items-center gap-3 py-4">
-      <span className="text-xl">{emoji}</span>
+			<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"} ·{" "}
@@ -96,7 +92,7 @@ export function CategoryHeader({
 						type="button"
 						onClick={() => {
 							setEditName(name);
-              setEditEmoji(emoji);
+							setEditIcon(icon);
 							setIsEditing(true);
 						}}
 						className="p-1 text-gray-400 hover:text-gray-600 rounded"
--- a/src/client/components/CategoryPicker.tsx
+++ b/src/client/components/CategoryPicker.tsx
@@ -1,8 +1,10 @@
-import { useState, useRef, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
 	useCategories,
 	useCreateCategory,
 } from "../hooks/useCategories";
+import { LucideIcon } from "../lib/iconData";
+import { IconPicker } from "./IconPicker";

 interface CategoryPickerProps {
 	value: number;
@@ -15,6 +17,8 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 	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);
@@ -36,11 +40,15 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {

 	useEffect(() => {
 		function handleClickOutside(e: MouseEvent) {
+			const target = e.target as Node;
 			if (
 				containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
+				!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("");
@@ -58,13 +66,19 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 		setHighlightIndex(-1);
 	}

-  async function handleCreate() {
+	function handleStartCreate() {
+		setIsCreating(true);
+	}
+
+	async function handleConfirmCreate() {
 		const name = inputValue.trim();
 		if (!name) return;
 		createCategory.mutate(
-      { name, emoji: "\u{1F4E6}" },
+			{ name, icon: newCategoryIcon },
 			{
 				onSuccess: (newCat) => {
+					setIsCreating(false);
+					setNewCategoryIcon("package");
 					handleSelect(newCat.id);
 				},
 			},
@@ -91,19 +105,26 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 				break;
 			case "Enter":
 				e.preventDefault();
-        if (highlightIndex >= 0 && highlightIndex < filtered.length) {
+				if (isCreating) {
+					handleConfirmCreate();
+				} else if (highlightIndex >= 0 && highlightIndex < filtered.length) {
 					handleSelect(filtered[highlightIndex].id);
 				} else if (
 					showCreateOption &&
 					highlightIndex === filtered.length
 				) {
-          handleCreate();
+					handleStartCreate();
 				}
 				break;
 			case "Escape":
+				if (isCreating) {
+					setIsCreating(false);
+					setNewCategoryIcon("package");
+				} else {
 					setIsOpen(false);
 					setHighlightIndex(-1);
 					setInputValue("");
+				}
 				break;
 		}
 	}
@@ -118,6 +139,16 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {

 	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"
@@ -126,13 +157,15 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 					aria-autocomplete="list"
 					aria-controls="category-listbox"
 					aria-activedescendant={
-          highlightIndex >= 0 ? `category-option-${highlightIndex}` : undefined
+						highlightIndex >= 0
+							? `category-option-${highlightIndex}`
+							: undefined
 					}
 					value={
 						isOpen
 							? inputValue
 							: selectedCategory
-              ? `${selectedCategory.emoji} ${selectedCategory.name}`
+								? selectedCategory.name
 								: ""
 					}
 					placeholder="Search or create category..."
@@ -146,8 +179,11 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 						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"
+					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}
@@ -161,7 +197,7 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 							id={`category-option-${i}`}
 							role="option"
 							aria-selected={cat.id === value}
-              className={`px-3 py-2 text-sm cursor-pointer ${
+							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"
@@ -169,10 +205,15 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 							onClick={() => handleSelect(cat.id)}
 							onMouseEnter={() => setHighlightIndex(i)}
 						>
-              {cat.emoji} {cat.name}
+							<LucideIcon
+								name={cat.icon}
+								size={16}
+								className="text-gray-500 shrink-0"
+							/>
+							{cat.name}
 						</li>
 					))}
-          {showCreateOption && (
+					{showCreateOption && !isCreating && (
 						<li
 							id={`category-option-${filtered.length}`}
 							role="option"
@@ -182,12 +223,34 @@ export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
 									? "bg-blue-50 text-blue-900"
 									: "hover:bg-gray-50 text-gray-600"
 							}`}
-              onClick={handleCreate}
+							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
--- 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}