João Salavisa
354 lines
14 KiB
TypeScript
354 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { memo, useMemo, useState } from 'react';
|
|
import { DiffModeEnum, DiffView } from '@git-diff-view/react';
|
|
import {
|
|
IconArrowBackUp,
|
|
IconCopy,
|
|
IconLayoutColumns,
|
|
IconLayoutRows,
|
|
} from '@tabler/icons-react';
|
|
import { useTheme } from 'next-themes';
|
|
import { Badge } from '@kandev/ui/badge';
|
|
import { Button } from '@kandev/ui/button';
|
|
import { SessionPanelContent } from '@kandev/ui/pannel-session';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
|
|
import { cn } from '@/lib/utils';
|
|
import { getLocalStorage, setLocalStorage } from '@/lib/local-storage';
|
|
import { useAppStore } from '@/components/state-provider';
|
|
import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-status';
|
|
import { useCumulativeDiff } from '@/hooks/domains/session/use-cumulative-diff';
|
|
import type { FileInfo } from '@/lib/state/slices';
|
|
import type { SelectedDiff } from './task-layout';
|
|
|
|
type TaskChangesPanelProps = {
|
|
selectedDiff: SelectedDiff | null;
|
|
onClearSelected: () => void;
|
|
};
|
|
|
|
const DEFAULT_DIFF_MODE: 'unified' | 'split' = 'unified';
|
|
|
|
/**
|
|
* Normalize diff content for the @git-diff-view/react library.
|
|
*
|
|
* Handles two edge cases from the backend:
|
|
* 1. Multiple diffs concatenated with "--- Staged changes ---" separator
|
|
* (we take the staged diff as it's what matters for the commit)
|
|
* 2. Diffs missing the "diff --git" header line (for untracked files)
|
|
*
|
|
* The library expects each hunk to be a complete diff string with headers.
|
|
*/
|
|
function parseDiffIntoHunks(diffContent: string, filePath?: string): string[] {
|
|
if (!diffContent || typeof diffContent !== 'string') return [];
|
|
|
|
let trimmed = diffContent.trim();
|
|
if (!trimmed) return [];
|
|
|
|
// Handle concatenated diffs with "--- Staged changes ---" separator
|
|
// Take the staged diff (after the separator) as it's the authoritative one
|
|
const stagedSeparator = '--- Staged changes ---';
|
|
if (trimmed.includes(stagedSeparator)) {
|
|
const parts = trimmed.split(stagedSeparator);
|
|
// Use the staged diff (second part) if available
|
|
trimmed = (parts[1] || parts[0]).trim();
|
|
}
|
|
|
|
// If diff is missing the "diff --git" header, add it
|
|
// This happens for untracked files where backend generates incomplete diff
|
|
if (!trimmed.startsWith('diff --git') && trimmed.includes('@@')) {
|
|
const path = filePath || 'file';
|
|
const header = `diff --git a/${path} b/${path}\nnew file mode 100644\nindex 0000000..0000000\n`;
|
|
trimmed = header + trimmed;
|
|
}
|
|
|
|
// Return as single hunk - the library handles parsing internally
|
|
return [trimmed];
|
|
}
|
|
|
|
const TaskChangesPanel = memo(function TaskChangesPanel({
|
|
selectedDiff,
|
|
onClearSelected,
|
|
}: TaskChangesPanelProps) {
|
|
const [diffViewMode, setDiffViewMode] = useState<'unified' | 'split'>(() =>
|
|
getLocalStorage('task-diff-view-mode', DEFAULT_DIFF_MODE)
|
|
);
|
|
|
|
const { resolvedTheme } = useTheme();
|
|
const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
|
|
const gitStatus = useSessionGitStatus(activeSessionId);
|
|
// Fetch cumulative diff (all commits combined) when no specific file is selected
|
|
const { diff: cumulativeDiff, loading: cumulativeLoading } = useCumulativeDiff(
|
|
selectedDiff ? null : activeSessionId
|
|
);
|
|
|
|
const selectedDiffPath = selectedDiff?.path ?? null;
|
|
// Use provided diff content (from commit or snapshot) or look up from current git status
|
|
const hasProvidedContent = Boolean(selectedDiff?.content);
|
|
|
|
// Convert git status files to array for display (uncommitted changes)
|
|
const uncommittedFiles = useMemo<FileInfo[]>(() => {
|
|
if (!gitStatus?.files || Object.keys(gitStatus.files).length === 0) {
|
|
return [];
|
|
}
|
|
return Object.values(gitStatus.files) as FileInfo[];
|
|
}, [gitStatus]);
|
|
|
|
// Convert cumulative diff files to array (committed changes)
|
|
const committedFiles = useMemo<Array<{ path: string; diff: string; additions: number; deletions: number }>>(() => {
|
|
if (!cumulativeDiff?.files || Object.keys(cumulativeDiff.files).length === 0) {
|
|
return [];
|
|
}
|
|
return Object.entries(cumulativeDiff.files)
|
|
.filter(([, file]) => file.diff) // Only include files with diffs
|
|
.map(([path, file]) => ({
|
|
path,
|
|
diff: file.diff!,
|
|
additions: file.additions ?? 0,
|
|
deletions: file.deletions ?? 0,
|
|
}));
|
|
}, [cumulativeDiff]);
|
|
|
|
const diffModeEnum = diffViewMode === 'split' ? DiffModeEnum.Split : DiffModeEnum.Unified;
|
|
const diffTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
|
|
const selectedFile = selectedDiffPath && gitStatus?.files ? gitStatus.files[selectedDiffPath] : null;
|
|
// Use provided content if available, otherwise fall back to git status
|
|
const selectedDiffContent = selectedDiff?.content ?? selectedFile?.diff ?? '';
|
|
const isSingleDiffSelected = Boolean(selectedDiffPath && (hasProvidedContent || selectedFile));
|
|
|
|
// Helper to get file language from extension
|
|
const getFileLang = (path: string) => {
|
|
const ext = path.split('.').pop() || '';
|
|
const langMap: Record<string, string> = {
|
|
ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx',
|
|
py: 'python', go: 'go', rs: 'rust', java: 'java',
|
|
cpp: 'cpp', c: 'c', css: 'css', html: 'html',
|
|
json: 'json', md: 'markdown', yaml: 'yaml', yml: 'yaml',
|
|
};
|
|
return langMap[ext] || 'plaintext';
|
|
};
|
|
|
|
const hasUncommitted = uncommittedFiles.length > 0;
|
|
const hasCommitted = committedFiles.length > 0;
|
|
const hasAnyChanges = hasUncommitted || hasCommitted;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 h-full">
|
|
{/* Header toolbar */}
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="rounded-full text-xs">
|
|
{selectedDiffPath ?? 'All files'}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
{selectedDiffPath && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs cursor-pointer"
|
|
onClick={onClearSelected}
|
|
>
|
|
Clear
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Show all uncommitted changes</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs cursor-pointer"
|
|
disabled={!isSingleDiffSelected}
|
|
onClick={async () => {
|
|
if (!isSingleDiffSelected) return;
|
|
await navigator.clipboard.writeText(selectedDiffContent);
|
|
}}
|
|
>
|
|
<IconCopy className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Copy diff</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs cursor-pointer"
|
|
disabled={!isSingleDiffSelected}
|
|
>
|
|
<IconArrowBackUp className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Discard changes</TooltipContent>
|
|
</Tooltip>
|
|
<div className="inline-flex rounded-md border border-border overflow-hidden">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
'h-7 px-2 text-xs rounded-none cursor-pointer',
|
|
diffViewMode === 'unified' && 'bg-muted'
|
|
)}
|
|
onClick={() => {
|
|
setDiffViewMode('unified');
|
|
setLocalStorage('task-diff-view-mode', 'unified');
|
|
}}
|
|
>
|
|
<IconLayoutRows className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Unified view</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
'h-7 px-2 text-xs rounded-none cursor-pointer',
|
|
diffViewMode === 'split' && 'bg-muted'
|
|
)}
|
|
onClick={() => {
|
|
setDiffViewMode('split');
|
|
setLocalStorage('task-diff-view-mode', 'split');
|
|
}}
|
|
>
|
|
<IconLayoutColumns className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Split view</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Diff content */}
|
|
<SessionPanelContent>
|
|
{isSingleDiffSelected && selectedDiffContent ? (
|
|
// Render single file diff (from commit, snapshot, or uncommitted)
|
|
// Key includes content length to force re-render when diff updates
|
|
<div key={`selected-${selectedDiffPath}-${selectedDiffContent.length}`} className="space-y-4">
|
|
<DiffView
|
|
data={{
|
|
hunks: parseDiffIntoHunks(selectedDiffContent, selectedDiffPath!),
|
|
oldFile: { fileName: selectedDiffPath!, fileLang: getFileLang(selectedDiffPath!) },
|
|
newFile: { fileName: selectedDiffPath!, fileLang: getFileLang(selectedDiffPath!) },
|
|
}}
|
|
diffViewMode={diffModeEnum}
|
|
diffViewTheme={diffTheme}
|
|
/>
|
|
</div>
|
|
) : cumulativeLoading ? (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
Loading changes...
|
|
</div>
|
|
) : !hasAnyChanges ? (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
No changes
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Uncommitted changes section */}
|
|
{hasUncommitted && (
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Uncommitted ({uncommittedFiles.length})
|
|
</div>
|
|
{uncommittedFiles.map((file) => {
|
|
if (!file.diff) return null;
|
|
const fileLang = getFileLang(file.path);
|
|
// Include diff length in key to force re-render when content changes
|
|
const diffKey = `uncommitted-${file.path}-${file.diff.length}`;
|
|
return (
|
|
<div key={diffKey} className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Badge variant="secondary" className="rounded-full text-xs">
|
|
{file.path}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground">
|
|
<span className="text-emerald-500">+{file.additions}</span>
|
|
{' / '}
|
|
<span className="text-rose-500">-{file.deletions}</span>
|
|
</span>
|
|
</div>
|
|
<DiffView
|
|
data={{
|
|
hunks: parseDiffIntoHunks(file.diff, file.path),
|
|
oldFile: { fileName: file.path, fileLang },
|
|
newFile: { fileName: file.path, fileLang },
|
|
}}
|
|
diffViewMode={diffModeEnum}
|
|
diffViewTheme={diffTheme}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Committed changes section */}
|
|
{hasCommitted && (
|
|
<div className="space-y-4">
|
|
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
|
Committed ({committedFiles.length})
|
|
</div>
|
|
{committedFiles.map((file) => {
|
|
if (!file.diff) return null;
|
|
const fileLang = getFileLang(file.path);
|
|
// Include diff length in key to force re-render when content changes
|
|
const diffKey = `committed-${file.path}-${file.diff.length}`;
|
|
return (
|
|
<div key={diffKey} className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Badge variant="secondary" className="rounded-full text-xs">
|
|
{file.path}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground">
|
|
<span className="text-emerald-500">+{file.additions}</span>
|
|
{' / '}
|
|
<span className="text-rose-500">-{file.deletions}</span>
|
|
</span>
|
|
</div>
|
|
<DiffView
|
|
data={{
|
|
hunks: parseDiffIntoHunks(file.diff, file.path),
|
|
oldFile: { fileName: file.path, fileLang },
|
|
newFile: { fileName: file.path, fileLang },
|
|
}}
|
|
diffViewMode={diffModeEnum}
|
|
diffViewTheme={diffTheme}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</SessionPanelContent>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export { TaskChangesPanel };
|