Add keybinds

Author: jpenilla

web/src/lib/components/menu-bar/MenuBar.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
     import { MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
+    import { Keybinds } from "$lib/keybinds.svelte";
     import { Menubar, Button } from "bits-ui";
 
     const viewer = MultiFileDiffViewerState.get();
 </script>
 
+{#snippet keybind(key: string)}
+    <span class="text-em-med">{Keybinds.getModifierKey()}+{key}</span>
+{/snippet}
+
 <Menubar.Root class="flex border-b leading-none">
     <Menubar.Menu>
         <Menubar.Trigger class="btn-ghost px-2 py-1 text-sm font-medium data-[state=open]:btn-ghost-hover">diffs.dev</Menubar.Trigger>
@@ -45,12 +50,13 @@
                 </Menubar.Item>
                 <Menubar.Separator class="h-px w-full bg-edge" />
                 <Menubar.Item
-                    class="btn-ghost px-2 py-1"
+                    class="flex justify-between gap-2 btn-ghost px-2 py-1"
                     onSelect={() => {
-                        viewer.settingsDialogOpen = true;
+                        viewer.openSettingsDialog();
                     }}
                 >
                     Open Settings
+                    {@render keybind(",")}
                 </Menubar.Item>
             </Menubar.Content>
         </Menubar.Portal>
@@ -60,12 +66,13 @@
         <Menubar.Portal>
             <Menubar.Content class="border bg-neutral text-sm" align="start">
                 <Menubar.Item
-                    class="btn-ghost px-2 py-1"
+                    class="flex justify-between gap-2 btn-ghost px-2 py-1"
                     onSelect={() => {
-                        viewer.openDiffDialogOpen = true;
+                        viewer.openOpenDiffDialog();
                     }}
                 >
                     Open
+                    {@render keybind("O")}
                 </Menubar.Item>
             </Menubar.Content>
         </Menubar.Portal>

web/src/lib/diff-viewer.svelte.ts

@@ -17,6 +17,7 @@ import { VList } from "virtua/svelte";
 import { Context, Debounced, watch } from "runed";
 import { MediaQuery } from "svelte/reactivity";
 import { ProgressBarState } from "$lib/components/progress-bar/index.svelte";
+import { Keybinds } from "./keybinds.svelte";
 
 export const GITHUB_URL_PARAM = "github_url";
 export const PATCH_URL_PARAM = "patch_url";
@@ -241,6 +242,20 @@ export class MultiFileDiffViewerState {
     private constructor() {
         // Make sure to revoke object URLs when the component is destroyed
         onDestroy(() => this.clearImages());
+
+        const keybinds = new Keybinds();
+        keybinds.registerModifierBind("o", () => this.openOpenDiffDialog());
+        keybinds.registerModifierBind(",", () => this.openSettingsDialog());
+    }
+
+    openOpenDiffDialog() {
+        this.openDiffDialogOpen = true;
+        this.settingsDialogOpen = false;
+    }
+
+    openSettingsDialog() {
+        this.settingsDialogOpen = true;
+        this.openDiffDialogOpen = false;
     }
 
     filterFile(file: FileDetails): boolean {

web/src/lib/keybinds.svelte.ts

@@ -0,0 +1,31 @@
+import { onMount } from "svelte";
+import { on } from "svelte/events";
+
+export class Keybinds {
+    private static readonly IS_MAC = typeof navigator !== "undefined" && navigator.userAgent.includes("Mac");
+
+    static getModifierKey() {
+        return Keybinds.IS_MAC ? "⌘" : "Ctrl";
+    }
+
+    private readonly binds = new Map<string, () => void>();
+
+    constructor() {
+        onMount(() => {
+            return on(document, "keydown", (event) => {
+                const modifierPressed = Keybinds.IS_MAC ? event.metaKey : event.ctrlKey;
+                if (modifierPressed) {
+                    const bindAction = this.binds.get(event.key.toLowerCase());
+                    if (bindAction) {
+                        bindAction();
+                        event.preventDefault();
+                    }
+                }
+            });
+        });
+    }
+
+    registerModifierBind(key: string, action: () => void) {
+        this.binds.set(key.toLowerCase(), action);
+    }
+}