feat: improve connection ux

[deploy]

icons.config.ts

@@ -44,13 +44,14 @@ const config: IconsConfig = {
     "save",
     "settings_backup_restore",
     "sort",
-    "filter",
+    "filter_list",
     "settings_power",
     "link",
     "link_off",
     "chevron_right",
     "check_circle",
     "error",
+    "auto_delete",
   ],
   codePoints: {
     speed: "e9e4",

src/routes/BackupPopup.svelte

@@ -31,15 +31,10 @@
       $layout = backup.layout
     }
   }
-
-  async function createShareUrl() {
-    console.log(await getSharableUrl("chords", $chords))
-  }
 </script>
 
 <section>
-  <h2>Backup & Restore</h2>
+  <h2><label><input type="checkbox" use:preference={"backup"} />Local Backup</label></h2>
-  <label><input type="checkbox" use:preference={"backup"} />Local backups</label>
   <p class="disclaimer">
     <i>Backups remain on your computer and are never shared or uploaded to our servers.</i>
   </p>
@@ -52,6 +47,19 @@
 </section>
 
 <style lang="scss">
+  h2 {
+    margin-block-end: 0;
+
+    > label {
+      gap: 10px;
+      font-size: 24px;
+
+      > input {
+        font-size: 12px;
+      }
+    }
+  }
+
   section {
     display: flex;
     flex-direction: column;

src/routes/ConnectionPopup.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import {initSerial, serialPort} from "$lib/serial/connection"
   import {browser} from "$app/environment"
-  import {getViablePorts} from "$lib/serial/device"
+  import {slide, fade, fly} from "svelte/transition"
-  import {slide, fade} from "svelte/transition"
   import {preference} from "$lib/preferences"
+  import Terminal from "$lib/components/Terminal.svelte"
 
-  let connectDialog = false
+  let terminal = false
   let powerDialog = false
 </script>
 
 <section>
+  <div class="row">
     <h2>Device</h2>
+    <label>Auto-Connect<input type="checkbox" use:preference={"autoConnect"} /></label>
+  </div>
 
   {#if $serialPort}
     <p transition:slide>
@@ -22,62 +25,39 @@
 
   {#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
+          class="secondary"
           on:click={() => {
-                $serialPort.disconnect()
+            $serialPort.forget()
             $serialPort = undefined
           }}><span class="icon">usb_off</span>Disconnect</button
         >
       {:else}
-            {#if ports.length > 0}
+        <button class="error" on:click={() => initSerial(true)}><span class="icon">usb</span>Connect</button>
-              <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>
+      <div class="row" style="justify-content: flex-end">
-          {/if}
+        <a
-          {#if $serialPort}
+          href="/terminal"
-            <button
+          title="Terminal"
-              on:click={() => {
+          class="icon"
-                $serialPort.forget()
+          disabled={$serialPort === undefined}
-                $serialPort = undefined
+          on:click={() => (terminal = !terminal)}>terminal</a
-              }}><span class="icon">link_off</span>Unpair Device</button
         >
-          {/if}
+        <button
-        </dialog>
+          class="icon"
-      {/if}
+          title="Boot Menu"
-    {/await}
+          disabled={$serialPort === undefined}
+          on:click={() => (powerDialog = !powerDialog)}>settings_power</button
+        >
+      </div>
+    </div>
     {#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">restart_alt</span>Reboot WIP</button>
-        <button><span class="icon">rule_settings</span>Bootloader</button>
+        <button><span class="icon">rule_settings</span>Bootloader WIP</button>
       </dialog>
     {/if}
   {/if}
@@ -97,6 +77,8 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
+
+    min-width: 260px;
   }
 
   .backdrop {
@@ -132,7 +114,10 @@
 
   .row {
     display: flex;
-    gap: 8px;
+    gap: 0;
+    justify-content: space-between;
+
+    width: 100%;
     height: fit-content;
   }
 
@@ -154,6 +139,7 @@
     background: var(--md-sys-color-secondary);
   }
 
+  a,
   button {
     cursor: pointer;
 
@@ -168,6 +154,7 @@
 
     font-size: 1rem;
     color: var(--md-sys-color-on-background);
+    text-decoration: none;
 
     background: transparent;
     border: none;
@@ -202,13 +189,4 @@
       background: var(--md-sys-color-surface-variant);
     }
   }
-
-  .device-grid {
-    contain: size;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 16px;
-  }
 </style>

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

@@ -43,7 +43,7 @@
   <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>
+<button class="icon">filter_list</button>
 
 <section>
   <table>

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

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

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

@@ -1,92 +0,0 @@
-<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>

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

@@ -1,95 +0,0 @@
-<script>
-  import {initSerial, serialPort} from "$lib/serial/connection"
-  import Terminal from "$lib/components/Terminal.svelte"
-  import {browser} from "$app/environment"
-</script>
-
-<svelte:head>
-  <title>dot i/o device manager</title>
-</svelte:head>
-
-<h1>Device Manager</h1>
-
-<div class="device-grid">
-  <div class="row">
-    {#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;
-  }
-
-  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);
-
-    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>

src/routes/terminal/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Terminal from "$lib/components/Terminal.svelte"
+</script>
+
+<section class="terminal">
+  <Terminal />
+</section>
+
+<style lang="scss">
+  section {
+    contain: size;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 16px;
+
+    width: calc(min(100%, 28cm));
+    height: 100%;
+  }
+</style>