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 /> -->

src/routes/Footer.svelte

@@ -65,7 +65,7 @@
   </div>
   <ul>
     <li>
-      <a href={import.meta.VITE_STORE_URL} rel="noreferrer" target="_blank"
+      <a href={import.meta.env.VITE_STORE_URL} rel="noreferrer" target="_blank"
         ><span class="icon">shopping_bag</span> Store</a
       >
     </li>

src/routes/config/chords/+page.svelte

@@ -156,9 +156,9 @@
 </div>
 
 <section bind:this={results}>
-  <div class="results">
-    <!-- fixes some unresponsiveness -->
-    {#await tick() then}
+  <!-- fixes some unresponsiveness -->
+  {#await tick() then}
+    <div class="results">
       <table transition:fly={{ y: 48, easing: expoOut }}>
         {#if $lastPage !== -1}
           {#if page === 0}
@@ -181,13 +181,13 @@
           <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
         {/if}
       </table>
-    {/await}
-  </div>
-  <textarea
-    placeholder={$LL.configure.chords.TRY_TYPING() +
-      "\n\nDid you know? " +
-      randomTips[Math.floor(randomTips.length * Math.random())]}
-  ></textarea>
+    </div>
+    <textarea
+      placeholder={$LL.configure.chords.TRY_TYPING() +
+        "\n\nDid you know? " +
+        randomTips[Math.floor(randomTips.length * Math.random())]}
+    ></textarea>
+  {/await}
 </section>
 
 <style lang="scss">