GearBox/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md

phase, plan, subsystem, tags, dependency_graph, tech_stack, key_files, key_decisions, metrics, requirements_satisfied

phase	plan	subsystem	tags	dependency_graph	tech_stack	key_files	key_decisions	metrics	requirements_satisfied
27-top-nav-restructure-and-search-bar-rethink	01	navigation	nav mobile desktop search auth-gated	requires provides affects TopNav BottomTabBar src/client/routes/__root.tsx	added patterns useMatchRoute for active route detection NavLinkOrButton auth-gated pattern framer-motion entry animation env(safe-area-inset-bottom) for iOS	created modified src/client/components/TopNav.tsx src/client/components/BottomTabBar.tsx	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	duration_minutes tasks_completed tasks_total files_created files_modified completed_date 8 2 2 2 0 2026-04-10	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