train routes

src/lib/components/Navigation.svelte

@@ -2,18 +2,29 @@
   import {serialPort, syncing} from "$lib/serial/connection"
   import {browser} from "$app/environment"
   import {page} from "$app/stores"
+
+  const training = [
+    {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"},
+    {slug: "chords", title: "ChM - Chords Mastered", icon: "piano"},
+    {slug: "avg-wpm", title: "aWPM - Average Words Per Minute", icon: "avg_pace"},
+    {slug: "sentences", title: "StM - Sentences Mastered", icon: "lyrics"},
+    {slug: "top-wpm", title: "tWPM - Top Words Per Minute", icon: "speed"},
+    {slug: "cm", title: "CM - Concepts Mastered", icon: "cognition"},
+  ]
 </script>
 
 <nav>
   <a href="/" class="title">dot i/o</a>
 
   <div class="steps">
-    <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>
+    {#each training as { slug, title, icon }}
+      <a
+        href="/train/{slug}/"
+        {title}
+        class="icon train {slug}"
+        class:active={$page.url.pathname === `/train/${slug}/`}>{icon}</a
+      >
+    {/each}
   </div>
 
   <div class="actions">
@@ -106,6 +117,7 @@
       clip-path: polygon(25% 50%, 0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
       border-radius: 0;
 
+      &.active,
       &:active {
         color: var(--md-sys-color-on-tertiary);
         background: var(--md-sys-color-tertiary);

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

@@ -34,11 +34,10 @@
 </svelte:head>
 
 {#if searchIndex}
-  <input on:input={search} type="search" placeholder="Search chords" />
+  <input on:input={search} type="search" placeholder="Search {$chords.length} chords" />
 {/if}
 
 <section>
-  <p>You have {$chords.length} chords</p>
   <table>
     {#each items.slice(0, 50) as [{ phrase, actions }, i]}
       <tr style="view-transition-name: chord-{i}">

src/routes/train/+page.ts

@@ -0,0 +1,6 @@
+import {redirect} from "@sveltejs/kit"
+import type {PageLoad} from "./$types"
+
+export const load = (() => {
+  throw redirect(302, "/train/cpm/")
+}) satisfies PageLoad