# Phase 27: Top Nav Restructure & Search Bar Rethink - Context

**Gathered:** 2026-04-10
**Status:** Ready for planning

<domain>
## Phase Boundary

Replace the current minimal `TotalsBar` (logo + user menu) with a persistent top navigation bar containing section links (Home, Collection, Setups), a global catalog search bar, and user avatar/sign-in. On mobile, navigation moves to a bottom tab bar with Lucide icons. The landing page hero section is removed (search now lives in the nav). The existing `CatalogSearchOverlay` behavior stays unchanged — it's just triggered from the nav search bar instead of the hero.

</domain>

<decisions>
## Implementation Decisions

### Top Nav Structure
- **D-01:** Persistent top nav bar replaces the current `TotalsBar`. Contains: logo ("GearBox" with package icon), section links (Home, Collection, Setups), a catalog search bar, and user avatar (authenticated) or "Sign in" link (anonymous).
- **D-02:** All nav links are visible to both authenticated and anonymous users. Clicking Collection or Setups while anonymous triggers the existing `AuthPromptModal` instead of navigating.
- **D-03:** Active section is visually indicated in the nav (current page highlighting).

### Section Reorganization
- **D-04:** Setups is elevated to a top-level nav section with its own route. It is no longer a tab inside Collection.
- **D-05:** Collection page keeps pill tab navigation but drops to two tabs: Gear and Planning. The Setups tab is removed from Collection.
- **D-06:** Threads (Planning) remain nested inside Collection — not elevated to top-level.

### Search Bar
- **D-07:** The nav bar includes a persistent search input/button that always triggers global catalog search via the existing `CatalogSearchOverlay`, regardless of which page the user is on.
- **D-08:** Collection and Setups pages retain their existing inline search/filter inputs for local filtering. The nav search bar is always catalog-global.
- **D-09:** The landing page hero section (heading, subtitle, search bar, "Go to Collection" link) is removed entirely. The nav search bar replaces it as the catalog search entry point.

### Landing Page Changes
- **D-10:** With the hero removed, the landing page starts directly with content sections: Popular Setups, Recently Added Items, Trending Categories. No introductory text or hero area.
- **D-11:** The "Go to Collection" link from the hero is no longer needed — Collection is now a persistent nav link.

### Mobile Behavior
- **D-12:** On mobile (narrow screens), the top bar shows only the logo and user avatar/sign-in.
- **D-13:** Navigation moves to a fixed bottom tab bar with 4 items: Home, Collection, Setups, Search. Each uses a Lucide icon with a short label below.
- **D-14:** Tapping the Search tab icon opens the `CatalogSearchOverlay`.
- **D-15:** The bottom tab bar replaces the FAB on mobile — the FAB is hidden when the bottom tab bar is visible (search and add-to-collection flows are now accessible via the tab bar and overlay).

### Catalog Search Overlay
- **D-16:** No changes to the `CatalogSearchOverlay` UI or behavior. Same full-page takeover below the nav bar. Same tag filtering, grid/list toggle, weight/price range filters, manual entry fallback.
- **D-17:** The overlay is now triggered from the nav search bar (desktop) or bottom tab bar search icon (mobile) instead of from the landing page hero or FAB menu.

### Claude's Discretion
- Exact responsive breakpoint for switching between top nav and bottom tab bar
- Nav link styling (text links, pill buttons, underline indicators)
- Search bar appearance in nav (full input field vs compact icon that expands)
- Bottom tab bar icon choices (specific Lucide icons for each section)
- Animation for bottom tab bar / overlay transitions
- Whether the "GearBox" logo text is hidden on mobile top bar to save space
- FAB behavior on desktop (keep as-is or consolidate into nav)

</decisions>

<canonical_refs>
## Canonical References

**Downstream agents MUST read these before planning or implementing.**

### Current Nav & Layout
- `src/client/components/TotalsBar.tsx` — Current top bar component (to be replaced with new nav bar)
- `src/client/routes/__root.tsx` — Root layout, FAB placement, overlay mounting, auth checks, `isPublicRoute` logic
- `src/client/components/FabMenu.tsx` — FAB component (mobile behavior changes — hidden when bottom tab bar visible)
- `src/client/components/UserMenu.tsx` — User avatar/menu dropdown (moves into new nav bar)

