gitmaps 1.1.14 → 1.1.16

package/app/lib/low-zoom-preview.test.ts

@@ -69,6 +69,13 @@ describe('low zoom preview helpers', () => {
     expect(markers.some((m) => m.color === '#ef4444')).toBe(true);
   });
 
+  test('whole-file added/deleted states create full-height rail markers', () => {
+    const added = collectPreviewDiffMarkers({ status: 'added' }, 20);
+    const deleted = collectPreviewDiffMarkers({ status: 'deleted' }, 20);
+    expect(added[0]?.height).toBe(1);
+    expect(deleted[0]?.height).toBe(1);
+  });
+
   test('title typography is larger than body typography for readability', () => {
     const scale = getLowZoomScale(0.18);
     expect(scale.titleFont).toBeGreaterThan(scale.bodyFont);

package/app/lib/low-zoom-preview.ts

@@ -135,11 +135,20 @@ export function getPreviewScrollMetrics(file: any, height: number, zoom: number,
 }
 
 export function collectPreviewDiffMarkers(file: any, totalLines: number) {
-  const markers: Array<{ ratio: number; color: string }> = [];
+  const markers: Array<{ ratio: number; color: string; height?: number }> = [];
   const safeTotal = Math.max(1, totalLines);
   const added = file?.addedLines instanceof Set ? Array.from(file.addedLines) : [];
   const deletedBefore = file?.deletedBeforeLine instanceof Map ? Array.from(file.deletedBeforeLine.keys()) : [];
 
+  if (file?.status === 'added') {
+    markers.push({ ratio: 0, color: '#22c55e', height: 1 });
+    return markers;
+  }
+  if (file?.status === 'deleted') {
+    markers.push({ ratio: 0, color: '#ef4444', height: 1 });
+    return markers;
+  }
+
   for (const line of added) {
     markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#22c55e' });
   }
@@ -185,9 +194,9 @@ export function renderLowZoomPreviewCanvas(
   ctx.fill();
 
   const accentWidth = Math.max(6, width * 0.012);
-  const scrollbarWidth = 6;
-  const markerLaneWidth = 4;
-  const rightRailWidth = scrollbarWidth + markerLaneWidth + 8;
+  const scrollbarWidth = 7;
+  const markerLaneWidth = 8;
+  const rightRailWidth = scrollbarWidth + markerLaneWidth + 12;
   ctx.fillStyle = accentColor;
   ctx.fillRect(0, 0, accentWidth, height);
 
@@ -238,23 +247,29 @@ export function renderLowZoomPreviewCanvas(
     ctx.fillText(line, leftInset, y);
   });
 
-  const trackX = width - scrollbarWidth - 4;
-  const markerX = trackX - markerLaneWidth - 3;
+  const trackX = width - scrollbarWidth - 5;
+  const markerX = trackX - markerLaneWidth - 4;
   const trackY = scrollMetrics.trackPadding;
   const trackHeight = scrollMetrics.trackHeight;
 
   ctx.fillStyle = 'rgba(255,255,255,0.08)';
+  roundRect(ctx, markerX, trackY, markerLaneWidth, trackHeight, 3);
+  ctx.fill();
+
+  ctx.fillStyle = 'rgba(255,255,255,0.12)';
   roundRect(ctx, trackX, trackY, scrollbarWidth, trackHeight, scrollbarWidth / 2);
   ctx.fill();
 
   const markers = collectPreviewDiffMarkers(file, scrollMetrics.totalLines);
   for (const marker of markers) {
-    const y = trackY + marker.ratio * trackHeight;
+    const markerHeight = marker.height === 1 ? trackHeight : 5;
+    const y = marker.height === 1 ? trackY : trackY + marker.ratio * Math.max(0, trackHeight - markerHeight);
     ctx.fillStyle = marker.color;
-    ctx.fillRect(markerX, Math.max(trackY, y), markerLaneWidth, 3);
+    roundRect(ctx, markerX, Math.max(trackY, y), markerLaneWidth, markerHeight, 2);
+    ctx.fill();
   }
 
-  ctx.fillStyle = 'rgba(196,181,253,0.9)';
+  ctx.fillStyle = 'rgba(196,181,253,0.96)';
   roundRect(ctx, trackX, scrollMetrics.thumbY, scrollbarWidth, scrollMetrics.thumbHeight, scrollbarWidth / 2);
   ctx.fill();
 }

package/app/lib/viewport-culling.ts

@@ -37,6 +37,7 @@ const VIEWPORT_MARGIN = 500;
 // LOD threshold: below this zoom level, use lightweight pill placeholders
 const LOD_ZOOM_THRESHOLD = 0.25;
 const LOW_ZOOM_MODE_STORAGE_KEY = 'gitmaps:detailMode';
+const PREVIEW_HINT_SHOWN_KEY = 'gitmaps:previewModeHintShown';
 
 // Maximum deferred cards to materialize per animation frame
 // Prevents frame drops when zooming out then back in on huge repos
@@ -120,6 +121,21 @@ export function isPreviewModeForced() {
     return _detailMode === 'preview';
 }
 
+function maybeShowPreviewModeHint() {
+    if (_detailMode !== 'preview') return;
+    try {
+        if (localStorage.getItem(PREVIEW_HINT_SHOWN_KEY) === 'true') return;
+        localStorage.setItem(PREVIEW_HINT_SHOWN_KEY, 'true');
+    } catch { }
+
+    setTimeout(() => {
+        try {
+            const { showToast } = require('./utils');
+            showToast('Preview mode: wheel scrolls card content · right rail shows scroll + diff markers · top-right switch returns to Classic', 'info');
+        } catch { }
+    }, 120);
+}
+
 // ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
@@ -441,6 +457,7 @@ export function performViewportCulling(ctx: CanvasContext) {
                 if (isChanged) pill.dataset.changed = 'true';
                 ctx.canvas.appendChild(pill);
                 pillCards.set(path, pill);
+                maybeShowPreviewModeHint();
             } else if (inView && pillCards.has(path)) {
                 updatePillCardLayout(ctx, pillCards.get(path)!, zoom, !!isChanged);
             } else if (!inView && pillCards.has(path)) {
@@ -470,6 +487,7 @@ export function performViewportCulling(ctx: CanvasContext) {
                     if (isChanged) pill.dataset.changed = 'true';
                     ctx.canvas.appendChild(pill);
                     pillCards.set(path, pill);
+                    maybeShowPreviewModeHint();
                 }
             } else {
                 updatePillCardLayout(ctx, pillCards.get(path)!, zoom, card.dataset.changed === 'true');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"