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);
+      }
     },
   };
 };