---
phase: 27-top-nav-restructure-and-search-bar-rethink
plan: "03"
subsystem: ui
tags: [react, tanstack-router, tailwind, navigation, mobile]

requires:
  - phase: 27-01
    provides: TopNav and BottomTabBar components
  - phase: 27-02
    provides: /setups route page and Collection page tab reduction

provides:
  - Root layout wired with TopNav replacing TotalsBar
  - BottomTabBar rendered for mobile viewports
  - FAB hidden on mobile (hidden md:block wrapper)
  - /setups added to isPublicRoute for anonymous direct navigation
  - pb-16 md:pb-0 mobile bottom padding preventing content occlusion
  - Landing page without hero section — starts with Popular Setups

affects:
  - Any phase touching root layout, navigation, or landing page

tech-stack:
  added: []
  patterns:
    - "Mobile nav pattern: hidden md:block for desktop-only elements, md:hidden for mobile-only elements"
    - "Bottom safe area: pb-16 md:pb-0 on root div accounts for fixed bottom tab bar"

key-files:
  created: []
  modified:
    - src/client/routes/__root.tsx
    - src/client/routes/index.tsx

key-decisions:
  - "No architectural changes — integration plan only, wiring components from Plans 01 and 02"

patterns-established:
  - "pb-16 md:pb-0 on root container prevents fixed bottom tab bar from obscuring page content"

requirements-completed: [NAV-01, NAV-02, NAV-03, NAV-04]

duration: 3min
completed: "2026-04-10"
---

# Phase 27 Plan 03: Root Layout Integration Summary

**TopNav replaces TotalsBar across all pages, BottomTabBar wired for mobile, hero removed from landing page, and /setups added as a public route**

## Performance

- **Duration:** ~3 min
- **Started:** 2026-04-10T21:46:00Z
- **Completed:** 2026-04-10T21:47:55Z
- **Tasks:** 2 auto + 1 checkpoint (auto-approved)
- **Files modified:** 2

## Accomplishments

- Swapped TotalsBar for TopNav in root layout — persistent top nav now appears on every page
- BottomTabBar added to root layout — renders itself only on mobile via md:hidden in the component
- FAB wrapped in hidden md:block — invisible on mobile, unchanged on desktop
- /setups added to isPublicRoute — anonymous users can navigate directly to the setups index
- Root div gains pb-16 md:pb-0 — content not cut off by fixed bottom tab bar on mobile
- Hero section removed from landing page — starts directly with Popular Setups, search moved exclusively to TopNav

## Task Commits

Each task was committed atomically:

1. **Task 1: Wire TopNav, BottomTabBar, and FAB changes into __root.tsx** - `d99ebbd` (feat)
2. **Task 2: Remove hero section from landing page** - `c628d6b` (feat)
3. **Task 3: Verify full navigation flow** - auto-approved checkpoint (no commit)

## Files Created/Modified

- `src/client/routes/__root.tsx` - Replaces TotalsBar with TopNav, adds BottomTabBar, hides FAB on mobile, extends public routes, adds mobile bottom padding
- `src/client/routes/index.tsx` - Removes HeroSection function and all unused imports (Link, Search, useAuth, useUIStore); LandingPage now renders content sections only

## Decisions Made

None — integration plan executed exactly as specified. All components and patterns were established in Plans 01 and 02.

## Deviations from Plan

None — plan executed exactly as written.

## Issues Encountered

None. The automated verification grep used double-quotes to match `/setups"` but the source file uses single quotes. Manual inspection confirmed the `/setups` public route was correctly inserted.

## User Setup Required

None — no external service configuration required.

## Next Phase Readiness

- Complete navigation restructure for Phase 27 is done (all 3 plans)
- All 17 locked decisions (D-01 through D-17) satisfied
- TopNav with search, BottomTabBar for mobile, Setups as top-level route, Collection with 2 tabs, landing without hero — all wired
- Phase 27 is ready for verifier/transition

---
*Phase: 27-top-nav-restructure-and-search-bar-rethink*
*Completed: 2026-04-10*