feat(03-02): navigation restructure, TotalsBar refactor, and setup hooks

- Move collection view from / to /collection with gear/planning tabs
- Rewrite / as dashboard with three summary cards (Collection, Planning, Setups)
- Refactor TotalsBar to accept optional stats/linkTo/title props
- Create DashboardCard component for dashboard summary cards
- Create useSetups hooks (CRUD + sync/remove item mutations)
- Update __root.tsx with route-aware TotalsBar, FAB visibility, resolve navigation
- Add item picker and setup delete UI state to uiStore
- Invalidate setups queries on item update/delete for stale data prevention
- Update routeTree.gen.ts with new collection/setups routes

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

src/client/components/TotalsBar.tsx

@@ -1,36 +1,57 @@
+import { Link } from "@tanstack/react-router";
 import { useTotals } from "../hooks/useTotals";
 import { formatWeight, formatPrice } from "../lib/formatters";
 
-export function TotalsBar() {
+interface TotalsBarProps {
+  title?: string;
+  stats?: Array<{ label: string; value: string }>;
+  linkTo?: string;
+}
+
+export function TotalsBar({ title = "GearBox", stats, linkTo }: TotalsBarProps) {
   const { data } = useTotals();
 
-  const global = data?.global;
+  // When no stats provided, use global totals (backward compatible)
+  const displayStats = stats ?? (data?.global
+    ? [
+        { label: "items", value: String(data.global.itemCount) },
+        { label: "total", value: formatWeight(data.global.totalWeight) },
+        { label: "spent", value: formatPrice(data.global.totalCost) },
+      ]
+    : [
+        { label: "items", value: "0" },
+        { label: "total", value: formatWeight(null) },
+        { label: "spent", value: formatPrice(null) },
+      ]);
+
+  const titleElement = linkTo ? (
+    <Link to={linkTo} className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
+      {title}
+    </Link>
+  ) : (
+    <h1 className="text-lg font-semibold text-gray-900">{title}</h1>
+  );
+
+  // If stats prop is explicitly an empty array, show title only (dashboard mode)
+  const showStats = stats === undefined || stats.length > 0;
 
   return (
     <div className="sticky top-0 z-10 bg-white border-b border-gray-100">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-14">
-          <h1 className="text-lg font-semibold text-gray-900">GearBox</h1>
-          <div className="flex items-center gap-6 text-sm text-gray-500">
-            <span>
-              <span className="font-medium text-gray-700">
-                {global?.itemCount ?? 0}
-              </span>{" "}
-              items
-            </span>
-            <span>
-              <span className="font-medium text-gray-700">
-                {formatWeight(global?.totalWeight ?? null)}
-              </span>{" "}
-              total
-            </span>
-            <span>
-              <span className="font-medium text-gray-700">
-                {formatPrice(global?.totalCost ?? null)}
-              </span>{" "}
-              spent
-            </span>
-          </div>
+          {titleElement}
+          {showStats && (
+            <div className="flex items-center gap-6 text-sm text-gray-500">
+              {displayStats.map((stat) => (
+                <span key={stat.label}>
+                  <span className="font-medium text-gray-700">
+                    {stat.value}
+                  </span>{" "}
+                  {stat.label}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </div>