feat: initialize backend database service architecture and implement frontend schema explorer components

2026-04-24 07:31:24 +03:00
parent ce67df1067
commit bf3d05ea97
13 changed files with 366 additions and 71 deletions
@@ -24,6 +24,11 @@ interface DatabaseDriverInterface
     */
    public function getTableData(string $table, int $limit = 100, int $offset = 0): array;

+    /**
+     * Get the count of rows in a table.
+     */
+    public function getTableCount(string $table): int;
+
    /**
     * Get the underlying connection instance.
     */
@@ -65,9 +65,21 @@ class SchemaController extends Controller
    {
        try {
            $this->initializeDriver($request);
-            $limit = $request->get('limit', 100);
-            $offset = $request->get('offset', 0);
-            return Response::json($this->databaseService->getTableData($table, $limit, $offset));
+            
+            $skip = $request->get('skip', 0);
+            $take = $request->get('take', 100);
+            
+            $data = $this->databaseService->getTableData($table, $take, $skip);
+            
+            $response = [
+                'data' => $data,
+            ];
+
+            if ($request->get('requireTotalCount') === 'true') {
+                $response['totalCount'] = $this->databaseService->getTableCount($table);
+            }
+
+            return Response::json($response);
        } catch (\Exception $e) {
            return Response::json(['error' => $e->getMessage()], 400);
        }
@@ -69,6 +69,12 @@ class MySqlDriver implements DatabaseDriverInterface, SchemaDiscoveryInterface
        return $this->query("SELECT * FROM `{$table}` LIMIT ? OFFSET ?", [$limit, $offset]);
    }

+    public function getTableCount(string $table): int
+    {
+        $result = $this->query("SELECT COUNT(*) as count FROM `{$table}`");
+        return (int) ($result[0]->count ?? 0);
+    }
+
    public function getForeignKeys(string $table): array
    {
        $sql = "
@@ -82,4 +82,12 @@ class DatabaseService
    {
        return $this->getDriver()->getTableData($table, $limit, $offset);
    }
+
+    /**
+     * Get table row count.
+     */
+    public function getTableCount(string $table): int
+    {
+        return $this->getDriver()->getTableCount($table);
+    }
 }
@@ -6,9 +6,10 @@ import Sidebar from './components/Sidebar.tsx';
 import MainContent from './components/MainContent.tsx';
 import Header from './components/Header.tsx';
 import Login from './components/Login.tsx';
