BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine stacked diff view

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-06-13 22:30:03 +03:00
parent 676f0b3898
commit cf8eac966e
28 changed files with 93 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/ContextPanel.tsx
+1 -1
View File
@@ -2283,11 +2283,11 @@ export const ContextPanel: React.FC = () => {
key={activeTab.id}
hideStackedFileSidebar
stackedDefaultCollapsedAll
hideFileSelector
pinSelectedFileHeaderToTopOnNavigate
showOpenInEditorAction
diffScope={activeTab.stagedDiff ? 'staged' : 'working'}
targetFilePath={activeTab.targetPath}
flushContent
/>
)
: activeTab?.mode === 'context'
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
-50
View File
@@ -73,19 +73,6 @@ const DIFF_LAYOUT_OPTIONS: Option<'dynamic' | 'inline' | 'side-by-side'>[] = [
},
];
const DIFF_VIEW_MODE_OPTIONS: Option<'single' | 'stacked'>[] = [
{
id: 'single',
labelKey: 'settings.openchamber.visual.option.diffViewMode.single.label',
descriptionKey: 'settings.openchamber.visual.option.diffViewMode.single.description',
},
{
id: 'stacked',
labelKey: 'settings.openchamber.visual.option.diffViewMode.stacked.label',
descriptionKey: 'settings.openchamber.visual.option.diffViewMode.stacked.description',
},
];
const MERMAID_RENDERING_OPTIONS: Option<'svg' | 'ascii'>[] = [
{
id: 'svg',
@@ -297,8 +284,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
const setMobileKeyboardMode = useUIStore(state => state.setMobileKeyboardMode);
const diffLayoutPreference = useUIStore(state => state.diffLayoutPreference);
const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
const diffViewMode = useUIStore(state => state.diffViewMode);
const setDiffViewMode = useUIStore(state => state.setDiffViewMode);
const showTerminalQuickKeysOnDesktop = useUIStore(state => state.showTerminalQuickKeysOnDesktop);
const setShowTerminalQuickKeysOnDesktop = useUIStore(state => state.setShowTerminalQuickKeysOnDesktop);
const fileEditorKeymap = useUIStore(state => state.fileEditorKeymap);
@@ -1696,41 +1681,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</section>
)}
{shouldShow('diffLayout') && !isVSCode && (
<section className="p-2">
<h4 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.visual.section.diffViewMode')}</h4>
<div role="radiogroup" aria-label={t('settings.openchamber.visual.section.diffViewModeAria')} className="mt-0.5 space-y-0">
{DIFF_VIEW_MODE_OPTIONS.map((option) => {
const selected = diffViewMode === option.id;
return (
<div
key={option.id}
role="button"
tabIndex={0}
aria-pressed={selected}
onClick={() => setDiffViewMode(option.id)}
onKeyDown={(event) => {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
setDiffViewMode(option.id);
}
}}
className="flex w-full items-center gap-2 py-0 text-left"
>
<Radio
checked={selected}
onChange={() => setDiffViewMode(option.id)}
ariaLabel={t('settings.openchamber.visual.field.diffViewModeAria', { option: tUnsafe(option.labelKey) })}
/>
<span className={cn('typography-ui-label font-normal', selected ? 'text-foreground' : 'text-foreground/50')}>
{tUnsafe(option.labelKey)}
</span>
</div>
);
})}
</div>
</section>
)}
</div>
)}
packages/ui/src/components/views/DiffView.tsx
+81 -434
View File
@@ -8,10 +8,8 @@ import type { GitStatus } from '@/lib/api/types';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
@@ -64,8 +62,6 @@ const BinaryDiffPlaceholder = React.memo(() => {
);
});
type DiffTabViewMode = 'single' | 'stacked';
type ChangeDescriptor = {
code: string;
color: string;
@@ -83,23 +79,6 @@ const CHANGE_DESCRIPTORS: Record<string, ChangeDescriptor> = {
const DEFAULT_CHANGE_DESCRIPTOR = CHANGE_DESCRIPTORS.M;
const DIFF_VIEW_MODE_OPTIONS: Array<{
value: DiffTabViewMode;
labelKey: I18nKey;
descriptionKey: I18nKey;
}> = [
{
value: 'single',
labelKey: 'diffView.mode.single.label',
descriptionKey: 'diffView.mode.single.description',
},
{
value: 'stacked',
labelKey: 'diffView.mode.stacked.label',
descriptionKey: 'diffView.mode.stacked.description',
},
];
const getChangeSymbol = (file: GitStatus['files'][number]): string => {
const indexCode = file.index?.trim();
const workingCode = file.working_dir?.trim();
@@ -189,15 +168,50 @@ const formatDiffTotals = (insertions?: number, deletions?: number) => {
);
};
const DiffFilePathLabel = React.memo<{
path: string;
className?: string;
}>(({ path, className }) => {
const lastSlash = path.lastIndexOf('/');
if (lastSlash === -1) {
return (
<span
className={cn('block min-w-0 truncate typography-ui-label text-foreground', className)}
title={path}
style={{ direction: 'rtl', textAlign: 'left', unicodeBidi: 'plaintext' }}
>
{path}
</span>
);
}
const dir = path.slice(0, lastSlash);
const name = path.slice(lastSlash + 1);
return (
<span
className={cn('flex min-w-0 items-baseline overflow-hidden typography-ui-label', className)}
title={path}
>
<span
className="min-w-0 truncate text-muted-foreground"
style={{ direction: 'rtl', textAlign: 'left', unicodeBidi: 'plaintext' }}
>
{dir}
</span>
<span className="flex-shrink-0">
<span className="text-muted-foreground">/</span>
<span className="text-foreground">{name}</span>
</span>
</span>
);
});
interface FileSelectorProps {
changedFiles: FileEntry[];
selectedFile: string | null;
selectedFileEntry: FileEntry | null;
onSelectFile: (path: string) => void;
isMobile: boolean;
showModeSelector?: boolean;
mode?: DiffTabViewMode;
onModeChange?: (mode: DiffTabViewMode) => void;
}
const FileSelector = React.memo<FileSelectorProps>(({
@@ -205,30 +219,19 @@ const FileSelector = React.memo<FileSelectorProps>(({
selectedFile,
selectedFileEntry,
onSelectFile,
isMobile,
showModeSelector = false,
mode,
onModeChange,
}) => {
const { t } = useI18n();
const getLabel = React.useCallback((path: string) => {
if (!isMobile) return path;
const lastSlash = path.lastIndexOf('/');
return lastSlash >= 0 ? path.slice(lastSlash + 1) : path;
}, [isMobile]);
if (changedFiles.length === 0) return null;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex h-7 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
<button className="flex h-7 min-w-0 max-w-[min(52rem,60vw)] items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
{selectedFileEntry ? (
<div className="flex min-w-0 items-center gap-3">
<div className="flex min-w-0 flex-1 items-center gap-3">
<FileTypeIcon filePath={selectedFileEntry.path} className="h-3.5 w-3.5 flex-shrink-0" />
<span className="min-w-0 flex-1 truncate typography-meta">
{getLabel(selectedFileEntry.path)}
</span>
<DiffFilePathLabel path={selectedFileEntry.path} className="flex-1" />
{formatDiffTotals(selectedFileEntry.insertions, selectedFileEntry.deletions)}
</div>
) : (
@@ -237,42 +240,14 @@ const FileSelector = React.memo<FileSelectorProps>(({
<Icon name="arrow-down-s" className="size-4 opacity-50" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="max-h-[70vh] min-w-[320px] overflow-y-auto">
{showModeSelector && mode && onModeChange ? (
<>
<DropdownMenuLabel className="typography-meta text-muted-foreground">
{t('diffView.selector.viewMode')}
</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={mode}
onValueChange={(value) => onModeChange(value as DiffTabViewMode)}
>
{DIFF_VIEW_MODE_OPTIONS.map((option) => (
<DropdownMenuRadioItem
key={option.value}
value={option.value}
className="items-center"
>
<span className="typography-meta text-foreground">
{t(option.labelKey)}
</span>
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
</>
) : null}
<DropdownMenuContent className="max-h-[70vh] w-[max(var(--anchor-width),min(28rem,calc(100vw-2rem)))] max-w-[calc(100vw-2rem)] overflow-y-auto">
<DropdownMenuRadioGroup value={selectedFile ?? ''} onValueChange={onSelectFile}>
{changedFiles.map((file) => (
<DropdownMenuRadioItem key={file.path} value={file.path}>
<DropdownMenuRadioItem key={file.path} value={file.path} className="min-w-0 items-center">
<div className="flex w-full min-w-0 items-center gap-3">
<FileTypeIcon filePath={file.path} className="h-3.5 w-3.5 flex-shrink-0" />
<span className="min-w-0 flex-1 truncate typography-meta">
{getLabel(file.path)}
</span>
<span className="ml-auto">
{formatDiffTotals(file.insertions, file.deletions)}
</span>
<DiffFilePathLabel path={file.path} className="flex-1" />
{formatDiffTotals(file.insertions, file.deletions)}
</div>
</DropdownMenuRadioItem>
))}
@@ -282,44 +257,6 @@ const FileSelector = React.memo<FileSelectorProps>(({
);
});
interface DiffViewModeSelectorProps {
mode: DiffTabViewMode;
onModeChange: (mode: DiffTabViewMode) => void;
}
const DiffViewModeSelector = React.memo<DiffViewModeSelectorProps>(({ mode, onModeChange }) => {
const { t } = useI18n();
const currentOption =
DIFF_VIEW_MODE_OPTIONS.find((option) => option.value === mode) ?? DIFF_VIEW_MODE_OPTIONS[0];
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex h-7 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
<span className="min-w-0 truncate typography-meta">
{t(currentOption.labelKey)}
</span>
<Icon name="arrow-down-s" className="size-4 opacity-50" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[140px]">
<DropdownMenuRadioGroup
value={mode}
onValueChange={(value) => onModeChange(value as DiffTabViewMode)}
>
{DIFF_VIEW_MODE_OPTIONS.map((option) => (
<DropdownMenuRadioItem key={option.value} value={option.value}>
<span className="typography-meta text-foreground">
{t(option.labelKey)}
</span>
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
});
interface FileListProps {
changedFiles: FileEntry[];
selectedFile: string | null;
@@ -380,68 +317,6 @@ const FileList = React.memo<FileListProps>(({
});
// Image diff viewer for binary image files
interface ImageDiffViewerProps {
filePath: string;
diff: DiffData;
isVisible: boolean;
renderSideBySide: boolean;
}
const ImageDiffViewer = React.memo<ImageDiffViewerProps>(({
filePath,
diff,
isVisible,
renderSideBySide,
}) => {
const { t } = useI18n();
const hasOriginal = diff.original.length > 0;
const hasModified = diff.modified.length > 0;
if (!isVisible) {
return <div className="absolute inset-0 hidden" />;
}
// Render side-by-side or stacked based on preference
const containerClass = renderSideBySide
? 'flex flex-row gap-6 items-start justify-center h-full'
: 'flex flex-col gap-4 items-center';
const imageContainerClass = renderSideBySide
? 'flex flex-col items-center gap-2 flex-1 min-w-0 h-full'
: 'flex flex-col items-center gap-2';
return (
<div className="absolute inset-0 overflow-auto p-4" style={{ contain: 'size layout' }}>
<div className={containerClass}>
{hasOriginal && (
<div className={imageContainerClass}>
<span className="typography-meta text-muted-foreground font-medium">{t('diffView.image.original')}</span>
<img
src={diff.original}
alt={t('diffView.image.originalAlt', { path: filePath })}
className={renderSideBySide ? "max-w-full max-h-[calc(100%-2rem)] object-contain" : "max-w-full object-contain"}
style={{ imageRendering: 'auto' }}
/>
</div>
)}
{hasModified && (
<div className={imageContainerClass}>
<span className="typography-meta text-muted-foreground font-medium">
{hasOriginal ? t('diffView.image.modified') : t('diffView.image.new')}
</span>
<img
src={diff.modified}
alt={t('diffView.image.modifiedAlt', { path: filePath })}
className={renderSideBySide ? "max-w-full max-h-[calc(100%-2rem)] object-contain" : "max-w-full object-contain"}
style={{ imageRendering: 'auto' }}
/>
</div>
)}
</div>
</div>
);
});
interface InlineImageDiffViewerProps {
filePath: string;
diff: DiffData;
@@ -544,70 +419,6 @@ const InlineDiffViewer = React.memo<InlineDiffViewerProps>(({
);
});
// Single diff viewer instance
interface SingleDiffViewerProps {
filePath: string;
diff: DiffData;
isVisible: boolean;
renderSideBySide: boolean;
wrapLines: boolean;
}
const SingleDiffViewer = React.memo<SingleDiffViewerProps>(({
filePath,
diff,
isVisible,
renderSideBySide,
wrapLines,
}) => {
const language = React.useMemo(
() => getLanguageFromExtension(filePath) || 'text',
[filePath]
);
if (diff.isBinary) {
return <BinaryDiffPlaceholder />;
}
// Don't render if not visible (memory optimization)
if (!isVisible) {
return null;
}
// Check if this is an image file
if (isImageFile(filePath)) {
return (
<ImageDiffViewer
filePath={filePath}
diff={diff}
isVisible={isVisible}
renderSideBySide={renderSideBySide}
/>
);
}
return (
<ScrollableOverlay
outerClassName="absolute inset-0"
disableHorizontal={false}
observeMutations={false}
preventOverscroll
data-diff-virtual-root
data-diff-virtual-content
>
<PierreDiffViewer
original={diff.original}
modified={diff.modified}
language={language}
fileName={filePath}
renderSideBySide={renderSideBySide}
wrapLines={wrapLines}
layout="inline"
/>
</ScrollableOverlay>
);
});
interface MultiFileDiffEntryProps {
directory: string;
file: FileEntry;
@@ -794,20 +605,19 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
}, [handleOpenChange, handleSelect, isExpanded]);
return (
<div ref={setSectionRef} className="scroll-mt-4">
<div className="sticky top-0 z-10 bg-background">
<div ref={setSectionRef} className="scroll-mt-9 border-b border-[var(--interactive-border)]/40 last:border-b-0">
<div className="sticky top-0 z-10 bg-[var(--surface-muted)]">
<button
type="button"
onClick={handleToggle}
className={cn(
'group/header relative flex w-full items-center gap-2 px-3 py-1.5 rounded-t-xl border border-border/60 overflow-hidden',
'bg-background',
isExpanded ? 'rounded-b-none' : 'rounded-b-xl',
'group/header relative flex w-full items-center gap-2 px-3 py-1.5 overflow-hidden',
'bg-transparent',
'text-muted-foreground hover:text-foreground',
isSelected ? 'ring-1 ring-inset ring-[var(--interactive-selection)]' : null
isSelected ? 'bg-[var(--interactive-selection)]/40' : null
)}
>
<div className="absolute inset-0 pointer-events-none group-hover/header:bg-interactive-hover" />
<div className="absolute inset-0 pointer-events-none group-hover/header:bg-[var(--interactive-hover)]/50" />
<div className="relative flex min-w-0 flex-1 items-center gap-2">
<span className="flex size-5 items-center justify-center opacity-70 group-hover/header:opacity-100">
{isExpanded ? (
@@ -898,7 +708,7 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
</button>
</div>
{isExpanded && (
<div className="relative border border-t-0 border-border/60 bg-background rounded-b-xl overflow-hidden">
<div className="relative bg-background overflow-hidden">
{diffLoadError ? (
<div className="flex flex-col items-center gap-2 px-4 py-8 text-sm text-muted-foreground">
<div className="typography-ui-label font-semibold text-foreground">
@@ -961,6 +771,8 @@ interface DiffViewProps {
showOpenInEditorAction?: boolean;
diffScope?: DiffScope;
targetFilePath?: string | null;
/** Render diff content flush with the container edges (no outer padding). */
flushContent?: boolean;
}
export const DiffView: React.FC<DiffViewProps> = ({
@@ -971,6 +783,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
showOpenInEditorAction = false,
diffScope = 'all',
targetFilePath = null,
flushContent = false,
}) => {
const { t } = useI18n();
const { git, files } = useRuntimeAPIs();
@@ -995,9 +808,6 @@ export const DiffView: React.FC<DiffViewProps> = ({
const [stackedExpandTarget, setStackedExpandTarget] = React.useState<string | null>(null);
const [stackedExpandRequestNonce, setStackedExpandRequestNonce] = React.useState(0);
const [pinnedStackedTarget, setPinnedStackedTarget] = React.useState<string | null>(null);
const [diffRetryNonce, setDiffRetryNonce] = React.useState(0);
const [diffLoadError, setDiffLoadError] = React.useState<string | null>(null);
const lastDiffRequestRef = React.useRef<string | null>(null);
const pendingDiffFile = useUIStore((state) => state.pendingDiffFile);
const pendingDiffStaged = useUIStore((state) => state.pendingDiffStaged);
@@ -1007,14 +817,11 @@ export const DiffView: React.FC<DiffViewProps> = ({
const setDiffFileLayout = useUIStore((state) => state.setDiffFileLayout);
const diffWrapLinesStore = useUIStore((state) => state.diffWrapLines);
const setDiffWrapLines = useUIStore((state) => state.setDiffWrapLines);
const diffViewMode = useUIStore((state) => state.diffViewMode);
const setDiffViewMode = useUIStore((state) => state.setDiffViewMode);
const openContextFileAtLine = useUIStore((state) => state.openContextFileAtLine);
const diffWrapLines = diffWrapLinesStore;
const forcedStaged = diffScope === 'staged' ? true : diffScope === 'working' ? false : null;
const activeDiffStaged = forcedStaged ?? selectedFileStaged;
const isStackedView = diffViewMode === 'stacked';
const isMobileLayout = isMobile || screenWidth <= 768;
const showFileSidebar = !hideStackedFileSidebar && !isMobileLayout && screenWidth >= 1024;
const diffScrollRef = React.useRef<HTMLElement | null>(null);
@@ -1024,7 +831,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
const shouldPinAfterAlignRef = React.useRef(false);
React.useEffect(() => {
if (!pinSelectedFileHeaderToTopOnNavigate || !isStackedView || !pinnedStackedTarget) {
if (!pinSelectedFileHeaderToTopOnNavigate || !pinnedStackedTarget) {
return;
}
@@ -1116,7 +923,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
window.removeEventListener('keydown', cancelOnUserInput, true);
scrollRoot.removeEventListener('scroll', cancelOnScroll);
};
}, [isStackedView, pinSelectedFileHeaderToTopOnNavigate, pinnedStackedTarget]);
}, [pinSelectedFileHeaderToTopOnNavigate, pinnedStackedTarget]);
const changedFiles: FileEntry[] = React.useMemo(() => {
if (!status?.files) return [];
@@ -1200,14 +1007,12 @@ export const DiffView: React.FC<DiffViewProps> = ({
setSelectedFileStaged(pendingDiffStaged);
setSelectedStagedDiffData(null);
setPendingDiffFile(null);
if (isStackedView) {
shouldPinAfterAlignRef.current = true;
pendingScrollTargetRef.current = pendingDiffFile;
setStackedExpandTarget(pendingDiffFile);
setStackedExpandRequestNonce((nonce) => nonce + 1);
}
shouldPinAfterAlignRef.current = true;
pendingScrollTargetRef.current = pendingDiffFile;
setStackedExpandTarget(pendingDiffFile);
setStackedExpandRequestNonce((nonce) => nonce + 1);
}
}, [diffScope, isStackedView, pendingDiffFile, pendingDiffStaged, setPendingDiffFile]);
}, [diffScope, pendingDiffFile, pendingDiffStaged, setPendingDiffFile]);
React.useEffect(() => {
if (diffScope === 'all') {
@@ -1223,13 +1028,11 @@ export const DiffView: React.FC<DiffViewProps> = ({
setSelectedFileStaged(diffScope === 'staged');
setSelectedStagedDiffData(null);
if (isStackedView) {
shouldPinAfterAlignRef.current = true;
pendingScrollTargetRef.current = normalizedTarget;
setStackedExpandTarget(normalizedTarget);
setStackedExpandRequestNonce((nonce) => nonce + 1);
}
}, [diffScope, isStackedView, targetFilePath]);
shouldPinAfterAlignRef.current = true;
pendingScrollTargetRef.current = normalizedTarget;
setStackedExpandTarget(normalizedTarget);
setStackedExpandRequestNonce((nonce) => nonce + 1);
}, [diffScope, targetFilePath]);
React.useEffect(() => {
if (!activeDiffStaged) {
@@ -1237,8 +1040,6 @@ export const DiffView: React.FC<DiffViewProps> = ({
}
setSelectedStagedDiffData(null);
setDiffLoadError(null);
lastDiffRequestRef.current = null;
}, [activeDiffStaged, indexRevision]);
// Auto-select first file (skip if we have a pending file to consume)
@@ -1299,16 +1100,6 @@ export const DiffView: React.FC<DiffViewProps> = ({
}, []);
React.useEffect(() => {
if (!isStackedView) {
pendingScrollTargetRef.current = null;
shouldPinAfterAlignRef.current = false;
if (pendingScrollFrameRef.current !== null) {
window.cancelAnimationFrame(pendingScrollFrameRef.current);
pendingScrollFrameRef.current = null;
}
return;
}
const target = pendingScrollTargetRef.current;
if (!target) return;
@@ -1431,7 +1222,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
pendingScrollFrameRef.current = null;
}
};
}, [isStackedView, pinSelectedFileHeaderToTopOnNavigate, scrollToFile, selectedFile, stackedExpandRequestNonce]);
}, [pinSelectedFileHeaderToTopOnNavigate, scrollToFile, selectedFile, stackedExpandRequestNonce]);
const handleSelectFile = React.useCallback((value: string) => {
setSelectedFile(value);
@@ -1450,43 +1241,23 @@ export const DiffView: React.FC<DiffViewProps> = ({
setSelectedFileStaged(false);
setSelectedStagedDiffData(null);
if (!isStackedView) {
shouldPinAfterAlignRef.current = false;
return;
}
shouldPinAfterAlignRef.current = true;
pendingScrollTargetRef.current = value;
setStackedExpandTarget(value);
setStackedExpandRequestNonce((nonce) => nonce + 1);
scrollToFile(value);
}, [isStackedView, scrollToFile]);
const handleDiffViewModeChange = React.useCallback((mode: DiffTabViewMode) => {
setDiffViewMode(mode);
if (mode === 'stacked' && selectedFile) {
const result = scrollToFile(selectedFile);
if (!result.aligned) {
pendingScrollTargetRef.current = selectedFile;
}
}
}, [scrollToFile, selectedFile, setDiffViewMode]);
}, [scrollToFile]);
const handleHeaderLayoutChange = React.useCallback((mode: DiffViewMode) => {
const nextLayout: 'inline' | 'side-by-side' =
mode === 'side-by-side' ? 'side-by-side' : 'inline';
if (isStackedView) {
changedFiles.forEach((file) => {
setDiffFileLayout(file.path, nextLayout);
});
return;
}
changedFiles.forEach((file) => {
setDiffFileLayout(file.path, nextLayout);
});
}, [changedFiles, setDiffFileLayout]);
if (!selectedFileEntry) return;
setDiffFileLayout(selectedFileEntry.path, nextLayout);
}, [changedFiles, isStackedView, selectedFileEntry, setDiffFileLayout]);
const renderSideBySide = (currentLayoutForSelectedFile ?? 'side-by-side') === 'side-by-side';
const showFileSelector = !hideFileSelector && (!isStackedView || !showFileSidebar);
const showFileSelector = !hideFileSelector && !showFileSidebar;
const selectedCachedDiff = useGitStore(React.useCallback((state) => {
if (!effectiveDirectory || !selectedFile || activeDiffStaged) return null;
@@ -1572,85 +1343,6 @@ export const DiffView: React.FC<DiffViewProps> = ({
const isOpeningSelectedInEditor = Boolean(selectedFile && openingEditorFilePath === selectedFile);
const hasCurrentDiff = activeDiffStaged ? !!selectedStagedDiffData : !!selectedCachedDiff;
const isCurrentFileLoading = !isStackedView && !!selectedFile && !hasCurrentDiff;
React.useEffect(() => {
if (isStackedView) {
return;
}
setDiffLoadError(null);
if (!effectiveDirectory || !selectedFile) {
lastDiffRequestRef.current = null;
return;
}
if (activeDiffStaged ? selectedStagedDiffData : selectedCachedDiff) {
lastDiffRequestRef.current = null;
return;
}
const requestKey = `${effectiveDirectory}::${selectedFile}::${activeDiffStaged ? `staged:${indexRevision}` : 'unstaged'}::${diffRetryNonce}`;
if (lastDiffRequestRef.current === requestKey) {
return;
}
lastDiffRequestRef.current = requestKey;
let cancelled = false;
const fetchPromise = git.getGitFileDiff(effectiveDirectory, { path: selectedFile, staged: activeDiffStaged });
const timeoutMs = DIFF_REQUEST_TIMEOUT_MS;
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms`)), timeoutMs);
});
void Promise.race([fetchPromise, timeoutPromise])
.then((response) => {
if (cancelled) return;
const nextDiff = {
original: response.original ?? '',
modified: response.modified ?? '',
isBinary: response.isBinary,
};
if (activeDiffStaged) {
setSelectedStagedDiffData(nextDiff);
} else {
setDiff(effectiveDirectory, selectedFile, nextDiff);
}
})
.catch((error) => {
if (cancelled) return;
const message = error instanceof Error ? error.message : String(error);
setDiffLoadError(message);
});
return () => {
cancelled = true;
if (lastDiffRequestRef.current === requestKey) {
// Allow a retry if this request was cancelled due to directory/path churn.
lastDiffRequestRef.current = null;
}
};
}, [activeDiffStaged, effectiveDirectory, indexRevision, isStackedView, selectedFile, selectedCachedDiff, selectedStagedDiffData, git, setDiff, diffRetryNonce]);
// Render only the selected diff viewer to prevent memory bloat with many files
const renderSelectedDiffViewer = () => {
if (!effectiveDirectory || !selectedFile || !selectedDiffData) return null;
return (
<SingleDiffViewer
key={selectedFile}
filePath={selectedFile}
diff={selectedDiffData}
isVisible={true}
renderSideBySide={renderSideBySide}
wrapLines={diffWrapLines}
/>
);
};
const renderStackedDiffView = () => {
if (!effectiveDirectory) return null;
@@ -1663,7 +1355,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
};
return (
<div className="flex flex-1 min-h-0 h-full gap-3 px-3 pb-3 pt-2">
<div className={cn('flex flex-1 min-h-0 h-full', flushContent ? 'gap-0' : 'gap-3 px-3 pb-3 pt-2')}>
{showFileSidebar && (
<section className="hidden lg:flex w-72 flex-col rounded-xl border border-border/60 bg-background/70 overflow-hidden">
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border/40">
@@ -1680,14 +1372,13 @@ export const DiffView: React.FC<DiffViewProps> = ({
<ScrollableOverlay
ref={diffScrollRef}
outerClassName="flex-1 min-h-0 h-full"
className="pr-2"
disableHorizontal
observeMutations={false}
preventOverscroll
data-diff-virtual-root
data-diff-virtual-content
>
<div className="flex flex-col gap-3">
<div className="flex flex-col">
{changedFiles.map((file, index) => (
<MultiFileDiffEntry
key={`${getFileStaged(file.path) ? 'staged' : 'unstaged'}:${file.path}`}
@@ -1752,44 +1443,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
);
}
if (isStackedView) {
return renderStackedDiffView();
}
return (
<div className="flex flex-1 min-h-0 overflow-hidden px-3 py-3 relative" data-diff-virtual-root data-diff-virtual-content>
{renderSelectedDiffViewer()}
{isCurrentFileLoading && !hasCurrentDiff && (
<div className="absolute inset-0 flex items-center justify-center gap-2 text-sm text-muted-foreground">
{diffLoadError ? (
<div className="flex flex-col items-center gap-2">
<div className="typography-ui-label font-semibold text-foreground">
{t('diffView.state.failedToLoadDiff')}
</div>
<div className="typography-meta text-muted-foreground max-w-[32rem] text-center">
{diffLoadError}
</div>
<button
type="button"
className="typography-ui-label text-primary hover:underline"
onClick={() => {
setDiffLoadError(null);
setDiffRetryNonce((n) => n + 1);
}}
>
{t('diffView.actions.retry')}
</button>
</div>
) : (
<>
<Icon name="loader-4" className="size-4 animate-spin" />
{t('diffView.state.loadingDiff')}
</>
)}
</div>
)}
</div>
);
return renderStackedDiffView();
};
return (
@@ -1807,19 +1461,12 @@ export const DiffView: React.FC<DiffViewProps> = ({
</span>
</div>
)}
{!isMobileLayout && (
<DiffViewModeSelector mode={diffViewMode} onModeChange={handleDiffViewModeChange} />
)}
{showFileSelector && (
<FileSelector
changedFiles={changedFiles}
selectedFile={selectedFile}
selectedFileEntry={selectedFileEntry}
onSelectFile={handleSelectFileAndScroll}
isMobile={isMobileLayout}
showModeSelector={isMobileLayout}
mode={diffViewMode}
onModeChange={handleDiffViewModeChange}
/>
)}
<div className="flex-1" />
@@ -1837,7 +1484,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
<Icon name="text-wrap" className="size-4" />
</Button>
)}
{showOpenInEditorAction && selectedFileEntry && !isStackedView && (
{showOpenInEditorAction && selectedFileEntry && (
<Button
variant="ghost"
size="sm"
packages/ui/src/components/views/PierreDiffViewer.tsx
+4
View File
@@ -77,6 +77,10 @@ export const PIERRE_RUNTIME_BASE_CSS = `
const WEBKIT_SCROLL_FIX_CSS = `
${PIERRE_RUNTIME_BASE_CSS}
:host {
--diffs-bg-separator-override: var(--surface-elevated);
}
[data-diff-header],
[data-diff] {
[data-separator] {