143 lines
8.5 KiB
Markdown
143 lines
8.5 KiB
Markdown
# 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*
|