fix(ui): align sidebar menu state with visibility (#236)

Author: aliou

src/ui/App.tsx

@@ -485,7 +485,7 @@ export function App({
         showHelp,
         showHunkHeaders,
         showLineNumbers,
-        sidebarVisible,
+        renderSidebar,
         toggleAgentNotes,
         toggleFocusArea,
         toggleHelp,
@@ -510,7 +510,7 @@ export function App({
       showHelp,
       showHunkHeaders,
       showLineNumbers,
-      sidebarVisible,
+      renderSidebar,
       toggleAgentNotes,
       toggleFocusArea,
       toggleHelp,

src/ui/AppHost.responsive.test.tsx

@@ -108,6 +108,73 @@ describe("responsive app", () => {
     expect(tight).not.toMatch(/▌.*▌/);
   });
 
+  test("View menu sidebar checkmark follows actual medium-viewport visibility", async () => {
+    const setup = await testRender(<AppHost bootstrap={createBootstrap("auto")} />, {
+      width: 180,
+      height: 24,
+    });
+
+    try {
+      await act(async () => {
+        await setup.renderOnce();
+      });
+
+      const initialFrame = setup.captureCharFrame();
+      expect((initialFrame.match(/alpha\.ts/g) ?? []).length).toBe(1);
+
+      await act(async () => {
+        await setup.mockInput.pressKey("F10");
+      });
+      await act(async () => {
+        await setup.renderOnce();
+      });
+      await act(async () => {
+        await setup.mockInput.pressArrow("right");
+      });
+      await act(async () => {
+        await setup.renderOnce();
+      });
+
+      const menuFrame = setup.captureCharFrame();
+      expect(menuFrame).toContain("[ ] Sidebar");
+      expect(menuFrame).not.toContain("[x] Sidebar");
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
+  test("sidebar shortcut opens the hidden sidebar on medium viewport", async () => {
+    const setup = await testRender(<AppHost bootstrap={createBootstrap("auto")} />, {
+      width: 180,
+      height: 24,
+    });
+
+    try {
+      await act(async () => {
+        await setup.renderOnce();
+      });
+
+      let frame = setup.captureCharFrame();
+      expect((frame.match(/alpha\.ts/g) ?? []).length).toBe(1);
+
+      await act(async () => {
+        await setup.mockInput.typeText("s");
+      });
+      await act(async () => {
+        await setup.renderOnce();
+      });
+
+      frame = setup.captureCharFrame();
+      expect((frame.match(/alpha\.ts/g) ?? []).length).toBe(2);
+    } finally {
+      await act(async () => {
+        setup.renderer.destroy();
+      });
+    }
+  });
+
   test("explicit split and stack modes override responsive auto switching", async () => {
     const forcedSplit = await captureFrameForBootstrap(createBootstrap("split"), 140);
     const forcedStack = await captureFrameForBootstrap(createBootstrap("stack"), 240);

src/ui/lib/appMenus.ts

@@ -18,7 +18,7 @@ export interface BuildAppMenusOptions {
   showHelp: boolean;
   showHunkHeaders: boolean;
   showLineNumbers: boolean;
-  sidebarVisible: boolean;
+  renderSidebar: boolean;
   toggleAgentNotes: () => void;
   toggleFocusArea: () => void;
   toggleHelp: () => void;
@@ -46,7 +46,7 @@ export function buildAppMenus({
   showHelp,
   showHunkHeaders,
   showLineNumbers,
-  sidebarVisible,
+  renderSidebar,
   toggleAgentNotes,
   toggleFocusArea,
   toggleHelp,
@@ -126,7 +126,7 @@ export function buildAppMenus({
         kind: "item",
         label: "Sidebar",
         hint: "s",
-        checked: sidebarVisible,
+        checked: renderSidebar,
         action: toggleSidebar,
       },
       { kind: "separator" },

src/ui/lib/ui-lib.test.ts

@@ -136,7 +136,7 @@ describe("ui helpers", () => {
       showHelp: false,
       showHunkHeaders: false,
       showLineNumbers: true,
-      sidebarVisible: false,
+      renderSidebar: false,
       toggleAgentNotes: () => {},
       toggleFocusArea: () => {},
       toggleHelp: () => {},