788 lines
25 KiB
TypeScript
788 lines
25 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||
import { AnimatePresence } from "framer-motion";
|
||
import { invoke } from "@tauri-apps/api/core";
|
||
import {
|
||
GitBranch,
|
||
GitCommit,
|
||
GitPullRequest,
|
||
GitMerge,
|
||
X,
|
||
RefreshCw,
|
||
Loader2,
|
||
AlertCircle,
|
||
FileText,
|
||
FilePlus,
|
||
FileX,
|
||
FileDiff,
|
||
Check,
|
||
Folder,
|
||
FolderOpen,
|
||
ChevronRight,
|
||
ChevronDown,
|
||
Maximize2,
|
||
Minimize2
|
||
} from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { cn } from "@/lib/utils";
|
||
import {
|
||
Tabs,
|
||
TabsContent,
|
||
TabsList,
|
||
TabsTrigger,
|
||
} from "@/components/ui/tabs";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import {
|
||
Tooltip,
|
||
TooltipContent,
|
||
TooltipProvider,
|
||
TooltipTrigger,
|
||
} from "@/components/ui/tooltip";
|
||
import { useTranslation } from "@/hooks/useTranslation";
|
||
import DiffViewer from "./DiffViewer";
|
||
|
||
|
||
interface GitFileStatus {
|
||
path: string;
|
||
status: string;
|
||
staged: boolean;
|
||
}
|
||
|
||
interface FileTreeNode {
|
||
name: string;
|
||
path: string;
|
||
type: 'file' | 'directory';
|
||
children?: FileTreeNode[];
|
||
status?: string;
|
||
staged?: boolean;
|
||
expanded?: boolean;
|
||
}
|
||
|
||
interface GitStatus {
|
||
branch: string;
|
||
ahead: number;
|
||
behind: number;
|
||
staged: GitFileStatus[];
|
||
modified: GitFileStatus[];
|
||
untracked: GitFileStatus[];
|
||
conflicted: GitFileStatus[];
|
||
is_clean: boolean;
|
||
remote_url: string | null;
|
||
}
|
||
|
||
interface GitCommit {
|
||
hash: string;
|
||
short_hash: string;
|
||
author: string;
|
||
email: string;
|
||
date: string;
|
||
message: string;
|
||
files_changed: number;
|
||
insertions: number;
|
||
deletions: number;
|
||
}
|
||
|
||
interface GitPanelEnhancedProps {
|
||
projectPath: string;
|
||
isVisible: boolean;
|
||
onToggle: () => void;
|
||
onFileSelect?: (path: string) => void;
|
||
className?: string;
|
||
}
|
||
|
||
// 获取文件状态图标
|
||
const getFileStatusIcon = (status: 'modified' | 'staged' | 'untracked' | 'conflicted') => {
|
||
switch (status) {
|
||
case 'modified':
|
||
return <FileDiff className="h-4 w-4 text-yellow-500" />;
|
||
case 'staged':
|
||
return <Check className="h-4 w-4 text-green-500" />;
|
||
case 'untracked':
|
||
return <FilePlus className="h-4 w-4 text-blue-500" />;
|
||
case 'conflicted':
|
||
return <FileX className="h-4 w-4 text-red-500" />;
|
||
default:
|
||
return <FileText className="h-4 w-4 text-muted-foreground" />;
|
||
}
|
||
};
|
||
|
||
// 获取文件状态标签
|
||
const getFileStatusBadge = (status: string) => {
|
||
switch (status) {
|
||
case 'modified':
|
||
return <Badge variant="outline" className="text-yellow-600 border-yellow-600">M</Badge>;
|
||
case 'added':
|
||
return <Badge variant="outline" className="text-green-600 border-green-600">A</Badge>;
|
||
case 'deleted':
|
||
return <Badge variant="outline" className="text-red-600 border-red-600">D</Badge>;
|
||
case 'renamed':
|
||
return <Badge variant="outline" className="text-blue-600 border-blue-600">R</Badge>;
|
||
case 'untracked':
|
||
return <Badge variant="outline" className="text-gray-600 border-gray-600">U</Badge>;
|
||
case 'conflicted':
|
||
return <Badge variant="outline" className="text-orange-600 border-orange-600">C</Badge>;
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
|
||
projectPath,
|
||
isVisible,
|
||
onToggle,
|
||
onFileSelect,
|
||
className,
|
||
}) => {
|
||
const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
|
||
const [commits, setCommits] = useState<GitCommit[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [activeTab, setActiveTab] = useState("changes");
|
||
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
||
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
||
const [showDiffViewer, setShowDiffViewer] = useState(false);
|
||
const [diffFilePath, setDiffFilePath] = useState<string>("");
|
||
const [diffStaged, setDiffStaged] = useState(false);
|
||
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
const { t } = useTranslation();
|
||
|
||
const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
// 加载 Git 状态
|
||
const loadGitStatus = useCallback(async () => {
|
||
if (!projectPath) return;
|
||
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
const status = await invoke<GitStatus>("get_git_status", {
|
||
path: projectPath, // 修改参数名为 path
|
||
});
|
||
|
||
console.log('[GitPanelEnhanced] Git status loaded:', {
|
||
untracked: status.untracked,
|
||
untrackedCount: status.untracked.length,
|
||
staged: status.staged.length,
|
||
modified: status.modified.length,
|
||
conflicted: status.conflicted.length
|
||
});
|
||
|
||
setGitStatus(status);
|
||
} catch (err) {
|
||
console.error("Failed to load git status:", err);
|
||
setError(err instanceof Error ? err.message : "Failed to load git status");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [projectPath]);
|
||
|
||
// 加载提交历史
|
||
const loadCommits = useCallback(async () => {
|
||
if (!projectPath) return;
|
||
|
||
try {
|
||
const commitList = await invoke<GitCommit[]>("get_git_commits", {
|
||
projectPath: projectPath, // 使用驼峰命名
|
||
limit: 20,
|
||
});
|
||
|
||
setCommits(commitList);
|
||
} catch (err) {
|
||
console.error("Failed to load commits:", err);
|
||
}
|
||
}, [projectPath]);
|
||
|
||
// 自动刷新
|
||
useEffect(() => {
|
||
if (!isVisible) {
|
||
if (refreshIntervalRef.current) {
|
||
clearInterval(refreshIntervalRef.current);
|
||
refreshIntervalRef.current = null;
|
||
}
|
||
return;
|
||
}
|
||
|
||
loadGitStatus();
|
||
loadCommits();
|
||
|
||
// 每5秒刷新一次
|
||
refreshIntervalRef.current = setInterval(() => {
|
||
loadGitStatus();
|
||
if (activeTab === 'history') {
|
||
loadCommits();
|
||
}
|
||
}, 5000);
|
||
|
||
return () => {
|
||
if (refreshIntervalRef.current) {
|
||
clearInterval(refreshIntervalRef.current);
|
||
refreshIntervalRef.current = null;
|
||
}
|
||
};
|
||
}, [isVisible, projectPath, activeTab, loadGitStatus, loadCommits]);
|
||
|
||
// 处理文件点击 - 打开 DiffViewer
|
||
const handleFileClick = (filePath: string, staged: boolean = false) => {
|
||
setDiffFilePath(filePath);
|
||
setDiffStaged(staged);
|
||
setShowDiffViewer(true);
|
||
|
||
// 如果有文件选择回调，也调用它
|
||
if (onFileSelect) {
|
||
const fullPath = `${projectPath}/${filePath}`;
|
||
onFileSelect(fullPath);
|
||
}
|
||
};
|
||
|
||
// 切换节点展开状态
|
||
const toggleExpand = useCallback((path: string) => {
|
||
setExpandedNodes((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(path)) {
|
||
next.delete(path);
|
||
} else {
|
||
next.add(path);
|
||
}
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
// 构建文件树结构（不依赖于 expandedNodes）
|
||
const buildFileTree = (files: GitFileStatus[]): FileTreeNode[] => {
|
||
const root: FileTreeNode = {
|
||
name: 'root',
|
||
path: '',
|
||
type: 'directory',
|
||
children: []
|
||
};
|
||
|
||
files.forEach(file => {
|
||
const parts = file.path.split('/');
|
||
let currentNode = root;
|
||
|
||
// 遍历路径的每个部分，构建树结构
|
||
for (let i = 0; i < parts.length; i++) {
|
||
const part = parts[i];
|
||
const isLastPart = i === parts.length - 1;
|
||
const currentPath = parts.slice(0, i + 1).join('/');
|
||
|
||
if (isLastPart) {
|
||
// 添加文件节点
|
||
if (!currentNode.children) {
|
||
currentNode.children = [];
|
||
}
|
||
currentNode.children.push({
|
||
name: part,
|
||
path: file.path,
|
||
type: 'file',
|
||
status: file.status,
|
||
staged: file.staged
|
||
});
|
||
} else {
|
||
// 查找或创建目录节点
|
||
if (!currentNode.children) {
|
||
currentNode.children = [];
|
||
}
|
||
|
||
let dirNode = currentNode.children.find(
|
||
child => child.type === 'directory' && child.name === part
|
||
);
|
||
|
||
if (!dirNode) {
|
||
dirNode = {
|
||
name: part,
|
||
path: currentPath,
|
||
type: 'directory',
|
||
children: []
|
||
};
|
||
currentNode.children.push(dirNode);
|
||
}
|
||
|
||
currentNode = dirNode;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 排序：目录在前，文件在后，按名称字母顺序
|
||
const sortNodes = (nodes: FileTreeNode[]) => {
|
||
nodes.sort((a, b) => {
|
||
if (a.type === 'directory' && b.type === 'file') return -1;
|
||
if (a.type === 'file' && b.type === 'directory') return 1;
|
||
return a.name.localeCompare(b.name);
|
||
});
|
||
|
||
nodes.forEach(node => {
|
||
if (node.children) {
|
||
sortNodes(node.children);
|
||
}
|
||
});
|
||
};
|
||
|
||
if (root.children) {
|
||
sortNodes(root.children);
|
||
}
|
||
|
||
return root.children || [];
|
||
};
|
||
|
||
// 展开所有节点（从指定节点开始）
|
||
const expandAll = useCallback((startPath?: string) => {
|
||
const nodesToExpand = new Set<string>();
|
||
|
||
const collectNodes = (nodes: FileTreeNode[], parentPath: string = '') => {
|
||
nodes.forEach(node => {
|
||
if (node.type === 'directory') {
|
||
const fullPath = parentPath ? `${parentPath}/${node.name}` : node.name;
|
||
nodesToExpand.add(node.path);
|
||
if (node.children) {
|
||
collectNodes(node.children, fullPath);
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
if (startPath) {
|
||
// 找到指定节点并展开其子节点
|
||
const findAndExpand = (nodes: FileTreeNode[]): boolean => {
|
||
for (const node of nodes) {
|
||
if (node.path === startPath && node.type === 'directory') {
|
||
nodesToExpand.add(node.path);
|
||
if (node.children) {
|
||
collectNodes(node.children, node.path);
|
||
}
|
||
return true;
|
||
}
|
||
if (node.children && findAndExpand(node.children)) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 先构建完整的树
|
||
const allTrees = [];
|
||
if (gitStatus) {
|
||
if (gitStatus.staged.length > 0) allTrees.push(...buildFileTree(gitStatus.staged));
|
||
if (gitStatus.modified.length > 0) allTrees.push(...buildFileTree(gitStatus.modified));
|
||
if (gitStatus.untracked.length > 0) allTrees.push(...buildFileTree(gitStatus.untracked));
|
||
if (gitStatus.conflicted.length > 0) allTrees.push(...buildFileTree(gitStatus.conflicted));
|
||
}
|
||
|
||
findAndExpand(allTrees);
|
||
} else {
|
||
// 展开所有节点
|
||
if (gitStatus) {
|
||
const allTrees = [];
|
||
if (gitStatus.staged.length > 0) allTrees.push(...buildFileTree(gitStatus.staged));
|
||
if (gitStatus.modified.length > 0) allTrees.push(...buildFileTree(gitStatus.modified));
|
||
if (gitStatus.untracked.length > 0) allTrees.push(...buildFileTree(gitStatus.untracked));
|
||
if (gitStatus.conflicted.length > 0) allTrees.push(...buildFileTree(gitStatus.conflicted));
|
||
collectNodes(allTrees);
|
||
}
|
||
}
|
||
|
||
setExpandedNodes(nodesToExpand);
|
||
}, [gitStatus]);
|
||
|
||
// 收起所有节点（从指定节点开始）
|
||
const collapseAll = useCallback((startPath?: string) => {
|
||
if (startPath) {
|
||
const nodesToRemove = new Set<string>();
|
||
|
||
const collectNodes = (nodes: FileTreeNode[]): boolean => {
|
||
for (const node of nodes) {
|
||
if (node.path === startPath && node.type === 'directory') {
|
||
const collectChildren = (n: FileTreeNode) => {
|
||
if (n.type === 'directory') {
|
||
nodesToRemove.add(n.path);
|
||
if (n.children) {
|
||
n.children.forEach(collectChildren);
|
||
}
|
||
}
|
||
};
|
||
collectChildren(node);
|
||
return true;
|
||
}
|
||
if (node.children && collectNodes(node.children)) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 构建完整的树
|
||
const allTrees = [];
|
||
if (gitStatus) {
|
||
if (gitStatus.staged.length > 0) allTrees.push(...buildFileTree(gitStatus.staged));
|
||
if (gitStatus.modified.length > 0) allTrees.push(...buildFileTree(gitStatus.modified));
|
||
if (gitStatus.untracked.length > 0) allTrees.push(...buildFileTree(gitStatus.untracked));
|
||
if (gitStatus.conflicted.length > 0) allTrees.push(...buildFileTree(gitStatus.conflicted));
|
||
}
|
||
|
||
collectNodes(allTrees);
|
||
|
||
setExpandedNodes(prev => {
|
||
const next = new Set(prev);
|
||
nodesToRemove.forEach(path => next.delete(path));
|
||
return next;
|
||
});
|
||
} else {
|
||
setExpandedNodes(new Set());
|
||
}
|
||
}, [gitStatus]);
|
||
|
||
|
||
// 渲染文件树节点（优化深层目录显示）
|
||
const renderFileTreeNode = (node: FileTreeNode, depth = 0, statusType: 'modified' | 'staged' | 'untracked' | 'conflicted') => {
|
||
const isExpanded = node.type === 'directory' && expandedNodes.has(node.path);
|
||
const isDirectory = node.type === 'directory';
|
||
const hasChildren = node.children && node.children.length > 0;
|
||
const isSelected = selectedPath === node.path;
|
||
|
||
return (
|
||
<div key={node.path}>
|
||
<div
|
||
className={cn(
|
||
"flex items-center gap-1 px-2 py-1 hover:bg-accent rounded-sm cursor-pointer group",
|
||
isSelected && "bg-accent"
|
||
)}
|
||
style={{ paddingLeft: `${Math.min(depth * 16 + 8, 200)}px` }} // 限制最大缩进
|
||
onClick={() => {
|
||
setSelectedPath(node.path);
|
||
if (isDirectory) {
|
||
toggleExpand(node.path);
|
||
} else {
|
||
handleFileClick(node.path, statusType === 'staged');
|
||
}
|
||
}}
|
||
>
|
||
{isDirectory && hasChildren && (
|
||
<div className="w-4 h-4 flex items-center justify-center">
|
||
{isExpanded ? (
|
||
<ChevronDown className="h-3 w-3" />
|
||
) : (
|
||
<ChevronRight className="h-3 w-3" />
|
||
)}
|
||
</div>
|
||
)}
|
||
{isDirectory && !hasChildren && (
|
||
<div className="w-4 h-4" /> // 空文件夹的占位符
|
||
)}
|
||
|
||
{isDirectory ? (
|
||
isExpanded ? (
|
||
<FolderOpen className="h-4 w-4 text-blue-500 flex-shrink-0" />
|
||
) : (
|
||
<Folder className="h-4 w-4 text-blue-500 flex-shrink-0" />
|
||
)
|
||
) : (
|
||
<>
|
||
{node.status && getFileStatusBadge(node.status)}
|
||
<FileText className="h-3 w-3 text-muted-foreground flex-shrink-0 ml-1" />
|
||
</>
|
||
)}
|
||
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<span className="text-sm truncate flex-1">
|
||
{node.name}
|
||
</span>
|
||
</TooltipTrigger>
|
||
{(node.name.length > 30 || (!isDirectory && node.path.length > 40)) && (
|
||
<TooltipContent side="right">
|
||
<p className="max-w-xs break-all">{node.path}</p>
|
||
</TooltipContent>
|
||
)}
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
</div>
|
||
|
||
{isDirectory && isExpanded && node.children && (
|
||
<div>
|
||
{node.children.map((child) => renderFileTreeNode(child, depth + 1, statusType))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 渲染文件列表（树形结构）
|
||
const renderFileList = (files: GitFileStatus[], statusType: 'modified' | 'staged' | 'untracked' | 'conflicted') => {
|
||
console.log(`[GitPanelEnhanced] Rendering ${statusType} files:`, files);
|
||
if (files.length === 0) return null;
|
||
|
||
const fileTree = buildFileTree(files);
|
||
console.log(`[GitPanelEnhanced] Built file tree for ${statusType}:`, fileTree);
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-muted-foreground sticky top-0 bg-background z-10">
|
||
{getFileStatusIcon(statusType)}
|
||
<span>
|
||
{statusType === 'modified' && t('app.modified')}
|
||
{statusType === 'staged' && t('app.staged')}
|
||
{statusType === 'untracked' && t('app.untracked')}
|
||
{statusType === 'conflicted' && t('app.conflicted')}
|
||
</span>
|
||
<Badge variant="secondary" className="ml-auto">
|
||
{files.length}
|
||
</Badge>
|
||
</div>
|
||
|
||
<div className="space-y-0.5">
|
||
{fileTree.map((node) => renderFileTreeNode(node, 0, statusType))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 渲染提交历史
|
||
const renderCommitHistory = () => {
|
||
if (commits.length === 0) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||
<GitCommit className="h-8 w-8 mb-2" />
|
||
<p className="text-sm">{t('app.noCommitsFound')}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
{commits.map((commit) => (
|
||
<div
|
||
key={commit.hash}
|
||
className="p-3 border rounded-lg hover:bg-accent/50 transition-colors"
|
||
>
|
||
<div className="flex items-start gap-2">
|
||
<GitCommit className="h-4 w-4 text-muted-foreground mt-0.5" />
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium truncate">
|
||
{commit.message}
|
||
</p>
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<span className="text-xs text-muted-foreground">
|
||
{commit.author}
|
||
</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
{commit.date}
|
||
</span>
|
||
<code className="text-xs bg-muted px-1 py-0.5 rounded">
|
||
{commit.short_hash || commit.hash.substring(0, 7)}
|
||
</code>
|
||
{commit.files_changed > 0 && (
|
||
<span className="text-xs text-muted-foreground">
|
||
{commit.files_changed} {t('app.filesChanged')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 计算变更统计
|
||
const changeStats = gitStatus ? {
|
||
total: gitStatus.staged.length + gitStatus.modified.length + gitStatus.untracked.length + gitStatus.conflicted.length,
|
||
staged: gitStatus.staged.length,
|
||
modified: gitStatus.modified.length,
|
||
untracked: gitStatus.untracked.length,
|
||
conflicted: gitStatus.conflicted.length,
|
||
} : null;
|
||
|
||
return (
|
||
<>
|
||
<AnimatePresence>
|
||
{isVisible && (
|
||
<div
|
||
ref={panelRef}
|
||
className={cn(
|
||
"h-full bg-background border-l border-border",
|
||
"flex flex-col",
|
||
className
|
||
)}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-3 border-b">
|
||
<div className="flex items-center gap-2">
|
||
<GitBranch className="h-4 w-4 text-muted-foreground" />
|
||
<h3 className="font-medium text-sm">{t('app.gitPanel')}</h3>
|
||
{gitStatus && (
|
||
<Badge variant="outline" className="text-xs">
|
||
{gitStatus.branch}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
{/* 展开/收起按钮 */}
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7"
|
||
onClick={() => expandAll(selectedPath || undefined)}
|
||
>
|
||
<Maximize2 className="h-4 w-4" />
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>{selectedPath ? t('app.expandCurrentFolder') : t('app.expandAllFolders')}</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7"
|
||
onClick={() => collapseAll(selectedPath || undefined)}
|
||
>
|
||
<Minimize2 className="h-4 w-4" />
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>{selectedPath ? t('app.collapseCurrentFolder') : t('app.collapseAllFolders')}</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
|
||
{changeStats && changeStats.total > 0 && (
|
||
<Badge variant="destructive" className="text-xs">
|
||
{changeStats.total} {t('app.gitChanges')}
|
||
</Badge>
|
||
)}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={loadGitStatus}
|
||
disabled={loading}
|
||
className="h-7 w-7"
|
||
>
|
||
{loading ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<RefreshCw className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={onToggle}
|
||
className="h-7 w-7"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Branch Info */}
|
||
{gitStatus && (gitStatus.ahead > 0 || gitStatus.behind > 0) && (
|
||
<div className="px-3 py-2 border-b bg-muted/50">
|
||
<div className="flex items-center gap-3 text-xs">
|
||
{gitStatus.ahead > 0 && (
|
||
<div className="flex items-center gap-1">
|
||
<GitPullRequest className="h-3 w-3 text-green-500" />
|
||
<span>{gitStatus.ahead} {t('app.ahead')}</span>
|
||
</div>
|
||
)}
|
||
{gitStatus.behind > 0 && (
|
||
<div className="flex items-center gap-1">
|
||
<GitMerge className="h-3 w-3 text-blue-500" />
|
||
<span>{gitStatus.behind} {t('app.behind')}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Tabs */}
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
|
||
<TabsList className="w-full rounded-none border-b">
|
||
<TabsTrigger value="changes" className="flex-1 gap-2">
|
||
<FileDiff className="h-4 w-4" />
|
||
{t('app.gitChanges')}
|
||
{changeStats && changeStats.total > 0 && (
|
||
<Badge variant="secondary" className="ml-1">
|
||
{changeStats.total}
|
||
</Badge>
|
||
)}
|
||
</TabsTrigger>
|
||
<TabsTrigger value="history" className="flex-1 gap-2">
|
||
<GitCommit className="h-4 w-4" />
|
||
{t('app.gitHistory')}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* Content */}
|
||
{error ? (
|
||
<div className="flex flex-col items-center justify-center flex-1 p-4">
|
||
<AlertCircle className="h-8 w-8 text-destructive mb-2" />
|
||
<p className="text-sm text-center text-muted-foreground">{error}</p>
|
||
</div>
|
||
) : loading && !gitStatus ? (
|
||
<div className="flex items-center justify-center flex-1">
|
||
<Loader2 className="h-6 w-6 animate-spin" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
<TabsContent value="changes" className="flex-1 m-0">
|
||
<ScrollArea className="h-full">
|
||
<div className="p-2 space-y-4">
|
||
{gitStatus && (
|
||
<>
|
||
{console.log('[GitPanelEnhanced] Rendering all file lists with gitStatus:', gitStatus)}
|
||
{renderFileList(gitStatus.staged, 'staged')}
|
||
{renderFileList(gitStatus.modified, 'modified')}
|
||
{renderFileList(gitStatus.untracked, 'untracked')}
|
||
{renderFileList(gitStatus.conflicted, 'conflicted')}
|
||
|
||
{changeStats?.total === 0 && (
|
||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||
<Check className="h-8 w-8 mb-2 text-green-500" />
|
||
<p className="text-sm">{t('app.workingTreeClean')}</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</ScrollArea>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="history" className="flex-1 m-0">
|
||
<ScrollArea className="h-full">
|
||
<div className="p-2">
|
||
{renderCommitHistory()}
|
||
</div>
|
||
</ScrollArea>
|
||
</TabsContent>
|
||
</>
|
||
)}
|
||
</Tabs>
|
||
</div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* Diff Viewer Modal */}
|
||
<DiffViewer
|
||
projectPath={projectPath}
|
||
filePath={diffFilePath}
|
||
staged={diffStaged}
|
||
isVisible={showDiffViewer}
|
||
onClose={() => setShowDiffViewer(false)}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default GitPanelEnhanced; |