Skip to content

Ledger interface redesign (ROADMAP 3.21) - #30

Merged
SeanathanVT merged 6 commits into
developmentfrom
feature/ledger-ui
Oct 30, 2026
Merged

Ledger interface redesign (ROADMAP 3.21)#30
SeanathanVT merged 6 commits into
developmentfrom
feature/ledger-ui

Conversation

@SeanathanVT

@SeanathanVT SeanathanVT commented Oct 30, 2026

Copy link
Copy Markdown
Owner

Summary

Replaces the Bootstrap "console" UI with Ledger, design F from the redesign exploration. All existing features stay reachable, and every form still works without JavaScript. Delivers ROADMAP 3.21, and with it 3.15 (themed confirmations) and 3.17 (tablet layout).

What changed

  • Shell:
    • A side rail holds the WalkingDad logo, Walk, Theme, Light/Dark and Shortcuts, with Settings and Shut down at the bottom. On phones it becomes a labelled bottom bar.
    • Each screen has one title row with its actions.
    • Stats sit in panels with tabular numbers.
  • Walking / Paused:
    • Walking shows a large speed figure. It is deliberately about 128px, larger than typical app figures, because it's read from the treadmill.
    • The presets are stops on a belt-speed ladder, a slider over the existing speed commands. A click steps toward the click; the arrow and Page keys step; Home and End jump to Slow and Max. Dragging to an arbitrary speed is ROADMAP 3.23.
    • Paused leads with the elapsed time and parks the ladder.
  • Start: the walker picker sits beside Start walking. History is one panel, with Edit, scope, reassign, delete, Export and Clear as before.
  • Connection screens: show the device and the last walk.
  • Settings: each section sits beside its description, inputs have associated labels, and the Save bar is sticky.
  • No Bootstrap: its CSS and JS are gone.
    • Native <dialog> replaces the modals; Esc or a backdrop click closes them, and focus returns to the opener.
    • The Popover API runs the theme menu, and hidden handles reveals.
    • The Bootstrap Icons font stays.
    • The styles are self-hosted in static/ledger.css, static/themes.css and static/ledger.js.
  • Confirmations: themed confirm dialogs replace confirm() for Shut down, deleting a session or profile, and clearing history. Shut down now asks first.
  • Colour themes:
    • The original palettes are kept. Any colour that missed WCAG AA is adjusted in OKLCH lightness only, so its hue is kept; that was mostly dark-mode buttons and field borders.
    • Virginia Tech follows brand.vt.edu: maroon and orange are never lightened, the neutrals are VT's own, and it uses 2px rules and square dots.
    • Seasonal themes keep their fonts and ambient effects. The effects now reach the bottom of any page.
    • Frost is now Holly and Harvest is now Pumpkin. A saved choice of either migrates on load.
  • Browser floor: Safari 17.5, Chrome 123 or Firefox 125, set by light-dark().

Fixes found along the way

  • Safari hang: switching to a theme with web fonts (VT, the seasonal ones) hung Safari. The cause was position-try-fallbacks on the anchored menu combined with a late-loading font. The theme menu is now pinned beside the rail instead of anchored.
  • Select arrow: Safari clipped it. It's now one SVG chevron in both select paths.
  • No-JS refresh: controls render disabled during a belt sequence, and with JavaScript off the page refreshes until the sequence ends.

Tests

  • tests/test_routes.py is updated for the new markup and adds tests for:
    • the shell, the connection screens and the start titles
    • the dialogs, the focusable heart icon and the Settings labels
    • the ladder slider and disabled controls during transitions
    • the theme renames and migration
  • New tests/test_theme_contrast.py checks WCAG ratios for all 15 themes in both modes.
  • The suite passes on Python 3.10, 3.12 and 3.13.
  • Browser checks against the real templates, using scripts kept in the gitignored tmp/ folder:
    • Chromium: behaviour, a text-contrast sweep over 15 themes × 2 modes × 7 pages, and the ambient-effect travel
    • WebKitGTK 2.50: the theme-switch regression
  • Two whole-branch code reviews; all Important findings are fixed.

Manual check (done)

  • A walk on the WalkingPad covering: live stats, the tab title, the steppers, the presets and their keys, the ladder, Pause and Resume, auto-pause, End, and logging to Apple Health
  • Safari on macOS: theme switching, including seasonal and VT, appearance, the dialogs, the shortcuts list and Shut down

Follow-ups

  • ROADMAP 4.6, 5.5 and 3.22 (week summary, Apple Health card, live speed chart)
  • ROADMAP 3.23 (drag the belt ladder to any speed)

🤖 Generated with Claude Code

