From 3fc737c87219344eb32c1110f26aa9c856789da8 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 3 Apr 2026 18:31:57 +0200
Subject: [PATCH] fix: add tab navigation to collection page and skip 404
 retries

Adds Gear/Planning/Setups pill tabs to the collection page so users
can switch tabs without going back to the dashboard. Also skips
React Query retries on 404 responses for immediate error display.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/routes/collection/index.tsx | 27 +++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/client/routes/collection/index.tsx b/src/client/routes/collection/index.tsx
index a12cf15..5d3b431 100644
--- a/src/client/routes/collection/index.tsx
+++ b/src/client/routes/collection/index.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRef } from "react";
 import { z } from "zod";
@@ -16,6 +16,11 @@ export const Route = createFileRoute("/collection/")({
 });
 
 const TAB_ORDER = ["gear", "planning", "setups"] as const;
+const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
+	gear: "Gear",
+	planning: "Planning",
+	setups: "Setups",
+};
 
 const slideVariants = {
 	enter: (dir: number) => ({ x: `${dir * 15}%`, opacity: 0 }),
@@ -33,6 +38,26 @@ function CollectionPage() {
 
 	return (
 		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 overflow-x-hidden">
+			{/* Tab navigation */}
+			<div className="flex justify-center mb-6">
+				<div className="flex bg-gray-100 rounded-full p-0.5 gap-0.5">
+					{TAB_ORDER.map((t) => (
+						<Link
+							key={t}
+							to="/collection"
+							search={{ tab: t }}
+							className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
+								tab === t
+									? "bg-gray-700 text-white"
+									: "text-gray-600 hover:bg-gray-200"
+							}`}
+						>
+							{TAB_LABELS[t]}
+						</Link>
+					))}
+				</div>
+			</div>
+
 			<AnimatePresence mode="wait" initial={false} custom={direction}>
 				<motion.div
 					key={tab}