diff options
Diffstat (limited to 'frontend/src/components/LeftSidebar.tsx')
| -rw-r--r-- | frontend/src/components/LeftSidebar.tsx | 71 |
1 files changed, 48 insertions, 23 deletions
diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx index fa8b471..1eaa62c 100644 --- a/frontend/src/components/LeftSidebar.tsx +++ b/frontend/src/components/LeftSidebar.tsx @@ -9,7 +9,8 @@ interface LeftSidebarProps { const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => { const [activeTab, setActiveTab] = useState<'project' | 'files' | 'archive'>('project'); - const { archivedNodes, removeFromArchive, createNodeFromArchive } = useFlowStore(); + const { archivedNodes, removeFromArchive, createNodeFromArchive, theme } = useFlowStore(); + const isDark = theme === 'dark'; const handleDragStart = (e: React.DragEvent, archiveId: string) => { e.dataTransfer.setData('archiveId', archiveId); @@ -18,61 +19,79 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => { if (!isOpen) { return ( - <div className="border-r border-gray-200 h-screen bg-white flex flex-col items-center py-4 w-12 z-10 transition-all duration-300"> + <div className={`border-r h-screen flex flex-col items-center py-4 w-12 z-10 transition-all duration-300 ${ + isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white' + }`}> <button onClick={onToggle} - className="p-2 hover:bg-gray-100 rounded mb-4" + className={`p-2 rounded mb-4 ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`} title="Expand" > - <ChevronRight size={20} className="text-gray-500" /> + <ChevronRight size={20} className={isDark ? 'text-gray-400' : 'text-gray-500'} /> </button> {/* Icons when collapsed */} <div className="flex flex-col gap-4"> - <Folder size={20} className={activeTab === 'project' ? "text-blue-500" : "text-gray-400"} /> - <FileText size={20} className={activeTab === 'files' ? "text-blue-500" : "text-gray-400"} /> - <Archive size={20} className={activeTab === 'archive' ? "text-blue-500" : "text-gray-400"} /> + <Folder size={20} className={activeTab === 'project' ? "text-blue-500" : isDark ? "text-gray-500" : "text-gray-400"} /> + <FileText size={20} className={activeTab === 'files' ? "text-blue-500" : isDark ? "text-gray-500" : "text-gray-400"} /> + <Archive size={20} className={activeTab === 'archive' ? "text-blue-500" : isDark ? "text-gray-500" : "text-gray-400"} /> </div> </div> ); } return ( - <div className="w-64 border-r border-gray-200 h-screen flex flex-col bg-white shadow-xl z-10 transition-all duration-300"> + <div className={`w-64 border-r h-screen flex flex-col shadow-xl z-10 transition-all duration-300 ${ + isDark ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white' + }`}> {/* Header */} - <div className="p-3 border-b border-gray-200 flex justify-between items-center bg-gray-50"> - <h2 className="font-bold text-sm text-gray-700 uppercase">Workspace</h2> + <div className={`p-3 border-b flex justify-between items-center ${ + isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-gray-50' + }`}> + <h2 className={`font-bold text-sm uppercase ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>Workspace</h2> <button onClick={onToggle} - className="p-1 hover:bg-gray-200 rounded" + className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`} > - <ChevronLeft size={16} className="text-gray-500" /> + <ChevronLeft size={16} className={isDark ? 'text-gray-400' : 'text-gray-500'} /> </button> </div> {/* Tabs */} - <div className="flex border-b border-gray-200"> + <div className={`flex border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}> <button onClick={() => setActiveTab('project')} - className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${activeTab === 'project' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`} + className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${ + activeTab === 'project' + ? 'border-b-2 border-blue-500 text-blue-500 font-medium' + : isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-50' + }`} > <Folder size={14} /> Project </button> <button onClick={() => setActiveTab('files')} - className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${activeTab === 'files' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`} + className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${ + activeTab === 'files' + ? 'border-b-2 border-blue-500 text-blue-500 font-medium' + : isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-50' + }`} > <FileText size={14} /> Files </button> <button onClick={() => setActiveTab('archive')} - className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${activeTab === 'archive' ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50'}`} + className={`flex-1 p-3 text-xs flex justify-center items-center gap-2 ${ + activeTab === 'archive' + ? 'border-b-2 border-blue-500 text-blue-500 font-medium' + : isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-50' + }`} > <Archive size={14} /> Archive </button> </div> {/* Content Area */} - <div className="flex-1 overflow-y-auto p-4 text-sm text-gray-500"> + <div className={`flex-1 overflow-y-auto p-4 text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}> {activeTab === 'project' && ( <div className="flex flex-col items-center justify-center h-full opacity-50"> <Folder size={48} className="mb-2" /> @@ -97,28 +116,34 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => { </div> ) : ( <> - <p className="text-xs text-gray-400 mb-2">Drag to canvas to create a copy</p> + <p className={`text-xs mb-2 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>Drag to canvas to create a copy</p> {archivedNodes.map((archived) => ( <div key={archived.id} draggable onDragStart={(e) => handleDragStart(e, archived.id)} - className="p-2 bg-gray-50 border border-gray-200 rounded-md cursor-grab hover:bg-gray-100 hover:border-gray-300 transition-colors group" + className={`p-2 border rounded-md cursor-grab transition-colors group ${ + isDark + ? 'bg-gray-700 border-gray-600 hover:bg-gray-600 hover:border-gray-500' + : 'bg-gray-50 border-gray-200 hover:bg-gray-100 hover:border-gray-300' + }`} > <div className="flex items-center justify-between"> <div className="flex items-center gap-2"> - <MessageSquare size={14} className="text-gray-500" /> - <span className="text-sm font-medium truncate max-w-[140px]">{archived.label}</span> + <MessageSquare size={14} className={isDark ? 'text-gray-400' : 'text-gray-500'} /> + <span className={`text-sm font-medium truncate max-w-[140px] ${isDark ? 'text-gray-200' : ''}`}>{archived.label}</span> </div> <button onClick={() => removeFromArchive(archived.id)} - className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-100 rounded text-gray-400 hover:text-red-500 transition-all" + className={`opacity-0 group-hover:opacity-100 p-1 rounded transition-all ${ + isDark ? 'hover:bg-red-900 text-gray-400 hover:text-red-400' : 'hover:bg-red-100 text-gray-400 hover:text-red-500' + }`} title="Remove from archive" > <Trash2 size={12} /> </button> </div> - <div className="text-[10px] text-gray-400 mt-1">{archived.model}</div> + <div className={`text-[10px] mt-1 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>{archived.model}</div> </div> ))} </> |