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 <[email protected]>
Co-authored-by: James Brunton <[email protected]>

frontend/src/components/layout/Workbench.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { Box } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
+import { useWorkbenchState, useToolSelection } 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
+  } = useWorkbenchState();
+  
+  const { selectedToolKey, selectedTool, handleToolSelect } = useToolSelection();
+  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}
+        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>
+  );
+}