From 55f10fba9f2820b8778eb708ab64acedaeb9a8b9 Mon Sep 17 00:00:00 2001
From: troogs <gitea@beging.de>
Date: Sat, 7 Feb 2026 18:11:19 +0100
Subject: [PATCH] Enhance exercise selection UI in Routines page

---
 src/ASTRAIN.Client/Pages/Routines.razor | 18 ++++++++-------
 src/ASTRAIN.Client/wwwroot/css/app.css  | 30 +++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/ASTRAIN.Client/Pages/Routines.razor b/src/ASTRAIN.Client/Pages/Routines.razor
index e96891b..f23f10d 100644
--- a/src/ASTRAIN.Client/Pages/Routines.razor
+++ b/src/ASTRAIN.Client/Pages/Routines.razor
@@ -36,10 +36,11 @@
                     <div class="list">
                         @foreach (var exercise in ExerciseList)
                         {
-                            <label class="checkbox-row">
-                                <input type="checkbox" checked="@SelectedExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleExercise(exercise.Id)" />
-                                <span>@exercise.Name</span>
-                            </label>
+                            var isSelected = SelectedExerciseIds.Contains(exercise.Id);
+                            <div class="list-item selectable @(isSelected ? "selected" : string.Empty)" @onclick="() => ToggleExercise(exercise.Id)">
+                                <div class="item-title">@exercise.Name</div>
+                                <span class="check-icon @(isSelected ? "visible" : string.Empty)" aria-hidden="true">✓</span>
+                            </div>
                         }
                     </div>
                     <button class="primary" @onclick="CreateRoutineAsync" disabled="@string.IsNullOrWhiteSpace(NewRoutineName)">Save Routine</button>
@@ -91,10 +92,11 @@
                 <div class="list">
                     @foreach (var exercise in ExerciseList)
                     {
-                        <label class="checkbox-row">
-                            <input type="checkbox" checked="@EditingExerciseIds.Contains(exercise.Id)" @onchange="() => ToggleEditExercise(exercise.Id)" />
-                            <span>@exercise.Name</span>
-                        </label>
+                        var isSelected = EditingExerciseIds.Contains(exercise.Id);
+                        <div class="list-item selectable @(isSelected ? "selected" : string.Empty)" @onclick="() => ToggleEditExercise(exercise.Id)">
+                            <div class="item-title">@exercise.Name</div>
+                            <span class="check-icon @(isSelected ? "visible" : string.Empty)" aria-hidden="true">✓</span>
+                        </div>
                     }
                 </div>
                 <div class="actions">
diff --git a/src/ASTRAIN.Client/wwwroot/css/app.css b/src/ASTRAIN.Client/wwwroot/css/app.css
index a402999..af2220f 100644
--- a/src/ASTRAIN.Client/wwwroot/css/app.css
+++ b/src/ASTRAIN.Client/wwwroot/css/app.css
@@ -139,6 +139,36 @@ p {
     border-color: #1f6b38;
 }
 
+.list-item.selectable {
+    cursor: pointer;
+}
+
+.list-item.selected {
+    background: #10331a;
+    border-color: #1f6b38;
+}
+
+.check-icon {
+    width: 26px;
+    height: 26px;
+    border-radius: 999px;
+    border: 1px solid #2a2a2a;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: #ffffff;
+    opacity: 0;
+    transform: scale(0.85);
+    transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
+}
+
+.check-icon.visible {
+    opacity: 1;
+    transform: scale(1);
+    border-color: #1f6b38;
+}
+
 .item-title {
     font-weight: 600;
 }