chord display site

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>