From f45b4c501f31d564a975d3060cc49aaca7de3b4d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 10:58:13 +0000
Subject: [PATCH 01/14] Initial plan


From 5e849694787854179c9e3a5fa4cfdba3e56a8efa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 11:08:30 +0000
Subject: [PATCH 02/14] Implement interactive HIIT rounds functionality with
 timer and round tracking

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/lib/stores.ts                        |  22 ++
 src/lib/types.ts                         |  11 +
 src/routes/settings/ResetProgress.svelte |  11 +
 src/routes/workout/+page.svelte          |  11 +
 src/routes/workout/CardioWorkouts.svelte | 267 ++++++++++++++++++++++-
 5 files changed, 317 insertions(+), 5 deletions(-)

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index eec27f8..beade61 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -22,6 +22,17 @@ interface UIState {
     startTime: number
     pausedTime: number
   }
+  hiitTimer: {
+    isActive: boolean
+    isPaused: boolean
+    timeLeft: number
+    totalTime: number
+    startTime: number
+    pausedTime: number
+    currentRound: number
+    totalRounds: number
+    roundCompleted: boolean
+  }
 }
 
 interface WorkoutState {
@@ -199,6 +210,17 @@ const defaultUIState: UIState = {
     totalTime: 0,
     startTime: 0,
     pausedTime: 0
+  },
+  hiitTimer: {
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0,
+    currentRound: 0,
+    totalRounds: 0,
+    roundCompleted: false
   }
 }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6c4ab3f..455da04 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -85,6 +85,17 @@ export interface AppState {
     startTime: number;
     pausedTime: number;
   };
+  hiitTimer: {
+    isActive: boolean;
+    isPaused: boolean;
+    timeLeft: number;
+    totalTime: number;
+    startTime: number;
+    pausedTime: number;
+    currentRound: number;
+    totalRounds: number;
+    roundCompleted: boolean;
+  };
 }
 
 export interface WarmupSet {
diff --git a/src/routes/settings/ResetProgress.svelte b/src/routes/settings/ResetProgress.svelte
index 9a3ceb7..ce22441 100644
--- a/src/routes/settings/ResetProgress.svelte
+++ b/src/routes/settings/ResetProgress.svelte
@@ -43,6 +43,17 @@
           totalTime: 0,
           startTime: 0,
           pausedTime: 0
+        },
+        hiitTimer: {
+          isActive: false,
+          isPaused: false,
+          timeLeft: 0,
+          totalTime: 0,
+          startTime: 0,
+          pausedTime: 0,
+          currentRound: 0,
+          totalRounds: 0,
+          roundCompleted: false
         }
       })
       
diff --git a/src/routes/workout/+page.svelte b/src/routes/workout/+page.svelte
index 9149e29..5d6da19 100644
--- a/src/routes/workout/+page.svelte
+++ b/src/routes/workout/+page.svelte
@@ -91,6 +91,17 @@
           totalTime: 0,
           startTime: 0,
           pausedTime: 0
+        },
+        hiitTimer: {
+          isActive: false,
+          isPaused: false,
+          timeLeft: 0,
+          totalTime: 0,
+          startTime: 0,
+          pausedTime: 0,
+          currentRound: 0,
+          totalRounds: 0,
+          roundCompleted: false
         }
       }))
       
diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
index c383ccd..9ac94b0 100644
--- a/src/routes/workout/CardioWorkouts.svelte
+++ b/src/routes/workout/CardioWorkouts.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Workout, CardioWorkout } from '$lib/types'
-  import { Play, Pause, Square } from 'lucide-svelte'
+  import { Play, Pause, Square, SkipForward, CheckCircle } from 'lucide-svelte'
   import { showRestCompleteNotification } from '$lib/utils'
   import { uiStore } from '$lib/stores'
 
@@ -35,7 +35,10 @@
   // LiSS Timer functionality
   const lissTimer = $derived($uiStore.lissTimer)
   
-  // Update store function
+  // HIIT Timer functionality
+  const hiitTimer = $derived($uiStore.hiitTimer)
+  
+  // Update store functions
   const updateLissTimer = (updates: Partial<typeof lissTimer>) => {
     uiStore.update(state => ({
       ...state,
@@ -43,6 +46,13 @@
     }))
   }
 
+  const updateHiitTimer = (updates: Partial<typeof hiitTimer>) => {
+    uiStore.update(state => ({
+      ...state,
+      hiitTimer: { ...state.hiitTimer, ...updates }
+    }))
+  }
+
   // Start LiSS timer function
   const startLissTimer = () => {
     const duration = cardioWorkout().duration
@@ -92,6 +102,93 @@
     })
   }
 
+  // HIIT Timer functions
+  const startHiitTimer = () => {
+    const workout = cardioWorkout()
+    const duration = workout.duration
+    const rounds = workout.rounds
+    
+    if (duration === undefined || rounds === undefined) return
+    
+    const durationInSeconds = duration
+    const now = Date.now()
+    
+    if (hiitTimer.isPaused) {
+      // Resume from pause
+      updateHiitTimer({
+        isActive: true,
+        isPaused: false,
+        startTime: now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
+      })
+    } else if (hiitTimer.currentRound === 0) {
+      // Start fresh
+      updateHiitTimer({
+        isActive: true,
+        isPaused: false,
+        timeLeft: durationInSeconds,
+        totalTime: durationInSeconds,
+        startTime: now,
+        pausedTime: 0,
+        currentRound: 1,
+        totalRounds: rounds,
+        roundCompleted: false
+      })
+    } else {
+      // Continue to next round
+      updateHiitTimer({
+        isActive: true,
+        isPaused: false,
+        timeLeft: durationInSeconds,
+        totalTime: durationInSeconds,
+        startTime: now,
+        pausedTime: 0,
+        roundCompleted: false
+      })
+    }
+  }
+
+  const pauseHiitTimer = () => {
+    updateHiitTimer({
+      isActive: false,
+      isPaused: true,
+      pausedTime: Date.now()
+    })
+  }
+
+  const stopHiitTimer = () => {
+    updateHiitTimer({
+      isActive: false,
+      isPaused: false,
+      timeLeft: 0,
+      totalTime: 0,
+      startTime: 0,
+      pausedTime: 0,
+      currentRound: 0,
+      totalRounds: 0,
+      roundCompleted: false
+    })
+  }
+
+  const completeCurrentRound = () => {
+    if (hiitTimer.currentRound < hiitTimer.totalRounds) {
+      updateHiitTimer({
+        isActive: false,
+        isPaused: false,
+        currentRound: hiitTimer.currentRound + 1,
+        roundCompleted: true,
+        timeLeft: 0
+      })
+    } else {
+      // All rounds completed
+      updateHiitTimer({
+        isActive: false,
+        isPaused: false,
+        roundCompleted: true,
+        timeLeft: 0
+      })
+    }
+  }
+
   // Timer interval effect - timestamp-based to prevent background throttling
   $effect(() => {
     let interval: number | undefined
@@ -120,6 +217,33 @@
     }
   })
 
