add browser warning

src/routes/+layout.svelte

@@ -12,6 +12,8 @@
   import type {LayoutServerData} from "./$types"
   import type {RegisterSWOptions} from "vite-plugin-pwa/types"
   import {initLocalStorage} from "$lib/serial/storage"
+  import {browser} from "$app/environment"
+  import BrowserWarning from "./BrowserWarning.svelte"
 
   export let data: LayoutServerData
 
@@ -53,6 +55,10 @@
   <slot />
 </main>
 
+{#if browser && !/Chrome\/[\d.]+(\s(?!Mobile)|$)/.test(navigator.userAgent)}
+  <BrowserWarning />
+{/if}
+
 <style lang="scss" global>
   * {
     box-sizing: border-box;

src/routes/BrowserWarning.svelte

@@ -0,0 +1,95 @@
+<dialog open>
+  <h1>Warning</h1>
+  <p>
+    Your current browser is not supported. Due to this site's unique requirement for serial connections, we
+    require the use of <b>desktop</b> versions of <b>Chromium-based</b> browsers.
+  </p>
+  <p>Popular options include</p>
+  <div>
+    <a href="https://www.chromium.org/getting-involved/download-chromium/" target="_blank" class="chrome"
+      >Chromium</a
+    >
+    <a href="https://www.google.com/chrome/" target="_blank" class="chrome">Chrome</a>
+    <a href="https://brave.com/" target="_blank" class="brave">Brave</a>
+    <a href="https://www.microsoft.com/en-us/edge/download?form=MA13FJ" target="_blank" class="edge"
+      >Microsoft Edge</a
+    >
+    <a href="https://www.opera.com/" target="_blank" class="opera">Opera</a>
+    <a href="https://vivaldi.com/download/" class="vivaldi">Vivaldi</a>
+  </div>
+</dialog>
+
+<style lang="scss">
+  dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100vw;
+    height: 100vh;
+
+    color: var(--md-sys-color-on-error);
+
+    background: var(--md-sys-color-error);
+    border: none;
+
+    > * {
+      max-width: 20cm;
+    }
+  }
+
+  div {
+    display: flex;
+    gap: 16px;
+  }
+
+  a {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    color: var(--md-sys-color-on-error);
+    list-style: none;
+
+    &::before {
+      content: "";
+
+      display: inline-block;
+
+      width: 24px;
+      height: 24px;
+
+      background: var(--md-sys-color-on-error);
+    }
+
+    &.chrome::before {
+      mask: url("/browsers/googlechrome.svg");
+    }
+
+    &.brave::before {
+      mask: url("/browsers/brave.svg");
+    }
+
+    &.edge::before {
+      mask: url("/browsers/microsoftedge.svg");
+    }
+
+    &.opera::before {
+      mask: url("/browsers/opera.svg");
+    }
+
+    &.vivaldi::before {
+      mask: url("/browsers/vivaldi.svg");
+    }
+  }
+
+  dialog::backdrop {
+    opacity: 0.8;
+    background: black;
+  }
+
+  h1 {
+    color: inherit;
+  }
+</style>

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

@@ -5,16 +5,15 @@
   import type {Index} from "flexsearch"
   import {tick} from "svelte"
   import type {Chord} from "$lib/serial/chord"
+  import tippy from "tippy.js"
+  import {calculateChordCoverage} from "$lib/chords/coverage"
 
   $: 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.map(it => KEYMAP_CODES[it].id),
-      )
+      index.add(i, chord.phrase.map(it => KEYMAP_CODES[it].id).join(""))
     })
     return index
   }
@@ -29,6 +28,10 @@
     })
   }
 
+  function sort(event: InputEvent) {
+    tippy(event.target, {})
+  }
+
   $: items = searchFilter?.map(it => [$chords[it], it]) ?? $chords.map((it, i) => [it, i])
 </script>
 
@@ -39,6 +42,8 @@
 {#if searchIndex}
   <input on:input={search} type="search" placeholder="Search {$chords.length} chords" />
 {/if}
+<button class="icon" on:click={sort}>sort</button>
+<button class="icon">filter</button>
 
 <section>
   <table>
@@ -62,6 +67,13 @@
       </tr>
     {/each}
   </table>
+  <div>
+    <p>15 Duplicate Chords</p>
+    <p>12 Chords use</p>
+    {#await calculateChordCoverage($chords) then { missing, coverage }}
+      <p>{(coverage * 100).toFixed(1)}% of English 200</p>
+    {/await}
+  </div>
 </section>
 
 <style lang="scss">