Display the same date formatting on all views

src/lib/CardioProgress.svelte

@@ -1,18 +1,15 @@
 <script lang="ts">
-    import { cardio, currentView } from "./store";
+    import { cardio } from "./store";
+    import {dm, back } from "./common";
     const remaining = $cardio.length;
     const days = ["ons", "fre", "mån"];
     let done = $derived($cardio.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
 </script>
 
     <header>
     <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Cardio {done}/{remaining}
+        Konditionsträning: {done} av {remaining}
     </h1>
     </header>
 <main>
@@ -27,7 +24,7 @@
                             .map((m) => `${m} min`)
                             .join(" + ")}, {col.pause_for} vila</strong
                     >
-                    <small>{days[i % 3]} {col.planned_at}</small>
+                    <small>{days[i % 3]} {dm(col.planned_at)}</small>
                 </label>
             </article>
         {/each}

src/lib/DietProgress.svelte

@@ -1,24 +1,14 @@
 <script lang="ts">
-    import { diet, currentView } from "./store";
+    import { diet } from "./store";
+    import { dm, back } from "./common";
     const dayscount = $diet.days.length;
     let done = $derived($diet.days.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
-
-    const M = ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
-
-    const dm = (date) => {
-        const d = new Date(date)
-        return `${d.getDate()} ${M[d.getMonth()]}`
-    }
 </script>
 
     <header>
     <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Diet {done}/{dayscount}
+        Diet: {done} av {dayscount}
     </h1>
     </header>
 <main>

src/lib/GymProgress.svelte

@@ -1,28 +1,26 @@
 <script lang="ts">
-    import { gym, currentView } from "./store";
+    import { gym } from "./store";
+    import {dm, back } from "./common";
     const remaining = $gym.length;
+    const days = ["sön", "tis", "tor"];
     let done = $derived($gym.filter((c) => c.completed).length);
-
-    const back = () => {
-        currentView.update((_) => 0);
-    };
 </script>
 
 <header>
     <button class="clickable back" onclick={() => back()}>←</button>
     <h1>
-        Gym {done}/{remaining}
+        Styrketräning: {done} av {remaining}
     </h1>
 </header>
 <main>
     <progress hidden max={remaining} value={done}></progress>
     <div class="calendar">
-        {#each $gym as col}
+        {#each $gym as col, i}
             <article class="clickable">
                 <label>
                     <input type="checkbox" bind:checked={col.completed} />
                     <strong>{col.name}</strong>
-                    <small>{col.planned_at}</small>
+                    <small>{days[i % 3]} {dm(col.planned_at)}</small>
                 </label>
             </article>
         {/each}

src/lib/Info.svelte

@@ -63,6 +63,10 @@
 </main>
 
 <style>
+  h1 {
+    padding-left: 0;
+    margin: .5em 0;
+  }
   h2 {
     margin-bottom: 0;
   }
@@ -72,7 +76,7 @@
   }
   
   .infobox {
-    margin: 0.5em;
+    margin: 0.1em;
     background-color: #fff;
     border: 2px solid #aaa;
     border-radius: 8px;

src/lib/Summary.svelte

@@ -13,18 +13,19 @@
 <h1>Dags att komma i form!</h1>
 <div class="cards">
   <button class="clickable gym" onclick={() => navigate(1)}>
-    <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
+    <i>{gymProgress}</i> / {$gym.length} <span>styrketräning</span>
   </button>
   <button class="clickable cardio" onclick={() => navigate(2)}>
     <i>{cardioProgress}</i> / {$cardio.length}
-    <span>löppass lufsade</span>
+    <span>Konditionsträning</span>
   </button>
   <button class="clickable diet" onclick={() => navigate(3)}>
     <i>{dietProgress}</i> / {$diet.days.length}
-    <span>dagar på diet</span>
+    <span>Dietdagar</span>
   </button>
   <button class="clickable info" onclick={() => navigate(4)}>
     <i>?</i>
+    <span>Va?</span>
   </button>
 </div>
 </main>

src/lib/common.ts

@@ -0,0 +1,25 @@
+import { currentView } from "./store";
+
+const M = [
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "maj",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "okt",
+  "nov",
+  "dec",
+];
+
+export const back = () => {
+  currentView.update((_) => 0);
+};
+
+export const dm = (date) => {
+  const d = new Date(date);
+  return `${d.getDate()} ${M[d.getMonth()]}`;
+};