Add debounced hover effect to timeline events

Delays the highlight/raise effect by 100ms, allowing users to move
their mouse across overlapping events without the first one blocking
access to others underneath.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 21 insertions, 1 deletions

diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html
index bdf2007..6775808 100644
--- a/web/templates/partials/timeline-tab.html
+++ b/web/templates/partials/timeline-tab.html
@@ -61,7 +61,7 @@
         backdrop-filter: blur(4px);
         box-shadow: 0 2px 8px rgba(0,0,0,0.3);
     }
-    .calendar-event:hover {
+    .calendar-event.hover-active {
         z-index: 10;
         background: rgba(0,0,0,0.7);
     }
@@ -253,6 +253,16 @@
                 el.style.left = (8 + ev.column * 16) + 'px';
                 el.style.display = 'block';
 
+                // Debounced hover effect (100ms delay)
+                let hoverTimeout;
+                el.addEventListener('mouseenter', function() {
+                    hoverTimeout = setTimeout(() => el.classList.add('hover-active'), 100);
+                });
+                el.addEventListener('mouseleave', function() {
+                    clearTimeout(hoverTimeout);
+                    el.classList.remove('hover-active');
+                });
+
                 const url = el.dataset.url;
                 if (url) {
                     el.style.cursor = 'pointer';
@@ -418,6 +428,16 @@
                 el.style.left = (8 + ev.column * 16) + 'px';
                 el.style.display = 'block';
 
+                // Debounced hover effect (100ms delay)
+                let hoverTimeout;
+                el.addEventListener('mouseenter', function() {
+                    hoverTimeout = setTimeout(() => el.classList.add('hover-active'), 100);
+                });
+                el.addEventListener('mouseleave', function() {
+                    clearTimeout(hoverTimeout);
+                    el.classList.remove('hover-active');
+                });
+
                 const url = el.dataset.url;
                 if (url) {
                     el.style.cursor = 'pointer';