Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fitness: move workout controls to FAB, track rest timer position in store
All checks were successful
CI / update (push) Successful in 2m5s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-03-22 19:44:17 +01:00
parent b8f2a1e098
commit 6eb8c305be
5 changed files with 200 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/lib/components/fitness/WorkoutFab.svelte
View File

@@ -1,88 +1,151 @@
<script> <script>
import "$lib/css/action_button.css" import { goto } from '$app/navigation';
import { Dumbbell } from 'lucide-svelte'; 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> </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> <style>
.container{ .workout-bar {
position: fixed; position: fixed;
bottom:0; bottom: 0;
right:0; left: 0;
width: 1rem; right: 0;
height: 1rem; display: flex;
padding: 2rem; align-items: center;
border-radius: var(--radius-pill); justify-content: space-between;
margin: 2rem; max-width: 900px;
transition: var(--transition-normal); margin: 0 auto;
background-color: var(--red); padding: 0.75rem var(--space-md, 1rem);
display: grid; background: var(--color-bg-primary);
justify-content: center; border-top: 1px solid var(--color-border);
align-content: center; z-index: 100;
z-index: 100; cursor: pointer;
text-decoration: none;
}
@media screen and (max-width: 500px) {
.container{
margin: 1rem;
} }
} .bar-left {
display: flex;
.timer { align-items: center;
font-variant-numeric: tabular-nums; gap: 0.5rem;
font-weight: 700; }
font-size: 0.85rem; .pause-btn {
color: white; background: none;
line-height: 1; border: 1px solid var(--color-border);
text-align: center; border-radius: 6px;
} color: var(--color-text-secondary);
.timer.paused { cursor: pointer;
color: var(--nord13); padding: 0.3rem;
} display: flex;
align-items: center;
:root{ }
--angle: 15deg; .pause-btn:hover {
} border-color: var(--color-primary);
.container:hover, color: var(--color-primary);
.container:focus-within }
{ .elapsed {
background-color: var(--nord0); font-variant-numeric: tabular-nums;
box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2); font-weight: 600;
animation: shake 0.5s; font-size: 1.1rem;
animation-fill-mode: forwards; color: var(--color-text-secondary);
} }
.elapsed.paused {
@keyframes shake{ color: var(--nord13);
0%{ }
transform: rotate(0) .bar-label {
scale(1,1); font-size: 0.8rem;
} font-weight: 600;
25%{ color: var(--color-text-secondary);
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6); text-transform: uppercase;
transform: rotate(var(--angle)) letter-spacing: 0.03em;
scale(1.2,1.2) }
; .rest-pill {
} position: relative;
50%{ height: 2rem;
border-radius: 8px;
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6); overflow: hidden;
transform: rotate(calc(-1* var(--angle))) background: var(--color-bg-elevated);
scale(1.2,1.2); min-width: 10rem;
} }
74%{ .rest-fill {
position: absolute;
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6); inset: 0;
transform: rotate(var(--angle)) background: var(--color-primary);
scale(1.2, 1.2); border-radius: 8px;
transition: width 1s linear;
}
.rest-controls {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
z-index: 1;
}
.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;
}
.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;
}
.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);
} }
100%{
transform: rotate(0)
scale(1.2,1.2);
}
}
</style> </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>

26
src/lib/js/workout.svelte.ts
View File

