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;
+    } else {
-    }
+      setActiveDatabase(db);
-    
+      setTableSearch('');
-    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);
     }
   };
 

frontend/src/store/useAppStore.ts

@@ -43,11 +43,14 @@ export const useAppStore = create<AppState>()(
     {
       name: 'mariavel-storage',
       storage: createJSONStorage(() => localStorage),
-      // Only persist connection and connected status
+      // Persist crucial session state
       partialize: (state) => ({ 
         connection: state.connection, 
         connected: state.connected,
-        darkMode: state.darkMode 
+        darkMode: state.darkMode,
+        activeDatabase: state.activeDatabase,
+        activeTable: state.activeTable,
+        activeTab: state.activeTab
       }),
     }
   )