wip: in-progress feature work (manual entry, collection view)

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

src/client/components/AddToCollectionModal.tsx

@@ -3,6 +3,7 @@ import { toast } from "sonner";
 import { useCategories } from "../hooks/useCategories";
 import { useCreateItem } from "../hooks/useItems";
 import { useUIStore } from "../stores/uiStore";
+import { CategoryPicker } from "./CategoryPicker";
 
 export function AddToCollectionModal() {
 	const { open, globalItemId, globalItemName } = useUIStore(
@@ -95,24 +96,13 @@ export function AddToCollectionModal() {
 
 				<form onSubmit={handleSubmit} className="space-y-4">
 					<div>
-						<label
-							htmlFor="collection-category"
-							className="block text-sm font-medium text-gray-700 mb-1"
-						>
+						<label className="block text-sm font-medium text-gray-700 mb-1">
 							Category
 						</label>
-						<select
-							id="collection-category"
-							value={categoryId ?? ""}
-							onChange={(e) => setCategoryId(Number(e.target.value))}
-							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent bg-white"
-						>
-							{categories?.map((cat) => (
-								<option key={cat.id} value={cat.id}>
-									{cat.name}
-								</option>
-							))}
-						</select>
+						<CategoryPicker
+							value={categoryId ?? 0}
+							onChange={(id) => setCategoryId(id)}
+						/>
 					</div>
 
 					<div>

src/client/components/CollectionView.tsx

@@ -230,6 +230,7 @@ export function CollectionView() {
 								imageFilename={item.imageFilename}
 								imageUrl={item.imageUrl}
 								productUrl={item.productUrl}
+								brand={item.brand}
 							/>
 						))}
 					</div>
@@ -264,6 +265,7 @@ export function CollectionView() {
 											categoryIcon={categoryIcon}
 											imageFilename={item.imageFilename}
 											productUrl={item.productUrl}
+											brand={item.brand}
 										/>
 									))}
 								</div>

src/client/hooks/useItems.ts

@@ -34,6 +34,8 @@ interface ItemWithCategory {
 	notes: string | null;
 	productUrl: string | null;
 	imageFilename: string | null;
+	globalItemId: number | null;
+	brand: string | null;
 	createdAt: string;
 	updatedAt: string;
 	categoryName: string;

src/client/lib/iconData.tsx

@@ -223,6 +223,7 @@ export const iconGroups: IconGroup[] = [
 // --- LucideIcon render component ---
 
 function toPascalCase(str: string): string {
+	if (!str) return "Package";
 	return str
 		.split("-")
 		.map((s) => s.charAt(0).toUpperCase() + s.slice(1))