From e7ecf6cba19b45caad6e26ee27510d6e8d5fada8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Fri, 24 Apr 2026 13:02:42 +0300
Subject: [PATCH] feat: implement sidebar component for database and table
 navigation with filtering support

---
 frontend/src/components/Sidebar.tsx | 37 +++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index f48b39c..110a94e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -9,11 +9,13 @@ const Sidebar: React.FC = () => {
   const [databases, setDatabases] = useState<string[]>([]);
   const [tables, setTables] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
-  const [tablesLoading, setTablesLoading] = useState(false);
+  const [expandedDbs, setExpandedDbs] = useState<string[]>([]);
   
   const [dbSearch, setDbSearch] = useState('');
   const [tableSearch, setTableSearch] = useState('');
 
+  const [tablesLoading, setTablesLoading] = useState(false);
+  
   // Fetch databases on mount
   useEffect(() => {
     const fetchDatabases = async () => {
@@ -51,13 +53,28 @@ const Sidebar: React.FC = () => {
     fetchTables();
   }, [activeDatabase]);
 
+  // Auto-expand when a database is active
+  useEffect(() => {
+    if (activeDatabase && !expandedDbs.includes(activeDatabase)) {
+      setExpandedDbs(prev => [...prev, activeDatabase]);
+    }
+  }, [activeDatabase]);
+
+  const toggleExpansion = (e: React.MouseEvent, db: string) => {
+    e.stopPropagation();
+    setExpandedDbs(prev => 
+      prev.includes(db) ? prev.filter(d => d !== db) : [...prev, db]
+    );
+  };
+
   const handleDatabaseClick = (db: string) => {
-    if (activeDatabase === db) {
-      setActiveDatabase(null);
-      setTableSearch('');
-    } else {
-      setActiveDatabase(db);
-      setTableSearch('');
+    setActiveDatabase(db);
+    setActiveTable(null);
+    setTableSearch('');
+    
+    // Also ensure it's expanded
+    if (!expandedDbs.includes(db)) {
+      setExpandedDbs(prev => [...prev, db]);
     }
   };
 
@@ -113,8 +130,8 @@ const Sidebar: React.FC = () => {
                     selected={activeDatabase === db}
                     sx={{ py: 0.5, px: 1 }}
                   >
-                    <ListItemIcon sx={{ minWidth: 24 }}>
-                      {activeDatabase === db ? <ExpandMore fontSize="small" /> : <ChevronRight fontSize="small" />}
+                    <ListItemIcon sx={{ minWidth: 24, cursor: 'pointer' }} onClick={(e) => toggleExpansion(e, db)}>
+                      {expandedDbs.includes(db) ? <ExpandMore fontSize="small" /> : <ChevronRight fontSize="small" />}
                     </ListItemIcon>
                     <ListItemIcon sx={{ minWidth: 32 }}>
                       <Folder fontSize="small" sx={{ color: activeDatabase === db ? 'primary.main' : 'text.secondary' }} />
@@ -125,7 +142,7 @@ const Sidebar: React.FC = () => {
                   </ListItemButton>
                 </ListItem>
                 
-                {activeDatabase === db && (
+                {expandedDbs.includes(db) && (
                   <Box sx={{ 
                     position: 'relative',
                     ml: 2.5,