fix: cap day-highlights chips at 50; show J/K hint when over limit

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>
This commit is contained in:
2026-06-02 23:23:54 +02:00
parent 7821f8823d
commit a68af56421
+27 -18
View File
@@ -1472,24 +1472,33 @@ async function dayHighlights(dayId, analyzableFiles) {
box.appendChild(labels); box.appendChild(labels);
if (dayActiveSections.length) { if (dayActiveSections.length) {
const chips = document.createElement('div'); const MAX_DAY_CHIPS = 50;
chips.className = 'chips'; if (dayActiveSections.length > MAX_DAY_CHIPS) {
chips.setAttribute('role', 'list'); const note = document.createElement('p');
chips.setAttribute('aria-label', 'Day loud sections — click to jump, J/K to step across files'); note.className = 'quiet';
dayActiveSections.forEach((sec, si) => { note.style.marginTop = '6px';
const c = document.createElement('button'); note.textContent = `${dayActiveSections.length} sections — use J / K to navigate`;
c.className = 'chip'; box.appendChild(note);
c.setAttribute('role', 'listitem'); } else {
c.title = sec.filename + ' @ ' + fmtT(sec.start); const chips = document.createElement('div');
const d = new Date(sec.absStart * 1000); chips.className = 'chips';
const hms = d.getHours().toString().padStart(2,'0') + ':' chips.setAttribute('role', 'list');
+ d.getMinutes().toString().padStart(2,'0') + ':' chips.setAttribute('aria-label', 'Day loud sections — click to jump, J/K to step across files');
+ d.getSeconds().toString().padStart(2,'0'); dayActiveSections.forEach((sec, si) => {
c.textContent = hms; const c = document.createElement('button');
c.addEventListener('click', () => jumpToDaySection(si)); c.className = 'chip';
chips.appendChild(c); c.setAttribute('role', 'listitem');
}); c.title = sec.filename + ' @ ' + fmtT(sec.start);
box.appendChild(chips); 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'); const summary = document.createElement('div');