GearBox/.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
27-top-nav-restructure-and-search-bar-rethink	03	execute	2	27-01 27-02	src/client/routes/__root.tsx src/client/routes/index.tsx	false	NAV-01 NAV-02 NAV-03 NAV-04	truths artifacts key_links The app shows TopNav instead of TotalsBar on every page BottomTabBar is visible on mobile viewports FAB is hidden on mobile (only visible on md+ screens) The landing page has no hero section — starts with Popular Setups /setups is in isPublicRoute so direct navigation works for anonymous users Page content is not obscured by the bottom tab bar on mobile path provides contains src/client/routes/__root.tsx Root layout with TopNav, BottomTabBar, and updated FAB visibility TopNav path provides src/client/routes/index.tsx Landing page without hero section from to via pattern src/client/routes/__root.tsx src/client/components/TopNav.tsx import and render import.*TopNav from to via pattern src/client/routes/__root.tsx src/client/components/BottomTabBar.tsx import and render import.*BottomTabBar

Wire TopNav and BottomTabBar into the root layout, hide FAB on mobile, remove the landing page hero, and update public route checks.

Purpose: This is the integration plan that connects everything built in Plans 01 and 02. The TotalsBar is swapped for TopNav, BottomTabBar is added for mobile, the FAB gets hidden on mobile (per D-15), the landing page hero is removed (per D-09/D-10), and /setups is added to isPublicRoute so anonymous direct navigation works.

Output: Fully wired navigation system visible across the app.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-CONTEXT.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-RESEARCH.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-01-SUMMARY.md @.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-02-SUMMARY.md From src/client/components/TopNav.tsx: ```typescript export function TopNav(): JSX.Element; // Persistent top nav bar with logo, nav links, search, user menu // Handles auth interception internally ```

From src/client/components/BottomTabBar.tsx:

export function BottomTabBar(): JSX.Element;
// Mobile bottom tab bar, renders only on md:hidden
// Handles auth interception internally

From src/client/routes/__root.tsx:

// Current imports to change:
import { TotalsBar } from "../components/TotalsBar";  // REMOVE

// Current isPublicRoute check:
const isPublicRoute =
  location.pathname === "/" ||
  location.pathname.startsWith("/users/") ||
  location.pathname.startsWith("/global-items") ||
  location.pathname.startsWith("/setups/") ||
  location.pathname === "/login";

// Current FAB render:
{showFab && <FabMenu isSetupsPage={isSetupsPage} />}

// Current TotalsBar render:
<TotalsBar {...totalsBarProps} />

Task 1: Wire TopNav, BottomTabBar, and FAB changes into __root.tsx src/client/routes/__root.tsx src/client/routes/__root.tsx src/client/components/TopNav.tsx src/client/components/BottomTabBar.tsx src/client/components/FabMenu.tsx Modify `src/client/routes/__root.tsx` with these specific changes:

1. Update imports:

• Remove: import { TotalsBar } from "../components/TotalsBar";
• Add: import { TopNav } from "../components/TopNav";
• Add: import { BottomTabBar } from "../components/BottomTabBar";

2. Remove TotalsBar-related code in RootLayout:

• Delete the isDashboard variable: const isDashboard = !!matchRoute({ to: "/" });
• Delete the totalsBarProps variable: const totalsBarProps = isDashboard ? {} : { linkTo: "/" };

3. Replace TotalsBar render with TopNav: Change <TotalsBar {...totalsBarProps} /> to <TopNav />

4. Add /setups to isPublicRoute (pitfall 2 from research): The current check has location.pathname.startsWith("/setups/") which only covers /setups/123 detail pages. Add location.pathname === "/setups" so the index route is also public:

const isPublicRoute =
  location.pathname === "/" ||
  location.pathname.startsWith("/users/") ||
  location.pathname.startsWith("/global-items") ||
  location.pathname === "/setups" ||
  location.pathname.startsWith("/setups/") ||
  location.pathname === "/login";

5. Hide FAB on mobile (per D-15): Wrap the FabMenu in a div with hidden md:block:

{showFab && (
  <div className="hidden md:block">
    <FabMenu isSetupsPage={isSetupsPage} />
  </div>
)}

6. Add BottomTabBar: Add <BottomTabBar /> after the FabMenu block (before CatalogSearchOverlay). It renders itself only on mobile via md:hidden.

7. Add bottom padding for mobile tab bar (pitfall from research): On the root div <div className="min-h-screen bg-gray-50">, add mobile-only bottom padding so content isn't obscured by the fixed bottom tab bar:

<div className="min-h-screen bg-gray-50 pb-16 md:pb-0">

pb-16 (64px) accounts for the bottom tab bar height on mobile. md:pb-0 removes it on desktop.

