feat: implement database and table explorer sidebar with persistent app state management

frontend/src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ const Sidebar: React.FC = () => {
   const [dbSearch, setDbSearch] = useState('');
   const [tableSearch, setTableSearch] = useState('');
 
+  // Fetch databases on mount
   useEffect(() => {
     const fetchDatabases = async () => {
       try {
@@ -28,24 +29,35 @@ const Sidebar: React.FC = () => {
     fetchDatabases();
   }, []);
 
-  const handleDatabaseClick = async (db: string) => {
+  // Fetch tables when activeDatabase changes
+  useEffect(() => {
+    const fetchTables = async () => {
+      if (!activeDatabase) {
+        setTables([]);
+        return;
+      }
+      
+      setTablesLoading(true);
+      try {
+        const response = await SchemaService.getTables(activeDatabase);
+        setTables(response.data);
+      } catch (error) {
+        console.error('Failed to fetch tables', error);
+        setTables([]);
+      } finally {
+        setTablesLoading(false);
+      }
+    };
+    fetchTables();
+  }, [activeDatabase]);
+
+  const handleDatabaseClick = (db: string) => {
     if (activeDatabase === db) {
       setActiveDatabase(null);
-      setTables([]);
       setTableSearch('');
-      return;
-    }
-    
-    setActiveDatabase(db);
-    setTableSearch('');
-    setTablesLoading(true);
-    try {
-      const response = await SchemaService.getTables(db);
-      setTables(response.data);
-    } catch (error) {
-      console.error('Failed to fetch tables', error);
-    } finally {
-      setTablesLoading(false);
+    } else {
+      setActiveDatabase(db);
+      setTableSearch('');
     }
   };