feat(03-02): setup list page, detail page, and item picker

- Create SetupCard component with name, item count, weight, cost display - Build setups list page with inline create form and grid layout - Build setup detail page with category-grouped items and sticky totals bar - Create ItemPicker component in SlideOutPanel with category-grouped checkboxes - Add onRemove prop to ItemCard for non-destructive setup item removal - Setup detail has delete confirmation dialog with collection safety note - Empty states for both setup list and setup detail pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 12:50:54 +01:00
parent 86a7a0def1
commit 67099551d0
5 changed files with 552 additions and 8 deletions
--- a/src/client/components/ItemPicker.tsx
+++ b/src/client/components/ItemPicker.tsx
@@ -0,0 +1,141 @@
+import { useState, useEffect } from "react";
+import { SlideOutPanel } from "./SlideOutPanel";
+import { useItems } from "../hooks/useItems";
+import { useSyncSetupItems } from "../hooks/useSetups";
+import { formatWeight, formatPrice } from "../lib/formatters";
+
+interface ItemPickerProps {
+  setupId: number;
+  currentItemIds: number[];
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ItemPicker({
+  setupId,
+  currentItemIds,
+  isOpen,
+  onClose,
+}: ItemPickerProps) {
+  const { data: items } = useItems();
+  const syncItems = useSyncSetupItems(setupId);
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+
+  // Reset selected IDs when panel opens
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedIds(new Set(currentItemIds));
+    }
+  }, [isOpen, currentItemIds]);
+
+  function handleToggle(itemId: number) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemId)) {
+        next.delete(itemId);
+      } else {
+        next.add(itemId);
+      }
+      return next;
+    });
+  }
+
+  function handleDone() {
+    syncItems.mutate(Array.from(selectedIds), {
+      onSuccess: () => onClose(),
+    });
+  }
+
+  // Group items by category
+  const grouped = new Map<
+    number,
+    {
+      categoryName: string;
+      categoryEmoji: string;
+      items: NonNullable<typeof items>;
+    }
+  >();
+
+  if (items) {
+    for (const item of items) {
+      const group = grouped.get(item.categoryId);
+      if (group) {
+        group.items.push(item);
+      } else {
+        grouped.set(item.categoryId, {
+          categoryName: item.categoryName,
+          categoryEmoji: item.categoryEmoji,
+          items: [item],
+        });
+      }
+    }
+  }
+
+  return (
+    <SlideOutPanel isOpen={isOpen} onClose={onClose} title="Select Items">
+      <div className="flex flex-col h-full">
+        <div className="flex-1 overflow-y-auto -mx-6 px-6">
+          {!items || items.length === 0 ? (
+            <div className="py-8 text-center">
+              <p className="text-sm text-gray-500">
+                No items in your collection yet.
+              </p>
+            </div>
+          ) : (
+            Array.from(grouped.entries()).map(
+              ([categoryId, { categoryName, categoryEmoji, items: catItems }]) => (
+                <div key={categoryId} className="mb-4">
+                  <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
+                    {categoryEmoji} {categoryName}
+                  </h3>
+                  <div className="space-y-1">
+                    {catItems.map((item) => (
+                      <label
+                        key={item.id}
+                        className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={selectedIds.has(item.id)}
+                          onChange={() => handleToggle(item.id)}
+                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                        />
+                        <span className="flex-1 text-sm text-gray-900 truncate">
+                          {item.name}
+                        </span>
+                        <span className="text-xs text-gray-400 shrink-0">
+                          {item.weightGrams != null && formatWeight(item.weightGrams)}
+                          {item.weightGrams != null && item.priceCents != null && " · "}
+                          {item.priceCents != null && formatPrice(item.priceCents)}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ),
+            )
+          )}
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-3 pt-4 border-t border-gray-100 -mx-6 px-6 pb-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleDone}
+            disabled={syncItems.isPending}
+            className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors"
+          >
+            {syncItems.isPending ? "Saving..." : "Done"}
+          </button>
+        </div>
+      </div>
+    </SlideOutPanel>
+  );
+}