---
phase: 27-top-nav-restructure-and-search-bar-rethink
plan: 03
type: execute
wave: 2
depends_on:
  - 27-01
  - 27-02
files_modified:
  - src/client/routes/__root.tsx
  - src/client/routes/index.tsx
autonomous: false
requirements:
  - NAV-01
  - NAV-02
  - NAV-03
  - NAV-04

must_haves:
  truths:
    - "The app shows TopNav instead of TotalsBar on every page"
    - "BottomTabBar is visible on mobile viewports"
    - "FAB is hidden on mobile (only visible on md+ screens)"
    - "The landing page has no hero section — starts with Popular Setups"
    - "/setups is in isPublicRoute so direct navigation works for anonymous users"
    - "Page content is not obscured by the bottom tab bar on mobile"
  artifacts:
    - path: "src/client/routes/__root.tsx"
      provides: "Root layout with TopNav, BottomTabBar, and updated FAB visibility"
      contains: "TopNav"
    - path: "src/client/routes/index.tsx"
      provides: "Landing page without hero section"
  key_links:
    - from: "src/client/routes/__root.tsx"
      to: "src/client/components/TopNav.tsx"
      via: "import and render"
      pattern: "import.*TopNav"
    - from: "src/client/routes/__root.tsx"
      to: "src/client/components/BottomTabBar.tsx"
      via: "import and render"
      pattern: "import.*BottomTabBar"
---

<objective>
Wire TopNav and BottomTabBar into the root layout, hide FAB on mobile, remove the landing page hero, and update public route checks.

Purpose: This is the integration plan that connects everything built in Plans 01 and 02. The TotalsBar is swapped for TopNav, BottomTabBar is added for mobile, the FAB gets hidden on mobile (per D-15), the landing page hero is removed (per D-09/D-10), and `/setups` is added to isPublicRoute so anonymous direct navigation works.

Output: Fully wired navigation system visible across the app.
</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
@.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md
@.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-02-SUMMARY.md

<interfaces>
<!-- Components created in Plan 01 -->
From src/client/components/TopNav.tsx:
```typescript
export function TopNav(): JSX.Element;
// Persistent top nav bar with logo, nav links, search, user menu
// Handles auth interception internally
```

From src/client/components/BottomTabBar.tsx:
```typescript
export function BottomTabBar(): JSX.Element;
// Mobile bottom tab bar, renders only on md:hidden
// Handles auth interception internally
```

<!-- Current __root.tsx structure (being modified) -->
From src/client/routes/__root.tsx:
```typescript
// Current imports to change:
import { TotalsBar } from "../components/TotalsBar";  // REMOVE

// Current isPublicRoute check:
const isPublicRoute =
  location.pathname === "/" ||
  location.pathname.startsWith("/users/") ||
  location.pathname.startsWith("/global-items") ||
  location.pathname.startsWith("/setups/") ||
  location.pathname === "/login";

// Current FAB render:
{showFab && <FabMenu isSetupsPage={isSetupsPage} />}

// Current TotalsBar render:
<TotalsBar {...totalsBarProps} />
```
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Wire TopNav, BottomTabBar, and FAB changes into __root.tsx</name>
  <files>src/client/routes/__root.tsx</files>
  <read_first>
    src/client/routes/__root.tsx
    src/client/components/TopNav.tsx
    src/client/components/BottomTabBar.tsx
    src/client/components/FabMenu.tsx
  </read_first>
  <action>
Modify `src/client/routes/__root.tsx` with these specific changes:

**1. Update imports:**
- Remove: `import { TotalsBar } from "../components/TotalsBar";`
- Add: `import { TopNav } from "../components/TopNav";`
- Add: `import { BottomTabBar } from "../components/BottomTabBar";`

**2. Remove TotalsBar-related code in RootLayout:**
- Delete the `isDashboard` variable: `const isDashboard = !!matchRoute({ to: "/" });`
- Delete the `totalsBarProps` variable: `const totalsBarProps = isDashboard ? {} : { linkTo: "/" };`

**3. Replace TotalsBar render with TopNav:**
Change `<TotalsBar {...totalsBarProps} />` to `<TopNav />`

