Collapse the workspace tree vertically when hidden

apps/web/src/components/WorkspacePanel.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { resolveWorkspaceLayoutMode } from "./WorkspacePanel";
+import { resolveWorkspaceLayoutMode, resolveWorkspacePanelDirection } from "./WorkspacePanel";
 
 describe("resolveWorkspaceLayoutMode", () => {
   it("stacks the tree above the editor in narrower panels", () => {
@@ -12,3 +12,32 @@ describe("resolveWorkspaceLayoutMode", () => {
     expect(resolveWorkspaceLayoutMode(960)).toBe("split");
   });
 });
+
+describe("resolveWorkspacePanelDirection", () => {
+  it("keeps split workspaces side by side while the tree is open", () => {
+    expect(
+      resolveWorkspacePanelDirection({
+        layoutMode: "split",
+        treeCollapsed: false,
+      }),
+    ).toBe("flex-row");
+  });
+
+  it("collapses the tree vertically even in split workspaces", () => {
+    expect(
+      resolveWorkspacePanelDirection({
+        layoutMode: "split",
+        treeCollapsed: true,
+      }),
+    ).toBe("flex-col");
+  });
+
+  it("stacks narrow workspaces vertically", () => {
+    expect(
+      resolveWorkspacePanelDirection({
+        layoutMode: "stacked",
+        treeCollapsed: false,
+      }),
+    ).toBe("flex-col");
+  });
+});

apps/web/src/components/WorkspacePanel.tsx

@@ -3,13 +3,25 @@ import { memo, type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "~/lib/utils";
 
 export type WorkspaceLayoutMode = "stacked" | "split";
+export type WorkspacePanelDirection = "flex-col" | "flex-row";
 
 const WORKSPACE_SPLIT_MIN_WIDTH_PX = 600;
 
 export function resolveWorkspaceLayoutMode(width: number): WorkspaceLayoutMode {
   return width >= WORKSPACE_SPLIT_MIN_WIDTH_PX ? "split" : "stacked";
 }
 
+export function resolveWorkspacePanelDirection(input: {
+  layoutMode: WorkspaceLayoutMode;
+  treeCollapsed: boolean;
+}): WorkspacePanelDirection {
+  if (input.layoutMode === "split" && !input.treeCollapsed) {
+    return "flex-row";
+  }
+
+  return "flex-col";
+}
+
 function basenameOfPath(pathValue: string): string {
   const normalizedPath = pathValue.replace(/\/+$/, "");
   const segments = normalizedPath.split("/");
@@ -53,10 +65,11 @@ export const WorkspacePanel = memo(function WorkspacePanel(props: {
   }, []);
 
   const [treeCollapsed, setTreeCollapsed] = useState(false);
+  const panelDirection = resolveWorkspacePanelDirection({ layoutMode, treeCollapsed });
 
   return (
     <div ref={containerRef} className="flex h-full min-h-0 flex-col bg-background">
-      <div className={cn("flex min-h-0 flex-1", layoutMode === "split" ? "flex-row" : "flex-col")}>
+      <div className={cn("flex min-h-0 flex-1", panelDirection)}>
         {props.cwd ? (
           <section
             className={cn(