docs(27): capture phase context
This commit is contained in:
@@ -0,0 +1,142 @@
|
|||||||
|
# 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*
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
# Phase 27: Top Nav Restructure & Search Bar Rethink - Discussion Log
|
||||||
|
|
||||||
|
> **Audit trail only.** Do not use as input to planning, research, or execution agents.
|
||||||
|
> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.
|
||||||
|
|
||||||
|
**Date:** 2026-04-10
|
||||||
|
**Phase:** 27-top-nav-restructure-and-search-bar-rethink
|
||||||
|
**Areas discussed:** Nav bar content & links, Collection consolidation, Search bar placement, Search overlay rethink
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Nav Bar Content & Links
|
||||||
|
|
||||||
|
### Setups Elevation
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Home + Collection only | Minimal — just landing page and collection. Settings via user menu. | |
|
||||||
|
| Home + Collection + Discover | Adds dedicated Discover link for browsing catalog/setups. | |
|
||||||
|
| Home + Collection + Setups | Elevates Setups to top-level nav alongside Collection. | ✓ |
|
||||||
|
|
||||||
|
**User's choice:** Home + Collection + Setups
|
||||||
|
**Notes:** User confirmed threads should not be elevated to top-level. Setups warrant their own section.
|
||||||
|
|
||||||
|
### Search Bar Behavior
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Always catalog search | Nav search bar always searches global catalog. Simple and consistent. | ✓ |
|
||||||
|
| Context-aware search | Different search per page (catalog on Home, local gear on Collection). | |
|
||||||
|
| Catalog search + local filter | Nav always catalog, plus inline filter on Collection/Setups pages. | |
|
||||||
|
|
||||||
|
**User's choice:** Always global catalog search
|
||||||
|
**Notes:** User initially considered blended local+global search (showing local gear first, then global results below) but decided to keep it simple for now. Blended search deferred to future phase.
|
||||||
|
|
||||||
|
### Anonymous Nav
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Hide Collection/Setups | Anonymous users only see Home + search + Sign in. | |
|
||||||
|
| Show with auth prompt | All links visible; Collection/Setups trigger auth prompt for anonymous. | ✓ |
|
||||||
|
|
||||||
|
**User's choice:** Show with auth prompt
|
||||||
|
**Notes:** Encourages sign-up by showing what's available.
|
||||||
|
|
||||||
|
### Mobile Behavior
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Hamburger menu | Logo + search icon + hamburger on mobile. | |
|
||||||
|
| Bottom tab bar | Nav links move to fixed bottom bar (Home, Collection, Setups, Search). | ✓ |
|
||||||
|
| Keep all inline | All links stay in top bar on mobile. | |
|
||||||
|
|
||||||
|
**User's choice:** Bottom tab bar
|
||||||
|
**Notes:** User specified: use Lucide icons, not emojis.
|
||||||
|
|
||||||
|
## Collection Consolidation
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Keep pill tabs | Gear and Planning stay as pill tabs, minus Setups tab. | ✓ |
|
||||||
|
| Remove tabs, merge | Show gear and threads in one scrollable page. | |
|
||||||
|
|
||||||
|
**User's choice:** Keep pill tabs (Gear + Planning only)
|
||||||
|
**Notes:** None.
|
||||||
|
|
||||||
|
## Search Overlay Rethink
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Same overlay as today | Full-page CatalogSearchOverlay, just triggered from nav bar. | ✓ |
|
||||||
|
| Dropdown results panel | Lighter dropdown below search bar, user stays in page context. | |
|
||||||
|
|
||||||
|
**User's choice:** Same full-page overlay
|
||||||
|
**Notes:** None.
|
||||||
|
|
||||||
|
## Landing Page Hero
|
||||||
|
|
||||||
|
| Option | Description | Selected |
|
||||||
|
|--------|-------------|----------|
|
||||||
|
| Remove hero search, keep text | Remove search bar from hero, keep heading/subtitle. | |
|
||||||
|
| Remove entire hero | No hero at all. Landing page starts with content sections. | ✓ |
|
||||||
|
|
||||||
|
**User's choice:** Remove entire hero
|
||||||
|
**Notes:** Nav search bar replaces the hero search. "Go to Collection" link no longer needed since Collection is in persistent nav.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Claude's Discretion
|
||||||
|
|
||||||
|
- Exact responsive breakpoint for mobile bottom tab bar
|
||||||
|
- Nav link styling approach
|
||||||
|
- Search bar appearance in nav (full input vs compact icon)
|
||||||
|
- Bottom tab bar Lucide icon choices
|
||||||
|
- Animation transitions
|
||||||
|
- FAB behavior on desktop
|
||||||
|
|
||||||
|
## Deferred Ideas
|
||||||
|
|
||||||
|
- Blended local+global search — user interested but wants careful UX design, deferred to future phase
|
||||||
|
- Setup page redesign — user wants this added to backlog to align Setups page with other pages
|
||||||
Reference in New Issue
Block a user