Add customizable keyboard shortcuts (#148)

src/lib/components/AppLayout.svelte

@@ -52,6 +52,7 @@
 		syncState,
 		platformIsMobile
 	} from '$lib/stores/app';
+	import { keybindings, matchAction } from '$lib/keybindings';
 
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
@@ -409,92 +410,76 @@
 	function handleKeydown(e: KeyboardEvent) {
 		const mod = e.ctrlKey || e.metaKey;
 		const code = e.code;
-		if (e.altKey && e.key === 'ArrowLeft') {
-			e.preventDefault();
-			navigateHistory(-1);
-			return;
-		}
-		if (e.altKey && e.key === 'ArrowRight') {
-			e.preventDefault();
-			navigateHistory(1);
-			return;
-		}
-		if (mod && !e.shiftKey && code === 'KeyN') {
-			e.preventDefault();
-			createAndFocusNote();
-			return;
-		}
-		if (mod && e.shiftKey && code === 'KeyN') {
-			e.preventDefault();
-			const isDark = $theme === 'dark' || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-			const next = isDark ? 'light' : 'dark';
-			$theme = next;
-			setTheme(next);
-			return;
-		}
-		if (mod && e.shiftKey && code === 'KeyF') {
-			e.preventDefault();
-			$showSearch = true;
-			return;
-		}
-		if (mod && !e.shiftKey && code === 'KeyF') {
-			e.preventDefault();
-			if ($activeNotePath) {
-				editor?.openNoteSearch();
-			} else {
-				$showSearch = true;
-			}
-			return;
-		}
-		if (mod && !e.shiftKey && code === 'KeyP') {
-			e.preventDefault();
-			$showCommandPalette = true;
-			return;
-		}
-		if (mod && !e.shiftKey && code === 'KeyS') {
-			e.preventDefault();
-			editor?.forceSave();
-			return;
-		}
+
+		// Mod+K (insert link) is an editor formatting action and is not user-customizable.
 		if (mod && code === 'KeyK' && !e.shiftKey && $activeNotePath && !$sourceMode) {
 			e.preventDefault();
 			editor?.addLinkFromToolbar();
 		}
-		if (mod && e.shiftKey && code === 'KeyM') {
+
+		const action = matchAction(e, $keybindings);
+		if (action) {
 			e.preventDefault();
-			$sourceMode = !$sourceMode;
-		}
-		if (mod && e.shiftKey && code === 'KeyW') {
-			e.preventDefault();
-			if ($activeNotePath && $activeNote) {
-				openNoteWindow($activeNotePath, $activeNote.meta.title);
+			switch (action) {
+				case 'nav-back':
+					navigateHistory(-1);
+					return;
+				case 'nav-forward':
+					navigateHistory(1);
+					return;
+				case 'new-note':
+					createAndFocusNote();
+					return;
+				case 'toggle-theme': {
+					const isDark = $theme === 'dark' || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+					const next = isDark ? 'light' : 'dark';
+					$theme = next;
+					setTheme(next);
+					return;
+				}
+				case 'search-vault':
+					$showSearch = true;
+					return;
+				case 'find-in-note':
+					if ($activeNotePath) {
+						editor?.openNoteSearch();
+					} else {
+						$showSearch = true;
+					}
+					return;
+				case 'quick-open':
+					$showCommandPalette = true;
+					return;
+				case 'save':
+					editor?.forceSave();
+					return;
+				case 'toggle-source':
+					$sourceMode = !$sourceMode;
+					return;
+				case 'open-new-window':
+					if ($activeNotePath && $activeNote) {
+						openNoteWindow($activeNotePath, $activeNote.meta.title);
+					}
+					return;
+				case 'toggle-sidebar':
+					$sidebarCollapsed = !$sidebarCollapsed;
+					return;
+				case 'toggle-notelist':
+					toggleNoteList();
+					return;
+				case 'toggle-focus':
+					$focusMode = !$focusMode;
+					return;
+				case 'toggle-readonly':
+					if ($viewerNote) return; // viewer mode is always read-only
+					$readOnly = !$readOnly;
+					return;
+				case 'fullscreen':
+					appWindow.isFullscreen().then(fs => appWindow.setFullscreen(!fs));
+					return;
 			}
 		}
-		if (mod && (code === 'Backslash' || e.key === '\\' || e.key === '|')) {
-			e.preventDefault();
-			if (e.shiftKey) {
-				toggleNoteList();
-			} else {
-				$sidebarCollapsed = !$sidebarCollapsed;
-			}
-			return;
-		}
-		if (mod && e.shiftKey && code === 'KeyE') {
-			e.preventDefault();
-			$focusMode = !$focusMode;
-			return;
-		}
-		if (mod && e.shiftKey && code === 'KeyR') {
-			e.preventDefault();
-			if ($viewerNote) return; // viewer mode is always read-only
-			$readOnly = !$readOnly;
-			return;
-		}
-		if (e.key === 'F11') {
-			e.preventDefault();
-			appWindow.isFullscreen().then(fs => appWindow.setFullscreen(!fs));
-			return;
-		}
+
 		if (e.key === 'Escape') {
 			if ($showSettings) $showSettings = false;
 			else if ($showInfo) $showInfo = false;

src/lib/components/InfoPanel.svelte

@@ -5,10 +5,85 @@
 	import { openUrl } from '$lib/api';
 	import { getVersion } from '@tauri-apps/api/app';
 	import type { VaultStats } from '$lib/types';
+	import {
+		ACTIONS,
+		keybindings,
+		setBinding,
+		resetBinding,
+		bindingFromEvent,
+		bindingToKeys,
+		bindingsEqual,
+		type ActionDef,
+	} from '$lib/keybindings';
 
 	const modKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
 	const isMobile = /android|iphone|ipad|ipod/i.test(navigator.userAgent);
 
+	// Customizable shortcuts, grouped for display.
+	const actionGroups: { title: string; actions: ActionDef[] }[] = [
+		{ title: 'General', actions: ACTIONS.filter((a) => a.group === 'General') },
+		{ title: 'Interface', actions: ACTIONS.filter((a) => a.group === 'Interface') },
+		{ title: 'Navigation', actions: ACTIONS.filter((a) => a.group === 'Navigation') },
+	];
+
+	// id of the action currently listening for a new key combo, or null.
+	let capturingId = $state<string | null>(null);
+	// id of an action whose row should briefly flash a "already in use" warning.
+	let conflictId = $state<string | null>(null);
+	let conflictTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function startCapture(id: string) {
+		conflictId = null;
+		capturingId = id;
+	}
+
+	function stopCapture() {
+		capturingId = null;
+	}
+
+	function flashConflict(id: string) {
+		conflictId = id;
+		if (conflictTimer) clearTimeout(conflictTimer);
+		conflictTimer = setTimeout(() => { conflictId = null; }, 1600);
+	}
+
+	function captureKeydown(e: KeyboardEvent) {
+		if (!capturingId) return;
+		// Capture phase + stopImmediatePropagation keeps the combo from also
+		// triggering the app-level shortcut handler on window.
+		e.preventDefault();
+		e.stopImmediatePropagation();
+		if (e.key === 'Escape') { stopCapture(); return; }
+
+		const binding = bindingFromEvent(e);
+		if (!binding) return; // modifier-only press; keep listening
+
+		// Reject combos already bound to a different action.
+		const map = $keybindings;
+		const target = capturingId;
+		const clash = Object.keys(map).find((other) => other !== target && bindingsEqual(map[other], binding));
+		if (clash) {
+			flashConflict(target);
+			stopCapture();
+			return;
+		}
+
+		setBinding(target, binding);
+		stopCapture();
+	}
+
+	$effect(() => {
+		if (!capturingId) return;
+		window.addEventListener('keydown', captureKeydown, true);
+		return () => window.removeEventListener('keydown', captureKeydown, true);
+	});
+
+	function resetKey(e: MouseEvent, id: string) {
+		e.preventDefault();
+		resetBinding(id);
+		if (capturingId === id) stopCapture();
+	}
+
 	let stats = $state<VaultStats | null>(null);
 	let activeTab = $state<'about' | 'shortcuts'>(isMobile ? 'about' : 'shortcuts');
 	let appVersion = $state('...');
@@ -158,28 +233,39 @@
 					</div>
 				{:else}
 					<div class="shortcuts-section">
-						<h4 class="shortcuts-group-title">General</h4>
-						<div class="shortcut-row"><span class="shortcut-desc">New note</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>N</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Save</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>S</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Quick open</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>P</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Find in note</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>F</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Search vault</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Open note in new window</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>W</kbd></span></div>
-
-						<h4 class="shortcuts-group-title">Interface</h4>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle sidebar</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>\</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle notes list</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>\</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle dark / light theme</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle focus mode</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>E</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle read-only</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle source / WYSIWYG</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Toggle fullscreen</span><span class="shortcut-keys"><kbd>F11</kbd></span></div>
+						{#if !isMobile}
+							<p class="shortcuts-hint">Click a shortcut to rebind it, right-click to reset.</p>
+						{/if}
+						{#each actionGroups as group}
+							<h4 class="shortcuts-group-title">{group.title}</h4>
+							{#each group.actions as action}
+								<div class="shortcut-row">
+									<span class="shortcut-desc">{action.label}</span>
+									{#if isMobile}
+										<span class="shortcut-keys">{#each bindingToKeys($keybindings[action.id]) as key, i}{#if i > 0}+{/if}<kbd>{key}</kbd>{/each}</span>
+									{:else}
+										<button
+											class="shortcut-key-btn"
+											class:capturing={capturingId === action.id}
+											class:conflict={conflictId === action.id}
+											title="Click to rebind · right-click to reset"
+											onclick={() => startCapture(action.id)}
+											oncontextmenu={(e) => resetKey(e, action.id)}
+										>
+											{#if capturingId === action.id}
+												<span class="capture-prompt">Press keys…</span>
+											{:else if conflictId === action.id}
+												<span class="conflict-msg">Already in use</span>
+											{:else}
+												<span class="shortcut-keys">{#each bindingToKeys($keybindings[action.id]) as key, i}{#if i > 0}+{/if}<kbd>{key}</kbd>{/each}</span>
+											{/if}
+										</button>
+									{/if}
+								</div>
+							{/each}
+						{/each}
 						<div class="shortcut-row"><span class="shortcut-desc">Close panel / exit focus</span><span class="shortcut-keys"><kbd>Esc</kbd></span></div>
 
-						<h4 class="shortcuts-group-title">Navigation</h4>
-						<div class="shortcut-row"><span class="shortcut-desc">Go back</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>←</kbd></span></div>
-						<div class="shortcut-row"><span class="shortcut-desc">Go forward</span><span class="shortcut-keys"><kbd>Alt</kbd>+<kbd>→</kbd></span></div>
-
 						<h4 class="shortcuts-group-title">Formatting</h4>
 						<div class="shortcut-row"><span class="shortcut-desc">Bold</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>B</kbd></span></div>
 						<div class="shortcut-row"><span class="shortcut-desc">Italic</span><span class="shortcut-keys"><kbd>{modKey}</kbd>+<kbd>I</kbd></span></div>
@@ -503,6 +589,48 @@
 		color: var(--text-tertiary);
 	}
 
+	.shortcuts-hint {
+		font-size: 12px;
+		color: var(--text-tertiary);
+		margin: 0 0 4px;
+	}
+
+	.shortcut-key-btn {
+		background: none;
+		border: 1px solid transparent;
+		border-radius: 6px;
+		padding: 2px 4px;
+		margin: -2px -4px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		font: inherit;
+	}
+
+	.shortcut-key-btn:hover {
+		background: var(--bg-hover);
+	}
+
+	.shortcut-key-btn.capturing {
+		border-color: var(--accent);
+		background: var(--accent-light);
+	}
+
+	.shortcut-key-btn.conflict {
+		border-color: var(--danger, #e11d48);
+	}
+
+	.capture-prompt {
+		font-size: 12px;
+		color: var(--accent);
+	}
+
+	.conflict-msg {
+		font-size: 12px;
+		color: var(--danger, #e11d48);
+	}
+
 	.shortcut-keys kbd,
 	.shortcut-desc kbd {
 		display: inline-block;

src/lib/components/NoteWindow.svelte

@@ -12,6 +12,7 @@
 		theme
 	} from '$lib/stores/app';
 	import { readNote } from '$lib/api';
+	import { keybindings, matchAction } from '$lib/keybindings';
 	import type { FileEvent } from '$lib/types';
 
 	let { notePath }: { notePath: string } = $props();
@@ -73,13 +74,11 @@
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
-		const mod = e.ctrlKey || e.metaKey;
-		if (mod && !e.shiftKey && e.code === 'KeyS') {
+		const action = matchAction(e, $keybindings);
+		if (action === 'save') {
 			e.preventDefault();
 			editor?.forceSave();
-			return;
-		}
-		if (mod && e.shiftKey && e.code === 'KeyM') {
+		} else if (action === 'toggle-source') {
 			e.preventDefault();
 			$sourceMode = !$sourceMode;
 		}