makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity
Files
a576f53d33d54e3f8971e35ac216b6199bcefa02
GearBox/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md

8.5 KiB
Raw Blame History

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

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

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

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

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

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

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

Reference in New Issue View Git Blame Copy Permalink