mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-07-29 12:41:54 +00:00
feat: Move to Library dialog with keyboard shortcut buttons + Alt+M shortcut
- Replace library dropdown in MoveToLibraryModal with flex-wrap shortcut buttons - Each button has one letter underlined as a keyboard shortcut (greedy first-unused-letter assignment) - Pressing the shortcut key selects the library and immediately triggers the move - If the target library has multiple folders, folder picker appears before moving - Add Alt+M as an alias for the existing Ctrl+Shift+M Move to Library shortcut - Update docs and artifacts index
This commit is contained in:
parent
9c0bb3162f
commit
a73ce12945
5 changed files with 145 additions and 11 deletions
43
artifacts/2026-02-20/move_to_library_keyboard_shortcuts.md
Normal file
43
artifacts/2026-02-20/move_to_library_keyboard_shortcuts.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# Move to Library — Keyboard Shortcut Buttons
|
||||
|
||||
**Date:** 2026-02-20
|
||||
|
||||
## Overview
|
||||
|
||||
Replace the dropdown-based library picker in the "Move to Library" dialog with a horizontal row of buttons. Each button represents a target library and has one letter highlighted (underlined) as a keyboard shortcut. Pressing that key immediately selects and executes the move.
|
||||
|
||||
## UX Design
|
||||
|
||||
- Libraries are displayed as **buttons in a horizontal, wrapping row** (flexbox wrap).
|
||||
- Each button shows the library name with **one letter visually highlighted** (e.g. underlined, bold, or different color) to indicate its keyboard shortcut.
|
||||
- Letters are assigned greedily: use the **first unused letter** of each library name, scanning left to right. This ensures the mnemonic is intuitive.
|
||||
- When the dialog is open, pressing a shortcut key triggers the move immediately (same as clicking the button).
|
||||
- If there are multiple folders in the target library, fall back to the existing folder dropdown before executing.
|
||||
|
||||
## Letter Assignment Algorithm
|
||||
|
||||
```
|
||||
used = {}
|
||||
for each library in targetLibraries:
|
||||
for each character in library.name:
|
||||
letter = character.toLowerCase()
|
||||
if letter is a-z and letter not in used:
|
||||
assign letter as shortcut
|
||||
used.add(letter)
|
||||
break
|
||||
```
|
||||
|
||||
## Keyboard Handling
|
||||
|
||||
- Listen for `keydown` events while the dialog is open.
|
||||
- Match the pressed key against assigned shortcuts (case-insensitive).
|
||||
- If matched and not processing, trigger `moveItems()` for that library.
|
||||
- Ignore key events when a child input/select element is focused (e.g., folder dropdown).
|
||||
|
||||
## Visual Button Design
|
||||
|
||||
Each button should:
|
||||
- Show the library name with the shortcut letter underlined.
|
||||
- Have a hover/focus state.
|
||||
- Show an active/selected state when a library is picked.
|
||||
- The shortcut letter should be highlighted using a `<span>` with distinct styling (underline + slightly different color).
|
||||
Loading…
Add table
Add a link
Reference in a new issue