chord display site

src/lib/components/Navigation.svelte

@@ -46,7 +46,8 @@
     align-items: center;
     justify-content: space-between;
 
-    width: 100%;
+    margin-block: 8px;
+    margin-inline: 16px;
   }
 
   .title {

src/lib/components/Terminal.svelte

@@ -17,10 +17,12 @@
 
   /** @type {HTMLDivElement} */
   let io
+
+  export let resizable = false
 </script>
 
 <form on:submit={submit}>
-  <div bind:this={io} class="io">
+  <div bind:this={io} class="io" class:resizable>
     {#each $serialLog as { type, value }}
       <p class={type} transition:slide>{value}</p>
     {/each}
@@ -33,22 +35,25 @@
 
 <style lang="scss">
   form {
-    resize: both;
-
     position: relative;
 
+    contain: strict;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 
-    width: calc(min(100%, 16.5cm));
+    width: 100%;
-    height: 8cm;
+    height: 100%;
 
     font-family: "Noto Sans Mono", monospace;
     font-size: 0.75rem;
     color: var(--md-sys-color-on-secondary);
 
     border-radius: 16px;
+
+    &.resizable {
+      resize: both;
+    }
   }
 
   ::-webkit-scrollbar {
@@ -126,7 +131,7 @@
     }
   }
 
-  fieldset::after {
+  .terminal.resizable fieldset::after {
     content: "";
 
     position: absolute;

src/routes/+layout.svelte

@@ -26,6 +26,7 @@
     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)
   })
@@ -33,11 +34,14 @@
 
 <Navigation />
 
-<slot />
+<main>
+  <slot />
+</main>
 
 <style lang="scss" global>
   * {
     box-sizing: border-box;
+    appearance: none;
   }
 
   a {
@@ -45,12 +49,32 @@
   }
 
   body {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+
     font-family: "Noto Sans Mono", monospace;
     color: var(--md-sys-color-on-background);
+
     background: var(--md-sys-color-background);
   }
 
