Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(keybindings): add sidebar shortcut, rebrand Focus to Immersive

Browse Source 
- Add ui.sidebar action (Shift+S) to toggle sidebar (fixes #125)
- Change ui.focusMode default to Shift+I, ui.queue to Shift+Q
- Rename "Focus Mode" to "Immersive" in all user-facing labels
- Update all 4 locale files (en, es, de, fr)
- KeybindingsSettings modal: 820px width, 3-column layout
- ShortcutInput: compact sizing (32px height, smaller fonts)

cc
This commit is contained in:
vicrodh committed 2026-02-24 09:41:13 -06:00
1 parent 2b15a0828c
commit 8fe8d39b53
10 files changed
+56 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/ExpandedPlayer.svelte
+1 -1
View File
@@ -343,7 +343,7 @@
<button class="action-btn" onclick={onOpenQueue} title="Queue">
<List size={22} />
</button>
<button class="action-btn" onclick={onOpenFocusMode} title="Focus Mode">
<button class="action-btn" onclick={onOpenFocusMode} title="Immersive Mode">
<Maximize2 size={22} />
</button>
<button
src/lib/components/KeybindingsSettings.svelte
+10 -4
View File
@@ -182,7 +182,7 @@
background: var(--bg-secondary);
border-radius: 12px;
width: 90%;
max-width: 660px;
max-width: 820px;
max-height: 85vh;
display: flex;
flex-direction: column;
@@ -255,12 +255,12 @@
overflow-y: auto;
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
grid-template-columns: 1fr 1fr 1fr;
gap: 0 20px;
}
.category-section {
margin-bottom: 28px;
margin-bottom: 20px;
break-inside: avoid;
}
@@ -376,6 +376,12 @@
}
/* Responsive */
@media (max-width: 800px) {
.modal-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.modal {
width: 95%;
src/lib/components/ShortcutInput.svelte
+9 -9
View File
@@ -150,15 +150,15 @@
<style>
.shortcut-input-wrapper {
margin-bottom: 16px;
margin-bottom: 10px;
}
.action-info {
margin-bottom: 6px;
margin-bottom: 4px;
}
.action-label {
font-size: 14px;
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
}
@@ -174,16 +174,16 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
padding: 6px 10px;
background: var(--bg-tertiary);
border: 2px solid transparent;
border-radius: 8px;
border-radius: 6px;
font-family: var(--font-mono, monospace);
font-size: 13px;
font-size: 12px;
color: var(--text-primary);
cursor: pointer;
transition: all 150ms ease;
min-height: 42px;
min-height: 32px;
}
.shortcut-input:hover {
@@ -227,8 +227,8 @@
}
.reset-btn {
width: 36px;
height: 36px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
src/lib/components/immersive/ImmersiveHeader.svelte
+2 -2
View File
@@ -155,11 +155,11 @@
<button
class="mode-toggle"
onclick={() => onViewModeChange(isFocusMode ? 'split' : 'focus')}
title={isFocusMode ? 'Switch to Split View (V)' : 'Switch to Focus View (V)'}
title={isFocusMode ? 'Switch to Split View (V)' : 'Switch to Immersive View (V)'}
>
<img
src={isFocusMode ? '/split-view.svg' : '/lotus.svg'}
alt={isFocusMode ? 'Split Mode' : 'Focus Mode'}
alt={isFocusMode ? 'Split Mode' : 'Immersive Mode'}
class="mode-icon"
/>
</button>
src/lib/i18n/locales/de.json
+5 -3
View File
@@ -1318,7 +1318,7 @@
"playback": "Wiedergabe",
"navigation": "Navigation",
"ui": "Oberfläche",
"focus": "Fokusmodus"
"focus": "Immersiv"
},
"actions": {
"playbackToggle": "Wiedergabe / Pause",
@@ -1327,7 +1327,8 @@
"navBack": "Zurück",
"navForward": "Vorwärts",
"navSearch": "Suchen",
"uiFocusMode": "Fokusmodus",
"uiSidebar": "Seitenleiste umschalten",
"uiFocusMode": "Immersiver Modus",
"uiQueue": "Warteschlange",
"uiEscape": "Schließen / Verwerfen",
"uiShowShortcuts": "Tastenkürzel anzeigen",
@@ -1344,7 +1345,8 @@
"navBack": "Zur vorherigen Seite navigieren",
"navForward": "Zur nächsten Seite navigieren",
"navSearch": "Suchfeld fokussieren",
"uiFocusMode": "Fokusmodus umschalten",
"uiSidebar": "Seitenleiste ein- oder ausblenden",
"uiFocusMode": "Immersiven Modus umschalten",
"uiQueue": "Warteschlangen-Panel umschalten",
"uiEscape": "Aktives Panel oder Modal schließen",
"uiShowShortcuts": "Tastenkürzel-Modal anzeigen",
src/lib/i18n/locales/en.json
+5 -3
View File
@@ -1360,7 +1360,7 @@
"playback": "Playback",
"navigation": "Navigation",
"ui": "Interface",
"focus": "Focus Mode"
"focus": "Immersive"
},
"actions": {
"playbackToggle": "Play / Pause",
@@ -1369,7 +1369,8 @@
"navBack": "Go Back",
"navForward": "Go Forward",
"navSearch": "Search",
"uiFocusMode": "Focus Mode",
"uiSidebar": "Toggle Sidebar",
"uiFocusMode": "Immersive Mode",
"uiQueue": "Queue",
"uiEscape": "Close / Dismiss",
"uiShowShortcuts": "Show Shortcuts",
@@ -1386,7 +1387,8 @@
"navBack": "Navigate to previous page",
"navForward": "Navigate to next page",
"navSearch": "Focus search field",
"uiFocusMode": "Toggle focus mode",
"uiSidebar": "Expand or collapse the sidebar",
"uiFocusMode": "Toggle immersive mode",
"uiQueue": "Toggle queue panel",
"uiEscape": "Close active panel or modal",
"uiShowShortcuts": "Show keyboard shortcuts modal",
src/lib/i18n/locales/es.json
+5 -3
View File
@@ -1360,7 +1360,7 @@
"playback": "Reproducción",
"navigation": "Navegación",
"ui": "Interfaz",
"focus": "Modo Focus"
"focus": "Inmersivo"
},
"actions": {
"playbackToggle": "Reproducir / Pausar",
@@ -1369,7 +1369,8 @@
"navBack": "Ir Atrás",
"navForward": "Ir Adelante",
"navSearch": "Buscar",
"uiFocusMode": "Modo Focus",
"uiSidebar": "Alternar Barra Lateral",
"uiFocusMode": "Modo Inmersivo",
"uiQueue": "Cola",
"uiEscape": "Cerrar / Descartar",
"uiShowShortcuts": "Mostrar Atajos",
@@ -1386,7 +1387,8 @@
"navBack": "Navegar a la página anterior",
"navForward": "Navegar a la siguiente página",
"navSearch": "Enfocar campo de búsqueda",
"uiFocusMode": "Alternar modo focus",
"uiSidebar": "Expandir o colapsar la barra lateral",
"uiFocusMode": "Alternar modo inmersivo",
"uiQueue": "Alternar panel de cola",
"uiEscape": "Cerrar panel activo o modal",
"uiShowShortcuts": "Mostrar modal de atajos de teclado",
src/lib/i18n/locales/fr.json
+5 -3
View File
@@ -1318,7 +1318,7 @@
"playback": "Lecture",
"navigation": "Navigation",
"ui": "Interface",
"focus": "Mode focus"
"focus": "Immersif"
},
"actions": {
"playbackToggle": "Lecture / Pause",
@@ -1327,7 +1327,8 @@
"navBack": "Retour",
"navForward": "Avancer",
"navSearch": "Rechercher",
"uiFocusMode": "Mode focus",
"uiSidebar": "Afficher/masquer la barre latérale",
"uiFocusMode": "Mode immersif",
"uiQueue": "File d'attente",
"uiEscape": "Fermer / Annuler",
"uiShowShortcuts": "Afficher les raccourcis",
@@ -1344,7 +1345,8 @@
"navBack": "Naviguer vers la page précédente",
"navForward": "Naviguer vers la page suivante",
"navSearch": "Mettre le focus sur la recherche",
"uiFocusMode": "Basculer le mode focus",
"uiSidebar": "Afficher ou masquer la barre latérale",
"uiFocusMode": "Basculer le mode immersif",
"uiQueue": "Basculer le panneau de file d'attente",
"uiEscape": "Fermer le panneau actif ou la modale",
"uiShowShortcuts": "Afficher la modale des raccourcis clavier",
src/lib/stores/keybindingsStore.ts
+13 -6
View File
@@ -52,7 +52,7 @@ export const CATEGORIES: CategoryInfo[] = [
{ id: 'playback', label: 'Playback', description: 'Playback controls' },
{ id: 'navigation', label: 'Navigation', description: 'App navigation' },
{ id: 'ui', label: 'Interface', description: 'UI elements' },
{ id: 'focus', label: 'Focus Mode', description: 'Focus mode controls' },
{ id: 'focus', label: 'Immersive', description: 'Immersive mode controls' },
];
export const ACTIONS: KeybindingAction[] = [
@@ -104,17 +104,24 @@ export const ACTIONS: KeybindingAction[] = [
// UI
{
id: 'ui.focusMode',
label: 'Focus Mode',
id: 'ui.sidebar',
label: 'Toggle Sidebar',
category: 'ui',
defaultShortcut: 'f',
description: 'Toggle focus mode',
defaultShortcut: 'Shift+S',
description: 'Expand or collapse the sidebar',
},
{
id: 'ui.focusMode',
label: 'Immersive Mode',
category: 'ui',
defaultShortcut: 'Shift+I',
description: 'Toggle immersive mode',
},
{
id: 'ui.queue',
label: 'Queue',
category: 'ui',
defaultShortcut: 'q',
defaultShortcut: 'Shift+Q',
description: 'Toggle queue panel',
},
{
src/routes/+page.svelte
+1
View File
@@ -2937,6 +2937,7 @@
registerAction('nav.back', navGoBack);
registerAction('nav.forward', navGoForward);
registerAction('nav.search', () => sidebarRef?.focusSearch());
registerAction('ui.sidebar', toggleSidebar);
registerAction('ui.focusMode', toggleFocusMode);
registerAction('ui.queue', toggleQueue);
registerAction('ui.escape', handleUIEscape);