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

---
phase: 27-top-nav-restructure-and-search-bar-rethink
plan: 02
type: execute
wave: 1
depends_on: []
files_modified:
  - src/client/routes/setups/index.tsx
  - src/client/routes/collection/index.tsx
autonomous: true
requirements:
  - NAV-05

must_haves:
  truths:
    - "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"
  artifacts:
    - path: "src/client/routes/setups/index.tsx"
      provides: "Top-level Setups route page"
      exports: ["Route"]
    - path: "src/client/routes/collection/index.tsx"
      provides: "Collection page with Gear and Planning tabs only"
      contains: "TAB_ORDER = [\"gear\", \"planning\"]"
  key_links:
    - from: "src/client/routes/setups/index.tsx"
      to: "src/client/components/SetupsView.tsx"
      via: "import and render"
      pattern: "import.*SetupsView"
---

<objective>
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.
</objective>

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

<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

<interfaces>
<!-- SetupsView component that will be rendered in the new route -->
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):
```typescript
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):
```typescript
export const Route = createFileRoute("/setups/$setupId")({ ... });
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create setups index route</name>
  <files>src/client/routes/setups/index.tsx</files>
  <read_first>
    src/client/routes/collection/index.tsx
    src/client/components/SetupsView.tsx
    src/client/routes/setups/$setupId.tsx
  </read_first>
  <action>
Create `src/client/routes/setups/index.tsx` to make `/setups` a top-level route (per D-04).

**File contents:**
```typescript
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.
  </action>
  <verify>
    <automated>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</automated>
  </verify>
  <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>
  <done>/setups route exists and renders SetupsView in the standard page container layout</done>
</task>

<task type="auto">
  <name>Task 2: Remove Setups tab from Collection page</name>
  <files>src/client/routes/collection/index.tsx</files>
  <read_first>
    src/client/routes/collection/index.tsx
  </read_first>
  <action>
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"]`:
```typescript
const TAB_ORDER = ["gear", "planning"] as const;
```

3. **Update TAB_LABELS:** Remove the `setups` entry:
```typescript
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:
```typescript
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:
```typescript
{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.
  </action>
  <verify>
    <automated>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</automated>
  </verify>
  <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>
  <done>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.</done>
</task>

</tasks>

<verification>
- `/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)
</verification>

<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>

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