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,26 +29,37 @@ const Sidebar: React.FC = () => {
     fetchDatabases();
   }, []);
 
-  const handleDatabaseClick = async (db: string) => {
+  // Fetch tables when activeDatabase changes
-    if (activeDatabase === db) {
+  useEffect(() => {
-      setActiveDatabase(null);
+    const fetchTables = async () => {
+      if (!activeDatabase) {
         setTables([]);
-      setTableSearch('');
         return;
       }
       
-    setActiveDatabase(db);
-    setTableSearch('');
       setTablesLoading(true);
       try {
-      const response = await SchemaService.getTables(db);
+        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);
+      setTableSearch('');
+    } else {
+      setActiveDatabase(db);
+      setTableSearch('');
+    }
+  };
 
   const filteredDatabases = useMemo(() => {
     return databases.filter(db => db.toLowerCase().includes(dbSearch.toLowerCase()));

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
       }),
     }
   )