Use HTMX fragements on the fitness dashboard

assets/fitness/fitness.js

@@ -1,27 +1,11 @@
-// Fitness dashboard range dropdowns and "absolute" checkboxes: changing one
-// reloads the page with that chart's query parameter updated. Plain GET
-// navigation — each view is distinct and bookmarkable, so no
-// postReplace/history handling is needed.
+// Fitness dashboard chart hover. The range dropdowns and "absolute"
+// checkboxes are htmx (assets/fitness/main.html): they swap in only their
+// chart.
 // Boosted navigation re-runs this script on every visit; the listeners
 // are delegated to document, so register them once.
 if (!window.fitnessWired) {
 window.fitnessWired = true;
 
-document.addEventListener('change', function (e) {
-    var url = new URL(window.location.href);
-    var sel = e.target.closest('[data-fitness-range]');
-    var abs = e.target.closest('[data-fitness-absolute]');
-    if (sel) {
-        url.searchParams.set(sel.dataset.fitnessRange, sel.value);
-    } else if (abs) {
-        if (abs.checked) url.searchParams.set(abs.dataset.fitnessAbsolute, '1');
-        else url.searchParams.delete(abs.dataset.fitnessAbsolute);
-    } else {
-        return;
-    }
-    window.location.href = url.toString();
-});
-
 // Hover tooltip: the pointer snaps to the data point nearest in time. Dots
 // are sorted by x, so a binary search finds it; the tooltip sits above the
 // point and is clamped to the chart panel.

assets/fitness/main.html

@@ -1,10 +1,12 @@
+{{/* A chart's controls re-fetch only that chart (fitnessHandler.serveFragment),
+sending every chart's controls so the server can update the page URL. */}}
 {{define "fitnessChart"}}
-<section class="fitness-chart panel">
+<section class="fitness-chart panel" hx-get="./" hx-vals='{"chart": "{{.Param}}"}' hx-trigger="change" hx-include="closest .fitness-dash" hx-target="this" hx-swap="outerHTML" hx-sync="this:replace">
     <div class="fitness-chart-header row space-between">
         <span class="caption">{{.Title}}</span>
         <div class="row fitness-controls">
-            <label class="fitness-absolute"><input type="checkbox" data-fitness-absolute="{{.Param}}-absolute"{{if .Absolute}} checked{{end}}> Absolute</label>
-            <select class="input fitness-range" data-fitness-range="{{.Param}}" aria-label="{{.Title}} time range">
+            <label class="fitness-absolute"><input type="checkbox" name="{{.Param}}-absolute" value="1"{{if .Absolute}} checked{{end}}> Absolute</label>
+            <select class="input fitness-range" name="{{.Param}}" aria-label="{{.Title}} time range">
                 {{range .Options}}<option value="{{.Value}}"{{if .Selected}} selected{{end}}>{{.Label}}</option>{{end}}
             </select>
         </div>