### Search Overlay
- `src/client/components/CatalogSearchOverlay.tsx` — Full catalog search overlay (no UI changes, trigger point changes)
- `src/client/stores/uiStore.ts` — `catalogSearchOpen`, `openCatalogSearch()`, `closeCatalogSearch()` state

### Collection Page
- `src/client/routes/collection/index.tsx` — Collection page with Gear/Planning/Setups pill tabs (Setups tab to be removed)
- `src/client/components/SetupsView.tsx` — Setups view component (moves to standalone Setups route)
- `src/client/components/CollectionView.tsx` — Gear view
- `src/client/components/PlanningView.tsx` — Planning/threads view

### Landing Page
- `src/client/routes/index.tsx` — Landing page with hero section (hero to be removed)

### Auth
- `src/client/components/AuthPromptModal.tsx` — Auth prompt modal (triggered when anon users click Collection/Setups)
- `src/client/hooks/useAuth.ts` — Auth state (`user`, `authenticated`)

### Requirements
- `.planning/REQUIREMENTS.md` — DISC-01 through DISC-05 (discovery requirements — landing page changes)

</canonical_refs>

<code_context>
## Existing Code Insights

### Reusable Assets
- `TotalsBar` — 54-line component with sticky positioning, logo, and user menu. Will be replaced but provides the structural pattern (sticky top-0 z-10, max-w-7xl container).
- `UserMenu` — Avatar dropdown with settings/logout. Reuse directly in new nav bar.
- `AuthPromptModal` — Already exists for prompting anonymous users to sign in. Wire to Collection/Setups nav clicks.
- `FabMenu` — FAB with mini menu. Needs conditional hiding on mobile when bottom tab bar is present.
- `CatalogSearchOverlay` — 849-line overlay component. No changes needed — just new trigger points.
- Lucide icons via `LucideIcon` component from `lib/iconData` — use for bottom tab bar icons.

### Established Patterns
- Sticky top bar: `sticky top-0 z-10 bg-white border-b border-gray-100`
- TanStack Router file-based routes — new `/setups` route needed (currently setups are at `/setups` but rendered inside Collection tab)
- UIStore for overlay state management — extend for bottom tab bar visibility if needed
- Framer Motion for animations — use for bottom tab bar transitions
- Tailwind responsive: `sm:`, `md:`, `lg:` breakpoints for mobile/desktop switching

### Integration Points
- `__root.tsx` — New nav component replaces TotalsBar. Bottom tab bar added for mobile. FAB conditional logic updated.
- `routes/collection/index.tsx` — Remove Setups tab from pill navigation, update `TAB_ORDER` and `TAB_LABELS`.
- `routes/index.tsx` — Remove `HeroSection` component entirely. Page starts with `PopularSetupsSection`.
- `routes/setups/` — May need route restructure if Setups becomes fully standalone (currently `/setups` exists as a route directory).

</code_context>

<specifics>
## Specific Ideas

- Bottom tab bar icons must use Lucide icons (not emojis) — consistent with the app's existing icon system
- The nav should feel like a natural evolution of the current minimal bar, not a heavy SaaS-style mega-nav — keep the light, airy, minimalist DNA
- Bottom tab bar is a mobile-first pattern (like iOS tab bar) — fixed at bottom, always visible, no scroll-away behavior

</specifics>

<deferred>
## Deferred Ideas

- **Blended local+global search** — When searching from Collection, show local gear first then global catalog results. Needs careful UX design for two result sets. Future phase.
- **Setup page redesign** — Revisit the Setups page layout to be more inline with Collection and other pages. Backlog item.

### Reviewed Todos (not folded)
- **Add manufacturer entity with brand details** — Database schema enhancement, unrelated to navigation restructure
- **Fix item image not showing on collection overview** — Image display bug, not navigation-scoped
- **Add cursor pointer to all clickable links** — CSS concern, could be addressed alongside but not core to this phase
- **Investigate slow image loading** — Performance investigation, not navigation-scoped
- **Fix storage service tests** — Testing infrastructure, not related

</deferred>

---

*Phase: 27-top-nav-restructure-and-search-bar-rethink*
*Context gathered: 2026-04-10*