Expand App edge interaction coverage (#23)

Author: benvinegar

src/ui/App.tsx

@@ -13,6 +13,7 @@ import { buildFileListEntry } from "./lib/files";
 import { buildHunkCursors, findNextHunkCursor } from "./lib/hunks";
 import { diffHunkId, diffSectionId, fileRowId } from "./lib/ids";
 import { resolveResponsiveLayout } from "./lib/responsive";
+import { resizeSidebarWidth } from "./lib/sidebar";
 import { resolveTheme, THEMES } from "./themes";
 import { HunkHostClient } from "../mcp/client";
 import type { LiveComment, SessionServerMessage } from "../mcp/types";
@@ -376,8 +377,9 @@ export function App({
       return;
     }
 
-    const nextWidth = resizeStartWidth + (event.x - resizeDragOriginX);
-    setFilesPaneWidth(clamp(nextWidth, FILES_MIN_WIDTH, maxFilesPaneWidth));
+    setFilesPaneWidth(
+      resizeSidebarWidth(resizeStartWidth, resizeDragOriginX, event.x, FILES_MIN_WIDTH, maxFilesPaneWidth),
+    );
     event.preventDefault();
     event.stopPropagation();
   };

src/ui/lib/sidebar.ts

@@ -0,0 +1,11 @@
+/** Clamp a dragged sidebar width into the shell's allowed range. */
+export function resizeSidebarWidth(
+  startWidth: number,
+  dragOriginX: number,
+  currentX: number,
+  minWidth: number,
+  maxWidth: number,
+) {
+  const nextWidth = startWidth + (currentX - dragOriginX);
+  return Math.min(Math.max(nextWidth, minWidth), maxWidth);
+}

test/app-interactions.test.tsx

@@ -151,7 +151,6 @@ function createFileScrollBootstrap(): AppBootstrap {
   };
 }
 
-
 async function flush(setup: Awaited<ReturnType<typeof testRender>>) {
   await act(async () => {
     await setup.renderOnce();
@@ -413,6 +412,117 @@ describe("App interactions", () => {
     }
   });
 
+  test("filtering away the selected file reselects the first visible match", async () => {
+    const setup = await testRender(<App bootstrap={createBootstrap()} />, { width: 240, height: 24 });
+
+    try {
+      await flush(setup);
+
+      await act(async () => {
+        await setup.mockInput.pressTab();
+      });
+      await flush(setup);
+      await act(async () => {
+        await setup.mockInput.typeText("beta");
+      });
+      await flush(setup);
+
+      let frame = setup.captureCharFrame();
+      expect(frame).toContain("filter:");
+      expect(frame).toContain("beta");
+      expect(frame).toContain("M beta.ts");
+      expect(frame).not.toContain("M alpha.ts");
+      expect(frame).toContain("beta.ts");
+      expect(frame).not.toContain("Annotation for alpha.ts");
+
+      await act(async () => {
+        await setup.mockInput.pressTab();
+      });
+      await flush(setup);
+
+      frame = setup.captureCharFrame();
+      expect(frame).toContain("filter=beta");
+      expect(frame).toContain("beta.ts");
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
+  test("menu navigation wraps across the first and last top-level menus", async () => {
+    const setup = await testRender(<App bootstrap={createBootstrap()} />, { width: 220, height: 24 });
+
+    try {
+      await flush(setup);
+
+      await act(async () => {
+        setup.mockInput.pressKey("F10");
+      });
+      await flush(setup);
+
+      let frame = setup.captureCharFrame();
+      expect(frame).toContain("Focus files");
+      expect(frame).not.toContain("Keyboard help");
+
+      await act(async () => {
+        await setup.mockInput.pressArrow("left");
+      });
+      await flush(setup);
+
+      frame = setup.captureCharFrame();
+      expect(frame).toContain("Keyboard help");
+      expect(frame).not.toContain("Focus files");
+
+      await act(async () => {
+        await setup.mockInput.pressArrow("right");
+      });
+      await flush(setup);
+
+      frame = setup.captureCharFrame();
+      expect(frame).toContain("Focus files");
+      expect(frame).not.toContain("Keyboard help");
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
+  test("sidebar visibility can toggle off and back on", async () => {
+    const setup = await testRender(<App bootstrap={createBootstrap()} />, { width: 240, height: 24 });
+
+    try {
+      await flush(setup);
+
+      let frame = setup.captureCharFrame();
+      expect(frame).toContain("M alpha.ts");
+
+      await act(async () => {
+        await setup.mockInput.typeText("s");
+      });
+      await flush(setup);
+
+      frame = setup.captureCharFrame();
+      expect(frame).not.toContain("M alpha.ts");
+      expect(frame).toContain("alpha.ts");
+      expect(frame).not.toContain("drag divider resize");
+
+      await act(async () => {
+        await setup.mockInput.typeText("s");
+      });
+      await flush(setup);
+
+      frame = setup.captureCharFrame();
+      expect(frame).toContain("M alpha.ts");
+      expect(frame).toContain("drag divider resize");
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
   test("quit shortcuts route through the provided onQuit handler in regular and pager modes", async () => {
     const regularQuit = mock(() => undefined);
     const regularSetup = await testRender(<App bootstrap={createBootstrap()} onQuit={regularQuit} />, { width: 220, height: 24 });

test/ui-lib.test.ts

@@ -4,6 +4,7 @@ import type { DiffFile } from "../src/core/types";
 import { buildMenuSpecs, menuBoxHeight, menuWidth, nextMenuItemIndex, type MenuEntry } from "../src/ui/components/chrome/menu";
 import { fitText, padText } from "../src/ui/lib/text";
 import { estimateDiffBodyRows } from "../src/ui/lib/sectionHeights";
+import { resizeSidebarWidth } from "../src/ui/lib/sidebar";
 import { resolveTheme } from "../src/ui/themes";
 
 function createDiffFile(): DiffFile {
@@ -75,6 +76,12 @@ describe("ui helpers", () => {
     expect(padText("ok", 4)).toBe("ok  ");
   });
 
+  test("resizeSidebarWidth clamps drag updates into the allowed sidebar range", () => {
+    expect(resizeSidebarWidth(34, 33, 60, 22, 80)).toBe(61);
+    expect(resizeSidebarWidth(34, 33, 0, 22, 80)).toBe(22);
+    expect(resizeSidebarWidth(34, 33, 120, 22, 80)).toBe(80);
+  });
+
   test("estimateDiffBodyRows matches split and stack row counts for hidden-context diffs", async () => {
     const file = createDiffFile();