fitness: move workout controls to FAB, track rest timer position in store

2026-03-22 19:44:17 +01:00
parent b8f2a1e098
commit 6eb8c305be
5 changed files with 200 additions and 109 deletions
--- a/src/lib/components/fitness/WorkoutFab.svelte
+++ b/src/lib/components/fitness/WorkoutFab.svelte
@@ -1,88 +1,151 @@
 <script>
-import "$lib/css/action_button.css"
-import { Dumbbell } from 'lucide-svelte';
+import { goto } from '$app/navigation';
+import { Play, Pause } from 'lucide-svelte';
+import SyncIndicator from '$lib/components/fitness/SyncIndicator.svelte';

-let { href, elapsed = '0:00', paused = false } = $props();
+let { href, elapsed = '0:00', paused = false, syncStatus = 'idle', onPauseToggle,
+	restSeconds = 0, restTotal = 0, onRestAdjust = null, onRestSkip = null } = $props();
+
+/** @param {number} secs */
+function formatRest(secs) {
+	const m = Math.floor(secs / 60);
+	const s = secs % 60;
+	return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+const restProgress = $derived(restTotal > 0 ? restSeconds / restTotal : 0);
 </script>

+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="workout-bar" onclick={() => goto(href)} onkeydown={(e) => { if (e.key === 'Enter') goto(href); }}>
+	<div class="bar-left">
+		<button class="pause-btn" onclick={(e) => { e.stopPropagation(); onPauseToggle?.(); }} aria-label={paused ? 'Resume' : 'Pause'}>
+			{#if paused}<Play size={16} />{:else}<Pause size={16} />{/if}
+		</button>
+		<span class="elapsed" class:paused>{elapsed}</span>
+		<SyncIndicator status={syncStatus} />
+	</div>
+	{#if restTotal > 0 && restSeconds > 0}
+		<div class="rest-pill" onclick={(e) => e.stopPropagation()}>
+			<div class="rest-fill" style:width="{restProgress * 100}%"></div>
+			<div class="rest-controls">
+				<button class="rest-adj" onclick={() => onRestAdjust?.(-30)}>-30s</button>
+				<button class="rest-time" onclick={() => onRestSkip?.()}>{formatRest(restSeconds)}</button>
+				<button class="rest-adj" onclick={() => onRestAdjust?.(30)}>+30s</button>
+			</div>
+		</div>
+	{:else}
+		<span class="bar-label">Active Workout</span>
+	{/if}
+</div>
+
 <style>
-.container{
+	.workout-bar {
 		position: fixed;
 		bottom: 0;
+		left: 0;
 		right: 0;
-width: 1rem;
-height: 1rem;
-padding: 2rem;
-border-radius: var(--radius-pill);
-margin: 2rem;
-transition: var(--transition-normal);
-background-color: var(--red);
-display: grid;
-justify-content: center;
-align-content: center;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		max-width: 900px;
+		margin: 0 auto;
+		padding: 0.75rem var(--space-md, 1rem);
+		background: var(--color-bg-primary);
+		border-top: 1px solid var(--color-border);
 		z-index: 100;
-text-decoration: none;
+		cursor: pointer;
 	}
-@media screen and (max-width: 500px) {
-	.container{
-		margin: 1rem;
+	.bar-left {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 	}
+	.pause-btn {
+		background: none;
+		border: 1px solid var(--color-border);
+		border-radius: 6px;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		padding: 0.3rem;
+		display: flex;
+		align-items: center;
 	}
-
-.timer {
+	.pause-btn:hover {
+		border-color: var(--color-primary);
+		color: var(--color-primary);
+	}
+	.elapsed {
 		font-variant-numeric: tabular-nums;
-	font-weight: 700;
-	font-size: 0.85rem;
-	color: white;
-	line-height: 1;
-	text-align: center;
+		font-weight: 600;
+		font-size: 1.1rem;
+		color: var(--color-text-secondary);
 	}
-.timer.paused {
+	.elapsed.paused {
 		color: var(--nord13);
 	}
-
-:root{
-    --angle: 15deg;
+	.bar-label {
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
 	}
-.container:hover,
-.container:focus-within
-{
-	background-color: var(--nord0);
-box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2);
-	animation: shake 0.5s;
-	animation-fill-mode: forwards;
+	.rest-pill {
+		position: relative;
+		height: 2rem;
+		border-radius: 8px;
+		overflow: hidden;
+		background: var(--color-bg-elevated);
+		min-width: 10rem;
 	}
-
-@keyframes shake{
-    0%{
-      transform: rotate(0)
-		scale(1,1);
+	.rest-fill {
+		position: absolute;
+		inset: 0;
+		background: var(--color-primary);
+		border-radius: 8px;
+		transition: width 1s linear;
 	}
-    25%{
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(var(--angle))
-      		scale(1.2,1.2)
-      ;
+	.rest-controls {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		z-index: 1;
 	}
-    50%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-      	transform: rotate(calc(-1* var(--angle)))
-      		scale(1.2,1.2);
+	.rest-time {
+		background: none;
+		border: none;
+		font-size: 0.85rem;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-text-primary, inherit);
+		cursor: pointer;
+		padding: 0.2rem 0.4rem;
 	}
-    74%{
-
-    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
-  	transform: rotate(var(--angle))
-  		scale(1.2, 1.2);
+	.rest-adj {
+		background: none;
+		border: none;
+		color: var(--color-text-primary, inherit);
+		cursor: pointer;
+		font-size: 0.7rem;
+		font-weight: 600;
+		padding: 0.2rem 0.3rem;
+		border-radius: 4px;
+		opacity: 0.7;
 	}
-	100%{
-      transform: rotate(0)
-      scale(1.2,1.2);
+	.rest-adj:hover {
+		opacity: 1;
 	}
+	@media (prefers-color-scheme: dark) {
+		.rest-time, .rest-adj {
+			color: var(--nord10);
+		}
+	}
+	:global(:root[data-theme="dark"]) .rest-time,
+	:global(:root[data-theme="dark"]) .rest-adj {
+		color: var(--nord10);
 	}
 </style>
-<a class="container action_button" {href} aria-label="Return to active workout">
-	<span class="timer" class:paused>{elapsed}</span>
-	<Dumbbell size={26} color="white" />
-</a>
--- a/src/lib/js/workout.svelte.ts
+++ b/src/lib/js/workout.svelte.ts
@@ -43,6 +43,8 @@ export interface StoredState {
 	savedAt: number; // Date.now() at time of save
 	restStartedAt: number | null; // Date.now() when rest timer started
 	restTotal: number; // total rest duration in seconds
+	restExerciseIdx: number; // which exercise the rest timer belongs to
+	restSetIdx: number; // which set the rest timer belongs to
 }

 export interface RemoteState {
@@ -54,6 +56,8 @@ export interface RemoteState {
 	savedAt: number;
 	restStartedAt: number | null;
 	restTotal: number;
+	restExerciseIdx: number;
+	restSetIdx: number;
 }

 function createEmptySet(): WorkoutSet {
@@ -95,6 +99,8 @@ export function createWorkout() {
 	let _restTotal = $state(0);
 	let _restActive = $state(false);
 	let _restStartedAt: number | null = null; // absolute timestamp
+	let _restExerciseIdx = $state(-1);
+	let _restSetIdx = $state(-1);

 	let _timerInterval: ReturnType<typeof setInterval> | null = null;
 	let _restInterval: ReturnType<typeof setInterval> | null = null;
@@ -115,7 +121,9 @@ export function createWorkout() {
 			elapsed: _elapsed,
 			savedAt: Date.now(),
 			restStartedAt: _restActive ? _restStartedAt : null,
-			restTotal: _restTotal
+			restTotal: _restTotal,
+			restExerciseIdx: _restActive ? _restExerciseIdx : -1,
+			restSetIdx: _restActive ? _restSetIdx : -1
 		});
 		_onChangeCallback?.();
 	}
@@ -163,6 +171,8 @@ export function createWorkout() {
 		_restSeconds = 0;
 		_restTotal = 0;
 		_restStartedAt = null;
+		_restExerciseIdx = -1;
+		_restSetIdx = -1;
 	}

 	// Restore from localStorage on creation
@@ -200,6 +210,8 @@ export function createWorkout() {
 				_restTotal = stored.restTotal;
 				_restSeconds = remaining;
 				_restActive = true;
+				_restExerciseIdx = stored.restExerciseIdx ?? -1;
+				_restSetIdx = stored.restSetIdx ?? -1;
 				_startRestInterval();
 			}
 		}
@@ -323,12 +335,14 @@ export function createWorkout() {
 		}
 	}

-	function startRestTimer(seconds: number) {
+	function startRestTimer(seconds: number, exerciseIdx: number = -1, setIdx: number = -1) {
 		_stopRestTimer();
 		_restStartedAt = Date.now();
 		_restSeconds = seconds;
 		_restTotal = seconds;
 		_restActive = true;
+		_restExerciseIdx = exerciseIdx;
+		_restSetIdx = setIdx;
 		_startRestInterval();
 		_persist();
 	}
@@ -445,6 +459,8 @@ export function createWorkout() {
 					_restTotal = remote.restTotal;
 					_restSeconds = remaining;
 					_restActive = true;
+					_restExerciseIdx = remote.restExerciseIdx ?? -1;
+					_restSetIdx = remote.restSetIdx ?? -1;
 					_startRestInterval();
 				}
 			}
@@ -460,7 +476,9 @@ export function createWorkout() {
 			elapsed: _elapsed,
 			savedAt: Date.now(),
 			restStartedAt: _restActive ? _restStartedAt : null,
-			restTotal: _restTotal
+			restTotal: _restTotal,
+			restExerciseIdx: _restActive ? _restExerciseIdx : -1,
+			restSetIdx: _restActive ? _restSetIdx : -1
 		});
 	}

@@ -488,6 +506,8 @@ export function createWorkout() {
 		get restTimerTotal() { return _restTotal; },
 		get restTimerActive() { return _restActive; },
 		get restStartedAt() { return _restStartedAt; },
+		get restExerciseIdx() { return _restExerciseIdx; },
+		get restSetIdx() { return _restSetIdx; },
 		restore,
 		startFromTemplate,
 		startEmpty,
--- a/src/lib/js/workoutSync.svelte.ts
+++ b/src/lib/js/workoutSync.svelte.ts
@@ -21,6 +21,8 @@ interface ServerWorkout {
  savedAt: number;
  restStartedAt: number | null;
  restTotal: number;
+  restExerciseIdx: number;
+  restSetIdx: number;
 }

 export function createWorkoutSync() {
@@ -46,7 +48,9 @@ export function createWorkoutSync() {
      elapsed,
      savedAt: Date.now(),
      restStartedAt: workout.restStartedAt,
-      restTotal: workout.restTimerTotal
+      restTotal: workout.restTimerTotal,
+      restExerciseIdx: workout.restExerciseIdx,
+      restSetIdx: workout.restSetIdx
    };
  }

@@ -109,7 +113,9 @@ export function createWorkoutSync() {
        elapsed: doc.elapsed,
        savedAt: doc.savedAt,
        restStartedAt: doc.restStartedAt ?? null,
-        restTotal: doc.restTotal ?? 0
+        restTotal: doc.restTotal ?? 0,
+        restExerciseIdx: doc.restExerciseIdx ?? -1,
+        restSetIdx: doc.restSetIdx ?? -1
      });

      status = 'synced';
@@ -225,7 +231,9 @@ export function createWorkoutSync() {
            elapsed: serverDoc.elapsed,
            savedAt: serverDoc.savedAt,
            restStartedAt: serverDoc.restStartedAt ?? null,
-            restTotal: serverDoc.restTotal ?? 0
+            restTotal: serverDoc.restTotal ?? 0,
+            restExerciseIdx: serverDoc.restExerciseIdx ?? -1,
+            restSetIdx: serverDoc.restSetIdx ?? -1
          });
        }
        connectSSE();
--- a/src/routes/fitness/+layout.svelte
+++ b/src/routes/fitness/+layout.svelte
@@ -65,6 +65,12 @@
 		href="/fitness/workout/active"
 		elapsed={formatElapsed(workout.elapsedSeconds)}
 		paused={workout.paused}
+		syncStatus={sync.status}
+		onPauseToggle={() => workout.paused ? workout.resumeTimer() : workout.pauseTimer()}
+		restSeconds={workout.restTimerSeconds}
+		restTotal={workout.restTimerTotal}
+		onRestAdjust={(delta) => workout.adjustRestTimer(delta)}
+		onRestSkip={() => workout.cancelRestTimer()}
 	/>
 {/if}

--- a/src/routes/fitness/workout/active/+page.svelte
+++ b/src/routes/fitness/workout/active/+page.svelte
@@ -16,8 +16,6 @@
 	let nameEditing = $state(false);
 	$effect(() => { if (!nameEditing) nameInput = workout.name; });
 	let showPicker = $state(false);
-	let restExerciseIdx = $state(-1);
-	let restSetIdx = $state(-1);

 	/** @type {Record<string, Array<Record<string, any>>>} */
 	let previousData = $state({});
@@ -314,8 +312,6 @@

 	function cancelRest() {
 		workout.cancelRestTimer();
-		restExerciseIdx = -1;
-		restSetIdx = -1;
 	}

 	// Fetch previous data for existing exercises on mount
@@ -462,17 +458,6 @@

 {:else if workout.active}
 	<div class="active-workout">
-		<div class="workout-topbar">
-			<div class="topbar-left">
-				<button class="pause-btn" onclick={() => workout.paused ? workout.resumeTimer() : workout.pauseTimer()} aria-label={workout.paused ? 'Resume' : 'Pause'}>
-					{#if workout.paused}<Play size={16} />{:else}<Pause size={16} />{/if}
-				</button>
-				<span class="elapsed" class:paused={workout.paused}>{formatElapsed(workout.elapsedSeconds)}</span>
-				<SyncIndicator status={sync.status} />
-			</div>
-			<button class="finish-btn" onclick={finishWorkout}>FINISH</button>
-		</div>
-
 		<input
 			class="workout-name-input"
 			type="text"
@@ -509,7 +494,7 @@
 					previousSets={previousData[ex.exerciseId] ?? []}
 					metrics={getExerciseMetrics(getExerciseById(ex.exerciseId))}
 					editable={true}
-					restAfterSet={workout.restTimerActive && restExerciseIdx === exIdx ? restSetIdx : -1}
+					restAfterSet={workout.restTimerActive && workout.restExerciseIdx === exIdx ? workout.restSetIdx : -1}
 					restSeconds={workout.restTimerSeconds}
 					restTotal={workout.restTimerTotal}
 					onRestAdjust={(delta) => workout.adjustRestTimer(delta)}
@@ -518,9 +503,7 @@
 					onToggleComplete={(setIdx) => {
 						workout.toggleSetComplete(exIdx, setIdx);
 						if (ex.sets[setIdx]?.completed && !workout.restTimerActive) {
-							restExerciseIdx = exIdx;
-							restSetIdx = setIdx;
-							workout.startRestTimer(ex.restTime);
+							workout.startRestTimer(ex.restTime, exIdx, setIdx);
 						}
 					}}
 					onRemove={(setIdx) => workout.removeSet(exIdx, setIdx)}
@@ -540,6 +523,17 @@
 				CANCEL WORKOUT
 			</button>
 		</div>
+
+		<div class="workout-bottombar">
+			<div class="topbar-left">
+				<button class="pause-btn" onclick={() => workout.paused ? workout.resumeTimer() : workout.pauseTimer()} aria-label={workout.paused ? 'Resume' : 'Pause'}>
+					{#if workout.paused}<Play size={16} />{:else}<Pause size={16} />{/if}
+				</button>
+				<span class="elapsed" class:paused={workout.paused}>{formatElapsed(workout.elapsedSeconds)}</span>
+				<SyncIndicator status={sync.status} />
+			</div>
+			<button class="finish-btn" onclick={finishWorkout}>FINISH</button>
+		</div>
 	</div>
 {/if}

@@ -768,16 +762,16 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
-	.workout-topbar {
+	.workout-bottombar {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		position: sticky;
-		top: 3.5rem;
+		bottom: 0;
 		background: var(--color-bg-primary);
 		z-index: 10;
-		padding: 0.5rem 0;
-		border-bottom: 1px solid var(--color-border);
+		padding: 0.75rem 0;
+		border-top: 1px solid var(--color-border);
 	}
 	.topbar-left {
 		display: flex;