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/DashboardCard.tsx

@@ -0,0 +1,50 @@
+import { Link } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+
+interface DashboardCardProps {
+  to: string;
+  search?: Record<string, string>;
+  title: string;
+  icon: ReactNode;
+  stats: Array<{ label: string; value: string }>;
+  emptyText?: string;
+}
+
+export function DashboardCard({
+  to,
+  search,
+  title,
+  icon,
+  stats,
+  emptyText,
+}: DashboardCardProps) {
+  const allZero = stats.every(
+    (s) => s.value === "0" || s.value === "$0.00" || s.value === "0g",
+  );
+
+  return (
+    <Link
+      to={to}
+      search={search}
+      className="block bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-6"
+    >
+      <div className="flex items-center gap-3 mb-4">
+        <span className="text-2xl">{icon}</span>
+        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+      </div>
+      <div className="space-y-1.5">
+        {stats.map((stat) => (
+          <div key={stat.label} className="flex items-center justify-between">
+            <span className="text-sm text-gray-500">{stat.label}</span>
+            <span className="text-sm font-medium text-gray-700">
+              {stat.value}
+            </span>
+          </div>
+        ))}
+      </div>
+      {allZero && emptyText && (
+        <p className="mt-4 text-sm text-blue-600 font-medium">{emptyText}</p>
+      )}
+    </Link>
+  );
+}

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>