Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

250 lines
9.3 KiB
TypeScript
Raw Normal View History

import React, { useState, useCallback, useEffect } from "react";
2025-05-29 17:26:32 +01:00
import { useTranslation } from 'react-i18next';
import { useSearchParams } from "react-router-dom";
2025-06-05 21:59:18 +01:00
import { useToolParams } from "../hooks/useToolParams";
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
import ContentCutIcon from "@mui/icons-material/ContentCut";
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
2025-06-09 18:38:06 +01:00
import { Group, Paper, Box, Button, useMantineTheme } from "@mantine/core";
import { useRainbowThemeContext } from "../components/RainbowThemeProvider";
import rainbowStyles from '../styles/rainbow.module.css';
import ToolPicker from "../components/ToolPicker";
import FileManager from "../components/FileManager";
import SplitPdfPanel from "../tools/Split";
import CompressPdfPanel from "../tools/Compress";
import MergePdfPanel from "../tools/Merge";
import PageEditor from "../components/PageEditor";
2025-06-19 19:47:44 +01:00
import PageEditorControls from "../components/PageEditorControls";
import Viewer from "../components/Viewer";
2025-06-05 21:59:18 +01:00
import TopControls from "../components/TopControls";
import ToolRenderer from "../components/ToolRenderer";
import QuickAccessBar from "../components/QuickAccessBar";
type ToolRegistryEntry = {
icon: React.ReactNode;
name: string;
component: React.ComponentType<any>;
view: string;
};
type ToolRegistry = {
[key: string]: ToolRegistryEntry;
};
2025-05-29 17:26:32 +01:00
// Base tool registry without translations
const baseToolRegistry = {
split: { icon: <ContentCutIcon />, component: SplitPdfPanel, view: "viewer" },
compress: { icon: <ZoomInMapIcon />, component: CompressPdfPanel, view: "viewer" },
merge: { icon: <AddToPhotosIcon />, component: MergePdfPanel, view: "fileManager" },
};
export default function HomePage() {
2025-05-29 17:26:32 +01:00
const { t } = useTranslation();
2025-06-05 21:59:18 +01:00
const [searchParams] = useSearchParams();
const theme = useMantineTheme();
2025-06-09 18:38:06 +01:00
const { isRainbowMode } = useRainbowThemeContext();
// Core app state
2025-06-05 21:59:18 +01:00
const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("t") || "split");
const [currentView, setCurrentView] = useState<string>(searchParams.get("v") || "viewer");
const [pdfFile, setPdfFile] = useState<any>(null);
const [files, setFiles] = useState<any[]>([]);
const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
const [sidebarsVisible, setSidebarsVisible] = useState(true);
const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
const [readerMode, setReaderMode] = useState(false);
2025-06-19 19:47:44 +01:00
// Page editor functions
const [pageEditorFunctions, setPageEditorFunctions] = useState<any>(null);
2025-06-05 21:59:18 +01:00
// URL parameter management
const { toolParams, updateParams } = useToolParams(selectedToolKey, currentView);
2025-06-05 21:59:18 +01:00
const toolRegistry: ToolRegistry = {
split: { ...baseToolRegistry.split, name: t("home.split.title", "Split PDF") },
compress: { ...baseToolRegistry.compress, name: t("home.compressPdfs.title", "Compress PDF") },
merge: { ...baseToolRegistry.merge, name: t("home.merge.title", "Merge PDFs") },
};
// Handle tool selection
const handleToolSelect = useCallback(
(id: string) => {
setSelectedToolKey(id);
if (toolRegistry[id]?.view) setCurrentView(toolRegistry[id].view);
setLeftPanelView('toolContent'); // Switch to tool content view when a tool is selected
setReaderMode(false); // Exit reader mode when selecting a tool
},
[toolRegistry]
);
// Handle quick access actions
const handleQuickAccessTools = useCallback(() => {
setLeftPanelView('toolPicker');
setReaderMode(false);
}, []);
const handleReaderToggle = useCallback(() => {
setReaderMode(!readerMode);
}, [readerMode]);
const selectedTool = toolRegistry[selectedToolKey];
return (
2025-05-28 21:43:02 +01:00
<Group
align="flex-start"
gap={0}
2025-06-06 17:20:06 +01:00
className="min-h-screen w-screen overflow-hidden flex-nowrap flex"
2025-05-28 21:43:02 +01:00
>
{/* Quick Access Bar */}
<QuickAccessBar
onToolsClick={handleQuickAccessTools}
onReaderToggle={handleReaderToggle}
selectedToolKey={selectedToolKey}
toolRegistry={toolRegistry}
leftPanelView={leftPanelView}
readerMode={readerMode}
/>
{/* Left: Tool Picker OR Selected Tool Panel */}
2025-06-18 18:12:15 +01:00
<div
className={`h-screen z-sticky flex flex-col ${isRainbowMode ? rainbowStyles.rainbowPaper : ''} overflow-hidden`}
style={{
backgroundColor: 'var(--bg-surface)',
borderRight: '1px solid var(--border-subtle)',
width: sidebarsVisible && !readerMode ? '25vw' : '0px',
minWidth: sidebarsVisible && !readerMode ? '300px' : '0px',
maxWidth: sidebarsVisible && !readerMode ? '450px' : '0px',
transition: 'width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), min-width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), max-width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
padding: sidebarsVisible && !readerMode ? '1rem' : '0rem'
}}
>
<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}
2025-06-18 18:12:15 +01:00
onSelect={handleToolSelect}
toolRegistry={toolRegistry}
/>
</div>
2025-06-18 18:12:15 +01:00
) : (
// Selected Tool Content View
<div className="flex-1 flex flex-col">
{/* Back button */}
<div className="mb-4">
<Button
variant="subtle"
size="sm"
onClick={() => setLeftPanelView('toolPicker')}
className="text-sm"
>
Back to Tools
</Button>
</div>
{/* Tool title */}
<div className="mb-4">
<h2 className="text-lg font-semibold">{selectedTool?.name}</h2>
</div>
{/* Tool content */}
<div className="flex-1 min-h-0">
<ToolRenderer
selectedToolKey={selectedToolKey}
selectedTool={selectedTool}
pdfFile={pdfFile}
files={files}
downloadUrl={downloadUrl}
setDownloadUrl={setDownloadUrl}
toolParams={toolParams}
updateParams={updateParams}
/>
</div>
</div>
)}
</div>
</div>
{/* Main View */}
<Box
2025-06-18 18:12:15 +01:00
className="flex-1 h-screen min-w-80 relative flex flex-col"
style={{
backgroundColor: 'var(--bg-background)'
}}
>
2025-06-05 21:59:18 +01:00
{/* Top Controls */}
<TopControls
currentView={currentView}
setCurrentView={setCurrentView}
/>
2025-05-28 21:43:02 +01:00
{/* Main content area */}
2025-06-08 13:45:45 +01:00
<Box className="flex-1 min-h-0 margin-top-200 relative z-10">
{(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
) : currentView === "viewer" ? (
<Viewer
pdfFile={pdfFile}
setPdfFile={setPdfFile}
sidebarsVisible={sidebarsVisible}
setSidebarsVisible={setSidebarsVisible}
/>
) : currentView === "pageEditor" ? (
2025-06-19 19:47:44 +01:00
<>
<PageEditor
file={pdfFile}
setFile={setPdfFile}
downloadUrl={downloadUrl}
setDownloadUrl={setDownloadUrl}
onFunctionsReady={setPageEditorFunctions}
/>
{pdfFile && 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.showExportPreview(true)}
onExportAll={() => pageEditorFunctions.showExportPreview(false)}
exportLoading={pageEditorFunctions.exportLoading}
selectionMode={pageEditorFunctions.selectionMode}
selectedPages={pageEditorFunctions.selectedPages}
/>
)}
</>
) : (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
)}
</Box>
</Box>
</Group>
);
}