feat: new connection flow

icons.config.ts

@@ -27,6 +27,7 @@ const config: IconsConfig = {
     "sync",
     "restart_alt",
     "usb",
+    "usb_off",
     "rule_settings",
     "123",
     "abc",
@@ -34,6 +35,7 @@ const config: IconsConfig = {
     "cloud_done",
     "backup",
     "cloud_download",
+    "cloud_off",
     "share",
     "ios_share",
     "close",
@@ -41,6 +43,14 @@ const config: IconsConfig = {
     "arrow_back_ios_new",
     "save",
     "settings_backup_restore",
+    "sort",
+    "filter",
+    "settings_power",
+    "link",
+    "link_off",
+    "chevron_right",
+    "check_circle",
+    "error",
   ],
   codePoints: {
     speed: "e9e4",

src/lib/popup.ts

@@ -8,6 +8,7 @@ export const popup: Action<HTMLButtonElement, ComponentType> = (node, Component)
   const edit = tippy(node, {
     interactive: true,
     trigger: "click",
+    sticky: true,
     onShow(instance) {
       target = instance.popper.querySelector(".tippy-content") as HTMLElement
       target.classList.add("active")

src/lib/preferences.ts

@@ -3,12 +3,12 @@ import type {Action} from "svelte/action"
 
 export interface UserPreferences {
   backup: boolean
-  autoSync: boolean
+  autoConnect: boolean
 }
 
 export const userPreferences = writable<UserPreferences>({
   backup: false,
-  autoSync: true,
+  autoConnect: true,
 })
 
 export const preference: Action<HTMLInputElement, keyof UserPreferences> = (node, key) => {

src/lib/serial/connection.ts

@@ -25,9 +25,9 @@ export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"
 
 let device: CharaDevice // @hmr:keep
 
-export async function initSerial() {
+export async function initSerial(manual = false) {
   const device = get(serialPort) ?? new CharaDevice()
-  await device.ready()
+  await device.init(manual)
   serialPort.set(device)
 
   syncStatus.set("downloading")

src/lib/serial/device.ts

@@ -14,25 +14,29 @@ export async function canAutoConnect() {
 }
 
 export class CharaDevice {
-  private readonly port: Promise<SerialPort>
+  private port!: SerialPort
-  private readonly reader: Promise<ReadableStreamDefaultReader<string>>
+  private reader!: ReadableStreamDefaultReader<string>
 
   private readonly abortController1 = new AbortController()
   private readonly abortController2 = new AbortController()
 
+  private streamClosed!: Promise<void>
+
   private lock?: Promise<true>
 
-  version: Promise<string>
+  version!: string
-  deviceId: Promise<string>
+  deviceId!: string
 
-  constructor(baudRate = 115200) {
+  constructor(private readonly baudRate = 115200) {}
-    this.port = getViablePorts().then(async ports => {
+
-      const port =
+  async init(manual = false) {
-        ports.length === 1
+    const ports = await getViablePorts()
+    this.port =
+      !manual && ports.length === 1
         ? ports[0]
         : await navigator.serial.requestPort({filters: [{usbVendorId: VENDOR_ID}]})
-      await port.open({baudRate})
+    await this.port.open({baudRate: this.baudRate})
-      const info = port.getInfo()
+    const info = this.port.getInfo()
     serialLog.update(it => {
       it.push({
         type: "system",
@@ -42,46 +46,39 @@ export class CharaDevice {
       })
       return it
     })
-      return port
-    })
-    this.reader = this.port.then(async port => {
-      const decoderStream = new TextDecoderStream()
-      void port.readable!.pipeTo(decoderStream.writable, {signal: this.abortController1.signal})
 
-      return decoderStream
+    const decoderStream = new TextDecoderStream()
+    this.streamClosed = this.port.readable!.pipeTo(decoderStream.writable, {
+      signal: this.abortController1.signal,
+    })
+
+    this.reader = decoderStream
       .readable!.pipeThrough(new TransformStream(new LineBreakTransformer()), {
         signal: this.abortController2.signal,
       })
       .getReader()
-    })
+
-    this.lock = this.reader.then(() => {
+    this.version = await this.send("VERSION")
-      delete this.lock
+    this.deviceId = await this.send("ID")
-      return true
-    })
-    this.version = this.send("VERSION")
-    this.deviceId = this.send("ID")
   }
 
   private async internalRead() {
-    return this.reader.then(async it => {
+    const {value} = await this.reader.read()
-      const result: string = await it.read().then(({value}) => value!)
     serialLog.update(it => {
       it.push({
         type: "output",
-          value: result,
+        value: value!,
       })
       return it
     })
-      return result
+    return value!
-    })
   }
 
   /**
    * Send a command to the device
    */
   private async internalSend(...command: string[]) {
-    const port = await this.port
+    const writer = this.port.writable!.getWriter()
-    const writer = port.writable!.getWriter()
     try {
       serialLog.update(it => {
         it.push({
@@ -96,19 +93,18 @@ export class CharaDevice {
     }
   }
 
-  async ready() {
-    await this.port
-  }
-
   async forget() {
-    await (await this.port).forget()
+    await this.disconnect()
+    await this.port.forget()
   }
 
   async disconnect() {
-    this.abortController1.abort()
+    await this.reader.cancel()
-    this.abortController2.abort()
+    await this.streamClosed.catch(() => {
-    ;(await this.reader).releaseLock()
+      /** noop */
-    await (await this.port).close()
+    })
+    this.reader.releaseLock()
+    await this.port.close()
   }
 
   /**

src/lib/style/tippy.scss

@@ -1,7 +1,10 @@
 $padding: 16px;
 
 .tippy-box[data-theme~="surface-variant"] {
+  // overflow: hidden;
+
   color: var(--md-sys-color-on-surface-variant);
+
   background-color: var(--md-sys-color-surface-variant);
   filter: drop-shadow(0 0 12px #000a);
   border-radius: calc(24px + $padding);
@@ -11,10 +14,10 @@ $padding: 16px;
   }
 
   h2 {
-    margin-block-start: 8px;
-    margin-block-end: calc(8px + $padding);
     display: flex;
     justify-content: center;
+    margin-block-start: 8px;
+    margin-block-end: calc(8px + $padding);
   }
 
   @each $placement in top, bottom, right, left {

src/routes/+layout.svelte

@@ -51,7 +51,7 @@
       } satisfies RegisterSWOptions)
     }
 
-    if ($userPreferences.autoSync && (await canAutoConnect())) await initSerial()
+    if ($userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
   })
 
   $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""

src/routes/ConnectionPopup.svelte

@@ -1,52 +1,159 @@
-<script>
+<script lang="ts">
   import {initSerial, serialPort} from "$lib/serial/connection"
   import {browser} from "$app/environment"
   import {getViablePorts} from "$lib/serial/device"
+  import {slide, fade} from "svelte/transition"
+  import {preference} from "$lib/preferences"
+
+  let connectDialog = false
+  let powerDialog = false
 </script>
 
-<h2>Devices</h2>
+<section>
+  <h2>Device</h2>
 
-<div class="row">
+  {#if $serialPort}
-  <button disabled={$serialPort === undefined}><span class="icon">restart_alt</span>Reboot</button>
+    <p transition:slide>
-  <button disabled={$serialPort === undefined}><span class="icon">rule_settings</span>Bootloader</button>
+      {$serialPort.deviceId}
-</div>
+      <br />
-{#if browser}
+      Version {$serialPort.version}
-  {#await ($serialPort, getViablePorts()) then ports}
+    </p>
-    <div class="row">
-      {#if ports.length === 0}
-        <button class="secondary" on:click={initSerial}>
-          <span class="icon">usb</span>Pair
-        </button>
-      {:else if $serialPort}
-        <button
-          class="secondary"
-          on:click={() => {
-            $serialPort.forget()
-            $serialPort = undefined
-          }}><span class="icon">usb</span>Unpair</button
-        >
-      {:else}
-        <button class="secondary" on:click={initSerial}><span class="icon">usb</span>Connect</button>
   {/if}
+
+  {#if browser}
+    <div class="row">
+      <button
+        class:secondary={$serialPort}
+        class:error={!$serialPort}
+        on:click={() => (connectDialog = !connectDialog)}
+      >
+        {#if $serialPort}
+          <span class="icon">usb</span>
+        {:else}
+          <span class="icon">error</span>
+        {/if}
+        Connection
+        <span class="icon">chevron_right</span>
+      </button>
+      <button class="icon" disabled={$serialPort === undefined} on:click={() => (powerDialog = !powerDialog)}
+        >settings_power</button
+      >
+    </div>
+    {#await ($serialPort, getViablePorts()) then ports}
+      {#if connectDialog}
+        <div
+          class="backdrop"
+          transition:fade={{duration: 250}}
+          on:click={() => (connectDialog = !connectDialog)}
+        />
+        <dialog open transition:slide={{duration: 250}}>
+          <label><input type="checkbox" use:preference={"autoConnect"} />Auto Connect</label>
           {#if $serialPort}
             <button
               on:click={() => {
                 $serialPort.disconnect()
                 $serialPort = undefined
-          }}><span class="icon">usb</span>Disconnect</button
+              }}><span class="icon">usb_off</span>Disconnect</button
+            >
+          {:else}
+            {#if ports.length > 0}
+              <button on:click={() => initSerial()}><span class="icon">usb</span>Connect</button>
+            {/if}
+            <button on:click={() => initSerial(true)}><span class="icon">link</span>Pair Device</button>
+          {/if}
+          {#if $serialPort}
+            <button
+              on:click={() => {
+                $serialPort.forget()
+                $serialPort = undefined
+              }}><span class="icon">link_off</span>Unpair Device</button
             >
           {/if}
-    </div>
+        </dialog>
-  {/await}
       {/if}
+    {/await}
+    {#if powerDialog}
+      <div class="backdrop" transition:fade={{duration: 250}} on:click={() => (powerDialog = !powerDialog)} />
+      <dialog open transition:slide={{duration: 250}}>
+        <h3>Boot Menu</h3>
+        <button><span class="icon">restart_alt</span>Reboot</button>
+        <button><span class="icon">rule_settings</span>Bootloader</button>
+      </dialog>
+    {/if}
+  {/if}
+</section>
 
 <style lang="scss">
+  h2 {
+    margin-block: 8px;
+  }
+
+  p {
+    margin-block: 8px;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .backdrop {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    background: #0005;
+    border-radius: 40px;
+  }
+
+  dialog {
+    position: relative;
+    z-index: 2;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    width: 100%;
+    margin: 0;
+    margin-block-start: 16px;
+    padding: 0;
+
+    color: var(--md-sys-color-on-secondary-container);
+
+    background: var(--md-sys-color-secondary-container);
+    border: none;
+    border-radius: 32px;
+  }
+
   .row {
     display: flex;
     gap: 8px;
     height: fit-content;
   }
 
+  dialog > * {
+    margin-inline: 16px;
+  }
+
+  dialog > :first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    margin: 0;
+    padding-block: 8px;
+
+    color: var(--md-sys-color-on-secondary);
+
+    background: var(--md-sys-color-secondary);
+  }
+
   button {
     cursor: pointer;
 
@@ -85,6 +192,11 @@
       background: var(--md-sys-color-secondary);
     }
 
+    &.error {
+      color: var(--md-sys-color-on-error);
+      background: var(--md-sys-color-error);
+    }
+
     &:active:not(:disabled) {
       color: var(--md-sys-color-on-surface-variant);
       background: var(--md-sys-color-surface-variant);

src/routes/Navigation.svelte

@@ -8,6 +8,7 @@
   import ConnectionPopup from "./ConnectionPopup.svelte"
   import {canAutoConnect} from "$lib/serial/device"
   import {browser} from "$app/environment"
+  import {userPreferences} from "$lib/preferences"
 
   const training = [
     {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
@@ -53,8 +54,10 @@
           backup
         {:else if $syncStatus === "uploading"}
           cloud_download
-        {:else}
+        {:else if $userPreferences.backup}
           cloud_done
+        {:else}
+          cloud_off
         {/if}
       </button>
     {/if}