**4. Add `/setups` to isPublicRoute (pitfall 2 from research):**
The current check has `location.pathname.startsWith("/setups/")` which only covers `/setups/123` detail pages. Add `location.pathname === "/setups"` so the index route is also public:
```typescript
const isPublicRoute =
  location.pathname === "/" ||
  location.pathname.startsWith("/users/") ||
  location.pathname.startsWith("/global-items") ||
  location.pathname === "/setups" ||
  location.pathname.startsWith("/setups/") ||
  location.pathname === "/login";
```

**5. Hide FAB on mobile (per D-15):**
Wrap the FabMenu in a div with `hidden md:block`:
```typescript
{showFab && (
  <div className="hidden md:block">
    <FabMenu isSetupsPage={isSetupsPage} />
  </div>
)}
```

**6. Add BottomTabBar:**
Add `<BottomTabBar />` after the FabMenu block (before CatalogSearchOverlay). It renders itself only on mobile via `md:hidden`.

**7. Add bottom padding for mobile tab bar (pitfall from research):**
On the root div `<div className="min-h-screen bg-gray-50">`, add mobile-only bottom padding so content isn't obscured by the fixed bottom tab bar:
```typescript
<div className="min-h-screen bg-gray-50 pb-16 md:pb-0">
```
`pb-16` (64px) accounts for the bottom tab bar height on mobile. `md:pb-0` removes it on desktop.

**Do NOT change:** CandidateDeleteDialog, ResolveDialog, CatalogSearchOverlay, AddToCollectionModal, AddToThreadModal, Toaster, AuthPromptModal, OnboardingWizard, ConfirmDialog, ExternalLinkDialog, or any other existing modal/dialog code.
  </action>
  <verify>
    <automated>cd /home/jean-luc-makiola/Development/projects/GearBox && grep -c "TopNav" src/client/routes/__root.tsx && grep -c "BottomTabBar" src/client/routes/__root.tsx && ! grep -q "TotalsBar" src/client/routes/__root.tsx && echo "no-totalsbar" && grep -c 'hidden md:block' src/client/routes/__root.tsx && grep 'isPublicRoute' src/client/routes/__root.tsx | grep -c '/setups"' && grep -c 'pb-16 md:pb-0' src/client/routes/__root.tsx</automated>
  </verify>
  <acceptance_criteria>
    - __root.tsx imports `TopNav` from `../components/TopNav` (not TotalsBar)
    - __root.tsx imports `BottomTabBar` from `../components/BottomTabBar`
    - __root.tsx does NOT contain `TotalsBar` anywhere
    - __root.tsx does NOT contain `isDashboard` or `totalsBarProps` variables
    - __root.tsx renders `<TopNav />` (no props)
    - __root.tsx renders `<BottomTabBar />`
    - FabMenu is wrapped in `<div className="hidden md:block">`
    - isPublicRoute includes `location.pathname === "/setups"`
    - Root div has `pb-16 md:pb-0` classes for mobile bottom padding
    - All existing modals/dialogs remain unchanged
  </acceptance_criteria>
  <done>Root layout uses TopNav instead of TotalsBar, BottomTabBar is rendered for mobile, FAB is hidden on mobile, /setups is a public route, and mobile bottom padding prevents content occlusion.</done>
</task>

<task type="auto">
  <name>Task 2: Remove hero section from landing page</name>
  <files>src/client/routes/index.tsx</files>
  <read_first>
    src/client/routes/index.tsx
  </read_first>
  <action>
Modify `src/client/routes/index.tsx` to remove the hero section (per D-09, D-10, D-11).

**Changes:**

1. **Delete the `HeroSection` function entirely** (lines ~35-72 in current file). This includes the heading "Discover Gear", subtitle, search bar div, and "Go to Collection" link.

2. **Remove unused imports:**
   - Remove `{ Search } from "lucide-react"` — only used by HeroSection
   - Remove `{ Link } from "@tanstack/react-router"` — only used by HeroSection's "Go to Collection" link (check if Link is used elsewhere in the file first; it is not)
   - Remove `useAuth` import — only used to pass `isAuthenticated` to HeroSection
   - Remove `useUIStore` import — only used to get `openCatalogSearch` for HeroSection

