2025-08-08 15:56:20 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { Box } from '@mantine/core';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
|
2025-08-19 13:31:09 +01:00
|
|
|
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
|
2025-08-08 15:56:20 +01:00
|
|
|
import { useFileHandler } from '../../hooks/useFileHandler';
|
2025-08-21 17:30:26 +01:00
|
|
|
import { useFileState, useFileActions } from '../../contexts/FileContext';
|
|
|
|
import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
|
2025-08-08 15:56:20 +01:00
|
|
|
|
|
|
|
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 ToolRenderer from '../tools/ToolRenderer';
|
|
|
|
import LandingPage from '../shared/LandingPage';
|
|
|
|
|
|
|
|
// No props needed - component uses contexts directly
|
|
|
|
export default function Workbench() {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const { isRainbowMode } = useRainbowThemeContext();
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-08-08 15:56:20 +01:00
|
|
|
// Use context-based hooks to eliminate all prop drilling
|
2025-08-21 17:30:26 +01:00
|
|
|
const { state } = useFileState();
|
|
|
|
const { actions } = useFileActions();
|
|
|
|
const { currentMode: currentView } = useNavigationState();
|
|
|
|
const { actions: navActions } = useNavigationActions();
|
|
|
|
const setCurrentView = navActions.setMode;
|
|
|
|
const activeFiles = state.files.ids;
|
2025-08-11 09:16:16 +01:00
|
|
|
const {
|
|
|
|
previewFile,
|
|
|
|
pageEditorFunctions,
|
2025-08-08 15:56:20 +01:00
|
|
|
sidebarsVisible,
|
2025-08-11 09:16:16 +01:00
|
|
|
setPreviewFile,
|
2025-08-08 15:56:20 +01:00
|
|
|
setPageEditorFunctions,
|
|
|
|
setSidebarsVisible
|
2025-08-19 13:31:09 +01:00
|
|
|
} = useToolWorkflow();
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-08-19 13:31:09 +01:00
|
|
|
const { selectedToolKey, selectedTool, handleToolSelect } = useToolWorkflow();
|
2025-08-08 15:56:20 +01:00
|
|
|
const { addToActiveFiles } = useFileHandler();
|
|
|
|
|
|
|
|
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 {
|
2025-08-21 17:30:26 +01:00
|
|
|
setCurrentView('fileEditor');
|
2025-08-08 15:56:20 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const renderMainContent = () => {
|
2025-08-21 17:30:26 +01:00
|
|
|
if (activeFiles.length === 0) {
|
2025-08-08 15:56:20 +01:00
|
|
|
return (
|
|
|
|
<LandingPage
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
switch (currentView) {
|
|
|
|
case "fileEditor":
|
|
|
|
return (
|
|
|
|
<FileEditor
|
|
|
|
toolMode={!!selectedToolKey}
|
|
|
|
showUpload={true}
|
|
|
|
showBulkActions={!selectedToolKey}
|
|
|
|
supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
|
|
|
|
{...(!selectedToolKey && {
|
|
|
|
onOpenPageEditor: (file) => {
|
2025-08-21 17:30:26 +01:00
|
|
|
setCurrentView("pageEditor");
|
2025-08-08 15:56:20 +01:00
|
|
|
},
|
|
|
|
onMergeFiles: (filesToMerge) => {
|
|
|
|
filesToMerge.forEach(addToActiveFiles);
|
2025-08-21 17:30:26 +01:00
|
|
|
setCurrentView("viewer");
|
2025-08-08 15:56:20 +01:00
|
|
|
}
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
case "viewer":
|
|
|
|
return (
|
|
|
|
<Viewer
|
|
|
|
sidebarsVisible={sidebarsVisible}
|
|
|
|
setSidebarsVisible={setSidebarsVisible}
|
|
|
|
previewFile={previewFile}
|
|
|
|
onClose={handlePreviewClose}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
case "pageEditor":
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<PageEditor
|
|
|
|
onFunctionsReady={setPageEditorFunctions}
|
|
|
|
/>
|
|
|
|
{pageEditorFunctions && (
|
|
|
|
<PageEditorControls
|
|
|
|
onClosePdf={pageEditorFunctions.closePdf}
|
|
|
|
onUndo={pageEditorFunctions.handleUndo}
|
|
|
|
onRedo={pageEditorFunctions.handleRedo}
|
|
|
|
canUndo={pageEditorFunctions.canUndo}
|
|
|
|
canRedo={pageEditorFunctions.canRedo}
|
|
|
|
onRotate={pageEditorFunctions.handleRotate}
|
|
|
|
onDelete={pageEditorFunctions.handleDelete}
|
|
|
|
onSplit={pageEditorFunctions.handleSplit}
|
|
|
|
onExportSelected={pageEditorFunctions.onExportSelected}
|
|
|
|
onExportAll={pageEditorFunctions.onExportAll}
|
|
|
|
exportLoading={pageEditorFunctions.exportLoading}
|
|
|
|
selectionMode={pageEditorFunctions.selectionMode}
|
|
|
|
selectedPages={pageEditorFunctions.selectedPages}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
default:
|
|
|
|
// Check if it's a tool view
|
|
|
|
if (selectedToolKey && selectedTool) {
|
|
|
|
return (
|
|
|
|
<ToolRenderer
|
|
|
|
selectedToolKey={selectedToolKey}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<LandingPage/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
className="flex-1 h-screen min-w-80 relative flex flex-col"
|
|
|
|
style={
|
|
|
|
isRainbowMode
|
|
|
|
? {} // No background color in rainbow mode
|
|
|
|
: { backgroundColor: 'var(--bg-background)' }
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{/* Top Controls */}
|
|
|
|
<TopControls
|
|
|
|
currentView={currentView}
|
2025-08-21 17:30:26 +01:00
|
|
|
setCurrentView={setCurrentView}
|
2025-08-08 15:56:20 +01:00
|
|
|
selectedToolKey={selectedToolKey}
|
|
|
|
/>
|
2025-08-11 09:16:16 +01:00
|
|
|
|
2025-08-08 15:56:20 +01:00
|
|
|
{/* Main content area */}
|
|
|
|
<Box
|
|
|
|
className="flex-1 min-h-0 relative z-10"
|
|
|
|
style={{
|
|
|
|
transition: 'opacity 0.15s ease-in-out',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{renderMainContent()}
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
);
|
2025-08-11 09:16:16 +01:00
|
|
|
}
|