Optimisation

frontend/src/components/layout/Workbench.tsx

@@ -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}
           />
         );
 

frontend/src/components/shared/QuickAccessBar.tsx

@@ -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>
 

frontend/src/components/tools/ToolPanel.tsx

@@ -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>

frontend/src/contexts/ToolWorkflowContext.tsx

@@ -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
+  };
+}

frontend/src/pages/HomePage.tsx

@@ -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>
   );
 }