33import React , { useState } from 'react' ;
44import { FileText , Plus , Trash2 , FolderOpen , ChevronRight , ChevronDown } from 'lucide-react' ;
55import { useIDEStore , File } from '@/store/ide-store' ;
6+ import { GitPanel } from '@/components/Git/GitPanel' ;
67import { clsx } from 'clsx' ;
78
89export 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