feat: use keycodes on CCX

resolves #71

src/lib/components/Action.svelte

@@ -66,6 +66,7 @@
   .dynamic {
     padding: 4px;
     border-radius: 1px;
+    min-width: 8px;
     background: var(--md-sys-color-surface-variant);
 
     &.inline {

src/lib/serial/keymap-codes.ts

@@ -20,6 +20,12 @@ export const KEYMAP_CODES: Record<number, KeyInfo> = Object.fromEntries(
   ),
 )
 
+export const KEYMAP_KEYCODES: Map<string, number> = new Map(
+  KEYMAP_CATEGORIES.flatMap(category =>
+    Object.entries(category.actions).map(([code, action]) => [action.keyCode!, Number(code)] as const),
+  ).filter(([keyCode]) => keyCode !== undefined),
+)
+
 export const KEYMAP_IDS: Map<string, KeyInfo> = new Map(
   KEYMAP_CATEGORIES.flatMap(category =>
     Object.entries(category.actions).map(

src/routes/config/chords/ChordActionEdit.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import {KEYMAP_IDS} from "$lib/serial/keymap-codes"
   import type {ChordInfo} from "$lib/undo-redo"
   import {changes, ChangeType} from "$lib/undo-redo"
   import {createEventDispatcher} from "svelte"
   import LL from "../../../i18n/i18n-svelte"
   import ActionString from "$lib/components/ActionString.svelte"
   import {selectAction} from "./action-selector"
+  import {serialPort} from "$lib/serial/connection"
+  import {get} from "svelte/store"
+  import {inputToAction} from "./input-converter"
 
   export let chord: ChordInfo | undefined = undefined
 
@@ -26,7 +28,7 @@
   function keydown(event: KeyboardEvent) {
     if (!editing) return
     event.preventDefault()
-    pressedKeys.add(KEYMAP_IDS.get(event.key)!.code)
+    pressedKeys.add(inputToAction(event, get(serialPort)?.device === "X")!)
     pressedKeys = pressedKeys
   }
 

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -7,6 +7,9 @@
   import {scale} from "svelte/transition"
   import ActionString from "$lib/components/ActionString.svelte"
   import {selectAction} from "./action-selector"
+  import {inputToAction} from "./input-converter"
+  import {serialPort} from "$lib/serial/connection"
+  import {get} from "svelte/store"
 
   export let chord: ChordInfo
 
@@ -22,14 +25,14 @@
       moveCursor(cursorPosition - 1)
     } else if (event.key === "Delete") {
       deleteAction(cursorPosition)
-    } else if (KEYMAP_IDS.has(event.key)) {
+    } else {
-      insertAction(cursorPosition, KEYMAP_IDS.get(event.key)!.code)
+      const action = inputToAction(event, get(serialPort)?.device === "X")
-      tick().then(() => moveCursor(cursorPosition + 1))
+      if (action !== undefined) {
-    } else if (specialKeycodes.has(event.key)) {
+        insertAction(cursorPosition, action)
-      insertAction(cursorPosition, specialKeycodes.get(event.key)!)
         tick().then(() => moveCursor(cursorPosition + 1))
       }
     }
+  }
 
   function moveCursor(to: number) {
     cursorPosition = Math.max(0, Math.min(to, chord.phrase.length))

src/routes/config/chords/input-converter.ts

@@ -0,0 +1,9 @@
+import {KEYMAP_IDS, KEYMAP_KEYCODES, specialKeycodes} from "$lib/serial/keymap-codes"
+
+export function inputToAction(event: KeyboardEvent, useKeycodes?: boolean): number | undefined {
+  if (useKeycodes) {
+    return KEYMAP_KEYCODES.get(event.code)
+  } else {
+    return KEYMAP_IDS.get(event.key)?.code ?? specialKeycodes.get(event.key)
+  }
+}