Do NOT change: CandidateDeleteDialog, ResolveDialog, CatalogSearchOverlay, AddToCollectionModal, AddToThreadModal, Toaster, AuthPromptModal, OnboardingWizard, ConfirmDialog, ExternalLinkDialog, or any other existing modal/dialog code. cd /home/jean-luc-makiola/Development/projects/GearBox && grep -c "TopNav" src/client/routes/__root.tsx && grep -c "BottomTabBar" src/client/routes/__root.tsx && ! grep -q "TotalsBar" src/client/routes/__root.tsx && echo "no-totalsbar" && grep -c 'hidden md:block' src/client/routes/__root.tsx && grep 'isPublicRoute' src/client/routes/__root.tsx | grep -c '/setups"' && grep -c 'pb-16 md:pb-0' src/client/routes/__root.tsx <acceptance_criteria> - __root.tsx imports TopNav from ../components/TopNav (not TotalsBar) - __root.tsx imports BottomTabBar from ../components/BottomTabBar - __root.tsx does NOT contain TotalsBar anywhere - __root.tsx does NOT contain isDashboard or totalsBarProps variables - __root.tsx renders <TopNav /> (no props) - __root.tsx renders <BottomTabBar /> - FabMenu is wrapped in <div className="hidden md:block"> - isPublicRoute includes location.pathname === "/setups" - Root div has pb-16 md:pb-0 classes for mobile bottom padding - All existing modals/dialogs remain unchanged </acceptance_criteria> Root layout uses TopNav instead of TotalsBar, BottomTabBar is rendered for mobile, FAB is hidden on mobile, /setups is a public route, and mobile bottom padding prevents content occlusion.

Task 2: Remove hero section from landing page src/client/routes/index.tsx src/client/routes/index.tsx Modify `src/client/routes/index.tsx` to remove the hero section (per D-09, D-10, D-11).

Changes:

1. Delete the HeroSection function entirely (lines ~35-72 in current file). This includes the heading "Discover Gear", subtitle, search bar div, and "Go to Collection" link.

2. Remove unused imports:

   • Remove { Search } from "lucide-react" — only used by HeroSection
   • Remove { Link } from "@tanstack/react-router" — only used by HeroSection's "Go to Collection" link (check if Link is used elsewhere in the file first; it is not)
   • Remove useAuth import — only used to pass isAuthenticated to HeroSection
   • Remove useUIStore import — only used to get openCatalogSearch for HeroSection

3. Update LandingPage function to remove HeroSection render and unused variables:

function LandingPage() {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <PopularSetupsSection />
      <RecentItemsSection />
      <TrendingCategoriesSection />
    </div>
  );
}

4. Keep unchanged: PopularSetupsSection, RecentItemsSection, TrendingCategoriesSection, SectionSkeleton, all discovery hooks imports, GlobalItemCard import, PublicSetupCard import, and the createFileRoute route definition. cd /home/jean-luc-makiola/Development/projects/GearBox && ! grep -q "HeroSection" src/client/routes/index.tsx && echo "no-hero" && ! grep -q "Discover Gear" src/client/routes/index.tsx && echo "no-heading" && ! grep -q "lucide-react" src/client/routes/index.tsx && echo "no-lucide-direct" && grep -c "PopularSetupsSection" src/client/routes/index.tsx && ! grep -q "useAuth" src/client/routes/index.tsx && echo "no-useAuth" && ! grep -q "useUIStore" src/client/routes/index.tsx && echo "no-useUIStore" <acceptance_criteria>
   • src/client/routes/index.tsx does NOT contain HeroSection (function definition or usage)
   • src/client/routes/index.tsx does NOT contain Discover Gear heading text
   • src/client/routes/index.tsx does NOT contain Go to Collection link text
   • src/client/routes/index.tsx does NOT import from lucide-react
   • src/client/routes/index.tsx does NOT import useAuth
   • src/client/routes/index.tsx does NOT import useUIStore
   • LandingPage function renders PopularSetupsSection as first child
   • PopularSetupsSection, RecentItemsSection, TrendingCategoriesSection all remain
   • SectionSkeleton helper function remains </acceptance_criteria> Landing page starts directly with Popular Setups section. No hero section, no heading, no search bar, no "Go to Collection" link. No unused imports (useAuth, useUIStore, lucide-react). Search is now exclusively in the TopNav bar.

Task 3: Verify full navigation flow Complete navigation restructure: TopNav on desktop, BottomTabBar on mobile, Setups as top-level route, Collection with 2 tabs, landing page without hero. 1. Run `bun run dev` and open http://localhost:5173 in your browser 2. **Desktop (wide viewport):** - Verify top nav shows: logo (GearBox with package icon), Home/Collection/Setups links, search bar, and user avatar or "Sign in" - Click the search bar — CatalogSearchOverlay should open - If signed out: click Collection — AuthPromptModal should appear (not navigation) - If signed in: click Collection — navigates to /collection, Collection link is highlighted - Navigate to /setups — SetupsView renders, Setups link is highlighted - Navigate to /collection — only Gear and Planning tabs (no Setups tab) - Visit the landing page (/) — no hero section, starts with Popular Setups 3. **Mobile (resize browser to ~375px width or use DevTools mobile):** - Top bar shows only logo and user avatar/sign-in (no nav links, no search bar) - Bottom tab bar shows 4 items: Home, Collection, Setups, Search - Tap Search — CatalogSearchOverlay opens - FAB is NOT visible (hidden on mobile) - Content is not cut off at the bottom (padding accounts for tab bar) 4. Verify no console errors Type "approved" or describe any issues - `bun run dev` starts without errors - TopNav replaces TotalsBar across all pages - BottomTabBar appears only on mobile viewports - FAB hidden on mobile, visible on desktop - Landing page has no hero — starts with content sections - /setups renders SetupsView - /collection has 2 tabs (Gear, Planning) - Anonymous nav clicks trigger AuthPromptModal - CatalogSearchOverlay opens from nav search bar and bottom tab bar Search

<success_criteria>

• Complete navigation flow works on both desktop and mobile viewports
• All 17 locked decisions (D-01 through D-17) are satisfied
• No visual regressions on existing pages
• No console errors </success_criteria>

After completion, create `.planning/phases/27-top-nav-restructure-and-search-bar-rethink/27-03-SUMMARY.md`