From db9b4ce32cabc950d47c5fd88a440ca07cd5bb9a Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Sun, 17 May 2026 09:01:59 +0200
Subject: [PATCH] Activity map: click stat to lock track color mode, hover
 still previews

---
 site/src/components/ActivityDetail.svelte | 26 +++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/site/src/components/ActivityDetail.svelte b/site/src/components/ActivityDetail.svelte
index 67d6023..d486e3f 100644
--- a/site/src/components/ActivityDetail.svelte
+++ b/site/src/components/ActivityDetail.svelte
@@ -179,6 +179,18 @@
 
   type ColorMode = 'default' | 'speed' | 'hr' | 'power' | 'elevation' | 'cadence';
   let colorMode: ColorMode = 'default';
+  let stickyMode: ColorMode | null = null;
+
+  function handleStatClick(cm: ColorMode | null) {
+    if (!cm) return;
+    if (stickyMode === cm) {
+      stickyMode = null;
+      colorMode = 'default';
+    } else {
+      stickyMode = cm;
+      colorMode = cm;
+    }
+  }
 
   // Per-metric: is there data AND a GPS track to colour?
   $: hasSpeedTrack    = !!trackUrl && !!timeseries?.speed_kmh?.some(v => v != null);
@@ -427,12 +439,18 @@
         s.key === 'elevation'  && hasElevTrack    ? 'elevation' :
         s.key === 'cadence'    && hasCadenceTrack ? 'cadence'   : null}
       <div
-        class="bg-zinc-900 px-4 py-3 transition-colors"
+        class="bg-zinc-900 px-4 py-3 transition-colors relative"
         class:hover:bg-zinc-800={cm !== null}
-        class:cursor-default={cm !== null}
-        role="none"
+        class:cursor-pointer={cm !== null}
+        class:ring-1={cm !== null && stickyMode === cm}
+        class:ring-inset={cm !== null && stickyMode === cm}
+        class:ring-white/25={cm !== null && stickyMode === cm}
+        role={cm ? 'button' : 'none'}
+        tabindex={cm ? 0 : -1}
         on:mouseenter={() => { if (cm) colorMode = cm; }}
-        on:mouseleave={() => colorMode = 'default'}
+        on:mouseleave={() => { colorMode = stickyMode ?? 'default'; }}
+        on:click={() => handleStatClick(cm)}
+        on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleStatClick(cm); } }}
       >
         <p class="text-2xl font-bold text-white">{s.value}</p>
         <p class="text-xs text-zinc-500">{s.label}</p>