From 83b760a6d6eb93dba2abbb2b3965f89e419d0f51 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 10 Apr 2026 23:45:56 +0200
Subject: [PATCH] docs(27-01): complete TopNav and BottomTabBar plan

- SUMMARY.md: two components created, house icon deviation documented
- STATE.md: advanced to plan 4/4, progress 91%, decision recorded
- ROADMAP.md: phase 27 updated (3/4 summaries)
---
 .planning/ROADMAP.md                          |  2 +-
 .planning/STATE.md                            | 13 +--
 .../27-01-SUMMARY.md                          | 94 +++++++++++++++++++
 3 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 .planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md

diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md
index d036dce..fc720c4 100644
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -140,7 +140,7 @@ Plans:
 
 Plans:
 - [x] 27-00-PLAN.md — Wave 0: E2E test scaffolding for nav restructure
-- [ ] 27-01-PLAN.md — TopNav and BottomTabBar components
+- [x] 27-01-PLAN.md — TopNav and BottomTabBar components
 - [x] 27-02-PLAN.md — Setups top-level route and Collection tab simplification
 - [ ] 27-03-PLAN.md — Root layout wiring, hero removal, and visual verification
 **UI hint**: yes
diff --git a/.planning/STATE.md b/.planning/STATE.md
index 70c4cbe..4fe143b 100644
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v2.1
 milestone_name: Public Discovery
 status: executing
-stopped_at: Completed 27-00-PLAN.md
-last_updated: "2026-04-10T21:44:51.557Z"
+stopped_at: Completed 27-01-PLAN.md
+last_updated: "2026-04-10T21:45:45.829Z"
 last_activity: 2026-04-10
 progress:
   total_phases: 14
   completed_phases: 3
   total_plans: 11
-  completed_plans: 9
+  completed_plans: 10
   percent: 0
 ---
 
@@ -26,7 +26,7 @@ See: .planning/PROJECT.md (updated 2026-04-09)
 ## Current Position
 
 Phase: 27 (top-nav-restructure-and-search-bar-rethink) — EXECUTING
-Plan: 3 of 4
+Plan: 4 of 4
 Status: Ready to execute
 Last activity: 2026-04-10
 
@@ -76,6 +76,7 @@ v2.1 decisions:
 - [Phase 27]: Setups elevated to top-level /setups route; Collection page reduced to Gear and Planning tabs with .catch(gear) fallback for legacy URLs
 - [Phase 27]: Wave 0 tests use test.fixme for removed dashboard cards — preserves test intent for future reference
 - [Phase 27]: Old setups tab test replaced with fallback-to-gear assertion matching the Zod .catch('gear') behavior planned in Plans 01-03
+- [Phase 27]: Used 'house' icon instead of plan-specified 'home': lucide-react has no Home icon, only House — prevents Package fallback rendering in navigation
 
 ### Pending Todos
 
@@ -87,6 +88,6 @@ None.
 
 ## Session Continuity
 
-Last session: 2026-04-10T21:44:51.555Z
-Stopped at: Completed 27-00-PLAN.md
+Last session: 2026-04-10T21:45:45.826Z
+Stopped at: Completed 27-01-PLAN.md
 Resume file: None
