mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-11 13:48:37 +02:00
Optimisation
This commit is contained in:
Connor Yoh
parent
1bd3b019dc
commit
a741a338a6
@ -2,8 +2,7 @@ import React from 'react';
|
||||
import { Box } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
|
||||
import { ToolConfiguration } from '../../types/tool';
|
||||
import { PageEditorFunctions } from '../../types/pageEditor';
|
||||
import { useWorkbenchState, useToolSelection } from '../../contexts/ToolWorkflowContext';
|
||||
|
||||
import TopControls from '../shared/TopControls';
|
||||
import FileEditor from '../fileEditor/FileEditor';
|
||||
@ -18,28 +17,8 @@ interface WorkbenchProps {
|
||||
activeFiles: File[];
|
||||
/** Current view mode */
|
||||
currentView: string;
|
||||
/** Currently selected tool key */
|
||||
selectedToolKey: string | null;
|
||||
/** Selected tool configuration */
|
||||
selectedTool: ToolConfiguration | null;
|
||||
/** Whether sidebars are visible */
|
||||
sidebarsVisible: boolean;
|
||||
/** Function to set sidebars visibility */
|
||||
setSidebarsVisible: (visible: boolean) => void;
|
||||
/** File to preview */
|
||||
previewFile: File | null;
|
||||
/** Function to clear preview file */
|
||||
setPreviewFile: (file: File | null) => void;
|
||||
/** Page editor functions */
|
||||
pageEditorFunctions: PageEditorFunctions | null;
|
||||
/** Function to set page editor functions */
|
||||
setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
|
||||
/** Handler for view changes */
|
||||
onViewChange: (view: string) => void;
|
||||
/** Handler for tool selection */
|
||||
onToolSelect: (toolId: string) => void;
|
||||
/** Handler for setting left panel view */
|
||||
onSetLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
|
||||
/** Handler for adding files to active files */
|
||||
onAddToActiveFiles: (file: File) => void;
|
||||
}
|
||||
@ -47,39 +26,36 @@ interface WorkbenchProps {
|
||||
export default function Workbench({
|
||||
activeFiles,
|
||||
currentView,
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
sidebarsVisible,
|
||||
setSidebarsVisible,
|
||||
previewFile,
|
||||
setPreviewFile,
|
||||
pageEditorFunctions,
|
||||
setPageEditorFunctions,
|
||||
onViewChange,
|
||||
onToolSelect,
|
||||
onSetLeftPanelView,
|
||||
onAddToActiveFiles
|
||||
}: WorkbenchProps) {
|
||||
const { t } = useTranslation();
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
|
||||
// Use context-based hooks to eliminate prop drilling
|
||||
const {
|
||||
previewFile,
|
||||
pageEditorFunctions,
|
||||
sidebarsVisible,
|
||||
setPreviewFile,
|
||||
setPageEditorFunctions,
|
||||
setSidebarsVisible
|
||||
} = useWorkbenchState();
|
||||
|
||||
const { selectedToolKey, selectedTool, handleToolSelect } = useToolSelection();
|
||||
|
||||
const handlePreviewClose = () => {
|
||||
setPreviewFile(null);
|
||||
const previousMode = sessionStorage.getItem('previousMode');
|
||||
if (previousMode === 'split') {
|
||||
onToolSelect('split');
|
||||
onViewChange('split');
|
||||
onSetLeftPanelView('toolContent');
|
||||
// Use context's handleToolSelect which coordinates tool selection and view changes
|
||||
handleToolSelect('split');
|
||||
sessionStorage.removeItem('previousMode');
|
||||
} else if (previousMode === 'compress') {
|
||||
onToolSelect('compress');
|
||||
onViewChange('compress');
|
||||
onSetLeftPanelView('toolContent');
|
||||
handleToolSelect('compress');
|
||||
sessionStorage.removeItem('previousMode');
|
||||
} else if (previousMode === 'convert') {
|
||||
onToolSelect('convert');
|
||||
onViewChange('convert');
|
||||
onSetLeftPanelView('toolContent');
|
||||
handleToolSelect('convert');
|
||||
sessionStorage.removeItem('previousMode');
|
||||
} else {
|
||||
onViewChange('fileEditor');
|
||||
@ -124,9 +100,7 @@ export default function Workbench({
|
||||
sidebarsVisible={sidebarsVisible}
|
||||
setSidebarsVisible={setSidebarsVisible}
|
||||
previewFile={previewFile}
|
||||
{...(previewFile && {
|
||||
onClose: handlePreviewClose
|
||||
})}
|
||||
onClose={handlePreviewClose}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@ -12,16 +12,10 @@ import rainbowStyles from '../../styles/rainbow.module.css';
|
||||
import AppConfigModal from './AppConfigModal';
|
||||
import { useIsOverflowing } from '../../hooks/useIsOverflowing';
|
||||
import { useFilesModalContext } from '../../contexts/FilesModalContext';
|
||||
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
|
||||
import './QuickAccessBar.css';
|
||||
|
||||
interface QuickAccessBarProps {
|
||||
onToolsClick: () => void;
|
||||
onReaderToggle: () => void;
|
||||
selectedToolKey?: string;
|
||||
toolRegistry: any;
|
||||
leftPanelView: 'toolPicker' | 'toolContent';
|
||||
readerMode: boolean;
|
||||
}
|
||||
// No props needed - component uses context
|
||||
|
||||
interface ButtonConfig {
|
||||
id: string;
|
||||
@ -36,15 +30,12 @@ interface ButtonConfig {
|
||||
|
||||
function NavHeader({
|
||||
activeButton,
|
||||
setActiveButton,
|
||||
onReaderToggle,
|
||||
onToolsClick
|
||||
setActiveButton
|
||||
}: {
|
||||
activeButton: string;
|
||||
setActiveButton: (id: string) => void;
|
||||
onReaderToggle: () => void;
|
||||
onToolsClick: () => void;
|
||||
}) {
|
||||
const { handleReaderToggle, handleBackToTools } = useToolWorkflow();
|
||||
return (
|
||||
<>
|
||||
<div className="nav-header">
|
||||
@ -80,8 +71,8 @@ function NavHeader({
|
||||
variant="subtle"
|
||||
onClick={() => {
|
||||
setActiveButton('tools');
|
||||
onReaderToggle();
|
||||
onToolsClick();
|
||||
handleReaderToggle();
|
||||
handleBackToTools();
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: activeButton === 'tools' ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
|
||||
@ -104,16 +95,10 @@ function NavHeader({
|
||||
);
|
||||
}
|
||||
|
||||
const QuickAccessBar = ({
|
||||
onToolsClick,
|
||||
onReaderToggle,
|
||||
selectedToolKey,
|
||||
toolRegistry,
|
||||
leftPanelView,
|
||||
readerMode,
|
||||
}: QuickAccessBarProps) => {
|
||||
const QuickAccessBar = () => {
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
|
||||
const { handleReaderToggle } = useToolWorkflow();
|
||||
const [configModalOpen, setConfigModalOpen] = useState(false);
|
||||
const [activeButton, setActiveButton] = useState<string>('tools');
|
||||
const scrollableRef = useRef<HTMLDivElement>(null);
|
||||
@ -134,7 +119,7 @@ const QuickAccessBar = ({
|
||||
type: 'navigation',
|
||||
onClick: () => {
|
||||
setActiveButton('read');
|
||||
onReaderToggle();
|
||||
handleReaderToggle();
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -240,9 +225,7 @@ const QuickAccessBar = ({
|
||||
<div className="quick-access-header">
|
||||
<NavHeader
|
||||
activeButton={activeButton}
|
||||
setActiveButton={setActiveButton}
|
||||
onReaderToggle={onReaderToggle}
|
||||
onToolsClick={onToolsClick}
|
||||
setActiveButton={setActiveButton}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,52 +1,30 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, TextInput } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { TextInput } from '@mantine/core';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
|
||||
import { ToolRegistry, ToolConfiguration } from '../../types/tool';
|
||||
import { useToolPanelState, useToolSelection, useWorkbenchState } from '../../contexts/ToolWorkflowContext';
|
||||
import ToolPicker from './ToolPicker';
|
||||
import ToolRenderer from './ToolRenderer';
|
||||
import rainbowStyles from '../../styles/rainbow.module.css';
|
||||
|
||||
interface ToolPanelProps {
|
||||
/** Whether the tool panel is visible */
|
||||
visible: boolean;
|
||||
/** Whether reader mode is active (hides the panel) */
|
||||
readerMode: boolean;
|
||||
/** Current view mode: 'toolPicker' or 'toolContent' */
|
||||
leftPanelView: 'toolPicker' | 'toolContent';
|
||||
/** Currently selected tool key */
|
||||
selectedToolKey: string | null;
|
||||
/** Selected tool configuration */
|
||||
selectedTool: ToolConfiguration | null;
|
||||
/** Tool registry with all available tools */
|
||||
toolRegistry: ToolRegistry;
|
||||
/** Handler for tool selection */
|
||||
onToolSelect: (toolId: string) => void;
|
||||
/** Handler for back to tools navigation */
|
||||
onBackToTools: () => void;
|
||||
/** Handler for file preview */
|
||||
onPreviewFile?: (file: File | null) => void;
|
||||
}
|
||||
// No props needed - component uses context
|
||||
|
||||
export default function ToolPanel({
|
||||
visible,
|
||||
readerMode,
|
||||
leftPanelView,
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
toolRegistry,
|
||||
onToolSelect,
|
||||
onBackToTools,
|
||||
onPreviewFile
|
||||
}: ToolPanelProps) {
|
||||
export default function ToolPanel() {
|
||||
const { t } = useTranslation();
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
// Filter tools based on search
|
||||
const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
|
||||
name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
// Use context-based hooks to eliminate prop drilling
|
||||
const {
|
||||
leftPanelView,
|
||||
isPanelVisible,
|
||||
searchQuery,
|
||||
filteredTools,
|
||||
setSearchQuery,
|
||||
handleBackToTools
|
||||
} = useToolPanelState();
|
||||
|
||||
const { selectedToolKey, handleToolSelect } = useToolSelection();
|
||||
const { setPreviewFile } = useWorkbenchState();
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -54,13 +32,13 @@ export default function ToolPanel({
|
||||
isRainbowMode ? rainbowStyles.rainbowPaper : ''
|
||||
}`}
|
||||
style={{
|
||||
width: visible && !readerMode ? '20rem' : '0',
|
||||
padding: visible && !readerMode ? '0.5rem' : '0'
|
||||
width: isPanelVisible ? '20rem' : '0',
|
||||
padding: isPanelVisible ? '0.5rem' : '0'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
opacity: visible && !readerMode ? 1 : 0,
|
||||
opacity: isPanelVisible ? 1 : 0,
|
||||
transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
@ -71,8 +49,8 @@ export default function ToolPanel({
|
||||
<div className="mb-4">
|
||||
<TextInput
|
||||
placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
autoComplete="off"
|
||||
size="sm"
|
||||
/>
|
||||
@ -83,7 +61,7 @@ export default function ToolPanel({
|
||||
<div className="flex-1 flex flex-col">
|
||||
<ToolPicker
|
||||
selectedToolKey={selectedToolKey}
|
||||
onSelect={onToolSelect}
|
||||
onSelect={handleToolSelect}
|
||||
filteredTools={filteredTools}
|
||||
/>
|
||||
</div>
|
||||
@ -94,7 +72,7 @@ export default function ToolPanel({
|
||||
<div className="flex-1 min-h-0">
|
||||
<ToolRenderer
|
||||
selectedToolKey={selectedToolKey}
|
||||
onPreviewFile={onPreviewFile}
|
||||
onPreviewFile={setPreviewFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
299
frontend/src/contexts/ToolWorkflowContext.tsx
Normal file
299
frontend/src/contexts/ToolWorkflowContext.tsx
Normal file
@ -0,0 +1,299 @@
|
||||
/**
|
||||
* ToolWorkflowContext - Manages tool selection, UI state, and workflow coordination
|
||||
* Reduces prop drilling and improves performance through selective subscriptions
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react';
|
||||
import { useToolManagement } from '../hooks/useToolManagement';
|
||||
import { ToolConfiguration } from '../types/tool';
|
||||
import { PageEditorFunctions } from '../types/pageEditor';
|
||||
|
||||
// State interface
|
||||
interface ToolWorkflowState {
|
||||
// UI State
|
||||
sidebarsVisible: boolean;
|
||||
leftPanelView: 'toolPicker' | 'toolContent';
|
||||
readerMode: boolean;
|
||||
|
||||
// File/Preview State
|
||||
previewFile: File | null;
|
||||
pageEditorFunctions: PageEditorFunctions | null;
|
||||
|
||||
// Search State
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
// Actions
|
||||
type ToolWorkflowAction =
|
||||
| { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
|
||||
| { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' }
|
||||
| { type: 'SET_READER_MODE'; payload: boolean }
|
||||
| { type: 'SET_PREVIEW_FILE'; payload: File | null }
|
||||
| { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
|
||||
| { type: 'SET_SEARCH_QUERY'; payload: string }
|
||||
| { type: 'RESET_UI_STATE' };
|
||||
|
||||
// Initial state
|
||||
const initialState: ToolWorkflowState = {
|
||||
sidebarsVisible: true,
|
||||
leftPanelView: 'toolPicker',
|
||||
readerMode: false,
|
||||
previewFile: null,
|
||||
pageEditorFunctions: null,
|
||||
searchQuery: '',
|
||||
};
|
||||
|
||||
// Reducer
|
||||
function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {
|
||||
switch (action.type) {
|
||||
case 'SET_SIDEBARS_VISIBLE':
|
||||
return { ...state, sidebarsVisible: action.payload };
|
||||
case 'SET_LEFT_PANEL_VIEW':
|
||||
return { ...state, leftPanelView: action.payload };
|
||||
case 'SET_READER_MODE':
|
||||
return { ...state, readerMode: action.payload };
|
||||
case 'SET_PREVIEW_FILE':
|
||||
return { ...state, previewFile: action.payload };
|
||||
case 'SET_PAGE_EDITOR_FUNCTIONS':
|
||||
return { ...state, pageEditorFunctions: action.payload };
|
||||
case 'SET_SEARCH_QUERY':
|
||||
return { ...state, searchQuery: action.payload };
|
||||
case 'RESET_UI_STATE':
|
||||
return { ...initialState, searchQuery: state.searchQuery }; // Preserve search
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// Context value interface
|
||||
interface ToolWorkflowContextValue extends ToolWorkflowState {
|
||||
// Tool management (from hook)
|
||||
selectedToolKey: string | null;
|
||||
selectedTool: ToolConfiguration | null;
|
||||
toolRegistry: any; // From useToolManagement
|
||||
|
||||
// UI Actions
|
||||
setSidebarsVisible: (visible: boolean) => void;
|
||||
setLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
|
||||
setReaderMode: (mode: boolean) => void;
|
||||
setPreviewFile: (file: File | null) => void;
|
||||
setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
|
||||
setSearchQuery: (query: string) => void;
|
||||
|
||||
// Tool Actions
|
||||
selectTool: (toolId: string) => void;
|
||||
clearToolSelection: () => void;
|
||||
|
||||
// Workflow Actions (compound actions)
|
||||
handleToolSelect: (toolId: string) => void;
|
||||
handleBackToTools: () => void;
|
||||
handleReaderToggle: () => void;
|
||||
|
||||
// Computed values
|
||||
filteredTools: [string, any][]; // Filtered by search
|
||||
isPanelVisible: boolean;
|
||||
}
|
||||
|
||||
const ToolWorkflowContext = createContext<ToolWorkflowContextValue | undefined>(undefined);
|
||||
|
||||
// Provider component
|
||||
interface ToolWorkflowProviderProps {
|
||||
children: React.ReactNode;
|
||||
/** Handler for view changes (passed from parent) */
|
||||
onViewChange?: (view: string) => void;
|
||||
}
|
||||
|
||||
export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowProviderProps) {
|
||||
const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
|
||||
|
||||
// Tool management hook
|
||||
const {
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
toolRegistry,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
} = useToolManagement();
|
||||
|
||||
// UI Action creators
|
||||
const setSidebarsVisible = useCallback((visible: boolean) => {
|
||||
dispatch({ type: 'SET_SIDEBARS_VISIBLE', payload: visible });
|
||||
}, []);
|
||||
|
||||
const setLeftPanelView = useCallback((view: 'toolPicker' | 'toolContent') => {
|
||||
dispatch({ type: 'SET_LEFT_PANEL_VIEW', payload: view });
|
||||
}, []);
|
||||
|
||||
const setReaderMode = useCallback((mode: boolean) => {
|
||||
dispatch({ type: 'SET_READER_MODE', payload: mode });
|
||||
}, []);
|
||||
|
||||
const setPreviewFile = useCallback((file: File | null) => {
|
||||
dispatch({ type: 'SET_PREVIEW_FILE', payload: file });
|
||||
}, []);
|
||||
|
||||
const setPageEditorFunctions = useCallback((functions: PageEditorFunctions | null) => {
|
||||
dispatch({ type: 'SET_PAGE_EDITOR_FUNCTIONS', payload: functions });
|
||||
}, []);
|
||||
|
||||
const setSearchQuery = useCallback((query: string) => {
|
||||
dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
|
||||
}, []);
|
||||
|
||||
// Workflow actions (compound actions that coordinate multiple state changes)
|
||||
const handleToolSelect = useCallback((toolId: string) => {
|
||||
selectTool(toolId);
|
||||
onViewChange?.('fileEditor');
|
||||
setLeftPanelView('toolContent');
|
||||
setReaderMode(false);
|
||||
}, [selectTool, onViewChange, setLeftPanelView, setReaderMode]);
|
||||
|
||||
const handleBackToTools = useCallback(() => {
|
||||
setLeftPanelView('toolPicker');
|
||||
setReaderMode(false);
|
||||
clearToolSelection();
|
||||
}, [setLeftPanelView, setReaderMode, clearToolSelection]);
|
||||
|
||||
const handleReaderToggle = useCallback(() => {
|
||||
setReaderMode(true);
|
||||
}, [setReaderMode]);
|
||||
|
||||
// Computed values (memoized to prevent unnecessary recalculations)
|
||||
// Separate filteredTools memoization to avoid context re-renders
|
||||
const filteredTools = useMemo(() => {
|
||||
if (!toolRegistry) return [];
|
||||
return Object.entries(toolRegistry).filter(([_, { name }]) =>
|
||||
name.toLowerCase().includes(state.searchQuery.toLowerCase())
|
||||
);
|
||||
}, [toolRegistry, state.searchQuery]);
|
||||
|
||||
const isPanelVisible = useMemo(() =>
|
||||
state.sidebarsVisible && !state.readerMode,
|
||||
[state.sidebarsVisible, state.readerMode]
|
||||
);
|
||||
|
||||
// Context value (memoized to prevent unnecessary rerenders)
|
||||
const contextValue = useMemo((): ToolWorkflowContextValue => ({
|
||||
// State - destructure to avoid object reference changes
|
||||
sidebarsVisible: state.sidebarsVisible,
|
||||
leftPanelView: state.leftPanelView,
|
||||
readerMode: state.readerMode,
|
||||
previewFile: state.previewFile,
|
||||
pageEditorFunctions: state.pageEditorFunctions,
|
||||
searchQuery: state.searchQuery,
|
||||
|
||||
// Tool state
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
toolRegistry,
|
||||
|
||||
// Actions
|
||||
setSidebarsVisible,
|
||||
setLeftPanelView,
|
||||
setReaderMode,
|
||||
setPreviewFile,
|
||||
setPageEditorFunctions,
|
||||
setSearchQuery,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
|
||||
// Workflow Actions
|
||||
handleToolSelect,
|
||||
handleBackToTools,
|
||||
handleReaderToggle,
|
||||
|
||||
// Computed
|
||||
filteredTools,
|
||||
isPanelVisible,
|
||||
}), [
|
||||
// State values (not the state object itself)
|
||||
state.sidebarsVisible,
|
||||
state.leftPanelView,
|
||||
state.readerMode,
|
||||
state.previewFile,
|
||||
state.pageEditorFunctions,
|
||||
state.searchQuery,
|
||||
|
||||
// Tool state (toolRegistry removed from deps - it's passed through but doesn't affect memoization)
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
|
||||
// Actions are stable due to useCallback
|
||||
setSidebarsVisible,
|
||||
setLeftPanelView,
|
||||
setReaderMode,
|
||||
setPreviewFile,
|
||||
setPageEditorFunctions,
|
||||
setSearchQuery,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
handleToolSelect,
|
||||
handleBackToTools,
|
||||
handleReaderToggle,
|
||||
|
||||
// Computed values
|
||||
filteredTools,
|
||||
isPanelVisible,
|
||||
]);
|
||||
|
||||
return (
|
||||
<ToolWorkflowContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</ToolWorkflowContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// Custom hook to use the context
|
||||
export function useToolWorkflow(): ToolWorkflowContextValue {
|
||||
const context = useContext(ToolWorkflowContext);
|
||||
if (!context) {
|
||||
throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
// Selective hooks for performance (only subscribe to specific parts of state)
|
||||
export function useToolSelection() {
|
||||
const { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect } = useToolWorkflow();
|
||||
return { selectedToolKey, selectedTool, selectTool, clearToolSelection, handleToolSelect };
|
||||
}
|
||||
|
||||
export function useToolPanelState() {
|
||||
const {
|
||||
leftPanelView,
|
||||
isPanelVisible,
|
||||
searchQuery,
|
||||
filteredTools,
|
||||
setLeftPanelView,
|
||||
setSearchQuery,
|
||||
handleBackToTools
|
||||
} = useToolWorkflow();
|
||||
return {
|
||||
leftPanelView,
|
||||
isPanelVisible,
|
||||
searchQuery,
|
||||
filteredTools,
|
||||
setLeftPanelView,
|
||||
setSearchQuery,
|
||||
handleBackToTools
|
||||
};
|
||||
}
|
||||
|
||||
export function useWorkbenchState() {
|
||||
const {
|
||||
previewFile,
|
||||
pageEditorFunctions,
|
||||
sidebarsVisible,
|
||||
setPreviewFile,
|
||||
setPageEditorFunctions,
|
||||
setSidebarsVisible
|
||||
} = useToolWorkflow();
|
||||
return {
|
||||
previewFile,
|
||||
pageEditorFunctions,
|
||||
sidebarsVisible,
|
||||
setPreviewFile,
|
||||
setPageEditorFunctions,
|
||||
setSidebarsVisible
|
||||
};
|
||||
}
|
||||
@ -1,11 +1,10 @@
|
||||
import React, { useState, useCallback, useEffect, useRef } from "react";
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
|
||||
import { useToolManagement } from "../hooks/useToolManagement";
|
||||
import { ToolWorkflowProvider, useToolSelection } from "../contexts/ToolWorkflowContext";
|
||||
import { useFileHandler } from "../hooks/useFileHandler";
|
||||
import { Group } from "@mantine/core";
|
||||
import { PageEditorFunctions } from "../types/pageEditor";
|
||||
|
||||
import ToolPanel from "../components/tools/ToolPanel";
|
||||
import Workbench from "../components/layout/Workbench";
|
||||
@ -20,19 +19,7 @@ function HomePageContent() {
|
||||
const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
|
||||
const { addToActiveFiles } = useFileHandler();
|
||||
|
||||
const {
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
toolRegistry,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
} = useToolManagement();
|
||||
|
||||
const [sidebarsVisible, setSidebarsVisible] = useState(true);
|
||||
const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
|
||||
const [readerMode, setReaderMode] = useState(false);
|
||||
const [pageEditorFunctions, setPageEditorFunctions] = useState<PageEditorFunctions | null>(null);
|
||||
const [previewFile, setPreviewFile] = useState<File | null>(null);
|
||||
const { selectedTool, selectedToolKey } = useToolSelection();
|
||||
|
||||
// Update file selection context when tool changes
|
||||
useEffect(() => {
|
||||
@ -46,25 +33,8 @@ function HomePageContent() {
|
||||
}
|
||||
}, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
|
||||
|
||||
const handleToolSelect = useCallback(
|
||||
(id: string) => {
|
||||
selectTool(id);
|
||||
setCurrentView('fileEditor'); // Tools use fileEditor view for file selection
|
||||
setLeftPanelView('toolContent');
|
||||
setReaderMode(false);
|
||||
},
|
||||
[selectTool, setCurrentView]
|
||||
);
|
||||
|
||||
const handleQuickAccessTools = useCallback(() => {
|
||||
setLeftPanelView('toolPicker');
|
||||
setReaderMode(false);
|
||||
clearToolSelection();
|
||||
}, [clearToolSelection]);
|
||||
|
||||
const handleReaderToggle = useCallback(() => {
|
||||
setReaderMode(true);
|
||||
}, [readerMode]);
|
||||
// These handlers are now provided by the context
|
||||
// The context handles the coordination between tool selection and UI state
|
||||
|
||||
const handleViewChange = useCallback((view: string) => {
|
||||
setCurrentView(view as any);
|
||||
@ -76,41 +46,14 @@ function HomePageContent() {
|
||||
gap={0}
|
||||
className="min-h-screen w-screen overflow-hidden flex-nowrap flex"
|
||||
>
|
||||
<QuickAccessBar
|
||||
onToolsClick={handleQuickAccessTools}
|
||||
onReaderToggle={handleReaderToggle}
|
||||
selectedToolKey={selectedToolKey}
|
||||
toolRegistry={toolRegistry}
|
||||
leftPanelView={leftPanelView}
|
||||
readerMode={readerMode}
|
||||
/>
|
||||
<QuickAccessBar />
|
||||
|
||||
<ToolPanel
|
||||
visible={sidebarsVisible}
|
||||
readerMode={readerMode}
|
||||
leftPanelView={leftPanelView}
|
||||
selectedToolKey={selectedToolKey}
|
||||
selectedTool={selectedTool}
|
||||
toolRegistry={toolRegistry}
|
||||
onToolSelect={handleToolSelect}
|
||||
onBackToTools={handleQuickAccessTools}
|
||||
onPreviewFile={setPreviewFile}
|
||||
/>
|
||||
<ToolPanel />
|
||||
|
||||
<Workbench
|
||||
activeFiles={activeFiles}
|
||||
currentView={currentView}
|
||||
selectedToolKey={selectedToolKey}
|
||||
selectedTool={selectedTool}
|
||||
sidebarsVisible={sidebarsVisible}
|
||||
setSidebarsVisible={setSidebarsVisible}
|
||||
previewFile={previewFile}
|
||||
setPreviewFile={setPreviewFile}
|
||||
pageEditorFunctions={pageEditorFunctions}
|
||||
setPageEditorFunctions={setPageEditorFunctions}
|
||||
onViewChange={handleViewChange}
|
||||
onToolSelect={selectTool}
|
||||
onSetLeftPanelView={setLeftPanelView}
|
||||
onAddToActiveFiles={addToActiveFiles}
|
||||
/>
|
||||
|
||||
@ -120,11 +63,22 @@ function HomePageContent() {
|
||||
);
|
||||
}
|
||||
|
||||
// Main HomePage component wrapped with FileSelectionProvider
|
||||
// HomePage wrapper that connects context to file context
|
||||
function HomePageWrapper() {
|
||||
const { setCurrentView } = useFileContext();
|
||||
|
||||
return (
|
||||
<ToolWorkflowProvider onViewChange={setCurrentView}>
|
||||
<HomePageContent />
|
||||
</ToolWorkflowProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Main HomePage component wrapped with providers
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<FileSelectionProvider>
|
||||
<HomePageContent />
|
||||
<HomePageWrapper />
|
||||
</FileSelectionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user