import { Box } from '@mantine/core'; import { useRainbowThemeContext } from '../shared/RainbowThemeProvider'; import { useToolWorkflow } from '../../contexts/ToolWorkflowContext'; import { useFileHandler } from '../../hooks/useFileHandler'; import { useFileState } from '../../contexts/FileContext'; import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext'; import { isBaseWorkbench } from '../../types/workbench'; import { useViewer } from '../../contexts/ViewerContext'; import { useAppConfig } from '../../contexts/AppConfigContext'; import './Workbench.css'; import TopControls from '../shared/TopControls'; import FileEditor from '../fileEditor/FileEditor'; import PageEditor from '../pageEditor/PageEditor'; import PageEditorControls from '../pageEditor/PageEditorControls'; import Viewer from '../viewer/Viewer'; import LandingPage from '../shared/LandingPage'; import Footer from '../shared/Footer'; import DismissAllErrorsButton from '../shared/DismissAllErrorsButton'; // No props needed - component uses contexts directly export default function Workbench() { const { isRainbowMode } = useRainbowThemeContext(); const { config } = useAppConfig(); // Use context-based hooks to eliminate all prop drilling const { selectors } = useFileState(); const { workbench: currentView } = useNavigationState(); const { actions: navActions } = useNavigationActions(); const setCurrentView = navActions.setWorkbench; const activeFiles = selectors.getFiles(); const { previewFile, pageEditorFunctions, sidebarsVisible, setPreviewFile, setPageEditorFunctions, setSidebarsVisible, customWorkbenchViews, } = useToolWorkflow(); const { handleToolSelect } = useToolWorkflow(); // Get navigation state - this is the source of truth const { selectedTool: selectedToolId } = useNavigationState(); // Get tool registry from context (instead of direct hook call) const { toolRegistry } = useToolWorkflow(); const selectedTool = selectedToolId ? toolRegistry[selectedToolId] : null; const { addFiles } = useFileHandler(); // Get active file index from ViewerContext const { activeFileIndex, setActiveFileIndex } = useViewer(); const handlePreviewClose = () => { setPreviewFile(null); const previousMode = sessionStorage.getItem('previousMode'); if (previousMode === 'split') { // Use context's handleToolSelect which coordinates tool selection and view changes handleToolSelect('split'); sessionStorage.removeItem('previousMode'); } else if (previousMode === 'compress') { handleToolSelect('compress'); sessionStorage.removeItem('previousMode'); } else if (previousMode === 'convert') { handleToolSelect('convert'); sessionStorage.removeItem('previousMode'); } else { setCurrentView('fileEditor'); } }; const renderMainContent = () => { if (activeFiles.length === 0) { return ( ); } switch (currentView) { case "fileEditor": return ( { setCurrentView("pageEditor"); }, onMergeFiles: (filesToMerge) => { addFiles(filesToMerge); setCurrentView("viewer"); } })} /> ); case "viewer": return ( ); case "pageEditor": return ( <> {pageEditorFunctions && ( )} ); default: if (!isBaseWorkbench(currentView)) { const customView = customWorkbenchViews.find((view) => view.workbenchId === currentView && view.data != null); if (customView) { const CustomComponent = customView.component; return ; } } return ; } }; return ( {/* Top Controls */} {activeFiles.length > 0 && ( { const stub = selectors.getStirlingFileStub(f.fileId); return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber }; })} currentFileIndex={activeFileIndex} onFileSelect={setActiveFileIndex} /> )} {/* Dismiss All Errors Button */} {/* Main content area */} 0 ? '3.5rem' : '0'), }} > {renderMainContent()}