feat: rudimentary filter in action selector

Fixes #1

src/i18n/de/index.ts

@@ -22,6 +22,9 @@ const de = {
     PLACEHOLDER: "Nach Aktionen suchen",
     CURRENT_ACTION: "Aktuelle Aktion",
     DELETE: "Entfernen",
+    filter: {
+      ALL: "Alle",
+    },
   },
   share: {
     URL_COPIED: "Teilbare URL kopiert!",

src/i18n/en/index.ts

@@ -21,6 +21,9 @@ const en = {
     PLACEHOLDER: "Search for actions",
     CURRENT_ACTION: "Current action",
     DELETE: "Remove",
+    filter: {
+      ALL: "All",
+    },
   },
   share: {
     URL_COPIED: "Sharable URL copied!",

src/lib/components/layout/ActionSelector.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import {KEYMAP_CATEGORIES, KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
   import Index from "flexsearch"
   import {createEventDispatcher} from "svelte"
   import ActionListItem from "$lib/components/ActionListItem.svelte"
   import LL from "../../../i18n/i18n-svelte"
   import {action} from "$lib/title"
+  import type {KeymapCategory} from "$lib/assets/keymaps/keymap"
 
   export let currentAction: number
 
@@ -59,24 +60,25 @@
     event.preventDefault()
   }
 
-  let results: number[] = []
+  let results: number[] = Object.keys(KEYMAP_CODES).map(Number)
   let exact: number | undefined = undefined
   let code: number = Number.NaN
 
   const dispatch = createEventDispatcher()
   let searchBox: HTMLInputElement
   let resultList: HTMLUListElement
+  let filter: Set<number>
 </script>
 
 <svelte:window on:keydown={keyboardNavigation} />
 
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 <dialog open on:click|self={() => dispatch("close")}>
   <div class="content">
     <div class="search-row">
       <input
         type="search"
         bind:this={searchBox}
-        autofocus
         on:input={search}
         on:keypress={event => {
           if (event.key === "Enter") {
@@ -94,6 +96,27 @@
         on:click={() => dispatch("close")}>close</button
       >
     </div>
+    <fieldset class="filters">
+      <label
+        >{$LL.actionSearch.filter.ALL()}<input
+          checked
+          name="category"
+          type="radio"
+          value={undefined}
+          bind:group={filter}
+        /></label
+      >
+      {#each KEYMAP_CATEGORIES as category}
+        <label
+          >{category.name}<input
+            name="category"
+            type="radio"
+            value={new Set(Object.keys(category.actions).map(Number))}
+            bind:group={filter}
+          /></label
+        >
+      {/each}
+    </fieldset>
     <aside>
       <h3>{$LL.actionSearch.CURRENT_ACTION()}</h3>
       <ActionListItem id={currentAction} />
@@ -112,7 +135,7 @@
           <li>Action code is out of range</li>
         {/if}
       {/if}
-      {#each results as id (id)}
+      {#each filter ? results.filter(it => filter.has(it)) : results as id (id)}
         <li><ActionListItem {id} on:click={() => select(id)} /></li>
       {/each}
     </ul>
@@ -120,6 +143,32 @@
 </dialog>
 
 <style lang="scss">
+  .filters {
+    display: flex;
+    gap: 4px;
+    border: none;
+
+    label {
+      height: unset;
+      padding-block: 2px;
+      padding-inline: 4px;
+
+      font-size: 14px;
+
+      border: 1px solid currentcolor;
+      border-radius: 6px;
+
+      &:has(:checked) {
+        color: var(--md-sys-color-on-secondary);
+        background: var(--md-sys-color-secondary);
+      }
+
+      input {
+        display: none;
+      }
+    }
+  }
+
   dialog {
     display: flex;
     align-items: center;
@@ -152,10 +201,6 @@
     }
   }
 
-  h2 {
-    margin-inline: 16px;
-  }
-
   .search-row {
     display: flex;
     gap: 4px;

src/lib/serial/keymap-codes.ts

@@ -5,14 +5,14 @@ export interface KeyInfo extends Partial<ActionInfo> {
   category: KeymapCategory
 }
 
-const keymaps = (await Promise.all(
+export const KEYMAP_CATEGORIES = (await Promise.all(
   Object.values(import.meta.glob("$lib/assets/keymaps/*.yml")).map(async load =>
     load().then(it => (it as any).default),
   ),
 )) as KeymapCategory[]
 
 export const KEYMAP_CODES: Record<number, KeyInfo> = Object.fromEntries(
-  keymaps.flatMap(category =>
+  KEYMAP_CATEGORIES.flatMap(category =>
     Object.entries(category.actions).map(([code, action]) => [
       Number(code),
       {...action, code: Number(code), category},
@@ -21,13 +21,11 @@ export const KEYMAP_CODES: Record<number, KeyInfo> = Object.fromEntries(
 )
 
 export const KEYMAP_IDS: Map<string, KeyInfo> = new Map(
-  keymaps
-    .flatMap(category =>
-      Object.entries(category.actions).map(
-        ([code, action]) => [action.id!, {...action, code: Number(code), category}] as const,
-      ),
-    )
-    .filter(([id]) => id !== undefined),
+  KEYMAP_CATEGORIES.flatMap(category =>
+    Object.entries(category.actions).map(
+      ([code, action]) => [action.id!, {...action, code: Number(code), category}] as const,
+    ),
+  ).filter(([id]) => id !== undefined),
 )
 
 export const specialKeycodes = new Map([