terminal improvements

src/lib/components/Navigation.svelte

@@ -7,12 +7,12 @@
   <h1>dot i/o</h1>
 
   <div class="steps">
-    <a href="/train/cpm" title="CPM - characters per minute" class="icon train cpm">music_note</a>
-    <a href="/train/chm" title="ChM - chords mastered" class="icon train chords">piano</a>
-    <a href="/train/avg-wpm" title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
-    <a href="/train/stm" title="StM - sentences mastered" class="icon train sentences">lyrics</a>
-    <a href="/train/top-wpm" title="tWPM - top words per minute" class="icon test top">speed</a>
-    <a href="/train/cm" title="CM - concepts mastered" class="icon train concepts">cognition</a>
+    <a href="/" title="CPM - characters per minute" class="icon train cpm">music_note</a>
+    <a href="/" title="ChM - chords mastered" class="icon train chords">piano</a>
+    <a href="/" title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
+    <a href="/" title="StM - sentences mastered" class="icon train sentences">lyrics</a>
+    <a href="/" title="tWPM - top words per minute" class="icon test top">speed</a>
+    <a href="/" title="CM - concepts mastered" class="icon train concepts">cognition</a>
   </div>
 
   <div class="actions">

src/lib/components/Terminal.svelte

@@ -3,40 +3,36 @@
   import {slide} from "svelte/transition"
 
   /**
-   * @param event {KeyboardEvent}
+   * @param event {InputEvent}
    */
-  function keypress(event) {
-    if (event.code === "Enter") {
-      event.preventDefault()
-      const command = prompt.textContent.trim()
-      prompt.textContent = ""
-      $serialPort.send(command)
-      io.scrollTo({top: io.scrollHeight})
-    }
+  function submit(event) {
+    event.preventDefault()
+    $serialPort.send(value.trim())
+    value = ""
+    io.scrollTo({top: io.scrollHeight})
   }
 
-  /** @type {HTMLSpanElement} */
-  let prompt
+  /** @type {string} */
+  let value
 
   /** @type {HTMLDivElement} */
   let io
 </script>
 
-<div class="terminal" tabindex="0" on:focus={() => prompt.focus()}>
+<form on:submit={submit}>
   <div bind:this={io} class="io">
     {#each $serialLog as { type, value }}
       <p class={type} transition:slide>{value}</p>
     {/each}
     <div class="anchor" />
   </div>
-  <div class="prompt">
-    <b>$</b><span on:keypress={keypress} bind:this={prompt} contenteditable class="prompt" />
-    <div class="resize-me" />
-  </div>
-</div>
+  <fieldset>
+    <input on:submit={submit} bind:value />
+  </fieldset>
+</form>
 
 <style lang="scss">
-  .terminal {
+  form {
     resize: both;
 
     position: relative;
@@ -52,7 +48,6 @@
     font-size: 0.75rem;
     color: var(--md-sys-color-on-secondary);
 
-    background: var(--md-sys-color-secondary);
     border-radius: 16px;
   }
 
@@ -71,7 +66,35 @@
     display: none;
   }
 
+  fieldset::before {
+    content: "$";
+
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+
+    font-weight: 900;
+  }
+
+  input {
+    width: 100%;
+    margin-block-start: -16px;
+    padding: 8px;
+    padding-block-start: 24px;
+    padding-inline-start: calc(8px + 1.5ch);
+
+    font-family: "Noto Sans Mono", monospace;
+    font-weight: 600;
+    color: var(--md-sys-color-on-secondary);
+
+    appearance: none;
+    background: var(--md-sys-color-secondary);
+    border: none;
+  }
+
   .io {
+    z-index: 1;
+
     overflow-y: auto;
     flex: 1;
 
@@ -87,15 +110,28 @@
     outline: none;
   }
 
-  .prompt {
+  fieldset {
+    all: unset;
+
     position: relative;
-    margin: 0.5rem;
+
+    display: block;
+
+    opacity: 0.8;
+
+    transition: opacity 250ms ease;
+
+    &:focus-within {
+      opacity: 1;
+    }
   }
 
-  .resize-me {
+  fieldset::after {
+    content: "";
+
     position: absolute;
-    right: -2px;
-    bottom: 0;
+    right: 6px;
+    bottom: 8px;
     rotate: -45deg;
 
     width: 10px;

src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true

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

@@ -119,21 +119,11 @@
       border-radius: 50%;
     }
 
-    &.primary {
-      color: var(--md-sys-color-on-primary);
-      background: var(--md-sys-color-primary);
-    }
-
     &.secondary {
       color: var(--md-sys-color-on-secondary);
       background: var(--md-sys-color-secondary);
     }
 
-    &.tertiary {
-      color: var(--md-sys-color-on-tertiary);
-      background: var(--md-sys-color-tertiary);
-    }
-
     &:hover:not(:disabled) {
       color: var(--md-sys-color-on-surface-variant);
       background: var(--md-sys-color-surface-variant);