feat: change icons

src/lib/assets/keymaps/ascii.yml

@@ -151,4 +151,3 @@ actions:
   127:
     id: "DEL"
     title: Delete
-    icon: delete_forever

src/lib/assets/keymaps/chara-chorder.yml

@@ -26,7 +26,7 @@ actions:
   536:
     id: "DUP"
     title: Repeat Last Note
-    icon: control_point_duplicate
+    icon: copy_all
     description: |
       In character entry, it repeats your last input.
       In chorded entry, it is used for words with repeating letters.

src/lib/assets/keymaps/keyboard.yml

@@ -4,9 +4,9 @@ icon: keyboard
 actions:
   512: &left_ctrl
     id: "LEFT_CTRL"
+    display: CTRL
     title: Control Keyboard Modifier
     variant: left
-    icon: keyboard_control_key
   513: &left_shift
     id: "LEFT_SHIFT"
     title: Shift Keyboard Modifier
@@ -14,14 +14,14 @@ actions:
     icon: shift
   514: &left_alt
     id: "LEFT_ALT"
+    display: ALT
     title: Alt Keyboard Modifier
     variant: left
-    icon: keyboard_option_key
   515: &left_gui
     id: "LEFT_GUI"
     title: GUI Keyboard Modifier
+    icon: apps
     variant: left
-    icon: keyboard_command_key
   516:
     variationOf: 512
     <<: *left_ctrl

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

@@ -2,6 +2,7 @@ export interface KeymapCategory {
   name: string
   description: string
   icon?: string
+  display?: string
   type?: "unassigned"
   actions: Record<number, Partial<ActionInfo>>
 }

src/lib/components/Action.svelte

@@ -31,7 +31,7 @@
     class:right={info.variant === "right"}
     use:title={{title: tooltip}}
   >
-    {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}
+    {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}
   </kbd>
 {:else if display === "inline-keys"}
   {#if !info.icon && info.id?.length === 1}
@@ -44,7 +44,7 @@
       class:icon={!!info.icon}
       use:title={{title: tooltip}}
     >
-      {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
+      {info.icon ?? info.display ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
     >
   {/if}
 {/if}

src/lib/components/layout/KeyText.svelte

@@ -24,7 +24,7 @@
 
 {#each positions as position, layer}
   {@const {action: actionId, isApplied} = $layout[layer][key.id] ?? {action: 0, isApplied: true}}
-  {@const {code, icon, id, title, keyCode, variant} = KEYMAP_CODES[actionId] ?? {code: actionId}}
+  {@const {code, icon, id, display, title, keyCode, variant} = KEYMAP_CODES[actionId] ?? {code: actionId}}
   {@const dynamicMapping = keyCode && $osLayout[JSON.stringify([keyCode])]}
   {@const tooltip =
     (title ?? id ?? `0x${code.toString(16)}`) +
@@ -53,7 +53,7 @@
     use:action={{title: tooltip}}
   >
     {#if code !== 0}
-      {dynamicMapping || icon || id || `0x${code.toString(16)}`}
+      {dynamicMapping || icon || display || id || `0x${code.toString(16)}`}
     {/if}
     {#if !isApplied}
       <tspan>•</tspan>

src/lib/os-layout.ts

@@ -34,6 +34,7 @@ export function runLayoutDetection() {
       })
     })
   }
-  window.addEventListener("keydown", keydown)
-  window.addEventListener("keyup", keyup)
+  // TODO: do we want this?
+  //window.addEventListener("keydown", keydown)
+  //window.addEventListener("keyup", keyup)
 }