diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index fcf26f8bc..1ee0c99ed 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -5,6 +5,7 @@ import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelecti import { useToolManagement } from "../hooks/useToolManagement"; import { Group, Box, Button, Container } from "@mantine/core"; import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider"; +import { PageEditorFunctions } from "../types/pageEditor"; import rainbowStyles from '../styles/rainbow.module.css'; import ToolPicker from "../components/tools/ToolPicker"; @@ -16,47 +17,26 @@ import Viewer from "../components/viewer/Viewer"; import FileUploadSelector from "../components/shared/FileUploadSelector"; import ToolRenderer from "../components/tools/ToolRenderer"; import QuickAccessBar from "../components/shared/QuickAccessBar"; -import { useMultipleEndpointsEnabled } from "../hooks/useEndpointConfig"; -// Inner component that uses file selection context function HomePageContent() { const { t } = useTranslation(); const { isRainbowMode } = useRainbowThemeContext(); - // Get file context const fileContext = useFileContext(); const { activeFiles, currentView, currentMode, setCurrentView, addFiles } = fileContext; - - // Get file selection context const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection(); const { selectedToolKey, selectedTool, - toolSelectedFileIds, toolRegistry, selectTool, clearToolSelection, - setToolSelectedFileIds, } = useToolManagement(); const [sidebarsVisible, setSidebarsVisible] = useState(true); const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker'); const [readerMode, setReaderMode] = useState(false); - const [pageEditorFunctions, setPageEditorFunctions] = useState<{ - closePdf: () => void; - handleUndo: () => void; - handleRedo: () => void; - canUndo: boolean; - canRedo: boolean; - handleRotate: () => void; - handleDelete: () => void; - handleSplit: () => void; - onExportSelected: () => void; - onExportAll: () => void; - exportLoading: boolean; - selectionMode: boolean; - selectedPages: number[]; - } | null>(null); + const [pageEditorFunctions, setPageEditorFunctions] = useState(null); const [previewFile, setPreviewFile] = useState(null); // Update file selection context when tool changes @@ -65,9 +45,9 @@ function HomePageContent() { setMaxFiles(selectedTool.maxFiles); setIsToolMode(true); } else { - setMaxFiles(-1); // Unlimited when not in tool mode + setMaxFiles(-1); setIsToolMode(false); - setSelectedFiles([]); // Clear selection when exiting tool mode + setSelectedFiles([]); } }, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]); @@ -220,24 +200,20 @@ function HomePageContent() { maxRecentFiles={8} /> - ) : currentView === "fileEditor" && selectedToolKey ? ( - // Tool-specific FileEditor - for file selection with tools - ) : currentView === "fileEditor" ? ( - // Generic FileEditor - for general file management { - handleViewChange("pageEditor"); - }} - onMergeFiles={(filesToMerge) => { - // Add merged files to active set - filesToMerge.forEach(addToActiveFiles); - handleViewChange("viewer"); - }} + toolMode={!!selectedToolKey} + showUpload={true} + showBulkActions={!selectedToolKey} + {...(!selectedToolKey && { + onOpenPageEditor: (file) => { + handleViewChange("pageEditor"); + }, + onMergeFiles: (filesToMerge) => { + filesToMerge.forEach(addToActiveFiles); + handleViewChange("viewer"); + } + })} /> ) : currentView === "viewer" ? ( void; + handleUndo: () => void; + handleRedo: () => void; + canUndo: boolean; + canRedo: boolean; + handleRotate: () => void; + handleDelete: () => void; + handleSplit: () => void; + onExportSelected: () => void; + onExportAll: () => void; + exportLoading: boolean; + selectionMode: boolean; + selectedPages: number[]; +} diff --git a/frontend/src/types/tool.ts b/frontend/src/types/tool.ts index 4922d23bd..731f0b90e 100644 --- a/frontend/src/types/tool.ts +++ b/frontend/src/types/tool.ts @@ -1,37 +1,16 @@ import React from 'react'; -// Type definitions for better type safety -export type MaxFiles = number; // 1 = single file, >1 = limited multi-file, -1 = unlimited +export type MaxFiles = number; // 1=single, >1=limited, -1=unlimited export type ToolCategory = 'manipulation' | 'conversion' | 'analysis' | 'utility' | 'optimization' | 'security'; - -/** - * Tool definition without name - used for base definitions before translation - */ export type ToolDefinition = Omit; +export type ToolStepType = 'files' | 'settings' | 'results'; -/** - * Standard interface that all modern tools should implement - * This ensures consistent behavior and makes adding new tools trivial - */ export interface BaseToolProps { - // Tool results callback - called when tool completes successfully onComplete?: (results: File[]) => void; - - // Error handling callback onError?: (error: string) => void; - - // Preview functionality for result files onPreviewFile?: (file: File | null) => void; } -/** - * Tool step types for standardized UI - */ -export type ToolStepType = 'files' | 'settings' | 'results'; - -/** - * Tool step configuration - */ export interface ToolStepConfig { type: ToolStepType; title: string; @@ -42,9 +21,12 @@ export interface ToolStepConfig { onCollapsedClick?: () => void; } -/** - * Tool operation result - */ +export interface ToolValidationResult { + valid: boolean; + errors?: string[]; + warnings?: string[]; +} + export interface ToolResult { success: boolean; files?: File[]; @@ -53,30 +35,21 @@ export interface ToolResult { metadata?: Record; } -/** - * Complete tool definition - single interface for all tool needs - */ export interface Tool { id: string; - name: string; // Always required - added via translation - icon: React.ReactNode; // Always required - for UI display - component: React.ComponentType; // Lazy-loaded tool component - maxFiles: MaxFiles; // File selection limit: 1=single, 5=limited, -1=unlimited - category?: ToolCategory; // Tool grouping for organization - description?: string; // Help text for users - endpoints?: string[]; // Backend endpoints this tool uses - supportedFormats?: string[]; // File types this tool accepts - validation?: (files: File[]) => { valid: boolean; message?: string }; // File validation logic + name: string; + icon: React.ReactNode; + component: React.ComponentType; + maxFiles: MaxFiles; + category?: ToolCategory; + description?: string; + endpoints?: string[]; + supportedFormats?: string[]; + validation?: (files: File[]) => ToolValidationResult; } -/** - * Tool registry type - tools indexed by key - */ export type ToolRegistry = Record; -/** - * File selection context interfaces for type safety - */ export interface FileSelectionState { selectedFiles: File[]; maxFiles: MaxFiles;