mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-16 16:59:33 +00:00
Update GitPanel
This commit is contained in:
simos
@@ -506,189 +506,196 @@ function GitPanel({ selectedProject, isMobile }) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tab Navigation */}
|
{/* Git Repository Not Found Message */}
|
||||||
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
{gitStatus?.error ? (
|
||||||
<button
|
<div className="flex-1 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 px-6 py-12">
|
||||||
onClick={() => setActiveView('changes')}
|
<GitBranch className="w-20 h-20 mb-6 opacity-30" />
|
||||||
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
<h3 className="text-xl font-medium mb-3 text-center">{gitStatus.error}</h3>
|
||||||
activeView === 'changes'
|
{gitStatus.details && (
|
||||||
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
|
<p className="text-sm text-center leading-relaxed mb-6 max-w-md">{gitStatus.details}</p>
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
)}
|
||||||
}`}
|
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 max-w-md">
|
||||||
>
|
<p className="text-sm text-blue-700 dark:text-blue-300 text-center">
|
||||||
<div className="flex items-center justify-center gap-2">
|
<strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded font-mono text-xs">git init</code> in your project directory to initialize git source control.
|
||||||
<FileText className="w-4 h-4" />
|
</p>
|
||||||
<span>Changes</span>
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</div>
|
||||||
<button
|
) : (
|
||||||
onClick={() => setActiveView('history')}
|
|
||||||
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
|
||||||
activeView === 'history'
|
|
||||||
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
|
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<History className="w-4 h-4" />
|
|
||||||
<span>History</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Changes View */}
|
|
||||||
{activeView === 'changes' && (
|
|
||||||
<>
|
<>
|
||||||
{/* Commit Message Input */}
|
{/* Tab Navigation - Only show when git is available */}
|
||||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
<div className="flex border-b border-gray-200 dark:border-gray-700">
|
||||||
<div className="relative">
|
<button
|
||||||
<textarea
|
onClick={() => setActiveView('changes')}
|
||||||
ref={textareaRef}
|
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||||||
value={commitMessage}
|
activeView === 'changes'
|
||||||
onChange={(e) => setCommitMessage(e.target.value)}
|
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
|
||||||
placeholder="Message (Ctrl+Enter to commit)"
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||||
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
|
}`}
|
||||||
rows="3"
|
>
|
||||||
onKeyDown={(e) => {
|
<div className="flex items-center justify-center gap-2">
|
||||||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
<FileText className="w-4 h-4" />
|
||||||
handleCommit();
|
<span>Changes</span>
|
||||||
}
|
</div>
|
||||||
}}
|
</button>
|
||||||
/>
|
<button
|
||||||
<div className="absolute right-2 top-2 flex gap-1">
|
onClick={() => setActiveView('history')}
|
||||||
<button
|
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
|
||||||
onClick={generateCommitMessage}
|
activeView === 'history'
|
||||||
disabled={selectedFiles.size === 0 || isGeneratingMessage}
|
? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
|
||||||
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||||
title="Generate commit message"
|
}`}
|
||||||
>
|
>
|
||||||
{isGeneratingMessage ? (
|
<div className="flex items-center justify-center gap-2">
|
||||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
<History className="w-4 h-4" />
|
||||||
) : (
|
<span>History</span>
|
||||||
<Sparkles className="w-4 h-4" />
|
</div>
|
||||||
)}
|
</button>
|
||||||
</button>
|
</div>
|
||||||
<div style={{ display: 'none' }}>
|
|
||||||
<MicButton
|
{/* Changes View */}
|
||||||
onTranscript={(transcript) => setCommitMessage(transcript)}
|
{activeView === 'changes' && (
|
||||||
mode="default"
|
<>
|
||||||
className="p-1.5"
|
{/* Commit Message Input */}
|
||||||
|
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="relative">
|
||||||
|
<textarea
|
||||||
|
ref={textareaRef}
|
||||||
|
value={commitMessage}
|
||||||
|
onChange={(e) => setCommitMessage(e.target.value)}
|
||||||
|
placeholder="Message (Ctrl+Enter to commit)"
|
||||||
|
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 resize-none pr-20"
|
||||||
|
rows="3"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||||||
|
handleCommit();
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
<div className="absolute right-2 top-2 flex gap-1">
|
||||||
|
<button
|
||||||
|
onClick={generateCommitMessage}
|
||||||
|
disabled={selectedFiles.size === 0 || isGeneratingMessage}
|
||||||
|
className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
title="Generate commit message"
|
||||||
|
>
|
||||||
|
{isGeneratingMessage ? (
|
||||||
|
<RefreshCw className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<div style={{ display: 'none' }}>
|
||||||
|
<MicButton
|
||||||
|
onTranscript={(transcript) => setCommitMessage(transcript)}
|
||||||
|
mode="default"
|
||||||
|
className="p-1.5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={handleCommit}
|
||||||
|
disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
|
||||||
|
className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
|
||||||
|
>
|
||||||
|
<Check className="w-3 h-3" />
|
||||||
|
<span>{isCommitting ? 'Committing...' : 'Commit'}</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
<div className="flex items-center justify-between mt-2">
|
)}
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{selectedFiles.size} file{selectedFiles.size !== 1 ? 's' : ''} selected
|
{/* File Selection Controls - Only show in changes view and when git is working */}
|
||||||
|
{activeView === 'changes' && gitStatus && !gitStatus.error && (
|
||||||
|
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||||
|
<span className="text-xs text-gray-600 dark:text-gray-400">
|
||||||
|
{selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
|
||||||
</span>
|
</span>
|
||||||
<button
|
<div className="flex gap-2">
|
||||||
onClick={handleCommit}
|
<button
|
||||||
disabled={!commitMessage.trim() || selectedFiles.size === 0 || isCommitting}
|
onClick={() => {
|
||||||
className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
|
const allFiles = new Set([
|
||||||
>
|
...(gitStatus?.modified || []),
|
||||||
<Check className="w-3 h-3" />
|
...(gitStatus?.added || []),
|
||||||
<span>{isCommitting ? 'Committing...' : 'Commit'}</span>
|
...(gitStatus?.deleted || []),
|
||||||
</button>
|
...(gitStatus?.untracked || [])
|
||||||
|
]);
|
||||||
|
setSelectedFiles(allFiles);
|
||||||
|
}}
|
||||||
|
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
|
||||||
|
>
|
||||||
|
Select All
|
||||||
|
</button>
|
||||||
|
<span className="text-gray-300 dark:text-gray-600">|</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedFiles(new Set())}
|
||||||
|
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
|
||||||
|
>
|
||||||
|
Deselect All
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
|
{/* Status Legend Toggle */}
|
||||||
|
{!gitStatus?.error && (
|
||||||
|
<div className="border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowLegend(!showLegend)}
|
||||||
|
className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
|
||||||
|
>
|
||||||
|
<Info className="w-3 h-3" />
|
||||||
|
<span>File Status Guide</span>
|
||||||
|
{showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showLegend && (
|
||||||
|
<div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
|
||||||
|
<div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
|
||||||
|
M
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400 italic">Added</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
|
||||||
|
D
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
|
||||||
|
U
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* File Selection Controls - Only show in changes view and when git is working */}
|
{/* File List - Changes View - Only show when git is available */}
|
||||||
{activeView === 'changes' && gitStatus && !gitStatus.error && (
|
{activeView === 'changes' && !gitStatus?.error && (
|
||||||
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
|
||||||
<span className="text-xs text-gray-600 dark:text-gray-400">
|
|
||||||
{selectedFiles.size} of {(gitStatus?.modified?.length || 0) + (gitStatus?.added?.length || 0) + (gitStatus?.deleted?.length || 0) + (gitStatus?.untracked?.length || 0)} files selected
|
|
||||||
</span>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
const allFiles = new Set([
|
|
||||||
...(gitStatus?.modified || []),
|
|
||||||
...(gitStatus?.added || []),
|
|
||||||
...(gitStatus?.deleted || []),
|
|
||||||
...(gitStatus?.untracked || [])
|
|
||||||
]);
|
|
||||||
setSelectedFiles(allFiles);
|
|
||||||
}}
|
|
||||||
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
|
|
||||||
>
|
|
||||||
Select All
|
|
||||||
</button>
|
|
||||||
<span className="text-gray-300 dark:text-gray-600">|</span>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedFiles(new Set())}
|
|
||||||
className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
|
|
||||||
>
|
|
||||||
Deselect All
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Status Legend Toggle */}
|
|
||||||
<div className="border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<button
|
|
||||||
onClick={() => setShowLegend(!showLegend)}
|
|
||||||
className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-750 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-center gap-1"
|
|
||||||
>
|
|
||||||
<Info className="w-3 h-3" />
|
|
||||||
<span>File Status Guide</span>
|
|
||||||
{showLegend ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{showLegend && (
|
|
||||||
<div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-xs">
|
|
||||||
<div className={`${isMobile ? 'grid grid-cols-2 gap-3 justify-items-center' : 'flex justify-center gap-6'}`}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded border border-yellow-200 dark:border-yellow-800 font-bold text-xs">
|
|
||||||
M
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400 italic">Modified</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded border border-green-200 dark:border-green-800 font-bold text-xs">
|
|
||||||
A
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400 italic">Added</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded border border-red-200 dark:border-red-800 font-bold text-xs">
|
|
||||||
D
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400 italic">Deleted</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="inline-flex items-center justify-center w-5 h-5 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded border border-gray-300 dark:border-gray-600 font-bold text-xs">
|
|
||||||
U
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-600 dark:text-gray-400 italic">Untracked</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* File List - Changes View */}
|
|
||||||
{activeView === 'changes' && (
|
|
||||||
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
|
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center h-32">
|
<div className="flex items-center justify-center h-32">
|
||||||
<RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
|
<RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
|
||||||
</div>
|
</div>
|
||||||
) : gitStatus?.error ? (
|
|
||||||
<div className="flex flex-col items-center justify-center h-48 text-gray-500 dark:text-gray-400 px-6">
|
|
||||||
<GitBranch className="w-16 h-16 mb-4 opacity-30" />
|
|
||||||
<p className="text-lg font-medium mb-2 text-center">{gitStatus.error}</p>
|
|
||||||
{gitStatus.details && (
|
|
||||||
<p className="text-sm text-center leading-relaxed">{gitStatus.details}</p>
|
|
||||||
)}
|
|
||||||
<div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
||||||
<p className="text-xs text-blue-700 dark:text-blue-300 text-center">
|
|
||||||
<strong>Tip:</strong> Run <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">git init</code> in your project directory to initialize git source control.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
|
) : !gitStatus || (!gitStatus.modified?.length && !gitStatus.added?.length && !gitStatus.deleted?.length && !gitStatus.untracked?.length) ? (
|
||||||
<div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
|
<div className="flex flex-col items-center justify-center h-32 text-gray-500 dark:text-gray-400">
|
||||||
<GitCommit className="w-12 h-12 mb-2 opacity-50" />
|
<GitCommit className="w-12 h-12 mb-2 opacity-50" />
|
||||||
@@ -705,8 +712,8 @@ function GitPanel({ selectedProject, isMobile }) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* History View */}
|
{/* History View - Only show when git is available */}
|
||||||
{activeView === 'history' && (
|
{activeView === 'history' && !gitStatus?.error && (
|
||||||
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
|
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center h-32">
|
<div className="flex items-center justify-center h-32">
|
||||||
|
|||||||
Reference in New Issue
Block a user