feat: dynamic keymap prototype

src/lib/components/Action.svelte

@@ -2,14 +2,23 @@
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
   import {action as title} from "$lib/title"
+  import {osLayout} from "$lib/os-layout"
+  import LL from "../../i18n/i18n-svelte"
 
   export let action: number | KeyInfo
   export let display: "inline-keys" | "keys" = "inline-keys"
 
   $: info = typeof action === "number" ? KEYMAP_CODES[action] ?? {code: action} : action
+  $: dynamicMapping = info.keyCode && $osLayout[JSON.stringify([info.keyCode])]
 </script>
 
-{#if display === "keys"}
+{#if dynamicMapping}
+  <span
+    use:title={{title: $LL.actionSearch.LIVE_LAYOUT_INFO()}}
+    class="dynamic"
+    class:inline={display === "inline-keys"}>{dynamicMapping}</span
+  >
+{:else if display === "keys"}
   <kbd class:icon={!!info.icon} use:title={{title: info.title ?? info.id}}>
     {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}
   </kbd>
@@ -30,6 +39,16 @@
     transition: color 250ms ease;
   }
 
+  .dynamic {
+    padding: 4px;
+    border-radius: 1px;
+    background: var(--md-sys-color-surface-variant);
+
+    &.inline {
+      padding: 0px;
+    }
+  }
+
   .inline-kbd {
     margin-inline-end: 2px;
   }