From 86ff4c59537f489cbb11704cd593fa8e2e137443 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 23 Apr 2026 21:43:04 +0200
Subject: [PATCH] style(fitness/workout-fab): floating glass pill matching
 header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Redesign the active-workout footer as a floating glass pill that
mirrors the site header — same backdrop-blur recipe, same token set,
anchored to the bottom instead of the top. Inner controls recomposed:
icon-only pause button, dominant elapsed time, subtle divider, label +
chevron or rest-timer pill. Mount animation, hover-lift, reduced-
motion fallback.
---
 package.json                                 |   2 +-
 src/lib/components/fitness/WorkoutFab.svelte | 352 ++++++++++++++-----
 2 files changed, 274 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index bdd5fddf..18f020de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.47.3",
+	"version": "1.47.4",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/fitness/WorkoutFab.svelte b/src/lib/components/fitness/WorkoutFab.svelte
index c3f5567d..0313acd4 100644
--- a/src/lib/components/fitness/WorkoutFab.svelte
+++ b/src/lib/components/fitness/WorkoutFab.svelte
@@ -2,6 +2,7 @@
 import { goto } from '$app/navigation';
 import Play from '@lucide/svelte/icons/play';
 import Pause from '@lucide/svelte/icons/pause';
+import ChevronRight from '@lucide/svelte/icons/chevron-right';
 import SyncIndicator from '$lib/components/fitness/SyncIndicator.svelte';
 import { page } from '$app/stores';
 import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
