From 67e7bd8eb45750ed4b04e3892485985524a6b3ae Mon Sep 17 00:00:00 2001
From: Clawd <clawd@homelab.local>
Date: Sun, 1 Feb 2026 14:30:12 +0100
Subject: [PATCH] Dashboard: show workout list when no scheduled workout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 'Välj pass' section with all available workouts
- Compact workout cards with exercise tags
- Click any workout → WorkoutPage
- No more 'Vilodag' - user can always pick a workout
---
 frontend/src/App.css             | 50 ++++++++++++++++++++++++++++++++
 frontend/src/pages/Dashboard.jsx | 32 +++++++++++++-------
 2 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5723abf..44eeacf 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1452,3 +1452,53 @@
     font-size: 0.9rem;
   }
 }
+
+/* ============================================
+   WORKOUT LIST (when no today's workout)
+   ============================================ */
+
+.workout-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.workout-card.compact {
+  padding: 1rem;
+}
+
+.workout-card.compact .workout-card-header {
+  margin-bottom: 0.5rem;
+}
+
+.workout-card.compact .workout-card-header h3 {
+  font-size: 1.1rem;
+}
+
+.workout-day {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.workout-exercises.compact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0;
+}
+
+.exercise-tag {
+  background: var(--bg);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.exercise-tag.more {
+  background: var(--accent);
+  color: white;
+}
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 72a7ad9..166ef69 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -141,7 +141,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
 
         {/* Today's Workout */}
         <section className="todays-workout">
-          <h2>Dagens pass</h2>
+          <h2>{todayWorkout ? 'Dagens pass' : 'Välj pass'}</h2>
           {todayWorkout ? (
             <div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}>
               <div className="workout-card-header">
@@ -161,15 +161,27 @@ function Dashboard({ onStartWorkout, onNavigate }) {
               </button>
             </div>
           ) : (
-            <div className="rest-day-card">
-              <div className="rest-icon">🧘</div>
-              <h3>Vilodag</h3>
-              <p>Inga pass schemalagda. Fokusera på återhämtning!</p>
-              <div className="rest-tips">
-                <span>💤 Sömn</span>
-                <span>🥗 Näring</span>
-                <span>🚶 Lätt rörelse</span>
-              </div>
+            <div className="workout-list">
+              {program?.days?.map((workout) => (
+                <div 
+                  key={workout.id} 
+                  className="workout-card compact"
+                  onClick={() => onStartWorkout(workout)}
+                >
+                  <div className="workout-card-header">
+                    <h3>{workout.name}</h3>
+                    <span className="workout-day">Dag {workout.day_number}</span>
+                  </div>
+                  <div className="workout-exercises compact">
+                    {workout.exercises?.filter(e => e.name).slice(0, 3).map((ex, i) => (
+                      <span key={i} className="exercise-tag">{ex.name}</span>
+                    ))}
+                    {workout.exercises?.filter(e => e.name).length > 3 && (
+                      <span className="exercise-tag more">+{workout.exercises.filter(e => e.name).length - 3}</span>
+                    )}
+                  </div>
+                </div>
+              ))}
             </div>
           )}
         </section>