Dashboard: show workout list when no scheduled workout

- '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
This commit is contained in:
2026-02-01 14:30:12 +01:00
parent 9a34bb2e44
commit aa2bcee061
2 changed files with 72 additions and 10 deletions
+50
View File
@@ -1452,3 +1452,53 @@
font-size: 0.9rem; 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;
}
+22 -10
View File
@@ -141,7 +141,7 @@ function Dashboard({ onStartWorkout, onNavigate }) {
{/* Today's Workout */} {/* Today's Workout */}
<section className="todays-workout"> <section className="todays-workout">
<h2>Dagens pass</h2> <h2>{todayWorkout ? 'Dagens pass' : 'Välj pass'}</h2>
{todayWorkout ? ( {todayWorkout ? (
<div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}> <div className="workout-card" onClick={() => onStartWorkout(todayWorkout)}>
<div className="workout-card-header"> <div className="workout-card-header">
@@ -161,15 +161,27 @@ function Dashboard({ onStartWorkout, onNavigate }) {
</button> </button>
</div> </div>
) : ( ) : (
<div className="rest-day-card"> <div className="workout-list">
<div className="rest-icon">🧘</div> {program?.days?.map((workout) => (
<h3>Vilodag</h3> <div
<p>Inga pass schemalagda. Fokusera återhämtning!</p> key={workout.id}
<div className="rest-tips"> className="workout-card compact"
<span>💤 Sömn</span> onClick={() => onStartWorkout(workout)}
<span>🥗 Näring</span> >
<span>🚶 Lätt rörelse</span> <div className="workout-card-header">
</div> <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> </div>
)} )}
</section> </section>