From dbd02e9decf5c01e38fd2bfa6ca21c0e6337b5b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Sat, 8 Jul 2023 00:05:26 +0200
Subject: [PATCH] train routes

---
 src/lib/components/Navigation.svelte  | 24 ++++++++++++++++++------
 src/routes/config/chords/+page.svelte |  3 +--
 src/routes/train/+page.ts             |  6 ++++++
 src/routes/train/[mode]/+page.svelte  |  0
 4 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src/routes/train/+page.ts
 create mode 100644 src/routes/train/[mode]/+page.svelte

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 97c57237..3271c142 100644
--- a/src/lib/components/Navigation.svelte
+++ b/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);
diff --git a/src/routes/config/chords/+page.svelte b/src/routes/config/chords/+page.svelte
index d2f51ab5..e49b8529 100644
--- a/src/routes/config/chords/+page.svelte
+++ b/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}">
diff --git a/src/routes/train/+page.ts b/src/routes/train/+page.ts
new file mode 100644
index 00000000..41525e39
--- /dev/null
+++ b/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
diff --git a/src/routes/train/[mode]/+page.svelte b/src/routes/train/[mode]/+page.svelte
new file mode 100644
index 00000000..e69de29b