From a68af56421d9b6b75f5a8af51d068a3f46a3a01a Mon Sep 17 00:00:00 2001
From: jonathan <webmaster@jonathan859.com>
Date: Tue, 2 Jun 2026 23:23:54 +0200
Subject: [PATCH] fix: cap day-highlights chips at 50; show J/K hint when over
 limit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rendering 793 individual buttons is both visually overwhelming and slow.
When a day has more than 50 loud sections, replace the chip list with a
single note ("N sections — use J / K to navigate"). J/K navigation and
the SVG timeline still cover all sections.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web.py | 45 +++++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/web.py b/web.py
index 6524d9b..aa4ae3f 100644
--- a/web.py
+++ b/web.py
@@ -1472,24 +1472,33 @@ async function dayHighlights(dayId, analyzableFiles) {
   box.appendChild(labels);
 
   if (dayActiveSections.length) {
-    const chips = document.createElement('div');
-    chips.className = 'chips';
-    chips.setAttribute('role', 'list');
-    chips.setAttribute('aria-label', 'Day loud sections — click to jump, J/K to step across files');
-    dayActiveSections.forEach((sec, si) => {
-      const c = document.createElement('button');
-      c.className = 'chip';
-      c.setAttribute('role', 'listitem');
-      c.title = sec.filename + ' @ ' + fmtT(sec.start);
-      const d = new Date(sec.absStart * 1000);
-      const hms = d.getHours().toString().padStart(2,'0') + ':'
-                + d.getMinutes().toString().padStart(2,'0') + ':'
-                + d.getSeconds().toString().padStart(2,'0');
-      c.textContent = hms;
-      c.addEventListener('click', () => jumpToDaySection(si));
-      chips.appendChild(c);
-    });
-    box.appendChild(chips);
+    const MAX_DAY_CHIPS = 50;
+    if (dayActiveSections.length > MAX_DAY_CHIPS) {
+      const note = document.createElement('p');
+      note.className = 'quiet';
+      note.style.marginTop = '6px';
+      note.textContent = `${dayActiveSections.length} sections — use J / K to navigate`;
+      box.appendChild(note);
+    } else {
+      const chips = document.createElement('div');
+      chips.className = 'chips';
+      chips.setAttribute('role', 'list');
+      chips.setAttribute('aria-label', 'Day loud sections — click to jump, J/K to step across files');
+      dayActiveSections.forEach((sec, si) => {
+        const c = document.createElement('button');
+        c.className = 'chip';
+        c.setAttribute('role', 'listitem');
+        c.title = sec.filename + ' @ ' + fmtT(sec.start);
+        const d = new Date(sec.absStart * 1000);
+        const hms = d.getHours().toString().padStart(2,'0') + ':'
+                  + d.getMinutes().toString().padStart(2,'0') + ':'
+                  + d.getSeconds().toString().padStart(2,'0');
+        c.textContent = hms;
+        c.addEventListener('click', () => jumpToDaySection(si));
+        chips.appendChild(c);
+      });
+      box.appendChild(chips);
+    }
   }
 
   const summary = document.createElement('div');