Decouple sidebar visibility from layout mode (#18)

Layout toggles (1/2/0) now only change the diff view between split/stack
without collapsing the sidebar. Sidebar visibility is controlled by a new
independent toggle: press `s` or use View > Sidebar in the menu.

On wide terminals (≥220 cols), the sidebar now stays visible regardless of
which layout mode is active. On narrower terminals it remains hidden as
before since there isn't enough room.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: benvinegar

src/ui/App.tsx

@@ -49,6 +49,7 @@ export function App({
   const [showLineNumbers, setShowLineNumbers] = useState(bootstrap.initialShowLineNumbers ?? true);
   const [wrapLines, setWrapLines] = useState(bootstrap.initialWrapLines ?? false);
   const [showHunkHeaders, setShowHunkHeaders] = useState(bootstrap.initialShowHunkHeaders ?? true);
+  const [sidebarVisible, setSidebarVisible] = useState(true);
   const [showHelp, setShowHelp] = useState(false);
   const [focusArea, setFocusArea] = useState<FocusArea>("files");
   const [activeMenuId, setActiveMenuId] = useState<MenuId | null>(null);
@@ -83,7 +84,7 @@ export function App({
   const bodyPadding = pagerMode ? 0 : BODY_PADDING;
   const bodyWidth = Math.max(0, terminal.width - bodyPadding);
   const responsiveLayout = resolveResponsiveLayout(layoutMode, terminal.width);
-  const showFilesPane = pagerMode ? false : responsiveLayout.showFilesPane;
+  const showFilesPane = pagerMode ? false : responsiveLayout.showFilesPane && sidebarVisible;
   const centerWidth = bodyWidth;
   const resolvedLayout = responsiveLayout.layout;
   const currentHunk = selectedFile?.metadata.hunks[selectedHunkIndex];
@@ -247,6 +248,11 @@ export function App({
     setWrapLines((current) => !current);
   };
 
+  /** Toggle sidebar visibility independently of layout mode. */
+  const toggleSidebar = () => {
+    setSidebarVisible((current) => !current);
+  };
+
   /** Toggle visibility of hunk metadata rows without changing the actual diff lines. */
   const toggleHunkHeaders = () => {
     setShowHunkHeaders((current) => !current);
@@ -354,6 +360,14 @@ export function App({
         action: () => setLayoutMode("auto"),
       },
       { kind: "separator" },
+      {
+        kind: "item",
+        label: "Sidebar",
+        hint: "s",
+        checked: sidebarVisible,
+        action: toggleSidebar,
+      },
+      { kind: "separator" },
       {
         kind: "item",
         label: "Agent notes",
@@ -678,6 +692,12 @@ export function App({
       return;
     }
 
+    if (key.name === "s") {
+      toggleSidebar();
+      closeMenu();
+      return;
+    }
+
     if (key.name === "t") {
       const currentIndex = THEMES.findIndex((theme) => theme.id === activeTheme.id);
       const nextIndex = (currentIndex + 1) % THEMES.length;

src/ui/components/chrome/StatusBar.tsx

@@ -25,7 +25,7 @@ export function StatusBar({
   if (canResizeDivider) {
     hintParts.push("drag divider resize");
   }
-  hintParts.push("space/b page", "/ filter", "[ ] hunk nav", "1 2 0 layout", "t theme", "a notes", "l lines", "w wrap", "m meta", "q quit");
+  hintParts.push("space/b page", "/ filter", "[ ] hunk nav", "1 2 0 layout", "s sidebar", "t theme", "a notes", "l lines", "w wrap", "m meta", "q quit");
 
   return (
     <box

src/ui/lib/responsive.ts

@@ -32,15 +32,15 @@ export function resolveResponsiveLayout(requestedLayout: LayoutMode, viewportWid
     return {
       viewport,
       layout: "split",
-      showFilesPane: false,
+      showFilesPane: viewport === "full",
     };
   }
 
   if (requestedLayout === "stack") {
     return {
       viewport,
       layout: "stack",
-      showFilesPane: false,
+      showFilesPane: viewport === "full",
     };
   }
 

test/app-interactions.test.tsx

@@ -313,7 +313,6 @@ describe("App interactions", () => {
 
       frame = setup.captureCharFrame();
       expect(frame).not.toContain("Split view");
-      expect(frame).not.toContain("│");
       expect(frame).toContain("1   -  export const alpha = 1;");
     } finally {
       await act(async () => {

test/app-responsive.test.tsx

@@ -162,10 +162,10 @@ describe("responsive shell", () => {
     expect(forcedSplit).toMatch(/▌.*▌/);
     expect(forcedSplit).not.toContain("drag divider resize");
 
-    expect(forcedStack).not.toContain("Files");
+    expect(forcedStack).toContain("M alpha.ts");
     expect(forcedStack).not.toContain("Changeset summary");
     expect(forcedStack).not.toMatch(/▌.*▌/);
-    expect(forcedStack).not.toContain("drag divider resize");
+    expect(forcedStack).toContain("drag divider resize");
   });
 
   test("pager mode stays responsive while hiding app chrome", async () => {