Update client launch URI to exercises page

.vscode/launch.json

@@ -30,7 +30,7 @@
       "serverReadyAction": {
         "action": "openExternally",
         "pattern": "\\bNow listening on:\\s+https?://\\[::\\]:(\\d+)",
-        "uriFormat": "http://localhost:%s"
+        "uriFormat": "http://localhost:%s/eHoehDhc/exercises"
       },
       "env": {
         "ASPNETCORE_ENVIRONMENT": "Development"

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">

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;
 }