feat: add MainContent component with Excel-like bulk editing, batch updates, and navigation tabs

frontend/src/components/MainContent.tsx

@@ -20,7 +20,7 @@ import {
   Save,
   Undo
 } from '@mui/icons-material';
-import { DataGrid, type GridPaginationModel, type GridRowModel } from '@mui/x-data-grid';
+import { DataGrid, useGridApiRef, type GridPaginationModel, type GridRowModel } from '@mui/x-data-grid';
 import { useAppStore } from '../store/useAppStore';
 import { SchemaService } from '../services/api';
 import TransferContent from './TransferContent';
@@ -33,6 +33,7 @@ import type { MainNotification } from '../types/database';
 
 const MainContent: React.FC = () => {
   const { activeTable, activeDatabase, darkMode, dbTab, setDbTab } = useAppStore();
+  const apiRef = useGridApiRef();
   
   const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
     page: 0,
@@ -217,6 +218,21 @@ const MainContent: React.FC = () => {
     return () => window.removeEventListener('mouseup', handleMouseUp);
   }, [handleMouseUp]);
 
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!api || !api.subscribeEvent) return;
+
+    const unsubs = [
+      api.subscribeEvent('cellFocusIn', (params) => {
+        setCellFocus({ id: params.id, field: params.field });
+      }),
+      api.subscribeEvent('cellMouseDown', handleCellMouseDown),
+      api.subscribeEvent('cellMouseOver', handleCellMouseEnter)
+    ];
+
+    return () => unsubs.forEach(unsub => unsub?.());
+  }, [apiRef, activeTable, handleCellMouseDown, handleCellMouseEnter]);
+
   useEffect(() => {
     setPaginationModel({ page: 0, pageSize: 100 });
     setPendingChanges({});
@@ -335,6 +351,7 @@ const MainContent: React.FC = () => {
                   </Box>
                 ) : (
                   <DataGrid
+                    apiRef={apiRef}
                     rows={rows.map(row => ({
                       ...row,
                       ...(pendingChanges[row[primaryKey]] || {})
@@ -351,9 +368,6 @@ const MainContent: React.FC = () => {
                     onProcessRowUpdateError={(error) => {
                       console.error('Row update error:', error);
                     }}
-                    onCellFocusIn={(params) => setCellFocus({ id: params.id, field: params.field })}
-                    onCellMouseDown={handleCellMouseDown}
-                    onCellMouseEnter={handleCellMouseEnter}
                     slotProps={{
                       root: {
                         onPaste: handlePaste,