fix: hotkeys

fixes #20

src/lib/components/layout/ActionSelector.svelte

@@ -40,9 +40,7 @@
   }
 
   function keyboardNavigation(event: KeyboardEvent) {
-    if (event.key === "Escape") {
-      dispatch("close");
-    } else if (event.shiftKey && event.key === "Enter") {
+    if (event.shiftKey && event.key === "Enter") {
       dispatch("select", exact);
     } else if (event.key === "ArrowDown") {
       const element =

src/lib/components/layout/Layout.svelte

@@ -7,7 +7,7 @@
   import type { VisualLayout } from "$lib/serialization/visual-layout";
   import { fade } from "svelte/transition";
 
-  $: device = $serialPort?.device ?? "ONE";
+  $: device = $serialPort?.device;
   const activeLayer = getContext<Writable<number>>("active-layer");
 
   const layers = [
@@ -33,22 +33,24 @@
 </script>
 
 <div class="container">
-  {#await layouts[device]() then visualLayout}
-    <fieldset transition:fade>
-      {#each layers as [title, icon, value]}
-        <button
-          class="icon"
-          use:action={{ title, shortcut: `alt+${value + 1}` }}
-          on:click={() => ($activeLayer = value)}
-          class:active={$activeLayer === value}
-        >
-          {icon}
-        </button>
-      {/each}
-    </fieldset>
+  {#if device}
+    {#await layouts[device]() then visualLayout}
+      <fieldset transition:fade>
+        {#each layers as [title, icon, value]}
+          <button
+            class="icon"
+            use:action={{ title, shortcut: `alt+${value + 1}` }}
+            on:click={() => ($activeLayer = value)}
+            class:active={$activeLayer === value}
+          >
+            {icon}
+          </button>
+        {/each}
+      </fieldset>
 
-    <GenericLayout {visualLayout} />
-  {/await}
+      <GenericLayout {visualLayout} />
+    {/await}
+  {/if}
 </div>
 
 <style lang="scss">

src/lib/title.ts

@@ -2,7 +2,8 @@ import type { Action } from "svelte/action";
 import tippy from "tippy.js";
 import type { SvelteComponent } from "svelte";
 import Tooltip from "$lib/components/Tooltip.svelte";
-import hotkeys from "hotkeys-js";
+
+export const hotkeys = new Map<string, HTMLElement>();
 
 export const action: Action<Element, { title?: string; shortcut?: string }> = (
   node: Element,
@@ -26,20 +27,15 @@ export const action: Action<Element, { title?: string; shortcut?: string }> = (
   });
 
   if (shortcut && node instanceof HTMLElement) {
-    hotkeys(shortcut, function (keyboardEvent) {
-      keyboardEvent.preventDefault();
-      node.click();
-    });
+    hotkeys.set(shortcut, node);
   }
 
   return {
-    update(updated) {
-      title = updated.title;
-      shortcut = updated.shortcut;
-    },
     destroy() {
       tooltip.destroy();
-      hotkeys.unbind(shortcut);
+      if (shortcut && node instanceof HTMLElement) {
+        hotkeys.delete(shortcut);
+      }
     },
   };
 };

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