new navigation flow

icons.config.ts

@@ -35,6 +35,9 @@ const config: IconsConfig = {
     "cloud_download",
     "share",
     "ios_share",
+    "close",
+    "arrow_back",
+    "arrow_back_ios_new",
   ],
   codePoints: {
     speed: "e9e4",

src/lib/components/Navigation.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {serialPort, syncing} from "$lib/serial/connection"
+  import {serialPort, syncStatus} from "$lib/serial/connection"
   import {browser} from "$app/environment"
   import {page} from "$app/stores"
 
@@ -39,13 +39,19 @@
         warning
       </abbr>
     {/if}
+    {#if $syncStatus === "downloading"}
+      <abbr title="Backing up settings" class="icon sync backup">backup</abbr>
+    {:else if $syncStatus === "uploading"}
+      <abbr title="Saving settings" class="icon sync save">cloud_download</abbr>
+    {:else if $syncStatus === "done"}
+      <abbr title="Device settings are up-to-date" class="icon">cloud_done</abbr>
+    {/if}
     <a
-      href="/device-manager/"
+      href="/config/"
       title="Device Manager"
       class="icon connect"
-      class:active={$page.url.pathname === "/device-manager/"}
+      class:active={$page.url.pathname.startsWith("/config/")}
       class:error={$serialPort === undefined}
-      class:syncing={$syncing}
     >
       cable
     </a>
@@ -54,6 +60,51 @@
 </nav>
 
 <style lang="scss">
+  @keyframes sync {
+    0% {
+      scale: 1 1;
+      opacity: 1;
+    }
+
+    85% {
+      scale: 1 0;
+      opacity: 1;
+    }
+
+    86% {
+      scale: 1 1;
+      opacity: 0;
+    }
+
+    100% {
+      scale: 1 1;
+      opacity: 1;
+    }
+  }
+
+  .sync::after {
+    content: "";
+
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    transform-origin: top;
+    translate: -50% 0;
+
+    width: 8px;
+    height: 10px;
+
+    background: var(--md-sys-color-background);
+
+    animation: sync 1s linear infinite;
+  }
+
+  .sync.save::after {
+    transform-origin: bottom;
+    top: 10px;
+    border-radius: 4px;
+  }
+
   nav {
     display: flex;
     gap: 4px;
@@ -141,50 +192,4 @@
     color: var(--md-sys-color-on-secondary-container);
     background: var(--md-sys-color-secondary-container);
   }
-
-  @keyframes sync {
-    from {
-      rotate: 0deg;
-    }
-
-    to {
-      rotate: -360deg;
-    }
-  }
-
-  .connect::after {
-    pointer-events: none;
-    content: "sync";
-
-    position: absolute;
-    bottom: 0;
-    left: 0;
-
-    display: table-cell;
-
-    padding-top: 0.5px;
-
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--md-sys-color-on-background);
-
-    opacity: 0;
-    background: var(--md-sys-color-background);
-    border-radius: 50%;
-
-    alignment-baseline: top;
-
-    transition: opacity 250ms ease;
-    animation: sync 1s linear infinite;
-  }
-
-  .connect:active::after,
-  .connect.active::after {
-    color: var(--md-sys-color-on-primary);
-    background: var(--md-sys-color-primary);
-  }
-
-  .connect.syncing::after {
-    opacity: 1;
-  }
 </style>

src/lib/profile.ts

@@ -0,0 +1,8 @@
+import type {CharaLayout} from "$lib/serial/connection"
+import type {Chord} from "$lib/serial/chord"
+
+export interface Profile {
+  name: string
+  layout: CharaLayout
+  chords: Chord[]
+}

src/lib/serial/connection.ts

@@ -1,6 +1,7 @@
 import {writable} from "svelte/store"
 import {CharaDevice} from "$lib/serial/device"
 import type {Chord} from "$lib/serial/chord"
+import type {Writable} from "svelte/store"
 
 export const serialPort = writable<CharaDevice>()
 
@@ -17,12 +18,14 @@ export type CharaLayout = [number[], number[], number[]]
 
 export const layout = writable<CharaLayout>([[], [], []])
 
-export const syncing = writable(false)
+export const unsavedChanges = writable(0)
+
+export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
 
 let device: CharaDevice // @hmr:keep
 
 export async function initSerial() {
-  syncing.set(true)
+  syncStatus.set("downloading")
   device ??= new CharaDevice()
   serialPort.set(device)
 
@@ -40,5 +43,5 @@ export async function initSerial() {
     chordInfo.push(await device.getChord(i))
   }
   chords.set(chordInfo)
-  syncing.set(false)
+  syncStatus.set("done")
 }

src/lib/serial/storage.ts

@@ -0,0 +1,23 @@
+import {chords, layout} from "$lib/serial/connection"
+
+const PROFILE_KEY = "profiles"
+const CHORD_LIBRARY_STORAGE_KEY = "chord-library"
+const LAYOUT_STORAGE_KEY = "layouts"
+
+export function initLocalStorage() {
+  const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY)
+  if (storedLayout) {
+    layout.set(JSON.parse(storedLayout))
+  }
+  const storedChords = localStorage.getItem(CHORD_LIBRARY_STORAGE_KEY)
+  if (storedChords) {
+    chords.set(JSON.parse(storedChords))
+  }
+
+  layout.subscribe(layout => {
+    localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout))
+  })
+  chords.subscribe(chords => {
+    localStorage.setItem(CHORD_LIBRARY_STORAGE_KEY, JSON.stringify(chords))
+  })
+}

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>