gitmaps 1.0.0 → 1.1.1

package/app/lib/loading.tsx

@@ -1,45 +1,160 @@
-// @ts-nocheck
-/**
- * Loading progress overlay.
- * Uses melina/client JSX + render.
- */
-import { render } from 'melina/client';
-import type { CanvasContext } from './context';
-
-function LoadingOverlayContent({ message, sub }: { message: string; sub: string }) {
-    return (
-        <div className="loading-content">
-            <div className="loading-spinner"></div>
-            <div className="loading-message">{message}</div>
-            <div className="loading-sub">{sub}</div>
-        </div>
-    );
-}
-
-let currentMessage = '';
-let currentSub = '';
-
-export function showLoadingProgress(ctx: CanvasContext, message: string) {
-    if (!ctx.loadingOverlay) {
-        ctx.loadingOverlay = document.createElement('div');
-        ctx.loadingOverlay.className = 'loading-overlay';
-        document.body.appendChild(ctx.loadingOverlay);
-    }
-    currentMessage = message;
-    currentSub = '';
-    render(<LoadingOverlayContent message={currentMessage} sub={currentSub} />, ctx.loadingOverlay);
-    ctx.loadingOverlay.classList.add('active');
-}
-
-export function updateLoadingProgress(ctx: CanvasContext, sub: string) {
-    if (ctx.loadingOverlay) {
-        currentSub = sub;
-        render(<LoadingOverlayContent message={currentMessage} sub={currentSub} />, ctx.loadingOverlay);
-    }
-}
-
-export function hideLoadingProgress(ctx: CanvasContext) {
-    if (ctx.loadingOverlay) {
-        ctx.loadingOverlay.classList.remove('active');
-    }
-}
+// @ts-nocheck
+/**
+ * Loading progress overlay.
+ * Uses melina/client JSX + render.
+ */
+import { render } from "melina/client";
+import type { CanvasContext } from "./context";
+
+function LoadingOverlayContent({
+  message,
+  sub,
+  progress,
+  loaded,
+  total,
+}: {
+  message: string;
+  sub: string;
+  progress?: number;
+  loaded?: number;
+  total?: number;
+}) {
+  const hasFileCount = loaded !== undefined && total !== undefined && total > 0;
+  const safeLoaded = hasFileCount ? Math.min(loaded ?? 0, total ?? 0) : undefined;
+  const remaining = hasFileCount ? Math.max((total ?? 0) - (safeLoaded ?? 0), 0) : undefined;
+  const pct = hasFileCount ? Math.round(((safeLoaded ?? 0) / (total ?? 1)) * 100) : progress;
+
+  const fileSummary = hasFileCount
+    ? `${total} total • ${safeLoaded} loaded • ${remaining} remaining`
+    : "";
+
+  return (
+    <div className="loading-content">
+      <div className="loading-spinner"></div>
+      <div className="loading-message">{message}</div>
+      {(sub || hasFileCount) && (
+        <div className="loading-sub">
+          {sub}
+          {sub && hasFileCount ? " · " : ""}
+          {fileSummary}
+        </div>
+      )}
+      {hasFileCount && (
+        <div className="loading-stats">
+          <div className="loading-stat">
+            <span className="loading-stat-label">Total</span>
+            <span className="loading-stat-value">{total}</span>
+          </div>
+          <div className="loading-stat">
+            <span className="loading-stat-label">Loaded</span>
+            <span className="loading-stat-value">{safeLoaded}</span>
+          </div>
+          <div className="loading-stat">
+            <span className="loading-stat-label">Remaining</span>
+            <span className="loading-stat-value">{remaining}</span>
+          </div>
+        </div>
+      )}
+      {pct !== undefined && (
+        <div className="loading-progress-container">
+          <div className="loading-progress-bar">
+            <div
+              className="loading-progress-fill"
+              style={{ width: `${pct}%` }}
+            ></div>
+          </div>
+          <div className="loading-progress-text">
+            {hasFileCount
+              ? `${pct}% • ${remaining} remaining`
+              : `${Math.round(pct)}%`}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+let currentMessage = "";
+let currentSub = "";
+let currentProgress: number | undefined;
+let currentLoaded: number | undefined;
+let currentTotal: number | undefined;
+
+function rerender(ctx: CanvasContext) {
+  if (!ctx.loadingOverlay) return;
+  render(
+    <LoadingOverlayContent
+      message={currentMessage}
+      sub={currentSub}
+      progress={currentProgress}
+      loaded={currentLoaded}
+      total={currentTotal}
+    />,
+    ctx.loadingOverlay,
+  );
+}
+
+export function showLoadingProgress(
+  ctx: CanvasContext,
+  message: string,
+  progress?: number,
+) {
+  if (!ctx.loadingOverlay) {
+    ctx.loadingOverlay = document.createElement("div");
+    ctx.loadingOverlay.className = "loading-overlay";
+    document.body.appendChild(ctx.loadingOverlay);
+  }
+  currentMessage = message;
+  currentSub = "";
+  currentProgress = progress;
+  currentLoaded = undefined;
+  currentTotal = undefined;
+  rerender(ctx);
+  ctx.loadingOverlay.classList.add("active");
+}
+
+export function updateLoadingProgress(
+  ctx: CanvasContext,
+  sub: string,
+  progress?: number,
+) {
+  if (ctx.loadingOverlay) {
+    currentSub = sub;
+    if (progress !== undefined) currentProgress = progress;
+    rerender(ctx);
+  }
+}
+
+export function updateLoadingMessage(
+  ctx: CanvasContext,
+  message: string,
+  progress?: number,
+) {
+  if (ctx.loadingOverlay) {
+    currentMessage = message;
+    if (progress !== undefined) currentProgress = progress;
+    rerender(ctx);
+  }
+}
+
+export function updateLoadingFileCount(
+  ctx: CanvasContext,
+  loaded: number,
+  total: number,
+  sub?: string,
+) {
+
+  if (ctx.loadingOverlay) {
+    currentLoaded = loaded;
+    currentTotal = total;
+    if (sub !== undefined) currentSub = sub;
+    rerender(ctx);
+  }
+}
+
+export function hideLoadingProgress(ctx: CanvasContext) {
+  if (ctx.loadingOverlay) {
+    ctx.loadingOverlay.classList.remove("active");
+  }
+  document.body.classList.remove("repo-loading");
+}

package/app/lib/mount-cleanup.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { cleanupMount } from './mount-cleanup';
+import { setupDomTest } from './test-dom';
+
+describe('mount cleanup helper', () => {
+  test('runs cleanup steps in order and tears down preview when viewport exists', async () => {
+    const handle = setupDomTest({ html: '<div id="viewport"></div>' });
+    try {
+      const calls: string[] = [];
+      const viewport = document.getElementById('viewport') as HTMLElement;
+      const ctx = { canvasViewport: viewport } as any;
+      const actor = { stop: mock(() => { calls.push('stopActor'); }) };
+
+      await cleanupMount(ctx, actor, {
+        markDisposed: () => { calls.push('markDisposed'); },
+        clearMount: () => { calls.push('clearMount'); },
+        stopActor: () => { calls.push('stopActor'); },
+        destroyPreview: (el) => { calls.push(`destroyPreview:${el.id}`); },
+        clearCanvasUi: () => { calls.push('clearCanvas'); },
+      });
+
+      expect(calls).toEqual([
+        'markDisposed',
+        'clearMount',
+        'stopActor',
+        'destroyPreview:viewport',
+        'clearCanvas',
+      ]);
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('continues cleanup when actor stop throws and skips preview teardown without viewport', async () => {
+    const handle = setupDomTest();
+    try {
+      const destroyPreview = mock(() => undefined);
+      const clearCanvasUi = mock(() => undefined);
+
+      cleanupMount({ canvasViewport: null } as any, { stop: mock(() => { throw new Error('boom'); }) }, {
+        stopActor: () => { throw new Error('boom'); },
+        destroyPreview,
+        clearCanvasUi,
+      });
+
+      expect(destroyPreview).not.toHaveBeenCalled();
+      expect(clearCanvasUi).toHaveBeenCalledTimes(1);
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/mount-cleanup.ts

@@ -0,0 +1,34 @@
+import type { CanvasContext } from './context';
+import { clearCanvas } from './canvas';
+import { clearCanvasMount } from './mount-lifecycle';
+
+export async function cleanupMount(
+  ctx: CanvasContext,
+  actor: { stop: () => void },
+  options?: {
+    markDisposed?: () => void;
+    clearMount?: () => void;
+    stopActor?: () => void;
+    destroyPreview?: (viewport: HTMLElement) => void | Promise<void>;
+    clearCanvasUi?: (ctx: CanvasContext) => void;
+  },
+) {
+  const markDisposed = options?.markDisposed || (() => {});
+  const clearMount = options?.clearMount || clearCanvasMount;
+  const stopActor = options?.stopActor || (() => actor.stop());
+  const destroyPreview = options?.destroyPreview || (async (viewport: HTMLElement) => {
+    const mod = await import('./file-preview');
+    mod.destroyFilePreview(viewport);
+  });
+  const clearCanvasUi = options?.clearCanvasUi || clearCanvas;
+
+  markDisposed();
+  clearMount();
+  try {
+    stopActor();
+  } catch {}
+  if (ctx.canvasViewport) {
+    await destroyPreview(ctx.canvasViewport);
+  }
+  clearCanvasUi(ctx);
+}

package/app/lib/mount-init.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { ensureSvgOverlay, initializeMountUi } from './mount-init';
+import { setupDomTest } from './test-dom';
+
+describe('mount init helper', () => {
+  test('ensureSvgOverlay reuses existing overlay or creates one on demand', () => {
+    const handle = setupDomTest({ html: '<div id="canvasContent"></div><svg id="connectionsOverlay"></svg>' });
+    try {
+      const existing = document.getElementById('connectionsOverlay') as unknown as SVGSVGElement;
+      const ctx = { canvas: document.getElementById('canvasContent'), svgOverlay: null } as any;
+      ensureSvgOverlay(ctx);
+      expect(ctx.svgOverlay).toBe(existing);
+
+      existing.remove();
+      ctx.svgOverlay = null;
+      ensureSvgOverlay(ctx);
+      expect(ctx.svgOverlay?.id).toBe('connectionsOverlay');
+      expect(document.getElementById('canvasContent')?.querySelector('#connectionsOverlay')).toBeTruthy();
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('initializes mount modules in the expected order', async () => {
+    const handle = setupDomTest({ html: '<div id="canvasViewport"></div>' });
+    try {
+      const calls: string[] = [];
+      const ctx = { canvasViewport: document.getElementById('canvasViewport') } as any;
+      const actor = { start: mock(() => { calls.push('actor.start'); }) };
+
+      await initializeMountUi(ctx, actor, {
+        isDisposed: () => false,
+        initDrawState: mock(() => { calls.push('initDrawState'); }),
+        initCards: mock(() => { calls.push('initCards'); }),
+        setupCanvasUi: mock(() => { calls.push('setupCanvasUi'); }),
+        setupEvents: mock(() => { calls.push('setupEvents'); }),
+        setupPills: mock(() => { calls.push('setupPills'); }),
+        setupPerf: mock(() => { calls.push('setupPerf'); }),
+        initPreview: mock(() => { calls.push('initPreview'); }),
+        initBranches: mock(() => { calls.push('initBranches'); }),
+        initCommands: mock(() => { calls.push('initCommands'); }),
+        initShortcuts: mock(() => { calls.push('initShortcuts'); }),
+        initStatus: mock(() => { calls.push('initStatus'); }),
+        initSnapshots: mock(() => { calls.push('initSnapshots'); }),
+        loadPositions: mock(async () => { calls.push('loadPositions'); }),
+        loadHidden: mock(() => { calls.push('loadHidden'); }),
+        updateHidden: mock(() => { calls.push('updateHidden'); }),
+        loadSavedConnections: mock(() => { calls.push('loadConnections'); }),
+        setupAuthUi: mock(() => { calls.push('setupAuth'); }),
+        renderRole: mock(() => { calls.push('renderRole'); }),
+        renderSync: mock(() => { calls.push('renderSync'); }),
+        renderVersion: mock(async () => { calls.push('renderVersion'); }),
+        renderRecents: mock(() => { calls.push('renderRecents'); }),
+      });
+
+      expect(calls).toEqual([
+        'initDrawState',
+        'initCards',
+        'actor.start',
+        'setupCanvasUi',
+        'setupEvents',
+        'setupPills',
+        'setupPerf',
+        'initPreview',
+        'initBranches',
+        'initCommands',
+        'initShortcuts',
+        'initStatus',
+        'initSnapshots',
+        'loadPositions',
+        'loadHidden',
+        'updateHidden',
+        'loadConnections',
+        'setupAuth',
+        'renderRole',
+        'renderSync',
+        'renderVersion',
+        'renderRecents',
+      ]);
+    } finally {
+      handle.cleanup();
+    }
+  });
+
+  test('stops after awaited checkpoints when disposed', async () => {
+    const handle = setupDomTest({ html: '<div id="canvasViewport"></div>' });
+    try {
+      let disposed = false;
+      const loadHidden = mock(() => undefined);
+      const setupAuthUi = mock(() => undefined);
+
+      await initializeMountUi({ canvasViewport: document.getElementById('canvasViewport') } as any, { start: mock(() => undefined) }, {
+        isDisposed: () => disposed,
+        initDrawState: mock(() => undefined),
+        initCards: mock(() => undefined),
+        setupCanvasUi: mock(() => undefined),
+        setupEvents: mock(() => undefined),
+        setupPills: mock(() => undefined),
+        setupPerf: mock(() => undefined),
+        initPreview: mock(() => undefined),
+        initBranches: mock(() => undefined),
+        initCommands: mock(() => undefined),
+        initShortcuts: mock(() => undefined),
+        initStatus: mock(() => undefined),
+        initSnapshots: mock(() => undefined),
+        loadPositions: mock(async () => { disposed = true; }),
+        loadHidden,
+        updateHidden: mock(() => undefined),
+        loadSavedConnections: mock(() => undefined),
+        setupAuthUi,
+        renderRole: mock(() => undefined),
+        renderSync: mock(() => undefined),
+        renderVersion: mock(async () => undefined),
+        renderRecents: mock(() => undefined),
+      });
+
+      expect(loadHidden).not.toHaveBeenCalled();
+      expect(setupAuthUi).not.toHaveBeenCalled();
+    } finally {
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/mount-init.ts

@@ -0,0 +1,107 @@
+import type { CanvasContext } from './context';
+import { loadSavedPositions } from './positions';
+import { loadHiddenFiles, updateHiddenUI } from './hidden-files';
+import { setupCanvasInteraction, setupEventListeners } from './events';
+import { loadConnections } from './connections';
+import { setupPillInteraction } from './viewport-culling';
+import { setupAuth } from './user';
+import { setupPerfOverlay } from './perf-overlay';
+import { initGalaxyDrawState, initCardManager } from './xydraw-bridge';
+import { initBranchCompare } from './branch-compare';
+import { initCommandPalette } from './command-palette';
+import { initShortcutsPanel } from './shortcuts-panel';
+import { initStatusBar } from './status-bar';
+import { initLayoutSnapshots } from './layout-snapshots';
+import { renderSyncControls } from './sync-controls';
+import { renderVersionBadge } from './version';
+import { renderRoleBadge } from './role';
+import { renderRecentCommitsUI } from './recent-commits';
+
+export function ensureSvgOverlay(ctx: CanvasContext) {
+  ctx.svgOverlay = document.getElementById('connectionsOverlay') as unknown as SVGSVGElement;
+  if (!ctx.svgOverlay && ctx.canvas) {
+    ctx.svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement;
+    ctx.svgOverlay.id = 'connectionsOverlay';
+    ctx.svgOverlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;';
+    ctx.canvas.appendChild(ctx.svgOverlay);
+  }
+}
+
+export async function initializeMountUi(
+  ctx: CanvasContext,
+  actor: { start: () => void },
+  options: {
+    isDisposed: () => boolean;
+    initDrawState?: (ctx: CanvasContext) => void;
+    initCards?: (ctx: CanvasContext) => void;
+    setupCanvasUi?: (ctx: CanvasContext) => void;
+    setupEvents?: (ctx: CanvasContext) => void;
+    setupPills?: (ctx: CanvasContext) => void;
+    setupPerf?: (ctx: CanvasContext) => void;
+    initPreview?: (viewport: HTMLElement, ctx: CanvasContext) => void | Promise<void>;
+    initBranches?: (ctx: CanvasContext) => void;
+    initCommands?: (ctx: CanvasContext) => void;
+    initShortcuts?: () => void;
+    initStatus?: (ctx: CanvasContext) => void;
+    initSnapshots?: (ctx: CanvasContext) => void;
+    loadPositions?: (ctx: CanvasContext) => Promise<void>;
+    loadHidden?: (ctx: CanvasContext) => void;
+    updateHidden?: (ctx: CanvasContext) => void;
+    loadSavedConnections?: (ctx: CanvasContext) => void;
+    setupAuthUi?: () => void;
+    renderRole?: () => void;
+    renderSync?: () => void;
+    renderVersion?: () => Promise<void>;
+    renderRecents?: () => void;
+  },
+) {
+  const initDrawState = options.initDrawState || initGalaxyDrawState;
+  const initCards = options.initCards || initCardManager;
+  const setupCanvasUi = options.setupCanvasUi || setupCanvasInteraction;
+  const setupEvents = options.setupEvents || setupEventListeners;
+  const setupPills = options.setupPills || setupPillInteraction;
+  const setupPerf = options.setupPerf || setupPerfOverlay;
+  const initPreview = options.initPreview || (async (viewport: HTMLElement, ctx: CanvasContext) => {
+    const mod = await import('./file-preview');
+    mod.initFilePreview(viewport, ctx);
+  });
+  const initBranches = options.initBranches || initBranchCompare;
+  const initCommands = options.initCommands || initCommandPalette;
+  const initShortcuts = options.initShortcuts || initShortcutsPanel;
+  const initStatus = options.initStatus || initStatusBar;
+  const initSnapshots = options.initSnapshots || initLayoutSnapshots;
+  const loadPositions = options.loadPositions || loadSavedPositions;
+  const loadHidden = options.loadHidden || loadHiddenFiles;
+  const updateHidden = options.updateHidden || updateHiddenUI;
+  const loadSavedConnections = options.loadSavedConnections || loadConnections;
+  const setupAuthUi = options.setupAuthUi || setupAuth;
+  const renderRole = options.renderRole || renderRoleBadge;
+  const renderSync = options.renderSync || renderSyncControls;
+  const renderVersion = options.renderVersion || renderVersionBadge;
+  const renderRecents = options.renderRecents || renderRecentCommitsUI;
+
+  initDrawState(ctx);
+  initCards(ctx);
+  actor.start();
+  setupCanvasUi(ctx);
+  setupEvents(ctx);
+  setupPills(ctx);
+  setupPerf(ctx);
+  if (ctx.canvasViewport) await initPreview(ctx.canvasViewport, ctx);
+  initBranches(ctx);
+  initCommands(ctx);
+  initShortcuts();
+  initStatus(ctx);
+  initSnapshots(ctx);
+  await loadPositions(ctx);
+  if (options.isDisposed()) return;
+  loadHidden(ctx);
+  updateHidden(ctx);
+  loadSavedConnections(ctx);
+  if (options.isDisposed()) return;
+  setupAuthUi();
+  renderRole();
+  renderSync();
+  await renderVersion();
+  renderRecents();
+}

package/app/lib/mount-lifecycle.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+import { getCanvasContext } from './context';
+import { clearCanvasMount, registerCanvasMount } from './mount-lifecycle';
+import { setupDomTest } from './test-dom';
+
+describe('mount lifecycle helper', () => {
+  test('registerCanvasMount stores cleanup and shared context together', () => {
+    const handle = setupDomTest();
+    try {
+      const ctx = { snap: () => ({ context: {} }) } as any;
+      const cleanup = () => {};
+
+      registerCanvasMount(ctx, cleanup);
+
+      expect(getCanvasContext()).toBe(ctx);
+      expect((window as any).__gitcanvas_cleanup__).toBe(cleanup);
+    } finally {
+      clearCanvasMount();
+      handle.cleanup();
+    }
+  });
+
+  test('clearCanvasMount clears both cleanup and shared context', () => {
+    const handle = setupDomTest();
+    try {
+      registerCanvasMount({ snap: () => ({ context: {} }) } as any, () => {});
+      expect(getCanvasContext()).not.toBeNull();
+      expect((window as any).__gitcanvas_cleanup__).toBeTruthy();
+
+      clearCanvasMount();
+
+      expect(getCanvasContext()).toBeNull();
+      expect((window as any).__gitcanvas_cleanup__).toBeNull();
+    } finally {
+      clearCanvasMount();
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/mount-lifecycle.ts

@@ -0,0 +1,12 @@
+import { setCanvasContext } from './context';
+import type { CanvasContext } from './context';
+
+export function registerCanvasMount(ctx: CanvasContext, cleanup: () => void): void {
+  setCanvasContext(ctx);
+  (window as any).__gitcanvas_cleanup__ = cleanup;
+}
+
+export function clearCanvasMount(): void {
+  (window as any).__gitcanvas_cleanup__ = null;
+  setCanvasContext(null);
+}

package/app/lib/mount-route-wiring.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, mock, test } from 'bun:test';
+import { bindMountPopstate, wireMountRoutes } from './mount-route-wiring';
+
+describe('mount route wiring helper', () => {
+  test('wires initial hydration through shared route helpers', async () => {
+    const calls: string[] = [];
+    const ctx = { snap: () => ({ context: { repoPath: 'C:/Code/gitmaps' } }) } as any;
+    const hydrateRoutes = mock(async (_ctx: any, options: any) => {
+      calls.push('hydrateRoutes');
+      await options.resolveRepoPath('7flash/gitmaps');
+      await options.bootstrapRepoUi('C:/Code/gitmaps');
+    });
+    const resolveRepoPath = mock(async () => {
+      calls.push('resolveRepoPath');
+      return 'C:/Code/gitmaps';
+    });
+    const bootstrapRepoUi = mock(async () => {
+      calls.push('bootstrapRepoUi');
+    });
+    const bindPopstate = mock(() => {
+      calls.push('bindPopstate');
+    });
+
+    await wireMountRoutes(ctx, {
+      isDisposed: () => false,
+      showLandingPlaceholder: mock(() => undefined),
+      updateFavoriteStar: mock(() => undefined),
+      applySharedLayout: mock(async () => undefined),
+      hydrateRoutes: hydrateRoutes as any,
+      resolveRepoPath: resolveRepoPath as any,
+      bootstrapRepoUi: bootstrapRepoUi as any,
+      bindPopstate: bindPopstate as any,
+    });
+
+    expect(calls).toEqual([
+      'hydrateRoutes',
+      'resolveRepoPath',
+      'bootstrapRepoUi',
+      'bindPopstate',
+    ]);
+  });
+
+  test('falls back to route error handler when initial resolution throws', async () => {
+    const handleRouteError = mock(async () => null);
+    const hydrateRoutes = mock(async (_ctx: any, options: any) => {
+      await options.resolveRepoPath('7flash/gitmaps');
+    });
+
+    await wireMountRoutes({} as any, {
+      isDisposed: () => false,
+      showLandingPlaceholder: mock(() => undefined),
+      updateFavoriteStar: mock(() => undefined),
+      applySharedLayout: mock(async () => undefined),
+      hydrateRoutes: hydrateRoutes as any,
+      resolveRepoPath: mock(async () => {
+        throw new Error('boom');
+      }) as any,
+      handleRouteError: handleRouteError as any,
+      bindPopstate: mock(() => undefined) as any,
+    });
+
+    expect(handleRouteError).toHaveBeenCalledTimes(1);
+  });
+
+  test('binds popstate to the shared route-entry helper with current repo state', () => {
+    let popHandler: (() => void) | undefined;
+    const addListener = mock((_type: string, handler: () => void) => {
+      popHandler = handler;
+    });
+    const showLandingPlaceholder = mock(() => undefined);
+    const updateFavoriteStar = mock(() => undefined);
+    const ctx = {
+      snap: () => ({ context: { repoPath: 'C:/Code/gitmaps' } }),
+      onRepoReady: mock(() => undefined),
+    } as any;
+
+    bindMountPopstate(ctx, {
+      isDisposed: () => false,
+      showLandingPlaceholder,
+      updateFavoriteStar,
+      addListener,
+    });
+
+    expect(addListener).toHaveBeenCalledWith('popstate', expect.any(Function));
+    expect(popHandler).toBeDefined();
+  });
+});