feat(desktop): show only the tree in the Files pane until a file opens

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FileViewLayout/FileViewLayout.tsx

@@ -1,4 +1,3 @@
-import { Trans } from "@lingui/react/macro";
 import type { RendererContext } from "@superset/panes";
 import {
 	ResizableHandle,
@@ -11,9 +10,9 @@ import type { ImperativePanelHandle } from "react-resizable-panels";
 import { useFileTreeVisibilityStore } from "../../../../state/fileTreeVisibilityStore";
 import type { FilePaneData, PaneViewerData } from "../../../../types";
 import { openFileFromTree } from "../../../../utils/openFileFromTree";
+import { FileViewTree } from "../FileViewTree";
 import { FileBreadcrumb } from "./components/FileBreadcrumb";
 import { FileViewFloatingActions } from "./components/FileViewFloatingActions";
-import { FileViewTree } from "./components/FileViewTree";
 
 const TREE_DEFAULT_SIZE = 35;
 const TREE_TOGGLE_MS = 200;
@@ -23,7 +22,7 @@ interface FileViewLayoutProps {
 	workspaceId: string;
 	showTree: boolean;
 	onSearch?: () => void;
-	children?: ReactNode;
+	children: ReactNode;
 }
 
 export function FileViewLayout({
@@ -37,9 +36,8 @@ export function FileViewLayout({
 		context.pane.kind === "file"
 			? (context.pane.data as FilePaneData).filePath
 			: undefined;
-	const storedVisible = useFileTreeVisibilityStore((state) => state.visible);
+	const visible = useFileTreeVisibilityStore((state) => state.visible);
 	const setVisible = useFileTreeVisibilityStore((state) => state.setVisible);
-	const visible = filePath ? storedVisible : true;
 	const groupRef = useRef<React.ComponentRef<typeof ResizablePanelGroup>>(null);
 	const treePanelRef = useRef<ImperativePanelHandle>(null);
 	const [animating, setAnimating] = useState(false);
@@ -58,54 +56,31 @@ export function FileViewLayout({
 		return () => clearTimeout(timer);
 	}, [visible]);
 
-	const tabHasTreePane =
-		context.pane.kind !== "files" &&
-		Object.values(context.tab.panes).some((pane) => pane.kind === "files");
+	const tabHasTreePane = Object.values(context.tab.panes).some(
+		(pane) => pane.kind === "files",
+	);
 	if (!showTree || tabHasTreePane) return children;
 
 	const panelTransition =
 		animating && "transition-[flex-grow] duration-200 ease-out";
 	return (
 		<div data-file-view className="relative h-full w-full min-w-0">
 			<ResizablePanelGroup ref={groupRef} direction="horizontal">
-				<ResizablePanel
-					id="file-view-content"
-					order={1}
-					minSize={30}
-					className={cn(panelTransition)}
-				>
-					<div className="relative h-full min-w-0">
-						{children ?? (
-							<div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground/60">
-								<Trans>Select a file to view it here</Trans>
-							</div>
-						)}
-					</div>
-				</ResizablePanel>
-				<ResizableHandle
-					className={cn("bg-transparent", !visible && "pointer-events-none")}
-					onDoubleClick={() =>
-						groupRef.current?.setLayout([
-							100 - TREE_DEFAULT_SIZE,
-							TREE_DEFAULT_SIZE,
-						])
-					}
-				/>
 				<ResizablePanel
 					id="file-view-tree"
-					order={2}
+					order={1}
 					ref={treePanelRef}
 					defaultSize={visible ? TREE_DEFAULT_SIZE : 0}
 					minSize={20}
 					maxSize={60}
-					collapsible={Boolean(filePath)}
+					collapsible
 					collapsedSize={0}
 					onCollapse={() => setVisible(false)}
 					onExpand={() => setVisible(true)}
 					className={cn(panelTransition)}
 				>
 					<div className="flex h-full min-w-0 flex-col pt-11">
-						<div className="min-h-0 flex-1 overflow-hidden rounded-tl-lg border-t border-l border-border/60">
+						<div className="min-h-0 flex-1 overflow-hidden rounded-tr-lg border-t border-r border-border/60">
 							<FileViewTree
 								context={context}
 								workspaceId={workspaceId}
@@ -114,6 +89,23 @@ export function FileViewLayout({
 						</div>
 					</div>
 				</ResizablePanel>
+				<ResizableHandle
+					className={cn("bg-transparent", !visible && "pointer-events-none")}
+					onDoubleClick={() =>
+						groupRef.current?.setLayout([
+							TREE_DEFAULT_SIZE,
+							100 - TREE_DEFAULT_SIZE,
+						])
+					}
+				/>
+				<ResizablePanel
+					id="file-view-content"
+					order={2}
+					minSize={30}
+					className={cn(panelTransition)}
+				>
+					<div className="relative h-full min-w-0">{children}</div>
+				</ResizablePanel>
 			</ResizablePanelGroup>
 			{filePath && (
 				<FileBreadcrumb

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FileViewLayout/components/FileViewTree/FileViewTree.tsx → apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FileViewTree/FileViewTree.tsx

@@ -1,9 +1,9 @@
 import type { RendererContext } from "@superset/panes";
 import { useCallback } from "react";
-import { FilesTab } from "../../../../../../components/WorkspaceSidebar/components/FilesTab";
-import { useWorkspaceGitStatus } from "../../../../../../providers/WorkspaceGitStatusProvider";
-import type { FilePaneData, PaneViewerData } from "../../../../../../types";
-import { openFileFromTree } from "../../../../../../utils/openFileFromTree";
+import { FilesTab } from "../../../../components/WorkspaceSidebar/components/FilesTab";
+import { useWorkspaceGitStatus } from "../../../../providers/WorkspaceGitStatusProvider";
+import type { FilePaneData, PaneViewerData } from "../../../../types";
+import { openFileFromTree } from "../../../../utils/openFileFromTree";
 import { RepoPicker } from "./components/RepoPicker";
 
 interface FileViewTreeProps {

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FilesTreePane/FilesTreePane.tsx

@@ -1,6 +1,6 @@
 import type { RendererContext } from "@superset/panes";
 import type { PaneViewerData } from "../../../../types";
-import { FileViewLayout } from "../FileViewLayout";
+import { FileViewTree } from "../FileViewTree";
 
 interface FilesTreePaneProps {
 	context: RendererContext<PaneViewerData>;
@@ -14,11 +14,12 @@ export function FilesTreePane({
 	onSearch,
 }: FilesTreePaneProps) {
 	return (
-		<FileViewLayout
-			context={context}
-			workspaceId={workspaceId}
-			showTree
-			onSearch={onSearch}
-		/>
+		<div className="h-full min-w-0">
+			<FileViewTree
+				context={context}
+				workspaceId={workspaceId}
+				onSearch={onSearch}
+			/>
+		</div>
 	);
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx

@@ -2,6 +2,7 @@ import { Trans, useLingui } from "@lingui/react/macro";
 import { errorMessage } from "@superset/i18n/errors";
 import type {
 	ContextMenuActionConfig,
+	Pane,
 	PaneRegistry,
 	RendererContext,
 	WorkspaceStore,
@@ -82,6 +83,7 @@ import {
 } from "../../utils/focusTerminalPane";
 import { openPagePaneInStore } from "../../utils/openPagePaneInStore";
 import { replaceNewTabPane } from "../../utils/replaceNewTabPane";
+import { returnFileToTree } from "../../utils/returnFileToTree";
 import { useAgentSessionLauncher } from "../useAgentSessionLauncher";
 import type { OpenReviewDiff } from "../useReviewCommentNavigation";
 import type { TerminalLauncher } from "../useV2TerminalLauncher";
@@ -282,6 +284,72 @@ export function usePaneRegistry({
 		[workspaceId],
 	);
 
+	const confirmFileClose = useCallback(
+		(pane: Pane<PaneViewerData>): boolean | Promise<boolean> => {
+			const data = pane.data as FilePaneData;
+			const doc = getDocument(workspaceId, data.filePath);
+			if (!doc?.dirty) return true;
+			const name = getFileName(data.filePath);
+			return new Promise<boolean>((resolve) => {
+				alert({
+					onDismiss: () => resolve(false),
+					title: t({
+						message: `Do you want to save the changes you made to ${name}?`,
+					}),
+					description: t({
+						message: "Your changes will be lost if you don't save them.",
+					}),
+					actions: [
+						{
+							label: t({
+								message: "Save",
+							}),
+							onClick: async () => {
+								const doc = getDocument(workspaceId, data.filePath);
+								if (!doc) {
+									resolve(true);
+									return;
+								}
+								const result = await doc.save();
+								if (result.status !== "saved") {
+									const target = store.getState().getPane(pane.id);
+									if (target)
+										store.getState().setActivePane({
+											tabId: target.tabId,
+											paneId: pane.id,
+										});
+								}
+								// Only proceed to close if the save succeeded; otherwise
+								// leave the pane open so the user can see the conflict /
+								// error state and retry.
+								resolve(result.status === "saved");
+							},
+						},
+						{
+							label: t({
+								message: "Don't Save",
+							}),
+							variant: "secondary",
+							onClick: async () => {
+								const doc = getDocument(workspaceId, data.filePath);
+								if (doc) await doc.reload();
+								resolve(true);
+							},
+						},
+						{
+							label: t({
+								message: "Cancel",
+							}),
+							variant: "ghost",
+							onClick: () => resolve(false),
+						},
+					],
+				});
+			});
+		},
+		[workspaceId, store, t],
+	);
+
 	return useMemo<PaneRegistry<PaneViewerData>>(
 		() => ({
 			file: {
@@ -329,67 +397,9 @@ export function usePaneRegistry({
 				),
 				onHeaderClick: (ctx: RendererContext<PaneViewerData>) =>
 					ctx.actions.pin(),
-				onBeforeClose: (pane) => {
-					const data = pane.data as FilePaneData;
-					const doc = getDocument(workspaceId, data.filePath);
-					if (!doc?.dirty) return true;
-					const name = getFileName(data.filePath);
-					return new Promise<boolean>((resolve) => {
-						alert({
-							onDismiss: () => resolve(false),
-							title: t({
-								message: `Do you want to save the changes you made to ${name}?`,
-							}),
-							description: t({
-								message: "Your changes will be lost if you don't save them.",
-							}),
-							actions: [
-								{
-									label: t({
-										message: "Save",
-									}),
-									onClick: async () => {
-										const doc = getDocument(workspaceId, data.filePath);
-										if (!doc) {
-											resolve(true);
-											return;
-										}
-										const result = await doc.save();
-										if (result.status !== "saved") {
-											const target = store.getState().getPane(pane.id);
-											if (target)
-												store.getState().setActivePane({
-													tabId: target.tabId,
-													paneId: pane.id,
-												});
-										}
-										// Only proceed to close if the save succeeded; otherwise
-										// leave the pane open so the user can see the conflict /
-										// error state and retry.
-										resolve(result.status === "saved");
-									},
-								},
-								{
-									label: t({
-										message: "Don't Save",
-									}),
-									variant: "secondary",
-									onClick: async () => {
-										const doc = getDocument(workspaceId, data.filePath);
-										if (doc) await doc.reload();
-										resolve(true);
-									},
-								},
-								{
-									label: t({
-										message: "Cancel",
-									}),
-									variant: "ghost",
-									onClick: () => resolve(false),
-								},
-							],
-						});
-					});
+				onBeforeClose: async (pane) => {
+					if (!(await confirmFileClose(pane))) return false;
+					return !(rightStore && returnFileToTree(rightStore, pane.id));
 				},
 				contextMenuActions: (_ctx, defaults) =>
 					defaults.map((d) =>
@@ -1155,6 +1165,7 @@ export function usePaneRegistry({
 			chatPaneIcon,
 			onOpenSubagent,
 			rightStore,
+			confirmFileClose,
 		],
 	);
 }

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx

@@ -464,6 +464,11 @@ function V2WorkspaceContent() {
 		rightStore,
 		(state) => findVisibleChangesPane(state) != null,
 	);
+	const isRightTreeOnly = useStore(rightStore, (state) => {
+		const tab = state.tabs.find((t) => t.id === state.activeTabId);
+		const panes = tab ? Object.values(tab.panes) : [];
+		return panes.length === 1 && panes[0]?.kind === "files";
+	});
 	const openRightChangesTab = useCallback(() => {
 		setRightSidebarOpen(true);
 		openChangesPaneInStore(rightStore, "tab");
@@ -641,7 +646,7 @@ function V2WorkspaceContent() {
 					<WorkspaceSplitLayout
 						mode={rightPaneMode}
 						activeAreaRef={activeAreaRef}
-						{...(isRightPaneAreaEnabled
+						{...(isRightPaneAreaEnabled && !isRightTreeOnly
 							? {
 									width: v2UserPreferences.rightPaneAreaWidth,
 									minWidth: MIN_RIGHT_PANE_AREA_WIDTH,

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/returnFileToTree/index.ts

@@ -0,0 +1 @@
+export { returnFileToTree } from "./returnFileToTree";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/returnFileToTree/returnFileToTree.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "bun:test";
+import { createWorkspaceStore } from "@superset/panes";
+import type { PaneViewerData } from "../../types";
+import { returnFileToTree } from "./returnFileToTree";
+
+const file = (id: string, pinned?: boolean) => ({
+	id,
+	kind: "file",
+	pinned,
+	data: { filePath: `/${id}.ts`, mode: "editor" as const },
+});
+
+type Store = ReturnType<typeof createWorkspaceStore<PaneViewerData>>;
+
+const kinds = (store: Store) =>
+	store
+		.getState()
+		.tabs.map((tab) => Object.values(tab.panes).map((pane) => pane.kind));
+
+describe("returnFileToTree", () => {
+	it("turns a file alone in its tab back into the Files tree", () => {
+		const store = createWorkspaceStore<PaneViewerData>();
+		store.getState().addTab({ panes: [file("a")] });
+
+		expect(returnFileToTree(store, "a")).toBe(true);
+		expect(kinds(store)).toEqual([["files"]]);
+	});
+
+	it("does it for a pinned file too", () => {
+		const store = createWorkspaceStore<PaneViewerData>();
+		store.getState().addTab({ panes: [file("a", true)] });
+
+		expect(returnFileToTree(store, "a")).toBe(true);
+		expect(kinds(store)).toEqual([["files"]]);
+	});
+
+	it("leaves a file that shares its tab to close normally", () => {
+		const store = createWorkspaceStore<PaneViewerData>();
+		store.getState().addTab({ panes: [file("a"), file("b")] });
+
+		expect(returnFileToTree(store, "a")).toBe(false);
+		expect(kinds(store)).toEqual([["file", "file"]]);
+	});
+});