makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Jean-Luc Makiola
2026-03-15 17:57:56 +01:00
parent 615c8944c4
commit 570bcea5c9
7 changed files with 391 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/client/components/CategoryHeader.tsx
View File

@@ -1,143 +1,139 @@
import { useState } from "react"; import { useState } from "react";
import { formatWeight, formatPrice } from "../lib/formatters"; import { formatWeight, formatPrice } from "../lib/formatters";
import { useUpdateCategory, useDeleteCategory } from "../hooks/useCategories"; import { useUpdateCategory, useDeleteCategory } from "../hooks/useCategories";
import { LucideIcon } from "../lib/iconData";
import { IconPicker } from "./IconPicker";
interface CategoryHeaderProps { interface CategoryHeaderProps {
categoryId: number; categoryId: number;
name: string; name: string;
emoji: string; icon: string;
totalWeight: number; totalWeight: number;
totalCost: number; totalCost: number;
itemCount: number; itemCount: number;
} }
export function CategoryHeader({ export function CategoryHeader({
categoryId, categoryId,
name, name,
emoji, icon,
totalWeight, totalWeight,
totalCost, totalCost,
itemCount, itemCount,
}: CategoryHeaderProps) { }: CategoryHeaderProps) {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [editName, setEditName] = useState(name); const [editName, setEditName] = useState(name);
const [editEmoji, setEditEmoji] = useState(emoji); const [editIcon, setEditIcon] = useState(icon);
const updateCategory = useUpdateCategory(); const updateCategory = useUpdateCategory();
const deleteCategory = useDeleteCategory(); const deleteCategory = useDeleteCategory();
const isUncategorized = categoryId === 1; const isUncategorized = categoryId === 1;
function handleSave() { function handleSave() {
if (!editName.trim()) return; if (!editName.trim()) return;
updateCategory.mutate( updateCategory.mutate(
{ id: categoryId, name: editName.trim(), emoji: editEmoji }, { id: categoryId, name: editName.trim(), icon: editIcon },
{ onSuccess: () => setIsEditing(false) }, { onSuccess: () => setIsEditing(false) },
); );
} }
function handleDelete() { function handleDelete() {
if ( if (
confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`) confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
) { ) {
deleteCategory.mutate(categoryId); deleteCategory.mutate(categoryId);
} }
} }
if (isEditing) { if (isEditing) {
return ( return (
<div className="flex items-center gap-3 py-4"> <div className="flex items-center gap-3 py-4">
<input <IconPicker value={editIcon} onChange={setEditIcon} size="sm" />
type="text" <input
value={editEmoji} type="text"
onChange={(e) => setEditEmoji(e.target.value)} value={editName}
className="w-12 text-center text-xl border border-gray-200 rounded-md px-1 py-1" onChange={(e) => setEditName(e.target.value)}
maxLength={4} className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1"
/> onKeyDown={(e) => {
<input if (e.key === "Enter") handleSave();
type="text" if (e.key === "Escape") setIsEditing(false);
value={editName} }}
onChange={(e) => setEditName(e.target.value)} autoFocus
className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1" />
onKeyDown={(e) => { <button
if (e.key === "Enter") handleSave(); type="button"
if (e.key === "Escape") setIsEditing(false); onClick={handleSave}
}} className="text-sm text-blue-600 hover:text-blue-800 font-medium"
autoFocus >
/> Save
<button </button>
type="button" <button
onClick={handleSave} type="button"
className="text-sm text-blue-600 hover:text-blue-800 font-medium" onClick={() => setIsEditing(false)}
> className="text-sm text-gray-400 hover:text-gray-600"
Save >
</button> Cancel
<button </button>
type="button" </div>
onClick={() => setIsEditing(false)} );
className="text-sm text-gray-400 hover:text-gray-600" }
>
Cancel
</button>
</div>
);
}
return ( return (
<div className="group flex items-center gap-3 py-4"> <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> <h2 className="text-lg font-semibold text-gray-900">{name}</h2>
<span className="text-sm text-gray-400"> <span className="text-sm text-gray-400">
{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "} {itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
{formatWeight(totalWeight)} · {formatPrice(totalCost)} {formatWeight(totalWeight)} · {formatPrice(totalCost)}
</span> </span>
{!isUncategorized && ( {!isUncategorized && (
<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
setEditName(name); setEditName(name);
setEditEmoji(emoji); setEditIcon(icon);
setIsEditing(true); setIsEditing(true);
}} }}
className="p-1 text-gray-400 hover:text-gray-600 rounded" className="p-1 text-gray-400 hover:text-gray-600 rounded"
title="Edit category" title="Edit category"
> >
<svg <svg
className="w-4 h-4" className="w-4 h-4"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth={2} 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" 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> </svg>
</button> </button>
<button <button
type="button" type="button"
onClick={handleDelete} onClick={handleDelete}
className="p-1 text-gray-400 hover:text-red-500 rounded" className="p-1 text-gray-400 hover:text-red-500 rounded"
title="Delete category" title="Delete category"
> >
<svg <svg
className="w-4 h-4" className="w-4 h-4"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth={2} 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" 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> </svg>
</button> </button>
</div> </div>
)} )}
</div> </div>
); );
} }

425
src/client/components/CategoryPicker.tsx
View File

@@ -1,200 +1,263 @@
import { useState, useRef, useEffect } from "react"; import { useEffect, useRef, useState } from "react";
import { import {
useCategories, useCategories,
useCreateCategory, useCreateCategory,
} from "../hooks/useCategories"; } from "../hooks/useCategories";
import { LucideIcon } from "../lib/iconData";
import { IconPicker } from "./IconPicker";
interface CategoryPickerProps { interface CategoryPickerProps {
value: number; value: number;
onChange: (categoryId: number) => void; onChange: (categoryId: number) => void;
} }
export function CategoryPicker({ value, onChange }: CategoryPickerProps) { export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
const { data: categories = [] } = useCategories(); const { data: categories = [] } = useCategories();
const createCategory = useCreateCategory(); const createCategory = useCreateCategory();
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [highlightIndex, setHighlightIndex] = useState(-1); const [highlightIndex, setHighlightIndex] = useState(-1);
const containerRef = useRef<HTMLDivElement>(null); const [isCreating, setIsCreating] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const [newCategoryIcon, setNewCategoryIcon] = useState("package");
const listRef = useRef<HTMLUListElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const listRef = useRef<HTMLUListElement>(null);
// Sync display value when value prop changes // Sync display value when value prop changes
const selectedCategory = categories.find((c) => c.id === value); const selectedCategory = categories.find((c) => c.id === value);
const filtered = categories.filter((c) => const filtered = categories.filter((c) =>
c.name.toLowerCase().includes(inputValue.toLowerCase()), c.name.toLowerCase().includes(inputValue.toLowerCase()),
); );
const showCreateOption = const showCreateOption =
inputValue.trim() !== "" && inputValue.trim() !== "" &&
!categories.some( !categories.some(
(c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(), (c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(),
); );
const totalOptions = filtered.length + (showCreateOption ? 1 : 0); const totalOptions = filtered.length + (showCreateOption ? 1 : 0);
useEffect(() => { useEffect(() => {
function handleClickOutside(e: MouseEvent) { function handleClickOutside(e: MouseEvent) {
if ( const target = e.target as Node;
containerRef.current && if (
!containerRef.current.contains(e.target as Node) containerRef.current &&
) { !containerRef.current.contains(target) &&
setIsOpen(false); !(target instanceof Element && target.closest("[data-icon-picker]"))
// Reset input to selected category name ) {
if (selectedCategory) { setIsOpen(false);
setInputValue(""); setIsCreating(false);
} setNewCategoryIcon("package");
} // Reset input to selected category name
} if (selectedCategory) {
document.addEventListener("mousedown", handleClickOutside); setInputValue("");
return () => document.removeEventListener("mousedown", handleClickOutside); }
}, [selectedCategory]); }
}
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [selectedCategory]);
function handleSelect(categoryId: number) { function handleSelect(categoryId: number) {
onChange(categoryId); onChange(categoryId);
setInputValue(""); setInputValue("");
setIsOpen(false); setIsOpen(false);
setHighlightIndex(-1); setHighlightIndex(-1);
} }
async function handleCreate() { function handleStartCreate() {
const name = inputValue.trim(); setIsCreating(true);
if (!name) return; }
createCategory.mutate(
{ name, emoji: "\u{1F4E6}" },
{
onSuccess: (newCat) => {
handleSelect(newCat.id);
},
},
);
}
function handleKeyDown(e: React.KeyboardEvent) { async function handleConfirmCreate() {
if (!isOpen) { const name = inputValue.trim();
if (e.key === "ArrowDown" || e.key === "Enter") { if (!name) return;
setIsOpen(true); createCategory.mutate(
e.preventDefault(); { name, icon: newCategoryIcon },
} {
return; onSuccess: (newCat) => {
} setIsCreating(false);
setNewCategoryIcon("package");
handleSelect(newCat.id);
},
},
);
}
switch (e.key) { function handleKeyDown(e: React.KeyboardEvent) {
case "ArrowDown": if (!isOpen) {
e.preventDefault(); if (e.key === "ArrowDown" || e.key === "Enter") {
setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1)); setIsOpen(true);
break; e.preventDefault();
case "ArrowUp": }
e.preventDefault(); return;
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;
}
}
// Scroll highlighted option into view switch (e.key) {
useEffect(() => { case "ArrowDown":
if (highlightIndex >= 0 && listRef.current) { e.preventDefault();
const option = listRef.current.children[highlightIndex] as HTMLElement; setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1));
option?.scrollIntoView({ block: "nearest" }); break;
} case "ArrowUp":
}, [highlightIndex]); 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 ( // Scroll highlighted option into view
<div ref={containerRef} className="relative"> useEffect(() => {
<input if (highlightIndex >= 0 && listRef.current) {
ref={inputRef} const option = listRef.current.children[highlightIndex] as HTMLElement;
type="text" option?.scrollIntoView({ block: "nearest" });
role="combobox" }
aria-expanded={isOpen} }, [highlightIndex]);
aria-autocomplete="list"
aria-controls="category-listbox" return (
aria-activedescendant={ <div ref={containerRef} className="relative">
highlightIndex >= 0 ? `category-option-${highlightIndex}` : undefined <div className="relative">
} {!isOpen && selectedCategory && (
value={ <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
isOpen <LucideIcon
? inputValue name={selectedCategory.icon}
: selectedCategory size={16}
? `${selectedCategory.emoji} ${selectedCategory.name}` className="text-gray-500"
: "" />
} </div>
placeholder="Search or create category..." )}
onChange={(e) => { <input
setInputValue(e.target.value); ref={inputRef}
setIsOpen(true); type="text"
setHighlightIndex(-1); role="combobox"
}} aria-expanded={isOpen}
onFocus={() => { aria-autocomplete="list"
setIsOpen(true); aria-controls="category-listbox"
setInputValue(""); aria-activedescendant={
}} highlightIndex >= 0
onKeyDown={handleKeyDown} ? `category-option-${highlightIndex}`
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" : undefined
/> }
{isOpen && ( value={
<ul isOpen
ref={listRef} ? inputValue
id="category-listbox" : selectedCategory
role="listbox" ? selectedCategory.name
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) => ( placeholder="Search or create category..."
<li onChange={(e) => {
key={cat.id} setInputValue(e.target.value);
id={`category-option-${i}`} setIsOpen(true);
role="option" setHighlightIndex(-1);
aria-selected={cat.id === value} }}
className={`px-3 py-2 text-sm cursor-pointer ${ onFocus={() => {
i === highlightIndex setIsOpen(true);
? "bg-blue-50 text-blue-900" setInputValue("");
: "hover:bg-gray-50" }}
} ${cat.id === value ? "font-medium" : ""}`} onKeyDown={handleKeyDown}
onClick={() => handleSelect(cat.id)} 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 ${
onMouseEnter={() => setHighlightIndex(i)} !isOpen && selectedCategory ? "pl-8 pr-3" : "px-3"
> }`}
{cat.emoji} {cat.name} />
</li> </div>
))} {isOpen && (
{showCreateOption && ( <ul
<li ref={listRef}
id={`category-option-${filtered.length}`} id="category-listbox"
role="option" role="listbox"
aria-selected={false} className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${ >
highlightIndex === filtered.length {filtered.map((cat, i) => (
? "bg-blue-50 text-blue-900" <li
: "hover:bg-gray-50 text-gray-600" key={cat.id}
}`} id={`category-option-${i}`}
onClick={handleCreate} role="option"
onMouseEnter={() => setHighlightIndex(filtered.length)} aria-selected={cat.id === value}
> className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${
+ Create "{inputValue.trim()}" i === highlightIndex
</li> ? "bg-blue-50 text-blue-900"
)} : "hover:bg-gray-50"
{filtered.length === 0 && !showCreateOption && ( } ${cat.id === value ? "font-medium" : ""}`}
<li className="px-3 py-2 text-sm text-gray-400"> onClick={() => handleSelect(cat.id)}
No categories found onMouseEnter={() => setHighlightIndex(i)}
</li> >
)} <LucideIcon
</ul> name={cat.icon}
)} size={16}
</div> 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>
);
} }

2
src/client/components/CreateThreadModal.tsx
View File

@@ -112,7 +112,7 @@ export function CreateThreadModal() {
> >
{categories?.map((cat) => ( {categories?.map((cat) => (
<option key={cat.id} value={cat.id}> <option key={cat.id} value={cat.id}>
{cat.emoji} {cat.name} {cat.name}
</option> </option>
))} ))}
</select> </select>

24
src/client/components/OnboardingWizard.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from "react";
import { useCreateCategory } from "../hooks/useCategories"; import { useCreateCategory } from "../hooks/useCategories";
import { useCreateItem } from "../hooks/useItems"; import { useCreateItem } from "../hooks/useItems";
import { useUpdateSetting } from "../hooks/useSettings"; import { useUpdateSetting } from "../hooks/useSettings";
import { IconPicker } from "./IconPicker";
interface OnboardingWizardProps { interface OnboardingWizardProps {
onComplete: () => void; onComplete: () => void;
@@ -12,7 +13,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
// Step 2 state // Step 2 state
const [categoryName, setCategoryName] = useState(""); const [categoryName, setCategoryName] = useState("");
const [categoryEmoji, setCategoryEmoji] = useState(""); const [categoryIcon, setCategoryIcon] = useState("");
const [categoryError, setCategoryError] = useState(""); const [categoryError, setCategoryError] = useState("");
const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(null); const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(null);
@@ -41,7 +42,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
} }
setCategoryError(""); setCategoryError("");
createCategory.mutate( createCategory.mutate(
{ name, emoji: categoryEmoji.trim() || undefined }, { name, icon: categoryIcon.trim() || undefined },
{ {
onSuccess: (created) => { onSuccess: (created) => {
setCreatedCategoryId(created.id); setCreatedCategoryId(created.id);
@@ -164,20 +165,13 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
</div> </div>
<div> <div>
<label <label className="block text-sm font-medium text-gray-700 mb-1">
htmlFor="onboard-cat-emoji" Icon (optional)
className="block text-sm font-medium text-gray-700 mb-1"
>
Emoji (optional)
</label> </label>
<input <IconPicker
id="onboard-cat-emoji" value={categoryIcon}
type="text" onChange={setCategoryIcon}
value={categoryEmoji} size="md"
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}
/> />
</div> </div>

14
src/client/routes/collection/index.tsx
View File

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

10
src/client/routes/setups/$setupId.tsx
View File

@@ -66,7 +66,7 @@ function SetupDetailPage() {
{ {
items: typeof setup.items; items: typeof setup.items;
categoryName: string; categoryName: string;
categoryEmoji: string; categoryIcon: string;
} }
>(); >();
@@ -78,7 +78,7 @@ function SetupDetailPage() {
groupedItems.set(item.categoryId, { groupedItems.set(item.categoryId, {
items: [item], items: [item],
categoryName: item.categoryName, categoryName: item.categoryName,
categoryEmoji: item.categoryEmoji, categoryIcon: item.categoryIcon,
}); });
} }
} }
@@ -177,7 +177,7 @@ function SetupDetailPage() {
{Array.from(groupedItems.entries()).map( {Array.from(groupedItems.entries()).map(
([ ([
categoryId, categoryId,
{ items: categoryItems, categoryName, categoryEmoji }, { items: categoryItems, categoryName, categoryIcon },
]) => { ]) => {
const catWeight = categoryItems.reduce( const catWeight = categoryItems.reduce(
(sum, item) => sum + (item.weightGrams ?? 0), (sum, item) => sum + (item.weightGrams ?? 0),
@@ -192,7 +192,7 @@ function SetupDetailPage() {
<CategoryHeader <CategoryHeader
categoryId={categoryId} categoryId={categoryId}
name={categoryName} name={categoryName}
emoji={categoryEmoji} icon={categoryIcon}
totalWeight={catWeight} totalWeight={catWeight}
totalCost={catCost} totalCost={catCost}
itemCount={categoryItems.length} itemCount={categoryItems.length}
@@ -206,7 +206,7 @@ function SetupDetailPage() {
weightGrams={item.weightGrams} weightGrams={item.weightGrams}
priceCents={item.priceCents} priceCents={item.priceCents}
categoryName={categoryName} categoryName={categoryName}
categoryEmoji={categoryEmoji} categoryIcon={categoryIcon}
imageFilename={item.imageFilename} imageFilename={item.imageFilename}
onRemove={() => removeItem.mutate(item.id)} onRemove={() => removeItem.mutate(item.id)}
/> />

2
src/client/routes/threads/$threadId.tsx
View File

@@ -134,7 +134,7 @@ function ThreadDetailPage() {
weightGrams={candidate.weightGrams} weightGrams={candidate.weightGrams}
priceCents={candidate.priceCents} priceCents={candidate.priceCents}
categoryName={candidate.categoryName} categoryName={candidate.categoryName}
categoryEmoji={candidate.categoryEmoji} categoryIcon={candidate.categoryIcon}
imageFilename={candidate.imageFilename} imageFilename={candidate.imageFilename}
threadId={threadId} threadId={threadId}
isActive={isActive} isActive={isActive}