diff --git a/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md
new file mode 100644
index 0000000..a2d3482
--- /dev/null
+++ b/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md
@@ -0,0 +1,94 @@
+---
+phase: 27-top-nav-restructure-and-search-bar-rethink
+plan: 01
+subsystem: navigation
+tags: [nav, mobile, desktop, search, auth-gated]
+dependency_graph:
+  requires: []
+  provides: [TopNav, BottomTabBar]
+  affects: [src/client/routes/__root.tsx]
+tech_stack:
+  added: []
+  patterns: [useMatchRoute for active route detection, NavLinkOrButton auth-gated pattern, framer-motion entry animation, env(safe-area-inset-bottom) for iOS]
+key_files:
+  created:
+    - src/client/components/TopNav.tsx
+    - src/client/components/BottomTabBar.tsx
+  modified: []
+key_decisions:
+  - Used 'house' icon instead of plan-specified 'home' — lucide-react has no Home icon, only House; prevents Package fallback rendering
+  - NavLinkOrButton renders <button> for anon users on protected routes to avoid TanStack Router navigation race with e.preventDefault
+  - Search bar on TopNav uses <button type="button"> styled as input field — avoids form submission semantics
+metrics:
+  duration_minutes: 8
+  tasks_completed: 2
+  tasks_total: 2
+  files_created: 2
+  files_modified: 0
+  completed_date: "2026-04-10"
+requirements_satisfied:
+  - NAV-01
+  - NAV-02
+  - NAV-03
+---
+
+# Phase 27 Plan 01: TopNav and BottomTabBar Components Summary
+
+TopNav (desktop persistent nav bar) and BottomTabBar (mobile fixed bottom tab bar) created with auth-gated routing, active route highlighting, and catalog search integration.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | Create TopNav component | dccb1f8 | src/client/components/TopNav.tsx |
+| 2 | Create BottomTabBar component | 24ed719 | src/client/components/BottomTabBar.tsx |
+
+## What Was Built
+
+### TopNav (`src/client/components/TopNav.tsx`)
+
+Persistent sticky top navigation bar replacing TotalsBar. Renders logo (package icon + "GearBox" text), nav links (Home, Collection, Setups), desktop search bar, and user section.
+
+Key patterns:
+- `NavLinkOrButton` internal component: renders `<Link>` for authenticated users or `<button onClick={openAuthPrompt}>` for anonymous users on protected routes (Collection, Setups). Home is always a `<Link>`.
+- Active route detection via `useMatchRoute` from TanStack Router with `fuzzy: true` for nested routes.
+- Desktop nav links and search bar hidden on mobile via `hidden md:flex`.
+- Search bar click calls `openCatalogSearch("collection")` from UIStore.
+- User section shows `<UserMenu />` if authenticated, `<Link to="/login">Sign in</Link>` if anonymous.
+
+### BottomTabBar (`src/client/components/BottomTabBar.tsx`)
+
+Mobile-only fixed bottom tab bar with 4 tabs: Home, Collection, Setups, Search.
+
+Key patterns:
+- Fixed position at bottom with `md:hidden` so it only shows on mobile.
+- `z-20` ensures it renders above most content but below modals.
+- Collection/Setups: `<Link>` if authenticated, `<button onClick={openAuthPrompt}>` if anonymous.
+- Search tab always a button calling `openCatalogSearch("collection")`.
+- Framer Motion entry animation: `y: 20 -> 0` + `opacity: 0 -> 1` over 200ms.
+- iOS safe area: `pb-[env(safe-area-inset-bottom)]` for home indicator clearance.
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Used 'house' icon instead of plan-specified 'home'**
+- **Found during:** Task 1 & 2
+- **Issue:** The plan specified `LucideIcon name="home"` for both TopNav (nav) and BottomTabBar Home tab. The `lucide-react` package does not export a `Home` icon — only `House`. The `LucideIcon` wrapper falls back to `Package` icon when the requested name is not found, which would render the package icon instead of the intended home/house icon.
+- **Fix:** Used `house` for the BottomTabBar Home tab. TopNav does not use a home icon in the final nav links (text-only links as intended by the design).
+- **Files modified:** `src/client/components/BottomTabBar.tsx`
+- **Commit:** 24ed719
+
+## Known Stubs
+
+None. Both components are complete and wire correctly to UIStore actions. No placeholder data or hardcoded empty values.
+
+## Self-Check: PASSED
+
+Files exist:
+- src/client/components/TopNav.tsx: FOUND
+- src/client/components/BottomTabBar.tsx: FOUND
+
+Commits exist:
+- dccb1f8: feat(27-01): create TopNav component — FOUND
+- 24ed719: feat(27-01): create BottomTabBar component — FOUND