feat: new chord editor prototype

src/lib/chord-editor/action-plugin.ts

@@ -0,0 +1,103 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { mount, unmount } from "svelte";
+import Action from "$lib/components/Action.svelte";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+
+export class ActionWidget extends WidgetType {
+  component: {};
+  element: HTMLElement;
+
+  constructor(readonly id: string | number) {
+    super();
+    this.id = id;
+    this.element = document.createElement("span");
+    this.element.style.paddingInline = "2px";
+
+    this.component = mount(Action, {
+      target: this.element,
+      props: { action: id, display: "keys" },
+    });
+  }
+
+  override eq(other: ActionWidget) {
+    return this.id == other.id;
+  }
+
+  toDOM() {
+    return this.element;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override destroy() {
+    unmount(this.component);
+  }
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "ExplicitAction") return;
+        const value =
+          node.node.getChild("ActionId") ??
+          node.node.getChild("HexNumber") ??
+          node.node.getChild("DecimalNumber");
+        if (!value) return;
+        if (!node.node.getChild("ExplicitDelimEnd")) {
+          return;
+        }
+
+        const id = view.state.doc.sliceString(value.from, value.to);
+        let deco = Decoration.replace({
+          widget: new ActionWidget(
+            value.name === "ActionId" ? id : parseInt(id),
+          ),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const actionPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+  },
+);

src/lib/chord-editor/action-serializer.ts

@@ -0,0 +1,16 @@
+import { KEYMAP_CODES, type KeyInfo } from "$lib/serial/keymap-codes";
+import { get } from "svelte/store";
+
+export function canUseIdAsString(info: KeyInfo): boolean {
+  return !!info.id && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(info.id);
+}
+
+export function actionToValue(action: number | KeyInfo) {
+  const info =
+    typeof action === "number" ? get(KEYMAP_CODES).get(action) : action;
+  if (info && info.id?.length === 1)
+    return /^[<>\\\s]$/.test(info.id) ? `\\${info.id}` : info.id;
+  if (!info || !canUseIdAsString(info))
+    return `<0x${(info?.code ?? action).toString(16).padStart(2, "0")}>`;
+  return `<${info.id}>`;
+}

src/lib/chord-editor/autocomplete.ts

@@ -0,0 +1,72 @@
+import { KEYMAP_CATEGORIES, KEYMAP_CODES } from "$lib/serial/keymap-codes";
+import type {
+  Completion,
+  CompletionSection,
+  CompletionSource,
+} from "@codemirror/autocomplete";
+import { derived, get } from "svelte/store";
+import { actionToValue, canUseIdAsString } from "./action-serializer";
+
+const completionSections = derived(
+  KEYMAP_CATEGORIES,
+  (categories) =>
+    new Map(
+      categories.map(
+        (category) =>
+          [
+            category,
+            {
+              name: category.name,
+            } satisfies CompletionSection,
+          ] as const,
+      ),
+    ),
+);
+
+export const actionAutocompleteItems = derived(
+  [KEYMAP_CODES, completionSections],
+  ([codes, sections]) =>
+    codes
+      .values()
+      .map((info) => {
+        const canUseId = canUseIdAsString(info);
+        const completionValue =
+          (canUseId && info.id) ||
+          `0x${info.code.toString(16).padStart(2, "0")}`;
+        return {
+          label:
+            [
+              canUseId || !info.id ? undefined : `"${info.id}"`,
+              info.title,
+              info.variant?.replace(/^[a-z]/g, (c) => c.toUpperCase()),
+            ]
+              .filter(Boolean)
+              .join(" ") || completionValue,
+          detail: actionToValue(info),
+          section: info.category ? sections.get(info.category) : undefined,
+          info: info.description,
+          type: "keyword",
+          apply: completionValue + ">",
+        } satisfies Completion;
+      })
+      .filter(
+        (item) => typeof item.label === "string" && item.apply !== undefined,
+      )
+      .toArray(),
+);
+
+export const actionAutocomplete = ((context) => {
+  let word = context.tokenBefore([
+    "ExplicitDelimStart",
+    "ActionId",
+    "HexNumber",
+    "DecimalNumber",
+  ]);
+  if (!word) return null;
+  console.log(get(actionAutocompleteItems));
+  return {
+    from: word.type.name === "ExplicitDelimStart" ? word.to : word.from,
+    validFor: /^<?[a-zA-Z0-9_]*$/,
+    options: get(actionAutocompleteItems),
+  };
+}) satisfies CompletionSource;

src/lib/chord-editor/changes-plugin.ts

@@ -0,0 +1,17 @@
+import {
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  type PluginValue,
+} from "@codemirror/view";
+
+export const changesPlugin = ViewPlugin.fromClass(
+  class implements PluginValue {
+    constructor(readonly view: EditorView) {}
+
+    update(update: ViewUpdate) {}
+  },
+  {
+    eventHandlers: {},
+  },
+);

src/lib/chord-editor/chord-delim-plugin.ts

@@ -0,0 +1,80 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+
+export class DelimWidget extends WidgetType {
+  constructor() {
+    super();
+  }
+
+  override eq(other: DelimWidget) {
+    return true;
+  }
+
+  toDOM() {
+    const element = document.createElement("span");
+    element.innerHTML = " ⇛ ";
+    element.style.scale = "1.8";
+    element.style.opacity = "0.5";
+    return element;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+
+  override destroy() {}
+}
+
+function actionWidgets(view: EditorView) {
+  const widgets: Range<Decoration>[] = [];
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name !== "PhraseDelim") return;
+        let deco = Decoration.replace({
+          widget: new DelimWidget(),
+        });
+        widgets.push(deco.range(node.from, node.to));
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export const delimPlugin = ViewPlugin.fromClass(
+  class {
+    decorations = Decoration.none;
+
+    constructor(view: EditorView) {
+      this.decorations = actionWidgets(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.startState) != syntaxTree(update.state)
+      )
+        this.decorations = actionWidgets(update.view);
+    }
+  },
+  {
+    decorations(instance) {
+      return instance.decorations;
+    },
+    provide(plugin) {
+      return EditorView.atomicRanges.of(
+        (view) => view.plugin(plugin)?.decorations ?? Decoration.none,
+      );
+    },
+  },
+);

src/lib/chord-editor/chords-grammar-plugin.ts

@@ -0,0 +1,57 @@
+import { parser } from "./chords.grammar";
+import {
+  LRLanguage,
+  LanguageSupport,
+  HighlightStyle,
+} from "@codemirror/language";
+import { styleTags, tags } from "@lezer/highlight";
+import { actionAutocomplete } from "./autocomplete";
+
+export const chordHighlightStyle = HighlightStyle.define([
+  {
+    tag: tags.keyword,
+    paddingInline: "2px",
+    opacity: "0.5",
+  },
+  {
+    tag: tags.className,
+    backgroundColor:
+      "color-mix(in srgb, var(--md-sys-color-surface-variant) 50%, transparent)",
+    borderRadius: "4px",
+    paddingInline: "4px",
+    marginInline: "-4px",
+  },
+  {
+    tag: tags.integer,
+    color: "var(--md-sys-color-tertiary)",
+  },
+  {
+    tag: tags.angleBracket,
+    opacity: "0.5",
+  },
+  { tag: tags.modifier, opacity: "0.25" },
+  { tag: tags.escape, color: "var(--md-sys-color-primary)" },
+  { tag: tags.strong, fontWeight: "bold" },
+]);
+
+export const chordLanguage = LRLanguage.define({
+  name: "chords",
+  parser: parser.configure({
+    props: [
+      styleTags({
+        "PhraseDelim CompoundDelim": [tags.keyword, tags.strong],
+        "HexNumber DecimalNumber": [tags.className, tags.integer],
+        "ExplicitDelimStart ExplicitDelimEnd": tags.angleBracket,
+        ActionId: tags.className,
+        EscapedLetter: tags.escape,
+        Escape: [tags.escape, tags.modifier],
+      }),
+    ],
+  }),
+});
+
+export function chordLanguageSupport() {
+  return new LanguageSupport(chordLanguage, [
+    chordLanguage.data.of({ autocomplete: actionAutocomplete }),
+  ]);
+}

src/lib/chord-editor/chords.grammar

@@ -0,0 +1,27 @@
+@top Program { Chord* }
+
+ExplicitAction { ExplicitDelimStart (HexNumber | DecimalNumber | ActionId) ExplicitDelimEnd }
+EscapedSingleAction { Escape EscapedLetter }
+Action { SingleLetter | ExplicitAction | EscapedSingleAction }
+ActionString { Action* }
+ChordInput { (ActionString CompoundDelim)* ActionString }
+ChordPhrase { ActionString }
+Chord { ChordInput PhraseDelim ChordPhrase ChordDelim }
+
+@tokens {
+  @precedence {HexNumber, DecimalNumber}
+  @precedence {CompoundDelim, PhraseDelim, ExplicitDelimStart, ChordDelim, SingleLetter}
+  @precedence {EscapedLetter}
+  ExplicitDelimStart {"<"}
+  ExplicitDelimEnd {">"}
+  CompoundDelim {"+>"}
+  PhraseDelim {"=>"}
+  Escape { "\\" }
+  HexNumber { "0x" $[a-fA-F0-9]+ }
+  DecimalNumber { $[0-9]+ }
+  ActionId { $[a-zA-Z_]$[a-zA-Z0-9_]* }
+  SingleLetter { ![\\] }
+  EscapedLetter { ![] }
+  ChordDelim { ($[\n] | @eof) }
+}
+

src/lib/chord-editor/grammar.d.ts

@@ -0,0 +1,3 @@
+declare module "*.grammar" {
+  export const parser: import("@lezer/lr").LRParser;
+}

src/lib/chord-editor/test.txt

@@ -0,0 +1,16 @@
+.=<LEFT_SHIFT> => =>
+;ims => <0x219><IMPULSE>
+-;<KSC_2C><LEFT_SHIFT> => <0x23e>_<0x23e>
+.;g => <0x23e>...<0x23e><LH_THUMB_3_3D>
+'dg => <0x23e>'<0x23e>
+'gl => <0x23e>'ll<0x23e>
+'ar => <0x23e>'re<0x23e>
+'gs => <0x23e>'s<0x23e>
+'ev => <0x23e>'ve<0x23e>
+<SPACE>-; => <0x23e><0x223>-<0x223><KSC_00>
+<SPACE>;<LEFT_SHIFT> => <0x23e><0x223><0x23d><0x223><KSC_00>
+<SPACE>;g => <0x23e><0x223><SPACE><0x223><KSC_00>
+deg => <0x23e>ed<0x23e>
+;gr => <0x23e>er<0x23e>
+;es => <0x23e>es<0x23e>
+;est => <0x23e>est<0x23e>

src/lib/components/Action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { KEYMAP_CODES } from "$lib/serial/keymap-codes";
+  import { KEYMAP_CODES, KEYMAP_IDS } from "$lib/serial/keymap-codes";
   import type { KeyInfo } from "$lib/serial/keymap-codes";
   import { osLayout } from "$lib/os-layout";
   import { tooltip } from "$lib/hover-popover";
@@ -9,33 +9,54 @@
   let {
     action,
     display,
-  }: { action: number | KeyInfo; display: "inline-keys" | "keys" | "verbose" } =
-    $props();
+  }: {
+    action: string | number | KeyInfo;
+    display: "inline-text" | "inline-keys" | "keys" | "verbose";
+  } = $props();
 
