feat: show info about key in chord manager and layout, resolves #51, resolves #52

src/lib/components/Action.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
+  import {action as title} from "$lib/title"
 
   export let action: number | KeyInfo
   export let display: "inline-keys" | "keys" = "inline-keys"
@@ -9,15 +10,15 @@
 </script>
 
 {#if display === "keys"}
-  <kbd class:icon={!!info.icon}>
+  <kbd class:icon={!!info.icon} use:title={{title: info.title ?? info.id}}>
     {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}
   </kbd>
 {:else if display === "inline-keys"}
   {#if !info.icon && info.id?.length === 1}
     <span>{info.id}</span>
   {:else}
-    <kbd class="inline-kbd" class:icon={!!info.icon}
+    <kbd class="inline-kbd" class:icon={!!info.icon} use:title={{title: info.title ?? info.id}}>
-      >{info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
+      {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
     >
   {/if}
 {/if}

src/lib/components/layout/KeyText.svelte

@@ -5,6 +5,7 @@
   import type {CompiledLayoutKey} from "$lib/serialization/visual-layout"
   import {layout} from "$lib/undo-redo.js"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import {action} from "$lib/title"
 
   const {fontSize, margin, inactiveOpacity, inactiveScale, iconFontSize} =
     getContext<VisualLayoutConfig>("visual-layout-config")
@@ -22,7 +23,7 @@
 
 {#each positions as position, layer}
   {@const {action: actionId, isApplied} = $layout[layer][key.id] ?? {action: 0, isApplied: true}}
-  {@const {code, icon, id} = KEYMAP_CODES[actionId] ?? {code: actionId}}
+  {@const {code, icon, id, title} = KEYMAP_CODES[actionId] ?? {code: actionId}}
   {@const isActive = layer === $activeLayer}
   {@const direction = [(middle[0] - margin * 3) / position[0], (middle[1] - margin * 3) / position[1]]}
   <text
@@ -38,6 +39,7 @@
     style:scale={isActive ? 1 : inactiveScale}
     style:translate={isActive ? "0 0 0" : `${direction[0]}px ${direction[1]}px 0`}
     style:rotate="{rotate}deg"
+    use:action={{title: title ?? id}}
   >
     {#if code !== 0}
       {icon || id || `0x${code.toString(16)}`}

src/lib/title.ts

@@ -1,12 +1,12 @@
-import type { Action } from "svelte/action"
+import type {Action} from "svelte/action"
 import tippy from "tippy.js"
-import type { SvelteComponent } from "svelte"
+import type {SvelteComponent} from "svelte"
 import Tooltip from "$lib/components/Tooltip.svelte"
 import hotkeys from "hotkeys-js"
 
-export const action: Action<HTMLElement, { title?: string; shortcut?: string }> = (
+export const action: Action<Element, {title?: string; shortcut?: string}> = (
-  node: HTMLElement,
+  node: Element,
-  { title, shortcut },
+  {title, shortcut},
 ) => {
   let component: SvelteComponent | undefined
   const tooltip = tippy(node, {
@@ -15,8 +15,8 @@ export const action: Action<HTMLElement, { title?: string; shortcut?: string }>
     animation: "fade",
     onShow(instance) {
       component ??= new Tooltip({
-        target: instance.popper.querySelector(".tippy-content") as HTMLElement,
+        target: instance.popper.querySelector(".tippy-content") as Element,
-        props: { title, shortcut },
+        props: {title, shortcut},
       })
     },
     onHidden() {
@@ -25,8 +25,8 @@ export const action: Action<HTMLElement, { title?: string; shortcut?: string }>
     },
   })
 
-  if (shortcut) {
+  if (shortcut && node instanceof HTMLElement) {
-    hotkeys(shortcut, function(keyboardEvent) {
+    hotkeys(shortcut, function (keyboardEvent) {
       keyboardEvent.preventDefault()
       node.click()
     })