feat(01-03): add data hooks, utilities, UI store, and foundational components

- API fetch wrapper with error handling and multipart upload
- Weight/price formatters for display
- TanStack Query hooks for items, categories, and totals with cache invalidation
- Zustand UI store for panel and confirm dialog state
- TotalsBar, CategoryHeader, ItemCard, ConfirmDialog, ImageUpload components

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

src/client/hooks/useCategories.ts

@@ -0,0 +1,53 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import type { Category, CreateCategory } from "../../shared/types";
+
+export function useCategories() {
+  return useQuery({
+    queryKey: ["categories"],
+    queryFn: () => apiGet<Category[]>("/api/categories"),
+  });
+}
+
+export function useCreateCategory() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateCategory) =>
+      apiPost<Category>("/api/categories", data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["categories"] });
+    },
+  });
+}
+
+export function useUpdateCategory() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      ...data
+    }: {
+      id: number;
+      name?: string;
+      emoji?: string;
+    }) => apiPut<Category>(`/api/categories/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["categories"] });
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}
+
+export function useDeleteCategory() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      apiDelete<{ success: boolean }>(`/api/categories/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["categories"] });
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}

src/client/hooks/useItems.ts

@@ -0,0 +1,69 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+import type { CreateItem } from "../../shared/types";
+
+interface ItemWithCategory {
+  id: number;
+  name: string;
+  weightGrams: number | null;
+  priceCents: number | null;
+  categoryId: number;
+  notes: string | null;
+  productUrl: string | null;
+  imageFilename: string | null;
+  createdAt: string;
+  updatedAt: string;
+  categoryName: string;
+  categoryEmoji: string;
+}
+
+export function useItems() {
+  return useQuery({
+    queryKey: ["items"],
+    queryFn: () => apiGet<ItemWithCategory[]>("/api/items"),
+  });
+}
+
+export function useItem(id: number | null) {
+  return useQuery({
+    queryKey: ["items", id],
+    queryFn: () => apiGet<ItemWithCategory>(`/api/items/${id}`),
+    enabled: id != null,
+  });
+}
+
+export function useCreateItem() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateItem) =>
+      apiPost<ItemWithCategory>("/api/items", data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}
+
+export function useUpdateItem() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...data }: { id: number } & Partial<CreateItem>) =>
+      apiPut<ItemWithCategory>(`/api/items/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}
+
+export function useDeleteItem() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      apiDelete<{ success: boolean }>(`/api/items/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}

src/client/hooks/useTotals.ts

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGet } from "../lib/api";
+
+interface CategoryTotals {
+  categoryId: number;
+  categoryName: string;
+  categoryEmoji: string;
+  totalWeight: number;
+  totalCost: number;
+  itemCount: number;
+}
+
+interface GlobalTotals {
+  totalWeight: number;
+  totalCost: number;
+  itemCount: number;
+}
+
+interface TotalsResponse {
+  categories: CategoryTotals[];
+  global: GlobalTotals;
+}
+
+export type { CategoryTotals, GlobalTotals, TotalsResponse };
+
+export function useTotals() {
+  return useQuery({
+    queryKey: ["totals"],
+    queryFn: () => apiGet<TotalsResponse>("/api/totals"),
+  });
+}