fix: hotkeys

fixes #20

src/routes/+layout.svelte

@@ -25,10 +25,12 @@
   import { detectLocale } from "../i18n/i18n-util";
   import type { Locales } from "../i18n/i18n-types";
   import Footer from "./Footer.svelte";
-  import { runLayoutDetection } from "$lib/os-layout.js";
+  import { osLayout, runLayoutDetection } from "$lib/os-layout.js";
   import PageTransition from "./PageTransition.svelte";
   import { restoreFromFile } from "$lib/backup/backup";
   import { goto } from "$app/navigation";
+  import { hotkeys } from "$lib/title";
+  import { KEYMAP_CODES, KEYMAP_KEYCODES } from "$lib/serial/keymap-codes";
 
   const locale =
     ((browser && localStorage.getItem("locale")) as Locales) || detectLocale();
@@ -79,6 +81,31 @@
   });
 
   let webManifestLink = "";
+
+  function handleHotkey(event: KeyboardEvent) {
+    let key = $osLayout.get(event.code);
+    if (!key && event.code === "Escape") key = "esc";
+    if (!key && event.code === "ArrowLeft") key = "left";
+    if (!key && event.code === "ArrowRight") key = "right";
+    if (!key && event.code === "ArrowUp") key = "up";
+    if (!key && event.code === "ArrowDown") key = "down";
+
+    if (!key) return;
+    const str = [
+      event.ctrlKey ? "ctrl" : undefined,
+      event.shiftKey ? "shift" : undefined,
+      event.altKey ? "alt" : undefined,
+      key,
+    ]
+      .filter((it) => !!it)
+      .join("+");
+
+    const node = hotkeys.get(str);
+    if (node) {
+      event.preventDefault();
+      node.click();
+    }
+  }
 </script>
 
 <svelte:head>
@@ -88,6 +115,8 @@
   <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
+<svelte:window on:keydown={handleHotkey} />
+
 <Navigation />
 
 <!-- <PickChangesDialog /> -->