mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
# Description of Changes - Added the all tools sidebar - Added a TextFit component that shrinks text to fit containers - Added a TopToolIcon on the nav, that animates down to give users feedback on what tool is selected - Added the baseToolRegistry, to replace the old pattern of listing tools, allowing us to clean up the ToolRegistry code - Fixed Mantine light/dark theme race condition - General styling tweaks --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
161 lines
5.0 KiB
TypeScript
161 lines
5.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
|
|
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
|
|
import { useFileHandler } from '../../hooks/useFileHandler';
|
|
import { useFileContext } from '../../contexts/FileContext';
|
|
|
|
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();
|
|
|
|
// Use context-based hooks to eliminate all prop drilling
|
|
const { activeFiles, currentView, setCurrentView } = useFileContext();
|
|
const {
|
|
previewFile,
|
|
pageEditorFunctions,
|
|
sidebarsVisible,
|
|
setPreviewFile,
|
|
setPageEditorFunctions,
|
|
setSidebarsVisible
|
|
} = useToolWorkflow();
|
|
|
|
const { selectedToolKey, selectedTool, handleToolSelect } = useToolWorkflow();
|
|
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 {
|
|
setCurrentView('fileEditor' as any);
|
|
}
|
|
};
|
|
|
|
const renderMainContent = () => {
|
|
if (!activeFiles[0]) {
|
|
return (
|
|
<LandingPage
|
|
/>
|
|
);
|
|
}
|
|
|
|
switch (currentView) {
|
|
case "fileEditor":
|
|
return (
|
|
<FileEditor
|
|
toolMode={!!selectedToolKey}
|
|
showUpload={true}
|
|
showBulkActions={!selectedToolKey}
|
|
supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
|
|
{...(!selectedToolKey && {
|
|
onOpenPageEditor: (file) => {
|
|
setCurrentView("pageEditor" as any);
|
|
},
|
|
onMergeFiles: (filesToMerge) => {
|
|
filesToMerge.forEach(addToActiveFiles);
|
|
setCurrentView("viewer" as any);
|
|
}
|
|
})}
|
|
/>
|
|
);
|
|
|
|
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}
|
|
setCurrentView={setCurrentView as any /* FIX ME */}
|
|
selectedToolKey={selectedToolKey}
|
|
/>
|
|
|
|
{/* Main content area */}
|
|
<Box
|
|
className="flex-1 min-h-0 relative z-10"
|
|
style={{
|
|
transition: 'opacity 0.15s ease-in-out',
|
|
}}
|
|
>
|
|
{renderMainContent()}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|