From 510ef9fce3d275398dbf7a47fdde15875056a5d5 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Fri, 10 Apr 2026 23:20:21 +0200 Subject: [PATCH] docs(27): capture phase context --- .../27-CONTEXT.md | 142 ++++++++++++++++++ .../27-DISCUSSION-LOG.md | 101 +++++++++++++ 2 files changed, 243 insertions(+) create mode 100644 .planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md create mode 100644 .planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-DISCUSSION-LOG.md diff --git a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md new file mode 100644 index 0000000..def81b3 --- /dev/null +++ b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md @@ -0,0 +1,142 @@ +# 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 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) + + + + +## 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). + + + + +## 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* diff --git a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-DISCUSSION-LOG.md b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-DISCUSSION-LOG.md new file mode 100644 index 0000000..51cf7db --- /dev/null +++ b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-DISCUSSION-LOG.md @@ -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