dilly/rippr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5ab4934a4d4f7df1894c2ecf7e16705733bfcca6
rippr/docs/ui-redesign/UI-05-map-hud-record-screen.md
uhryniuk 822003ed38 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.
2026-08-23 18:25:35 -05:00

4.8 KiB
Raw Blame History

UI-05 — Map HUD: Record screen redesign

Depends on UI-01, UI-03, UI-04 · Size M · Status Not started

Goal

Rebuild the Record screen as the fullscreen Map HUD from the Stitch export — this screen is the design north star for the whole redesign (see README.md): every other screen ticket restyles toward what this one establishes, not the other way around.

Context

Today's Record screen is a scrolling Column: a 220px map card, a stats Card below it, full-width Pause/Stop/Resume/Discard buttons, and a "RIPPR" wordmark header with Rides/ Settings/Routes buttons. The redesign inverts this entirely — the map is the full-bleed canvas (via UI-01's shared background, at full opacity/interactivity on this tab only), and everything else floats on top of it via GlassPanel/HUD widgets.

Design

  • Header: none, per UI-01.
  • Telemetry: DraggableResizableHudWidgets from UI-04, not a fixed row — this screen is where those widgets actually live during a ride. Default layout mirrors the Stitch mockup's horizontal row (Speed/Avg Speed/Dist/Time) until the rider customizes it.
  • Pause/Stop: two icon-only, half-width, full-bleed buttons directly above the bottom nav bar, matching the mockup exactly — tertiary-container (pause) and error-container (stop) per UI-08's palette. Resume/Discard: the mockup doesn't show these explicitly on this screen; keep them reachable (e.g. Discard behind a confirmation from the paused state, matching today's existing safeguard against a gloved mis-tap next to Pause) rather than dropping the affordance V3-05/the original port already earned.
  • Route rendering: both the planned route (dashed, neutral outline color) and the ridden-so-far path (colored by the existing speed gradient from RideMap) drawn simultaneously, matching the mockup — this is new: today only the ridden path renders live.
  • Location marker: PulsingLocationMarker (UI-03) replaces the current plain dot.
  • Mounted mode (V3-05) interaction with this redesign: the high-contrast mounted theme and larger touch targets still apply, layered on top of this screen's new layout, not replaced by it — confirm the mounted theme's colors still read correctly against GlassPanel's blur (a light theme through blurred content behaves differently than the current dark-on-dark case V3-05 was built against).

Implementation

  1. Rebuild RecordScreen's body against UI-01's full-opacity Map tab background instead of an embedded RideMap card.
  2. Replace the current StatRow-based stats card with UI-04's HUD widgets, wired to the same RecordUiState/live telemetry stream already powering the old layout — no new data plumbing, only new presentation.
  3. Rebuild _Controls/_PrimaryButton/_SecondaryButton as the two full-bleed icon buttons; keep the existing state-machine logic (RecordUiState.isIdle/isRecording/ isPaused) driving which controls show, per the current _Controls widget.
  4. Wire both route paths (planned + ridden) into the shared background map's overlay, sourced from RoutePlanRepository (if a route is being followed — V3-09 groundwork, not required for this ticket if no route is active) and the existing live-points stream.
  5. Re-verify V3-05's mounted-mode contrast/legibility guarantees against the new GlassPanel-based layout specifically, since that's a real visual change from the opaque Card mounted mode was built and tested against.

Acceptance criteria

  • Map fills the screen behind the HUD widgets and controls, full opacity, on this tab
  • Existing record/pause/resume/stop/discard state machine behavior is unchanged — this is a visual rebuild, not a behavior change
  • HUD telemetry widgets are the UI-04 draggable/resizable kind, not a fixed layout
  • Mounted mode (V3-05) still passes its existing contrast tests against the new layout
  • The black-on-black text-color regression guard (from V3-16/the original port bug) still passes against GlassPanel's blur background

Tests

  • All existing record screen widget tests updated to the new layout and still passing (state-machine behavior, mounted-mode toggle, wake lock, live-map visibility)
  • Widget: HUD widgets render over the map, not replacing it
  • Widget: Pause/Stop buttons trigger the same engine calls as today

Risks

  • The biggest visual departure of the whole redesign happens here first — expect this ticket to surface layout issues (GlassPanel blur cost stacked with a live animating map, HUD widgets overlapping controls on small screens) that UI-06/07 then inherit or avoid having created themselves.

Out of scope

Following a planned route turn-by-turn (V3-09). Anything about Plan/Route Planning/Rides History screens — those are UI-06/UI-07, restyled toward what this ticket establishes.