feat(desktop): add right sidebar with Changes/Files tabs

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

@@ -8,7 +8,7 @@ import type { ChangeCategory, ChangedFile } from "shared/changes-types";
 import {
 	getStatusColor,
 	getStatusIndicator,
-} from "../../../Sidebar/ChangesView/utils";
+} from "../../../RightSidebar/ChangesView/utils";
 import { createFileKey, useScrollContext } from "../../context";
 import { DiffViewer } from "../DiffViewer";
 import { FileDiffHeader } from "./components/FileDiffHeader";

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

@@ -10,20 +10,12 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useEffect, useRef, useState } from "react";
 import { HiArrowPath, HiCheck } from "react-icons/hi2";
-import {
-	LuExpand,
-	LuGitBranch,
-	LuLoaderCircle,
-	LuShrink,
-	LuX,
-} from "react-icons/lu";
+import { LuGitBranch, LuLoaderCircle } 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 { SidebarMode, useSidebarStore } from "renderer/stores/sidebar-state";
 import type { ChangesViewMode } from "../../types";
 import { ViewModeToggle } from "../ViewModeToggle";
 
@@ -235,13 +227,6 @@ export function ChangesHeader({
 	onStashPop,
 	isStashPending,
 }: ChangesHeaderProps) {
-	const { toggleSidebar, currentMode, setMode } = useSidebarStore();
-	const isExpanded = currentMode === SidebarMode.Changes;
-
-	const handleExpandToggle = () => {
-		setMode(isExpanded ? SidebarMode.Tabs : SidebarMode.Changes);
-	};
-
 	return (
 		<div className="flex items-center gap-0.5 px-2 py-1.5">
 			<BaseBranchSelector worktreePath={worktreePath} />
@@ -254,47 +239,6 @@ export function ChangesHeader({
 			<ViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
 			<RefreshButton onRefresh={onRefresh} />
 			<PRStatusLink workspaceId={workspaceId} />
-			<div className="flex-1" />
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<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}>
-					<HotkeyTooltipContent
-						label={isExpanded ? "Collapse sidebar" : "Expand sidebar"}
-						hotkeyId="TOGGLE_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}>
-					<HotkeyTooltipContent
-						label="Close Changes Sidebar"
-						hotkeyId="TOGGLE_SIDEBAR"
-					/>
-				</TooltipContent>
-			</Tooltip>
 		</div>
 	);
 }

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

@@ -0,0 +1,189 @@
+import { Button } from "@superset/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
+import { useParams } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { LuExpand, LuFile, LuGitCompareArrows, LuShrink, LuX } from "react-icons/lu";
+import { HotkeyTooltipContent } from "renderer/components/HotkeyTooltipContent";
+import { electronTrpc } from "renderer/lib/electron-trpc";
+import {
+	RightSidebarTab,
+	SidebarMode,
+	useSidebarStore,
+} from "renderer/stores/sidebar-state";
+import { useTabsStore } from "renderer/stores/tabs/store";
+import type { ChangeCategory, ChangedFile } from "shared/changes-types";
+import { useScrollContext } from "../ChangesContent";
+import { ChangesView } from "./ChangesView";
+
+function TabButton({
+	isActive,
+	onClick,
+	icon,
+	label,
+}: {
+	isActive: boolean;
+	onClick: () => void;
+	icon: React.ReactNode;
+	label: string;
+}) {
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			onClick={onClick}
+			className={`h-6 px-2 py-0 text-xs gap-1 ${isActive ? "bg-muted" : ""}`}
+		>
+			{icon}
+			{label}
+		</Button>
+	);
+}
+
+function FilesView() {
+	return (
+		<div className="flex-1 flex items-center justify-center text-muted-foreground text-sm px-4 text-center">
+			Files view coming soon
+		</div>
+	);
+}
+
+export function RightSidebar() {
+	const { workspaceId } = useParams({ strict: false });
+	const { data: workspace } = electronTrpc.workspaces.get.useQuery(
+		{ id: workspaceId ?? "" },
+		{ enabled: !!workspaceId },
+	);
+	const worktreePath = workspace?.worktreePath;
+	const {
+		currentMode,
+		rightSidebarTab,
+		setRightSidebarTab,
+		toggleSidebar,
+		setMode,
+	} = useSidebarStore();
+	const isExpanded = currentMode === SidebarMode.Changes;
+
+	const handleExpandToggle = () => {
+		setMode(isExpanded ? SidebarMode.Tabs : SidebarMode.Changes);
+	};
+
+	const addFileViewerPane = useTabsStore((s) => s.addFileViewerPane);
+	const trpcUtils = electronTrpc.useUtils();
+	const { scrollToFile } = useScrollContext();
+
+	const invalidateFileContent = useCallback(
+		(filePath: string) => {
+			if (!worktreePath) return;
+
+			Promise.all([
+				trpcUtils.changes.readWorkingFile.invalidate({
+					worktreePath,
+					filePath,
+				}),
+				trpcUtils.changes.getFileContents.invalidate({
+					worktreePath,
+					filePath,
+				}),
+			]).catch((error) => {
+				console.error(
+					"[RightSidebar/invalidateFileContent] Failed to invalidate file content queries:",
+					{ worktreePath, filePath, error },
+				);
+			});
+		},
+		[worktreePath, trpcUtils],
+	);
+
+	const handleFileOpenPane = useCallback(
+		(file: ChangedFile, category: ChangeCategory, commitHash?: string) => {
+			if (!workspaceId || !worktreePath) return;
+			addFileViewerPane(workspaceId, {
+				filePath: file.path,
+				diffCategory: category,
+				commitHash,
+				oldPath: file.oldPath,
+			});
+			invalidateFileContent(file.path);
+		},
+		[workspaceId, worktreePath, addFileViewerPane, invalidateFileContent],
+	);
+
+	const handleFileScrollTo = useCallback(
+		(file: ChangedFile, category: ChangeCategory, commitHash?: string) => {
+			scrollToFile(file, category, commitHash);
+		},
+		[scrollToFile],
+	);
+
+	const handleFileOpen =
+		workspaceId && worktreePath
+			? isExpanded
+				? handleFileScrollTo
+				: handleFileOpenPane
+			: undefined;
+
+	return (
+		<aside className="h-full flex flex-col overflow-hidden">
+			<div className="flex items-center gap-1 px-2 py-1.5 border-b border-border">
+				<TabButton
+					isActive={rightSidebarTab === RightSidebarTab.Changes}
+					onClick={() => setRightSidebarTab(RightSidebarTab.Changes)}
+					icon={<LuGitCompareArrows className="size-3.5" />}
+					label="Changes"
+				/>
+				<TabButton
+					isActive={rightSidebarTab === RightSidebarTab.Files}
+					onClick={() => setRightSidebarTab(RightSidebarTab.Files)}
+					icon={<LuFile className="size-3.5" />}
+					label="Files"
+				/>
+				<div className="flex-1" />
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<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}>
+						<HotkeyTooltipContent
+							label={isExpanded ? "Collapse sidebar" : "Expand sidebar"}
+							hotkeyId="TOGGLE_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}>
+						<HotkeyTooltipContent
+							label="Close sidebar"
+							hotkeyId="TOGGLE_SIDEBAR"
+						/>
+					</TooltipContent>
+				</Tooltip>
+			</div>
+			{rightSidebarTab === RightSidebarTab.Changes ? (
+				<ChangesView onFileOpen={handleFileOpen} isExpandedView={isExpanded} />
+			) : (
+				<FilesView />
+			)}
+		</aside>
+	);
+}

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

@@ -7,7 +7,7 @@ import {
 import { ResizablePanel } from "../../ResizablePanel";
 import { ChangesContent, ScrollProvider } from "../ChangesContent";
 import { ContentView } from "../ContentView";
-import { Sidebar } from "../Sidebar";
+import { RightSidebar } from "../RightSidebar";
 
 export function WorkspaceLayout() {
 	const {
@@ -37,7 +37,7 @@ export function WorkspaceLayout() {
 					handleSide="left"
 					className={isExpanded ? "border-l-0" : undefined}
 				>
-					<Sidebar />
+					<RightSidebar />
 				</ResizablePanel>
 			)}
 		</ScrollProvider>