+import NavigationRail from './components/NavigationRail.tsx';

 const App: React.FC = () => {
-  const { darkMode, connected } = useAppStore();
+  const { darkMode, connected, activeTab, setActiveTab } = useAppStore();
  const theme = useMemo(() => getTheme(darkMode ? 'dark' : 'light'), [darkMode]);

  useEffect(() => {
@@ -32,7 +33,8 @@ const App: React.FC = () => {
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
-        <Sidebar />
+        <NavigationRail activeTab={activeTab} onTabChange={setActiveTab} />
+        {activeTab === 'explorer' && <Sidebar />}
        <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
          <Header />
          <MainContent />
@@ -7,9 +7,19 @@ const Header: React.FC = () => {
  const { darkMode, toggleDarkMode } = useAppStore();

  return (
-    <AppBar position="static" color="transparent" elevation={0} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+    <AppBar 
+      position="static" 
+      elevation={0} 
+      sx={{ 
+        borderBottom: 1, 
+        borderColor: 'divider',
+        bgcolor: darkMode ? 'rgba(16, 24, 48, 0.95)' : 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        zIndex: (theme) => theme.zIndex.drawer + 1
+      }}
+    >
      <Toolbar>
-        <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700, color: 'primary.main' }}>
+        <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 800, color: 'primary.main', letterSpacing: -1 }}>
          MARIAVEL
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { Box, Paper, Typography, CircularProgress } from '@mui/material';
 import DataGrid, { 
  Column, 
@@ -10,40 +10,65 @@ import DataGrid, {
  Export
 } from 'devextreme-react/data-grid';
 import { useAppStore } from '../store/useAppStore';
-import { SchemaService } from '../services/api';
+import api, { SchemaService } from '../services/api';
+
+import CustomStore from 'devextreme/data/custom_store';

 const MainContent: React.FC = () => {
  const { activeTable, activeDatabase } = useAppStore();
-  const [data, setData] = useState<any[]>([]);
  const [columns, setColumns] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loadingSchema, setLoadingSchema] = useState(false);
+
+  // Define data source with CustomStore for Remote Operations
+  const dataSource = useMemo(() => {
+    if (!activeTable || !activeDatabase) return null;
+
+    return new CustomStore({
+      key: 'id', // Ideally this should be the primary key from schema
+      load: async (loadOptions: any) => {
+        try {
+          const params = {
+            skip: loadOptions.skip || 0,
+            take: loadOptions.take || 100,
+            requireTotalCount: loadOptions.requireTotalCount,
+            database: activeDatabase,
+          };
+
+          const response = await SchemaService.getTableData(activeTable, params);
+
+          return {
+            data: response.data.data,
+            totalCount: response.data.totalCount,
+          };
+        } catch (error) {
+          console.error('Data loading error', error);
+          throw 'Data Loading Error';
+        }
+      }
+    });
+  }, [activeTable, activeDatabase]);

  useEffect(() => {
-    const fetchTableData = async () => {
+    const fetchSchema = async () => {
      if (!activeTable || !activeDatabase) return;
      
-      setLoading(true);
+      setLoadingSchema(true);
      try {
-        // Fetch schema for columns
-        const schemaRes = await SchemaService.getTableSchema(activeTable);
+        const schemaRes = await SchemaService.getTableSchema(activeTable, activeDatabase);
        const cols = schemaRes.data.map((col: any) => ({
          dataField: col.Field,
          caption: col.Field,
          dataType: mapSqlTypeToDxType(col.Type)
        }));
        setColumns(cols);
-
-        // Fetch actual data
-        const dataRes = await SchemaService.getTableData(activeTable, activeDatabase);
-        setData(dataRes.data);
      } catch (error) {
-        console.error('Failed to fetch table data', error);
+        console.error('Failed to fetch table schema', error);
      } finally {
-        setLoading(false);
+        setLoadingSchema(false);
      }
    };

-    fetchTableData();
+    fetchSchema();
  }, [activeTable, activeDatabase]);

  // Helper to map SQL types to DevExtreme types
@@ -72,13 +97,14 @@ const MainContent: React.FC = () => {
      </Box>
      
      <Paper sx={{ height: 'calc(100vh - 180px)', borderRadius: 2, overflow: 'hidden' }}>
-        {loading ? (
+        {loadingSchema ? (
          <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
            <CircularProgress />
          </Box>
        ) : (
          <DataGrid
-            dataSource={data}
+            dataSource={dataSource}
+            remoteOperations={true}
            showBorders={true}
            focusedRowEnabled={true}
            columnAutoWidth={true}
@@ -86,7 +112,7 @@ const MainContent: React.FC = () => {
            rowAlternationEnabled={true}
            height="100%"
          >
-            <Scrolling mode="virtual" />
+            <Scrolling mode="virtual" rowRenderingMode="virtual" />
            <FilterRow visible={true} />
            <HeaderFilter visible={true} />
            <SearchPanel visible={true} width={240} placeholder="Search..." />
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, Tooltip, IconButton, Stack } from '@mui/material';
+import { 
+  Storage, 
+  Terminal, 
+  FileUpload, 
+  Settings, 
+  History 
+} from '@mui/icons-material';
+
+interface NavigationRailProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+
+const NavigationRail: React.FC<NavigationRailProps> = ({ activeTab, onTabChange }) => {
+  const tabs = [
+    { id: 'explorer', icon: <Storage />, label: 'Explorer' },
+    { id: 'sql', icon: <Terminal />, label: 'SQL Editor' },
+    { id: 'transfer', icon: <FileUpload />, label: 'Import/Export' },
+    { id: 'history', icon: <History />, label: 'Query History' },
+  ];
+
+  return (
+    <Box sx={{ 
+      width: 60, 
+      height: '100vh', 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      py: 2, 
+      bgcolor: 'rgba(0,0,0,0.1)',
+      borderRight: 1, 
+      borderColor: 'divider' 
+    }}>
+      <Stack spacing={2}>
+        {tabs.map((tab) => (
+          <Tooltip key={tab.id} title={tab.label} placement="right">
+            <IconButton 
+              onClick={() => onTabChange(tab.id)}
+              sx={{ 
+                color: activeTab === tab.id ? 'primary.main' : 'text.secondary',
+                bgcolor: activeTab === tab.id ? 'rgba(0, 97, 255, 0.1)' : 'transparent',
+                borderRadius: 2,
+                '&:hover': { bgcolor: 'rgba(0, 97, 255, 0.05)' }
+              }}
+            >
+              {tab.icon}
+            </IconButton>
+          </Tooltip>
+        ))}
+      </Stack>
+      
+      <Box sx={{ mt: 'auto' }}>
+        <Tooltip title="Settings" placement="right">
+          <IconButton sx={{ color: 'text.secondary' }}>
+            <Settings />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Box>
+  );
+};
+
+export default NavigationRail;
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress } from '@mui/material';
-import { Storage } from '@mui/icons-material';
+import React, { useEffect, useState, useMemo } from 'react';
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress, Stack, TextField, InputAdornment } from '@mui/material';
+import { Storage, Search, FilterList, ChevronRight, ExpandMore, TableChart, Folder } from '@mui/icons-material';
 import { useAppStore } from '../store/useAppStore';
 import { SchemaService } from '../services/api';

@@ -11,6 +11,9 @@ const Sidebar: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [tablesLoading, setTablesLoading] = useState(false);
  
+  const [dbSearch, setDbSearch] = useState('');
+  const [tableSearch, setTableSearch] = useState('');
+
  useEffect(() => {
    const fetchDatabases = async () => {
      try {
@@ -29,10 +32,12 @@ const Sidebar: React.FC = () => {
    if (activeDatabase === db) {
      setActiveDatabase(null);
      setTables([]);
+      setTableSearch('');
      return;
    }
    
    setActiveDatabase(db);
+    setTableSearch('');
    setTablesLoading(true);
    try {
      const response = await SchemaService.getTables(db);
@@ -44,12 +49,43 @@ const Sidebar: React.FC = () => {
    }
  };

+  const filteredDatabases = useMemo(() => {
+    return databases.filter(db => db.toLowerCase().includes(dbSearch.toLowerCase()));
+  }, [databases, dbSearch]);
+
+  const filteredTables = useMemo(() => {
+    return tables.filter(table => table.toLowerCase().includes(tableSearch.toLowerCase()));
+  }, [tables, tableSearch]);
+
  return (
-    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
-      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Storage color="primary" />
-        <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>Explorer</Typography>
+    <Box sx={{ width: 280, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper', zIndex: 10 }}>
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <Storage color="primary" sx={{ fontSize: 24 }} />
+        <Typography variant="h6" sx={{ fontWeight: 800, fontSize: '1.1rem' }}>Explorer</Typography>
      </Box>
+      
+      <Box sx={{ px: 2, pb: 1 }}>
+        <TextField
+          placeholder="Search Databases..."
+          size="small"
+          fullWidth
+          value={dbSearch}
+          onChange={(e) => setDbSearch(e.target.value)}
+          sx={{ 
+            '& .MuiOutlinedInput-root': {
+              borderRadius: 2,
+              bgcolor: 'rgba(0,0,0,0.03)',
+              fontSize: '0.8rem'
+            }
+          }}
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start"><Search sx={{ fontSize: 18, color: 'text.secondary' }} /></InputAdornment>,
+            }
+          }}
+        />
+      </Box>
+      
      <Divider />
      
      <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
@@ -57,43 +93,98 @@ const Sidebar: React.FC = () => {
          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={24} /></Box>
        ) : (
          <List dense sx={{ p: 0 }}>
-            {databases.map((db) => (
+            {filteredDatabases.map((db) => (
              <React.Fragment key={db}>
                <ListItem disablePadding>
                  <ListItemButton 
                    onClick={() => handleDatabaseClick(db)}
                    selected={activeDatabase === db}
-                    sx={{ py: 1 }}
+                    sx={{ py: 0.5, px: 1 }}
                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <Storage fontSize="small" color={activeDatabase === db ? 'primary' : 'inherit'} />
+                    <ListItemIcon sx={{ minWidth: 24 }}>
+                      {activeDatabase === db ? <ExpandMore fontSize="small" /> : <ChevronRight fontSize="small" />}
+                    </ListItemIcon>
+                    <ListItemIcon sx={{ minWidth: 32 }}>
+                      <Folder fontSize="small" sx={{ color: activeDatabase === db ? 'primary.main' : 'text.secondary' }} />
                    </ListItemIcon>
                    <ListItemText 
-                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}>{db}</Typography>} 
+                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400, fontSize: '0.85rem' }}>{db}</Typography>} 
                    />
                  </ListItemButton>
                </ListItem>
                
                {activeDatabase === db && (
-                  <List dense sx={{ pl: 4, bgcolor: 'rgba(0,0,0,0.02)' }}>
+                  <Box sx={{ 
+                    position: 'relative',
+                    ml: 2.5,
+                    borderLeft: '1px solid rgba(255,255,255,0.05)',
+                    bgcolor: 'rgba(0,0,0,0.02)', 
+                    pb: 1 
+                  }}>
+                    <Box sx={{ px: 2, py: 1 }}>
+                      <TextField
+                        placeholder="Filter Tables..."
+                        size="small"
+                        fullWidth
+                        autoFocus
+                        value={tableSearch}
+                        onChange={(e) => setTableSearch(e.target.value)}
+                        sx={{
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 1,
+                            bgcolor: 'background.paper',
+                            fontSize: '0.7rem',
+                            height: 28
+                          }
+                        }}
+                        slotProps={{
+                          input: {
+                            startAdornment: <InputAdornment position="start"><FilterList sx={{ fontSize: 14, color: 'text.secondary' }} /></InputAdornment>,
+                          }
+                        }}
+                      />
+                    </Box>
+                    <List dense sx={{ p: 0 }}>
                      {tablesLoading ? (
-                      <ListItem><CircularProgress size={16} /></ListItem>
-                    ) : tables.length === 0 ? (
-                      <ListItem><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
-                    ) : tables.map((table) => (
+                        <ListItem sx={{ pl: 4 }}><CircularProgress size={14} /></ListItem>
+                      ) : filteredTables.length === 0 ? (
+                        <ListItem sx={{ pl: 4 }}><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
+                      ) : filteredTables.map((table) => (
                        <ListItem key={table} disablePadding>
                          <ListItemButton 
                            selected={activeTable === table}
                            onClick={() => setActiveTable(table)}
-                          sx={{ py: 0.5 }}
+                            sx={{ 
+                              py: 0.4,
+                              px: 2,
+                              borderRadius: '4px',
+                              mx: 0.5,
+                              mb: 0.1,
+                              '&.Mui-selected': {
+                                bgcolor: 'primary.main',
+                                color: 'white',
+                                '&:hover': { bgcolor: 'primary.dark' }
+                              }
+                            }}
                          >
+                            <ListItemIcon sx={{ minWidth: 28 }}>
+                              <TableChart sx={{ fontSize: 16, opacity: 0.7 }} />
+                            </ListItemIcon>
                            <ListItemText 
-                            primary={<Typography variant="caption" sx={{ fontWeight: activeTable === table ? 600 : 400 }}>{table}</Typography>} 
+                              primary={
+                                <Typography variant="body2" sx={{ 
+                                  fontWeight: activeTable === table ? 600 : 400,
+                                  fontSize: '0.8rem' 
+                                }}>
+                                  {table}
+                                </Typography>
+                              } 
                            />
                          </ListItemButton>
                        </ListItem>
                      ))}
                    </List>
+                  </Box>
                )}
              </React.Fragment>
            ))}
@@ -101,10 +192,13 @@ const Sidebar: React.FC = () => {
        )}
      </Box>
      <Divider />
-      <Box sx={{ p: 2 }}>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          Connected to: 127.0.0.1
+      <Box sx={{ p: 1.5, bgcolor: 'rgba(0,0,0,0.03)' }}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'success.main' }} />
+          <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, fontSize: '0.7rem' }}>
+            Connected: 127.0.0.1
          </Typography>
+        </Stack>
      </Box>
    </Box>
  );
@@ -4,15 +4,24 @@
  --primary-color: #0061ff;
  --secondary-color: #ff8c00;
  --bg-light: #f8f9fa;
-  --bg-dark: #0f172a;
+  --bg-dark: #0a0f1d;
  --glass-bg: rgba(255, 255, 255, 0.7);
-  --glass-bg-dark: rgba(15, 23, 42, 0.8);
+  --glass-bg-dark: rgba(16, 24, 48, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-dark: rgba(255, 255, 255, 0.1);
  --text-light: #1e293b;
  --text-dark: #f1f5f9;
 }

+/* Suppress DevExtreme License Watermark */
+dx-license, [class*="dx-license"] {
+  display: none !important;
+  visibility: hidden !important;
+  height: 0 !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
 * {
  margin: 0;
  padding: 0;
@@ -46,22 +55,71 @@ body.dark {
  border: 1px solid var(--glass-border-dark);
 }

-/* DevExtreme Custom Styling */
+/* DevExtreme Custom Styling - Modern Dark Theme Integration */
 .dx-datagrid {
+  background-color: transparent !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
+  font-family: inherit !important;
+}
+
+.dark .dx-datagrid {
+  color: var(--text-dark) !important;
 }

 .dx-datagrid-headers {
-  background-color: transparent !important;
+  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid var(--glass-border) !important;
+  color: inherit !important;
 }

 .dark .dx-datagrid-headers {
+  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid var(--glass-border-dark) !important;
 }

+.dx-datagrid-rowsview .dx-row {
+  background-color: transparent !important;
+  color: inherit !important;
+}
+
+.dark .dx-datagrid-rowsview .dx-row {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+}
+
+.dx-datagrid-content .dx-datagrid-table .dx-row > td {
+  padding: 12px 16px !important;
+}
+
+/* Fix for Search and Group Panels in Dark Mode */
+.dark .dx-datagrid-search-panel,
+.dark .dx-datagrid-group-panel,
+.dark .dx-datagrid-filter-row {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  color: var(--text-dark) !important;
+}
+
+.dark .dx-textbox-input {
+  color: var(--text-dark) !important;
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Column Header text */
+.dark .dx-datagrid-text-content {
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-weight: 600 !important;
+}
+
+/* Selection and Hover */
+.dark .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.dark .dx-selection.dx-row > td {
+  background-color: rgba(0, 97, 255, 0.2) !important;
+}
+
 /* Scrollbar Styling */
 ::-webkit-scrollbar {
  width: 8px;
@@ -88,3 +146,4 @@ body.dark {
 .dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
 }
+
@@ -6,7 +6,7 @@ const api = axios.create({
 });

 api.interceptors.request.use((config) => {
-  const connection = useAppStore.getState().connection;
+  const { connection, activeDatabase } = useAppStore.getState();
  if (connection) {
    config.params = {
      ...config.params,
@@ -14,7 +14,7 @@ api.interceptors.request.use((config) => {
      username: connection.username,
      password: connection.password,
      port: connection.port,
-      database: connection.database || config.params?.database,
+      database: config.params?.database || activeDatabase || connection.database,
    };
  }
  return config;
@@ -24,7 +24,7 @@ export default api;

 export const SchemaService = {
  getDatabases: () => api.get('/schema/databases'),
-  getTables: (db: string) => api.get(`/schema/tables/${db}`),
-  getTableSchema: (table: string) => api.get(`/schema/${table}`),
-  getTableData: (table: string, database?: string) => api.get(`/schema/${table}/data`, { params: { database } }),
+  getTables: (db: string) => api.get(`/schema/tables/${db}`, { params: { database: db } }),
+  getTableSchema: (table: string, database?: string) => api.get(`/schema/${table}`, { params: { database } }),
+  getTableData: (table: string, params: any) => api.get(`/schema/${table}/data`, { params }),
 };
@@ -10,11 +10,13 @@ interface ConnectionConfig {

 interface AppState {
  darkMode: boolean;
+  activeTab: string;
  activeDatabase: string | null;
  activeTable: string | null;
  connection: ConnectionConfig | null;
  connected: boolean;
  toggleDarkMode: () => void;
+  setActiveTab: (tab: string) => void;
  setConnection: (config: ConnectionConfig) => void;
  clearConnection: () => void;
  setActiveDatabase: (db: string | null) => void;
@@ -23,11 +25,13 @@ interface AppState {

 export const useAppStore = create<AppState>((set) => ({
  darkMode: true,
+  activeTab: 'explorer',
  activeDatabase: null,
  activeTable: null,
  connection: null,
  connected: false,
  toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
+  setActiveTab: (tab) => set({ activeTab: tab }),
  setConnection: (config) => set({ connection: config, connected: true }),
  clearConnection: () => set({ connection: null, connected: false, activeDatabase: null, activeTable: null }),
  setActiveDatabase: (db) => set({ activeDatabase: db, activeTable: null }),
@@ -10,8 +10,12 @@ export const getTheme = (mode: 'light' | 'dark') => createTheme({
      main: '#ff8c00',
    },
    background: {
-      default: mode === 'light' ? '#f8f9fa' : '#0f172a',
-      paper: mode === 'light' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(15, 23, 42, 0.8)',
+      default: mode === 'light' ? '#f8f9fa' : '#0a0f1d',
+      paper: mode === 'light' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(16, 24, 48, 0.85)',
+    },
+    text: {
+      primary: mode === 'light' ? '#1e293b' : '#f1f5f9',
+      secondary: mode === 'light' ? '#64748b' : '#94a3b8',
    },
  },
  typography: {