uhryniuk
5ab4934a4d
Replaces the push/pop stack rooted at Record with a StatefulShellRoute (Map/Rides/Plan/Settings), each tab keeping its own navigator so Trip Detail and the route planner push within their own branch. AppShell/ShellScaffold host one shared RideMap instance behind every tab -- full opacity and interactive on Map, dimmed and non-interactive elsewhere -- so the camera position and live path survive a tab switch instead of being refetched. Every tab's AppBar/header is removed per the redesign's no-chrome mandate. Fixes a bug this surfaced: RideMap rendered a structurally different tree for empty vs. non-empty points, which crashed once the map became a long-lived shell background instead of a fresh per-screen widget. Unified the background-map tree shape so it no longer remounts mid-recording. Verified on Medium_Phone_API_35: all four tabs, live recording surviving tab switches with the camera preserved, and the real HOME-key lifecycle tile-drop from V3-04 still firing correctly in the shell context. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012Xki7YAcc2TiN2PRZJ2tXr
113 lines
6.5 KiB
Markdown
113 lines
6.5 KiB
Markdown
# UI redesign tickets
|
|
|
|
Same shape as `docs/v3/`: one file per feature, Goal · Context · Design · Implementation ·
|
|
Acceptance criteria · Tests · Risks · Out of scope. Written before implementing.
|
|
|
|
Source material: `docs/design/stitch-export/` — four Stitch-generated screens (Map HUD,
|
|
Plan, Route Planning, Rides History) plus the "Modern Professional Dark" design system
|
|
actually used by all four. See that directory's `README.md` for how they were fetched and
|
|
a correction of an earlier mislabeling.
|
|
|
|
This is a **navigation-model change**, not a reskin: today's app is a stack rooted at
|
|
Record, with Trips/Settings/Routes as pushed children. The new design is a persistent
|
|
4-tab shell (Map / Rides / Plan / Settings) with the map visible, at some opacity, behind
|
|
every tab — not just the Map tab. Sequenced so the riskiest, highest-blast-radius piece
|
|
(the shell) lands first and `flutter test` stays green throughout, the same discipline
|
|
v3 held to.
|
|
|
|
## The tickets
|
|
|
|
| # | Ticket | Size | Depends on | Status |
|
|
|---|---|---|---|---|
|
|
| [UI-01](UI-01-tab-shell-background-map.md) | Persistent tab shell with an always-visible background map | L | — | Done |
|
|
| [UI-02](UI-02-offline-skeleton-map.md) | Offline / no-connection skeleton map | S | UI-01 | Not started |
|
|
| [UI-03](UI-03-glass-component-kit.md) | Shared floating-glass component kit | M | UI-08 | Not started |
|
|
| [UI-04](UI-04-customizable-hud-widgets.md) | Customizable HUD telemetry widgets (drag, resize, visibility toggle) | L | UI-03 | Not started |
|
|
| [UI-05](UI-05-map-hud-record-screen.md) | Map HUD: Record screen redesign | M | UI-01, UI-03, UI-04 | Not started |
|
|
| [UI-06](UI-06-plan-and-route-planning.md) | Plan & Route Planning redesign | M | UI-01, UI-03 | Not started |
|
|
| [UI-07](UI-07-rides-history.md) | Rides History redesign | M | UI-01, UI-03 | Not started |
|
|
| [UI-08](UI-08-theme-modern-professional-dark.md) | Theme migration to Modern Professional Dark | S | — | Not started |
|
|
| [UI-09](UI-09-monochrome-dark-map-tiles.md) | Monochrome dark map tiles | S | — | Not started |
|
|
|
|
## Dependencies
|
|
|
|
```
|
|
UI-01 ──┬──► UI-02
|
|
├──► UI-05
|
|
├──► UI-06
|
|
└──► UI-07
|
|
UI-08 ──► UI-03 ──┬──► UI-04 ──► UI-05
|
|
├──► UI-06
|
|
└──► UI-07
|
|
UI-09 ──┬──► UI-05
|
|
├──► UI-06
|
|
└──► UI-07
|
|
|
|
no dependencies: UI-01 · UI-08 · UI-09
|
|
```
|
|
|
|
## Suggested order
|
|
|
|
1. **UI-01** — the shell. Highest blast radius (touches every screen's entry point), so
|
|
get it merged and green before any visual work starts.
|
|
2. **UI-08** — theme. Every screen ticket after this needs the palette settled once, not
|
|
patched per-screen. Supersedes V3-16's safety-orange direction — see that ticket's
|
|
note.
|
|
3. **UI-09** — dark map tiles. Small, no dependencies, and every screen with a map looks
|
|
wrong without it regardless of how correct the HUD chrome on top is.
|
|
4. **UI-02** — skeleton map. Small, and exercises the background-map plumbing UI-01 just
|
|
built while it's fresh.
|
|
5. **UI-03** — the component kit (`GlassPanel`, `FloatingPill`, `PulsingLocationMarker`).
|
|
Build once, consumed by every screen ticket.
|
|
6. **UI-04** — the customizable HUD widget system (drag/resize/persist layout, a
|
|
visibility toggle in Settings). This is its own ticket, not folded into UI-05, because
|
|
drag-and-resize-with-persisted-layout is a genuinely separate piece of engineering
|
|
from "redesign the record screen" — a small widget-layout editor in miniature.
|
|
7. **UI-05 / UI-06 / UI-07** — the three screen redesigns, in any order once everything
|
|
above is done. Each is independently shippable.
|
|
|
|
## Things named explicitly by the person who commissioned this, not inferred from the mockups
|
|
|
|
- **The map is active on every tab**, including Rides History — blurred/dimmed behind
|
|
the content cards so it doesn't compete for attention, not hidden. This wasn't visible
|
|
in the Stitch export (Rides History's HTML uses a static blurred background image, not
|
|
a live map) — it's a deliberate product decision layered on top of the mockups.
|
|
- **No header, anywhere, ever** — the stated reason is screen real estate: the point of
|
|
the redesign is to show as much map as possible, and a persistent bottom nav plus zero
|
|
header chrome is what buys that space back.
|
|
- **A no-connection skeleton map** (UI-02), rather than a blank or broken map, since the
|
|
map is now a permanent background presence on every tab rather than something opened
|
|
deliberately.
|
|
- **The telemetry HUD widgets are user-customizable** (UI-04): draggable and resizable by
|
|
the rider, and which metrics show up live at all is a Settings toggle. The Stitch
|
|
mockup's tap-to-expand interaction is a fixed layout with one temporary focus state;
|
|
this goes further — the rider chooses the layout and which stats exist on screen at
|
|
all, and it persists.
|
|
- **The map itself is monochrome dark** (UI-09) — today's default OSM tan/cream tiles are
|
|
nothing like the mockups regardless of how correct the HUD chrome on top is. A real
|
|
tile-provider decision, not a color filter thrown on as an afterthought — see that
|
|
ticket for the trade-off against just filtering OSM's existing tiles.
|
|
|
|
## The Map screen is the design north star
|
|
|
|
The four Stitch exports don't agree with each other on styling — expected, since each
|
|
was a separate prompt and the AI generation drifted between them. **Map HUD is the
|
|
canonical reference** for color usage, icon choice/fill-state, spacing, and component
|
|
pattern across the whole redesign. Where another screen's mockup disagrees with Map
|
|
HUD on any of those, Map HUD wins.
|
|
|
|
Plan and Route Planning are correct **in principle** — fullscreen map, floating pill
|
|
summaries, pin-drop interaction, no header — but their specific styling (icon fill
|
|
states, exact nav bar treatment, some color choices) drifted from Map HUD across
|
|
prompts and should be restyled to match it, not copied as-is. UI-06 says this again at
|
|
the point where it matters.
|
|
|
|
## What the mockups got generated inconsistently — don't copy as intentional
|
|
|
|
- Bottom nav shows 4 icons on Map HUD and Rides History, only 3 (no Settings) on the Plan
|
|
screen. Build one nav bar with 4 destinations, always.
|
|
- Rides History's summary row is 4 copies of the same "Total Dist" card. Real, distinct
|
|
summary stats are UI-06's job to define.
|
|
- Route Planning's bottom nav highlights "Rides" as active while the screen shown is
|
|
Plan — a generation slip, not a deliberate cross-tab indicator.
|