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/lib/components/Action.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import type {KeyInfo} from "$lib/serial/keymap-codes"
+
+  export let action: number | KeyInfo
+  export let display: "inline-keys" | "keys" = "inline-keys"
+
+  $: info = typeof action === "number" ? KEYMAP_CODES[action] ?? {code: action} : action
+</script>
+
+{#if display === "keys"}
+  <kbd class:icon={!!info.icon}>
+    {info.icon ?? info.id ?? `0x${info.code.toString(16)}`}
+  </kbd>
+{:else if display === "inline-keys"}
+  {#if !info.icon && info.id?.length === 1}
+    <span>{info.id}</span>
+  {:else}
+    <kbd class="inline-kbd" class:icon={!!info.icon}
+      >{info.icon ?? info.id ?? `0x${info.code.toString(16)}`}</kbd
+    >
+  {/if}
+{/if}
+
+<style lang="scss">
+  kbd:not(.inline-kbd) {
+    height: 24px;
+    padding-block: auto;
+    transition: color 250ms ease;
+  }
+
+  .inline-kbd {
+    margin-inline-end: 2px;
+  }
+
+  :global(span) + .inline-kbd {
+    margin-inline-start: 2px;
+  }
+</style>

src/lib/components/ActionListItem.svelte

@@ -35,6 +35,7 @@
     align-items: center;
 
     width: 100%;
+    height: auto;
     margin: 0;
     padding: 8px;
 
@@ -61,4 +62,8 @@
 
     text-align: start;
   }
+
+  kbd {
+    height: 24px;
+  }
 </style>

src/lib/components/ActionString.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Action from "$lib/components/Action.svelte"
+  import type {KeyInfo} from "$lib/serial/keymap-codes"
+
+  export let actions: Array<number | KeyInfo>
+  export let display: "keys" | "inline-keys" = "inline-keys"
+</script>
+
+{#each actions as action, i (`${typeof action === "number" ? action : action.code}:${i}`)}
+  <Action {action} {display} />
+{/each}

src/lib/components/action-extension.ts

@@ -1,8 +0,0 @@
-import {Extension, Node} from "@tiptap/core"
-
-const CharaAction = Node.create({
-  name: "Action",
-  renderHTML({HTMLAttributes}) {
-    return ["kbd", HTMLAttributes, 0]
-  },
-})