feat: layout action search prototype

[deploy]

src/lib/components/TypingInput.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {tick} from "svelte"
-  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+  import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
   import {chords, highlightActions} from "$lib/serial/connection"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes.js"
 

src/lib/components/layout/ActionSelector.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes.js"
+  import charaActions from "$lib/assets/keymaps/chara-chorder.yml"
+  import mouseActions from "$lib/assets/keymaps/mouse.yml"
+  import keyboardActions from "$lib/assets/keymaps/keyboard.yml"
+  import asciiActions from "$lib/assets/keymaps/ascii.yml"
+  import cp1252Actions from "$lib/assets/keymaps/cp-1252.yml"
+  import FlexSearch from "flexsearch"
+
+  const index = new FlexSearch({tokenize: "full"})
+
+  for (const code in KEYMAP_CODES) {
+    const key = KEYMAP_CODES[code]
+    index.add(
+      code,
+      `${key.id || key.code} ${key.title || ""} ${key.variant || ""} ${key.description || ""}`.trim(),
+    )
+  }
+
+  function search() {
+    const query = searchInput.value
+    customValue = query && !Number.isNaN(Number(query)) ? Number(query) : undefined
+    results = query ? index.search(searchInput.value) : defaultActions
+  }
+
+  let customValue = undefined
+  const defaultActions: string[] = [
+    charaActions,
+    mouseActions,
+    keyboardActions,
+    asciiActions,
+    cp1252Actions,
+  ].flatMap(it => Object.keys(it.actions))
+  let results: string[] = defaultActions
+  let searchInput: HTMLInputElement
+</script>
+
+<section>
+  <input type="search" on:input={search} placeholder="Search Actions" bind:this={searchInput} />
+
+  <div class="results">
+    {#if customValue !== undefined}
+      <button class="custom">
+        Custom ActionID
+        <span class="key">0x{customValue.toString(16).toUpperCase()}</span>
+      </button>
+    {/if}
+
+    {#each results as id}
+      {@const key = KEYMAP_CODES[id]}
+      <button title={key.description}>
+        <div class="title">
+          <b>
+            {key.title || ""}
+            {#if key.variant === "left"}
+              (Left)
+            {:else if key.variant === "right"}
+              (Right)
+            {/if}
+          </b>
+          {#if key.description}
+            <i>{key.description}</i>
+          {/if}
+        </div>
+        <span class:icon={!!key.icon} class="key">{key.icon || key.id || key.code}</span>
+      </button>
+    {/each}
+  </div>
+</section>
+
+<style lang="scss">
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    width: calc(min(100vw - 10px, 512px));
+    height: calc(min(90vh, 600px));
+  }
+
+  input[type="search"] {
+    width: 100%;
+    height: 48px;
+    padding-inline: 16px;
+
+    font-family: "Noto Sans Mono", monospace;
+    font-size: 18px;
+    color: var(--md-sys-color-on-primary);
+
+    background: var(--md-sys-color-primary);
+    border: none;
+    border-radius: 24px;
+
+    &::placeholder {
+      color: inherit;
+      opacity: 0.3;
+    }
+
+    &::after {
+      content: "plus";
+    }
+  }
+
+  .key {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 32px;
+    height: 32px;
+    padding: 4px;
+
+    font-size: 18px;
+    text-overflow: ellipsis;
+
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 6px;
+  }
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+
+    text-align: start;
+
+    > b {
+      font-size: 18px;
+    }
+  }
+
+  button {
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    font-family: "Noto Sans Mono", monospace;
+    font-size: 14px;
+    color: inherit;
+
+    background: transparent;
+    border: none;
+  }
+
+  .custom {
+    padding: 8px;
+    padding-inline-start: 16px;
+    border: 1px dashed var(--md-sys-color-outline);
+    border-radius: 16px;
+  }
+
+  .results {
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    height: 100%;
+  }
+</style>

src/lib/components/layout/InputEdit.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {layout} from "$lib/serial/connection"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import ActionSelector from "$lib/components/layout/ActionSelector.svelte"
+  import {popup} from "$lib/popup"
 
   export let id: number = 0
 </script>
@@ -10,7 +12,11 @@
     {@const action = KEYMAP_CODES[layer[id]]}
     <tr>
       <th class="icon">counter_{i + 1}</th>
-      <td><button>{action?.title || action?.id} <span class="icon">edit</span></button></td>
+      <td
+        ><button use:popup={ActionSelector}
+          >{action?.title || action?.id} <span class="icon">edit</span></button
+        ></td
+      >
     </tr>
   {/each}
 </table>

src/lib/components/layout/LayoutCC1.svelte

@@ -1,6 +1,5 @@
 <script>
-  import RingInput from "$lib/components/RingInput.svelte"
-  import layout from "$lib/assets/layouts/cc1.yml"
+  import RingInput from "$lib/components/layout/RingInput.svelte"
 
   let activeLayer = 0
 </script>

src/lib/editable-layout.ts

@@ -1,5 +1,5 @@
 import tippy from "tippy.js"
-import InputEdit from "$lib/components/InputEdit.svelte"
+import InputEdit from "$lib/components/layout/InputEdit.svelte"
 import type {Action} from "svelte/action"
 
 export const editableLayout: Action<HTMLButtonElement, {id: number; quadrant: number}> = (

src/routes/+layout.svelte

@@ -26,6 +26,7 @@
       theme: "surface-variant",
       allowHTML: true,
       duration: 250,
+      maxWidth: "none",
       arrow: true,
     })
   }

src/routes/config/layout/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+  import LayoutCC1 from "$lib/components/layout/LayoutCC1.svelte"
   import {share} from "$lib/share"
   import {layout} from "$lib/serial/connection"
   import tippy from "tippy.js"