chord search

src/lib/components/Terminal.svelte

@@ -44,21 +44,6 @@
     border-radius: 16px;
   }
 
-  ::-webkit-scrollbar {
-    width: 8px;
-    background: transparent;
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--md-sys-color-on-secondary);
-    border-radius: 4px;
-  }
-
-  ::-webkit-resizer {
-    display: none;
-  }
-
   fieldset::before {
     content: "$";
 
@@ -86,6 +71,8 @@
   }
 
   .io {
+    --scrollbar-color: var(--md-sys-color-secondary);
+
     z-index: 1;
 
     overflow-y: auto;

src/lib/style/scrollbar.scss

@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color, white);
+  border-radius: 4px;
+  transition: all 250ms ease;
+
+  &:hover {
+    filter: brightness(120%);
+  }
+
+  &:active {
+    filter: brightness(80%);
+  }
+}
+
+::-webkit-resizer {
+  display: none;
+}

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import "$lib/fonts/noto-sans-mono.scss"
   import "$lib/fonts/material-symbols-rounded.scss"
+  import "$lib/style/scrollbar.scss"
   import {onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"

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 {