+  main {
+    contain: strict;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+
+    padding: 16px;
+  }
+
   h1 {
+    margin-block-start: 0;
     font-size: 4rem;
     font-weight: 900;
     color: var(--md-sys-color-secondary);

src/routes/+page.js

@@ -0,0 +1,7 @@
+import {redirect} from "@sveltejs/kit"
+import {base} from "$app/paths"
+
+/** @type {import("./$types").PageLoad} */
+export function load() {
+  throw redirect(307, `${base}/config`)
+}

src/routes/+page.svelte

@@ -8,39 +8,7 @@
 </svelte:head>
 
 <h1>dot i/o V2</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 
-<h2>Chords</h2>
+<section>
-<p>You have {$chords.length} chords</p>
+  <h2>Layout</h2>
-<table>
+</section>
-  {#each $chords as { phrase, actions }}
-    <tr>
-      <th>{phrase}</th>
-      <td>
-        {#each actions as action}
-          <i>{keySymbols[action] || action}</i>
-        {/each}
-      </td>
-    </tr>
-  {/each}
-</table>
-
-<style lang="scss">
-  table i {
-    display: block;
-
-    aspect-ratio: 1;
-    padding-block: 4px;
-    padding-inline: 8px;
-
-    font-style: normal;
-
-    border: 1px solid var(--md-sys-color-outline);
-    border-radius: 8px;
-  }
-
-  td {
-    display: flex;
-    gap: 4px;
-  }
-</style>

src/routes/config/+layout.svelte

@@ -0,0 +1,57 @@
+<script>
+  import {base} from "$app/paths"
+  import {page} from "$app/stores"
+</script>
+
+<nav>
+  <a href="{base}/config/chords" class:active={$page.url.pathname.endsWith("chords/")}>
+    <span class="icon">piano</span>Chords
+  </a>
+  <a href="{base}/config/layout" class:active={$page.url.pathname.endsWith("layout/")}>
+    <span class="icon">keyboard</span>
+    Layout
+  </a>
+  <a href="{base}/config/settings" class:active={$page.url.pathname.endsWith("settings/")}>
+    <span class="icon">settings</span>
+    Settings
+  </a>
+</nav>
+
+<slot />
+
+<style lang="scss">
+  nav {
+    display: flex;
+    gap: 8px;
+
+    padding: 8px;
+
+    background: var(--md-sys-color-surface-variant);
+    border: none;
+    border-radius: 32px;
+  }
+
+  a {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 8px;
+    padding-inline: 16px;
+
+    font-weight: 800;
+    color: var(--md-sys-color-on-surface-variant);
+    text-decoration: none;
+
+    border-radius: 24px;
+
+    transition: all 250ms ease;
+  }
+
+  a.active {
+    color: var(--md-sys-color-on-primary);
+    background: var(--md-sys-color-primary);
+  }
+</style>

src/routes/config/+page.js

@@ -0,0 +1,7 @@
+import {redirect} from "@sveltejs/kit"
+import {base} from "$app/paths"
+
+/** @type {import("./$types").PageLoad} */
+export function load() {
+  throw redirect(307, `${base}/config/chords`)
+}

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

@@ -0,0 +1,53 @@
+<script>
+  import {chords} from "$lib/serial/connection.js"
+  import keySymbols from "$lib/assets/key-symbols.json"
+</script>
+
+<svelte:head>
+  <title>Chord Manager</title>
+</svelte:head>
+
+<section>
+  <p>You have {$chords.length} chords</p>
+  <table>
+    {#each $chords as { phrase, actions }}
+      <tr>
+        <th>{phrase}</th>
+        <td>
+          {#each actions as action}
+            <i>{keySymbols[action] || action}</i>
+          {/each}
+        </td>
+      </tr>
+    {/each}
+  </table>
+</section>
+
+<style lang="scss">
+  section {
+    position: relative;
+    overflow-y: auto;
+    border-radius: 16px;
+  }
+
+  table i {
+    display: block;
+
+    padding-block: 4px;
+    padding-inline: 8px;
+
+    font-style: normal;
+
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 8px;
+  }
+
+  th {
+    text-align: start;
+  }
+
+  td {
+    display: flex;
+    gap: 4px;
+  }
+</style>

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

@@ -10,70 +10,27 @@
 <h1>Device Manager</h1>
 
 <div class="device-grid">
-  <section>
+  <div class="row">
-    <h2>Control</h2>
+    <button class="secondary">
-    <div class="icon bg">memory</div>
+      {#if $serialPort}
-    <div class="row">
+        <span class="icon">usb_off</span> Disconnect
-      <button disabled class="icon secondary" title="Save changes to device">rule_settings</button>
+      {:else}
-      <button disabled title="Reboot" class="icon">restart_alt</button>
+        <span class="icon">usb</span> Connect
-      <button disabled>
+      {/if}
-        {#if $serialPort}
+    </button>
-          <span class="icon">usb_off</span> Disconnect
+    <button title="Reboot" class="icon">restart_alt</button>
-        {:else}
+    <button class="icon" title="Reboot to bootloader">rule_settings</button>
-          <span class="icon">usb</span> Connect
+  </div>
-        {/if}
+  <div class="terminal">
-      </button>
-    </div>
-    {#if $serialPort}
-      <pre>{#await $serialPort.version then version}{version}{/await}<br
-        />{#await $serialPort.deviceId then id}{id}{/await}</pre>
-    {/if}
-  </section>
-
-  <section>
-    <h2>Layout</h2>
-    <div class="icon bg">keyboard</div>
-    <div class="row">
-      <button class="icon" title="Import Layout">download</button>
-      <button class="icon" title="Export Layout">upload</button>
-    </div>
-  </section>
-
-  <section>
-    <h2>Serial Terminal</h2>
-    <div class="icon bg">terminal</div>
     <Terminal />
-  </section>
+  </div>
 </div>
 
 <style lang="scss">
-  section {
-    position: relative;
-    min-height: 128px;
-    padding: 8px;
-    border-radius: 32px;
-
-    > h2 {
-      font-size: 1.5rem;
-    }
-
-    > div.icon.bg {
-      user-select: none;
-
-      position: absolute;
-      z-index: -1;
-      top: -4px;
-      left: -8px;
-
-      font-size: 64px;
-
-      opacity: 0.05;
-    }
-  }
-
   .row {
     display: flex;
     gap: 8px;
+    height: fit-content;
   }
 
   button {
@@ -119,8 +76,19 @@
     }
   }
 
+  .terminal {
+    flex-grow: 1;
+  }
+
   .device-grid {
-    display: grid;
+    contain: size;
-    grid-template-rows: 1fr 1fr;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 16px;
+
+    width: calc(min(100%, 28cm));
+    height: 100%;
   }
 </style>