From 34c7fd8292d226c30db66a76d05ce0fc17b37d9c Mon Sep 17 00:00:00 2001
From: Robert Love <terp4life2001@gmail.com>
Date: Sun, 7 Jun 2026 11:38:29 -0400
Subject: [PATCH] feat(index): click a "Last 7 days" dot to jump to that day

The week-streak dots were display-only. Make each clickable (and
keyboard-activatable) to switch the workout view to that day via the
same setFormContent() path as the prev/next nav. The selected day's dot
now shows a primary ring that follows all navigation, and dots have a
hover affordance.

- index.js: renderWeekStreak adds data-date + onclick/onkeydown per dot;
  setFormContent toggles .is-selected on the matching dot.
- index.css: hover scale + .week-dot-item.is-selected styling.
- index.html: render the streak before setFormDate so today's dot is
  marked selected on load.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 internal/web/public/css/index.css | 14 ++++++++++++++
 internal/web/public/js/index.js   | 14 ++++++++++++--
 internal/web/templates/index.html |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/internal/web/public/css/index.css b/internal/web/public/css/index.css
index c818ed2..eeb82b9 100644
--- a/internal/web/public/css/index.css
+++ b/internal/web/public/css/index.css
@@ -126,6 +126,20 @@
   box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
 }
 
+/* Days are clickable to jump the workout view; show hover + selected state. */
+.week-dot-item:hover .week-dot {
+  transform: scale(1.12);
+}
+
+.week-dot-item.is-selected .week-dot {
+  box-shadow: 0 0 0 3px var(--bs-primary);
+}
+
+.week-dot-item.is-selected .week-dot-label {
+  color: var(--bs-primary);
+  font-weight: 700;
+}
+
 .week-dot-label {
   font-size: 0.62rem;
   color: var(--bs-secondary-color);
diff --git a/internal/web/public/js/index.js b/internal/web/public/js/index.js
index 2afbf34..402a4cf 100644
--- a/internal/web/public/js/index.js
+++ b/internal/web/public/js/index.js
@@ -523,6 +523,11 @@ function setFormContent(sets, date) {
     var btn = document.getElementById('dateDisplayBtn');
     if (btn) btn.textContent = formatFriendlyDate(date);
 
+    // Mark the matching "Last 7 days" dot as selected (if the date is in range).
+    document.querySelectorAll('.week-dot-item').forEach(function(it) {
+        it.classList.toggle('is-selected', it.getAttribute('data-date') === date);
+    });
+
     if (sets) {
         for (var i = 0; i < sets.length; i++) {
             if (sets[i].Date == date) {
@@ -700,12 +705,17 @@ function renderWeekStreak(sets) {
         var isToday = i === 0;
         var hasWorkout = sets && sets.some(function(s) { return s.Date === dateStr; });
         if (hasWorkout) activeCount++;
-        items.push({ label: dayLetters[d.getDay()], active: hasWorkout, today: isToday });
+        items.push({ label: dayLetters[d.getDay()], active: hasWorkout, today: isToday, date: dateStr });
     }
     var dotsHtml = items.map(function(item) {
         var dotCls = 'week-dot' + (item.active ? ' has-workout' : '') + (item.today ? ' is-today' : '');
         var lblCls = 'week-dot-label' + (item.today ? ' is-today' : '');
-        return '<div class="week-dot-item"><div class="' + dotCls + '"></div><span class="' + lblCls + '">' + item.label + '</span></div>';
+        // Click a day to jump the workout view to it (same path as prev/next).
+        return '<div class="week-dot-item" role="button" tabindex="0" title="' + item.date + '"' +
+            ' style="cursor:pointer" data-date="' + item.date + '"' +
+            ' onclick="setFormContent(window._allSets, \'' + item.date + '\')"' +
+            ' onkeydown="if(event.key===\'Enter\'||event.key===\' \'){event.preventDefault();setFormContent(window._allSets,\'' + item.date + '\');}">' +
+            '<div class="' + dotCls + '"></div><span class="' + lblCls + '">' + item.label + '</span></div>';
     }).join('');
     el.innerHTML = '<div class="panel week-streak-panel"><div class="week-streak-inner">' +
         '<span class="week-streak-title">Last 7 days</span>' +
diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
index 9b228f7..72f2420 100644
--- a/internal/web/templates/index.html
+++ b/internal/web/templates/index.html
@@ -210,8 +210,8 @@ <h6 class="modal-title fw-bold"><i class="bi bi-speedometer2 me-2"></i>Log Body
   window._autoFill   = {{ .Config.AutoFill }};
   window._cvAutoLog  = {{ .Config.CVAutoLog }};
   window._serverDate = {{ .ServerDate | json }};
-  setFormDate(window._allSets);
   renderWeekStreak(window._allSets);
+  setFormDate(window._allSets);
   if (window._cvAutoLog) {
     openSetsStream();
   }