GearBox/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
27-top-nav-restructure-and-search-bar-rethink	02	execute	1		src/client/routes/setups/index.tsx src/client/routes/collection/index.tsx	true	NAV-05	truths artifacts key_links Visiting /setups renders the SetupsView component Collection page shows only Gear and Planning tabs (no Setups tab) Existing /collection?tab=setups URLs gracefully fall back to Gear tab path provides exports src/client/routes/setups/index.tsx Top-level Setups route page Route path provides contains src/client/routes/collection/index.tsx Collection page with Gear and Planning tabs only TAB_ORDER = ["gear", "planning"] from to via pattern src/client/routes/setups/index.tsx src/client/components/SetupsView.tsx import and render import.*SetupsView

Elevate Setups to a top-level route and simplify Collection tabs to Gear and Planning only.

Purpose: Per D-04, Setups becomes a standalone top-level section with its own route at /setups. Per D-05, the Collection page drops its Setups tab, keeping only Gear and Planning. This is the route restructuring that the new nav bar (Plan 01) links to.

Output: New setups/index.tsx route file and updated collection/index.tsx with two tabs.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-RESEARCH.md From src/client/components/SetupsView.tsx: ```typescript export function SetupsView(): JSX.Element; // Renders list of user setups with search, create, delete // Already handles auth-gated mutations internally ```

From src/client/routes/collection/index.tsx (current state — being modified):

const TAB_ORDER = ["gear", "planning", "setups"] as const;
const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
  gear: "Gear",
  planning: "Planning",
  setups: "Setups",
};
const searchSchema = z.object({
  tab: z.enum(["gear", "planning", "setups"]).catch("gear"),
});
// Import: import { SetupsView } from "../../components/SetupsView";
// Render: tab === "setups" renders <SetupsView />

From src/client/routes/setups/$setupId.tsx (existing sibling route — for pattern reference):

export const Route = createFileRoute("/setups/$setupId")({ ... });

Task 1: Create setups index route src/client/routes/setups/index.tsx src/client/routes/collection/index.tsx src/client/components/SetupsView.tsx src/client/routes/setups/$setupId.tsx Create `src/client/routes/setups/index.tsx` to make `/setups` a top-level route (per D-04).

File contents:

import { createFileRoute } from "@tanstack/react-router";
import { SetupsView } from "../../components/SetupsView";

export const Route = createFileRoute("/setups/")({
  component: SetupsPage,
});

function SetupsPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <SetupsView />
    </div>
  );
}

The container matches the Collection page layout pattern (max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6).

SetupsView already handles all setup CRUD logic, auth gating for mutations, search/filter, and delete confirmation. No additional logic needed in the route component.

Note: After creating this file, the TanStack Router dev server will auto-regenerate routeTree.gen.ts to include the new route. Do NOT edit routeTree.gen.ts manually. cd /home/jean-luc-makiola/Development/projects/GearBox && grep -c "createFileRoute.*setups" src/client/routes/setups/index.tsx && grep -c "SetupsView" src/client/routes/setups/index.tsx <acceptance_criteria> - src/client/routes/setups/index.tsx exists - File contains createFileRoute("/setups/") - File imports SetupsView from ../../components/SetupsView - File renders <SetupsView /> inside a container div - Container div has class max-w-7xl mx-auto </acceptance_criteria> /setups route exists and renders SetupsView in the standard page container layout

Task 2: Remove Setups tab from Collection page src/client/routes/collection/index.tsx src/client/routes/collection/index.tsx Modify `src/client/routes/collection/index.tsx` to remove the Setups tab (per D-05, D-06).

Changes:

1. Remove SetupsView import: Delete import { SetupsView } from "../../components/SetupsView";

2. Update TAB_ORDER: Change from ["gear", "planning", "setups"] to ["gear", "planning"]:

const TAB_ORDER = ["gear", "planning"] as const;

3. Update TAB_LABELS: Remove the setups entry:

const TAB_LABELS: Record<(typeof TAB_ORDER)[number], string> = {
  gear: "Gear",
  planning: "Planning",
};

4. Update searchSchema: Remove "setups" from the Zod enum. The .catch("gear") ensures old /collection?tab=setups URLs gracefully fall back:

const searchSchema = z.object({
  tab: z.enum(["gear", "planning"]).catch("gear"),
});

5. Remove setups conditional render: In the CollectionPage component, remove the tab === "setups" branch from the ternary. The render should be:

{tab === "gear" ? (
  <CollectionView />
) : (
  <PlanningView />
)}

Keep all other code unchanged: the pill tab navigation, AnimatePresence animation, slide variants, and the Collection/Planning views remain exactly as they are. cd /home/jean-luc-makiola/Development/projects/GearBox && ! grep -q "setups" src/client/routes/collection/index.tsx && echo "no-setups-found" && grep -c "gear.*planning" src/client/routes/collection/index.tsx <acceptance_criteria> - src/client/routes/collection/index.tsx does NOT contain the string "setups" (case-sensitive) - src/client/routes/collection/index.tsx does NOT import SetupsView - TAB_ORDER contains exactly ["gear", "planning"] - searchSchema z.enum contains exactly ["gear", "planning"] - TAB_LABELS has only gear and planning entries - AnimatePresence and slide animation remain unchanged - CollectionView and PlanningView renders remain unchanged </acceptance_criteria> Collection page shows only Gear and Planning tabs. Setups tab is completely removed. Old ?tab=setups URLs fall back to Gear tab via Zod catch.

- `/setups` route file exists and renders SetupsView - Collection page has exactly 2 tabs: Gear and Planning - No reference to "setups" remains in collection/index.tsx - Both files follow existing codebase patterns (createFileRoute, Zod validation, Tailwind layout)

<success_criteria>

• Visiting /setups renders the SetupsView component in a standard page layout
• Collection page shows 2 pill tabs (Gear, Planning) instead of 3
• Existing /collection?tab=setups URLs gracefully default to Gear tab </success_criteria>

After completion, create `.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-02-SUMMARY.md`