Add keyboard-shortcut help overlay

Press '?' to open a styled overlay showing all keyboard shortcuts,
Esc to close. Lists Space (play/pause), arrow keys (seek/volume),
F (fullscreen), M (mute), ? (help), Esc (close).

Files:
- frontend/app.js: toggleShortcutHelp(), wireShortcutHelp(), '?' and Esc handlers
- frontend/index.html: shortcut-overlay markup with .shortcut-grid
- frontend/styles.css: .shortcut-overlay, .shortcut-panel, .shortcut-row, kbd styles
This commit is contained in:
Jonathan Sykes
2026-06-14 14:19:42 +08:00
parent da2ad27244
commit c676786144
7 changed files with 108 additions and 2 deletions

View File

@@ -17,7 +17,7 @@ bottom as they come up.
## UX / polish
- [x] Empty-state designs for empty playlists and empty history (match the new hero).
- [x] Loading skeletons for search results instead of a bare "Searching…".
- [ ] Keyboard-shortcut help overlay (press `?`), listing space / arrows / f / m.
- [x] Keyboard-shortcut help overlay (press `?`), listing space / arrows / f / m.
- [ ] Download/preload progress indicator on cards (percent or a bar, not just a pulse).
- [ ] Remember and restore the last playback position per video.
- [ ] Toast queue (stack multiple toasts instead of replacing).