SeanathanVT and others added 6 commits October 22, 2026 13:59
@SeanathanVT @claude
feat(ui): Ledger interface redesign (ROADMAP 3.21)
56a4983 
- Replace Bootstrap and the inline styles with static/ledger.css, themes.css and ledger.js
- Side rail, one title row per screen, panel layout; tablet breakpoint (3.17)
- Themed dialogs replace confirm()/alert() for shut down, delete and clear (3.15)
- Belt-speed ladder over the existing speed commands; connection screens show device and last walk
- Rename Frost to Holly and Harvest to Pumpkin, migrating saved choices
- VT theme follows brand.vt.edu; seasonal fonts and layer-relative ambient effects
- Update README, ROADMAP, CHANGELOG and screenshots

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT @claude
fix(ui): Safari theme-switch hang and select arrow (ROADMAP 3.21)
350be0c 
- Drop position-try-fallbacks from the theme menu; with it, WebKit hangs when a theme's web font loads after the menu opened
- Draw the select arrow as one SVG chevron in both select paths; Safari clipped the gradient and rotated-border versions
- Add ROADMAP 3.23 (drag the belt ladder to any speed) as a follow-on

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT @claude
fix(ui): keep Tide's crabs visible over the save bar and phone nav (R…
3d91d4c 
…OADMAP 3.21)

- Lower the sticky Settings save bar below the ambient-effects layer
- End the effects layer at the phone bottom bar so crabs walk above it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT @claude
feat(ui): use the WalkingDad logo as the rail mark (ROADMAP 3.21)
55fc220 
- Trace images/logo.png into one currentColor SVG path, so it follows the color theme
- Replace the mock's stick-figure-on-a-belt mark

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT @claude
fix(ui): rail order, theme contrast and review fixes (ROADMAP 3.21)
5f051c8 
- Rail: Walk, then Theme, Light/Dark and Shortcuts; Settings above Shut down; theme menu pinned beside the rail
- Themes: lighten or darken failing colors in OKLCH (hue kept) so dark buttons, hovers, the belt ladder and field borders meet WCAG AA; VT's dark selected preset gets an orange ring instead
- Add tests/test_theme_contrast.py checking every theme in both modes
- Phone Save bar clears the bottom nav; heart tooltip no longer clipped; Space pauses from the focused ladder; key hints hidden on touch screens
- Remove unused mock CSS and stale comments

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT @claude
fix(lint): clear ruff findings that failed CI (ROADMAP 3.21)
2131594 
- Parse the last-walk label with datetime.fromisoformat instead of a naive strptime (DTZ007)
- Same for the connecting-screen test's start time (DTZ001)
- Use re.DOTALL / re.MULTILINE in the theme contrast test (FURB167)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT
SeanathanVT merged commit c9567e6 into development Oct 30, 2026
2 checks passed
@SeanathanVT SeanathanVT mentioned this pull request Oct 30, 2026
Merged
@SeanathanVT
SeanathanVT deleted the feature/ledger-ui branch October 30, 2026 18:35
This was referenced Oct 30, 2026
Merged
Merged
SeanathanVT added a commit that referenced this pull request Oct 30, 2026
@SeanathanVT @claude
Ledger interface redesign (ROADMAP 3.21) (#30)
fa276dd 
* feat(ui): Ledger interface redesign (ROADMAP 3.21)

- Replace Bootstrap and the inline styles with static/ledger.css, themes.css and ledger.js
- Side rail, one title row per screen, panel layout; tablet breakpoint (3.17)
- Themed dialogs replace confirm()/alert() for shut down, delete and clear (3.15)
- Belt-speed ladder over the existing speed commands; connection screens show device and last walk
- Rename Frost to Holly and Harvest to Pumpkin, migrating saved choices
- VT theme follows brand.vt.edu; seasonal fonts and layer-relative ambient effects
- Update README, ROADMAP, CHANGELOG and screenshots

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(ui): Safari theme-switch hang and select arrow (ROADMAP 3.21)

- Drop position-try-fallbacks from the theme menu; with it, WebKit hangs when a theme's web font loads after the menu opened
- Draw the select arrow as one SVG chevron in both select paths; Safari clipped the gradient and rotated-border versions
- Add ROADMAP 3.23 (drag the belt ladder to any speed) as a follow-on

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(ui): keep Tide's crabs visible over the save bar and phone nav (ROADMAP 3.21)

- Lower the sticky Settings save bar below the ambient-effects layer
- End the effects layer at the phone bottom bar so crabs walk above it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* feat(ui): use the WalkingDad logo as the rail mark (ROADMAP 3.21)

- Trace images/logo.png into one currentColor SVG path, so it follows the color theme
- Replace the mock's stick-figure-on-a-belt mark

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(ui): rail order, theme contrast and review fixes (ROADMAP 3.21)

- Rail: Walk, then Theme, Light/Dark and Shortcuts; Settings above Shut down; theme menu pinned beside the rail
- Themes: lighten or darken failing colors in OKLCH (hue kept) so dark buttons, hovers, the belt ladder and field borders meet WCAG AA; VT's dark selected preset gets an orange ring instead
- Add tests/test_theme_contrast.py checking every theme in both modes
- Phone Save bar clears the bottom nav; heart tooltip no longer clipped; Space pauses from the focused ladder; key hints hidden on touch screens
- Remove unused mock CSS and stale comments

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix(lint): clear ruff findings that failed CI (ROADMAP 3.21)

- Parse the last-walk label with datetime.fromisoformat instead of a naive strptime (DTZ007)
- Same for the connecting-screen test's start time (DTZ001)
- Use re.DOTALL / re.MULTILINE in the theme contrast test (FURB167)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
@SeanathanVT SeanathanVT mentioned this pull request Nov 11, 2026
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@SeanathanVT