+  // HIIT Timer interval effect - timestamp-based to prevent background throttling
+  $effect(() => {
+    let interval: number | undefined
+    
+    if (hiitTimer.isActive && hiitTimer.timeLeft > 0) {
+      interval = setInterval(() => {
+        const now = Date.now()
+        const elapsedSeconds = Math.floor((now - hiitTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, hiitTimer.totalTime - elapsedSeconds)
+        
+        updateHiitTimer({ timeLeft: newTimeLeft })
+      }, 100) // Check more frequently for smoother updates
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  })
+
+  // HIIT Timer completion effect
+  $effect(() => {
+    if (hiitTimer.isActive && hiitTimer.timeLeft === 0) {
+      showRestCompleteNotification()
+      completeCurrentRound()
+    }
+  })
+
   // Derived timer display values
   const displayDuration = $derived(() => {
     if (workout.type === 'liss' && cardioWorkout().duration !== undefined) {
@@ -140,6 +264,41 @@
     return workout.type === 'liss' && cardioWorkout().duration !== undefined
   })
 
+  const showHiitControls = $derived(() => {
+    return workout.type === 'hiit' && cardioWorkout().duration !== undefined && cardioWorkout().rounds !== undefined
+  })
+
+  // HIIT timer display values
+  const hiitDisplayTime = $derived(() => {
+    if (workout.type === 'hiit' && showHiitControls()) {
+      if (hiitTimer.isActive || hiitTimer.isPaused || hiitTimer.timeLeft > 0) {
+        // Show countdown timer
+        const minutes = Math.floor(hiitTimer.timeLeft / 60)
+        const seconds = hiitTimer.timeLeft % 60
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`
+      } else {
+        // Show initial duration
+        return cardioWorkout().duration
+      }
+    }
+    return cardioWorkout().duration
+  })
+
+  const hiitRoundDisplay = $derived(() => {
+    if (workout.type === 'hiit' && cardioWorkout().rounds !== undefined) {
+      if (hiitTimer.totalRounds > 0) {
+        return `Round ${hiitTimer.currentRound} of ${hiitTimer.totalRounds}`
+      } else {
+        return `${cardioWorkout().rounds} rounds`
+      }
+    }
+    return ''
+  })
+
+  const hiitWorkoutComplete = $derived(() => {
+    return hiitTimer.totalRounds > 0 && hiitTimer.currentRound > hiitTimer.totalRounds
+  })
+
   // Derived button states for conditional styling
   const buttonStates = $derived(() => {
     const isStartDisabled = lissTimer.isActive
@@ -167,6 +326,43 @@
       }
     }
   })
+
+  // HIIT button states for conditional styling
+  const hiitButtonStates = $derived(() => {
+    const isStartDisabled = hiitTimer.isActive
+    const isPauseDisabled = !hiitTimer.isActive
+    const isStopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
+    const isNextRoundDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || hiitWorkoutComplete()
+    
+    return {
+      start: {
+        disabled: isStartDisabled,
+        text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
+        class: isStartDisabled 
+          ? 'flex-1 bg-green-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      },
+      pause: {
+        disabled: isPauseDisabled,
+        class: isPauseDisabled
+          ? 'flex-1 bg-yellow-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      },
+      stop: {
+        disabled: isStopDisabled,
+        class: isStopDisabled
+          ? 'flex-1 bg-red-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'flex-1 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      },
+      nextRound: {
+        disabled: isNextRoundDisabled,
+        class: isNextRoundDisabled
+          ? 'w-full bg-blue-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
+          : 'w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+      }
+    }
+  })
 </script>
 
 {#if workout.type === 'liss' || workout.type === 'hiit'}
@@ -176,7 +372,13 @@
         {cardioWorkout().activity}
       </h3>
       {#if cardioWorkout().duration !== undefined}
-        <div class="text-4xl font-bold">{displayDuration()}</div>
+        <div class="text-4xl font-bold">
+          {#if workout.type === 'hiit' && showHiitControls()}
+            {hiitDisplayTime()}
+          {:else}
+            {displayDuration()}
+          {/if}
+        </div>
         <div class="text-sm opacity-90 mt-1">
           {#if workout.type === 'liss'}
             minutes
@@ -197,13 +399,24 @@
       {/if}
       {#if cardioWorkout().rounds !== undefined}
         <div class="text-2xl font-semibold mt-2">
-          {cardioWorkout().rounds} rounds
+          {#if workout.type === 'hiit' && showHiitControls()}
+            {hiitRoundDisplay()}
+          {:else}
+            {cardioWorkout().rounds} rounds
+          {/if}
+        </div>
+      {/if}
+      
+      {#if workout.type === 'hiit' && hiitWorkoutComplete()}
+        <div class="text-green-300 text-lg font-semibold mt-2 flex items-center justify-center gap-2">
+          <CheckCircle class="w-6 h-6" />
+          All Rounds Complete!
         </div>
       {/if}
     </div>
     
     {#if showTimerControls()}
-      <!-- Timer control buttons -->
+      <!-- LISS Timer control buttons -->
       <div class="flex gap-2 mt-4">
         <button 
           onclick={buttonStates().start.disabled ? undefined : startLissTimer} 
@@ -232,6 +445,50 @@
       </div>
     {/if}
     
+    {#if showHiitControls()}
+      <!-- HIIT Timer control buttons -->
+      <div class="flex gap-2 mt-4">
+        <button 
+          onclick={hiitButtonStates().start.disabled ? undefined : startHiitTimer} 
+          disabled={hiitButtonStates().start.disabled}
+          class={hiitButtonStates().start.class}
+        >
+          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+          {hiitButtonStates().start.text}
+        </button>
+        <button 
+          onclick={hiitButtonStates().pause.disabled ? undefined : pauseHiitTimer} 
+          disabled={hiitButtonStates().pause.disabled}
+          class={hiitButtonStates().pause.class}
+        >
+          <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+          Pause
+        </button>
+        <button 
+          onclick={hiitButtonStates().stop.disabled ? undefined : stopHiitTimer} 
+          disabled={hiitButtonStates().stop.disabled}
+          class={hiitButtonStates().stop.class}
+        >
+          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+          Reset
+        </button>
+      </div>
+      
+      {#if hiitTimer.roundCompleted && !hiitWorkoutComplete()}
+        <!-- Next Round button -->
+        <div class="mt-4">
+          <button 
+            onclick={hiitButtonStates().nextRound.disabled ? undefined : startHiitTimer} 
+            disabled={hiitButtonStates().nextRound.disabled}
+            class={hiitButtonStates().nextRound.class}
+          >
+            <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
+            Start Round {hiitTimer.currentRound}
+          </button>
+        </div>
+      {/if}
+    {/if}
+    
     <button 
       onclick={onCompleteWorkout} 
       class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-colors mt-4"

From 04671b0b97f27a6b8bbf381b845c83c3747c0d2b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 11:58:01 +0000
Subject: [PATCH 03/14] Refactor timer state management and add Get Ready block

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 TESTING.md                               | 211 +++++++++++++++++++++++
 src/lib/blockTemplates.ts                |   9 +
 src/lib/stores.ts                        |  39 +----
 src/lib/types.ts                         |  19 --
 src/routes/settings/ResetProgress.svelte |  20 +--
 src/routes/workout/CardioWorkouts.svelte | 185 +++++++++-----------
 6 files changed, 304 insertions(+), 179 deletions(-)
 create mode 100644 TESTING.md

diff --git a/TESTING.md b/TESTING.md
new file mode 100644
index 0000000..5d61c6e
--- /dev/null
+++ b/TESTING.md
@@ -0,0 +1,211 @@
+# Testing Guide - Unbroken Tactical Barbell Tracker
+
+This guide explains how to test different workouts and training blocks without manually progressing through the entire program.
+
+## Testing Different Workouts via IndexedDB
+
+The app stores workout progress in IndexedDB, which can be modified directly in the browser to test different workout types (HIIT, LISS, strength, etc.) without completing entire blocks.
+
+### Method 1: Browser DevTools (Recommended)
+
+1. **Start the development server:**
+   ```bash
+   npm run dev
+   ```
+
+2. **Open the app in your browser:**
+   - Navigate to http://localhost:5173
+
+3. **Open Browser DevTools:**
+   - Press F12 or right-click → Inspect
+   - Go to the "Application" tab (Chrome) or "Storage" tab (Firefox)
+
+4. **Navigate to IndexedDB:**
+   - Expand "IndexedDB" in the left sidebar
+   - Find "UnbrokenTracker" database
+   - Expand it to see object stores:
+     - `workoutState` - Contains current progress (week, day, completed workouts)
+     - `trainingPlanState` - Contains the custom training plan
+     - `exerciseState` - Contains maxes and rep maxes
+     - `preferencesState` - Contains user preferences
+
+5. **Modify workout progress:**
+   - Click on `workoutState` object store
+   - Find the record with key "data"
+   - Double-click the value to edit the JSON
+   - Modify these fields:
+     ```json
+     {
+       "currentWeek": 1,     // Week number (1-based)
+       "currentDay": 1,      // Day number (1-based, 1-7 for each week)
+       "completedWorkouts": [], // Array of completed workouts
+       "completedSets": {}   // Object tracking completed sets
+     }
+     ```
+
+6. **Examples of useful test values:**
+
+   **Test HIIT workouts (Powerbuilding Block 3):**
+   ```json
+   {
+     "currentWeek": 1,
+     "currentDay": 3,
+     "completedWorkouts": [],
+     "completedSets": {}
+   }
+   ```
+
+   **Test different HIIT variations:**
+   ```json
+   {
+     "currentWeek": 2,
+     "currentDay": 3,
+     "completedWorkouts": [],
+     "completedSets": {}
+   }
+   ```
+
+   **Test LISS workouts (Endurance Block):**
+   ```json
+   {
+     "currentWeek": 1,
+     "currentDay": 2,
+     "completedWorkouts": [],
+     "completedSets": {}
+   }
+   ```
+
+7. **Refresh the page:**
+   - After modifying IndexedDB values, refresh the browser page
+   - Navigate to the "Workout" tab
+   - Click "Start Today's Workout" to see the modified workout
+
+### Method 2: Console Commands
+
+You can also modify the workout state programmatically using the browser console:
+
+1. **Open Browser Console:**
+   - Press F12 → Console tab
+
+2. **Get current state:**
+   ```javascript
+   // Open IndexedDB and read current state
+   const request = indexedDB.open('UnbrokenTracker', 1);
+   request.onsuccess = function(event) {
+     const db = event.target.result;
+     const transaction = db.transaction(['workoutState'], 'readonly');
+     const store = transaction.objectStore('workoutState');
+     const getRequest = store.get('data');
+     getRequest.onsuccess = function() {
+       console.log('Current workout state:', getRequest.result);
+     };
+   };
+   ```
+
+3. **Set new state:**
+   ```javascript
+   // Modify workout state to test different workouts
+   const request = indexedDB.open('UnbrokenTracker', 1);
+   request.onsuccess = function(event) {
+     const db = event.target.result;
+     const transaction = db.transaction(['workoutState'], 'readwrite');
+     const store = transaction.objectStore('workoutState');
+     
+     const newState = {
+       currentWeek: 1,    // Change this
+       currentDay: 3,     // Change this (day 3 often has HIIT in powerbuilding blocks)
+       completedWorkouts: [],
+       completedSets: {}
+     };
+     
+     store.put(newState, 'data');
+     console.log('Updated workout state:', newState);
+     // Refresh the page after this
+   };
+   ```
+
+## Available Workout Types by Block and Day
+
+### Get Ready Block (Week 1)
+- Day 1: Rest day
+
+### Endurance Block 1 (Weeks 1-8)
+- Days 1, 3, 5: Strength workouts (Overhead Press, Front Squat, Weighted Pull-up)
+- Days 2, 4, 6: LISS cardio (running, various durations)
+- Day 7: Rest
+
+### Powerbuilding Block 3 (Weeks 1-3) - Contains HIIT
+- Days 1, 4: Strength + Hypertrophy workouts
+- **Day 3: HIIT workout** - "Reset-20" activity
+  - Week 1: 20 seconds, 5 rounds
+  - Week 2: 15 seconds, 4 rounds  
+  - Week 3: 15 seconds, 4 rounds
+- Days 2, 5: Hypertrophy workouts
+- Days 6, 7: Rest
+
+### Bodybuilding Block (Weeks 1-3)
+- Days 1, 3, 4: Hypertrophy workouts
+- Day 2, 5: Hypertrophy workouts
+- **Day 3: HIIT workout** - "Hill Sprints"
+  - Week 1: 3 rounds
+  - Week 2: 5 rounds
+  - Week 3: 7 rounds
+- Days 6, 7: Rest
+
+### Strength Block (Weeks 1-6)
+- Days 1, 2, 4, 5: Strength workouts
+- **Days 3, 6: HIIT workouts** - Various activities (Tempo Run, 600m Resets, GC 9)
+- Day 7: Rest
+
+## Quick Testing Scenarios
+
+### Test HIIT Timer Functionality
+1. Set `currentWeek: 1, currentDay: 3` (Powerbuilding Block 3)
+2. Refresh page and start workout
+3. Test round progression, pause/resume, reset functionality
+
+### Test LISS Timer Functionality  
+1. Set `currentWeek: 1, currentDay: 2` (Endurance Block 1)
+2. Refresh page and start workout
+3. Test timer countdown, pause/resume functionality
+
+### Test Different HIIT Variations
+1. **Short rounds:** Set to Powerbuilding Block 3, Week 2/3 (15s rounds)
+2. **Longer rounds:** Set to Powerbuilding Block 3, Week 1 (20s rounds)
+3. **Different activities:** Set to Strength Block for "Tempo Run" or "600m Resets"
+
+## Reset Progress for Clean Testing
+
+To start fresh testing:
+
+1. **Via Settings Page:**
+   - Navigate to Settings tab
+   - Click "Reset All Progress"
+   - Confirm the reset
+
+2. **Via Console:**
+   ```javascript
+   // Clear all IndexedDB data
+   const request = indexedDB.open('UnbrokenTracker', 1);
+   request.onsuccess = function(event) {
+     const db = event.target.result;
+     const storeNames = ['workoutState', 'trainingPlanState', 'exerciseState', 'preferencesState'];
+     
+     storeNames.forEach(storeName => {
+       const transaction = db.transaction([storeName], 'readwrite');
+       const store = transaction.objectStore(storeName);
+       store.clear();
+     });
+     
+     console.log('All data cleared');
+     // Refresh the page after this
+   };
+   ```
+
+## Notes
+
+- Always refresh the page after modifying IndexedDB data
+- The app will automatically load the new state on page refresh
+- Component-level timer state (HIIT/LISS timers) resets automatically when components re-render
+- Workout state persistence only applies to training progression, not UI timer state
+- Test on development server (`npm run dev`) for best debugging experience
\ No newline at end of file
diff --git a/src/lib/blockTemplates.ts b/src/lib/blockTemplates.ts
index 3afb514..22a84d1 100644
--- a/src/lib/blockTemplates.ts
+++ b/src/lib/blockTemplates.ts
@@ -2,6 +2,15 @@
 // Contains workout configuration templates for different training blocks
 
 export const blockTemplates = {
+  getready: {
+    weeks: [
+      {
+        days: [
+          { type: "rest" }
+        ]
+      }
+    ]
+  },
   endurance1: {
     weeks: [
       {
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index beade61..04ebeff 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -14,25 +14,6 @@ interface UIState {
     phase: 'initial' | 'extended'
     startTime: number
   }
-  lissTimer: {
-    isActive: boolean
-    isPaused: boolean
-    timeLeft: number
-    totalTime: number
-    startTime: number
-    pausedTime: number
-  }
-  hiitTimer: {
-    isActive: boolean
-    isPaused: boolean
-    timeLeft: number
-    totalTime: number
-    startTime: number
-    pausedTime: number
-    currentRound: number
-    totalRounds: number
-    roundCompleted: boolean
-  }
 }
 
 interface WorkoutState {
@@ -202,25 +183,6 @@ const defaultUIState: UIState = {
     workoutType: null,
     phase: 'initial',
     startTime: 0
-  },
-  lissTimer: {
-    isActive: false,
-    isPaused: false,
-    timeLeft: 0,
-    totalTime: 0,
-    startTime: 0,
-    pausedTime: 0
-  },
-  hiitTimer: {
-    isActive: false,
-    isPaused: false,
-    timeLeft: 0,
-    totalTime: 0,
-    startTime: 0,
-    pausedTime: 0,
-    currentRound: 0,
-    totalRounds: 0,
-    roundCompleted: false
   }
 }
 
@@ -239,6 +201,7 @@ export const workoutStore = createPersistedStore('workoutState', defaultWorkoutS
 // Training Plan Store (persisted)  
 const defaultTrainingPlanState: TrainingPlanState = {
   customPlan: [
+    { name: "Get Ready", weeks: 1, type: "getready" },
     { name: "Endurance Block 1", weeks: 8, type: "endurance1" },
     { name: "Powerbuilding Block 1", weeks: 3, type: "powerbuilding1" },
     { name: "Powerbuilding Block 2", weeks: 3, type: "powerbuilding2" },
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 455da04..51ac0ec 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -77,25 +77,6 @@ export interface AppState {
     phase: 'initial' | 'extended';
     startTime: number;
   };
-  lissTimer: {
-    isActive: boolean;
-    isPaused: boolean;
-    timeLeft: number;
-    totalTime: number;
-    startTime: number;
-    pausedTime: number;
-  };
-  hiitTimer: {
-    isActive: boolean;
-    isPaused: boolean;
-    timeLeft: number;
-    totalTime: number;
-    startTime: number;
-    pausedTime: number;
-    currentRound: number;
-    totalRounds: number;
-    roundCompleted: boolean;
-  };
 }
 
 export interface WarmupSet {
diff --git a/src/routes/settings/ResetProgress.svelte b/src/routes/settings/ResetProgress.svelte
index ce22441..5d6ac71 100644
--- a/src/routes/settings/ResetProgress.svelte
+++ b/src/routes/settings/ResetProgress.svelte
@@ -35,25 +35,6 @@
           workoutType: null,
           phase: 'initial',
           startTime: 0
-        },
-        lissTimer: {
-          isActive: false,
-          isPaused: false,
-          timeLeft: 0,
-          totalTime: 0,
-          startTime: 0,
-          pausedTime: 0
-        },
-        hiitTimer: {
-          isActive: false,
-          isPaused: false,
-          timeLeft: 0,
-          totalTime: 0,
-          startTime: 0,
-          pausedTime: 0,
-          currentRound: 0,
-          totalRounds: 0,
-          roundCompleted: false
         }
       })
       
@@ -66,6 +47,7 @@
       
       trainingPlanStore.set({
         customPlan: [
+          { name: "Get Ready", weeks: 1, type: "getready" },
           { name: "Endurance Block 1", weeks: 8, type: "endurance1" },
           { name: "Powerbuilding Block 1", weeks: 3, type: "powerbuilding1" },
           { name: "Powerbuilding Block 2", weeks: 3, type: "powerbuilding2" },
diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
index 9ac94b0..1ad187c 100644
--- a/src/routes/workout/CardioWorkouts.svelte
+++ b/src/routes/workout/CardioWorkouts.svelte
@@ -2,7 +2,6 @@
   import type { Workout, CardioWorkout } from '$lib/types'
   import { Play, Pause, Square, SkipForward, CheckCircle } from 'lucide-svelte'
   import { showRestCompleteNotification } from '$lib/utils'
-  import { uiStore } from '$lib/stores'
 
   interface CardioWorkoutsProps {
     workout: Workout
@@ -32,26 +31,27 @@
     return CARDIO_WORKOUT_CONFIGS[type as keyof typeof CARDIO_WORKOUT_CONFIGS]
   })
 
-  // LiSS Timer functionality
-  const lissTimer = $derived($uiStore.lissTimer)
-  
-  // HIIT Timer functionality
-  const hiitTimer = $derived($uiStore.hiitTimer)
-  
-  // Update store functions
-  const updateLissTimer = (updates: Partial<typeof lissTimer>) => {
-    uiStore.update(state => ({
-      ...state,
-      lissTimer: { ...state.lissTimer, ...updates }
-    }))
-  }
+  // Local timer state - using runes for reactive state management
+  let lissTimer = $state({
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0
+  })
 
-  const updateHiitTimer = (updates: Partial<typeof hiitTimer>) => {
-    uiStore.update(state => ({
-      ...state,
-      hiitTimer: { ...state.hiitTimer, ...updates }
-    }))
-  }
+  let hiitTimer = $state({
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0,
+    currentRound: 0,
+    totalRounds: 0,
+    roundCompleted: false
+  })
 
   // Start LiSS timer function
   const startLissTimer = () => {
@@ -63,43 +63,35 @@
     
     if (lissTimer.isPaused) {
       // Resume from pause
-      updateLissTimer({
-        isActive: true,
-        isPaused: false,
-        startTime: now - (lissTimer.totalTime - lissTimer.timeLeft) * 1000
-      })
+      lissTimer.isActive = true
+      lissTimer.isPaused = false
+      lissTimer.startTime = now - (lissTimer.totalTime - lissTimer.timeLeft) * 1000
     } else {
       // Start fresh
-      updateLissTimer({
-        isActive: true,
-        isPaused: false,
-        timeLeft: durationInSeconds,
-        totalTime: durationInSeconds,
-        startTime: now,
-        pausedTime: 0
-      })
+      lissTimer.isActive = true
+      lissTimer.isPaused = false
+      lissTimer.timeLeft = durationInSeconds
+      lissTimer.totalTime = durationInSeconds
+      lissTimer.startTime = now
+      lissTimer.pausedTime = 0
     }
   }
 
   // Pause LiSS timer function
   const pauseLissTimer = () => {
-    updateLissTimer({
-      isActive: false,
-      isPaused: true,
-      pausedTime: Date.now()
-    })
+    lissTimer.isActive = false
+    lissTimer.isPaused = true
+    lissTimer.pausedTime = Date.now()
   }
 
   // Stop LiSS timer function
   const stopLissTimer = () => {
-    updateLissTimer({
-      isActive: false,
-      isPaused: false,
-      timeLeft: 0,
-      totalTime: 0,
-      startTime: 0,
-      pausedTime: 0
-    })
+    lissTimer.isActive = false
+    lissTimer.isPaused = false
+    lissTimer.timeLeft = 0
+    lissTimer.totalTime = 0
+    lissTimer.startTime = 0
+    lissTimer.pausedTime = 0
   }
 
   // HIIT Timer functions
@@ -115,77 +107,63 @@
     
     if (hiitTimer.isPaused) {
       // Resume from pause
-      updateHiitTimer({
-        isActive: true,
-        isPaused: false,
-        startTime: now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
-      })
+      hiitTimer.isActive = true
+      hiitTimer.isPaused = false
+      hiitTimer.startTime = now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
     } else if (hiitTimer.currentRound === 0) {
       // Start fresh
-      updateHiitTimer({
-        isActive: true,
-        isPaused: false,
-        timeLeft: durationInSeconds,
-        totalTime: durationInSeconds,
-        startTime: now,
-        pausedTime: 0,
-        currentRound: 1,
-        totalRounds: rounds,
-        roundCompleted: false
-      })
+      hiitTimer.isActive = true
+      hiitTimer.isPaused = false
+      hiitTimer.timeLeft = durationInSeconds
+      hiitTimer.totalTime = durationInSeconds
+      hiitTimer.startTime = now
+      hiitTimer.pausedTime = 0
+      hiitTimer.currentRound = 1
+      hiitTimer.totalRounds = rounds
+      hiitTimer.roundCompleted = false
     } else {
       // Continue to next round
-      updateHiitTimer({
-        isActive: true,
-        isPaused: false,
-        timeLeft: durationInSeconds,
-        totalTime: durationInSeconds,
-        startTime: now,
-        pausedTime: 0,
-        roundCompleted: false
-      })
+      hiitTimer.isActive = true
+      hiitTimer.isPaused = false
+      hiitTimer.timeLeft = durationInSeconds
+      hiitTimer.totalTime = durationInSeconds
+      hiitTimer.startTime = now
+      hiitTimer.pausedTime = 0
+      hiitTimer.roundCompleted = false
     }
   }
 
   const pauseHiitTimer = () => {
-    updateHiitTimer({
-      isActive: false,
-      isPaused: true,
-      pausedTime: Date.now()
-    })
+    hiitTimer.isActive = false
+    hiitTimer.isPaused = true
+    hiitTimer.pausedTime = Date.now()
   }
 
   const stopHiitTimer = () => {
-    updateHiitTimer({
-      isActive: false,
-      isPaused: false,
-      timeLeft: 0,
-      totalTime: 0,
-      startTime: 0,
-      pausedTime: 0,
-      currentRound: 0,
-      totalRounds: 0,
-      roundCompleted: false
-    })
+    hiitTimer.isActive = false
+    hiitTimer.isPaused = false
+    hiitTimer.timeLeft = 0
+    hiitTimer.totalTime = 0
+    hiitTimer.startTime = 0
+    hiitTimer.pausedTime = 0
+    hiitTimer.currentRound = 0
+    hiitTimer.totalRounds = 0
+    hiitTimer.roundCompleted = false
   }
 
   const completeCurrentRound = () => {
     if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-      updateHiitTimer({
-        isActive: false,
-        isPaused: false,
-        currentRound: hiitTimer.currentRound + 1,
-        roundCompleted: true,
-        timeLeft: 0
-      })
+      hiitTimer.isActive = false
+      hiitTimer.isPaused = false
+      hiitTimer.currentRound = hiitTimer.currentRound + 1
+      hiitTimer.roundCompleted = true
+      hiitTimer.timeLeft = 0
     } else {
       // All rounds completed
-      updateHiitTimer({
-        isActive: false,
-        isPaused: false,
-        roundCompleted: true,
-        timeLeft: 0
-      })
+      hiitTimer.isActive = false
+      hiitTimer.isPaused = false
+      hiitTimer.roundCompleted = true
+      hiitTimer.timeLeft = 0
     }
   }
 
@@ -199,7 +177,7 @@
         const elapsedSeconds = Math.floor((now - lissTimer.startTime) / 1000)
         const newTimeLeft = Math.max(0, lissTimer.totalTime - elapsedSeconds)
         
-        updateLissTimer({ timeLeft: newTimeLeft })
+        lissTimer.timeLeft = newTimeLeft
       }, 100) // Check more frequently for smoother updates
     }
 
@@ -213,7 +191,8 @@
     if (lissTimer.isActive && lissTimer.timeLeft === 0) {
       showRestCompleteNotification()
       // Auto-pause when complete
-      updateLissTimer({ isActive: false, isPaused: false })
+      lissTimer.isActive = false
+      lissTimer.isPaused = false
     }
   })
 
@@ -227,7 +206,7 @@
         const elapsedSeconds = Math.floor((now - hiitTimer.startTime) / 1000)
         const newTimeLeft = Math.max(0, hiitTimer.totalTime - elapsedSeconds)
         
-        updateHiitTimer({ timeLeft: newTimeLeft })
+        hiitTimer.timeLeft = newTimeLeft
       }, 100) // Check more frequently for smoother updates
     }
 

From 46a2f7255d1174bd95c5b3039ecfff6d02175328 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 12:12:44 +0000
Subject: [PATCH 04/14] Fix workout progression for blocks with varying days
 per week

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/api/workout/complete/+server.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/api/workout/complete/+server.ts b/src/routes/api/workout/complete/+server.ts
index 7c79093..074e48b 100644
--- a/src/routes/api/workout/complete/+server.ts
+++ b/src/routes/api/workout/complete/+server.ts
@@ -34,7 +34,11 @@ export async function POST({ request }) {
     const blockTemplate = blockTemplates[blockType as keyof typeof blockTemplates]
     const maxWeeks = blockTemplate?.weeks?.length || 8
     
-    if (newDay > 7) {
+    // Check if the next day exists in the current week
+    const currentWeekTemplate = blockTemplate?.weeks?.[currentWeek - 1]
+    const maxDaysInCurrentWeek = currentWeekTemplate?.days?.length || 7
+    
+    if (newDay > maxDaysInCurrentWeek) {
       newDay = 1
       newWeek++
       if (newWeek > maxWeeks) {

From b5c232fcb592afe6d9d2f7d036f8ce1307aa87f6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 12:42:23 +0000
Subject: [PATCH 05/14] Refactor timer state management to component-level and
 cleanup global state

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/lib/stores.ts                          | 20 +-----
 src/lib/types.ts                           | 21 ------
 src/routes/settings/ResetProgress.svelte   | 27 +++----
 src/routes/workout/+page.svelte            | 31 +-------
 src/routes/workout/RestTimer.svelte        | 84 ++++++++++++----------
 src/routes/workout/StrengthWorkouts.svelte | 57 +++++++++++----
 6 files changed, 99 insertions(+), 141 deletions(-)

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 04ebeff..4509c2c 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -5,15 +5,6 @@ import type { CompletedWorkout, CustomPlanBlock } from '$lib/types'
 // Store interfaces
 interface UIState {
   activeTab: string
-  showResetConfirm: boolean
-  restTimer: {
-    isActive: boolean
-    timeLeft: number
-    totalTime: number
-    workoutType: 'strength' | 'hypertrophy' | null
-    phase: 'initial' | 'extended'
-    startTime: number
-  }
 }
 
 interface WorkoutState {
@@ -174,16 +165,7 @@ const createPersistedStore = <T>(
 
 // UI Store (not persisted - transient state)
 const defaultUIState: UIState = {
-  activeTab: 'overview',
-  showResetConfirm: false,
-  restTimer: {
-    isActive: false,
-    timeLeft: 0,
-    totalTime: 0,
-    workoutType: null,
-    phase: 'initial',
-    startTime: 0
-  }
+  activeTab: 'overview'
 }
 
 export const uiStore = writable<UIState>(defaultUIState)
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 51ac0ec..a99731c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -58,27 +58,6 @@ export interface CompletedWorkout {
   details: Workout;
 }
 
-export interface AppState {
-  activeTab: string;
-  currentWeek: number;
-  currentDay: number;
-  completedWorkouts: CompletedWorkout[];
-  customPlan: CustomPlanBlock[];
-  maxes: Record<string, number>;
-  tenRMs: Record<string, number>;
-  weightUnit: string;
-  completedSets: Record<string, boolean>;
-  showResetConfirm: boolean;
-  restTimer: {
-    isActive: boolean;
-    timeLeft: number;
-    totalTime: number;
-    workoutType: 'strength' | 'hypertrophy' | null;
-    phase: 'initial' | 'extended';
-    startTime: number;
-  };
-}
-
 export interface WarmupSet {
   weight: number;
   reps: number;
diff --git a/src/routes/settings/ResetProgress.svelte b/src/routes/settings/ResetProgress.svelte
index 5d6ac71..735f750 100644
--- a/src/routes/settings/ResetProgress.svelte
+++ b/src/routes/settings/ResetProgress.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
   import { 
     clearAllStorage, 
-    uiStore, 
     workoutStore, 
     trainingPlanStore, 
     exerciseStore, 
     preferencesStore 
   } from '$lib/stores'
   
-  // Access UI state directly from store
-  const showResetConfirm = $derived($uiStore.showResetConfirm)
+  // Local component state for reset confirmation dialog
+  let showResetConfirm = $state(false)
   
   const onShowReset = () => {
-    uiStore.update(state => ({ ...state, showResetConfirm: true }))
+    showResetConfirm = true
   }
   
   const onCancelReset = () => {
-    uiStore.update(state => ({ ...state, showResetConfirm: false }))
+    showResetConfirm = false
   }
 
   // Reset functionality - reset all stores to defaults
@@ -24,20 +23,7 @@
     try {
       await clearAllStorage()
       
-      // Reset all stores to their default values
-      uiStore.set({
-        activeTab: 'overview',
-        showResetConfirm: false,
-        restTimer: {
-          isActive: false,
-          timeLeft: 0,
-          totalTime: 0,
-          workoutType: null,
-          phase: 'initial',
-          startTime: 0
-        }
-      })
-      
+      // Reset all stores to their default values - use the existing defaults from stores.ts
       workoutStore.set({
         currentWeek: 1,
         currentDay: 1,
@@ -73,6 +59,9 @@
       preferencesStore.set({
         weightUnit: 'kg'
       })
+
+      // Close the dialog
+      showResetConfirm = false
     } catch (error) {
       console.error('Failed to reset app:', error)
     }
diff --git a/src/routes/workout/+page.svelte b/src/routes/workout/+page.svelte
index 5d6da19..34b378b 100644
--- a/src/routes/workout/+page.svelte
+++ b/src/routes/workout/+page.svelte
@@ -72,37 +72,10 @@
         }))
       }
       
-      // Reset UI state
+      // Reset UI state (only activeTab now since timers are component-level)
       uiStore.update(state => ({
         ...state,
-        activeTab: 'overview',
-        restTimer: {
-          isActive: false,
-          timeLeft: 0,
-          totalTime: 0,
-          workoutType: null,
-          phase: 'initial',
-          startTime: 0
-        },
-        lissTimer: {
-          isActive: false,
-          isPaused: false,
-          timeLeft: 0,
-          totalTime: 0,
-          startTime: 0,
-          pausedTime: 0
-        },
-        hiitTimer: {
-          isActive: false,
-          isPaused: false,
-          timeLeft: 0,
-          totalTime: 0,
-          startTime: 0,
-          pausedTime: 0,
-          currentRound: 0,
-          totalRounds: 0,
-          roundCompleted: false
-        }
+        activeTab: 'overview'
       }))
       
       goto('/')
diff --git a/src/routes/workout/RestTimer.svelte b/src/routes/workout/RestTimer.svelte
index 9eceb56..f08611b 100644
--- a/src/routes/workout/RestTimer.svelte
+++ b/src/routes/workout/RestTimer.svelte
@@ -1,37 +1,44 @@
 <script lang="ts">
   import { Clock } from 'lucide-svelte'
   import { showRestCompleteNotification } from '$lib/utils'
-  import { uiStore } from '$lib/stores'
-  
-  // Access rest timer directly from store without local state
-  const restTimer = $derived($uiStore.restTimer)
-  
-  // Update store function
-  const updateRestTimer = (updates: Partial<typeof restTimer>) => {
-    uiStore.update(state => ({
-      ...state,
-      restTimer: { ...state.restTimer, ...updates }
-    }))
+
+  interface RestTimerProps {
+    isActive: boolean
+    timeLeft: number
+    totalTime: number
+    workoutType: 'strength' | 'hypertrophy' | null
+    phase: 'initial' | 'extended'
+    startTime: number
+    onUpdate: (updates: Partial<RestTimerState>) => void
+    onStop: () => void
   }
 
-  // Stop rest timer function
-  const stopRestTimer = () => {
-    updateRestTimer({
-      isActive: false,
-      timeLeft: 0,
-      totalTime: 0,
-      workoutType: null,
-      phase: 'initial',
-      startTime: 0
-    })
+  interface RestTimerState {
+    isActive: boolean
+    timeLeft: number
+    totalTime: number
+    workoutType: 'strength' | 'hypertrophy' | null
+    phase: 'initial' | 'extended'
+    startTime: number
   }
 
+  let { 
+    isActive, 
+    timeLeft, 
+    totalTime, 
+    workoutType, 
+    phase, 
+    startTime, 
+    onUpdate, 
+    onStop 
+  }: RestTimerProps = $props()
+
   // Extend rest timer function - matching original React implementation
   const extendRestTimer = () => {
-    if (restTimer.workoutType === 'strength' && restTimer.phase === 'initial') {
+    if (workoutType === 'strength' && phase === 'initial') {
       const extendedTime = 120 // Additional 2 minutes to reach 5 minutes total
       const now = Date.now()
-      updateRestTimer({
+      onUpdate({
         timeLeft: extendedTime,
         totalTime: extendedTime,
         phase: 'extended',
@@ -42,22 +49,21 @@
 
   // Derived progress percentage
   const progressPercent = $derived(() => {
-    if (restTimer.totalTime === 0) return 0
-    return ((restTimer.totalTime - restTimer.timeLeft) / restTimer.totalTime) * 100
+    if (totalTime === 0) return 0
+    return ((totalTime - timeLeft) / totalTime) * 100
   })
 
   // Timer interval effect - timestamp-based to prevent background throttling
-  // IMPORTANT: Rest timer won't show until user accepts or rejects notification permissions
   $effect(() => {
     let interval: number | undefined
     
-    if (restTimer.isActive && restTimer.timeLeft > 0) {
+    if (isActive && timeLeft > 0) {
       interval = setInterval(() => {
         const now = Date.now()
-        const elapsedSeconds = Math.floor((now - restTimer.startTime) / 1000)
-        const newTimeLeft = Math.max(0, restTimer.totalTime - elapsedSeconds)
+        const elapsedSeconds = Math.floor((now - startTime) / 1000)
+        const newTimeLeft = Math.max(0, totalTime - elapsedSeconds)
         
-        updateRestTimer({ timeLeft: newTimeLeft })
+        onUpdate({ timeLeft: newTimeLeft })
       }, 100) // Check more frequently for smoother updates
     }
 
@@ -68,30 +74,30 @@
 
   // Separate effect to handle notification when timer reaches 0
   $effect(() => {
-    if (restTimer.isActive && restTimer.timeLeft === 0) {
+    if (isActive && timeLeft === 0) {
       showRestCompleteNotification()
     }
   })
 </script>
 
-{#if restTimer.isActive}
+{#if isActive}
   <div class="mb-4 p-4 bg-white rounded-lg border-2 border-orange-200">
     <div class="flex items-center justify-between mb-2">
       <div class="flex items-center gap-2">
         <Clock class="w-5 h-5 text-orange-600" />
         <span class="text-sm font-semibold text-gray-700">
-          {restTimer.phase === 'extended' ? 'Extended Rest' : 'Rest Time'}
+          {phase === 'extended' ? 'Extended Rest' : 'Rest Time'}
         </span>
       </div>
       <div class="text-lg font-bold text-gray-900">
-        {Math.floor(restTimer.timeLeft / 60)}:{(restTimer.timeLeft % 60).toString().padStart(2, '0')}
+        {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
       </div>
     </div>
     
     <div class="mb-3">
       <div class="bg-gray-200 h-3 rounded-full overflow-hidden">
         <div 
-          class="h-full transition-all duration-300 {restTimer.phase === 'extended' ? 'bg-red-500' : 'bg-orange-500'}"
+          class="h-full transition-all duration-300 {phase === 'extended' ? 'bg-red-500' : 'bg-orange-500'}"
           style="width: {progressPercent()}%"
         ></div>
       </div>
@@ -99,14 +105,14 @@
     
     <div class="flex gap-2">
       <button
-        onclick={stopRestTimer}
-        class="flex-1 {restTimer.timeLeft === 0 
+        onclick={onStop}
+        class="flex-1 {timeLeft === 0 
           ? 'bg-green-500 hover:bg-green-600' 
           : 'bg-gray-500 hover:bg-gray-600'} text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
       >
-        {restTimer.timeLeft === 0 ? 'Complete Rest' : 'Skip Rest'}
+        {timeLeft === 0 ? 'Complete Rest' : 'Skip Rest'}
       </button>
-      {#if restTimer.workoutType === 'strength' && restTimer.phase !== 'extended' && restTimer.timeLeft === 0}
+      {#if workoutType === 'strength' && phase !== 'extended' && timeLeft === 0}
         <button
           onclick={extendRestTimer}
           class="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
diff --git a/src/routes/workout/StrengthWorkouts.svelte b/src/routes/workout/StrengthWorkouts.svelte
index 452ab8a..4c1b779 100644
--- a/src/routes/workout/StrengthWorkouts.svelte
+++ b/src/routes/workout/StrengthWorkouts.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { CheckCircle } from 'lucide-svelte'
-  import { workoutStore, exerciseStore, preferencesStore, uiStore } from '$lib/stores'
+  import { workoutStore, exerciseStore, preferencesStore } from '$lib/stores'
   import RestTimer from './RestTimer.svelte'
   import type { 
     Workout, 
@@ -27,6 +27,31 @@
   const tenRMs = $derived($exerciseStore.tenRMs)
   const weightUnit = $derived($preferencesStore.weightUnit)
 
+  // Local rest timer state using runes
+  let restTimer = $state({
+    isActive: false,
+    timeLeft: 0,
+    totalTime: 0,
+    workoutType: null as 'strength' | 'hypertrophy' | null,
+    phase: 'initial' as 'initial' | 'extended',
+    startTime: 0
+  })
+
+  // Rest timer update function
+  const updateRestTimer = (updates: Partial<typeof restTimer>) => {
+    Object.assign(restTimer, updates)
+  }
+
+  // Stop rest timer function
+  const stopRestTimer = () => {
+    restTimer.isActive = false
+    restTimer.timeLeft = 0
+    restTimer.totalTime = 0
+    restTimer.workoutType = null
+    restTimer.phase = 'initial'
+    restTimer.startTime = 0
+  }
+
   const toggleSet = async (exerciseAndSchemeIndex: string, setIndex: number) => {
     const key = `${exerciseAndSchemeIndex}-${setIndex}`
     const isBeingCompleted = !completedSets[key]
@@ -49,18 +74,13 @@
         const initialTime = workout.type === 'strength' ? 180 : 90 // 3 min for strength, 1.5 min for hypertrophy
         const now = Date.now()
         
-        // Update rest timer state in store
-        uiStore.update(state => ({
-          ...state,
-          restTimer: {
-            isActive: true,
-            timeLeft: initialTime,
-            totalTime: initialTime,
-            workoutType: workout.type as 'strength' | 'hypertrophy',
-            phase: 'initial',
-            startTime: now
-          }
-        }))
+        // Update local rest timer state
+        restTimer.isActive = true
+        restTimer.timeLeft = initialTime
+        restTimer.totalTime = initialTime
+        restTimer.workoutType = workout.type as 'strength' | 'hypertrophy'
+        restTimer.phase = 'initial'
+        restTimer.startTime = now
       }
     }
   }
@@ -85,7 +105,16 @@
 
 {#if workout.type === 'strength' || workout.type === 'hypertrophy'}
   <div class="space-y-4">
-    <RestTimer />
+    <RestTimer 
+      isActive={restTimer.isActive}
+      timeLeft={restTimer.timeLeft}
+      totalTime={restTimer.totalTime}
+      workoutType={restTimer.workoutType}
+      phase={restTimer.phase}
+      startTime={restTimer.startTime}
+      onUpdate={updateRestTimer}
+      onStop={stopRestTimer}
+    />
     {#each (strengthWorkout().exercises || []) as exercise, exerciseIndex}
       {@const setSchemes = (strengthWorkout().sets || '').split(',')}
       {@const exerciseSetSchemes = getExerciseData(exerciseIndex, 0).shouldMapByIndex ? [setSchemes[exerciseIndex]] : setSchemes}

From 23fa61c1360ebbcea7308b8570be1bcdb23fcca7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 19:41:20 +0000
Subject: [PATCH 06/14] Fix HIIT functionality for rounds-only workouts and
 refactor timer state management

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/lib/stores.ts                          |   8 +-
 src/routes/settings/ResetProgress.svelte   |  47 +----
 src/routes/workout/CardioWorkouts.svelte   | 230 +++++++++++++++------
 src/routes/workout/RestTimer.svelte        |  99 ++++-----
 src/routes/workout/StrengthWorkouts.svelte |  65 ++----
 5 files changed, 250 insertions(+), 199 deletions(-)

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 4509c2c..47af84a 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -171,7 +171,7 @@ const defaultUIState: UIState = {
 export const uiStore = writable<UIState>(defaultUIState)
 
 // Workout Store (persisted)
-const defaultWorkoutState: WorkoutState = {
+export const defaultWorkoutState: WorkoutState = {
   currentWeek: 1,
   currentDay: 1,
   completedWorkouts: [],
@@ -181,7 +181,7 @@ const defaultWorkoutState: WorkoutState = {
 export const workoutStore = createPersistedStore('workoutState', defaultWorkoutState)
 
 // Training Plan Store (persisted)  
-const defaultTrainingPlanState: TrainingPlanState = {
+export const defaultTrainingPlanState: TrainingPlanState = {
   customPlan: [
     { name: "Get Ready", weeks: 1, type: "getready" },
     { name: "Endurance Block 1", weeks: 8, type: "endurance1" },
@@ -200,7 +200,7 @@ const defaultTrainingPlanState: TrainingPlanState = {
 export const trainingPlanStore = createPersistedStore('trainingPlanState', defaultTrainingPlanState)
 
 // Exercise Store (persisted)
-const defaultExerciseState: ExerciseState = {
+export const defaultExerciseState: ExerciseState = {
   maxes: { 
     benchpress: 100, 
     squat: 120, 
@@ -218,7 +218,7 @@ const defaultExerciseState: ExerciseState = {
 export const exerciseStore = createPersistedStore('exerciseState', defaultExerciseState)
 
 // Preferences Store (persisted)
-const defaultPreferencesState: PreferencesState = {
+export const defaultPreferencesState: PreferencesState = {
   weightUnit: 'kg'
 }
 
diff --git a/src/routes/settings/ResetProgress.svelte b/src/routes/settings/ResetProgress.svelte
index 735f750..6a822c1 100644
--- a/src/routes/settings/ResetProgress.svelte
+++ b/src/routes/settings/ResetProgress.svelte
@@ -4,7 +4,11 @@
     workoutStore, 
     trainingPlanStore, 
     exerciseStore, 
-    preferencesStore 
+    preferencesStore,
+    defaultWorkoutState,
+    defaultTrainingPlanState,
+    defaultExerciseState,
+    defaultPreferencesState
   } from '$lib/stores'
   
   // Local component state for reset confirmation dialog
@@ -23,42 +27,11 @@
     try {
       await clearAllStorage()
       
-      // Reset all stores to their default values - use the existing defaults from stores.ts
-      workoutStore.set({
-        currentWeek: 1,
-        currentDay: 1,
-        completedWorkouts: [],
-        completedSets: {}
-      })
-      
-      trainingPlanStore.set({
-        customPlan: [
-          { name: "Get Ready", weeks: 1, type: "getready" },
-          { name: "Endurance Block 1", weeks: 8, type: "endurance1" },
-          { name: "Powerbuilding Block 1", weeks: 3, type: "powerbuilding1" },
-          { name: "Powerbuilding Block 2", weeks: 3, type: "powerbuilding2" },
-          { name: "Powerbuilding Block 3", weeks: 3, type: "powerbuilding3" },
-          { name: "Bodybuilding Block", weeks: 3, type: "bodybuilding" },
-          { name: "Bodybuilding Block", weeks: 3, type: "bodybuilding" },
-          { name: "Bodybuilding Block", weeks: 3, type: "bodybuilding" },
-          { name: "Powerbuilding Block 3 - Bulgarian", weeks: 3, type: "powerbuilding3bulgarian" },
-          { name: "Strength Block", weeks: 6, type: "strength" },
-          { name: "Endurance Block 1", weeks: 8, type: "endurance1" }
-        ]
-      })
-      
-      exerciseStore.set({
-        maxes: { 
-          benchpress: 100, squat: 120, deadlift: 140, trapbardeadlift: 130, 
-          overheadpress: 60, frontsquat: 90, weightedpullup: 20, powerclean: 80, 
-          romaniandeadlift: 120 
-        },
-        tenRMs: {}
-      })
-      
-      preferencesStore.set({
-        weightUnit: 'kg'
-      })
+      // Reset all stores to their default values - use the imported defaults from stores.ts
+      workoutStore.set(defaultWorkoutState)
+      trainingPlanStore.set(defaultTrainingPlanState)
+      exerciseStore.set(defaultExerciseState)
+      preferencesStore.set(defaultPreferencesState)
 
       // Close the dialog
       showResetConfirm = false
diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
index 1ad187c..fd0d4ff 100644
--- a/src/routes/workout/CardioWorkouts.svelte
+++ b/src/routes/workout/CardioWorkouts.svelte
@@ -100,8 +100,30 @@
     const duration = workout.duration
     const rounds = workout.rounds
     
-    if (duration === undefined || rounds === undefined) return
+    if (rounds === undefined) return
     
+    // Handle workouts without duration (rounds-only like Hill Sprints)
+    if (duration === undefined) {
+      if (hiitTimer.currentRound === 0) {
+        // Start first round
+        hiitTimer.isActive = false
+        hiitTimer.isPaused = false
+        hiitTimer.timeLeft = 0
+        hiitTimer.totalTime = 0
+        hiitTimer.startTime = 0
+        hiitTimer.pausedTime = 0
+        hiitTimer.currentRound = 1
+        hiitTimer.totalRounds = rounds
+        hiitTimer.roundCompleted = true // For rounds-only, mark as completed immediately
+      } else if (hiitTimer.currentRound < hiitTimer.totalRounds) {
+        // Move to next round
+        hiitTimer.currentRound = hiitTimer.currentRound + 1
+        hiitTimer.roundCompleted = true
+      }
+      return
+    }
+    
+    // Handle workouts with duration
     const durationInSeconds = duration
     const now = Date.now()
     
@@ -167,6 +189,15 @@
     }
   }
 
+  const markRoundComplete = () => {
+    const workout = cardioWorkout()
+    
+    // For rounds-only workouts, just mark current round complete and move to next
+    if (workout.duration === undefined && workout.rounds !== undefined) {
+      completeCurrentRound()
+    }
+  }
+
   // Timer interval effect - timestamp-based to prevent background throttling
   $effect(() => {
     let interval: number | undefined
@@ -244,7 +275,7 @@
   })
 
   const showHiitControls = $derived(() => {
-    return workout.type === 'hiit' && cardioWorkout().duration !== undefined && cardioWorkout().rounds !== undefined
+    return workout.type === 'hiit' && cardioWorkout().rounds !== undefined
   })
 
   // HIIT timer display values
@@ -308,37 +339,64 @@
 
   // HIIT button states for conditional styling
   const hiitButtonStates = $derived(() => {
-    const isStartDisabled = hiitTimer.isActive
-    const isPauseDisabled = !hiitTimer.isActive
-    const isStopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
-    const isNextRoundDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || hiitWorkoutComplete()
+    const workout = cardioWorkout()
+    const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined
     
-    return {
-      start: {
-        disabled: isStartDisabled,
-        text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
-        class: isStartDisabled 
-          ? 'flex-1 bg-green-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      },
-      pause: {
-        disabled: isPauseDisabled,
-        class: isPauseDisabled
-          ? 'flex-1 bg-yellow-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      },
-      stop: {
-        disabled: isStopDisabled,
-        class: isStopDisabled
-          ? 'flex-1 bg-red-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      },
-      nextRound: {
-        disabled: isNextRoundDisabled,
-        class: isNextRoundDisabled
-          ? 'w-full bg-blue-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
+    const baseButtonClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
+    const enabledClass = 'opacity-100'
+    const disabledClass = 'opacity-40 cursor-not-allowed'
+    
+    if (isRoundsOnly) {
+      // For rounds-only workouts (like Hill Sprints)
+      const isStartDisabled = hiitWorkoutComplete()
+      const isCompleteDisabled = hiitTimer.currentRound === 0 || hiitWorkoutComplete()
+      
+      return {
+        start: {
+          disabled: isStartDisabled,
+          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+                hiitWorkoutComplete() ? 'Workout Complete' :
+                `Start Round ${hiitTimer.currentRound}`,
+          class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+        },
+        complete: {
+          disabled: isCompleteDisabled,
+          class: `flex-1 bg-blue-500 text-white ${baseButtonClass} ${isCompleteDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
+        },
+        pause: undefined, // Not used for rounds-only
+        stop: {
+          disabled: hiitTimer.currentRound === 0,
+          class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${hiitTimer.currentRound === 0 ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+        },
+        nextRound: undefined // Not used for rounds-only
+      }
+    } else {
+      // For timed workouts (with duration)
+      const isStartDisabled = hiitTimer.isActive
+      const isPauseDisabled = !hiitTimer.isActive
+      const isStopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
+      const isNextRoundDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || hiitWorkoutComplete()
+      
+      return {
+        start: {
+          disabled: isStartDisabled,
+          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+                hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
+          class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+        },
+        complete: undefined, // Not used for timed workouts
+        pause: {
+          disabled: isPauseDisabled,
+          class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
+        },
+        stop: {
+          disabled: isStopDisabled,
+          class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+        },
+        nextRound: {
+          disabled: isNextRoundDisabled,
+          class: `w-full bg-blue-500 text-white ${baseButtonClass} ${isNextRoundDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
+        }
       }
     }
   })
@@ -425,46 +483,84 @@
     {/if}
     
     {#if showHiitControls()}
-      <!-- HIIT Timer control buttons -->
-      <div class="flex gap-2 mt-4">
-        <button 
-          onclick={hiitButtonStates().start.disabled ? undefined : startHiitTimer} 
-          disabled={hiitButtonStates().start.disabled}
-          class={hiitButtonStates().start.class}
-        >
-          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-          {hiitButtonStates().start.text}
-        </button>
-        <button 
-          onclick={hiitButtonStates().pause.disabled ? undefined : pauseHiitTimer} 
-          disabled={hiitButtonStates().pause.disabled}
-          class={hiitButtonStates().pause.class}
-        >
-          <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
-          Pause
-        </button>
-        <button 
-          onclick={hiitButtonStates().stop.disabled ? undefined : stopHiitTimer} 
-          disabled={hiitButtonStates().stop.disabled}
-          class={hiitButtonStates().stop.class}
-        >
-          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-          Reset
-        </button>
-      </div>
+      {@const workout = cardioWorkout()}
+      {@const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined}
+      {@const buttonStates = hiitButtonStates()}
       
-      {#if hiitTimer.roundCompleted && !hiitWorkoutComplete()}
-        <!-- Next Round button -->
-        <div class="mt-4">
+      {#if isRoundsOnly}
+        <!-- Rounds-only HIIT controls (like Hill Sprints) -->
+        <div class="flex gap-2 mt-4">
+          <button 
+            onclick={buttonStates.start.disabled ? undefined : startHiitTimer} 
+            disabled={buttonStates.start.disabled}
+            class={buttonStates.start.class}
+          >
+            <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+            {buttonStates.start.text}
+          </button>
+          {#if hiitTimer.currentRound > 0 && !hiitWorkoutComplete() && buttonStates.complete}
+            <button 
+              onclick={buttonStates.complete.disabled ? undefined : markRoundComplete} 
+              disabled={buttonStates.complete.disabled}
+              class={buttonStates.complete.class}
+            >
+              <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
+              Complete Round {hiitTimer.currentRound}
+            </button>
+          {/if}
           <button 
-            onclick={hiitButtonStates().nextRound.disabled ? undefined : startHiitTimer} 
-            disabled={hiitButtonStates().nextRound.disabled}
-            class={hiitButtonStates().nextRound.class}
+            onclick={buttonStates.stop.disabled ? undefined : stopHiitTimer} 
+            disabled={buttonStates.stop.disabled}
+            class={buttonStates.stop.class}
           >
-            <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
-            Start Round {hiitTimer.currentRound}
+            <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+            Reset
           </button>
         </div>
+      {:else}
+        <!-- Timed HIIT controls -->
+        <div class="flex gap-2 mt-4">
+          <button 
+            onclick={buttonStates.start.disabled ? undefined : startHiitTimer} 
+            disabled={buttonStates.start.disabled}
+            class={buttonStates.start.class}
+          >
+            <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+            {buttonStates.start.text}
+          </button>
+          {#if buttonStates.pause}
+            <button 
+              onclick={buttonStates.pause.disabled ? undefined : pauseHiitTimer} 
+              disabled={buttonStates.pause.disabled}
+              class={buttonStates.pause.class}
+            >
+              <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+              Pause
+            </button>
+          {/if}
+          <button 
+            onclick={buttonStates.stop.disabled ? undefined : stopHiitTimer} 
+            disabled={buttonStates.stop.disabled}
+            class={buttonStates.stop.class}
+          >
+            <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+            Reset
+          </button>
+        </div>
+        
+        {#if hiitTimer.roundCompleted && !hiitWorkoutComplete() && buttonStates.nextRound}
+          <!-- Next Round button -->
+          <div class="mt-4">
+            <button 
+              onclick={buttonStates.nextRound.disabled ? undefined : startHiitTimer} 
+              disabled={buttonStates.nextRound.disabled}
+              class={buttonStates.nextRound.class}
+            >
+              <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
+              Start Round {hiitTimer.currentRound}
+            </button>
+          </div>
+        {/if}
       {/if}
     {/if}
     
diff --git a/src/routes/workout/RestTimer.svelte b/src/routes/workout/RestTimer.svelte
index f08611b..83d6eed 100644
--- a/src/routes/workout/RestTimer.svelte
+++ b/src/routes/workout/RestTimer.svelte
@@ -3,67 +3,72 @@
   import { showRestCompleteNotification } from '$lib/utils'
 
   interface RestTimerProps {
-    isActive: boolean
-    timeLeft: number
-    totalTime: number
-    workoutType: 'strength' | 'hypertrophy' | null
-    phase: 'initial' | 'extended'
-    startTime: number
-    onUpdate: (updates: Partial<RestTimerState>) => void
+    workoutType: 'strength' | 'hypertrophy'
     onStop: () => void
   }
 
-  interface RestTimerState {
-    isActive: boolean
-    timeLeft: number
-    totalTime: number
-    workoutType: 'strength' | 'hypertrophy' | null
-    phase: 'initial' | 'extended'
-    startTime: number
-  }
+  let { workoutType, onStop }: RestTimerProps = $props()
 
-  let { 
-    isActive, 
-    timeLeft, 
-    totalTime, 
-    workoutType, 
-    phase, 
-    startTime, 
-    onUpdate, 
-    onStop 
-  }: RestTimerProps = $props()
+  // Local rest timer state using runes - managed internally
+  let restTimer = $state({
+    isActive: false,
+    timeLeft: 0,
+    totalTime: 0,
+    phase: 'initial' as 'initial' | 'extended',
+    startTime: 0
+  })
+
+  // Start the rest timer
+  export const start = () => {
+    const initialTime = workoutType === 'strength' ? 180 : 90 // 3 min for strength, 1.5 min for hypertrophy
+    const now = Date.now()
+    
+    restTimer.isActive = true
+    restTimer.timeLeft = initialTime
+    restTimer.totalTime = initialTime
+    restTimer.phase = 'initial'
+    restTimer.startTime = now
+  }
 
   // Extend rest timer function - matching original React implementation
   const extendRestTimer = () => {
-    if (workoutType === 'strength' && phase === 'initial') {
+    if (workoutType === 'strength' && restTimer.phase === 'initial') {
       const extendedTime = 120 // Additional 2 minutes to reach 5 minutes total
       const now = Date.now()
-      onUpdate({
-        timeLeft: extendedTime,
-        totalTime: extendedTime,
-        phase: 'extended',
-        startTime: now
-      })
+      restTimer.timeLeft = extendedTime
+      restTimer.totalTime = extendedTime
+      restTimer.phase = 'extended'
+      restTimer.startTime = now
     }
   }
 
+  // Stop rest timer function
+  const stopRestTimer = () => {
+    restTimer.isActive = false
+    restTimer.timeLeft = 0
+    restTimer.totalTime = 0
+    restTimer.phase = 'initial'
+    restTimer.startTime = 0
+    onStop()
+  }
+
   // Derived progress percentage
   const progressPercent = $derived(() => {
-    if (totalTime === 0) return 0
-    return ((totalTime - timeLeft) / totalTime) * 100
+    if (restTimer.totalTime === 0) return 0
+    return ((restTimer.totalTime - restTimer.timeLeft) / restTimer.totalTime) * 100
   })
 
   // Timer interval effect - timestamp-based to prevent background throttling
   $effect(() => {
     let interval: number | undefined
     
-    if (isActive && timeLeft > 0) {
+    if (restTimer.isActive && restTimer.timeLeft > 0) {
       interval = setInterval(() => {
         const now = Date.now()
-        const elapsedSeconds = Math.floor((now - startTime) / 1000)
-        const newTimeLeft = Math.max(0, totalTime - elapsedSeconds)
+        const elapsedSeconds = Math.floor((now - restTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, restTimer.totalTime - elapsedSeconds)
         
-        onUpdate({ timeLeft: newTimeLeft })
+        restTimer.timeLeft = newTimeLeft
       }, 100) // Check more frequently for smoother updates
     }
 
@@ -74,30 +79,30 @@
 
   // Separate effect to handle notification when timer reaches 0
   $effect(() => {
-    if (isActive && timeLeft === 0) {
+    if (restTimer.isActive && restTimer.timeLeft === 0) {
       showRestCompleteNotification()
     }
   })
 </script>
 
-{#if isActive}
+{#if restTimer.isActive}
   <div class="mb-4 p-4 bg-white rounded-lg border-2 border-orange-200">
     <div class="flex items-center justify-between mb-2">
       <div class="flex items-center gap-2">
         <Clock class="w-5 h-5 text-orange-600" />
         <span class="text-sm font-semibold text-gray-700">
-          {phase === 'extended' ? 'Extended Rest' : 'Rest Time'}
+          {restTimer.phase === 'extended' ? 'Extended Rest' : 'Rest Time'}
         </span>
       </div>
       <div class="text-lg font-bold text-gray-900">
-        {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
+        {Math.floor(restTimer.timeLeft / 60)}:{(restTimer.timeLeft % 60).toString().padStart(2, '0')}
       </div>
     </div>
     
     <div class="mb-3">
       <div class="bg-gray-200 h-3 rounded-full overflow-hidden">
         <div 
-          class="h-full transition-all duration-300 {phase === 'extended' ? 'bg-red-500' : 'bg-orange-500'}"
+          class="h-full transition-all duration-300 {restTimer.phase === 'extended' ? 'bg-red-500' : 'bg-orange-500'}"
           style="width: {progressPercent()}%"
         ></div>
       </div>
@@ -105,14 +110,14 @@
     
     <div class="flex gap-2">
       <button
-        onclick={onStop}
-        class="flex-1 {timeLeft === 0 
+        onclick={stopRestTimer}
+        class="flex-1 {restTimer.timeLeft === 0 
           ? 'bg-green-500 hover:bg-green-600' 
           : 'bg-gray-500 hover:bg-gray-600'} text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
       >
-        {timeLeft === 0 ? 'Complete Rest' : 'Skip Rest'}
+        {restTimer.timeLeft === 0 ? 'Complete Rest' : 'Skip Rest'}
       </button>
-      {#if workoutType === 'strength' && phase !== 'extended' && timeLeft === 0}
+      {#if workoutType === 'strength' && restTimer.phase !== 'extended' && restTimer.timeLeft === 0}
         <button
           onclick={extendRestTimer}
           class="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
diff --git a/src/routes/workout/StrengthWorkouts.svelte b/src/routes/workout/StrengthWorkouts.svelte
index 4c1b779..a8a1238 100644
--- a/src/routes/workout/StrengthWorkouts.svelte
+++ b/src/routes/workout/StrengthWorkouts.svelte
@@ -27,30 +27,9 @@
   const tenRMs = $derived($exerciseStore.tenRMs)
   const weightUnit = $derived($preferencesStore.weightUnit)
 
-  // Local rest timer state using runes
-  let restTimer = $state({
-    isActive: false,
-    timeLeft: 0,
-    totalTime: 0,
-    workoutType: null as 'strength' | 'hypertrophy' | null,
-    phase: 'initial' as 'initial' | 'extended',
-    startTime: 0
-  })
-
-  // Rest timer update function
-  const updateRestTimer = (updates: Partial<typeof restTimer>) => {
-    Object.assign(restTimer, updates)
-  }
-
-  // Stop rest timer function
-  const stopRestTimer = () => {
-    restTimer.isActive = false
-    restTimer.timeLeft = 0
-    restTimer.totalTime = 0
-    restTimer.workoutType = null
-    restTimer.phase = 'initial'
-    restTimer.startTime = 0
-  }
+  // Local state for showing rest timer
+  let showRest = $state(false)
+  let restTimerRef = $state<{ start: () => void } | undefined>(undefined)
 
   const toggleSet = async (exerciseAndSchemeIndex: string, setIndex: number) => {
     const key = `${exerciseAndSchemeIndex}-${setIndex}`
@@ -71,20 +50,21 @@
         // Request notification permission without blocking (don't await)
         requestNotificationPermission()
         
-        const initialTime = workout.type === 'strength' ? 180 : 90 // 3 min for strength, 1.5 min for hypertrophy
-        const now = Date.now()
-        
-        // Update local rest timer state
-        restTimer.isActive = true
-        restTimer.timeLeft = initialTime
-        restTimer.totalTime = initialTime
-        restTimer.workoutType = workout.type as 'strength' | 'hypertrophy'
-        restTimer.phase = 'initial'
-        restTimer.startTime = now
+        // Show rest timer and start it
+        showRest = true
+        // Wait for the component to render before calling start
+        await new Promise(resolve => setTimeout(resolve, 0))
+        if (restTimerRef) {
+          restTimerRef.start()
+        }
       }
     }
   }
 
+  const onRestComplete = () => {
+    showRest = false
+  }
+
   // Derive strength workout with proper typing - more idiomatic than casting everywhere
   const strengthWorkout = $derived(() => workout as StrengthWorkout | HypertrophyWorkout)
 
@@ -105,16 +85,13 @@
 
 {#if workout.type === 'strength' || workout.type === 'hypertrophy'}
   <div class="space-y-4">
-    <RestTimer 
-      isActive={restTimer.isActive}
-      timeLeft={restTimer.timeLeft}
-      totalTime={restTimer.totalTime}
-      workoutType={restTimer.workoutType}
-      phase={restTimer.phase}
-      startTime={restTimer.startTime}
-      onUpdate={updateRestTimer}
-      onStop={stopRestTimer}
-    />
+    {#if showRest}
+      <RestTimer 
+        workoutType={workout.type}
+        onStop={onRestComplete}
+        bind:this={restTimerRef}
+      />
+    {/if}
     {#each (strengthWorkout().exercises || []) as exercise, exerciseIndex}
       {@const setSchemes = (strengthWorkout().sets || '').split(',')}
       {@const exerciseSetSchemes = getExerciseData(exerciseIndex, 0).shouldMapByIndex ? [setSchemes[exerciseIndex]] : setSchemes}

From 312090c7cbd02f029414458c903804a4ca773c75 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 20:28:42 +0000
Subject: [PATCH 07/14] Refactor CardioWorkouts.svelte: consolidate timer
 states and reduce complexity

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/CardioWorkouts.svelte | 521 +++++++++++------------
 1 file changed, 237 insertions(+), 284 deletions(-)

diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
index fd0d4ff..387fb65 100644
--- a/src/routes/workout/CardioWorkouts.svelte
+++ b/src/routes/workout/CardioWorkouts.svelte
@@ -31,17 +31,8 @@
     return CARDIO_WORKOUT_CONFIGS[type as keyof typeof CARDIO_WORKOUT_CONFIGS]
   })
 
-  // Local timer state - using runes for reactive state management
-  let lissTimer = $state({
-    isActive: false,
-    isPaused: false,
-    timeLeft: 0,
-    totalTime: 0,
-    startTime: 0,
-    pausedTime: 0
-  })
-
-  let hiitTimer = $state({
+  // Unified timer state - using runes for reactive state management
+  let cardioTimer = $state({
     isActive: false,
     isPaused: false,
     timeLeft: 0,
@@ -53,139 +44,123 @@
     roundCompleted: false
   })
 
-  // Start LiSS timer function
-  const startLissTimer = () => {
-    const duration = cardioWorkout().duration
-    if (duration === undefined) return
-    
-    const durationInSeconds = duration * 60
-    const now = Date.now()
-    
-    if (lissTimer.isPaused) {
-      // Resume from pause
-      lissTimer.isActive = true
-      lissTimer.isPaused = false
-      lissTimer.startTime = now - (lissTimer.totalTime - lissTimer.timeLeft) * 1000
-    } else {
-      // Start fresh
-      lissTimer.isActive = true
-      lissTimer.isPaused = false
-      lissTimer.timeLeft = durationInSeconds
-      lissTimer.totalTime = durationInSeconds
-      lissTimer.startTime = now
-      lissTimer.pausedTime = 0
-    }
-  }
-
-  // Pause LiSS timer function
-  const pauseLissTimer = () => {
-    lissTimer.isActive = false
-    lissTimer.isPaused = true
-    lissTimer.pausedTime = Date.now()
-  }
-
-  // Stop LiSS timer function
-  const stopLissTimer = () => {
-    lissTimer.isActive = false
-    lissTimer.isPaused = false
-    lissTimer.timeLeft = 0
-    lissTimer.totalTime = 0
-    lissTimer.startTime = 0
-    lissTimer.pausedTime = 0
-  }
-
-  // HIIT Timer functions
-  const startHiitTimer = () => {
+  // Unified timer functions that work for both LISS and HIIT
+  const startTimer = () => {
     const workout = cardioWorkout()
-    const duration = workout.duration
-    const rounds = workout.rounds
+    const workoutType = workout.type
     
-    if (rounds === undefined) return
-    
-    // Handle workouts without duration (rounds-only like Hill Sprints)
-    if (duration === undefined) {
-      if (hiitTimer.currentRound === 0) {
-        // Start first round
-        hiitTimer.isActive = false
-        hiitTimer.isPaused = false
-        hiitTimer.timeLeft = 0
-        hiitTimer.totalTime = 0
-        hiitTimer.startTime = 0
-        hiitTimer.pausedTime = 0
-        hiitTimer.currentRound = 1
-        hiitTimer.totalRounds = rounds
-        hiitTimer.roundCompleted = true // For rounds-only, mark as completed immediately
-      } else if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-        // Move to next round
-        hiitTimer.currentRound = hiitTimer.currentRound + 1
-        hiitTimer.roundCompleted = true
+    if (workoutType === 'liss') {
+      const duration = workout.duration
+      if (duration === undefined) return
+      
+      const durationInSeconds = duration * 60
+      const now = Date.now()
+      
+      if (cardioTimer.isPaused) {
+        // Resume from pause
+        cardioTimer.isActive = true
+        cardioTimer.isPaused = false
+        cardioTimer.startTime = now - (cardioTimer.totalTime - cardioTimer.timeLeft) * 1000
+      } else {
+        // Start fresh
+        cardioTimer.isActive = true
+        cardioTimer.isPaused = false
+        cardioTimer.timeLeft = durationInSeconds
+        cardioTimer.totalTime = durationInSeconds
+        cardioTimer.startTime = now
+        cardioTimer.pausedTime = 0
+      }
+    } else if (workoutType === 'hiit') {
+      const duration = workout.duration
+      const rounds = workout.rounds
+      
+      if (rounds === undefined) return
+      
+      // Handle workouts without duration (rounds-only like Hill Sprints)
+      if (duration === undefined) {
+        if (cardioTimer.currentRound === 0) {
+          // Start first round
+          cardioTimer.isActive = false
+          cardioTimer.isPaused = false
+          cardioTimer.timeLeft = 0
+          cardioTimer.totalTime = 0
+          cardioTimer.startTime = 0
+          cardioTimer.pausedTime = 0
+          cardioTimer.currentRound = 1
+          cardioTimer.totalRounds = rounds
+          cardioTimer.roundCompleted = true // For rounds-only, mark as completed immediately
+        } else if (cardioTimer.currentRound < cardioTimer.totalRounds) {
+          // Move to next round
+          cardioTimer.currentRound = cardioTimer.currentRound + 1
+          cardioTimer.roundCompleted = true
+        }
+        return
+      }
+      
+      // Handle workouts with duration
+      const durationInSeconds = duration
+      const now = Date.now()
+      
+      if (cardioTimer.isPaused) {
+        // Resume from pause
+        cardioTimer.isActive = true
+        cardioTimer.isPaused = false
+        cardioTimer.startTime = now - (cardioTimer.totalTime - cardioTimer.timeLeft) * 1000
+      } else if (cardioTimer.currentRound === 0) {
+        // Start fresh
+        cardioTimer.isActive = true
+        cardioTimer.isPaused = false
+        cardioTimer.timeLeft = durationInSeconds
+        cardioTimer.totalTime = durationInSeconds
+        cardioTimer.startTime = now
+        cardioTimer.pausedTime = 0
+        cardioTimer.currentRound = 1
+        cardioTimer.totalRounds = rounds
+        cardioTimer.roundCompleted = false
+      } else {
+        // Continue to next round
+        cardioTimer.isActive = true
+        cardioTimer.isPaused = false
+        cardioTimer.timeLeft = durationInSeconds
+        cardioTimer.totalTime = durationInSeconds
+        cardioTimer.startTime = now
+        cardioTimer.pausedTime = 0
+        cardioTimer.roundCompleted = false
       }
-      return
-    }
-    
-    // Handle workouts with duration
-    const durationInSeconds = duration
-    const now = Date.now()
-    
-    if (hiitTimer.isPaused) {
-      // Resume from pause
-      hiitTimer.isActive = true
-      hiitTimer.isPaused = false
-      hiitTimer.startTime = now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
-    } else if (hiitTimer.currentRound === 0) {
-      // Start fresh
-      hiitTimer.isActive = true
-      hiitTimer.isPaused = false
-      hiitTimer.timeLeft = durationInSeconds
-      hiitTimer.totalTime = durationInSeconds
-      hiitTimer.startTime = now
-      hiitTimer.pausedTime = 0
-      hiitTimer.currentRound = 1
-      hiitTimer.totalRounds = rounds
-      hiitTimer.roundCompleted = false
-    } else {
-      // Continue to next round
-      hiitTimer.isActive = true
-      hiitTimer.isPaused = false
-      hiitTimer.timeLeft = durationInSeconds
-      hiitTimer.totalTime = durationInSeconds
-      hiitTimer.startTime = now
-      hiitTimer.pausedTime = 0
-      hiitTimer.roundCompleted = false
     }
   }
 
-  const pauseHiitTimer = () => {
-    hiitTimer.isActive = false
-    hiitTimer.isPaused = true
-    hiitTimer.pausedTime = Date.now()
+  const pauseTimer = () => {
+    cardioTimer.isActive = false
+    cardioTimer.isPaused = true
+    cardioTimer.pausedTime = Date.now()
   }
 
-  const stopHiitTimer = () => {
-    hiitTimer.isActive = false
-    hiitTimer.isPaused = false
-    hiitTimer.timeLeft = 0
-    hiitTimer.totalTime = 0
-    hiitTimer.startTime = 0
-    hiitTimer.pausedTime = 0
-    hiitTimer.currentRound = 0
-    hiitTimer.totalRounds = 0
-    hiitTimer.roundCompleted = false
+  const stopTimer = () => {
+    cardioTimer.isActive = false
+    cardioTimer.isPaused = false
+    cardioTimer.timeLeft = 0
+    cardioTimer.totalTime = 0
+    cardioTimer.startTime = 0
+    cardioTimer.pausedTime = 0
+    cardioTimer.currentRound = 0
+    cardioTimer.totalRounds = 0
+    cardioTimer.roundCompleted = false
   }
 
   const completeCurrentRound = () => {
-    if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-      hiitTimer.isActive = false
-      hiitTimer.isPaused = false
-      hiitTimer.currentRound = hiitTimer.currentRound + 1
-      hiitTimer.roundCompleted = true
-      hiitTimer.timeLeft = 0
+    if (cardioTimer.currentRound < cardioTimer.totalRounds) {
+      cardioTimer.isActive = false
+      cardioTimer.isPaused = false
+      cardioTimer.currentRound = cardioTimer.currentRound + 1
+      cardioTimer.roundCompleted = true
+      cardioTimer.timeLeft = 0
     } else {
       // All rounds completed
-      hiitTimer.isActive = false
-      hiitTimer.isPaused = false
-      hiitTimer.roundCompleted = true
-      hiitTimer.timeLeft = 0
+      cardioTimer.isActive = false
+      cardioTimer.isPaused = false
+      cardioTimer.roundCompleted = true
+      cardioTimer.timeLeft = 0
     }
   }
 
@@ -198,17 +173,17 @@
     }
   }
 
-  // Timer interval effect - timestamp-based to prevent background throttling
+  // Unified timer interval effect - timestamp-based to prevent background throttling
   $effect(() => {
     let interval: number | undefined
     
-    if (lissTimer.isActive && lissTimer.timeLeft > 0) {
+    if (cardioTimer.isActive && cardioTimer.timeLeft > 0) {
       interval = setInterval(() => {
         const now = Date.now()
-        const elapsedSeconds = Math.floor((now - lissTimer.startTime) / 1000)
-        const newTimeLeft = Math.max(0, lissTimer.totalTime - elapsedSeconds)
+        const elapsedSeconds = Math.floor((now - cardioTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, cardioTimer.totalTime - elapsedSeconds)
         
-        lissTimer.timeLeft = newTimeLeft
+        cardioTimer.timeLeft = newTimeLeft
       }, 100) // Check more frequently for smoother updates
     }
 
@@ -217,50 +192,30 @@
     }
   })
 
-  // Separate effect to handle notification when timer reaches 0
+  // Unified timer completion effect
   $effect(() => {
-    if (lissTimer.isActive && lissTimer.timeLeft === 0) {
+    if (cardioTimer.isActive && cardioTimer.timeLeft === 0) {
       showRestCompleteNotification()
-      // Auto-pause when complete
-      lissTimer.isActive = false
-      lissTimer.isPaused = false
-    }
-  })
-
-  // HIIT Timer interval effect - timestamp-based to prevent background throttling
-  $effect(() => {
-    let interval: number | undefined
-    
-    if (hiitTimer.isActive && hiitTimer.timeLeft > 0) {
-      interval = setInterval(() => {
-        const now = Date.now()
-        const elapsedSeconds = Math.floor((now - hiitTimer.startTime) / 1000)
-        const newTimeLeft = Math.max(0, hiitTimer.totalTime - elapsedSeconds)
-        
-        hiitTimer.timeLeft = newTimeLeft
-      }, 100) // Check more frequently for smoother updates
-    }
-
-    return () => {
-      if (interval) clearInterval(interval)
-    }
-  })
-
-  // HIIT Timer completion effect
-  $effect(() => {
-    if (hiitTimer.isActive && hiitTimer.timeLeft === 0) {
-      showRestCompleteNotification()
-      completeCurrentRound()
+      
+      // Handle completion based on workout type
+      const workoutType = workout.type
+      if (workoutType === 'liss') {
+        // Auto-pause when complete
+        cardioTimer.isActive = false
+        cardioTimer.isPaused = false
+      } else if (workoutType === 'hiit') {
+        completeCurrentRound()
+      }
     }
   })
 
   // Derived timer display values
   const displayDuration = $derived(() => {
     if (workout.type === 'liss' && cardioWorkout().duration !== undefined) {
-      if (lissTimer.isActive || lissTimer.isPaused || lissTimer.timeLeft > 0) {
+      if (cardioTimer.isActive || cardioTimer.isPaused || cardioTimer.timeLeft > 0) {
         // Show countdown timer
-        const minutes = Math.floor(lissTimer.timeLeft / 60)
-        const seconds = lissTimer.timeLeft % 60
+        const minutes = Math.floor(cardioTimer.timeLeft / 60)
+        const seconds = cardioTimer.timeLeft % 60
         return `${minutes}:${seconds.toString().padStart(2, '0')}`
       } else {
         // Show initial duration
@@ -281,10 +236,10 @@
   // HIIT timer display values
   const hiitDisplayTime = $derived(() => {
     if (workout.type === 'hiit' && showHiitControls()) {
-      if (hiitTimer.isActive || hiitTimer.isPaused || hiitTimer.timeLeft > 0) {
+      if (cardioTimer.isActive || cardioTimer.isPaused || cardioTimer.timeLeft > 0) {
         // Show countdown timer
-        const minutes = Math.floor(hiitTimer.timeLeft / 60)
-        const seconds = hiitTimer.timeLeft % 60
+        const minutes = Math.floor(cardioTimer.timeLeft / 60)
+        const seconds = cardioTimer.timeLeft % 60
         return `${minutes}:${seconds.toString().padStart(2, '0')}`
       } else {
         // Show initial duration
@@ -296,8 +251,8 @@
 
   const hiitRoundDisplay = $derived(() => {
     if (workout.type === 'hiit' && cardioWorkout().rounds !== undefined) {
-      if (hiitTimer.totalRounds > 0) {
-        return `Round ${hiitTimer.currentRound} of ${hiitTimer.totalRounds}`
+      if (cardioTimer.totalRounds > 0) {
+        return `Round ${cardioTimer.currentRound} of ${cardioTimer.totalRounds}`
       } else {
         return `${cardioWorkout().rounds} rounds`
       }
@@ -306,85 +261,26 @@
   })
 
   const hiitWorkoutComplete = $derived(() => {
-    return hiitTimer.totalRounds > 0 && hiitTimer.currentRound > hiitTimer.totalRounds
+    return cardioTimer.totalRounds > 0 && cardioTimer.currentRound > cardioTimer.totalRounds
   })
 
-  // Derived button states for conditional styling
+  // Unified button states for conditional styling
   const buttonStates = $derived(() => {
-    const isStartDisabled = lissTimer.isActive
-    const isPauseDisabled = !lissTimer.isActive
-    const isStopDisabled = !lissTimer.isActive && !lissTimer.isPaused
-    
-    return {
-      start: {
-        disabled: isStartDisabled,
-        class: isStartDisabled 
-          ? 'flex-1 bg-green-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      },
-      pause: {
-        disabled: isPauseDisabled,
-        class: isPauseDisabled
-          ? 'flex-1 bg-yellow-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      },
-      stop: {
-        disabled: isStopDisabled,
-        class: isStopDisabled
-          ? 'flex-1 bg-red-500 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-40 cursor-not-allowed'
-          : 'flex-1 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2 opacity-100'
-      }
-    }
-  })
-
-  // HIIT button states for conditional styling
-  const hiitButtonStates = $derived(() => {
-    const workout = cardioWorkout()
-    const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined
-    
+    const workoutType = workout.type
     const baseButtonClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
     const enabledClass = 'opacity-100'
     const disabledClass = 'opacity-40 cursor-not-allowed'
     
-    if (isRoundsOnly) {
-      // For rounds-only workouts (like Hill Sprints)
-      const isStartDisabled = hiitWorkoutComplete()
-      const isCompleteDisabled = hiitTimer.currentRound === 0 || hiitWorkoutComplete()
-      
-      return {
-        start: {
-          disabled: isStartDisabled,
-          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-                hiitWorkoutComplete() ? 'Workout Complete' :
-                `Start Round ${hiitTimer.currentRound}`,
-          class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
-        },
-        complete: {
-          disabled: isCompleteDisabled,
-          class: `flex-1 bg-blue-500 text-white ${baseButtonClass} ${isCompleteDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
-        },
-        pause: undefined, // Not used for rounds-only
-        stop: {
-          disabled: hiitTimer.currentRound === 0,
-          class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${hiitTimer.currentRound === 0 ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
-        },
-        nextRound: undefined // Not used for rounds-only
-      }
-    } else {
-      // For timed workouts (with duration)
-      const isStartDisabled = hiitTimer.isActive
-      const isPauseDisabled = !hiitTimer.isActive
-      const isStopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
-      const isNextRoundDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || hiitWorkoutComplete()
+    if (workoutType === 'liss') {
+      const isStartDisabled = cardioTimer.isActive
+      const isPauseDisabled = !cardioTimer.isActive
+      const isStopDisabled = !cardioTimer.isActive && !cardioTimer.isPaused
       
       return {
         start: {
           disabled: isStartDisabled,
-          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-                hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
           class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
         },
-        complete: undefined, // Not used for timed workouts
         pause: {
           disabled: isPauseDisabled,
           class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
@@ -392,12 +288,69 @@
         stop: {
           disabled: isStopDisabled,
           class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
-        },
-        nextRound: {
-          disabled: isNextRoundDisabled,
-          class: `w-full bg-blue-500 text-white ${baseButtonClass} ${isNextRoundDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
         }
       }
+    } else if (workoutType === 'hiit') {
+      const workout = cardioWorkout()
+      const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined
+      
+      if (isRoundsOnly) {
+        // For rounds-only workouts (like Hill Sprints)
+        const isStartDisabled = hiitWorkoutComplete()
+        const isCompleteDisabled = cardioTimer.currentRound === 0 || hiitWorkoutComplete()
+        
+        return {
+          start: {
+            disabled: isStartDisabled,
+            text: cardioTimer.currentRound === 0 ? 'Start Round 1' : 
+                  hiitWorkoutComplete() ? 'Workout Complete' :
+                  `Start Round ${cardioTimer.currentRound}`,
+            class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+          },
+          complete: {
+            disabled: isCompleteDisabled,
+            class: `flex-1 bg-blue-500 text-white ${baseButtonClass} ${isCompleteDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
+          },
+          stop: {
+            disabled: cardioTimer.currentRound === 0,
+            class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${cardioTimer.currentRound === 0 ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+          }
+        }
+      } else {
+        // For timed workouts (with duration)
+        const isStartDisabled = cardioTimer.isActive
+        const isPauseDisabled = !cardioTimer.isActive
+        const isStopDisabled = !cardioTimer.isActive && !cardioTimer.isPaused && cardioTimer.currentRound === 0
+        const isNextRoundDisabled = cardioTimer.isActive || cardioTimer.currentRound === 0 || hiitWorkoutComplete()
+        
+        return {
+          start: {
+            disabled: isStartDisabled,
+            text: cardioTimer.currentRound === 0 ? 'Start Round 1' : 
+                  cardioTimer.roundCompleted ? `Start Round ${cardioTimer.currentRound}` : 'Resume Round',
+            class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+          },
+          pause: {
+            disabled: isPauseDisabled,
+            class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
+          },
+          stop: {
+            disabled: isStopDisabled,
+            class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+          },
+          nextRound: {
+            disabled: isNextRoundDisabled,
+            class: `w-full bg-blue-500 text-white ${baseButtonClass} ${isNextRoundDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
+          }
+        }
+      }
+    }
+    
+    // Default fallback for other workout types
+    return {
+      start: { disabled: true, class: '', text: '' },
+      pause: { disabled: true, class: '' },
+      stop: { disabled: true, class: '' }
     }
   })
 </script>
@@ -456,25 +409,25 @@
       <!-- LISS Timer control buttons -->
       <div class="flex gap-2 mt-4">
         <button 
-          onclick={buttonStates().start.disabled ? undefined : startLissTimer} 
-          disabled={buttonStates().start.disabled}
-          class={buttonStates().start.class}
+          onclick={buttonStates().start?.disabled ? undefined : startTimer} 
+          disabled={buttonStates().start?.disabled}
+          class={buttonStates().start?.class}
         >
           <Play class="w-5 h-5" stroke="none" fill="currentColor" />
           Start
         </button>
         <button 
-          onclick={buttonStates().pause.disabled ? undefined : pauseLissTimer} 
-          disabled={buttonStates().pause.disabled}
-          class={buttonStates().pause.class}
+          onclick={buttonStates().pause?.disabled ? undefined : pauseTimer} 
+          disabled={buttonStates().pause?.disabled}
+          class={buttonStates().pause?.class}
         >
           <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
           Pause
         </button>
         <button 
-          onclick={buttonStates().stop.disabled ? undefined : stopLissTimer} 
-          disabled={buttonStates().stop.disabled}
-          class={buttonStates().stop.class}
+          onclick={buttonStates().stop?.disabled ? undefined : stopTimer} 
+          disabled={buttonStates().stop?.disabled}
+          class={buttonStates().stop?.class}
         >
           <Square class="w-5 h-5" stroke="none" fill="currentColor" />
           Stop
@@ -485,33 +438,33 @@
     {#if showHiitControls()}
       {@const workout = cardioWorkout()}
       {@const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined}
-      {@const buttonStates = hiitButtonStates()}
+      {@const states = buttonStates()}
       
       {#if isRoundsOnly}
         <!-- Rounds-only HIIT controls (like Hill Sprints) -->
         <div class="flex gap-2 mt-4">
           <button 
-            onclick={buttonStates.start.disabled ? undefined : startHiitTimer} 
-            disabled={buttonStates.start.disabled}
-            class={buttonStates.start.class}
+            onclick={states.start?.disabled ? undefined : startTimer} 
+            disabled={states.start?.disabled}
+            class={states.start?.class}
           >
             <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-            {buttonStates.start.text}
+            {states.start?.text}
           </button>
-          {#if hiitTimer.currentRound > 0 && !hiitWorkoutComplete() && buttonStates.complete}
+          {#if cardioTimer.currentRound > 0 && !hiitWorkoutComplete() && states.complete}
             <button 
-              onclick={buttonStates.complete.disabled ? undefined : markRoundComplete} 
-              disabled={buttonStates.complete.disabled}
-              class={buttonStates.complete.class}
+              onclick={states.complete?.disabled ? undefined : markRoundComplete} 
+              disabled={states.complete?.disabled}
+              class={states.complete?.class}
             >
               <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
-              Complete Round {hiitTimer.currentRound}
+              Complete Round {cardioTimer.currentRound}
             </button>
           {/if}
           <button 
-            onclick={buttonStates.stop.disabled ? undefined : stopHiitTimer} 
-            disabled={buttonStates.stop.disabled}
-            class={buttonStates.stop.class}
+            onclick={states.stop?.disabled ? undefined : stopTimer} 
+            disabled={states.stop?.disabled}
+            class={states.stop?.class}
           >
             <Square class="w-5 h-5" stroke="none" fill="currentColor" />
             Reset
@@ -521,43 +474,43 @@
         <!-- Timed HIIT controls -->
         <div class="flex gap-2 mt-4">
           <button 
-            onclick={buttonStates.start.disabled ? undefined : startHiitTimer} 
-            disabled={buttonStates.start.disabled}
-            class={buttonStates.start.class}
+            onclick={states.start?.disabled ? undefined : startTimer} 
+            disabled={states.start?.disabled}
+            class={states.start?.class}
           >
             <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-            {buttonStates.start.text}
+            {states.start?.text}
           </button>
-          {#if buttonStates.pause}
+          {#if states.pause}
             <button 
-              onclick={buttonStates.pause.disabled ? undefined : pauseHiitTimer} 
-              disabled={buttonStates.pause.disabled}
-              class={buttonStates.pause.class}
+              onclick={states.pause?.disabled ? undefined : pauseTimer} 
+              disabled={states.pause?.disabled}
+              class={states.pause?.class}
             >
               <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
               Pause
             </button>
           {/if}
           <button 
-            onclick={buttonStates.stop.disabled ? undefined : stopHiitTimer} 
-            disabled={buttonStates.stop.disabled}
-            class={buttonStates.stop.class}
+            onclick={states.stop?.disabled ? undefined : stopTimer} 
+            disabled={states.stop?.disabled}
+            class={states.stop?.class}
           >
             <Square class="w-5 h-5" stroke="none" fill="currentColor" />
             Reset
           </button>
         </div>
         
-        {#if hiitTimer.roundCompleted && !hiitWorkoutComplete() && buttonStates.nextRound}
+        {#if cardioTimer.roundCompleted && !hiitWorkoutComplete() && states.nextRound}
           <!-- Next Round button -->
           <div class="mt-4">
             <button 
-              onclick={buttonStates.nextRound.disabled ? undefined : startHiitTimer} 
-              disabled={buttonStates.nextRound.disabled}
-              class={buttonStates.nextRound.class}
+              onclick={states.nextRound?.disabled ? undefined : startTimer} 
+              disabled={states.nextRound?.disabled}
+              class={states.nextRound?.class}
             >
               <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
-              Start Round {hiitTimer.currentRound}
+              Start Round {cardioTimer.currentRound}
             </button>
           </div>
         {/if}

From d1ceacff342d6752c27bd6951b88d6b6b4a7f69d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 21:39:23 +0000
Subject: [PATCH 08/14] Refactor navigation to use URL-based routing and remove
 redundant UI state

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/lib/stores.ts               | 11 -----------
 src/routes/workout/+page.svelte |  8 +-------
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 47af84a..844f960 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -3,10 +3,6 @@ import { writable } from 'svelte/store'
 import type { CompletedWorkout, CustomPlanBlock } from '$lib/types'
 
 // Store interfaces
-interface UIState {
-  activeTab: string
-}
-
 interface WorkoutState {
   currentWeek: number
   currentDay: number
@@ -163,13 +159,6 @@ const createPersistedStore = <T>(
   }
 }
 
-// UI Store (not persisted - transient state)
-const defaultUIState: UIState = {
-  activeTab: 'overview'
-}
-
-export const uiStore = writable<UIState>(defaultUIState)
-
 // Workout Store (persisted)
 export const defaultWorkoutState: WorkoutState = {
   currentWeek: 1,
diff --git a/src/routes/workout/+page.svelte b/src/routes/workout/+page.svelte
index 34b378b..08f332b 100644
--- a/src/routes/workout/+page.svelte
+++ b/src/routes/workout/+page.svelte
@@ -30,7 +30,7 @@
 
   const handleCompleteWorkout = async () => {
     // Import stores dynamically to ensure they're available
-    const { workoutStore, trainingPlanStore, uiStore } = await import('$lib/stores')
+    const { workoutStore, trainingPlanStore } = await import('$lib/stores')
     const { get } = await import('svelte/store')
     
     const workoutState = get(workoutStore)
@@ -72,12 +72,6 @@
         }))
       }
       
-      // Reset UI state (only activeTab now since timers are component-level)
-      uiStore.update(state => ({
-        ...state,
-        activeTab: 'overview'
-      }))
-      
       goto('/')
     }
   }

From e2187c7e63c159c7b86afa80dd5e53906a208f23 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 14 Sep 2025 21:59:48 +0000
Subject: [PATCH 09/14] Split CardioWorkouts into separate HIIT and LISS
 components

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/CardioWorkouts.svelte | 524 +----------------------
 src/routes/workout/HIITWorkout.svelte    | 286 +++++++++++++
 src/routes/workout/LISSWorkout.svelte    | 199 +++++++++
 3 files changed, 497 insertions(+), 512 deletions(-)
 create mode 100644 src/routes/workout/HIITWorkout.svelte
 create mode 100644 src/routes/workout/LISSWorkout.svelte

diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
index 387fb65..546d35c 100644
--- a/src/routes/workout/CardioWorkouts.svelte
+++ b/src/routes/workout/CardioWorkouts.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Workout, CardioWorkout } from '$lib/types'
-  import { Play, Pause, Square, SkipForward, CheckCircle } from 'lucide-svelte'
-  import { showRestCompleteNotification } from '$lib/utils'
+  import LISSWorkout from './LISSWorkout.svelte'
+  import HIITWorkout from './HIITWorkout.svelte'
 
   interface CardioWorkoutsProps {
     workout: Workout
@@ -10,518 +10,18 @@
 
   let { workout, onCompleteWorkout }: CardioWorkoutsProps = $props()
 
-  // Lookup tables for cardio workout configurations
-  const CARDIO_WORKOUT_CONFIGS = {
-    liss: { 
-      bg: 'from-green-500 to-blue-500', 
-      button: 'Complete LISS Cardio' 
-    },
-    hiit: { 
-      bg: 'from-orange-500 to-red-500', 
-      button: 'Complete HIIT Cardio' 
-    }
-  } as const
-
   // Derive cardio workout with proper typing
   const cardioWorkout = $derived(() => workout as CardioWorkout)
-  
-  // Derive config based on workout type
-  const config = $derived(() => {
-    const type = cardioWorkout().type
-    return CARDIO_WORKOUT_CONFIGS[type as keyof typeof CARDIO_WORKOUT_CONFIGS]
-  })
-
-  // Unified timer state - using runes for reactive state management
-  let cardioTimer = $state({
-    isActive: false,
-    isPaused: false,
-    timeLeft: 0,
-    totalTime: 0,
-    startTime: 0,
-    pausedTime: 0,
-    currentRound: 0,
-    totalRounds: 0,
-    roundCompleted: false
-  })
-
-  // Unified timer functions that work for both LISS and HIIT
-  const startTimer = () => {
-    const workout = cardioWorkout()
-    const workoutType = workout.type
-    
-    if (workoutType === 'liss') {
-      const duration = workout.duration
-      if (duration === undefined) return
-      
-      const durationInSeconds = duration * 60
-      const now = Date.now()
-      
-      if (cardioTimer.isPaused) {
-        // Resume from pause
-        cardioTimer.isActive = true
-        cardioTimer.isPaused = false
-        cardioTimer.startTime = now - (cardioTimer.totalTime - cardioTimer.timeLeft) * 1000
-      } else {
-        // Start fresh
-        cardioTimer.isActive = true
-        cardioTimer.isPaused = false
-        cardioTimer.timeLeft = durationInSeconds
-        cardioTimer.totalTime = durationInSeconds
-        cardioTimer.startTime = now
-        cardioTimer.pausedTime = 0
-      }
-    } else if (workoutType === 'hiit') {
-      const duration = workout.duration
-      const rounds = workout.rounds
-      
-      if (rounds === undefined) return
-      
-      // Handle workouts without duration (rounds-only like Hill Sprints)
-      if (duration === undefined) {
-        if (cardioTimer.currentRound === 0) {
-          // Start first round
-          cardioTimer.isActive = false
-          cardioTimer.isPaused = false
-          cardioTimer.timeLeft = 0
-          cardioTimer.totalTime = 0
-          cardioTimer.startTime = 0
-          cardioTimer.pausedTime = 0
-          cardioTimer.currentRound = 1
-          cardioTimer.totalRounds = rounds
-          cardioTimer.roundCompleted = true // For rounds-only, mark as completed immediately
-        } else if (cardioTimer.currentRound < cardioTimer.totalRounds) {
-          // Move to next round
-          cardioTimer.currentRound = cardioTimer.currentRound + 1
-          cardioTimer.roundCompleted = true
-        }
-        return
-      }
-      
-      // Handle workouts with duration
-      const durationInSeconds = duration
-      const now = Date.now()
-      
-      if (cardioTimer.isPaused) {
-        // Resume from pause
-        cardioTimer.isActive = true
-        cardioTimer.isPaused = false
-        cardioTimer.startTime = now - (cardioTimer.totalTime - cardioTimer.timeLeft) * 1000
-      } else if (cardioTimer.currentRound === 0) {
-        // Start fresh
-        cardioTimer.isActive = true
-        cardioTimer.isPaused = false
-        cardioTimer.timeLeft = durationInSeconds
-        cardioTimer.totalTime = durationInSeconds
-        cardioTimer.startTime = now
-        cardioTimer.pausedTime = 0
-        cardioTimer.currentRound = 1
-        cardioTimer.totalRounds = rounds
-        cardioTimer.roundCompleted = false
-      } else {
-        // Continue to next round
-        cardioTimer.isActive = true
-        cardioTimer.isPaused = false
-        cardioTimer.timeLeft = durationInSeconds
-        cardioTimer.totalTime = durationInSeconds
-        cardioTimer.startTime = now
-        cardioTimer.pausedTime = 0
-        cardioTimer.roundCompleted = false
-      }
-    }
-  }
-
-  const pauseTimer = () => {
-    cardioTimer.isActive = false
-    cardioTimer.isPaused = true
-    cardioTimer.pausedTime = Date.now()
-  }
-
-  const stopTimer = () => {
-    cardioTimer.isActive = false
-    cardioTimer.isPaused = false
-    cardioTimer.timeLeft = 0
-    cardioTimer.totalTime = 0
-    cardioTimer.startTime = 0
-    cardioTimer.pausedTime = 0
-    cardioTimer.currentRound = 0
-    cardioTimer.totalRounds = 0
-    cardioTimer.roundCompleted = false
-  }
-
-  const completeCurrentRound = () => {
-    if (cardioTimer.currentRound < cardioTimer.totalRounds) {
-      cardioTimer.isActive = false
-      cardioTimer.isPaused = false
-      cardioTimer.currentRound = cardioTimer.currentRound + 1
-      cardioTimer.roundCompleted = true
-      cardioTimer.timeLeft = 0
-    } else {
-      // All rounds completed
-      cardioTimer.isActive = false
-      cardioTimer.isPaused = false
-      cardioTimer.roundCompleted = true
-      cardioTimer.timeLeft = 0
-    }
-  }
-
-  const markRoundComplete = () => {
-    const workout = cardioWorkout()
-    
-    // For rounds-only workouts, just mark current round complete and move to next
-    if (workout.duration === undefined && workout.rounds !== undefined) {
-      completeCurrentRound()
-    }
-  }
-
-  // Unified timer interval effect - timestamp-based to prevent background throttling
-  $effect(() => {
-    let interval: number | undefined
-    
-    if (cardioTimer.isActive && cardioTimer.timeLeft > 0) {
-      interval = setInterval(() => {
-        const now = Date.now()
-        const elapsedSeconds = Math.floor((now - cardioTimer.startTime) / 1000)
-        const newTimeLeft = Math.max(0, cardioTimer.totalTime - elapsedSeconds)
-        
-        cardioTimer.timeLeft = newTimeLeft
-      }, 100) // Check more frequently for smoother updates
-    }
-
-    return () => {
-      if (interval) clearInterval(interval)
-    }
-  })
-
-  // Unified timer completion effect
-  $effect(() => {
-    if (cardioTimer.isActive && cardioTimer.timeLeft === 0) {
-      showRestCompleteNotification()
-      
-      // Handle completion based on workout type
-      const workoutType = workout.type
-      if (workoutType === 'liss') {
-        // Auto-pause when complete
-        cardioTimer.isActive = false
-        cardioTimer.isPaused = false
-      } else if (workoutType === 'hiit') {
-        completeCurrentRound()
-      }
-    }
-  })
-
-  // Derived timer display values
-  const displayDuration = $derived(() => {
-    if (workout.type === 'liss' && cardioWorkout().duration !== undefined) {
-      if (cardioTimer.isActive || cardioTimer.isPaused || cardioTimer.timeLeft > 0) {
-        // Show countdown timer
-        const minutes = Math.floor(cardioTimer.timeLeft / 60)
-        const seconds = cardioTimer.timeLeft % 60
-        return `${minutes}:${seconds.toString().padStart(2, '0')}`
-      } else {
-        // Show initial duration
-        return cardioWorkout().duration
-      }
-    }
-    return cardioWorkout().duration
-  })
-
-  const showTimerControls = $derived(() => {
-    return workout.type === 'liss' && cardioWorkout().duration !== undefined
-  })
-
-  const showHiitControls = $derived(() => {
-    return workout.type === 'hiit' && cardioWorkout().rounds !== undefined
-  })
-
-  // HIIT timer display values
-  const hiitDisplayTime = $derived(() => {
-    if (workout.type === 'hiit' && showHiitControls()) {
-      if (cardioTimer.isActive || cardioTimer.isPaused || cardioTimer.timeLeft > 0) {
-        // Show countdown timer
-        const minutes = Math.floor(cardioTimer.timeLeft / 60)
-        const seconds = cardioTimer.timeLeft % 60
-        return `${minutes}:${seconds.toString().padStart(2, '0')}`
-      } else {
-        // Show initial duration
-        return cardioWorkout().duration
-      }
-    }
-    return cardioWorkout().duration
-  })
-
-  const hiitRoundDisplay = $derived(() => {
-    if (workout.type === 'hiit' && cardioWorkout().rounds !== undefined) {
-      if (cardioTimer.totalRounds > 0) {
-        return `Round ${cardioTimer.currentRound} of ${cardioTimer.totalRounds}`
-      } else {
-        return `${cardioWorkout().rounds} rounds`
-      }
-    }
-    return ''
-  })
-
-  const hiitWorkoutComplete = $derived(() => {
-    return cardioTimer.totalRounds > 0 && cardioTimer.currentRound > cardioTimer.totalRounds
-  })
-
-  // Unified button states for conditional styling
-  const buttonStates = $derived(() => {
-    const workoutType = workout.type
-    const baseButtonClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
-    const enabledClass = 'opacity-100'
-    const disabledClass = 'opacity-40 cursor-not-allowed'
-    
-    if (workoutType === 'liss') {
-      const isStartDisabled = cardioTimer.isActive
-      const isPauseDisabled = !cardioTimer.isActive
-      const isStopDisabled = !cardioTimer.isActive && !cardioTimer.isPaused
-      
-      return {
-        start: {
-          disabled: isStartDisabled,
-          class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
-        },
-        pause: {
-          disabled: isPauseDisabled,
-          class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
-        },
-        stop: {
-          disabled: isStopDisabled,
-          class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
-        }
-      }
-    } else if (workoutType === 'hiit') {
-      const workout = cardioWorkout()
-      const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined
-      
-      if (isRoundsOnly) {
-        // For rounds-only workouts (like Hill Sprints)
-        const isStartDisabled = hiitWorkoutComplete()
-        const isCompleteDisabled = cardioTimer.currentRound === 0 || hiitWorkoutComplete()
-        
-        return {
-          start: {
-            disabled: isStartDisabled,
-            text: cardioTimer.currentRound === 0 ? 'Start Round 1' : 
-                  hiitWorkoutComplete() ? 'Workout Complete' :
-                  `Start Round ${cardioTimer.currentRound}`,
-            class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
-          },
-          complete: {
-            disabled: isCompleteDisabled,
-            class: `flex-1 bg-blue-500 text-white ${baseButtonClass} ${isCompleteDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
-          },
-          stop: {
-            disabled: cardioTimer.currentRound === 0,
-            class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${cardioTimer.currentRound === 0 ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
-          }
-        }
-      } else {
-        // For timed workouts (with duration)
-        const isStartDisabled = cardioTimer.isActive
-        const isPauseDisabled = !cardioTimer.isActive
-        const isStopDisabled = !cardioTimer.isActive && !cardioTimer.isPaused && cardioTimer.currentRound === 0
-        const isNextRoundDisabled = cardioTimer.isActive || cardioTimer.currentRound === 0 || hiitWorkoutComplete()
-        
-        return {
-          start: {
-            disabled: isStartDisabled,
-            text: cardioTimer.currentRound === 0 ? 'Start Round 1' : 
-                  cardioTimer.roundCompleted ? `Start Round ${cardioTimer.currentRound}` : 'Resume Round',
-            class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
-          },
-          pause: {
-            disabled: isPauseDisabled,
-            class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
-          },
-          stop: {
-            disabled: isStopDisabled,
-            class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
-          },
-          nextRound: {
-            disabled: isNextRoundDisabled,
-            class: `w-full bg-blue-500 text-white ${baseButtonClass} ${isNextRoundDisabled ? disabledClass : `hover:bg-blue-600 ${enabledClass}`}`
-          }
-        }
-      }
-    }
-    
-    // Default fallback for other workout types
-    return {
-      start: { disabled: true, class: '', text: '' },
-      pause: { disabled: true, class: '' },
-      stop: { disabled: true, class: '' }
-    }
-  })
 </script>
 
-{#if workout.type === 'liss' || workout.type === 'hiit'}
-  <div>
-    <div class="bg-gradient-to-r {config().bg} text-white p-6 rounded-lg text-center">
-      <h3 class="text-2xl font-bold mb-2">
-        {cardioWorkout().activity}
-      </h3>
-      {#if cardioWorkout().duration !== undefined}
-        <div class="text-4xl font-bold">
-          {#if workout.type === 'hiit' && showHiitControls()}
-            {hiitDisplayTime()}
-          {:else}
-            {displayDuration()}
-          {/if}
-        </div>
-        <div class="text-sm opacity-90 mt-1">
-          {#if workout.type === 'liss'}
-            minutes
-          {:else}
-            seconds
-          {/if}
-        </div>
-      {/if}
-      {#if cardioWorkout().distance !== undefined}
-        <div class="text-4xl font-bold">{cardioWorkout().distance}</div>
-        <div class="text-sm opacity-90 mt-1">
-          {#if workout.type === 'liss'}
-            km
-          {:else}
-            m
-          {/if}
-        </div>
-      {/if}
-      {#if cardioWorkout().rounds !== undefined}
-        <div class="text-2xl font-semibold mt-2">
-          {#if workout.type === 'hiit' && showHiitControls()}
-            {hiitRoundDisplay()}
-          {:else}
-            {cardioWorkout().rounds} rounds
-          {/if}
-        </div>
-      {/if}
-      
-      {#if workout.type === 'hiit' && hiitWorkoutComplete()}
-        <div class="text-green-300 text-lg font-semibold mt-2 flex items-center justify-center gap-2">
-          <CheckCircle class="w-6 h-6" />
-          All Rounds Complete!
-        </div>
-      {/if}
-    </div>
-    
-    {#if showTimerControls()}
-      <!-- LISS Timer control buttons -->
-      <div class="flex gap-2 mt-4">
-        <button 
-          onclick={buttonStates().start?.disabled ? undefined : startTimer} 
-          disabled={buttonStates().start?.disabled}
-          class={buttonStates().start?.class}
-        >
-          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-          Start
-        </button>
-        <button 
-          onclick={buttonStates().pause?.disabled ? undefined : pauseTimer} 
-          disabled={buttonStates().pause?.disabled}
-          class={buttonStates().pause?.class}
-        >
-          <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
-          Pause
-        </button>
-        <button 
-          onclick={buttonStates().stop?.disabled ? undefined : stopTimer} 
-          disabled={buttonStates().stop?.disabled}
-          class={buttonStates().stop?.class}
-        >
-          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-          Stop
-        </button>
-      </div>
-    {/if}
-    
-    {#if showHiitControls()}
-      {@const workout = cardioWorkout()}
-      {@const isRoundsOnly = workout.duration === undefined && workout.rounds !== undefined}
-      {@const states = buttonStates()}
-      
-      {#if isRoundsOnly}
-        <!-- Rounds-only HIIT controls (like Hill Sprints) -->
-        <div class="flex gap-2 mt-4">
-          <button 
-            onclick={states.start?.disabled ? undefined : startTimer} 
-            disabled={states.start?.disabled}
-            class={states.start?.class}
-          >
-            <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-            {states.start?.text}
-          </button>
-          {#if cardioTimer.currentRound > 0 && !hiitWorkoutComplete() && states.complete}
-            <button 
-              onclick={states.complete?.disabled ? undefined : markRoundComplete} 
-              disabled={states.complete?.disabled}
-              class={states.complete?.class}
-            >
-              <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
-              Complete Round {cardioTimer.currentRound}
-            </button>
-          {/if}
-          <button 
-            onclick={states.stop?.disabled ? undefined : stopTimer} 
-            disabled={states.stop?.disabled}
-            class={states.stop?.class}
-          >
-            <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-            Reset
-          </button>
-        </div>
-      {:else}
-        <!-- Timed HIIT controls -->
-        <div class="flex gap-2 mt-4">
-          <button 
-            onclick={states.start?.disabled ? undefined : startTimer} 
-            disabled={states.start?.disabled}
-            class={states.start?.class}
-          >
-            <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-            {states.start?.text}
-          </button>
-          {#if states.pause}
-            <button 
-              onclick={states.pause?.disabled ? undefined : pauseTimer} 
-              disabled={states.pause?.disabled}
-              class={states.pause?.class}
-            >
-              <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
-              Pause
-            </button>
-          {/if}
-          <button 
-            onclick={states.stop?.disabled ? undefined : stopTimer} 
-            disabled={states.stop?.disabled}
-            class={states.stop?.class}
-          >
-            <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-            Reset
-          </button>
-        </div>
-        
-        {#if cardioTimer.roundCompleted && !hiitWorkoutComplete() && states.nextRound}
-          <!-- Next Round button -->
-          <div class="mt-4">
-            <button 
-              onclick={states.nextRound?.disabled ? undefined : startTimer} 
-              disabled={states.nextRound?.disabled}
-              class={states.nextRound?.class}
-            >
-              <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
-              Start Round {cardioTimer.currentRound}
-            </button>
-          </div>
-        {/if}
-      {/if}
-    {/if}
-    
-    <button 
-      onclick={onCompleteWorkout} 
-      class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-colors mt-4"
-    >
-      {config().button}
-    </button>
-  </div>
+{#if cardioWorkout().type === 'liss'}
+  <LISSWorkout 
+    workout={workout}
+    onCompleteWorkout={onCompleteWorkout}
+  />
+{:else if cardioWorkout().type === 'hiit'}
+  <HIITWorkout 
+    workout={workout}
+    onCompleteWorkout={onCompleteWorkout}
+  />
 {/if}
\ No newline at end of file
diff --git a/src/routes/workout/HIITWorkout.svelte b/src/routes/workout/HIITWorkout.svelte
new file mode 100644
index 0000000..f25ccef
--- /dev/null
+++ b/src/routes/workout/HIITWorkout.svelte
@@ -0,0 +1,286 @@
+<script lang="ts">
+  import type { Workout, CardioWorkout } from '$lib/types'
+  import { Play, Pause, Square, SkipForward, CheckCircle } from 'lucide-svelte'
+  import { showRestCompleteNotification } from '$lib/utils'
+
+  interface HIITWorkoutProps {
+    workout: Workout
+    onCompleteWorkout: () => void
+  }
+
+  let { workout, onCompleteWorkout }: HIITWorkoutProps = $props()
+
+  // Derive cardio workout with proper typing
+  const cardioWorkout = $derived(() => workout as CardioWorkout)
+
+  // HIIT timer state - using runes for reactive state management
+  let hiitTimer = $state({
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0,
+    currentRound: 0,
+    totalRounds: 0,
+    roundCompleted: false
+  })
+
+  // HIIT timer functions
+  const startTimer = () => {
+    const { duration, rounds } = workoutData()
+    if (!rounds) return
+    
+    // Rounds-only workouts (Hill Sprints)
+    if (!duration) {
+      if (hiitTimer.currentRound === 0) {
+        Object.assign(hiitTimer, {
+          isActive: false, isPaused: false, timeLeft: 0, totalTime: 0,
+          startTime: 0, pausedTime: 0, currentRound: 1, totalRounds: rounds, roundCompleted: true
+        })
+      } else if (hiitTimer.currentRound < hiitTimer.totalRounds) {
+        hiitTimer.currentRound++
+        hiitTimer.roundCompleted = true
+      }
+      return
+    }
+    
+    // Timed workouts
+    const now = Date.now()
+    if (hiitTimer.isPaused) {
+      hiitTimer.isActive = true
+      hiitTimer.isPaused = false
+      hiitTimer.startTime = now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
+    } else if (hiitTimer.currentRound === 0) {
+      Object.assign(hiitTimer, {
+        isActive: true, isPaused: false, timeLeft: duration, totalTime: duration,
+        startTime: now, pausedTime: 0, currentRound: 1, totalRounds: rounds, roundCompleted: false
+      })
+    } else {
+      Object.assign(hiitTimer, {
+        isActive: true, isPaused: false, timeLeft: duration, totalTime: duration,
+        startTime: now, pausedTime: 0, roundCompleted: false
+      })
+    }
+  }
+
+  const pauseTimer = () => {
+    hiitTimer.isActive = false
+    hiitTimer.isPaused = true
+    hiitTimer.pausedTime = Date.now()
+  }
+
+  const stopTimer = () => {
+    Object.assign(hiitTimer, {
+      isActive: false, isPaused: false, timeLeft: 0, totalTime: 0,
+      startTime: 0, pausedTime: 0, currentRound: 0, totalRounds: 0, roundCompleted: false
+    })
+  }
+
+  const completeCurrentRound = () => {
+    if (hiitTimer.currentRound < hiitTimer.totalRounds) {
+      Object.assign(hiitTimer, {
+        isActive: false, isPaused: false, currentRound: hiitTimer.currentRound + 1,
+        roundCompleted: true, timeLeft: 0
+      })
+    } else {
+      Object.assign(hiitTimer, {
+        isActive: false, isPaused: false, roundCompleted: true, timeLeft: 0
+      })
+    }
+  }
+
+  const markRoundComplete = () => {
+    if (isRoundsOnly()) completeCurrentRound()
+  }
+
+  // Timer interval effect - timestamp-based to prevent background throttling
+  $effect(() => {
+    let interval: number | undefined
+    
+    if (hiitTimer.isActive && hiitTimer.timeLeft > 0) {
+      interval = setInterval(() => {
+        const now = Date.now()
+        const elapsedSeconds = Math.floor((now - hiitTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, hiitTimer.totalTime - elapsedSeconds)
+        
+        hiitTimer.timeLeft = newTimeLeft
+      }, 100) // Check more frequently for smoother updates
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  })
+
+  // Timer completion effect
+  $effect(() => {
+    if (hiitTimer.isActive && hiitTimer.timeLeft === 0) {
+      showRestCompleteNotification()
+      completeCurrentRound()
+    }
+  })
+
+  // Derived display values
+  const workoutData = $derived(() => cardioWorkout())
+  const hasRounds = $derived(() => workoutData().rounds !== undefined)
+  const isRoundsOnly = $derived(() => workoutData().duration === undefined && hasRounds())
+  const workoutComplete = $derived(() => hiitTimer.totalRounds > 0 && hiitTimer.currentRound > hiitTimer.totalRounds)
+  
+  const displayTime = $derived(() => {
+    if (hiitTimer.isActive || hiitTimer.isPaused || hiitTimer.timeLeft > 0) {
+      const minutes = Math.floor(hiitTimer.timeLeft / 60)
+      const seconds = hiitTimer.timeLeft % 60
+      return `${minutes}:${seconds.toString().padStart(2, '0')}`
+    }
+    return workoutData().duration
+  })
+
+  const roundDisplay = $derived(() => {
+    if (!hasRounds()) return ''
+    return hiitTimer.totalRounds > 0 
+      ? `Round ${hiitTimer.currentRound} of ${hiitTimer.totalRounds}`
+      : `${workoutData().rounds} rounds`
+  })
+
+  // Button states for conditional styling
+  const buttonStates = $derived(() => {
+    const baseClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
+    const enabled = 'opacity-100'
+    const disabled = 'opacity-40 cursor-not-allowed'
+    
+    if (isRoundsOnly()) {
+      const startDisabled = workoutComplete()
+      const completeDisabled = hiitTimer.currentRound === 0 || workoutComplete()
+      
+      return {
+        start: {
+          disabled: startDisabled,
+          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+                workoutComplete() ? 'Workout Complete' : `Start Round ${hiitTimer.currentRound}`,
+          class: `flex-1 bg-green-500 text-white ${baseClass} ${startDisabled ? disabled : `hover:bg-green-600 ${enabled}`}`
+        },
+        complete: {
+          disabled: completeDisabled,
+          class: `flex-1 bg-blue-500 text-white ${baseClass} ${completeDisabled ? disabled : `hover:bg-blue-600 ${enabled}`}`
+        },
+        stop: {
+          disabled: hiitTimer.currentRound === 0,
+          class: `flex-1 bg-red-500 text-white ${baseClass} ${hiitTimer.currentRound === 0 ? disabled : `hover:bg-red-600 ${enabled}`}`
+        }
+      }
+    }
+    
+    // Timed workouts
+    const startDisabled = hiitTimer.isActive
+    const pauseDisabled = !hiitTimer.isActive
+    const stopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
+    const nextDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || workoutComplete()
+    
+    return {
+      start: {
+        disabled: startDisabled,
+        text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
+        class: `flex-1 bg-green-500 text-white ${baseClass} ${startDisabled ? disabled : `hover:bg-green-600 ${enabled}`}`
+      },
+      pause: {
+        disabled: pauseDisabled,
+        class: `flex-1 bg-yellow-500 text-white ${baseClass} ${pauseDisabled ? disabled : `hover:bg-yellow-600 ${enabled}`}`
+      },
+      stop: {
+        disabled: stopDisabled,
+        class: `flex-1 bg-red-500 text-white ${baseClass} ${stopDisabled ? disabled : `hover:bg-red-600 ${enabled}`}`
+      },
+      nextRound: {
+        disabled: nextDisabled,
+        class: `w-full bg-blue-500 text-white ${baseClass} ${nextDisabled ? disabled : `hover:bg-blue-600 ${enabled}`}`
+      }
+    }
+  })
+</script>
+
+<div>
+  <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white p-6 rounded-lg text-center">
+    <h3 class="text-2xl font-bold mb-2">{workoutData().activity}</h3>
+    
+    {#if workoutData().duration !== undefined}
+      <div class="text-4xl font-bold">{displayTime()}</div>
+      <div class="text-sm opacity-90 mt-1">seconds</div>
+    {/if}
+    
+    {#if workoutData().distance !== undefined}
+      <div class="text-4xl font-bold">{workoutData().distance}</div>
+      <div class="text-sm opacity-90 mt-1">m</div>
+    {/if}
+    
+    {#if hasRounds()}
+      <div class="text-2xl font-semibold mt-2">{roundDisplay()}</div>
+    {/if}
+    
+    {#if workoutComplete()}
+      <div class="text-green-300 text-lg font-semibold mt-2 flex items-center justify-center gap-2">
+        <CheckCircle class="w-6 h-6" />
+        All Rounds Complete!
+      </div>
+    {/if}
+  </div>
+  
+  {#if hasRounds()}
+    {@const states = buttonStates()}
+    
+    {#if isRoundsOnly()}
+      <!-- Rounds-only HIIT controls -->
+      <div class="flex gap-2 mt-4">
+        <button onclick={states.start?.disabled ? undefined : startTimer} disabled={states.start?.disabled} class={states.start?.class}>
+          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+          {states.start?.text}
+        </button>
+        {#if hiitTimer.currentRound > 0 && !workoutComplete() && states.complete}
+          <button onclick={states.complete?.disabled ? undefined : markRoundComplete} disabled={states.complete?.disabled} class={states.complete?.class}>
+            <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
+            Complete Round {hiitTimer.currentRound}
+          </button>
+        {/if}
+        <button onclick={states.stop?.disabled ? undefined : stopTimer} disabled={states.stop?.disabled} class={states.stop?.class}>
+          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+          Reset
+        </button>
+      </div>
+    {:else}
+      <!-- Timed HIIT controls -->
+      <div class="flex gap-2 mt-4">
+        <button onclick={states.start?.disabled ? undefined : startTimer} disabled={states.start?.disabled} class={states.start?.class}>
+          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+          {states.start?.text}
+        </button>
+        {#if states.pause}
+          <button onclick={states.pause?.disabled ? undefined : pauseTimer} disabled={states.pause?.disabled} class={states.pause?.class}>
+            <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+            Pause
+          </button>
+        {/if}
+        <button onclick={states.stop?.disabled ? undefined : stopTimer} disabled={states.stop?.disabled} class={states.stop?.class}>
+          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+          Reset
+        </button>
+      </div>
+      
+      {#if hiitTimer.roundCompleted && !workoutComplete() && states.nextRound}
+        <div class="mt-4">
+          <button onclick={states.nextRound?.disabled ? undefined : startTimer} disabled={states.nextRound?.disabled} class={states.nextRound?.class}>
+            <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
+            Start Round {hiitTimer.currentRound}
+          </button>
+        </div>
+      {/if}
+    {/if}
+  {/if}
+  
+  <button 
+    onclick={onCompleteWorkout} 
+    class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-colors mt-4"
+  >
+    Complete HIIT Cardio
+  </button>
+</div>
\ No newline at end of file
diff --git a/src/routes/workout/LISSWorkout.svelte b/src/routes/workout/LISSWorkout.svelte
new file mode 100644
index 0000000..5dc3466
--- /dev/null
+++ b/src/routes/workout/LISSWorkout.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { Workout, CardioWorkout } from '$lib/types'
+  import { Play, Pause, Square } from 'lucide-svelte'
+  import { showRestCompleteNotification } from '$lib/utils'
+
+  interface LISSWorkoutProps {
+    workout: Workout
+    onCompleteWorkout: () => void
+  }
+
+  let { workout, onCompleteWorkout }: LISSWorkoutProps = $props()
+
+  // Derive cardio workout with proper typing
+  const cardioWorkout = $derived(() => workout as CardioWorkout)
+
+  // LISS timer state - using runes for reactive state management
+  let lissTimer = $state({
+    isActive: false,
+    isPaused: false,
+    timeLeft: 0,
+    totalTime: 0,
+    startTime: 0,
+    pausedTime: 0
+  })
+
+  // LISS timer functions
+  const startTimer = () => {
+    const duration = cardioWorkout().duration
+    if (duration === undefined) return
+    
+    const durationInSeconds = duration * 60
+    const now = Date.now()
+    
+    if (lissTimer.isPaused) {
+      // Resume from pause
+      lissTimer.isActive = true
+      lissTimer.isPaused = false
+      lissTimer.startTime = now - (lissTimer.totalTime - lissTimer.timeLeft) * 1000
+    } else {
+      // Start fresh
+      lissTimer.isActive = true
+      lissTimer.isPaused = false
+      lissTimer.timeLeft = durationInSeconds
+      lissTimer.totalTime = durationInSeconds
+      lissTimer.startTime = now
+      lissTimer.pausedTime = 0
+    }
+  }
+
+  const pauseTimer = () => {
+    lissTimer.isActive = false
+    lissTimer.isPaused = true
+    lissTimer.pausedTime = Date.now()
+  }
+
+  const stopTimer = () => {
+    lissTimer.isActive = false
+    lissTimer.isPaused = false
+    lissTimer.timeLeft = 0
+    lissTimer.totalTime = 0
+    lissTimer.startTime = 0
+    lissTimer.pausedTime = 0
+  }
+
+  // Timer interval effect - timestamp-based to prevent background throttling
+  $effect(() => {
+    let interval: number | undefined
+    
+    if (lissTimer.isActive && lissTimer.timeLeft > 0) {
+      interval = setInterval(() => {
+        const now = Date.now()
+        const elapsedSeconds = Math.floor((now - lissTimer.startTime) / 1000)
+        const newTimeLeft = Math.max(0, lissTimer.totalTime - elapsedSeconds)
+        
+        lissTimer.timeLeft = newTimeLeft
+      }, 100) // Check more frequently for smoother updates
+    }
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  })
+
+  // Timer completion effect
+  $effect(() => {
+    if (lissTimer.isActive && lissTimer.timeLeft === 0) {
+      showRestCompleteNotification()
+      // Auto-pause when complete
+      lissTimer.isActive = false
+      lissTimer.isPaused = false
+    }
+  })
+
+  // Derived timer display values
+  const displayDuration = $derived(() => {
+    if (cardioWorkout().duration !== undefined) {
+      if (lissTimer.isActive || lissTimer.isPaused || lissTimer.timeLeft > 0) {
+        // Show countdown timer
+        const minutes = Math.floor(lissTimer.timeLeft / 60)
+        const seconds = lissTimer.timeLeft % 60
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`
+      } else {
+        // Show initial duration
+        return cardioWorkout().duration
+      }
+    }
+    return cardioWorkout().duration
+  })
+
+  const showTimerControls = $derived(() => {
+    return cardioWorkout().duration !== undefined
+  })
+
+  // Button states for conditional styling
+  const buttonStates = $derived(() => {
+    const baseButtonClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
+    const enabledClass = 'opacity-100'
+    const disabledClass = 'opacity-40 cursor-not-allowed'
+    
+    const isStartDisabled = lissTimer.isActive
+    const isPauseDisabled = !lissTimer.isActive
+    const isStopDisabled = !lissTimer.isActive && !lissTimer.isPaused
+    
+    return {
+      start: {
+        disabled: isStartDisabled,
+        class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+      },
+      pause: {
+        disabled: isPauseDisabled,
+        class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
+      },
+      stop: {
+        disabled: isStopDisabled,
+        class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+      }
+    }
+  })
+</script>
+
+<div>
+  <div class="bg-gradient-to-r from-green-500 to-blue-500 text-white p-6 rounded-lg text-center">
+    <h3 class="text-2xl font-bold mb-2">
+      {cardioWorkout().activity}
+    </h3>
+    {#if cardioWorkout().duration !== undefined}
+      <div class="text-4xl font-bold">
+        {displayDuration()}
+      </div>
+      <div class="text-sm opacity-90 mt-1">minutes</div>
+    {/if}
+    {#if cardioWorkout().distance !== undefined}
+      <div class="text-4xl font-bold">{cardioWorkout().distance}</div>
+      <div class="text-sm opacity-90 mt-1">km</div>
+    {/if}
+    {#if cardioWorkout().rounds !== undefined}
+      <div class="text-2xl font-semibold mt-2">
+        {cardioWorkout().rounds} rounds
+      </div>
+    {/if}
+  </div>
+  
+  {#if showTimerControls()}
+    <!-- LISS Timer control buttons -->
+    <div class="flex gap-2 mt-4">
+      <button 
+        onclick={buttonStates().start?.disabled ? undefined : startTimer} 
+        disabled={buttonStates().start?.disabled}
+        class={buttonStates().start?.class}
+      >
+        <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+        Start
+      </button>
+      <button 
+        onclick={buttonStates().pause?.disabled ? undefined : pauseTimer} 
+        disabled={buttonStates().pause?.disabled}
+        class={buttonStates().pause?.class}
+      >
+        <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+        Pause
+      </button>
+      <button 
+        onclick={buttonStates().stop?.disabled ? undefined : stopTimer} 
+        disabled={buttonStates().stop?.disabled}
+        class={buttonStates().stop?.class}
+      >
+        <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+        Stop
+      </button>
+    </div>
+  {/if}
+  
+  <button 
+    onclick={onCompleteWorkout} 
+    class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 rounded-lg transition-colors mt-4"
+  >
+    Complete LISS Cardio
+  </button>
+</div>
\ No newline at end of file

From 873d58b63ae9b729532bad8dca357aa734314b35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:40:22 +0000
Subject: [PATCH 10/14] Refactor cardio components: integrate CardioWorkouts
 into +page.svelte and use scoped CSS styling

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/+page.svelte          |  19 ++-
 src/routes/workout/CardioWorkouts.svelte |  27 -----
 src/routes/workout/HIITWorkout.svelte    | 140 ++++++++++++++++++-----
 src/routes/workout/LISSWorkout.svelte    |  70 +++++++++---
 4 files changed, 182 insertions(+), 74 deletions(-)
 delete mode 100644 src/routes/workout/CardioWorkouts.svelte

diff --git a/src/routes/workout/+page.svelte b/src/routes/workout/+page.svelte
index 08f332b..395d283 100644
--- a/src/routes/workout/+page.svelte
+++ b/src/routes/workout/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
-  import CardioWorkouts from './CardioWorkouts.svelte'
+  import type { CardioWorkout } from '$lib/types'
+  import LISSWorkout from './LISSWorkout.svelte'
+  import HIITWorkout from './HIITWorkout.svelte'
   import StrengthWorkouts from './StrengthWorkouts.svelte'
   import RestWorkouts from './RestWorkouts.svelte'
 
@@ -89,10 +91,17 @@
       onCompleteWorkout={handleCompleteWorkout}
     />
   {:else if renderWorkout() === 'cardio' && getCurrentWorkout}
-    <CardioWorkouts 
-      workout={getCurrentWorkout}
-      onCompleteWorkout={handleCompleteWorkout}
-    />
+    {#if (getCurrentWorkout as CardioWorkout).type === 'liss'}
+      <LISSWorkout 
+        workout={getCurrentWorkout}
+        onCompleteWorkout={handleCompleteWorkout}
+      />
+    {:else if (getCurrentWorkout as CardioWorkout).type === 'hiit'}
+      <HIITWorkout 
+        workout={getCurrentWorkout}
+        onCompleteWorkout={handleCompleteWorkout}
+      />
+    {/if}
   {:else if renderWorkout() === 'rest' && getCurrentWorkout}
     <RestWorkouts 
       workout={getCurrentWorkout}
diff --git a/src/routes/workout/CardioWorkouts.svelte b/src/routes/workout/CardioWorkouts.svelte
deleted file mode 100644
index 546d35c..0000000
--- a/src/routes/workout/CardioWorkouts.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { Workout, CardioWorkout } from '$lib/types'
-  import LISSWorkout from './LISSWorkout.svelte'
-  import HIITWorkout from './HIITWorkout.svelte'
-
-  interface CardioWorkoutsProps {
-    workout: Workout
-    onCompleteWorkout: () => void
-  }
-
-  let { workout, onCompleteWorkout }: CardioWorkoutsProps = $props()
-
-  // Derive cardio workout with proper typing
-  const cardioWorkout = $derived(() => workout as CardioWorkout)
-</script>
-
-{#if cardioWorkout().type === 'liss'}
-  <LISSWorkout 
-    workout={workout}
-    onCompleteWorkout={onCompleteWorkout}
-  />
-{:else if cardioWorkout().type === 'hiit'}
-  <HIITWorkout 
-    workout={workout}
-    onCompleteWorkout={onCompleteWorkout}
-  />
-{/if}
\ No newline at end of file
diff --git a/src/routes/workout/HIITWorkout.svelte b/src/routes/workout/HIITWorkout.svelte
index f25ccef..326b101 100644
--- a/src/routes/workout/HIITWorkout.svelte
+++ b/src/routes/workout/HIITWorkout.svelte
@@ -143,12 +143,8 @@
       : `${workoutData().rounds} rounds`
   })
 
-  // Button states for conditional styling
+  // Button states for conditional logic only (no styling)
   const buttonStates = $derived(() => {
-    const baseClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
-    const enabled = 'opacity-100'
-    const disabled = 'opacity-40 cursor-not-allowed'
-    
     if (isRoundsOnly()) {
       const startDisabled = workoutComplete()
       const completeDisabled = hiitTimer.currentRound === 0 || workoutComplete()
@@ -157,16 +153,13 @@
         start: {
           disabled: startDisabled,
           text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-                workoutComplete() ? 'Workout Complete' : `Start Round ${hiitTimer.currentRound}`,
-          class: `flex-1 bg-green-500 text-white ${baseClass} ${startDisabled ? disabled : `hover:bg-green-600 ${enabled}`}`
+                workoutComplete() ? 'Workout Complete' : `Start Round ${hiitTimer.currentRound}`
         },
         complete: {
-          disabled: completeDisabled,
-          class: `flex-1 bg-blue-500 text-white ${baseClass} ${completeDisabled ? disabled : `hover:bg-blue-600 ${enabled}`}`
+          disabled: completeDisabled
         },
         stop: {
-          disabled: hiitTimer.currentRound === 0,
-          class: `flex-1 bg-red-500 text-white ${baseClass} ${hiitTimer.currentRound === 0 ? disabled : `hover:bg-red-600 ${enabled}`}`
+          disabled: hiitTimer.currentRound === 0
         }
       }
     }
@@ -181,20 +174,16 @@
       start: {
         disabled: startDisabled,
         text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round',
-        class: `flex-1 bg-green-500 text-white ${baseClass} ${startDisabled ? disabled : `hover:bg-green-600 ${enabled}`}`
+              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round'
       },
       pause: {
-        disabled: pauseDisabled,
-        class: `flex-1 bg-yellow-500 text-white ${baseClass} ${pauseDisabled ? disabled : `hover:bg-yellow-600 ${enabled}`}`
+        disabled: pauseDisabled
       },
       stop: {
-        disabled: stopDisabled,
-        class: `flex-1 bg-red-500 text-white ${baseClass} ${stopDisabled ? disabled : `hover:bg-red-600 ${enabled}`}`
+        disabled: stopDisabled
       },
       nextRound: {
-        disabled: nextDisabled,
-        class: `w-full bg-blue-500 text-white ${baseClass} ${nextDisabled ? disabled : `hover:bg-blue-600 ${enabled}`}`
+        disabled: nextDisabled
       }
     }
   })
@@ -232,17 +221,29 @@
     {#if isRoundsOnly()}
       <!-- Rounds-only HIIT controls -->
       <div class="flex gap-2 mt-4">
-        <button onclick={states.start?.disabled ? undefined : startTimer} disabled={states.start?.disabled} class={states.start?.class}>
+        <button 
+          onclick={states.start?.disabled ? undefined : startTimer} 
+          disabled={states.start?.disabled} 
+          class="btn-start {states.start?.disabled ? 'disabled' : ''}"
+        >
           <Play class="w-5 h-5" stroke="none" fill="currentColor" />
           {states.start?.text}
         </button>
         {#if hiitTimer.currentRound > 0 && !workoutComplete() && states.complete}
-          <button onclick={states.complete?.disabled ? undefined : markRoundComplete} disabled={states.complete?.disabled} class={states.complete?.class}>
+          <button 
+            onclick={states.complete?.disabled ? undefined : markRoundComplete} 
+            disabled={states.complete?.disabled} 
+            class="btn-complete {states.complete?.disabled ? 'disabled' : ''}"
+          >
             <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
             Complete Round {hiitTimer.currentRound}
           </button>
         {/if}
-        <button onclick={states.stop?.disabled ? undefined : stopTimer} disabled={states.stop?.disabled} class={states.stop?.class}>
+        <button 
+          onclick={states.stop?.disabled ? undefined : stopTimer} 
+          disabled={states.stop?.disabled} 
+          class="btn-stop {states.stop?.disabled ? 'disabled' : ''}"
+        >
           <Square class="w-5 h-5" stroke="none" fill="currentColor" />
           Reset
         </button>
@@ -250,17 +251,29 @@
     {:else}
       <!-- Timed HIIT controls -->
       <div class="flex gap-2 mt-4">
-        <button onclick={states.start?.disabled ? undefined : startTimer} disabled={states.start?.disabled} class={states.start?.class}>
+        <button 
+          onclick={states.start?.disabled ? undefined : startTimer} 
+          disabled={states.start?.disabled} 
+          class="btn-start {states.start?.disabled ? 'disabled' : ''}"
+        >
           <Play class="w-5 h-5" stroke="none" fill="currentColor" />
           {states.start?.text}
         </button>
         {#if states.pause}
-          <button onclick={states.pause?.disabled ? undefined : pauseTimer} disabled={states.pause?.disabled} class={states.pause?.class}>
+          <button 
+            onclick={states.pause?.disabled ? undefined : pauseTimer} 
+            disabled={states.pause?.disabled} 
+            class="btn-pause {states.pause?.disabled ? 'disabled' : ''}"
+          >
             <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
             Pause
           </button>
         {/if}
-        <button onclick={states.stop?.disabled ? undefined : stopTimer} disabled={states.stop?.disabled} class={states.stop?.class}>
+        <button 
+          onclick={states.stop?.disabled ? undefined : stopTimer} 
+          disabled={states.stop?.disabled} 
+          class="btn-stop {states.stop?.disabled ? 'disabled' : ''}"
+        >
           <Square class="w-5 h-5" stroke="none" fill="currentColor" />
           Reset
         </button>
@@ -268,7 +281,11 @@
       
       {#if hiitTimer.roundCompleted && !workoutComplete() && states.nextRound}
         <div class="mt-4">
-          <button onclick={states.nextRound?.disabled ? undefined : startTimer} disabled={states.nextRound?.disabled} class={states.nextRound?.class}>
+          <button 
+            onclick={states.nextRound?.disabled ? undefined : startTimer} 
+            disabled={states.nextRound?.disabled} 
+            class="btn-next-round {states.nextRound?.disabled ? 'disabled' : ''}"
+          >
             <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
             Start Round {hiitTimer.currentRound}
           </button>
@@ -283,4 +300,73 @@
   >
     Complete HIIT Cardio
   </button>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  .btn-start,
+  .btn-pause,
+  .btn-stop,
+  .btn-complete,
+  .btn-next-round {
+    font-weight: 600;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: white;
+    opacity: 1;
+  }
+
+  .btn-start {
+    flex: 1;
+    background-color: rgb(34 197 94);
+  }
+
+  .btn-start:not(.disabled):hover {
+    background-color: rgb(22 163 74);
+  }
+
+  .btn-pause {
+    flex: 1;
+    background-color: rgb(234 179 8);
+  }
+
+  .btn-pause:not(.disabled):hover {
+    background-color: rgb(202 138 4);
+  }
+
+  .btn-stop {
+    flex: 1;
+    background-color: rgb(239 68 68);
+  }
+
+  .btn-stop:not(.disabled):hover {
+    background-color: rgb(220 38 38);
+  }
+
+  .btn-complete {
+    flex: 1;
+    background-color: rgb(59 130 246);
+  }
+
+  .btn-complete:not(.disabled):hover {
+    background-color: rgb(37 99 235);
+  }
+
+  .btn-next-round {
+    width: 100%;
+    background-color: rgb(59 130 246);
+  }
+
+  .btn-next-round:not(.disabled):hover {
+    background-color: rgb(37 99 235);
+  }
+
+  .disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/workout/LISSWorkout.svelte b/src/routes/workout/LISSWorkout.svelte
index 5dc3466..a441db3 100644
--- a/src/routes/workout/LISSWorkout.svelte
+++ b/src/routes/workout/LISSWorkout.svelte
@@ -111,28 +111,21 @@
     return cardioWorkout().duration !== undefined
   })
 
-  // Button states for conditional styling
+  // Button states for conditional logic only (no styling)
   const buttonStates = $derived(() => {
-    const baseButtonClass = 'font-semibold py-3 rounded-lg transition-all flex items-center justify-center gap-2'
-    const enabledClass = 'opacity-100'
-    const disabledClass = 'opacity-40 cursor-not-allowed'
-    
     const isStartDisabled = lissTimer.isActive
     const isPauseDisabled = !lissTimer.isActive
     const isStopDisabled = !lissTimer.isActive && !lissTimer.isPaused
     
     return {
       start: {
-        disabled: isStartDisabled,
-        class: `flex-1 bg-green-500 text-white ${baseButtonClass} ${isStartDisabled ? disabledClass : `hover:bg-green-600 ${enabledClass}`}`
+        disabled: isStartDisabled
       },
       pause: {
-        disabled: isPauseDisabled,
-        class: `flex-1 bg-yellow-500 text-white ${baseButtonClass} ${isPauseDisabled ? disabledClass : `hover:bg-yellow-600 ${enabledClass}`}`
+        disabled: isPauseDisabled
       },
       stop: {
-        disabled: isStopDisabled,
-        class: `flex-1 bg-red-500 text-white ${baseButtonClass} ${isStopDisabled ? disabledClass : `hover:bg-red-600 ${enabledClass}`}`
+        disabled: isStopDisabled
       }
     }
   })
@@ -166,7 +159,7 @@
       <button 
         onclick={buttonStates().start?.disabled ? undefined : startTimer} 
         disabled={buttonStates().start?.disabled}
-        class={buttonStates().start?.class}
+        class="btn-start {buttonStates().start?.disabled ? 'disabled' : ''}"
       >
         <Play class="w-5 h-5" stroke="none" fill="currentColor" />
         Start
@@ -174,7 +167,7 @@
       <button 
         onclick={buttonStates().pause?.disabled ? undefined : pauseTimer} 
         disabled={buttonStates().pause?.disabled}
-        class={buttonStates().pause?.class}
+        class="btn-pause {buttonStates().pause?.disabled ? 'disabled' : ''}"
       >
         <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
         Pause
@@ -182,7 +175,7 @@
       <button 
         onclick={buttonStates().stop?.disabled ? undefined : stopTimer} 
         disabled={buttonStates().stop?.disabled}
-        class={buttonStates().stop?.class}
+        class="btn-stop {buttonStates().stop?.disabled ? 'disabled' : ''}"
       >
         <Square class="w-5 h-5" stroke="none" fill="currentColor" />
         Stop
@@ -196,4 +189,51 @@
   >
     Complete LISS Cardio
   </button>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  .btn-start,
+  .btn-pause,
+  .btn-stop {
+    flex: 1;
+    font-weight: 600;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: white;
+    opacity: 1;
+  }
+
+  .btn-start {
+    background-color: rgb(34 197 94);
+  }
+
+  .btn-start:not(.disabled):hover {
+    background-color: rgb(22 163 74);
+  }
+
+  .btn-pause {
+    background-color: rgb(234 179 8);
+  }
+
+  .btn-pause:not(.disabled):hover {
+    background-color: rgb(202 138 4);
+  }
+
+  .btn-stop {
+    background-color: rgb(239 68 68);
+  }
+
+  .btn-stop:not(.disabled):hover {
+    background-color: rgb(220 38 38);
+  }
+
+  .disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>
\ No newline at end of file

From 4c6c2d9b2e58fa04f62797fc2463e29836a8eab7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Sep 2025 09:26:51 +0000
Subject: [PATCH 11/14] Improve HIIT workout UX - unified logic, remove
 duplicate buttons, fix rounds-only workouts

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/HIITWorkout.svelte | 203 +++++++++-----------------
 src/routes/workout/LISSWorkout.svelte |  13 +-
 2 files changed, 75 insertions(+), 141 deletions(-)

diff --git a/src/routes/workout/HIITWorkout.svelte b/src/routes/workout/HIITWorkout.svelte
index 326b101..d415894 100644
--- a/src/routes/workout/HIITWorkout.svelte
+++ b/src/routes/workout/HIITWorkout.svelte
@@ -31,21 +31,9 @@
     const { duration, rounds } = workoutData()
     if (!rounds) return
     
-    // Rounds-only workouts (Hill Sprints)
-    if (!duration) {
-      if (hiitTimer.currentRound === 0) {
-        Object.assign(hiitTimer, {
-          isActive: false, isPaused: false, timeLeft: 0, totalTime: 0,
-          startTime: 0, pausedTime: 0, currentRound: 1, totalRounds: rounds, roundCompleted: true
-        })
-      } else if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-        hiitTimer.currentRound++
-        hiitTimer.roundCompleted = true
-      }
-      return
-    }
+    // Use -1 duration for rounds-only workouts (Hill Sprints)
+    const effectiveDuration = duration ?? -1
     
-    // Timed workouts
     const now = Date.now()
     if (hiitTimer.isPaused) {
       hiitTimer.isActive = true
@@ -53,13 +41,19 @@
       hiitTimer.startTime = now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
     } else if (hiitTimer.currentRound === 0) {
       Object.assign(hiitTimer, {
-        isActive: true, isPaused: false, timeLeft: duration, totalTime: duration,
-        startTime: now, pausedTime: 0, currentRound: 1, totalRounds: rounds, roundCompleted: false
+        isActive: effectiveDuration > 0, isPaused: false, 
+        timeLeft: effectiveDuration > 0 ? effectiveDuration : 0, 
+        totalTime: effectiveDuration > 0 ? effectiveDuration : 0,
+        startTime: now, pausedTime: 0, currentRound: 1, totalRounds: rounds, 
+        roundCompleted: effectiveDuration === -1
       })
     } else {
       Object.assign(hiitTimer, {
-        isActive: true, isPaused: false, timeLeft: duration, totalTime: duration,
-        startTime: now, pausedTime: 0, roundCompleted: false
+        isActive: effectiveDuration > 0, isPaused: false, 
+        timeLeft: effectiveDuration > 0 ? effectiveDuration : 0, 
+        totalTime: effectiveDuration > 0 ? effectiveDuration : 0,
+        startTime: now, pausedTime: 0, 
+        roundCompleted: effectiveDuration === -1
       })
     }
   }
@@ -79,10 +73,16 @@
 
   const completeCurrentRound = () => {
     if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-      Object.assign(hiitTimer, {
-        isActive: false, isPaused: false, currentRound: hiitTimer.currentRound + 1,
-        roundCompleted: true, timeLeft: 0
-      })
+      // For rounds-only workouts, directly advance to next round
+      if (workoutData().duration === undefined) {
+        hiitTimer.currentRound++
+        hiitTimer.roundCompleted = true
+      } else {
+        Object.assign(hiitTimer, {
+          isActive: false, isPaused: false, currentRound: hiitTimer.currentRound + 1,
+          roundCompleted: true, timeLeft: 0
+        })
+      }
     } else {
       Object.assign(hiitTimer, {
         isActive: false, isPaused: false, roundCompleted: true, timeLeft: 0
@@ -90,10 +90,6 @@
     }
   }
 
-  const markRoundComplete = () => {
-    if (isRoundsOnly()) completeCurrentRound()
-  }
-
   // Timer interval effect - timestamp-based to prevent background throttling
   $effect(() => {
     let interval: number | undefined
@@ -124,10 +120,12 @@
   // Derived display values
   const workoutData = $derived(() => cardioWorkout())
   const hasRounds = $derived(() => workoutData().rounds !== undefined)
-  const isRoundsOnly = $derived(() => workoutData().duration === undefined && hasRounds())
   const workoutComplete = $derived(() => hiitTimer.totalRounds > 0 && hiitTimer.currentRound > hiitTimer.totalRounds)
   
   const displayTime = $derived(() => {
+    // Don't show time for rounds-only workouts
+    if (workoutData().duration === undefined) return undefined
+    
     if (hiitTimer.isActive || hiitTimer.isPaused || hiitTimer.timeLeft > 0) {
       const minutes = Math.floor(hiitTimer.timeLeft / 60)
       const seconds = hiitTimer.timeLeft % 60
@@ -145,28 +143,8 @@
 
   // Button states for conditional logic only (no styling)
   const buttonStates = $derived(() => {
-    if (isRoundsOnly()) {
-      const startDisabled = workoutComplete()
-      const completeDisabled = hiitTimer.currentRound === 0 || workoutComplete()
-      
-      return {
-        start: {
-          disabled: startDisabled,
-          text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-                workoutComplete() ? 'Workout Complete' : `Start Round ${hiitTimer.currentRound}`
-        },
-        complete: {
-          disabled: completeDisabled
-        },
-        stop: {
-          disabled: hiitTimer.currentRound === 0
-        }
-      }
-    }
-    
-    // Timed workouts
     const startDisabled = hiitTimer.isActive
-    const pauseDisabled = !hiitTimer.isActive
+    const pauseDisabled = !hiitTimer.isActive || workoutData().duration === undefined
     const stopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
     const nextDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || workoutComplete()
     
@@ -193,7 +171,7 @@
   <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white p-6 rounded-lg text-center">
     <h3 class="text-2xl font-bold mb-2">{workoutData().activity}</h3>
     
-    {#if workoutData().duration !== undefined}
+    {#if displayTime() !== undefined}
       <div class="text-4xl font-bold">{displayTime()}</div>
       <div class="text-sm opacity-90 mt-1">seconds</div>
     {/if}
@@ -218,79 +196,47 @@
   {#if hasRounds()}
     {@const states = buttonStates()}
     
-    {#if isRoundsOnly()}
-      <!-- Rounds-only HIIT controls -->
-      <div class="flex gap-2 mt-4">
-        <button 
-          onclick={states.start?.disabled ? undefined : startTimer} 
-          disabled={states.start?.disabled} 
-          class="btn-start {states.start?.disabled ? 'disabled' : ''}"
-        >
-          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-          {states.start?.text}
-        </button>
-        {#if hiitTimer.currentRound > 0 && !workoutComplete() && states.complete}
-          <button 
-            onclick={states.complete?.disabled ? undefined : markRoundComplete} 
-            disabled={states.complete?.disabled} 
-            class="btn-complete {states.complete?.disabled ? 'disabled' : ''}"
-          >
-            <CheckCircle class="w-5 h-5" stroke="none" fill="currentColor" />
-            Complete Round {hiitTimer.currentRound}
-          </button>
-        {/if}
-        <button 
-          onclick={states.stop?.disabled ? undefined : stopTimer} 
-          disabled={states.stop?.disabled} 
-          class="btn-stop {states.stop?.disabled ? 'disabled' : ''}"
-        >
-          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-          Reset
-        </button>
-      </div>
-    {:else}
-      <!-- Timed HIIT controls -->
-      <div class="flex gap-2 mt-4">
+    <!-- Unified HIIT controls for all workout types -->
+    <div class="flex gap-2 mt-4">
+      <button 
+        onclick={states.start?.disabled ? undefined : startTimer} 
+        disabled={states.start?.disabled} 
+        class="btn-start {states.start?.disabled ? 'disabled' : ''}"
+      >
+        <Play class="w-5 h-5" stroke="none" fill="currentColor" />
+        {states.start?.text}
+      </button>
+      {#if workoutData().duration !== undefined && states.pause}
         <button 
-          onclick={states.start?.disabled ? undefined : startTimer} 
-          disabled={states.start?.disabled} 
-          class="btn-start {states.start?.disabled ? 'disabled' : ''}"
+          onclick={states.pause?.disabled ? undefined : pauseTimer} 
+          disabled={states.pause?.disabled} 
+          class="btn-pause {states.pause?.disabled ? 'disabled' : ''}"
         >
-          <Play class="w-5 h-5" stroke="none" fill="currentColor" />
-          {states.start?.text}
+          <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
+          Pause
         </button>
-        {#if states.pause}
-          <button 
-            onclick={states.pause?.disabled ? undefined : pauseTimer} 
-            disabled={states.pause?.disabled} 
-            class="btn-pause {states.pause?.disabled ? 'disabled' : ''}"
-          >
-            <Pause class="w-5 h-5" stroke="none" fill="currentColor" />
-            Pause
-          </button>
-        {/if}
+      {/if}
+      <button 
+        onclick={states.stop?.disabled ? undefined : stopTimer} 
+        disabled={states.stop?.disabled} 
+        class="btn-stop {states.stop?.disabled ? 'disabled' : ''}"
+      >
+        <Square class="w-5 h-5" stroke="none" fill="currentColor" />
+        Reset
+      </button>
+    </div>
+    
+    {#if hiitTimer.roundCompleted && !workoutComplete() && states.nextRound && workoutData().duration !== undefined}
+      <div class="mt-4">
         <button 
-          onclick={states.stop?.disabled ? undefined : stopTimer} 
-          disabled={states.stop?.disabled} 
-          class="btn-stop {states.stop?.disabled ? 'disabled' : ''}"
+          onclick={states.nextRound?.disabled ? undefined : startTimer} 
+          disabled={states.nextRound?.disabled} 
+          class="btn-next-round {states.nextRound?.disabled ? 'disabled' : ''}"
         >
-          <Square class="w-5 h-5" stroke="none" fill="currentColor" />
-          Reset
+          <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
+          Start Round {hiitTimer.currentRound}
         </button>
       </div>
-      
-      {#if hiitTimer.roundCompleted && !workoutComplete() && states.nextRound}
-        <div class="mt-4">
-          <button 
-            onclick={states.nextRound?.disabled ? undefined : startTimer} 
-            disabled={states.nextRound?.disabled} 
-            class="btn-next-round {states.nextRound?.disabled ? 'disabled' : ''}"
-          >
-            <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
-            Start Round {hiitTimer.currentRound}
-          </button>
-        </div>
-      {/if}
     {/if}
   {/if}
   
@@ -306,7 +252,6 @@
   .btn-start,
   .btn-pause,
   .btn-stop,
-  .btn-complete,
   .btn-next-round {
     font-weight: 600;
     padding: 0.75rem;
@@ -317,52 +262,42 @@
     justify-content: center;
     gap: 0.5rem;
     color: white;
-    opacity: 1;
   }
 
   .btn-start {
     flex: 1;
-    background-color: rgb(34 197 94);
+    background-color: #22c55e; /* green-500 */
   }
 
   .btn-start:not(.disabled):hover {
-    background-color: rgb(22 163 74);
+    background-color: #16a34a; /* green-600 */
   }
 
   .btn-pause {
     flex: 1;
-    background-color: rgb(234 179 8);
+    background-color: #eab308; /* yellow-500 */
   }
 
   .btn-pause:not(.disabled):hover {
-    background-color: rgb(202 138 4);
+    background-color: #ca8a04; /* yellow-600 */
   }
 
   .btn-stop {
     flex: 1;
-    background-color: rgb(239 68 68);
+    background-color: #ef4444; /* red-500 */
   }
 
   .btn-stop:not(.disabled):hover {
-    background-color: rgb(220 38 38);
-  }
-
-  .btn-complete {
-    flex: 1;
-    background-color: rgb(59 130 246);
-  }
-
-  .btn-complete:not(.disabled):hover {
-    background-color: rgb(37 99 235);
+    background-color: #dc2626; /* red-600 */
   }
 
   .btn-next-round {
     width: 100%;
-    background-color: rgb(59 130 246);
+    background-color: #3b82f6; /* blue-500 */
   }
 
   .btn-next-round:not(.disabled):hover {
-    background-color: rgb(37 99 235);
+    background-color: #2563eb; /* blue-600 */
   }
 
   .disabled {
diff --git a/src/routes/workout/LISSWorkout.svelte b/src/routes/workout/LISSWorkout.svelte
index a441db3..0655136 100644
--- a/src/routes/workout/LISSWorkout.svelte
+++ b/src/routes/workout/LISSWorkout.svelte
@@ -205,31 +205,30 @@
     justify-content: center;
     gap: 0.5rem;
     color: white;
-    opacity: 1;
   }
 
   .btn-start {
-    background-color: rgb(34 197 94);
+    background-color: #22c55e; /* green-500 */
   }
 
   .btn-start:not(.disabled):hover {
-    background-color: rgb(22 163 74);
+    background-color: #16a34a; /* green-600 */
   }
 
   .btn-pause {
-    background-color: rgb(234 179 8);
+    background-color: #eab308; /* yellow-500 */
   }
 
   .btn-pause:not(.disabled):hover {
-    background-color: rgb(202 138 4);
+    background-color: #ca8a04; /* yellow-600 */
   }
 
   .btn-stop {
-    background-color: rgb(239 68 68);
+    background-color: #ef4444; /* red-500 */
   }
 
   .btn-stop:not(.disabled):hover {
-    background-color: rgb(220 38 38);
+    background-color: #dc2626; /* red-600 */
   }
 
   .disabled {

From 978bdbba5de438b326cf96754f015ed283585b30 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Sep 2025 10:05:01 +0000
Subject: [PATCH 12/14] Fix HIIT workout issues: remove duplicate blue button,
 fix rounds-only progression, implement Tailwind @apply directives

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/HIITWorkout.svelte | 127 ++++++++++----------------
 src/routes/workout/LISSWorkout.svelte |  38 +++-----
 2 files changed, 61 insertions(+), 104 deletions(-)

diff --git a/src/routes/workout/HIITWorkout.svelte b/src/routes/workout/HIITWorkout.svelte
index d415894..f67a936 100644
--- a/src/routes/workout/HIITWorkout.svelte
+++ b/src/routes/workout/HIITWorkout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Workout, CardioWorkout } from '$lib/types'
-  import { Play, Pause, Square, SkipForward, CheckCircle } from 'lucide-svelte'
+  import { Play, Pause, Square, CheckCircle } from 'lucide-svelte'
   import { showRestCompleteNotification } from '$lib/utils'
 
   interface HIITWorkoutProps {
@@ -40,20 +40,32 @@
       hiitTimer.isPaused = false
       hiitTimer.startTime = now - (hiitTimer.totalTime - hiitTimer.timeLeft) * 1000
     } else if (hiitTimer.currentRound === 0) {
+      // Starting first round
       Object.assign(hiitTimer, {
         isActive: effectiveDuration > 0, isPaused: false, 
         timeLeft: effectiveDuration > 0 ? effectiveDuration : 0, 
         totalTime: effectiveDuration > 0 ? effectiveDuration : 0,
         startTime: now, pausedTime: 0, currentRound: 1, totalRounds: rounds, 
-        roundCompleted: effectiveDuration === -1
+        roundCompleted: false // Don't mark as completed immediately for rounds-only
       })
+    } else if (hiitTimer.roundCompleted) {
+      // Starting next round after completion - currentRound is already correct
+      if (hiitTimer.currentRound <= hiitTimer.totalRounds) {
+        Object.assign(hiitTimer, {
+          isActive: effectiveDuration > 0, isPaused: false, 
+          timeLeft: effectiveDuration > 0 ? effectiveDuration : 0, 
+          totalTime: effectiveDuration > 0 ? effectiveDuration : 0,
+          startTime: now, pausedTime: 0,
+          roundCompleted: false // Reset completion status
+        })
+      }
     } else {
+      // Resuming current round
       Object.assign(hiitTimer, {
         isActive: effectiveDuration > 0, isPaused: false, 
         timeLeft: effectiveDuration > 0 ? effectiveDuration : 0, 
         totalTime: effectiveDuration > 0 ? effectiveDuration : 0,
-        startTime: now, pausedTime: 0, 
-        roundCompleted: effectiveDuration === -1
+        startTime: now, pausedTime: 0
       })
     }
   }
@@ -73,16 +85,11 @@
 
   const completeCurrentRound = () => {
     if (hiitTimer.currentRound < hiitTimer.totalRounds) {
-      // For rounds-only workouts, directly advance to next round
-      if (workoutData().duration === undefined) {
-        hiitTimer.currentRound++
-        hiitTimer.roundCompleted = true
-      } else {
-        Object.assign(hiitTimer, {
-          isActive: false, isPaused: false, currentRound: hiitTimer.currentRound + 1,
-          roundCompleted: true, timeLeft: 0
-        })
-      }
+      hiitTimer.currentRound++
+      hiitTimer.roundCompleted = true
+      Object.assign(hiitTimer, {
+        isActive: false, isPaused: false, timeLeft: 0
+      })
     } else {
       Object.assign(hiitTimer, {
         isActive: false, isPaused: false, roundCompleted: true, timeLeft: 0
@@ -120,7 +127,7 @@
   // Derived display values
   const workoutData = $derived(() => cardioWorkout())
   const hasRounds = $derived(() => workoutData().rounds !== undefined)
-  const workoutComplete = $derived(() => hiitTimer.totalRounds > 0 && hiitTimer.currentRound > hiitTimer.totalRounds)
+  const workoutComplete = $derived(() => hiitTimer.totalRounds > 0 && hiitTimer.currentRound >= hiitTimer.totalRounds && hiitTimer.roundCompleted)
   
   const displayTime = $derived(() => {
     // Don't show time for rounds-only workouts
@@ -143,25 +150,24 @@
 
   // Button states for conditional logic only (no styling)
   const buttonStates = $derived(() => {
-    const startDisabled = hiitTimer.isActive
-    const pauseDisabled = !hiitTimer.isActive || workoutData().duration === undefined
+    const isRoundsOnly = workoutData().duration === undefined
+    const startDisabled = (hiitTimer.isActive && !isRoundsOnly) || workoutComplete()
+    const pauseDisabled = !hiitTimer.isActive || isRoundsOnly
     const stopDisabled = !hiitTimer.isActive && !hiitTimer.isPaused && hiitTimer.currentRound === 0
-    const nextDisabled = hiitTimer.isActive || hiitTimer.currentRound === 0 || workoutComplete()
     
     return {
       start: {
         disabled: startDisabled,
-        text: hiitTimer.currentRound === 0 ? 'Start Round 1' : 
-              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 'Resume Round'
+        text: workoutComplete() ? 'All Rounds Complete' :
+              hiitTimer.currentRound === 0 ? 'Start Round 1' : 
+              hiitTimer.roundCompleted ? `Start Round ${hiitTimer.currentRound}` : 
+              isRoundsOnly ? `Complete Round ${hiitTimer.currentRound}` : 'Resume Round'
       },
       pause: {
         disabled: pauseDisabled
       },
       stop: {
         disabled: stopDisabled
-      },
-      nextRound: {
-        disabled: nextDisabled
       }
     }
   })
@@ -199,7 +205,15 @@
     <!-- Unified HIIT controls for all workout types -->
     <div class="flex gap-2 mt-4">
       <button 
-        onclick={states.start?.disabled ? undefined : startTimer} 
+        onclick={states.start?.disabled ? undefined : () => {
+          if (workoutComplete()) return;
+          const isRoundsOnly = workoutData().duration === undefined;
+          if (isRoundsOnly && hiitTimer.currentRound > 0 && !hiitTimer.roundCompleted) {
+            completeCurrentRound();
+          } else {
+            startTimer();
+          }
+        }} 
         disabled={states.start?.disabled} 
         class="btn-start {states.start?.disabled ? 'disabled' : ''}"
       >
@@ -225,19 +239,6 @@
         Reset
       </button>
     </div>
-    
-    {#if hiitTimer.roundCompleted && !workoutComplete() && states.nextRound && workoutData().duration !== undefined}
-      <div class="mt-4">
-        <button 
-          onclick={states.nextRound?.disabled ? undefined : startTimer} 
-          disabled={states.nextRound?.disabled} 
-          class="btn-next-round {states.nextRound?.disabled ? 'disabled' : ''}"
-        >
-          <SkipForward class="w-5 h-5" stroke="none" fill="currentColor" />
-          Start Round {hiitTimer.currentRound}
-        </button>
-      </div>
-    {/if}
   {/if}
   
   <button 
@@ -249,59 +250,31 @@
 </div>
 
 <style>
+  @reference "tailwindcss";
+  
   .btn-start,
   .btn-pause,
-  .btn-stop,
-  .btn-next-round {
-    font-weight: 600;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    color: white;
+  .btn-stop {
+    @apply font-semibold py-3 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 text-white;
   }
 
   .btn-start {
-    flex: 1;
-    background-color: #22c55e; /* green-500 */
-  }
-
-  .btn-start:not(.disabled):hover {
-    background-color: #16a34a; /* green-600 */
+    @apply flex-1 bg-green-500 hover:bg-green-600;
   }
 
   .btn-pause {
-    flex: 1;
-    background-color: #eab308; /* yellow-500 */
-  }
-
-  .btn-pause:not(.disabled):hover {
-    background-color: #ca8a04; /* yellow-600 */
+    @apply flex-1 bg-yellow-500 hover:bg-yellow-600;
   }
 
   .btn-stop {
-    flex: 1;
-    background-color: #ef4444; /* red-500 */
-  }
-
-  .btn-stop:not(.disabled):hover {
-    background-color: #dc2626; /* red-600 */
-  }
-
-  .btn-next-round {
-    width: 100%;
-    background-color: #3b82f6; /* blue-500 */
-  }
-
-  .btn-next-round:not(.disabled):hover {
-    background-color: #2563eb; /* blue-600 */
+    @apply flex-1 bg-red-500 hover:bg-red-600;
   }
 
   .disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+    @apply opacity-40 cursor-not-allowed;
+  }
+  
+  .disabled:hover {
+    @apply bg-current;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/workout/LISSWorkout.svelte b/src/routes/workout/LISSWorkout.svelte
index 0655136..82644af 100644
--- a/src/routes/workout/LISSWorkout.svelte
+++ b/src/routes/workout/LISSWorkout.svelte
@@ -192,47 +192,31 @@
 </div>
 
 <style>
+  @reference "tailwindcss";
+  
   .btn-start,
   .btn-pause,
   .btn-stop {
-    flex: 1;
-    font-weight: 600;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    color: white;
+    @apply flex-1 font-semibold py-3 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 text-white;
   }
 
   .btn-start {
-    background-color: #22c55e; /* green-500 */
-  }
-
-  .btn-start:not(.disabled):hover {
-    background-color: #16a34a; /* green-600 */
+    @apply bg-green-500 hover:bg-green-600;
   }
 
   .btn-pause {
-    background-color: #eab308; /* yellow-500 */
-  }
-
-  .btn-pause:not(.disabled):hover {
-    background-color: #ca8a04; /* yellow-600 */
+    @apply bg-yellow-500 hover:bg-yellow-600;
   }
 
   .btn-stop {
-    background-color: #ef4444; /* red-500 */
-  }
-
-  .btn-stop:not(.disabled):hover {
-    background-color: #dc2626; /* red-600 */
+    @apply bg-red-500 hover:bg-red-600;
   }
 
   .disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+    @apply opacity-40 cursor-not-allowed;
+  }
+  
+  .disabled:hover {
+    @apply bg-current;
   }
 </style>
\ No newline at end of file

From 6c3dc0935d65b102af7bf4baa9d7980c63968a86 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Sep 2025 10:31:08 +0000
Subject: [PATCH 13/14] Fix HIIT workout UI issues: disabled button hover,
 completion text contrast, and distance unit display

Co-authored-by: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
---
 src/routes/workout/HIITWorkout.svelte |  6 +--
 src/routes/workout/LISSWorkout.svelte |  2 +-
 static/demo.html                      | 58 +++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 static/demo.html

diff --git a/src/routes/workout/HIITWorkout.svelte b/src/routes/workout/HIITWorkout.svelte
index f67a936..df05870 100644
--- a/src/routes/workout/HIITWorkout.svelte
+++ b/src/routes/workout/HIITWorkout.svelte
@@ -184,7 +184,7 @@
     
     {#if workoutData().distance !== undefined}
       <div class="text-4xl font-bold">{workoutData().distance}</div>
-      <div class="text-sm opacity-90 mt-1">m</div>
+      <div class="text-sm opacity-90 mt-1">meters</div>
     {/if}
     
     {#if hasRounds()}
@@ -192,7 +192,7 @@
     {/if}
     
     {#if workoutComplete()}
-      <div class="text-green-300 text-lg font-semibold mt-2 flex items-center justify-center gap-2">
+      <div class="text-white text-lg font-semibold mt-2 flex items-center justify-center gap-2">
         <CheckCircle class="w-6 h-6" />
         All Rounds Complete!
       </div>
@@ -275,6 +275,6 @@
   }
   
   .disabled:hover {
-    @apply bg-current;
+    @apply opacity-40;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/workout/LISSWorkout.svelte b/src/routes/workout/LISSWorkout.svelte
index 82644af..830feb6 100644
--- a/src/routes/workout/LISSWorkout.svelte
+++ b/src/routes/workout/LISSWorkout.svelte
@@ -217,6 +217,6 @@
   }
   
   .disabled:hover {
-    @apply bg-current;
+    @apply opacity-40;
   }
 </style>
\ No newline at end of file
diff --git a/static/demo.html b/static/demo.html
new file mode 100644
index 0000000..0909b01
--- /dev/null
+++ b/static/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>HIIT Workout Fixes Demo</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
+        .demo-section { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        .hiit-card { background: linear-gradient(to right, #f97316, #dc2626); color: white; padding: 24px; border-radius: 8px; text-align: center; margin-bottom: 16px; }
+        .button-row { display: flex; gap: 8px; margin-top: 16px; }
+        .btn { flex: 1; font-weight: 600; padding: 12px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; }
+        .btn-start { background: #22c55e; } /* green-500 */
+        .btn-start:hover { background: #16a34a; } /* green-600 */
+        .btn-pause { background: #eab308; } /* yellow-500 */
+        .btn-pause:hover { background: #ca8a04; } /* yellow-600 */
+        .btn-stop { background: #ef4444; } /* red-500 */
+        .btn-stop:hover { background: #dc2626; } /* red-600 */
+        .disabled { opacity: 0.4; cursor: not-allowed; }
+        .disabled:hover { opacity: 0.4; } /* Fixed: no longer changes to white */
+        .completion-text { color: white; font-weight: 600; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
+        .complete-btn { width: 100%; background: #22c55e; color: white; font-weight: 600; padding: 12px; border-radius: 8px; border: none; cursor: pointer; margin-top: 16px; }
+        .fix-highlight { background: #dcfce7; border: 2px solid #22c55e; }
+    </style>
+</head>
+<body>
+    <h1>HIIT Workout UI Fixes Demo</h1>
+    
+    <div class="demo-section fix-highlight">
+        <h3>✅ Fixed: All Rounds Complete Text</h3>
+        <div class="hiit-card">
+            <h3 style="margin: 0 0 16px 0; font-size: 24px;">Hill Sprints</h3>
+            <div style="font-size: 24px; font-weight: 600; margin-top: 8px;">Round 3 of 3</div>
+            <div class="completion-text">
+                ✓ All Rounds Complete!
+            </div>
+        </div>
+        <div class="button-row">
+            <button class="btn btn-start disabled">▶ All Rounds Complete</button>
+            <button class="btn btn-stop">⏹ Reset</button>
+        </div>
+        <p><em>The completion text is now white instead of green for better readability!</em></p>
+    </div>
+
+    <div class="demo-section fix-highlight">
+        <h3>✅ Fixed: Distance Unit Display</h3>
+        <div class="hiit-card">
+            <h3 style="margin: 0 0 16px 0; font-size: 24px;">Tempo Run</h3>
+            <div style="font-size: 48px; font-weight: bold;">5000</div>
+            <div style="font-size: 14px; opacity: 0.9; margin-top: 4px;">meters</div>
+        </div>
+        <div class="button-row">
+            <button class="btn btn-start">▶ Start</button>
+            <button class="btn btn-pause disabled">⏸ Pause</button>
+            <button class="btn btn-stop disabled">⏹ Reset</button>
+        </div>
+        <p><em>Distance unit now shows "meters" instead of "m" for better clarity!</em></p>
+    </div>
+</body>
+</html>
\ No newline at end of file

From 71d962c556d6cfad1729dd8f830efb577a125292 Mon Sep 17 00:00:00 2001
From: Bruno-366 <81762173+Bruno-366@users.noreply.github.com>
Date: Mon, 15 Sep 2025 12:33:37 +0200
Subject: [PATCH 14/14] Delete static/demo.html

---
 static/demo.html | 58 ------------------------------------------------
 1 file changed, 58 deletions(-)
 delete mode 100644 static/demo.html

diff --git a/static/demo.html b/static/demo.html
deleted file mode 100644
index 0909b01..0000000
--- a/static/demo.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>HIIT Workout Fixes Demo</title>
-    <style>
-        body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
-        .demo-section { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        .hiit-card { background: linear-gradient(to right, #f97316, #dc2626); color: white; padding: 24px; border-radius: 8px; text-align: center; margin-bottom: 16px; }
-        .button-row { display: flex; gap: 8px; margin-top: 16px; }
-        .btn { flex: 1; font-weight: 600; padding: 12px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; }
-        .btn-start { background: #22c55e; } /* green-500 */
-        .btn-start:hover { background: #16a34a; } /* green-600 */
-        .btn-pause { background: #eab308; } /* yellow-500 */
-        .btn-pause:hover { background: #ca8a04; } /* yellow-600 */
-        .btn-stop { background: #ef4444; } /* red-500 */
-        .btn-stop:hover { background: #dc2626; } /* red-600 */
-        .disabled { opacity: 0.4; cursor: not-allowed; }
-        .disabled:hover { opacity: 0.4; } /* Fixed: no longer changes to white */
-        .completion-text { color: white; font-weight: 600; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
-        .complete-btn { width: 100%; background: #22c55e; color: white; font-weight: 600; padding: 12px; border-radius: 8px; border: none; cursor: pointer; margin-top: 16px; }
-        .fix-highlight { background: #dcfce7; border: 2px solid #22c55e; }
-    </style>
-</head>
-<body>
-    <h1>HIIT Workout UI Fixes Demo</h1>
-    
-    <div class="demo-section fix-highlight">
-        <h3>✅ Fixed: All Rounds Complete Text</h3>
-        <div class="hiit-card">
-            <h3 style="margin: 0 0 16px 0; font-size: 24px;">Hill Sprints</h3>
-            <div style="font-size: 24px; font-weight: 600; margin-top: 8px;">Round 3 of 3</div>
-            <div class="completion-text">
-                ✓ All Rounds Complete!
-            </div>
-        </div>
-        <div class="button-row">
-            <button class="btn btn-start disabled">▶ All Rounds Complete</button>
-            <button class="btn btn-stop">⏹ Reset</button>
-        </div>
-        <p><em>The completion text is now white instead of green for better readability!</em></p>
-    </div>
-
-    <div class="demo-section fix-highlight">
-        <h3>✅ Fixed: Distance Unit Display</h3>
-        <div class="hiit-card">
-            <h3 style="margin: 0 0 16px 0; font-size: 24px;">Tempo Run</h3>
-            <div style="font-size: 48px; font-weight: bold;">5000</div>
-            <div style="font-size: 14px; opacity: 0.9; margin-top: 4px;">meters</div>
-        </div>
-        <div class="button-row">
-            <button class="btn btn-start">▶ Start</button>
-            <button class="btn btn-pause disabled">⏸ Pause</button>
-            <button class="btn btn-stop disabled">⏹ Reset</button>
-        </div>
-        <p><em>Distance unit now shows "meters" instead of "m" for better clarity!</em></p>
-    </div>
-</body>
-</html>
\ No newline at end of file