new navigation flow

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
   import {pwaInfo} from "virtual:pwa-info"
   import type {LayoutServerData} from "./$types"
   import type {RegisterSWOptions} from "vite-plugin-pwa/types"
+  import {initLocalStorage} from "$lib/serial/storage"
 
   export let data: LayoutServerData
 
@@ -20,6 +21,7 @@
     ])
     const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
     applyTheme(theme, {target: document.body, dark})
+    initLocalStorage()
 
     if (pwaInfo) {
       // noinspection TypeScriptCheckImport

src/routes/config/+layout.svelte

@@ -10,7 +10,7 @@
 
 <nav>
   {#each paths as { href, title, icon }}
-    <a {href} class:active={$page.url.pathname === href}>
+    <a {href} class:active={$page.url.pathname.startsWith(href)}>
       <span class="icon">{icon}</span>
       {title}
     </a>

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

@@ -12,7 +12,10 @@
   function buildIndex(chords: Chord[]): Index {
     const index = new FlexSearch({tokenize: "full"})
     chords.forEach((chord, i) => {
-      index.add(i, chord.phrase)
+      index.add(
+        i,
+        chord.phrase.map(it => KEYMAP_CODES[it].id),
+      )
     })
     return index
   }
@@ -56,7 +59,11 @@
   <table>
     {#each items.slice(0, 50) as [{ phrase, actions }, i]}
       <tr style="view-transition-name: chord-{i}">
-        <th>{phrase}</th>
+        <th>
+          {#each phrase as char}
+            {KEYMAP_CODES[char].id}
+          {/each}
+        </th>
         <td>
           {#each actions as action}
             {@const keyInfo = KEYMAP_CODES[action]}

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

@@ -0,0 +1 @@
+<a class="icon" href="/config/settings/terminal/">terminal</a>

src/routes/config/settings/terminal/+page.svelte

@@ -0,0 +1,92 @@
+<script>
+  import {initSerial, serialPort} from "$lib/serial/connection"
+  import Terminal from "$lib/components/Terminal.svelte"
+  import {browser} from "$app/environment"
+</script>
+
+<div class="device-grid">
+  <div class="row">
+    <a href=".." title="Close Terminal" class="icon" style="margin-inline-end: auto">arrow_back</a>
+    {#if $serialPort === undefined}
+      <button class="secondary" disabled={browser && !("serial" in navigator)} on:click={initSerial}>
+        <span class="icon">usb</span>Pair
+      </button>
+    {/if}
+    <button title="Reboot" class="icon" disabled={$serialPort === undefined}>restart_alt</button>
+    <button title="Reboot to bootloader" class="icon" disabled={$serialPort === undefined}
+      >rule_settings</button
+    >
+  </div>
+  <div class="terminal">
+    <Terminal />
+  </div>
+</div>
+
+<style lang="scss">
+  .row {
+    display: flex;
+    gap: 8px;
+    height: fit-content;
+  }
+
+  a,
+  button {
+    cursor: pointer;
+
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+
+    padding: 8px;
+    padding-inline-end: 16px;
+
+    font-size: 1rem;
+    color: var(--md-sys-color-on-background);
+    text-decoration: none;
+
+    background: transparent;
+    border: none;
+    border-radius: 1rem;
+
+    transition: all 250ms ease;
+
+    &:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+
+    &.icon {
+      aspect-ratio: 1;
+      padding-inline-end: 8px;
+      font-size: 24px;
+      border-radius: 50%;
+    }
+
+    &.secondary {
+      color: var(--md-sys-color-on-secondary);
+      background: var(--md-sys-color-secondary);
+    }
+
+    &:active:not(:disabled) {
+      color: var(--md-sys-color-on-surface-variant);
+      background: var(--md-sys-color-surface-variant);
+    }
+  }
+
+  .terminal {
+    flex-grow: 1;
+  }
+
+  .device-grid {
+    contain: size;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 16px;
+
+    width: calc(min(100%, 28cm));
+    height: 100%;
+  }
+</style>