feat: larger timeline timestamps with mouse-proximity magnification

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/Timeline.svelte

@@ -36,6 +36,7 @@
   let isMinimapDragging = $state(false);
   let minimapDragStartX = $state(0);
   let minimapDragStartVisibleStart = $state(0);
+  let mouseX = $state<number | null>(null);
 
   let isZoomed = $derived(timelineState.zoom > 1.01);
 
@@ -84,7 +85,8 @@
       clipStore.pendingInPoint,
       waveformData,
       session.thumbnailSpritesheets,
-      session.status === 'ready'
+      session.status === 'ready',
+      mouseX
     );
     ctx.restore();
   }
@@ -154,6 +156,7 @@
     void timelineState.width;
     void timelineState.height;
     void canvas;
+    void mouseX;
     requestDraw();
   });
 
@@ -284,6 +287,15 @@
     dragTarget = null;
   }
 
+  function handleMouseTrack(e: MouseEvent) {
+    mouseX = getCanvasX(e);
+  }
+
+  function handleMouseLeave() {
+    handleMouseUp();
+    mouseX = null;
+  }
+
   function handleWheel(e: WheelEvent) {
     e.preventDefault();
 
@@ -376,9 +388,12 @@
     <canvas
       bind:this={canvas}
       onmousedown={handleMouseDown}
-      onmousemove={handleMouseMove}
+      onmousemove={(e) => {
+        handleMouseMove(e);
+        handleMouseTrack(e);
+      }}
       onmouseup={handleMouseUp}
-      onmouseleave={handleMouseUp}
+      onmouseleave={handleMouseLeave}
       onwheel={handleWheel}
     ></canvas>
   </div>