feat: dynamic keymap prototype

src/i18n/de/index.ts

@@ -30,6 +30,7 @@ const de = {
     filter: {
       ALL: "Alle",
     },
+    LIVE_LAYOUT_INFO: "Diese Aktion wurde auf Basis des Systemtastaturlayouts ermittelt.",
     SHIFT_WARNING: "Diese Aktion hält <kbd class='icon'>shift</kbd>",
     ALT_CODE_WARNING: "Dieser Alt-Code Hack funktioniert nur unter Windows",
   },

src/i18n/en/index.ts

@@ -29,6 +29,7 @@ const en = {
     filter: {
       ALL: "All",
     },
+    LIVE_LAYOUT_INFO: "This output was determined using on your system layout.",
     SHIFT_WARNING: "This action holds <kbd class='icon'>shift</kbd>",
     ALT_CODE_WARNING: "This alt-code hack only works on Windows",
   },

src/lib/assets/keymaps/keymap.d.ts

@@ -13,4 +13,5 @@ export interface ActionInfo {
   description: string
   variant: "left" | "right"
   variantOf: number
+  keyCode: string
 }

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;
   }

src/lib/components/ActionListItem.svelte

@@ -2,6 +2,7 @@
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
   import LL from "../../i18n/i18n-svelte"
+  import Action from "$lib/components/Action.svelte"
 
   export let id: number | KeyInfo
 
@@ -29,7 +30,7 @@
         <span class="warning">{@html $LL.actionSearch.ALT_CODE_WARNING()}</span>
       {/if}
     </div>
-    <kbd class:icon={!!key.icon}>{key.icon || key.id || `0x${key.code.toString(16)}`}</kbd>
+    <Action display="keys" action={key} />
   {:else}
     <span class="key">0x{key.toString(16)}</span>
   {/if}