chord search

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

@@ -1,17 +1,47 @@
 <script lang="ts">
   import {chords} from "$lib/serial/connection"
+  import type {Chord} from "$lib/serial/connection"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
+  import FlexSearch from "flexsearch"
+  import type {Index} from "flexsearch"
+  import {tick} from "svelte"
+
+  $: searchIndex = $chords?.length > 0 ? buildIndex($chords) : undefined
+
+  function buildIndex(chords: Chord[]): Index {
+    const index = new FlexSearch({tokenize: "full"})
+    chords.forEach((chord, i) => {
+      index.add(i, chord.phrase)
+    })
+    return index
+  }
+
+  let searchFilter: number[] | undefined
+
+  function search(event) {
+    document.startViewTransition(async () => {
+      const query = event.target.value
+      searchFilter = query && searchIndex ? searchIndex.search(query) : undefined
+      await tick()
+    })
+  }
+
+  $: items = searchFilter?.map(it => [$chords[it], it]) ?? $chords.map((it, i) => [it, i])
 </script>
 
 <svelte:head>
   <title>Chord Manager</title>
 </svelte:head>
 
+{#if searchIndex}
+  <input on:input={search} type="search" placeholder="Search chords" />
+{/if}
+
 <section>
   <p>You have {$chords.length} chords</p>
   <table>
-    {#each $chords as { phrase, actions }}
-      <tr>
+    {#each items.slice(0, 50) as [{ phrase, actions }, i]}
+      <tr style="view-transition-name: chord-{i}">
         <th>{phrase}</th>
         <td>
           {#each actions as action}
@@ -29,14 +59,52 @@
 </section>
 
 <style lang="scss">
+  input[type="search"] {
+    width: 300px;
+    padding-block: 8px;
+    padding-inline: 32px;
+
+    font-size: 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    text-align: center;
+
+    background: var(--md-sys-color-surface-variant);
+    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
+    filter: brightness(80%);
+    border: none;
+
+    transition: all 250ms ease;
+
+    &::placeholder {
+      color: var(--md-sys-color-on-surface-variant);
+      opacity: 0.2;
+    }
+
+    &:focus {
+      filter: brightness(90%);
+      outline: none;
+    }
+  }
+
   section {
+    --scrollbar-color: var(--md-sys-color-surface-variant);
+
+    scrollbar-gutter: stable;
+
     position: relative;
+
+    overflow-x: hidden;
     overflow-y: auto;
+
+    padding-inline: 8px;
+
     border-radius: 16px;
   }
 
   table {
+    overflow: hidden;
     min-width: min(90vw, 16.5cm);
+    transition: all 1s ease;
   }
 
   table abbr {