upstream merge 2026-05-08 PR 5: v2 diff pane / file pane polish

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

@@ -26,8 +26,7 @@ const STATUS_COLORS: Record<FileStatus, string> = {
 	untracked: "text-green-700 dark:text-green-400",
 };
 
-function getStatusIcon(status: FileStatus): ReactNode {
-	const iconClass = "w-3 h-3";
+function getStatusIcon(status: FileStatus, iconClass: string): ReactNode {
 	switch (status) {
 		case "added":
 		case "untracked":
@@ -49,15 +48,17 @@ function getStatusIcon(status: FileStatus): ReactNode {
 export function StatusIndicator({
 	status,
 	className,
+	iconClassName = "w-3 h-3",
 }: {
 	status: string;
 	className?: string;
+	iconClassName?: string;
 }) {
 	return (
 		<span
 			className={`flex shrink-0 items-center ${STATUS_COLORS[status as FileStatus] ?? ""} ${className ?? ""}`}
 		>
-			{getStatusIcon(status as FileStatus)}
+			{getStatusIcon(status as FileStatus, iconClassName)}
 		</span>
 	);
 }

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

@@ -81,18 +81,18 @@ export function DiffPane({ context, workspaceId, onOpenFile }: DiffPaneProps) {
 		[updateData],
 	);
 
-	if (!isLoading && files.length === 0) {
+	if (files.length === 0) {
 		return (
 			<div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
-				No changes
+				{isLoading ? "Loading…" : "No changes"}
 			</div>
 		);
 	}
 
 	return (
 		<Virtualizer
 			className="h-full w-full overflow-auto"
-			contentClassName="space-y-2 px-2 py-2"
+			contentClassName="space-y-2"
 		>
 			<ScrollToFile path={data.path} />
 			{files.map((file) => (

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

@@ -1,3 +1,4 @@
+import { Button } from "@superset/ui/button";
 import { toast } from "@superset/ui/sonner";
 import { memo, useCallback, useRef, useState } from "react";
 import type { ChangesetFile } from "../../../../../useChangeset";
@@ -192,7 +193,7 @@ function DeferredDiffPlaceholder({
 		: `${(file.additions + file.deletions).toLocaleString()} changed lines`;
 
 	return (
-		<div className="flex flex-col overflow-hidden rounded-md border border-border">
+		<div className="flex flex-col overflow-hidden">
 			<DiffFileHeader
 				path={file.path}
 				status={file.status}
@@ -215,13 +216,15 @@ function DeferredDiffPlaceholder({
 					{subtitle && (
 						<div className="text-xs text-muted-foreground">{subtitle}</div>
 					)}
-					<button
+					<Button
 						type="button"
+						size="xs"
+						variant="outline"
 						onClick={onShow}
-						className="mt-1 rounded border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted"
+						className="mt-1"
 					>
 						Show diff
-					</button>
+					</Button>
 				</div>
 			)}
 		</div>

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

@@ -2,11 +2,13 @@ import { Checkbox } from "@superset/ui/checkbox";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { ChevronDown, ChevronRight, Eye, EyeOff } from "lucide-react";
 import { useId } from "react";
-import { LuCopy, LuUndo2 } from "react-icons/lu";
+import { LuCheck, LuCopy, LuUndo2 } from "react-icons/lu";
+import { useCopyToClipboard } from "renderer/hooks/useCopyToClipboard";
 import { StatusIndicator } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/StatusIndicator";
 import { CLICK_HINT_TOOLTIP } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/clickModifierLabels";
 import { getSidebarClickIntent } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/getSidebarClickIntent";
 import { FileIcon } from "renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/utils";
+import { GIT_STAT_TEXT_CLASSES } from "../../utils/gitDecorationColors";
 
 interface DiffFileHeaderProps {
 	path: string;
@@ -21,7 +23,6 @@ interface DiffFileHeaderProps {
 	onToggleViewed: () => void;
 	onOpenFile?: (openInNewTab?: boolean) => void;
 	onOpenInExternalEditor?: () => void;
-	onCopyContents?: () => void;
 	onDiscard?: () => void;
 }
 
@@ -38,27 +39,33 @@ export function DiffFileHeader({
 	onToggleViewed,
 	onOpenFile,
 	onOpenInExternalEditor,
-	onCopyContents,
 	onDiscard,
 }: DiffFileHeaderProps) {
 	const viewedId = useId();
+	const { copyToClipboard, copied } = useCopyToClipboard();
+
+	// Split into directory + basename so the basename stays visible when the
+	// header is narrow — the directory truncates with ellipsis first, and the
+	// basename truncates only as a fallback (very narrow pane or no directory).
+	const lastSlash = path.lastIndexOf("/");
+	const dir = lastSlash >= 0 ? path.slice(0, lastSlash + 1) : "";
+	const name = lastSlash >= 0 ? path.slice(lastSlash + 1) : path;
 
 	return (
-		<div className="@container/diff-file-header flex min-w-0 flex-wrap items-center gap-1 px-2 py-1.5">
+		<div className="@container/diff-file-header flex min-w-0 flex-nowrap items-center gap-1 border-y border-border bg-muted/30 px-3 py-2">
 			<button
 				type="button"
 				onClick={onToggleCollapsed}
 				aria-label={collapsed ? "Expand file" : "Collapse file"}
-				className="shrink-0 rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
+				className="shrink-0 rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
 			>
 				{collapsed ? (
 					<ChevronRight className="size-3.5" />
 				) : (
 					<ChevronDown className="size-3.5" />
 				)}
 			</button>
-			<StatusIndicator status={status} />
-			<Tooltip delayDuration={300}>
+			<Tooltip>
 				<TooltipTrigger asChild>
 					<button
 						type="button"
@@ -72,29 +79,54 @@ export function DiffFileHeader({
 						}}
 						disabled={!onOpenFile && !onOpenInExternalEditor}
 						aria-label="Open in file viewer"
-						className="flex h-6 min-w-0 items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-left transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-60"
+						className="flex h-6 min-w-0 flex-1 items-center gap-1.5 rounded px-1 text-left transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-60"
 					>
 						<FileIcon fileName={path} className="size-3.5 shrink-0" />
-						<span className="min-w-0 truncate font-mono text-xs text-foreground">
-							{path}
+						<span className="flex min-w-0 items-baseline font-mono text-xs">
+							{dir && (
+								<span className="min-w-0 shrink-[1000] truncate text-muted-foreground">
+									{dir}
+								</span>
+							)}
+							<span className="min-w-0 truncate text-foreground">{name}</span>
 						</span>
 					</button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom" showArrow={false}>
 					{CLICK_HINT_TOOLTIP}
 				</TooltipContent>
 			</Tooltip>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={() => void copyToClipboard(path)}
+						aria-label="Copy path"
+						className="shrink-0 rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
+					>
+						{copied ? (
+							<LuCheck className="size-3.5" />
+						) : (
+							<LuCopy className="size-3.5" />
+						)}
+					</button>
+				</TooltipTrigger>
+				<TooltipContent side="bottom" showArrow={false}>
+					{copied ? "Copied" : "Copy path"}
+				</TooltipContent>
+			</Tooltip>
 			<div className="ml-auto flex shrink-0 items-center gap-1.5">
+				<StatusIndicator status={status} iconClassName="size-3.5" />
 				{(additions > 0 || deletions > 0) && (
-					<span className="font-mono text-[10px] text-muted-foreground">
+					<span className="font-mono text-xs text-muted-foreground">
 						{additions > 0 && (
-							<span className="text-green-700 dark:text-green-400">
+							<span className={GIT_STAT_TEXT_CLASSES.addition}>
 								+{additions}
 							</span>
 						)}
 						{additions > 0 && deletions > 0 && " "}
 						{deletions > 0 && (
-							<span className="text-red-700 dark:text-red-500">
+							<span className={GIT_STAT_TEXT_CLASSES.deletion}>
 								-{deletions}
 							</span>
 						)}
@@ -110,7 +142,7 @@ export function DiffFileHeader({
 					/>
 					<label
 						htmlFor={viewedId}
-						className="hidden cursor-pointer select-none text-[10px] text-muted-foreground @min-[380px]/diff-file-header:inline"
+						className="hidden cursor-pointer select-none text-xs text-muted-foreground @min-[380px]/diff-file-header:inline"
 					>
 						Viewed
 					</label>
@@ -125,7 +157,7 @@ export function DiffFileHeader({
 							aria-label={
 								expandUnchanged ? "Hide unchanged regions" : "Show all lines"
 							}
-							className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
+							className="rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
 						>
 							{expandUnchanged ? (
 								<EyeOff className="size-3.5" />
@@ -139,31 +171,14 @@ export function DiffFileHeader({
 					</TooltipContent>
 				</Tooltip>
 
-				<Tooltip>
-					<TooltipTrigger asChild>
-						<button
-							type="button"
-							onClick={onCopyContents}
-							disabled={!onCopyContents}
-							aria-label="Copy file contents"
-							className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
-						>
-							<LuCopy className="size-3.5" />
-						</button>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" showArrow={false}>
-						Copy file contents
-					</TooltipContent>
-				</Tooltip>
-
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<button
 							type="button"
 							onClick={onDiscard}
 							disabled={!onDiscard}
 							aria-label="Discard changes"
-							className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
+							className="rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
 						>
 							<LuUndo2 className="size-3.5" />
 						</button>

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

@@ -0,0 +1,59 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
+import { cn } from "@superset/ui/utils";
+import { SquareSplitHorizontal } from "lucide-react";
+import { TbScan } from "react-icons/tb";
+import { useSettings } from "renderer/stores/settings";
+
+export function DiffPaneHeaderExtras() {
+	const diffStyle = useSettings((s) => s.diffStyle);
+	const updateSetting = useSettings((s) => s.update);
+
+	const buttonClass = (active: boolean) =>
+		cn(
+			"flex size-5 items-center justify-center transition-colors",
+			active
+				? "bg-secondary text-foreground"
+				: "text-muted-foreground hover:text-foreground",
+		);
+
+	return (
+		<div className="flex items-center">
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={() => updateSetting("diffStyle", "unified")}
+						aria-label="Unified view"
+						aria-pressed={diffStyle === "unified"}
+						className={buttonClass(diffStyle === "unified")}
+					>
+						<TbScan className="size-3.5" />
+					</button>
+				</TooltipTrigger>
+				<TooltipContent side="bottom" showArrow={false}>
+					Unified view
+				</TooltipContent>
+			</Tooltip>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={() => updateSetting("diffStyle", "split")}
+						aria-label="Split view"
+						aria-pressed={diffStyle === "split"}
+						className={buttonClass(diffStyle === "split")}
+					>
+						<SquareSplitHorizontal className="size-3.5" />
+					</button>
+				</TooltipTrigger>
+				<TooltipContent side="bottom" showArrow={false}>
+					Split view
+				</TooltipContent>
+			</Tooltip>
+			<div
+				className="mx-1 h-3.5 w-px bg-muted-foreground/30"
+				aria-hidden="true"
+			/>
+		</div>
+	);
+}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/DiffPane/components/DiffPaneHeaderExtras/index.ts

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