-  let info = $derived(
+  let retrievedInfo = $derived(
     typeof action === "number"
-      ? ($KEYMAP_CODES.get(action) ?? { code: action })
-      : action,
+      ? $KEYMAP_CODES.get(action)
+      : typeof action === "string"
+        ? $KEYMAP_IDS.get(action)
+        : action,
+  );
+  let info = $derived(
+    retrievedInfo ??
+      (typeof action === "number"
+        ? ({ code: action } satisfies KeyInfo)
+        : typeof action === "string"
+          ? ({ code: 1024, id: action } satisfies KeyInfo)
+          : action),
   );
   let dynamicMapping = $derived(info.keyCode && $osLayout.get(info.keyCode));
-  let hasPopover = $derived(!info.id || info.title || info.description);
+  let hasPopover = $derived(
+    !retrievedInfo || !info.id || info.title || info.description,
+  );
 </script>
 
 {#snippet popover()}
-  {#if info.icon || info.display || !info.id}
-    &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
-  {/if}
-  {#if info.title}
-    {info.title}
-  {/if}
-  {#if info.variant === "left"}
-    (Left)
-  {:else if info.variant === "right"}
-    (Right)
-  {/if}
-  {#if info.description}
-    <br />
-    <small>{info.description}</small>
+  {#if retrievedInfo}
+    {#if info.icon || info.display || !info.id}
+      &lt;<b>{info.id ?? `0x${info.code.toString(16)}`}</b>&gt;
+    {/if}
+    {#if info.title}
+      {info.title}
+    {/if}
+    {#if info.variant === "left"}
+      (Left)
+    {:else if info.variant === "right"}
+      (Right)
+    {/if}
+    {#if info.description}
+      <br />
+      <small>{info.description}</small>
+    {/if}
+  {:else}
+    <b>Unknown Action</b><br />
+    {#if info.code > 1023}
+      This action cannot be translated and will be ingored.
+    {/if}
   {/if}
 {/snippet}
 
@@ -51,6 +72,8 @@
     class:icon={!!info.icon}
     class:left={info.variant === "left"}
     class:right={info.variant === "right"}
+    class:error={info.code > 1023}
+    class:warn={!retrievedInfo}
     {@attach withPopover && hasPopover ? actionTooltip(popover) : null}
   >
     {@render kbdText()}
@@ -60,21 +83,30 @@
   {#if !info.icon && dynamicMapping?.length === 1}
     <span
       {@attach hasPopover ? actionTooltip(popover) : null}
+      class:in-text={display === "inline-text"}
+      class:error={info.code > 1023}
+      class:warn={!retrievedInfo}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}>{dynamicMapping}</span
     >
   {:else if !info.icon && info.id?.length === 1}
     <span
       {@attach hasPopover ? actionTooltip(popover) : null}
+      class:in-text={display === "inline-text"}
+      class:error={info.code > 1023}
+      class:warn={!retrievedInfo}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}>{info.id}</span
     >
   {:else}
     <kbd
       class="inline-kbd"
+      class:in-text={display === "inline-text"}
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
       class:icon={!!info.icon}
+      class:warn={!retrievedInfo}
+      class:error={info.code > 1023}
       {@attach hasPopover ? actionTooltip(popover) : null}
     >
       {@render kbdText()}
@@ -93,7 +125,7 @@
   {:else}
     {@render inlineKbdSnippet()}
   {/if}
-{:else if display === "inline-keys"}
+{:else if display === "inline-keys" || display === "inline-text"}
   {@render inlineKbdSnippet()}
 {/if}
 
@@ -102,6 +134,23 @@
     transition: color 250ms ease;
     padding-block: auto;
     height: 24px;
+
+    &.in-text {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-block: auto;
+      padding-block: revert;
+    }
+  }
+
+  .warn:not(.error) {
+    border-color: var(--md-sys-color-error);
+    color: var(--md-sys-color-error);
+  }
+
+  .error {
+    opacity: 0.6;
+    text-decoration: line-through;
   }
 
   .left {
@@ -113,6 +162,10 @@
 
   .inline-kbd {
     margin-inline-end: 2px;
+
+    &.in-text.icon {
+      translate: 0 -4em;
+    }
   }
 
   :global(span) + .inline-kbd {

src/lib/components/layout/ActionList.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">
+  import {
+    KEYMAP_CATEGORIES,
+    KEYMAP_CODES,
+    KEYMAP_IDS,
+    type KeyInfo,
+  } from "$lib/serial/keymap-codes";
+  import FlexSearch from "flexsearch";
+  import { onMount } from "svelte";
+  import ActionListItem from "$lib/components/ActionListItem.svelte";
+  import LL from "$i18n/i18n-svelte";
+  import { action } from "$lib/title";
+  import { get } from "svelte/store";
+  import type { KeymapCategory } from "$lib/meta/types/actions";
+  import Action from "../Action.svelte";
+  import { isVerbose } from "../verbose-action";
+  import { actionToValue } from "$lib/chord-editor/action-serializer";
+
+  let {
+    currentAction = undefined,
+    nextAction = undefined,
+    autofocus = false,
+    onselect,
+    onclose,
+  }: {
+    currentAction?: number;
+    nextAction?: number;
+    autofocus?: boolean;
+    onselect: (id: number) => void;
+    onclose?: () => void;
+  } = $props();
+
+  onMount(() => {
+    search();
+  });
+
+  const index = new FlexSearch.Index({ tokenize: "full" });
+
+  $effect(() => {
+    createIndex($KEYMAP_CODES);
+  });
+
+  async function createIndex(codes: Map<number, KeyInfo>) {
+    for (const [, action] of codes) {
+      await index?.addAsync(
+        action.code,
+        `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${
+          action.description || ""
+        }`,
+      );
+    }
+  }
+
+  async function search() {
+    const groups = new Map(
+      $KEYMAP_CATEGORIES.map(
+        (category) => [category, []] as [KeymapCategory, KeyInfo[]],
+      ),
+    );
+    const result =
+      searchBox.value === ""
+        ? Array.from($KEYMAP_CODES.keys())
+        : await index!.searchAsync(searchBox.value);
+    for (const id of result) {
+      const action = $KEYMAP_CODES.get(id as number);
+      if (action?.category) {
+        groups.get(action.category)?.push(action);
+      }
+    }
+
+    function sortValue(action: KeyInfo): number {
+      return isVerbose(action) ? 0 : action.id?.length === 1 ? 2 : 1;
+    }
+    for (const actions of groups.values()) {
+      actions.sort((a, b) => sortValue(b) - sortValue(a));
+    }
+    results = groups;
+    exact = get(KEYMAP_IDS).get(searchBox.value)?.code;
+    code = Number(searchBox.value);
+  }
+
+  function select(id?: number) {
+    if (id !== undefined) {
+      onselect(id);
+    }
+  }
+
+  function keyboardNavigation(event: KeyboardEvent) {
+    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
+      onselect(exact);
+    } else if (event.key === "ArrowDown") {
+      const element =
+        resultList.querySelector("li:focus-within")?.nextSibling ??
+        resultList.querySelector("li:not(.exact)");
+      if (element instanceof HTMLLIElement) {
+        element.querySelector("button")?.focus();
+      }
+    } else if (event.key === "ArrowUp") {
+      const element =
+        resultList.querySelector("li:focus-within")?.previousSibling ??
+        resultList.querySelector("li:not(.exact)");
+      if (element instanceof HTMLLIElement) {
+        element.querySelector("button")?.focus();
+      }
+    } else {
+      searchBox.focus();
+      return;
+    }
+    event.preventDefault();
+  }
+
+  let results: Map<KeymapCategory, KeyInfo[]> = $state(new Map());
+  let exact: number | undefined = $state(undefined);
+  let code: number = $state(Number.NaN);
+
+  let searchBox: HTMLInputElement;
+  let resultList: HTMLUListElement;
+</script>
+
+<div class="content">
+  <div class="search-row">
+    <!-- svelte-ignore a11y_autofocus -->
+    <input
+      type="search"
+      {autofocus}
+      bind:this={searchBox}
+      oninput={search}
+      onkeypress={keyboardNavigation}
+      placeholder={$LL.actionSearch.PLACEHOLDER()}
+    />
+    {#if onclose}
+      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
+        >{$LL.actionSearch.DELETE()}</button
+      >
+      <button
+        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
+        class="icon"
+        onclick={onclose}>close</button
+      >
+    {/if}
+  </div>
+  {#if currentAction !== undefined}
+    <aside>
+      <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
+      <ActionListItem id={currentAction} />
+    </aside>
+    {#if nextAction}
+      <aside>
+        <h3>{$LL.actionSearch.NEXT_ACTION()}</h3>
+        <ActionListItem id={nextAction} />
+      </aside>
+    {/if}
+  {/if}
+  <ul bind:this={resultList}>
+    {#if exact !== undefined}
+      <li class="exact">
+        <i>Exact match</i>
+        <ActionListItem id={exact} onclick={() => select(exact)} />
+      </li>
+    {/if}
+    {#if !exact && code}
+      {#if code >= 2 ** 5 && code < 2 ** 13}
+        <li><button onclick={() => select(code)}>USE CODE</button></li>
+      {:else}
+        <li>Action code is out of range</li>
+      {/if}
+    {/if}
+    {#each results as [category, actions] (category)}
+      {#if actions.length > 0}
+        <div class="category">
+          <h3>{category.name}</h3>
+          <div class="description">{category.description}</div>
+          <ul>
+            {#each actions as action (action.code)}
+              <button
+                class="action-item"
+                draggable="true"
+                ondragstart={(event) => {
+                  if (!event.dataTransfer) return;
+                  event.stopPropagation();
+                  event.dataTransfer.dropEffect = "copy";
+                  event.dataTransfer.clearData();
+                  event.dataTransfer.setData(
+                    "text/plain",
+                    actionToValue(action.code),
+                  );
+                }}
+              >
+                <Action {action} display="verbose"></Action>
+              </button>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+    {/each}
+  </ul>
+</div>
+
+<style lang="scss">
+  .filters {
+    display: flex;
+    gap: 4px;
+    border: none;
+
+    label {
+      border: 1px solid currentcolor;
+      border-radius: 6px;
+      padding-inline: 4px;
+      padding-block: 2px;
+      height: unset;
+
+      font-size: 14px;
+
+      &:has(:checked) {
+        background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .action-item {
+    cursor: grab;
+    margin: 0;
+    padding: 0;
+    height: auto;
+    font: inherit;
+  }
+
+  dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: none;
+
+    background: rgba(0 0 0 / 60%);
+
+    width: 100%;
+    height: 100%;
+  }
+
+  aside {
+    opacity: 0.4;
+
+    margin: 8px;
+    border: 1px dashed var(--md-sys-color-outline);
+    border-radius: 8px;
+    pointer-events: none;
+
+    > h3 {
+      margin-inline-start: 16px;
+      margin-block-start: -13px;
+      margin-block-end: 0;
+
+      background: var(--md-sys-color-background);
+      padding-inline: 8px;
+      width: fit-content;
+    }
+
+    @media (prefers-contrast: more) {
+      opacity: 0.8;
+    }
+
+    @media (forced-colors: active) {
+      opacity: 1;
+      color: GrayText;
+    }
+  }
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-inline: 16px;
+  }
+
+  .content {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    transform-origin: top left;
+    border-radius: 16px;
+
+    background: var(--md-sys-color-background);
+
+    width: calc(min(30cm, 90%));
+    height: calc(min(100% - 128px, 90%));
+
+    overflow: hidden;
+
+    color: var(--md-sys-color-on-background);
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
+  }
+
+  input[type="search"] {
+    transition: all 250ms ease;
+    margin-block-end: 8px;
+    border: none;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+
+    background: none;
+    padding-inline: 16px;
+    width: 100%;
+    height: 64px;
+    color: currentcolor;
+    font-size: 16px;
+
+    font-family: inherit;
+
+    &:focus {
+      outline: none;
+      border-bottom: 1px solid var(--md-sys-color-primary);
+    }
+  }
+
+  ul {
+    --scrollbar-color: var(--md-sys-color-surface-variant);
+
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    padding-inline: 4px;
+    height: 100%;
+
+    overflow-y: auto;
+
+    scrollbar-gutter: both-edges stable;
+  }
+
+  .category {
+    .description {
+      opacity: 0.8;
+      margin-block-start: -16px;
+      font-style: italic;
+      font-size: 14px;
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-block: 24px;
+      overflow: hidden;
+    }
+  }
+
+  li {
+    display: contents;
+  }
+
+  .exact {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-block-start: 8px;
+
+    border: 1px solid var(--md-sys-color-primary);
+    border-radius: 8px;
+
+    width: 100%;
+
+    > i {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 0 0 8px 8px;
+
+      background: var(--md-sys-color-primary);
+
+      padding-inline: 6px;
+
+      color: var(--md-sys-color-on-primary);
+    }
+
+    @media (forced-colors: active) {
+      background: Mark;
+    }
+  }
+</style>

src/lib/components/layout/ActionSelector.svelte

@@ -1,19 +1,5 @@
 <script lang="ts">
-  import {
-    KEYMAP_CATEGORIES,
-    KEYMAP_CODES,
-    KEYMAP_IDS,
-    type KeyInfo,
-  } from "$lib/serial/keymap-codes";
-  import FlexSearch from "flexsearch";
-  import { onMount } from "svelte";
-  import ActionListItem from "$lib/components/ActionListItem.svelte";
-  import LL from "$i18n/i18n-svelte";
-  import { action } from "$lib/title";
-  import { get } from "svelte/store";
-  import type { KeymapCategory } from "$lib/meta/types/actions";
-  import Action from "../Action.svelte";
-  import { isVerbose } from "../verbose-action";
+  import ActionList from "./ActionList.svelte";
 
   let {
     currentAction = undefined,
@@ -26,205 +12,24 @@
     onselect: (id: number) => void;
     onclose: () => void;
   } = $props();
-
-  onMount(() => {
-    searchBox.focus();
-    search();
-  });
-
-  const index = new FlexSearch.Index({ tokenize: "full" });
-
-  $effect(() => {
-    createIndex($KEYMAP_CODES);
-  });
-
-  async function createIndex(codes: Map<number, KeyInfo>) {
-    for (const [, action] of codes) {
-      await index?.addAsync(
-        action.code,
-        `${action.title || ""} ${action.variant || ""} ${action.category} ${action.id || ""} ${
-          action.description || ""
-        }`,
-      );
-    }
-  }
-
-  async function search() {
-    const groups = new Map(
-      $KEYMAP_CATEGORIES.map(
-        (category) => [category, []] as [KeymapCategory, KeyInfo[]],
-      ),
-    );
-    const result =
-      searchBox.value === ""
-        ? Array.from($KEYMAP_CODES.keys())
-        : await index!.searchAsync(searchBox.value);
-    for (const id of result) {
-      const action = $KEYMAP_CODES.get(id as number);
-      if (action?.category) {
-        groups.get(action.category)?.push(action);
-      }
-    }
-
-    function sortValue(action: KeyInfo): number {
-      return isVerbose(action) ? 0 : action.id?.length === 1 ? 2 : 1;
-    }
-    for (const actions of groups.values()) {
-      actions.sort((a, b) => sortValue(b) - sortValue(a));
-    }
-    results = groups;
-    exact = get(KEYMAP_IDS).get(searchBox.value)?.code;
-    code = Number(searchBox.value);
-  }
-
-  function select(id?: number) {
-    if (id !== undefined) {
-      onselect(id);
-    }
-  }
-
-  function keyboardNavigation(event: KeyboardEvent) {
-    if (event.shiftKey && event.key === "Enter" && exact !== undefined) {
-      onselect(exact);
-    } else if (event.key === "ArrowDown") {
-      const element =
-        resultList.querySelector("li:focus-within")?.nextSibling ??
-        resultList.querySelector("li:not(.exact)");
-      if (element instanceof HTMLLIElement) {
-        element.querySelector("button")?.focus();
-      }
-    } else if (event.key === "ArrowUp") {
-      const element =
-        resultList.querySelector("li:focus-within")?.previousSibling ??
-        resultList.querySelector("li:not(.exact)");
-      if (element instanceof HTMLLIElement) {
-        element.querySelector("button")?.focus();
-      }
-    } else {
-      searchBox.focus();
-      return;
-    }
-    event.preventDefault();
-  }
-
-  let results: Map<KeymapCategory, KeyInfo[]> = $state(new Map());
-  let exact: number | undefined = $state(undefined);
-  let code: number = $state(Number.NaN);
-
-  let searchBox: HTMLInputElement;
-  let resultList: HTMLUListElement;
 </script>
 
-<svelte:window on:keydown={keyboardNavigation} />
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <dialog
   open
   onclick={(event) => {
     if (event.target === event.currentTarget) onclose();
   }}
 >
-  <div class="content">
-    <div class="search-row">
-      <input
-        type="search"
-        bind:this={searchBox}
-        oninput={search}
-        onkeypress={(event) => {
-          if (event.key === "Enter") {
-            select(exact);
-          }
-        }}
-        placeholder={$LL.actionSearch.PLACEHOLDER()}
-      />
-      <button onclick={() => select(0)} use:action={{ shortcut: "shift+esc" }}
-        >{$LL.actionSearch.DELETE()}</button
-      >
-      <button
-        use:action={{ title: $LL.modal.CLOSE(), shortcut: "esc" }}
-        class="icon"
-        onclick={onclose}>close</button
-      >
-    </div>
-    {#if currentAction !== undefined}
-      <aside>
-        <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
-        <ActionListItem id={currentAction} />
-      </aside>
-      {#if nextAction}
-        <aside>
-          <h3>{$LL.actionSearch.NEXT_ACTION()}</h3>
-          <ActionListItem id={nextAction} />
-        </aside>
-      {/if}
-    {/if}
-    <ul bind:this={resultList}>
-      {#if exact !== undefined}
-        <li class="exact">
-          <i>Exact match</i>
-          <ActionListItem id={exact} onclick={() => select(exact)} />
-        </li>
-      {/if}
-      {#if !exact && code}
-        {#if code >= 2 ** 5 && code < 2 ** 13}
-          <li><button onclick={() => select(code)}>USE CODE</button></li>
-        {:else}
-          <li>Action code is out of range</li>
-        {/if}
-      {/if}
-      {#each results as [category, actions] (category)}
-        {#if actions.length > 0}
-          <div class="category">
-            <h3>{category.name}</h3>
-            <div class="description">{category.description}</div>
-            <ul>
-              {#each actions as action (action.code)}
-                <button class="action-item" onclick={() => select(action.code)}>
-                  <Action {action} display="verbose"></Action>
-                </button>
-              {/each}
-            </ul>
-          </div>
-        {/if}
-      {/each}
-    </ul>
-  </div>
+  <ActionList
+    autofocus={true}
+    {currentAction}
+    {nextAction}
+    {onselect}
+    {onclose}
+  />
 </dialog>
 
 <style lang="scss">
-  .filters {
-    display: flex;
-    gap: 4px;
-    border: none;
-
-    label {
-      border: 1px solid currentcolor;
-      border-radius: 6px;
-      padding-inline: 4px;
-      padding-block: 2px;
-      height: unset;
-
-      font-size: 14px;
-
-      &:has(:checked) {
-        background: var(--md-sys-color-secondary);
-        color: var(--md-sys-color-on-secondary);
-      }
-
-      input {
-        display: none;
-      }
-    }
-  }
-
-  .action-item {
-    margin: 0;
-    padding: 0;
-    height: auto;
-    font: inherit;
-  }
-
   dialog {
     display: flex;
     justify-content: center;
@@ -237,146 +42,4 @@
     width: 100%;
     height: 100%;
   }
-
-  aside {
-    opacity: 0.4;
-
-    margin: 8px;
-    border: 1px dashed var(--md-sys-color-outline);
-    border-radius: 8px;
-    pointer-events: none;
-
-    > h3 {
-      margin-inline-start: 16px;
-      margin-block-start: -13px;
-      margin-block-end: 0;
-
-      background: var(--md-sys-color-background);
-      padding-inline: 8px;
-      width: fit-content;
-    }
-
-    @media (prefers-contrast: more) {
-      opacity: 0.8;
-    }
-
-    @media (forced-colors: active) {
-      opacity: 1;
-      color: GrayText;
-    }
-  }
-
-  .search-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-inline: 16px;
-  }
-
-  .content {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    transform-origin: top left;
-    border-radius: 16px;
-
-    background: var(--md-sys-color-background);
-
-    width: calc(min(30cm, 90%));
-    height: calc(min(100% - 128px, 90%));
-
-    overflow: hidden;
-
-    color: var(--md-sys-color-on-background);
-
-    @media (forced-colors: active) {
-      border: 1px solid CanvasText;
-    }
-  }
-
-  input[type="search"] {
-    transition: all 250ms ease;
-    margin-block-end: 8px;
-    border: none;
-    border-bottom: 1px solid var(--md-sys-color-surface-variant);
-
-    background: none;
-    padding-inline: 16px;
-    width: 100%;
-    height: 64px;
-    color: currentcolor;
-    font-size: 16px;
-
-    font-family: inherit;
-
-    &:focus {
-      outline: none;
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-  }
-
-  ul {
-    --scrollbar-color: var(--md-sys-color-surface-variant);
-
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    padding-inline: 4px;
-    height: 100%;
-
-    overflow-y: auto;
-
-    scrollbar-gutter: both-edges stable;
-  }
-
-  .category {
-    .description {
-      opacity: 0.8;
-      margin-block-start: -16px;
-      font-style: italic;
-      font-size: 14px;
-    }
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-block: 24px;
-      overflow: hidden;
-    }
-  }
-
-  li {
-    display: contents;
-  }
-
-  .exact {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-block-start: 8px;
-
-    border: 1px solid var(--md-sys-color-primary);
-    border-radius: 8px;
-
-    width: 100%;
-
-    > i {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-      border-radius: 0 0 8px 8px;
-
-      background: var(--md-sys-color-primary);
-
-      padding-inline: 6px;
-
-      color: var(--md-sys-color-on-primary);
-    }
-
-    @media (forced-colors: active) {
-      background: Mark;
-    }
-  }
 </style>

src/lib/style/_kbd.scss

@@ -3,9 +3,14 @@ kbd {
   justify-content: center;
   align-items: center;
   margin-block: 6px;
-
-  border: 1px solid currentcolor;
   border-radius: 4px;
+
+  //border: 1px solid currentcolor;
+  background: color-mix(
+    in srgb,
+    var(--md-sys-color-surface-variant) 50%,
+    transparent
+  );
   padding: 4px;
 
   height: 20px;