serial pairing

src/routes/+layout.svelte

@@ -4,11 +4,8 @@
   import {onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "$lib/components/Navigation.svelte"
-  import {chords, serialPort, syncing} from "$lib/serial/connection.js"
-  import {CharaDevice} from "$lib/serial/device.js"
-
-  /** @type {import('$lib/serial/device.js').CharaDevice} */
-  let device // @hmr:keep
+  import {hasSerialPermission} from "$lib/serial/device.js"
+  import {initSerial} from "$lib/serial/connection.js"
 
   onMount(async () => {
     const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
@@ -17,18 +14,7 @@
     const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
     applyTheme(theme, {target: document.body, dark})
 
-    syncing.set(true)
-    device ??= new CharaDevice()
-    serialPort.set(device)
-
-    const chordCount = await device.getChordCount()
-    const chordInfo = []
-    for (let i = 0; i < chordCount; i++) {
-      chordInfo.push(await device.getChord(i))
-    }
-    chordInfo.sort(({phrase: a}, {phrase: b}) => a.localeCompare(b))
-    chords.set(chordInfo)
-    syncing.set(false)
+    if (await hasSerialPermission()) await initSerial()
   })
 </script>
 

src/routes/device-manager/+page.svelte

@@ -1,6 +1,7 @@
 <script>
-  import {serialPort} from "$lib/serial/connection.js"
+  import {initSerial, serialPort} from "$lib/serial/connection.js"
   import Terminal from "$lib/components/Terminal.svelte"
+  import {browser} from "$app/environment"
 </script>
 
 <svelte:head>
@@ -11,15 +12,15 @@
 
 <div class="device-grid">
   <div class="row">
-    <button class="secondary">
-      {#if $serialPort}
-        <span class="icon">usb_off</span> Disconnect
-      {:else}
-        <span class="icon">usb</span> Connect
-      {/if}
-    </button>
-    <button title="Reboot" class="icon">restart_alt</button>
-    <button class="icon" title="Reboot to bootloader">rule_settings</button>
+    {#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 />