@@ -43,6 +43,8 @@ export interface StoredState {
savedAt: number; // Date.now() at time of save savedAt: number; // Date.now() at time of save
restStartedAt: number | null; // Date.now() when rest timer started restStartedAt: number | null; // Date.now() when rest timer started
restTotal: number; // total rest duration in seconds 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 { export interface RemoteState {
@@ -54,6 +56,8 @@ export interface RemoteState {
savedAt: number; savedAt: number;
restStartedAt: number | null; restStartedAt: number | null;
restTotal: number; restTotal: number;
restExerciseIdx: number;
restSetIdx: number;
} }
function createEmptySet(): WorkoutSet { function createEmptySet(): WorkoutSet {
@@ -95,6 +99,8 @@ export function createWorkout() {
let _restTotal = $state(0); let _restTotal = $state(0);
let _restActive = $state(false); let _restActive = $state(false);
let _restStartedAt: number | null = null; // absolute timestamp let _restStartedAt: number | null = null; // absolute timestamp
let _restExerciseIdx = $state(-1);
let _restSetIdx = $state(-1);
let _timerInterval: ReturnType<typeof setInterval> | null = null; let _timerInterval: ReturnType<typeof setInterval> | null = null;
let _restInterval: ReturnType<typeof setInterval> | null = null; let _restInterval: ReturnType<typeof setInterval> | null = null;
@@ -115,7 +121,9 @@ export function createWorkout() {
elapsed: _elapsed, elapsed: _elapsed,
savedAt: Date.now(), savedAt: Date.now(),
restStartedAt: _restActive ? _restStartedAt : null, restStartedAt: _restActive ? _restStartedAt : null,
restTotal: _restTotal restTotal: _restTotal,
restExerciseIdx: _restActive ? _restExerciseIdx : -1,
restSetIdx: _restActive ? _restSetIdx : -1
}); });
_onChangeCallback?.(); _onChangeCallback?.();
} }
@@ -163,6 +171,8 @@ export function createWorkout() {
_restSeconds = 0; _restSeconds = 0;
_restTotal = 0; _restTotal = 0;
_restStartedAt = null; _restStartedAt = null;
_restExerciseIdx = -1;
_restSetIdx = -1;
} }
// Restore from localStorage on creation // Restore from localStorage on creation
@@ -200,6 +210,8 @@ export function createWorkout() {
_restTotal = stored.restTotal; _restTotal = stored.restTotal;
_restSeconds = remaining; _restSeconds = remaining;
_restActive = true; _restActive = true;
_restExerciseIdx = stored.restExerciseIdx ?? -1;
_restSetIdx = stored.restSetIdx ?? -1;
_startRestInterval(); _startRestInterval();
} }
} }
@@ -323,12 +335,14 @@ export function createWorkout() {
} }
} }
function startRestTimer(seconds: number) { function startRestTimer(seconds: number, exerciseIdx: number = -1, setIdx: number = -1) {
_stopRestTimer(); _stopRestTimer();
_restStartedAt = Date.now(); _restStartedAt = Date.now();
_restSeconds = seconds; _restSeconds = seconds;
_restTotal = seconds; _restTotal = seconds;
_restActive = true; _restActive = true;
_restExerciseIdx = exerciseIdx;
_restSetIdx = setIdx;
_startRestInterval(); _startRestInterval();
_persist(); _persist();
} }
@@ -445,6 +459,8 @@ export function createWorkout() {
_restTotal = remote.restTotal; _restTotal = remote.restTotal;
_restSeconds = remaining; _restSeconds = remaining;
_restActive = true; _restActive = true;
_restExerciseIdx = remote.restExerciseIdx ?? -1;
_restSetIdx = remote.restSetIdx ?? -1;
_startRestInterval(); _startRestInterval();
} }
} }
@@ -460,7 +476,9 @@ export function createWorkout() {
elapsed: _elapsed, elapsed: _elapsed,
savedAt: Date.now(), savedAt: Date.now(),
restStartedAt: _restActive ? _restStartedAt : null, 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 restTimerTotal() { return _restTotal; },
get restTimerActive() { return _restActive; }, get restTimerActive() { return _restActive; },
get restStartedAt() { return _restStartedAt; }, get restStartedAt() { return _restStartedAt; },
get restExerciseIdx() { return _restExerciseIdx; },
get restSetIdx() { return _restSetIdx; },
restore, restore,
startFromTemplate, startFromTemplate,
startEmpty, startEmpty,

14
src/lib/js/workoutSync.svelte.ts
View File

@@ -21,6 +21,8 @@ interface ServerWorkout {
savedAt: number; savedAt: number;
restStartedAt: number | null; restStartedAt: number | null;
restTotal: number; restTotal: number;
restExerciseIdx: number;
restSetIdx: number;
} }
export function createWorkoutSync() { export function createWorkoutSync() {
@@ -46,7 +48,9 @@ export function createWorkoutSync() {
elapsed, elapsed,
savedAt: Date.now(), savedAt: Date.now(),
restStartedAt: workout.restStartedAt, 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, elapsed: doc.elapsed,
savedAt: doc.savedAt, savedAt: doc.savedAt,
restStartedAt: doc.restStartedAt ?? null, restStartedAt: doc.restStartedAt ?? null,
restTotal: doc.restTotal ?? 0 restTotal: doc.restTotal ?? 0,
restExerciseIdx: doc.restExerciseIdx ?? -1,
restSetIdx: doc.restSetIdx ?? -1
}); });
status = 'synced'; status = 'synced';
@@ -225,7 +231,9 @@ export function createWorkoutSync() {
elapsed: serverDoc.elapsed, elapsed: serverDoc.elapsed,
savedAt: serverDoc.savedAt, savedAt: serverDoc.savedAt,
restStartedAt: serverDoc.restStartedAt ?? null, restStartedAt: serverDoc.restStartedAt ?? null,
restTotal: serverDoc.restTotal ?? 0 restTotal: serverDoc.restTotal ?? 0,
restExerciseIdx: serverDoc.restExerciseIdx ?? -1,
restSetIdx: serverDoc.restSetIdx ?? -1
}); });
} }
connectSSE(); connectSSE();

