UI redesign: 8 tickets from the Stitch export analysis
Same shape as docs/v3/: Goal/Context/Design/Implementation/Acceptance/Tests/Risks/Out-of-scope, written before implementing. UI-01: persistent 4-tab shell (StatefulShellRoute) replacing the current push/pop stack rooted at Record, with a single shared background map dimmed behind every tab and no header anywhere. UI-02: animated skeleton map for the no-cache/no-network case, since the map is now a permanent background presence rather than opt-in per screen. UI-03: shared GlassPanel/FloatingPill/PulsingLocationMarker component kit. UI-04: draggable, resizable HUD telemetry widgets with a Settings visibility toggle -- split out from the screen redesign itself since it's a genuinely separate piece of engineering (a small widget-layout system, not a reskin). UI-05: Map HUD/Record screen redesign -- the design north star every other screen ticket restyles toward. UI-06: Plan & Route Planning -- correct in principle, explicitly restyled toward UI-05 rather than copying the Stitch export's drifted styling. UI-07: Rides History -- live dimmed map background (not the mockup's static image), search/filter, real per-ride map thumbnails, and real distinct summary stats (fixing the export's 4-identical-cards generation artifact). UI-08: theme migration to Modern Professional Dark, superseding V3-16's safety-orange direction. README documents the dependency order, and two categories worth keeping separate: what was named explicitly by the person commissioning this (map-on-every-tab, no header, offline skeleton, customizable HUD) versus what the mockups themselves got inconsistent (nav icon count, duplicate summary cards, wrong active-tab highlight) and should not be copied as intentional.
This commit is contained in:
91
docs/ui-redesign/UI-06-plan-and-route-planning.md
Normal file
91
docs/ui-redesign/UI-06-plan-and-route-planning.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user