fix: hotkeys

fixes #20

package-lock.json

@@ -34,7 +34,6 @@
         "flexsearch": "^0.7.43",
         "fontkit": "^2.0.2",
         "glob": "^10.3.12",
-        "hotkeys-js": "^3.13.7",
         "jsdom": "^22.1.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^3.2.5",
@@ -6216,15 +6215,6 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
-    "node_modules/hotkeys-js": {
-      "version": "3.13.7",
-      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.7.tgz",
-      "integrity": "sha512-ygFIdTqqwG4fFP7kkiYlvayZppeIQX2aPpirsngkv1xM1lP0piDY5QEh68nQnIKvz64hfocxhBaD/uK3sSK1yQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://jaywcjlove.github.io/#/sponsor"
-      }
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",

package.json

@@ -55,7 +55,6 @@
     "flexsearch": "^0.7.43",
     "fontkit": "^2.0.2",
     "glob": "^10.3.12",
-    "hotkeys-js": "^3.13.7",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",

src/lib/components/layout/ActionSelector.svelte

@@ -40,9 +40,7 @@
   }
 
   function keyboardNavigation(event: KeyboardEvent) {
-    if (event.key === "Escape") {
+    if (event.shiftKey && event.key === "Enter") {
-      dispatch("close");
-    } else 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}
+  {#if device}
-    <fieldset transition:fade>
+    {#await layouts[device]() then visualLayout}
-      {#each layers as [title, icon, value]}
+      <fieldset transition:fade>
-        <button
+        {#each layers as [title, icon, value]}
-          class="icon"
+          <button
-          use:action={{ title, shortcut: `alt+${value + 1}` }}
+            class="icon"
-          on:click={() => ($activeLayer = value)}
+            use:action={{ title, shortcut: `alt+${value + 1}` }}
-          class:active={$activeLayer === value}
+            on:click={() => ($activeLayer = value)}
-        >
+            class:active={$activeLayer === value}
-          {icon}
+          >
-        </button>
+            {icon}
-      {/each}
+          </button>
-    </fieldset>
+        {/each}
+      </fieldset>
 
-    <GenericLayout {visualLayout} />
+      <GenericLayout {visualLayout} />
-  {/await}
+    {/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) {
+    hotkeys.set(shortcut, node);
-      keyboardEvent.preventDefault();
-      node.click();
-    });
   }
 
   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 -->
-    <!-- fixes some unresponsiveness -->
+  {#await tick() then}
-    {#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>
-  </div>
+    <textarea
-  <textarea
+      placeholder={$LL.configure.chords.TRY_TYPING() +
-    placeholder={$LL.configure.chords.TRY_TYPING() +
+        "\n\nDid you know? " +
-      "\n\nDid you know? " +
+        randomTips[Math.floor(randomTips.length * Math.random())]}
-      randomTips[Math.floor(randomTips.length * Math.random())]}
+    ></textarea>
-  ></textarea>
+  {/await}
 </section>
 
 <style lang="scss">