feat: new blocking progress bar, fixes #18

feat: change cloud icon to history, fixes #15
fix: action search items overlap, fixes #16
feat: show tooltips immediately

src/routes/config/chords/ChordActionEdit.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import {KEYMAP_CODES, KEYMAP_IDS} from "$lib/serial/keymap-codes"
+  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"
 
   export let chord: ChordInfo | undefined = undefined
 
@@ -33,7 +34,7 @@
       changes.push({
         type: ChangeType.Chord,
         id: chord!.id,
-        actions: [...pressedKeys],
+        actions: [...pressedKeys].sort(),
         phrase: chord!.phrase,
       })
       return changes
@@ -53,12 +54,7 @@
   {:else if !editing && !chord}
     <span>{$LL.configure.chords.NEW_CHORD()}</span>
   {/if}
-  {#each editing ? [...pressedKeys].sort() : chord?.actions ?? [] as actionId}
-    {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
-    <kbd class:icon={!!icon}>
-      {icon ?? id ?? `0x${code.toString(16)}`}
-    </kbd>
-  {/each}
+  <ActionString display="keys" actions={editing ? [...pressedKeys].sort() : chord?.actions ?? []} />
   <sup>•</sup>
 </button>
 
@@ -87,12 +83,6 @@
     }
   }
 
-  kbd {
-    height: 24px;
-    padding-block: auto;
-    transition: color 250ms ease;
-  }
-
   button::after {
     content: "";
 

src/routes/config/chords/ChordPhraseEdit.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import {KEYMAP_CODES, KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
+  import {KEYMAP_IDS, specialKeycodes} from "$lib/serial/keymap-codes"
   import {tick} from "svelte"
   import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
   import {changes, ChangeType} from "$lib/undo-redo"
   import type {ChordInfo} from "$lib/undo-redo"
   import {scale} from "svelte/transition"
+  import ActionString from "$lib/components/ActionString.svelte"
 
   export let chord: ChordInfo
 
@@ -149,14 +150,7 @@
     <div />
     <!-- placeholder for cursor placement -->
   {/if}
-  {#each chord.phrase as actionId, i (`${actionId}:${i}`)}
-    {@const {icon, id, code} = KEYMAP_CODES[actionId] ?? {code: actionId}}
-    {#if !icon && id?.length === 1}
-      <span>{id}</span>
-    {:else}
-      <kbd class:icon={!!icon}>{icon ?? id ?? `0x${code.toString(16)}`}</kbd>
-    {/if}
-  {/each}
+  <ActionString actions={chord.phrase} />
   <sup>•</sup>
 </div>
 
@@ -203,14 +197,6 @@
     }
   }
 
-  :not(.cursor) + kbd {
-    margin-inline-start: 2px;
-  }
-
-  kbd + * {
-    margin-inline-start: 2px;
-  }
-
   [role="textbox"] {
     cursor: text;