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>