chord search

package-lock.json

@@ -19,6 +19,7 @@
         "@types/w3c-web-serial": "^1.0.3",
         "@vite-pwa/sveltekit": "^0.2.5",
         "autoprefixer": "^10.4.14",
+        "flexsearch": "^0.7.31",
         "fontkit": "^2.0.2",
         "glob": "^10.3.1",
         "prettier": "^2.8.0",
@@ -3907,6 +3908,12 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/flexsearch": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.31.tgz",
+      "integrity": "sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==",
+      "dev": true
+    },
     "node_modules/fontkit": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-clean-order": "^5.0.1",
     "glob": "^10.3.1",
+    "flexsearch": "^0.7.31",
     "@sveltejs/adapter-static": "^2.0.2",
     "@sveltejs/kit": "^1.20.4",
     "@material/material-color-utilities": "^0.2.7",

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 {

static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /