Restructure homepage

frontend/src/components/layout/Workbench.tsx

@@ -0,0 +1,203 @@
+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 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';
+
+interface WorkbenchProps {
+  /** Currently active files */
+  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;
+}
+
+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();
+
+  const handlePreviewClose = () => {
+    setPreviewFile(null);
+    const previousMode = sessionStorage.getItem('previousMode');
+    if (previousMode === 'split') {
+      onToolSelect('split');
+      onViewChange('split');
+      onSetLeftPanelView('toolContent');
+      sessionStorage.removeItem('previousMode');
+    } else if (previousMode === 'compress') {
+      onToolSelect('compress');
+      onViewChange('compress');
+      onSetLeftPanelView('toolContent');
+      sessionStorage.removeItem('previousMode');
+    } else if (previousMode === 'convert') {
+      onToolSelect('convert');
+      onViewChange('convert');
+      onSetLeftPanelView('toolContent');
+      sessionStorage.removeItem('previousMode');
+    } else {
+      onViewChange('fileEditor');
+    }
+  };
+
+  const renderMainContent = () => {
+    if (!activeFiles[0]) {
+      return (
+        <LandingPage
+          title={currentView === "viewer"
+            ? t("fileUpload.selectPdfToView", "Select a PDF to view")
+            : t("fileUpload.selectPdfToEdit", "Select a PDF to edit")
+          }
+        />
+      );
+    }
+
+    switch (currentView) {
+      case "fileEditor":
+        return (
+          <FileEditor
+            toolMode={!!selectedToolKey}
+            showUpload={true}
+            showBulkActions={!selectedToolKey}
+            supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
+            {...(!selectedToolKey && {
+              onOpenPageEditor: (file) => {
+                onViewChange("pageEditor");
+              },
+              onMergeFiles: (filesToMerge) => {
+                filesToMerge.forEach(onAddToActiveFiles);
+                onViewChange("viewer");
+              }
+            })}
+          />
+        );
+
+      case "viewer":
+        return (
+          <Viewer
+            sidebarsVisible={sidebarsVisible}
+            setSidebarsVisible={setSidebarsVisible}
+            previewFile={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 
+            title="File Management" 
+          />
+        );
+    }
+  };
+
+  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={onViewChange}
+        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>
+  );
+}

frontend/src/components/tools/ToolPanel.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Button, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
+import { ToolRegistry, ToolConfiguration } from '../../types/tool';
+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;
+}
+
+export default function ToolPanel({
+  visible,
+  readerMode,
+  leftPanelView,
+  selectedToolKey,
+  selectedTool,
+  toolRegistry,
+  onToolSelect,
+  onBackToTools,
+  onPreviewFile
+}: ToolPanelProps) {
+  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())
+  );
+
+  return (
+    <div
+      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: visible && !readerMode ? '20rem' : '0',
+        padding: visible && !readerMode ? '0.5rem' : '0'
+      }}
+    >
+      <div
+        style={{
+          opacity: visible && !readerMode ? 1 : 0,
+          transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        {/* Search Bar - Always visible at the top */}
+        <div className="mb-4">
+          <TextInput
+            placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            autoComplete="off"
+            size="sm"
+          />
+        </div>
+
+        {leftPanelView === 'toolPicker' ? (
+          // Tool Picker View
+          <div className="flex-1 flex flex-col">
+            <ToolPicker
+              selectedToolKey={selectedToolKey}
+              onSelect={onToolSelect}
+              filteredTools={filteredTools}
+            />
+          </div>
+        ) : (
+          // Selected Tool Content View
+          <div className="flex-1 flex flex-col">
+            {/* Tool content */}
+            <div className="flex-1 min-h-0">
+              <ToolRenderer
+                selectedToolKey={selectedToolKey}
+                onPreviewFile={onPreviewFile}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/tools/ToolPicker.tsx

@@ -1,32 +1,21 @@
-import React, { useState } from "react";
+import React from "react";
-import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
+import { Box, Text, Stack, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ToolRegistry } from "../../types/tool";
 
 interface ToolPickerProps {
   selectedToolKey: string | null;
   onSelect: (id: string) => void;
-  toolRegistry: ToolRegistry;
+  /** Pre-filtered tools to display */
+  filteredTools: [string, ToolRegistry[string]][];
 }
 
-const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps) => {
+const ToolPicker = ({ selectedToolKey, onSelect, filteredTools }: ToolPickerProps) => {
   const { t } = useTranslation();
-  const [search, setSearch] = useState("");
-
-  const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
-    name.toLowerCase().includes(search.toLowerCase())
-  );
 
   return (
-    <Box >
+    <Box>
-      <TextInput
+      <Stack align="flex-start">
-        placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-        mb="md"
-        autoComplete="off"
-      />
-      <Stack  align="flex-start">
         {filteredTools.length === 0 ? (
           <Text c="dimmed" size="sm">
             {t("toolPicker.noToolsFound", "No tools found")}

frontend/src/pages/HomePage.tsx

@@ -4,25 +4,16 @@ import { useFileContext } from "../contexts/FileContext";
 import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
 import { useToolManagement } from "../hooks/useToolManagement";
 import { useFileHandler } from "../hooks/useFileHandler";
-import { Group, Box, Button } from "@mantine/core";
+import { Group } 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";
+import ToolPanel from "../components/tools/ToolPanel";
-import TopControls from "../components/shared/TopControls";
+import Workbench from "../components/layout/Workbench";
-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 QuickAccessBar from "../components/shared/QuickAccessBar";
-import LandingPage from "../components/shared/LandingPage";
 import FileUploadModal from "../components/shared/FileUploadModal";
 
 function HomePageContent() {
   const { t } = useTranslation();
-  const { isRainbowMode } = useRainbowThemeContext();
 
   const fileContext = useFileContext();
   const { activeFiles, currentView, setCurrentView } = fileContext;
@@ -55,8 +46,6 @@ function HomePageContent() {
     }
   }, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
 
-
-
   const handleToolSelect = useCallback(
     (id: string) => {
       selectTool(id);
@@ -81,16 +70,12 @@ function HomePageContent() {
     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
         onToolsClick={handleQuickAccessTools}
         onReaderToggle={handleReaderToggle}
@@ -100,174 +85,34 @@ function HomePageContent() {
         readerMode={readerMode}
       />
 
-      {/* Left: Tool Picker or Selected Tool Panel */}
+      <ToolPanel
-      <div
+        visible={sidebarsVisible}
-        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 : ''}`}
+        readerMode={readerMode}
-        style={{
+        leftPanelView={leftPanelView}
-          width: sidebarsVisible && !readerMode ? '14vw' : '0',
+        selectedToolKey={selectedToolKey}
-          padding: sidebarsVisible && !readerMode ? '0.5rem' : '0'
+        selectedTool={selectedTool}
-        }}
+        toolRegistry={toolRegistry}
-      >
+        onToolSelect={handleToolSelect}
-          <div
+        onBackToTools={handleQuickAccessTools}
-            style={{
+        onPreviewFile={setPreviewFile}
-              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 */}
+      <Workbench
-                <div className="mb-4" style={{ marginLeft: '0.5rem' }}>
+        activeFiles={activeFiles}
-                  <h2 className="text-lg font-semibold">{selectedTool?.name}</h2>
+        currentView={currentView}
-                </div>
+        selectedToolKey={selectedToolKey}
-
+        selectedTool={selectedTool}
-                {/* Tool content */}
+        sidebarsVisible={sidebarsVisible}
-                <div className="flex-1 min-h-0">
+        setSidebarsVisible={setSidebarsVisible}
-                  <ToolRenderer
+        previewFile={previewFile}
-                    selectedToolKey={selectedToolKey}
+        setPreviewFile={setPreviewFile}
-                    onPreviewFile={setPreviewFile}
+        pageEditorFunctions={pageEditorFunctions}
-                  />
+        setPageEditorFunctions={setPageEditorFunctions}
-                </div>
+        onViewChange={handleViewChange}
-              </div>
+        onToolSelect={selectTool}
-            )}
+        onSetLeftPanelView={setLeftPanelView}
-          </div>
+        onAddToActiveFiles={addToActiveFiles}
-      </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 */}
       <FileUploadModal selectedTool={selectedTool} />