V2 Restructure homepage (#4138)

Component Extraction & Context Refactor - Summary

  🔧 What We Did

- Extracted HomePage's 286-line monolithic component into focused parts
  - Created ToolPanel (105 lines) for tool selection UI
  - Created Workbench (203 lines) for view management
  - Created ToolWorkflowContext (220 lines) for centralized state
  - Reduced HomePage to 60 lines of provider setup
  - Eliminated all prop drilling - components use contexts directly

  🏆 Why This is Good

- Maintainability: Each component has single purpose, easy
debugging/development
- Architecture: Clean separation of concerns, future features easier to
add
- Code Quality: 105% more lines but organized/purposeful vs tangled
spaghetti code

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>

frontend/src/pages/HomePage.tsx

@@ -1,57 +1,26 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { useTranslation } from 'react-i18next';
+import React, { useEffect } from "react";
 import { useFileContext } from "../contexts/FileContext";
 import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
+import { ToolWorkflowProvider, useToolSelection } from "../contexts/ToolWorkflowContext";
+import { Group } from "@mantine/core";
 import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
-import { useToolManagement } from "../hooks/useToolManagement";
-import { useFileHandler } from "../hooks/useFileHandler";
-import { Group, Box, Button } from "@mantine/core";
-import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
-import { PageEditorFunctions } from "../types/pageEditor";
-import { SidebarRefs, SidebarState } from "../types/sidebar";
-import rainbowStyles from '../styles/rainbow.module.css';
 
-import ToolPicker from "../components/tools/ToolPicker";
-import TopControls from "../components/shared/TopControls";
-import FileEditor from "../components/fileEditor/FileEditor";
-import PageEditor from "../components/pageEditor/PageEditor";
-import PageEditorControls from "../components/pageEditor/PageEditorControls";
-import Viewer from "../components/viewer/Viewer";
-import ToolRenderer from "../components/tools/ToolRenderer";
+import ToolPanel from "../components/tools/ToolPanel";
+import Workbench from "../components/layout/Workbench";
 import QuickAccessBar from "../components/shared/QuickAccessBar";
-import LandingPage from "../components/shared/LandingPage";
 import FileManager from "../components/FileManager";
 
 
 function HomePageContent() {
-  const { t } = useTranslation();
-  const { isRainbowMode } = useRainbowThemeContext();
   const { 
-    sidebarState, 
     sidebarRefs, 
-    setSidebarsVisible, 
-    setLeftPanelView, 
-    setReaderMode 
   } = useSidebarContext();
   
-  const { sidebarsVisible, leftPanelView, readerMode } = sidebarState;
-  const { quickAccessRef, toolPanelRef } = sidebarRefs;
+  const { quickAccessRef } = sidebarRefs;
 
-  const fileContext = useFileContext();
-  const { activeFiles, currentView, setCurrentView } = fileContext;
   const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
-  const { addToActiveFiles } = useFileHandler();
 
-  const {
-    selectedToolKey,
-    selectedTool,
-    toolRegistry,
-    selectTool,
-    clearToolSelection,
-  } = useToolManagement();
-
-  const [pageEditorFunctions, setPageEditorFunctions] = useState<PageEditorFunctions | null>(null);
-  const [previewFile, setPreviewFile] = useState<File | null>(null);
+  const { selectedTool } = useToolSelection();
 
   // Update file selection context when tool changes
   useEffect(() => {
@@ -65,232 +34,30 @@ 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]);
-
-  const handleViewChange = useCallback((view: string) => {
-    setCurrentView(view as any);
-  }, [setCurrentView]);
-
-
-
-
   return (
     <Group
       align="flex-start"
       gap={0}
       className="min-h-screen w-screen overflow-hidden flex-nowrap flex"
     >
-      {/* Quick Access Bar */}
       <QuickAccessBar
-        ref={quickAccessRef}
-        onToolsClick={handleQuickAccessTools}
-        onReaderToggle={handleReaderToggle}
-      />
-
-      {/* Left: Tool Picker or Selected Tool Panel */}
-      <div
-        ref={toolPanelRef}
-        data-sidebar="tool-panel"
-        className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
-        style={{
-          width: sidebarsVisible && !readerMode ? '14vw' : '0',
-          padding: sidebarsVisible && !readerMode ? '0.5rem' : '0'
-        }}
-      >
-          <div
-            style={{
-              opacity: sidebarsVisible && !readerMode ? 1 : 0,
-              transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column'
-            }}
-          >
-            {leftPanelView === 'toolPicker' ? (
-              // Tool Picker View
-              <div className="flex-1 flex flex-col">
-                <ToolPicker
-                  selectedToolKey={selectedToolKey}
-                  onSelect={handleToolSelect}
-                  toolRegistry={toolRegistry}
-                />
-              </div>
-            ) : (
-              // Selected Tool Content View
-              <div className="flex-1 flex flex-col">
-                {/* Back button */}
-                <div className="mb-4">
-                  <Button
-                    variant="subtle"
-                    size="sm"
-                    onClick={handleQuickAccessTools}
-                    className="text-sm"
-                  >
-                    ← {t("fileUpload.backToTools", "Back to Tools")}
-                  </Button>
-                </div>
-
-                {/* Tool title */}
-                <div className="mb-4" style={{ marginLeft: '0.5rem' }}>
-                  <h2 className="text-lg font-semibold">{selectedTool?.name}</h2>
-                </div>
-
-                {/* Tool content */}
-                <div className="flex-1 min-h-0">
-                  <ToolRenderer
-                    selectedToolKey={selectedToolKey}
-                    onPreviewFile={setPreviewFile}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-      </div>
-
-      {/* Main View */}
-      <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={handleViewChange}
-          selectedToolKey={selectedToolKey}
-        />
-        {/* Main content area */}
-          <Box
-            className="flex-1 min-h-0 relative z-10"
-            style={{
-              transition: 'opacity 0.15s ease-in-out',
-            }}
-          >
-            {!activeFiles[0] ? (
-              <LandingPage
-                title={currentView === "viewer"
-                  ? t("fileUpload.selectPdfToView", "Select a PDF to view")
-                  : t("fileUpload.selectPdfToEdit", "Select a PDF to edit")
-                }
-              />
-            ) : currentView === "fileEditor" ? (
-              <FileEditor
-                toolMode={!!selectedToolKey}
-                showUpload={true}
-                showBulkActions={!selectedToolKey}
-                supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
-                {...(!selectedToolKey && {
-                  onOpenPageEditor: (file) => {
-                    handleViewChange("pageEditor");
-                  },
-                  onMergeFiles: (filesToMerge) => {
-                    filesToMerge.forEach(addToActiveFiles);
-                    handleViewChange("viewer");
-                  }
-                })}
-              />
-            ) :  currentView === "viewer" ? (
-              <Viewer
-                sidebarsVisible={sidebarsVisible}
-                setSidebarsVisible={setSidebarsVisible}
-                previewFile={previewFile}
-                {...(previewFile && {
-                  onClose: () => {
-                    setPreviewFile(null); // Clear preview file
-                    const previousMode = sessionStorage.getItem('previousMode');
-                    if (previousMode === 'split') {
-                      selectTool('split');
-                      setCurrentView('split');
-                      setLeftPanelView('toolContent');
-                      sessionStorage.removeItem('previousMode');
-                    } else if (previousMode === 'compress') {
-                      selectTool('compress');
-                      setCurrentView('compress');
-                      setLeftPanelView('toolContent');
-                      sessionStorage.removeItem('previousMode');
-                    } else if (previousMode === 'convert') {
-                      selectTool('convert');
-                      setCurrentView('convert');
-                      setLeftPanelView('toolContent');
-                      sessionStorage.removeItem('previousMode');
-                    } else {
-                      setCurrentView('fileEditor');
-                    }
-                  }
-                })}
-              />
-            ) : currentView === "pageEditor" ? (
-              <>
-                <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}
-                  />
-                )}
-              </>
-            ) : selectedToolKey && selectedTool ? (
-              // Fallback: if tool is selected but not in fileEditor view, show tool in main area
-              <ToolRenderer
-                selectedToolKey={selectedToolKey}
-              />
-            ) : (
-              <LandingPage 
-                title="File Management" 
-              />
-            )}
-          </Box>
-      </Box>
-
-      {/* Global Modals */}
+        ref={quickAccessRef} />
+      <ToolPanel />
+      <Workbench />
       <FileManager selectedTool={selectedTool} />
     </Group>
   );
 }
 
-// Main HomePage component wrapped with FileSelectionProvider
 export default function HomePage() {
+  const { setCurrentView } = useFileContext();
   return (
     <FileSelectionProvider>
-      <SidebarProvider>
-        <HomePageContent />
-      </SidebarProvider>
+      <ToolWorkflowProvider onViewChange={setCurrentView}>
+        <SidebarProvider>
+          <HomePageContent />
+        </SidebarProvider>
+      </ToolWorkflowProvider>
     </FileSelectionProvider>
   );
 }