mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-07-05 17:01:34 +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).
|
||||||
|
|
@ -14,7 +14,7 @@ To improve the efficiency of batch operations, global keyboard listeners have be
|
||||||
- **Action Shortcuts** (Context-aware: Applied to selection in Library, or current item on Item Page):
|
- **Action Shortcuts** (Context-aware: Applied to selection in Library, or current item on Item Page):
|
||||||
- **Consolidate**: `Ctrl + K`.
|
- **Consolidate**: `Ctrl + K`.
|
||||||
- **Merge**: `Ctrl + M` (Requires 2+ selected items).
|
- **Merge**: `Ctrl + M` (Requires 2+ selected items).
|
||||||
- **Move to Library**: `Ctrl + Shift + M`.
|
- **Move to Library**: `Ctrl + Shift + M` or `Alt + M`.
|
||||||
- **Reset Metadata**: `Alt + R`. (Note: `Alt` is used specifically to avoid conflict with standard "Reload" `Ctrl + R`).
|
- **Reset Metadata**: `Alt + R`. (Note: `Alt` is used specifically to avoid conflict with standard "Reload" `Ctrl + R`).
|
||||||
- **Quick Match / Match**: `Alt + Q`.
|
- **Quick Match / Match**: `Alt + Q`.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ This index provides a quick reference for specification and documentation files
|
||||||
| **2026-02-17** | [consolidate_singles.md](2026-02-17/consolidate_singles.md) | Expansion of the "Consolidate" feature to support single-file books by moving them into new folders. |
|
| **2026-02-17** | [consolidate_singles.md](2026-02-17/consolidate_singles.md) | Expansion of the "Consolidate" feature to support single-file books by moving them into new folders. |
|
||||||
| **2026-02-17** | [ui_enhancements.md](2026-02-17/ui_enhancements.md) | Specification for "View All" shortcuts on Home view shelves with specific sorting. |
|
| **2026-02-17** | [ui_enhancements.md](2026-02-17/ui_enhancements.md) | Specification for "View All" shortcuts on Home view shelves with specific sorting. |
|
||||||
| **2026-02-20** | [promote_file_to_book.md](2026-02-20/promote_file_to_book.md) | Specification for "promoting" files from an existing book into a standalone library item, including a "Split Book" wizard. |
|
| **2026-02-20** | [promote_file_to_book.md](2026-02-20/promote_file_to_book.md) | Specification for "promoting" files from an existing book into a standalone library item, including a "Split Book" wizard. |
|
||||||
|
| **2026-02-20** | [move_to_library_keyboard_shortcuts.md](2026-02-20/move_to_library_keyboard_shortcuts.md) | Specification for keyboard-shortcut-enabled library buttons in the "Move to Library" dialog. |
|
||||||
| **General** | [docs/consolidate_feature.md](docs/consolidate_feature.md) | Comprehensive documentation for the "Consolidate" feature, including conflict resolution and technical details. |
|
| **General** | [docs/consolidate_feature.md](docs/consolidate_feature.md) | Comprehensive documentation for the "Consolidate" feature, including conflict resolution and technical details. |
|
||||||
| **General** | [docs/item_restructuring_guide.md](docs/item_restructuring_guide.md) | Guide for Moving, Merging, and Splitting (Promoting) library items. |
|
| **General** | [docs/item_restructuring_guide.md](docs/item_restructuring_guide.md) | Guide for Moving, Merging, and Splitting (Promoting) library items. |
|
||||||
| **General** | [docs/metadata_management_tools.md](docs/metadata_management_tools.md) | Documentation for Reset Metadata and Batch Reset operations. |
|
| **General** | [docs/metadata_management_tools.md](docs/metadata_management_tools.md) | Documentation for Reset Metadata and Batch Reset operations. |
|
||||||
|
|
|
||||||
|
|
@ -560,7 +560,7 @@ export default {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
this.batchMerge()
|
this.batchMerge()
|
||||||
}
|
}
|
||||||
} else if (ctrlOrMeta && shift && e.key.toLowerCase() === 'm') {
|
} else if ((ctrlOrMeta && shift && e.key.toLowerCase() === 'm') || (alt && e.key.toLowerCase() === 'm')) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
if (this.numMediaItemsSelected > 0) {
|
if (this.numMediaItemsSelected > 0) {
|
||||||
this.batchMoveToLibrary()
|
this.batchMoveToLibrary()
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<modals-modal ref="modal" v-model="show" name="move-to-library" :width="400" :height="'unset'" :processing="processing" @submit="moveItems">
|
<modals-modal ref="modal" v-model="show" name="move-to-library" :width="500" :height="'unset'" :processing="processing" @submit="moveItems">
|
||||||
<template #outer>
|
<template #outer>
|
||||||
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
|
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
|
||||||
<p class="text-3xl text-white truncate">{{ $strings.LabelMoveToLibrary }}</p>
|
<p class="text-3xl text-white truncate">{{ $strings.LabelMoveToLibrary }}</p>
|
||||||
|
|
@ -14,11 +14,23 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-if="targetLibraries.length">
|
<template v-if="targetLibraries.length">
|
||||||
|
<!-- Library shortcut buttons -->
|
||||||
<div class="w-full mb-4">
|
<div class="w-full mb-4">
|
||||||
<label class="px-1 text-sm font-semibold block mb-1">{{ $strings.LabelSelectTargetLibrary }}</label>
|
<label class="px-1 text-sm font-semibold block mb-2">{{ $strings.LabelSelectTargetLibrary }}</label>
|
||||||
<ui-dropdown v-model="selectedLibraryId" :items="libraryOptions" />
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<button
|
||||||
|
v-for="lib in libraryShortcuts"
|
||||||
|
:key="lib.id"
|
||||||
|
class="library-shortcut-btn"
|
||||||
|
:class="{ 'active': selectedLibraryId === lib.id }"
|
||||||
|
@click="selectLibrary(lib)"
|
||||||
|
>
|
||||||
|
<span>{{ lib.before }}</span><span class="shortcut-char">{{ lib.shortcutChar }}</span><span>{{ lib.after }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Folder picker (only when selected library has multiple folders) -->
|
||||||
<div v-if="selectedLibraryFolders.length > 1" class="w-full mb-4">
|
<div v-if="selectedLibraryFolders.length > 1" class="w-full mb-4">
|
||||||
<label class="px-1 text-sm font-semibold block mb-1">{{ $strings.LabelSelectTargetFolder }}</label>
|
<label class="px-1 text-sm font-semibold block mb-1">{{ $strings.LabelSelectTargetFolder }}</label>
|
||||||
<ui-dropdown v-model="selectedFolderId" :items="folderOptions" />
|
<ui-dropdown v-model="selectedFolderId" :items="folderOptions" />
|
||||||
|
|
@ -54,6 +66,9 @@ export default {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.init()
|
this.init()
|
||||||
|
window.addEventListener('keydown', this.keydownHandler)
|
||||||
|
} else {
|
||||||
|
window.removeEventListener('keydown', this.keydownHandler)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -109,11 +124,32 @@ export default {
|
||||||
// Filter libraries to only show compatible ones (same media type, different library)
|
// Filter libraries to only show compatible ones (same media type, different library)
|
||||||
return this.$store.state.libraries.libraries.filter((l) => l.mediaType === this.currentMediaType && l.id !== this.currentLibraryId)
|
return this.$store.state.libraries.libraries.filter((l) => l.mediaType === this.currentMediaType && l.id !== this.currentLibraryId)
|
||||||
},
|
},
|
||||||
libraryOptions() {
|
libraryShortcuts() {
|
||||||
return this.targetLibraries.map((lib) => ({
|
const used = new Set()
|
||||||
text: lib.name,
|
return this.targetLibraries.map((lib) => {
|
||||||
value: lib.id
|
const name = lib.name
|
||||||
}))
|
let shortcutIndex = -1
|
||||||
|
for (let i = 0; i < name.length; i++) {
|
||||||
|
const letter = name[i].toLowerCase()
|
||||||
|
if (/[a-z]/.test(letter) && !used.has(letter)) {
|
||||||
|
used.add(letter)
|
||||||
|
shortcutIndex = i
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (shortcutIndex === -1) {
|
||||||
|
return { id: lib.id, name, before: name, shortcutChar: '', after: '', shortcutKey: null, folders: lib.folders || [] }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: lib.id,
|
||||||
|
name,
|
||||||
|
before: name.slice(0, shortcutIndex),
|
||||||
|
shortcutChar: name[shortcutIndex],
|
||||||
|
after: name.slice(shortcutIndex + 1),
|
||||||
|
shortcutKey: name[shortcutIndex].toLowerCase(),
|
||||||
|
folders: lib.folders || []
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
selectedLibrary() {
|
selectedLibrary() {
|
||||||
return this.targetLibraries.find((l) => l.id === this.selectedLibraryId)
|
return this.targetLibraries.find((l) => l.id === this.selectedLibraryId)
|
||||||
|
|
@ -129,6 +165,26 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
keydownHandler(e) {
|
||||||
|
// Ignore events when a form element inside the modal is focused (e.g., folder dropdown)
|
||||||
|
const tag = document.activeElement?.tagName?.toLowerCase()
|
||||||
|
if (tag === 'input' || tag === 'select' || tag === 'textarea') return
|
||||||
|
|
||||||
|
const key = e.key.toLowerCase()
|
||||||
|
const match = this.libraryShortcuts.find((lib) => lib.shortcutKey === key)
|
||||||
|
if (match) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.selectLibrary(match)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectLibrary(lib) {
|
||||||
|
this.selectedLibraryId = lib.id
|
||||||
|
// Auto-trigger move if only one folder
|
||||||
|
const folders = lib.folders || this.selectedLibraryFolders
|
||||||
|
if (folders.length <= 1) {
|
||||||
|
this.$nextTick(() => this.moveItems())
|
||||||
|
}
|
||||||
|
},
|
||||||
async moveItems() {
|
async moveItems() {
|
||||||
if (!this.selectedLibraryId) return
|
if (!this.selectedLibraryId) return
|
||||||
|
|
||||||
|
|
@ -180,7 +236,41 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {}
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('keydown', this.keydownHandler)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.library-shortcut-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.4rem 0.9rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #4b5563;
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: #d1d5db;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
.library-shortcut-btn:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
border-color: #6b7280;
|
||||||
|
color: #f9fafb;
|
||||||
|
}
|
||||||
|
.library-shortcut-btn.active {
|
||||||
|
background-color: #1e3a5f;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
.shortcut-char {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #60a5fa;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.library-shortcut-btn.active .shortcut-char {
|
||||||
|
color: #bfdbfe;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue