# UI-06 — Plan & Route Planning redesign **Depends on** UI-01, UI-03 · **Size** M · **Status** Not started ## Goal Rebuild the Plan tab (empty state) and the route planner (pins dropped) as fullscreen map canvases with floating controls — correct in principle per the Stitch mockups, but **restyled to match Map HUD (UI-05), not copied as-is** — see `README.md`'s note on why these two mockups drifted from the design north star. ## Context Today's `RoutePlannerScreen` is a `Scaffold` with an `AppBar` (title, rename/delete/ download actions) and the map beneath it. The mockups drop the header entirely (per UI-01) and float everything — a pin-drop tooltip, a stat summary pill, a Start Route button — over a fullscreen map, with a bottom nav bar instead of an app bar's back button (the planner becomes a screen reached *within* the Plan tab, not a separately titled pushed screen). **What to take from the mockups as-is:** the fullscreen-map-plus-floating-controls pattern, the pin-drop ripple micro-interaction, `PulsingLocationMarker` for the rider's own position, the marching-ants animated route line, the floating stat pill (Distance/Est. Time/Pins) replacing today's pre-download confirmation dialog as a persistent readout instead of a one-time modal. **What to restyle rather than copy:** icon fill-states, the nav bar's exact background/ blur treatment, and any color choice that doesn't match UI-08's actual palette as established on the Map HUD screen. The Route Planning mockup specifically shows the "Rides" nav icon active while viewing Plan — a generation error, not a real cross-tab indicator; the shipped nav bar must correctly highlight whichever tab is actually active, matching Map HUD's nav bar exactly (same widget, in fact — see UI-01). ## Design - **Plan tab (no pins yet):** fullscreen map, technical grid overlay, floating "Tap to drop a pin" tooltip (gentle float animation), `PulsingLocationMarker`. - **Route Planning (pins dropped):** same canvas, plus the floating stat pill (`FloatingPill` from UI-03) showing Distance / Est. Time / Pin count, updating live as pins are added/ moved/removed (already true of the underlying `RoutePlanRepository` data — this ticket is presentation only). "Start Route" as a floating pill-shaped button above the nav bar, replacing today's app-bar-driven actions. - **Existing actions (rename, delete, download offline tiles)** need a new home now that there's no app bar to hang icon buttons off of — a small floating overflow/glass menu button is the natural fit, styled per Map HUD's `GlassPanel` language, not invented fresh. - **Drag-to-move / tap-to-delete pins:** unchanged interaction from today's `RoutePlannerScreen`; only the chrome around it changes. ## Implementation 1. Rebuild `RoutePlannerScreen`'s `Scaffold`/`AppBar` as a headerless canvas within the Plan tab's branch navigator (per UI-01), map at full opacity/interactivity here (unlike the dimmed treatment other tabs get for the *background* map — this screen's map *is* the primary content, same as Map HUD's). 2. Replace the pre-download confirmation dialog (V3-11) with the persistent `FloatingPill` stat summary; keep the actual download flow (count/size check, cancellable progress) as-is underneath — presentation change only. 3. Add the pin-drop ripple micro-interaction and marching-ants route line as new, currently-nonexistent polish. 4. Rebuild the Plan tab's empty state (no `RoutePlan` selected/created yet) as the fullscreen tooltip-and-map view, wired to whatever "create a new route" entry point replaces today's `RoutesListScreen` FAB (see UI-07 — Rides History's tab likely absorbs or sits alongside a route list; confirm final IA when that ticket lands, since "Rides" and "Plan" may end up sharing more list/history UI than the current `RoutesListScreen`/`TripsScreen` split assumes). 5. Move rename/delete/download actions to a floating glass menu, styled per Map HUD. ## Acceptance criteria - [ ] Both Plan states (empty, pins dropped) render as fullscreen map canvases with no header - [ ] The nav bar on this screen is the exact same widget/styling as Map HUD's, with the Plan tab correctly shown active (not the generation-error "Rides active" state from the mockup) - [ ] Existing pin add/move/delete, rename, delete-route, and offline-download behavior all still work, restyled only - [ ] Icon fill-states and colors match Map HUD, not the Stitch export's drifted values ## Tests - All existing `route_planner_screen_test.dart` / `route_plan_repository_test.dart` behavior tests still pass against the new presentation layer - Widget: nav bar active-tab indicator is correct on this screen - Widget: the floating stat pill updates live as pins are added/removed (already covered conceptually by existing repository tests; add a presentation-level assertion that the pill reflects it) ## Risks - The IA question flagged in Implementation step 4 (how "create a new route" is reached without a `RoutesListScreen`-style list-with-FAB) may turn out to need its own small design decision once UI-07 is underway — don't block this ticket on it if the existing entry point can be preserved with new styling in the meantime. ## Out of scope Road-snapped routing (V3-08/V3-09, deferred). Any change to the underlying route-planning data model or repository — this is presentation only.