@@ -18,131 +19,324 @@ function formatRest(secs) {
 	return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
+const restActive = $derived(restTotal > 0 && restSeconds > 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}
-		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
-		<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
+	class="workout-fab"
+	class:rest-active={restActive}
+	role="button"
+	tabindex="0"
+	aria-label={t('active_workout', lang)}
+	onclick={() => goto(href)}
+	onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goto(href); } }}
+>
+	<button
+		class="pause-btn"
+		onclick={(e) => { e.stopPropagation(); onPauseToggle?.(); }}
+		aria-label={paused ? 'Resume' : 'Pause'}
+	>
+		{#if paused}<Play size={14} strokeWidth={2.4} />{:else}<Pause size={14} strokeWidth={2.4} />{/if}
+	</button>
+
+	<span class="elapsed" class:paused>{elapsed}</span>
+
+	<span class="fab-sync"><SyncIndicator status={syncStatus} /></span>
+
+	<span class="fab-divider" aria-hidden="true"></span>
+
+	{#if restActive}
+		<div class="rest-pill">
+			<div class="rest-fill" style:width="{restProgress * 100}%" aria-hidden="true"></div>
+			<button class="rest-adj" onclick={(e) => { e.stopPropagation(); onRestAdjust?.(-30); }} aria-label="Remove 30 seconds">−30s</button>
+			<button class="rest-time" onclick={(e) => { e.stopPropagation(); onRestSkip?.(); }} aria-label="Skip rest">{formatRest(restSeconds)}</button>
+			<button class="rest-adj" onclick={(e) => { e.stopPropagation(); onRestAdjust?.(30); }} aria-label="Add 30 seconds">+30s</button>
 		</div>
 	{:else}
-		<span class="bar-label">{t('active_workout', lang)}</span>
+		<span class="fab-label">{t('active_workout', lang)}</span>
+		<ChevronRight size={14} strokeWidth={2.4} class="fab-chevron" />
 	{/if}
 </div>
 
 <style>
-	.workout-bar {
+	/* ═══════════════════════════════════════════
+	   FLOATING GLASS PILL — mirrors Header.svelte nav
+	   ═══════════════════════════════════════════ */
+	.workout-fab {
 		position: fixed;
-		bottom: 0;
+		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
 		left: 0;
 		right: 0;
-		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;
-		cursor: pointer;
-	}
-	.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);
+		height: 3rem;
+		padding: 0 0.45rem 0 0.45rem;
+
+		width: -moz-fit-content;
+		width: fit-content;
+		max-width: calc(100% - 1.5rem);
+		margin-inline: auto;
+
+		border-radius: 100px;
+		background: var(--fab-bg, rgba(46, 52, 64, 0.82));
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
+		border: 1px solid var(--fab-border, rgba(255, 255, 255, 0.08));
+		box-shadow: 0 4px 24px var(--fab-shadow, rgba(0, 0, 0, 0.25));
+
 		cursor: pointer;
-		padding: 0.3rem;
-		display: flex;
+		transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
+		            box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+		animation: fab-rise 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+
+		/* token defaults (dark bar) */
+		--fab-text: #c9c9c9;
+		--fab-text-strong: #fff;
+		--fab-text-muted: rgba(255, 255, 255, 0.55);
+		--fab-btn-bg: rgba(255, 255, 255, 0.08);
+		--fab-btn-bg-hover: rgba(255, 255, 255, 0.16);
+		--fab-btn-border: rgba(255, 255, 255, 0.14);
+		--fab-divider: rgba(255, 255, 255, 0.12);
+		--fab-accent: var(--blue, #5e81ac);
+		--fab-paused: var(--nord13, #ebcb8b);
+	}
+
+	.workout-fab:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 8px 28px var(--fab-shadow, rgba(0, 0, 0, 0.35));
+	}
+	.workout-fab:active {
+		transform: translateY(0);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.workout-fab {
+			--fab-bg: rgba(20, 20, 20, 0.78);
+			--fab-border: rgba(255, 255, 255, 0.06);
+		}
+	}
+	:global(:root[data-theme="dark"]) .workout-fab {
+		--fab-bg: rgba(20, 20, 20, 0.78);
+		--fab-border: rgba(255, 255, 255, 0.06);
+	}
+
+	/* Light theme */
+	:global(:root[data-theme="light"]) .workout-fab {
+		--fab-bg: rgba(255, 255, 255, 0.82);
+		--fab-border: rgba(0, 0, 0, 0.08);
+		--fab-shadow: rgba(0, 0, 0, 0.1);
+		--fab-text: #555;
+		--fab-text-strong: var(--nord0, #2e3440);
+		--fab-text-muted: rgba(0, 0, 0, 0.5);
+		--fab-btn-bg: rgba(0, 0, 0, 0.05);
+		--fab-btn-bg-hover: rgba(0, 0, 0, 0.1);
+		--fab-btn-border: rgba(0, 0, 0, 0.12);
+		--fab-divider: rgba(0, 0, 0, 0.1);
+	}
+	@media (prefers-color-scheme: light) {
+		:global(:root:not([data-theme])) .workout-fab {
+			--fab-bg: rgba(255, 255, 255, 0.82);
+			--fab-border: rgba(0, 0, 0, 0.08);
+			--fab-shadow: rgba(0, 0, 0, 0.1);
+			--fab-text: #555;
+			--fab-text-strong: var(--nord0, #2e3440);
+			--fab-text-muted: rgba(0, 0, 0, 0.5);
+			--fab-btn-bg: rgba(0, 0, 0, 0.05);
+			--fab-btn-bg-hover: rgba(0, 0, 0, 0.1);
+			--fab-btn-border: rgba(0, 0, 0, 0.12);
+			--fab-divider: rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	/* ═══════════════════════════════════════════
+	   PAUSE BUTTON — small pill icon button (matches nav hover tile)
+	   ═══════════════════════════════════════════ */
+	.pause-btn {
+		flex-shrink: 0;
+		display: inline-flex;
 		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 100px;
+		background: var(--fab-btn-bg);
+		border: 1px solid var(--fab-btn-border);
+		color: var(--fab-text-strong);
+		cursor: pointer;
+		padding: 0;
+		transition: background 140ms, color 140ms, transform 120ms;
 	}
 	.pause-btn:hover {
-		border-color: var(--color-primary);
-		color: var(--color-primary);
+		background: var(--fab-btn-bg-hover);
+		color: var(--fab-accent);
 	}
+	.pause-btn:active {
+		transform: scale(0.94);
+	}
+
+	/* ═══════════════════════════════════════════
+	   ELAPSED TIME — dominant numeric
+	   ═══════════════════════════════════════════ */
 	.elapsed {
+		flex-shrink: 0;
 		font-variant-numeric: tabular-nums;
-		font-weight: 600;
-		font-size: 1.1rem;
-		color: var(--color-text-secondary);
+		font-weight: 700;
+		font-size: 1.05rem;
+		letter-spacing: 0.01em;
+		color: var(--fab-text-strong);
+		padding-inline: 0.15rem;
 	}
 	.elapsed.paused {
-		color: var(--nord13);
+		color: var(--fab-paused);
 	}
-	.bar-label {
-		font-size: 0.8rem;
-		font-weight: 600;
-		color: var(--color-text-secondary);
+
+	.fab-sync {
+		display: inline-flex;
+		align-items: center;
+		color: var(--fab-text-muted);
+	}
+
+	.fab-divider {
+		width: 1px;
+		height: 1.2rem;
+		background: var(--fab-divider);
+		flex-shrink: 0;
+	}
+
+	/* ═══════════════════════════════════════════
+	   RIGHT-SIDE LABEL / CHEVRON — idle state
+	   ═══════════════════════════════════════════ */
+	.fab-label {
+		flex-shrink: 0;
+		font-size: 0.7rem;
+		font-weight: 700;
+		letter-spacing: 0.12em;
 		text-transform: uppercase;
-		letter-spacing: 0.03em;
+		color: var(--fab-text);
+		padding-right: 0.15rem;
 	}
+
+	.workout-fab :global(.fab-chevron) {
+		color: var(--fab-text-muted);
+		margin-right: 0.35rem;
+		transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 140ms;
+	}
+	.workout-fab:hover :global(.fab-chevron) {
+		color: var(--fab-text-strong);
+		transform: translateX(3px);
+	}
+
+	/* ═══════════════════════════════════════════
+	   REST PILL — inner pill with animated progress fill
+	   ═══════════════════════════════════════════ */
 	.rest-pill {
 		position: relative;
-		height: 2.2rem;
-		border-radius: 8px;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		height: 2.1rem;
+		padding: 0 0.25rem;
+		border-radius: 100px;
+		background: var(--fab-btn-bg);
 		overflow: hidden;
-		background: var(--nord0);
-		min-width: 10rem;
+		isolation: isolate;
 	}
 	.rest-fill {
 		position: absolute;
 		inset: 0;
-		background: var(--blue);
-		border-radius: 8px;
+		right: auto;
+		background: linear-gradient(
+			90deg,
+			color-mix(in srgb, var(--fab-accent), transparent 55%) 0%,
+			var(--fab-accent) 100%
+		);
 		transition: width 1s linear;
+		z-index: -1;
 	}
-	.rest-controls {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 1rem;
-		z-index: 1;
-	}
-	.rest-time {
+	.rest-time,
+	.rest-adj {
+		appearance: none;
 		background: none;
 		border: none;
+		cursor: pointer;
+		color: var(--fab-text-strong);
+		font-family: inherit;
+		padding: 0.25rem 0.5rem;
+		border-radius: 100px;
+		transition: background 120ms;
+	}
+	.rest-time {
 		font-size: 0.9rem;
 		font-weight: 700;
 		font-variant-numeric: tabular-nums;
-		color: white;
-		cursor: pointer;
-		padding: 0.2rem 0.5rem;
+		letter-spacing: 0.01em;
+		min-width: 3.2rem;
+		text-align: center;
 	}
 	.rest-adj {
-		background: none;
-		border: none;
-		color: white;
-		cursor: pointer;
-		font-size: 0.7rem;
-		font-weight: 600;
-		padding: 0.2rem 0.4rem;
-		border-radius: 4px;
-		opacity: 0.7;
+		font-size: 0.68rem;
+		font-weight: 700;
+		letter-spacing: 0.02em;
+		opacity: 0.85;
 	}
+	.rest-time:hover,
 	.rest-adj:hover {
+		background: rgba(255, 255, 255, 0.14);
 		opacity: 1;
 	}
+	:global(:root[data-theme="light"]) .rest-time:hover,
+	:global(:root[data-theme="light"]) .rest-adj:hover {
+		background: rgba(255, 255, 255, 0.5);
+	}
+
+	/* ═══════════════════════════════════════════
+	   MOUNT ANIMATION
+	   ═══════════════════════════════════════════ */
+	@keyframes fab-rise {
+		from {
+			opacity: 0;
+			transform: translateY(24px) scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* ═══════════════════════════════════════════
+	   NARROW SCREENS — tighten spacing
+	   ═══════════════════════════════════════════ */
+	@media (max-width: 420px) {
+		.workout-fab {
+			gap: 0.4rem;
+			padding: 0 0.35rem;
+		}
+		.fab-label {
+			font-size: 0.62rem;
+			letter-spacing: 0.08em;
+		}
+		.elapsed {
+			font-size: 0.95rem;
+		}
+		.rest-pill {
+			gap: 0.1rem;
+		}
+		.rest-adj {
+			padding: 0.25rem 0.35rem;
+			font-size: 0.62rem;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.workout-fab {
+			animation: none;
+		}
+		.workout-fab:hover {
+			transform: none;
+		}
+	}
 </style>