Skip to content

Commit 3decfd2

Browse files
committed
feat: improved git UI
1 parent 8a6e39b commit 3decfd2

File tree

15 files changed

+1198
-96
lines changed

15 files changed

+1198
-96
lines changed
-34 Bytes
Binary file not shown.
-79 Bytes
Binary file not shown.
4.15 KB
Binary file not shown.

frontend/.yarn/install-state.gz

12.7 KB
Binary file not shown.

frontend/components/FileExplorer/FileExplorer.tsx

Lines changed: 75 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { useState } from 'react';
44
import { FileText, Plus, Trash2, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react';
55
import { useIDEStore, File } from '@/store/ide-store';
6+
import { GitPanel } from '@/components/Git/GitPanel';
67
import { clsx } from 'clsx';
78

89
export const FileExplorer: React.FC = () => {
@@ -50,78 +51,86 @@ __blueprint__ = ${newFileName.replace('.py', '').replace(/[^a-zA-Z]/g, '')}`,
5051
};
5152

5253
return (
53-
<div className="h-full bg-gray-900 text-gray-100 p-4">
54-
<div className="mb-4">
55-
<div className="flex items-center justify-between mb-2">
56-
<button
57-
onClick={() => setIsExpanded(!isExpanded)}
58-
className="flex items-center gap-2 hover:text-blue-400 transition-colors"
59-
>
60-
{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
61-
<FolderOpen size={16} />
62-
<span className="text-sm font-medium">Contracts</span>
63-
</button>
64-
<button
65-
onClick={() => setShowNewFileInput(true)}
66-
className="p-1 hover:bg-gray-800 rounded transition-colors"
67-
title="New File"
68-
>
69-
<Plus size={16} />
70-
</button>
54+
<div className="h-full bg-gray-900 text-gray-100 flex flex-col">
55+
{/* Files Section */}
56+
<div className="flex-1 p-4 min-h-0">
57+
<div className="mb-4">
58+
<div className="flex items-center justify-between mb-2">
59+
<button
60+
onClick={() => setIsExpanded(!isExpanded)}
61+
className="flex items-center gap-2 hover:text-blue-400 transition-colors"
62+
>
63+
{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
64+
<FolderOpen size={16} />
65+
<span className="text-sm font-medium">Contracts</span>
66+
</button>
67+
<button
68+
onClick={() => setShowNewFileInput(true)}
69+
className="p-1 hover:bg-gray-800 rounded transition-colors"
70+
title="New File"
71+
>
72+
<Plus size={16} />
73+
</button>
74+
</div>
75+
76+
{showNewFileInput && (
77+
<div className="mb-2">
78+
<input
79+
type="text"
80+
value={newFileName}
81+
onChange={(e) => setNewFileName(e.target.value)}
82+
onKeyDown={(e) => {
83+
if (e.key === 'Enter') handleNewFile();
84+
if (e.key === 'Escape') {
85+
setShowNewFileInput(false);
86+
setNewFileName('');
87+
}
88+
}}
89+
onBlur={handleNewFile}
90+
placeholder="filename.py"
91+
className="w-full px-2 py-1 text-sm bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-blue-500"
92+
autoFocus
93+
/>
94+
</div>
95+
)}
7196
</div>
7297

73-
{showNewFileInput && (
74-
<div className="mb-2">
75-
<input
76-
type="text"
77-
value={newFileName}
78-
onChange={(e) => setNewFileName(e.target.value)}
79-
onKeyDown={(e) => {
80-
if (e.key === 'Enter') handleNewFile();
81-
if (e.key === 'Escape') {
82-
setShowNewFileInput(false);
83-
setNewFileName('');
84-
}
85-
}}
86-
onBlur={handleNewFile}
87-
placeholder="filename.py"
88-
className="w-full px-2 py-1 text-sm bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-blue-500"
89-
autoFocus
90-
/>
98+
{isExpanded && (
99+
<div className="space-y-1 overflow-y-auto">
100+
{files.map((file: File) => (
101+
<div
102+
key={file.id}
103+
onClick={() => setActiveFile(file.id)}
104+
className={clsx(
105+
'flex items-center justify-between px-2 py-1 rounded cursor-pointer transition-colors group',
106+
activeFileId === file.id
107+
? 'bg-blue-600 text-white'
108+
: 'hover:bg-gray-800'
109+
)}
110+
>
111+
<div className="flex items-center gap-2">
112+
<FileText size={14} />
113+
<span className="text-sm">{file.name}</span>
114+
</div>
115+
{files.length > 1 && (
116+
<button
117+
onClick={(e) => handleDeleteFile(e, file.id)}
118+
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-700 rounded transition-all"
119+
title="Delete File"
120+
>
121+
<Trash2 size={14} />
122+
</button>
123+
)}
124+
</div>
125+
))}
91126
</div>
92127
)}
93128
</div>
94129

95-
{isExpanded && (
96-
<div className="space-y-1">
97-
{files.map((file: File) => (
98-
<div
99-
key={file.id}
100-
onClick={() => setActiveFile(file.id)}
101-
className={clsx(
102-
'flex items-center justify-between px-2 py-1 rounded cursor-pointer transition-colors group',
103-
activeFileId === file.id
104-
? 'bg-blue-600 text-white'
105-
: 'hover:bg-gray-800'
106-
)}
107-
>
108-
<div className="flex items-center gap-2">
109-
<FileText size={14} />
110-
<span className="text-sm">{file.name}</span>
111-
</div>
112-
{files.length > 1 && (
113-
<button
114-
onClick={(e) => handleDeleteFile(e, file.id)}
115-
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-700 rounded transition-all"
116-
title="Delete File"
117-
>
118-
<Trash2 size={14} />
119-
</button>
120-
)}
121-
</div>
122-
))}
123-
</div>
124-
)}
130+
{/* Git Section */}
131+
<div className="flex-1 min-h-0">
132+
<GitPanel />
133+
</div>
125134
</div>
126135
);
127136
};

0 commit comments

Comments
 (0)