6
src/routes/fitness/+layout.svelte
View File

@@ -65,6 +65,12 @@
href="/fitness/workout/active" href="/fitness/workout/active"
elapsed={formatElapsed(workout.elapsedSeconds)} elapsed={formatElapsed(workout.elapsedSeconds)}
paused={workout.paused} 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} {/if}

40
src/routes/fitness/workout/active/+page.svelte
View File

@@ -16,8 +16,6 @@
let nameEditing = $state(false); let nameEditing = $state(false);
$effect(() => { if (!nameEditing) nameInput = workout.name; }); $effect(() => { if (!nameEditing) nameInput = workout.name; });
let showPicker = $state(false); let showPicker = $state(false);
let restExerciseIdx = $state(-1);
let restSetIdx = $state(-1);
/** @type {Record<string, Array<Record<string, any>>>} */ /** @type {Record<string, Array<Record<string, any>>>} */
let previousData = $state({}); let previousData = $state({});
@@ -314,8 +312,6 @@
function cancelRest() { function cancelRest() {
workout.cancelRestTimer(); workout.cancelRestTimer();
restExerciseIdx = -1;
restSetIdx = -1;
} }
// Fetch previous data for existing exercises on mount // Fetch previous data for existing exercises on mount
@@ -462,17 +458,6 @@
{:else if workout.active} {:else if workout.active}
<div class="active-workout"> <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 <input
class="workout-name-input" class="workout-name-input"
type="text" type="text"
@@ -509,7 +494,7 @@
previousSets={previousData[ex.exerciseId] ?? []} previousSets={previousData[ex.exerciseId] ?? []}
metrics={getExerciseMetrics(getExerciseById(ex.exerciseId))} metrics={getExerciseMetrics(getExerciseById(ex.exerciseId))}
editable={true} editable={true}
restAfterSet={workout.restTimerActive && restExerciseIdx === exIdx ? restSetIdx : -1} restAfterSet={workout.restTimerActive && workout.restExerciseIdx === exIdx ? workout.restSetIdx : -1}
restSeconds={workout.restTimerSeconds} restSeconds={workout.restTimerSeconds}
restTotal={workout.restTimerTotal} restTotal={workout.restTimerTotal}
onRestAdjust={(delta) => workout.adjustRestTimer(delta)} onRestAdjust={(delta) => workout.adjustRestTimer(delta)}
@@ -518,9 +503,7 @@
onToggleComplete={(setIdx) => { onToggleComplete={(setIdx) => {
workout.toggleSetComplete(exIdx, setIdx); workout.toggleSetComplete(exIdx, setIdx);
if (ex.sets[setIdx]?.completed && !workout.restTimerActive) { if (ex.sets[setIdx]?.completed && !workout.restTimerActive) {
restExerciseIdx = exIdx; workout.startRestTimer(ex.restTime, exIdx, setIdx);
restSetIdx = setIdx;
workout.startRestTimer(ex.restTime);
} }
}} }}
onRemove={(setIdx) => workout.removeSet(exIdx, setIdx)} onRemove={(setIdx) => workout.removeSet(exIdx, setIdx)}
@@ -540,6 +523,17 @@
CANCEL WORKOUT CANCEL WORKOUT
</button> </button>
</div> </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> </div>
{/if} {/if}
@@ -768,16 +762,16 @@
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
.workout-topbar { .workout-bottombar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: sticky; position: sticky;
top: 3.5rem; bottom: 0;
background: var(--color-bg-primary); background: var(--color-bg-primary);
z-index: 10; z-index: 10;
padding: 0.5rem 0; padding: 0.75rem 0;
border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }
.topbar-left { .topbar-left {
display: flex; display: flex;