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)
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user