3. **Update LandingPage function** to remove HeroSection render and unused variables:
```typescript
function LandingPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <PopularSetupsSection />
      <RecentItemsSection />
      <TrendingCategoriesSection />
    </div>
  );
}
```

4. **Keep unchanged:** `PopularSetupsSection`, `RecentItemsSection`, `TrendingCategoriesSection`, `SectionSkeleton`, all discovery hooks imports, `GlobalItemCard` import, `PublicSetupCard` import, and the `createFileRoute` route definition.
  </action>
  <verify>
    <automated>cd /home/jean-luc-makiola/Development/projects/GearBox && ! grep -q "HeroSection" src/client/routes/index.tsx && echo "no-hero" && ! grep -q "Discover Gear" src/client/routes/index.tsx && echo "no-heading" && ! grep -q "lucide-react" src/client/routes/index.tsx && echo "no-lucide-direct" && grep -c "PopularSetupsSection" src/client/routes/index.tsx && ! grep -q "useAuth" src/client/routes/index.tsx && echo "no-useAuth" && ! grep -q "useUIStore" src/client/routes/index.tsx && echo "no-useUIStore"</automated>
  </verify>
  <acceptance_criteria>
    - src/client/routes/index.tsx does NOT contain `HeroSection` (function definition or usage)
    - src/client/routes/index.tsx does NOT contain `Discover Gear` heading text
    - src/client/routes/index.tsx does NOT contain `Go to Collection` link text
    - src/client/routes/index.tsx does NOT import from `lucide-react`
    - src/client/routes/index.tsx does NOT import `useAuth`
    - src/client/routes/index.tsx does NOT import `useUIStore`
    - LandingPage function renders PopularSetupsSection as first child
    - PopularSetupsSection, RecentItemsSection, TrendingCategoriesSection all remain
    - SectionSkeleton helper function remains
  </acceptance_criteria>
  <done>Landing page starts directly with Popular Setups section. No hero section, no heading, no search bar, no "Go to Collection" link. No unused imports (useAuth, useUIStore, lucide-react). Search is now exclusively in the TopNav bar.</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <name>Task 3: Verify full navigation flow</name>
  <what-built>Complete navigation restructure: TopNav on desktop, BottomTabBar on mobile, Setups as top-level route, Collection with 2 tabs, landing page without hero.</what-built>
  <how-to-verify>
    1. Run `bun run dev` and open http://localhost:5173 in your browser
    2. **Desktop (wide viewport):**
       - Verify top nav shows: logo (GearBox with package icon), Home/Collection/Setups links, search bar, and user avatar or "Sign in"
       - Click the search bar — CatalogSearchOverlay should open
       - If signed out: click Collection — AuthPromptModal should appear (not navigation)
       - If signed in: click Collection — navigates to /collection, Collection link is highlighted
       - Navigate to /setups — SetupsView renders, Setups link is highlighted
       - Navigate to /collection — only Gear and Planning tabs (no Setups tab)
       - Visit the landing page (/) — no hero section, starts with Popular Setups
    3. **Mobile (resize browser to ~375px width or use DevTools mobile):**
       - Top bar shows only logo and user avatar/sign-in (no nav links, no search bar)
       - Bottom tab bar shows 4 items: Home, Collection, Setups, Search
       - Tap Search — CatalogSearchOverlay opens
       - FAB is NOT visible (hidden on mobile)
       - Content is not cut off at the bottom (padding accounts for tab bar)
    4. Verify no console errors
  </how-to-verify>
  <resume-signal>Type "approved" or describe any issues</resume-signal>
</task>

</tasks>

<verification>
- `bun run dev` starts without errors
- TopNav replaces TotalsBar across all pages
- BottomTabBar appears only on mobile viewports
- FAB hidden on mobile, visible on desktop
- Landing page has no hero — starts with content sections
- /setups renders SetupsView
- /collection has 2 tabs (Gear, Planning)
- Anonymous nav clicks trigger AuthPromptModal
- CatalogSearchOverlay opens from nav search bar and bottom tab bar Search
</verification>

<success_criteria>
- Complete navigation flow works on both desktop and mobile viewports
- All 17 locked decisions (D-01 through D-17) are satisfied
- No visual regressions on existing pages
- No console errors
</success_criteria>

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