feat(desktop): improve side-by-side diff view UI and fix content reset

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/components/MergedPortBadge/MergedPortBadge.tsx

@@ -81,7 +81,7 @@ export function MergedPortBadge({ port }: MergedPortBadgeProps) {
 							type="button"
 							onClick={handleClose}
 							aria-label={`Close ${port.label || `port ${port.port}`}`}
-							className="opacity-0 group-hover:opacity-100 pr-1 transition-opacity text-muted-foreground hover:text-destructive focus-visible:opacity-100 focus-visible:outline-none"
+							className="opacity-0 group-hover:opacity-100 pr-1 transition-opacity text-muted-foreground hover:text-primary focus-visible:opacity-100 focus-visible:outline-none"
 						>
 							<LuX className="size-3.5" strokeWidth={STROKE_WIDTH} />
 						</button>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/components/WorkspacePortGroup/WorkspacePortGroup.tsx

@@ -41,7 +41,7 @@ export function WorkspacePortGroup({ group }: WorkspacePortGroupProps) {
 							<button
 								type="button"
 								onClick={handleCloseAll}
-								className="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-muted/50 transition-opacity text-muted-foreground hover:text-destructive"
+								className="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-muted/50 transition-opacity text-muted-foreground hover:text-primary"
 							>
 								<LuX className="size-3" strokeWidth={STROKE_WIDTH} />
 							</button>

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

@@ -187,6 +187,7 @@ export function DiffViewer({
 
 	const diffEditor = (
 		<DiffEditor
+			key={`${filePath}-${viewMode}`}
 			height="100%"
 			original={contents.original}
 			modified={contents.modified}
@@ -202,6 +203,7 @@ export function DiffViewer({
 			options={{
 				...MONACO_EDITOR_OPTIONS,
 				renderSideBySide: viewMode === "side-by-side",
+				useInlineViewWhenSpaceIsLimited: false,
 				readOnly: !editable,
 				originalEditable: false,
 				renderOverviewRuler: true,

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

@@ -1,6 +1,7 @@
 import type * as Monaco from "monaco-editor";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { MosaicBranch } from "react-mosaic-component";
+import { useChangesStore } from "renderer/stores/changes";
 import { useTabsStore } from "renderer/stores/tabs/store";
 import type { Tab } from "renderer/stores/tabs/types";
 import type { FileViewerMode } from "shared/tabs-types";
@@ -57,6 +58,8 @@ export function FileViewerPane({
 }: FileViewerPaneProps) {
 	// Use granular selector to only get this pane's fileViewer data
 	const fileViewer = useTabsStore((s) => s.panes[paneId]?.fileViewer);
+	const { viewMode: diffViewMode, setViewMode: setDiffViewMode } =
+		useChangesStore();
 
 	const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
 	const [isDirty, setIsDirty] = useState(false);
@@ -117,6 +120,8 @@ export function FileViewerPane({
 	useEffect(() => {
 		setIsDirty(false);
 		originalContentRef.current = "";
+		originalDiffContentRef.current = "";
+		currentDiffContentRef.current = "";
 		draftContentRef.current = null;
 	}, [filePath]);
 
@@ -249,8 +254,6 @@ export function FileViewerPane({
 	const hasDraft = draftContentRef.current !== null;
 	const isDiffEditable =
 		(diffCategory === "staged" || diffCategory === "unstaged") && !hasDraft;
-	const showEditableBadge =
-		viewMode === "raw" || (viewMode === "diff" && isDiffEditable);
 
 	return (
 		<>
@@ -268,14 +271,14 @@ export function FileViewerPane({
 						<FileViewerToolbar
 							fileName={fileName}
 							isDirty={isDirty}
-							isSaving={isSaving}
 							viewMode={viewMode}
 							isPinned={isPinned}
 							isMarkdown={isMarkdown}
 							hasDiff={hasDiff}
-							showEditableBadge={showEditableBadge}
 							splitOrientation={handlers.splitOrientation}
+							diffViewMode={diffViewMode}
 							onViewModeChange={handleViewModeChange}
+							onDiffViewModeChange={setDiffViewMode}
 							onSplitPane={handlers.onSplitPane}
 							onPin={handlePin}
 							onClosePane={handlers.onClosePane}
@@ -296,6 +299,7 @@ export function FileViewerPane({
 					draftContentRef={draftContentRef}
 					initialLine={initialLine}
 					initialColumn={initialColumn}
+					diffViewMode={diffViewMode}
 					onSaveRaw={handleSaveRaw}
 					onSaveDiff={isDiffEditable ? handleSaveDiff : undefined}
 					onEditorChange={handleEditorChange}

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

@@ -10,6 +10,7 @@ import {
 	useMonacoReady,
 } from "renderer/providers/MonacoProvider";
 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";
@@ -52,6 +53,7 @@ interface FileViewerContentProps {
 	draftContentRef: MutableRefObject<string | null>;
 	initialLine?: number;
 	initialColumn?: number;
+	diffViewMode: DiffViewMode;
 	onSaveRaw: () => Promise<void>;
 	onSaveDiff?: (content: string) => Promise<void>;
 	onEditorChange: (value: string | undefined) => void;
@@ -80,6 +82,7 @@ export function FileViewerContent({
 	draftContentRef,
 	initialLine,
 	initialColumn,
+	diffViewMode,
 	onSaveRaw,
 	onSaveDiff,
 	onEditorChange,
@@ -186,7 +189,7 @@ export function FileViewerContent({
 					modified: diffData.modified,
 					language: diffData.language,
 				}}
-				viewMode="inline"
+				viewMode={diffViewMode}
 				filePath={filePath}
 				editable={isDiffEditable}
 				onSave={isDiffEditable ? onSaveDiff : undefined}

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

@@ -1,25 +1,28 @@
-import { Badge } from "@superset/ui/badge";
 import { ToggleGroup, ToggleGroupItem } from "@superset/ui/toggle-group";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { cn } from "@superset/ui/utils";
-import { HiMiniPencil } from "react-icons/hi2";
-import { TbPinFilled } from "react-icons/tb";
+import {
+	TbLayoutSidebarRightFilled,
+	TbListDetails,
+	TbPinFilled,
+} from "react-icons/tb";
+import type { DiffViewMode } from "shared/changes-types";
 import type { FileViewerMode } from "shared/tabs-types";
 import { PaneToolbarActions } from "../../../components";
 import type { SplitOrientation } from "../../../hooks";
 
 interface FileViewerToolbarProps {
 	fileName: string;
 	isDirty: boolean;
-	isSaving: boolean;
 	viewMode: FileViewerMode;
 	/** If false, this is a preview pane (italic name, can be replaced) */
 	isPinned: boolean;
 	isMarkdown: boolean;
 	hasDiff: boolean;
-	showEditableBadge: boolean;
 	splitOrientation: SplitOrientation;
+	diffViewMode: DiffViewMode;
 	onViewModeChange: (value: string) => void;
+	onDiffViewModeChange: (mode: DiffViewMode) => void;
 	onSplitPane: (e: React.MouseEvent) => void;
 	/** Pin this pane (convert from preview to permanent) */
 	onPin: () => void;
@@ -29,14 +32,14 @@ interface FileViewerToolbarProps {
 export function FileViewerToolbar({
 	fileName,
 	isDirty,
-	isSaving,
 	viewMode,
 	isPinned,
 	isMarkdown,
 	hasDiff,
-	showEditableBadge,
 	splitOrientation,
+	diffViewMode,
 	onViewModeChange,
+	onDiffViewModeChange,
 	onSplitPane,
 	onPin,
 	onClosePane,
@@ -65,12 +68,6 @@ export function FileViewerToolbar({
 						</TooltipContent>
 					</Tooltip>
 				)}
-				{showEditableBadge && (
-					<Badge variant="secondary" className="gap-1 text-[10px] h-4 px-1">
-						<HiMiniPencil className="w-2.5 h-2.5" />
-						{isSaving ? "Saving..." : "⌘S"}
-					</Badge>
-				)}
 			</div>
 			<div className="flex items-center gap-1">
 				<ToggleGroup
@@ -97,6 +94,32 @@ export function FileViewerToolbar({
 						</ToggleGroupItem>
 					)}
 				</ToggleGroup>
+				{viewMode === "diff" && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<button
+								type="button"
+								onClick={() =>
+									onDiffViewModeChange(
+										diffViewMode === "side-by-side" ? "inline" : "side-by-side",
+									)
+								}
+								className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
+							>
+								{diffViewMode === "side-by-side" ? (
+									<TbLayoutSidebarRightFilled className="size-3.5" />
+								) : (
+									<TbListDetails className="size-3.5" />
+								)}
+							</button>
+						</TooltipTrigger>
+						<TooltipContent side="bottom" showArrow={false}>
+							{diffViewMode === "side-by-side"
+								? "Switch to inline diff"
+								: "Switch to side by side diff"}
+						</TooltipContent>
+					</Tooltip>
+				)}
 				<PaneToolbarActions
 					splitOrientation={splitOrientation}
 					onSplitPane={onSplitPane}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/hooks/useFileContent/useFileContent.ts

@@ -65,7 +65,7 @@ export function useFileContent({
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Only update baseline when diff loads
 	useEffect(() => {
-		if (diffData?.modified && !isDirty) {
+		if (diffData && !isDirty) {
 			originalDiffContentRef.current = diffData.modified;
 		}
 	}, [diffData]);

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

@@ -16,12 +16,13 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useEffect, useRef, useState } from "react";
 import { HiArrowPath } from "react-icons/hi2";
-import { LuLoaderCircle } from "react-icons/lu";
+import { LuExpand, LuLoaderCircle, LuX } from "react-icons/lu";
 import { VscGitStash, VscGitStashApply } from "react-icons/vsc";
 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 type { ChangesViewMode } from "../../types";
 import { ViewModeToggle } from "../ViewModeToggle";
 
@@ -231,13 +232,41 @@ export function ChangesHeader({
 	onStashPop,
 	isStashPending,
 }: ChangesHeaderProps) {
+	const { toggleSidebar } = useSidebarStore();
+
 	return (
 		<div className="flex flex-col">
 			<div className="flex items-center gap-1.5 px-2 py-1.5">
 				<span className="text-[10px] text-muted-foreground shrink-0">
 					Base:
 				</span>
 				<BaseBranchSelector worktreePath={worktreePath} />
+				<div className="flex-1" />
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button variant="ghost" size="icon" className="size-6 p-0">
+							<LuExpand className="size-3.5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" showArrow={false}>
+						Expand sidebar
+					</TooltipContent>
+				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={toggleSidebar}
+							className="size-6 p-0"
+						>
+							<LuX className="size-3.5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" showArrow={false}>
+						Close sidebar
+					</TooltipContent>
+				</Tooltip>
 			</div>
 
 			<div className="flex items-center gap-0.5 px-2 pb-1.5">