fix: use svelte:window for managing hotkey event listeners (#4005)

.github/actions/init-env-node/action.yaml

@@ -3,23 +3,19 @@ description: prepare runner for node related tasks
 runs:
   using: "composite"
   steps:
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v4
       name: Install pnpm
-      with:
-        version: 8.6
-        run_install: false
 
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       name: Setup node
       with:
-        node-version: "18"
         cache: pnpm
 
     - name: Get pnpm store directory
       shell: bash
       run: echo 'STORE_PATH=$(pnpm store path --silent)' >> $GITHUB_ENV
 
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       if: runner.name != 'ScottsMacStudio' # internet in berlin is very slow
       name: Setup pnpm cache
       with:

.nvmrc

@@ -1 +1 @@
-20.14
+20

app/package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"engines": {
-		"node": "=20.14"
+		"node": ">=20.11"
 	},
 	"scripts": {
 		"dev": "vite dev",

app/src/lib/components/Navigation.svelte

@@ -9,11 +9,9 @@
 	import { persisted } from '$lib/persisted/persisted';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import { getContext, getContextStoreBySymbol } from '$lib/utils/context';
-	import * as hotkeys from '$lib/utils/hotkeys';
-	import { unsubscribe } from '$lib/utils/unsubscribe';
+	import { createKeybind } from '$lib/utils/hotkeys';
 	import { platform } from '@tauri-apps/api/os';
 	import { from } from 'rxjs';
-	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 
 	const platformName = from(platform());
@@ -37,15 +35,15 @@
 		$isNavCollapsed = !$isNavCollapsed;
 	}
 
-	onMount(() =>
-		unsubscribe(
-			hotkeys.on('Meta+/', () => {
-				toggleNavCollapse();
-			})
-		)
-	);
+	const handleKeyDown = createKeybind({
+		'$mod+/': () => {
+			toggleNavCollapse();
+		}
+	});
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <aside class="navigation-wrapper" class:hide-fold-button={isScrollbarDragging}>
 	<div
 		class="resizer-wrapper"

app/src/lib/utils/hotkeys.ts

@@ -1,19 +1,30 @@
-import { tinykeys } from 'tinykeys';
+import { createKeybindingsHandler } from 'tinykeys';
 
-export function on(combo: string, callback: (event: KeyboardEvent) => void) {
-	const comboContainsControlKeys =
-		combo.includes('Meta') || combo.includes('Alt') || combo.includes('Ctrl');
+interface KeybindDefinitions {
+	[combo: string]: (event: KeyboardEvent) => void;
+}
 
-	return tinykeys(window, {
-		[combo]: (event) => {
-			const target = event.target as HTMLElement;
-			const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
-			if (isInput && !comboContainsControlKeys) return;
+export function createKeybind(keybinds: KeybindDefinitions) {
+	const keys: KeybindDefinitions = {
+		// Ignore backspace keydown events always
+		Backspace: () => {}
+	};
+
+	for (const [combo, callback] of Object.entries(keybinds)) {
+		keys[combo] = (event: KeyboardEvent) => {
+			if (
+				event.repeat ||
+				event.target instanceof HTMLInputElement ||
+				event.target instanceof HTMLTextAreaElement
+			) {
+				return;
+			}
 
 			event.preventDefault();
-			event.stopPropagation();
 
 			callback(event);
-		}
-	});
+		};
+	}
+
+	return createKeybindingsHandler(keys);
 }

app/src/routes/+layout.svelte

@@ -18,7 +18,7 @@
 	import { SETTINGS, loadUserSettings } from '$lib/settings/userSettings';
 	import { User, UserService } from '$lib/stores/user';
 	import * as events from '$lib/utils/events';
-	import * as hotkeys from '$lib/utils/hotkeys';
+	import { createKeybind } from '$lib/utils/hotkeys';
 	import { initTheme } from '$lib/utils/theme';
 	import { unsubscribe } from '$lib/utils/unsubscribe';
 	import { onMount, setContext } from 'svelte';
@@ -56,28 +56,37 @@
 	onMount(() => {
 		return unsubscribe(
 			events.on('goto', async (path: string) => await goto(path)),
-			events.on('openSendIssueModal', () => shareIssueModal?.show()),
-
-			// Zoom using cmd +, - and =
-			hotkeys.on('$mod+Equal', () => (zoom = Math.min(zoom + 0.0625, 3))),
-			hotkeys.on('$mod+Minus', () => (zoom = Math.max(zoom - 0.0625, 0.375))),
-			hotkeys.on('$mod+Digit0', () => (zoom = 1)),
-			hotkeys.on('Meta+T', () => {
-				userSettings.update((s) => ({
-					...s,
-					theme: $userSettings.theme === 'light' ? 'dark' : 'light'
-				}));
-			}),
-			hotkeys.on('Backspace', (e) => {
-				// This prevent backspace from navigating back
-				e.preventDefault();
-			}),
-			hotkeys.on('$mod+R', () => location.reload())
+			events.on('openSendIssueModal', () => shareIssueModal?.show())
 		);
 	});
+
+	const handleKeyDown = createKeybind({
+		'$mod+Equal': () => {
+			zoom = Math.min(zoom + 0.0625, 3);
+		},
+		'$mod+Minus': () => {
+			zoom = Math.max(zoom - 0.0625, 0.375);
+		},
+		'$mod+Digit0': () => {
+			zoom = 1;
+		},
+		'$mod+T': () => {
+			userSettings.update((s) => ({
+				...s,
+				theme: $userSettings.theme === 'light' ? 'dark' : 'light'
+			}));
+		},
+		'$mod+R': () => {
+			location.reload();
+		}
+	});
 </script>
 
-<svelte:window on:drop={(e) => e.preventDefault()} on:dragover={(e) => e.preventDefault()} />
+<svelte:window
+	on:keydown={handleKeyDown}
+	on:drop={(e) => e.preventDefault()}
+	on:dragover={(e) => e.preventDefault()}
+/>
 
 <div
 	data-tauri-drag-region

app/src/routes/[projectId]/+layout.svelte

@@ -11,7 +11,7 @@
 	import { HistoryService } from '$lib/history/history';
 	import { persisted } from '$lib/persisted/persisted';
 	import * as events from '$lib/utils/events';
-	import * as hotkeys from '$lib/utils/hotkeys';
+	import { createKeybind } from '$lib/utils/hotkeys';
 	import { unsubscribe } from '$lib/utils/unsubscribe';
 	import { BaseBranchService, NoDefaultTarget } from '$lib/vbranches/baseBranch';
 	import { BranchController } from '$lib/vbranches/branchController';
@@ -69,17 +69,17 @@
 			$showHistoryView = !$showHistoryView;
 		});
 
-		// TODO: Refactor somehow
-		const unsubscribeHotkeys = hotkeys.on('$mod+Shift+H', () => {
-			$showHistoryView = !$showHistoryView;
-		});
-
 		return async () => {
 			unsubscribe();
-			unsubscribeHotkeys();
 		};
 	});
 
+	const handleKeyDown = createKeybind({
+		'$mod+Shift+H': () => {
+			$showHistoryView = !$showHistoryView;
+		}
+	});
+
 	onMount(() => {
 		return unsubscribe(
 			events.on('openHistory', () => {
@@ -91,6 +91,8 @@
 	onDestroy(() => clearFetchInterval());
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <!-- forces components to be recreated when projectId changes -->
 {#key projectId}
 	<ProjectSettingsMenuAction />

package.json

@@ -2,7 +2,7 @@
 	"name": "git-butler-tauri",
 	"private": true,
 	"engines": {
-		"node": "=20.14"
+		"node": ">=20.11"
 	},
 	"scripts": {
 		"dev": "pnpm --filter @gitbutler/ui run dev",