feat(desktop): add expanded changes sidebar view

apps/desktop/src/main/lib/terminal/daemon/history-manager.ts

@@ -62,7 +62,6 @@ export class HistoryManager {
 			await writer.init(safeScrollback);
 			this.historyWriters.set(paneId, writer);
 
-			// Mark init complete BEFORE replaying to avoid re-buffering into the same array
 			const buffered = this.pendingHistoryData.get(paneId) || [];
 			this.historyInitializing.delete(paneId);
 			this.pendingHistoryData.delete(paneId);

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

@@ -4,8 +4,8 @@ import { electronTrpc } from "renderer/lib/electron-trpc";
 import { electronTrpcClient as trpcClient } from "renderer/lib/trpc-client";
 import { navigateToWorkspace } from "renderer/routes/_authenticated/_dashboard/utils/workspace-navigation";
 import { NotFound } from "renderer/routes/not-found";
-import { ContentView } from "renderer/screens/main/components/WorkspaceView/ContentView";
 import { WorkspaceInitializingView } from "renderer/screens/main/components/WorkspaceView/WorkspaceInitializingView";
+import { WorkspaceLayout } from "renderer/screens/main/components/WorkspaceView/WorkspaceLayout";
 import { useAppHotkey } from "renderer/stores/hotkeys";
 import { useSidebarStore } from "renderer/stores/sidebar-state";
 import { getPaneDimensions } from "renderer/stores/tabs/pane-refs";
@@ -336,15 +336,15 @@ function WorkspacePage() {
 
 	return (
 		<div className="flex-1 h-full flex flex-col overflow-hidden">
-			<div className="flex-1 min-h-0 overflow-hidden">
+			<div className="flex-1 min-h-0 flex overflow-hidden">
 				{showInitView ? (
 					<WorkspaceInitializingView
 						workspaceId={workspaceId}
 						workspaceName={workspace?.name ?? "Workspace"}
 						isInterrupted={hasIncompleteInit && !isInitializing}
 					/>
 				) : (
-					<ContentView />
+					<WorkspaceLayout />
 				)}
 			</div>
 		</div>

apps/desktop/src/renderer/screens/main/components/SidebarControl/SidebarControl.tsx

@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { cn } from "@superset/ui/utils";
 import { useParams } from "@tanstack/react-router";
 import { useCallback } from "react";
-import { LuGitCompareArrows } from "react-icons/lu";
+import { LuDiff } from "react-icons/lu";
 import { HotkeyTooltipContent } from "renderer/components/HotkeyTooltipContent";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useSidebarStore } from "renderer/stores";
@@ -129,19 +129,19 @@ export function SidebarControl() {
 					}
 					aria-pressed={isSidebarOpen}
 					className={cn(
-						"no-drag gap-1.5",
+						"no-drag gap-1.5 h-6 px-1.5 rounded",
 						isSidebarOpen
 							? "font-semibold text-foreground bg-accent"
 							: "text-muted-foreground hover:text-foreground",
 					)}
 				>
-					<LuGitCompareArrows className="size-4" />
+					<LuDiff className="size-3" />
 					<span className="text-xs">Changes</span>
 				</Button>
 			</TooltipTrigger>
 			<TooltipContent side="bottom" showArrow={false}>
 				<HotkeyTooltipContent
-					label="Toggle Changes Sidebar"
+					label="Open Changes Sidebar"
 					hotkeyId="TOGGLE_SIDEBAR"
 				/>
 			</TooltipContent>

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/ChangesContent.tsx

@@ -0,0 +1,7 @@
+export function ChangesContent() {
+	return (
+		<div className="h-full flex items-center justify-center text-muted-foreground">
+			🚧 GitHub style code review coming soon
+		</div>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/ChangesContent/components/DiffViewer/DiffViewer.tsx → apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/DiffViewer/DiffViewer.tsx

@@ -15,7 +15,7 @@ import {
 	type PaneActions,
 	registerCopyPathLineAction,
 	useEditorActions,
-} from "../../../components/EditorContextMenu";
+} from "../../../ContentView/components/EditorContextMenu";
 
 function scrollToFirstDiff(
 	editor: Monaco.editor.IStandaloneDiffEditor,

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/ChangesContent/index.ts → apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/index.ts

@@ -1 +1,2 @@
+export { ChangesContent } from "./ChangesContent";
 export { DiffViewer } from "./components/DiffViewer";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/components/FileViewerContent/FileViewerContent.tsx

@@ -13,7 +13,7 @@ import type { Tab } from "renderer/stores/tabs/types";
 import type { DiffViewMode } from "shared/changes-types";
 import { detectLanguage } from "shared/detect-language";
 import type { FileViewerMode } from "shared/tabs-types";
-import { DiffViewer } from "../../../../../ChangesContent/components/DiffViewer";
+import { DiffViewer } from "../../../../../../ChangesContent/components/DiffViewer";
 import { registerCopyPathLineAction } from "../../../../../components/EditorContextMenu";
 import { FileEditorContextMenu } from "../FileEditorContextMenu";
 

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/index.tsx

@@ -1,14 +1,7 @@
 import { useParams } from "@tanstack/react-router";
 import { useMemo } from "react";
-import { useSidebarStore } from "renderer/stores";
-import {
-	MAX_SIDEBAR_WIDTH,
-	MIN_SIDEBAR_WIDTH,
-} from "renderer/stores/sidebar-state";
 import { useTabsStore } from "renderer/stores/tabs/store";
 import { resolveActiveTabIdForWorkspace } from "renderer/stores/tabs/utils";
-import { ResizablePanel } from "../../../ResizablePanel";
-import { Sidebar } from "../../Sidebar";
 import { EmptyTabView } from "./EmptyTabView";
 import { TabView } from "./TabView";
 
@@ -18,14 +11,6 @@ export function TabsContent() {
 	const activeTabIds = useTabsStore((s) => s.activeTabIds);
 	const tabHistoryStacks = useTabsStore((s) => s.tabHistoryStacks);
 
-	const {
-		isSidebarOpen,
-		sidebarWidth,
-		setSidebarWidth,
-		isResizing,
-		setIsResizing,
-	} = useSidebarStore();
-
 	const activeTabId = useMemo(() => {
 		if (!activeWorkspaceId) return null;
 
@@ -47,25 +32,9 @@ export function TabsContent() {
 		return allTabs.find((tab) => tab.id === activeTabId) || null;
 	}, [activeTabId, allTabs]);
 
-	// Original behavior when persistence disabled: only render active tab
 	return (
 		<div className="flex-1 min-h-0 flex overflow-hidden">
-			<div className="flex-1 min-w-0 overflow-hidden">
-				{tabToRender ? <TabView tab={tabToRender} /> : <EmptyTabView />}
-			</div>
-			{isSidebarOpen && (
-				<ResizablePanel
-					width={sidebarWidth}
-					onWidthChange={setSidebarWidth}
-					isResizing={isResizing}
-					onResizingChange={setIsResizing}
-					minWidth={MIN_SIDEBAR_WIDTH}
-					maxWidth={MAX_SIDEBAR_WIDTH}
-					handleSide="left"
-				>
-					<Sidebar />
-				</ResizablePanel>
-			)}
+			{tabToRender ? <TabView tab={tabToRender} /> : <EmptyTabView />}
 		</div>
 	);
 }

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/index.tsx

@@ -1,12 +1,17 @@
+import { useSidebarStore } from "renderer/stores/sidebar-state";
 import { SidebarControl } from "../../SidebarControl";
 import { ContentHeader } from "./ContentHeader";
 import { TabsContent } from "./TabsContent";
 import { GroupStrip } from "./TabsContent/GroupStrip";
 
 export function ContentView() {
+	const isSidebarOpen = useSidebarStore((s) => s.isSidebarOpen);
+
 	return (
 		<div className="h-full flex flex-col overflow-hidden">
-			<ContentHeader trailingAction={<SidebarControl />}>
+			<ContentHeader
+				trailingAction={!isSidebarOpen ? <SidebarControl /> : undefined}
+			>
 				<GroupStrip />
 			</ContentHeader>
 			<TabsContent />

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx

@@ -16,13 +16,14 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useEffect, useRef, useState } from "react";
 import { HiArrowPath } from "react-icons/hi2";
-import { LuExpand, LuLoaderCircle, LuX } from "react-icons/lu";
+import { LuExpand, LuLoaderCircle, LuShrink, LuX } from "react-icons/lu";
 import { VscGitStash, VscGitStashApply } from "react-icons/vsc";
+import { HotkeyTooltipContent } from "renderer/components/HotkeyTooltipContent";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import { PRIcon } from "renderer/screens/main/components/PRIcon";
 import { usePRStatus } from "renderer/screens/main/hooks";
 import { useChangesStore } from "renderer/stores/changes";
-import { useSidebarStore } from "renderer/stores/sidebar-state";
+import { SidebarMode, useSidebarStore } from "renderer/stores/sidebar-state";
 import type { ChangesViewMode } from "../../types";
 import { ViewModeToggle } from "../ViewModeToggle";
 
@@ -232,7 +233,12 @@ export function ChangesHeader({
 	onStashPop,
 	isStashPending,
 }: ChangesHeaderProps) {
-	const { toggleSidebar } = useSidebarStore();
+	const { toggleSidebar, currentMode, setMode } = useSidebarStore();
+	const isExpanded = currentMode === SidebarMode.Changes;
+
+	const handleExpandToggle = () => {
+		setMode(isExpanded ? SidebarMode.Tabs : SidebarMode.Changes);
+	};
 
 	return (
 		<div className="flex flex-col">
@@ -244,12 +250,21 @@ export function ChangesHeader({
 				<div className="flex-1" />
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<Button variant="ghost" size="icon" className="size-6 p-0">
-							<LuExpand className="size-3.5" />
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={handleExpandToggle}
+							className="size-6 p-0"
+						>
+							{isExpanded ? (
+								<LuShrink className="size-3.5" />
+							) : (
+								<LuExpand className="size-3.5" />
+							)}
 						</Button>
 					</TooltipTrigger>
 					<TooltipContent side="bottom" showArrow={false}>
-						Expand sidebar
+						{isExpanded ? "Collapse sidebar" : "Expand sidebar"}
 					</TooltipContent>
 				</Tooltip>
 				<Tooltip>
@@ -264,7 +279,10 @@ export function ChangesHeader({
 						</Button>
 					</TooltipTrigger>
 					<TooltipContent side="bottom" showArrow={false}>
-						Close sidebar
+						<HotkeyTooltipContent
+							label="Close Changes Sidebar"
+							hotkeyId="TOGGLE_SIDEBAR"
+						/>
 					</TooltipContent>
 				</Tooltip>
 			</div>

apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/WorkspaceLayout.tsx

@@ -0,0 +1,45 @@
+import {
+	MAX_SIDEBAR_WIDTH,
+	MIN_SIDEBAR_WIDTH,
+	SidebarMode,
+	useSidebarStore,
+} from "renderer/stores/sidebar-state";
+import { ResizablePanel } from "../../ResizablePanel";
+import { ChangesContent } from "../ChangesContent";
+import { ContentView } from "../ContentView";
+import { Sidebar } from "../Sidebar";
+
+export function WorkspaceLayout() {
+	const {
+		isSidebarOpen,
+		sidebarWidth,
+		setSidebarWidth,
+		isResizing,
+		setIsResizing,
+		currentMode,
+	} = useSidebarStore();
+
+	const isExpanded = currentMode === SidebarMode.Changes;
+
+	return (
+		<>
+			<div className="flex-1 min-w-0 overflow-hidden">
+				{isExpanded ? <ChangesContent /> : <ContentView />}
+			</div>
+			{isSidebarOpen && (
+				<ResizablePanel
+					width={sidebarWidth}
+					onWidthChange={setSidebarWidth}
+					isResizing={isResizing}
+					onResizingChange={setIsResizing}
+					minWidth={MIN_SIDEBAR_WIDTH}
+					maxWidth={MAX_SIDEBAR_WIDTH}
+					handleSide="left"
+					className={isExpanded ? "border-l-0" : undefined}
+				>
+					<Sidebar />
+				</ResizablePanel>
+			)}
+		</>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceLayout/index.ts

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

apps/desktop/src/renderer/stores/sidebar-state.ts

@@ -15,6 +15,7 @@ interface SidebarState {
 	sidebarWidth: number;
 	lastOpenSidebarWidth: number;
 	currentMode: SidebarMode;
+	lastMode: SidebarMode;
 	isResizing: boolean;
 	toggleSidebar: () => void;
 	setSidebarOpen: (open: boolean) => void;
@@ -31,26 +32,44 @@ export const useSidebarStore = create<SidebarState>()(
 				sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
 				lastOpenSidebarWidth: DEFAULT_SIDEBAR_WIDTH,
 				currentMode: SidebarMode.Tabs,
+				lastMode: SidebarMode.Tabs,
 				isResizing: false,
 
 				toggleSidebar: () => {
-					const { isSidebarOpen, lastOpenSidebarWidth } = get();
+					const { isSidebarOpen, lastOpenSidebarWidth, currentMode, lastMode } =
+						get();
 					if (isSidebarOpen) {
-						set({ isSidebarOpen: false, sidebarWidth: 0 });
+						set({
+							isSidebarOpen: false,
+							sidebarWidth: 0,
+							lastMode: currentMode,
+							currentMode: SidebarMode.Tabs,
+						});
 					} else {
 						set({
 							isSidebarOpen: true,
 							sidebarWidth: lastOpenSidebarWidth,
+							currentMode: lastMode,
 						});
 					}
 				},
 
 				setSidebarOpen: (open) => {
-					const { lastOpenSidebarWidth } = get();
-					set({
-						isSidebarOpen: open,
-						sidebarWidth: open ? lastOpenSidebarWidth : 0,
-					});
+					const { lastOpenSidebarWidth, currentMode, lastMode } = get();
+					if (open) {
+						set({
+							isSidebarOpen: true,
+							sidebarWidth: lastOpenSidebarWidth,
+							currentMode: lastMode,
+						});
+					} else {
+						set({
+							isSidebarOpen: false,
+							sidebarWidth: 0,
+							lastMode: currentMode,
+							currentMode: SidebarMode.Tabs,
+						});
+					}
 				},
 
 				setSidebarWidth: (width) => {
@@ -66,9 +85,12 @@ export const useSidebarStore = create<SidebarState>()(
 							isSidebarOpen: true,
 						});
 					} else {
+						const { currentMode } = get();
 						set({
 							sidebarWidth: 0,
 							isSidebarOpen: false,
+							lastMode: currentMode,
+							currentMode: SidebarMode.Tabs,
 						});
 					}
 				},