Practice: one-line grouped toolbar, auto-hiding nav, legible note names

[PaulJoshi]

Requested by Paul · project thread

Before: with a song open, the practice toolbar was two rows of full-size separate pills (Start, five modes, Left/Right/Both, tempo, Metronome, the loop hint, then Sheet/Both/Notes on a second row), the top nav took another 56px, and the note names under the sheet were 10px blue (light) or grey (dark) text squeezed against stems, hard to tell apart from the notes. Chord names were dropped after the first note.

After: the toolbar is a single 48px line of compact button groups: Start · Mode (Listen / Wait / Play along / Follow me / Loop drill) · Hands (Left / Right / Both) · Tempo (slider, %, metronome toggle, beat dot) · shortcuts · View (Sheet / Both / Notes). The nav slides up out of the way and comes back when the mouse reaches the top edge. Note names are hand-coloured pills (blue right hand, soft purple left hand) in a row under each staff, with chords stacked in pitch order.

Built on main; the design system restyle (#2) and mic noise gate (#3) are both already merged.

How

• PracticeScreen.tsx / styles.css: each group is a soft-cloud pill track with the selected option inverted to ink, per the design system ("selected = full inversion", one ink pill = Start). The Metronome button is now a timer icon toggle inside the tempo group. "Drag across bars to loop" moved to the idle hint line at the bottom. One line down to 1000px wide (checked at 1440, 1280, 1180 and 1024); narrower, the toolbar wraps to two short lines rather than hiding controls off-screen.
• App.tsx / store.ts: immersive (practice screen with a score) makes the nav position: fixed and translated up. It is revealed by the mouse at the top edge (or leaving the window upwards), by a swipe down from the top 32px on touch, by a round menu button at the start of the toolbar that only shows on touch screens (hover: none / coarse pointer), and by keyboard focus (:has(:focus-visible)). It hides again when the mouse moves below it, on a tap outside it, or on Escape. It overlays the toolbar without shadow, using the existing inset hairline.
• SheetView.tsx: names are keyed by graphical note (fixes chords showing one name), placed under the lower of the staff or the note's stem, and drawn as pills with ink/white text. When names are on, OSMD's MinSkyBottomDistBetweenStaves/Systems grow so the row fits between staves without covering the bass notes. The sheet overlay isn't inverted in dark mode, so the pills look the same in both themes.
• Decisions 35 and 36 added to docs/DECISIONS.md.

Checks: npm run typecheck, npm test (106 passed), npm run build, npm run e2e (9 passed). The course e2e now reveals the nav from the top edge before clicking it, and a new practice e2e checks hide/reveal and that the toolbar fits on one line without overflow.

🤖 Generated with Claude Code

https://claude.ai/code/session_01CPiXAjmdTe5JaFZJg4GKtW

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
open-keys	Ready	Preview	Oct 3, 2026 5:42am UTC