File management groundwork

2026-07-16 11:23:10 +02:00 · 2025-05-15 23:12:39 +01:00
parent f789533c83
commit b5e7995554
7 changed files with 59151 additions and 63 deletions
@@ -1,8 +1,111 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Card, Group, Text, Stack, Image, Badge, Button, Box, Flex } from "@mantine/core";
+import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
+import { GlobalWorkerOptions, getDocument, version as pdfjsVersion } from "pdfjs-dist";
+GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;

-export default function FileManager({ files, setFiles, allowMultiple = true }) {
-  const handleFileUpload = (e) => {
-    const uploadedFiles = Array.from(e.target.files);
+function getFileDate(file) {
+  if (file.lastModified) {
+    return new Date(file.lastModified).toLocaleString();
+  }
+  return "Unknown";
+}
+
+function getFileSize(file) {
+  if (!file.size) return "Unknown";
+  if (file.size < 1024) return `${file.size} B`;
+  if (file.size < 1024 * 1024) return `${(file.size / 1024).toFixed(1)} KB`;
+  return `${(file.size / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function usePdfThumbnail(file) {
+  const [thumb, setThumb] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function generate() {
+      if (!file) return;
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await getDocument({ data: arrayBuffer }).promise;
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 0.5 });
+        const canvas = document.createElement("canvas");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const context = canvas.getContext("2d");
+        await page.render({ canvasContext: context, viewport }).promise;
+        if (!cancelled) setThumb(canvas.toDataURL());
+      } catch {
+        if (!cancelled) setThumb(null);
+      }
+    }
+    generate();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  return thumb;
+}
+
+function FileCard({ file, onRemove, onDoubleClick }) {
+  const thumb = usePdfThumbnail(file);
+
+  return (
+    <Card
+      shadow="xs"
+      radius="md"
+      withBorder
+      p="xs"
+      style={{ width: 225, minWidth: 180, maxWidth: 260, cursor: onDoubleClick ? "pointer" : undefined }}
+      onDoubleClick={onDoubleClick}
+    >
+      <Stack spacing={6} align="center">
+        <Box
+          style={{
+            border: "2px solid #e0e0e0",
+            borderRadius: 8,
+            width: 90,
+            height: 120,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0 auto",
+            background: "#fafbfc",
+          }}
+        >
+          {thumb ? (
+            <Image src={thumb} alt="PDF thumbnail" height={110} width={80} fit="contain" radius="sm" />
+          ) : (
+            <Image src="/images/pdf-placeholder.svg" alt="PDF" height={60} width={60} fit="contain" radius="sm" withPlaceholder />
+          )}
+        </Box>
+        <Text weight={500} size="sm" lineClamp={1} align="center">
+          {file.name}
+        </Text>
+        <Group spacing="xs" position="center">
+          <Badge color="gray" variant="light" size="sm">
+            {getFileSize(file)}
+          </Badge>
+          <Badge color="blue" variant="light" size="sm">
+            {getFileDate(file)}
+          </Badge>
+        </Group>
+        <Button
+          color="red"
+          size="xs"
+          variant="light"
+          onClick={onRemove}
+          mt={4}
+        >
+          Remove
+        </Button>
+      </Stack>
+    </Card>
+  );
+}
+
+export default function FileManager({ files = [], setFiles, allowMultiple = true, setPdfFile, setCurrentView }) {
+  const handleDrop = (uploadedFiles) => {
    setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
  };

@@ -11,27 +114,59 @@ export default function FileManager({ files, setFiles, allowMultiple = true }) {
  };

  return (
-    <div className="space-y-4 w-full max-w-3xl">
-      <input
-        type="file"
-        accept="application/pdf"
+    <div style={{ width: "100%", margin: "0 auto" }}>
+      <Dropzone
+        onDrop={handleDrop}
+        accept={[MIME_TYPES.pdf]}
        multiple={allowMultiple}
-        onChange={handleFileUpload}
-        className="block"
-      />
-      <ul className="list-disc pl-5 text-sm">
-        {files.map((file, index) => (
-          <li key={index} className="flex justify-between items-center">
-            {file.name}
-            <button
-              onClick={() => handleRemoveFile(index)}
-              className="text-red-600 hover:underline text-xs"
-            >
-              Remove
-            </button>
-          </li>
-        ))}
-      </ul>
+        maxSize={20 * 1024 * 1024}
+        style={{
+          marginBottom: 16,
+          border: "2px dashed rgb(202, 202, 202)",
+          background: "#f8fafc",
+          borderRadius: 8,
+          minHeight: 120,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Group position="center" spacing="xl" style={{ pointerEvents: "none" }}>
+          <Text size="md">
+            Drag PDF files here or click to select
+          </Text>
+        </Group>
+      </Dropzone>
+      {files.length === 0 ? (
+        <Text c="dimmed" align="center">
+          No files uploaded yet.
+        </Text>
+      ) : (
+        <Box>
+          <Flex
+            wrap="wrap"
+            gap="lg"
+            justify="flex-start"
+            style={{ width: "fit-content", margin: "0 auto" }}
+          >
+            {files.map((file, idx) => (
+              <FileCard
+                key={file.name + idx}
+                file={file}
+                onRemove={() => handleRemoveFile(idx)}
+                onDoubleClick={() => {
+                  const fileObj = file.file || file; // handle wrapped or raw File
+                  setPdfFile && setPdfFile({
+                    file: fileObj,
+                    url: URL.createObjectURL(fileObj),
+                  });
+                  setCurrentView && setCurrentView("viewer");
+                }}
+              />
+            ))}
+          </Flex>
+        </Box>
+      )}
    </div>
  );
 }
@@ -1,27 +1,112 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Paper, Stack, Text, ScrollArea, Loader, Center, Button, Group } from "@mantine/core";
+import { getDocument, GlobalWorkerOptions, version as pdfjsVersion } from "pdfjs-dist";
+
+GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;

 export default function Viewer({ pdfFile, setPdfFile }) {
-  return pdfFile ? (
-    <iframe
-      src={pdfFile.url}
-      title="PDF Viewer"
-      className="w-full h-full border-none"
-    />
-  ) : (
-    <label className="cursor-pointer text-blue-600 underline">
-      Click to upload a PDF
-      <input
-        type="file"
-        accept="application/pdf"
-        onChange={(e) => {
-          const file = e.target.files[0];
-          if (file && file.type === "application/pdf") {
-            const fileUrl = URL.createObjectURL(file);
-            setPdfFile({ file, url: fileUrl });
-          }
-        }}
-        className="hidden"
-      />
-    </label>
+  const [numPages, setNumPages] = useState(0);
+  const [pageImages, setPageImages] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function renderPages() {
+      if (!pdfFile || !pdfFile.url) {
+        setNumPages(0);
+        setPageImages([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const pdf = await getDocument(pdfFile.url).promise;
+        setNumPages(pdf.numPages);
+        const images = [];
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const viewport = page.getViewport({ scale: 1.2 });
+          const canvas = document.createElement("canvas");
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          const ctx = canvas.getContext("2d");
+          await page.render({ canvasContext: ctx, viewport }).promise;
+          images.push(canvas.toDataURL());
+        }
+        if (!cancelled) setPageImages(images);
+      } catch {
+        if (!cancelled) setPageImages([]);
+      }
+      if (!cancelled) setLoading(false);
+    }
+    renderPages();
+    return () => { cancelled = true; };
+  }, [pdfFile]);
+
+  return (
+    <Paper shadow="xs" radius="md" p="md" style={{ height: "100%", minHeight: 400, display: "flex", flexDirection: "column" }}>
+      {!pdfFile ? (
+        <Center style={{ flex: 1 }}>
+          <Stack align="center">
+            <Text color="dimmed">No PDF loaded. Click to upload a PDF.</Text>
+            <Button
+              component="label"
+              variant="outline"
+              color="blue"
+            >
+              Choose PDF
+              <input
+                type="file"
+                accept="application/pdf"
+                hidden
+                onChange={(e) => {
+                  const file = e.target.files[0];
+                  if (file && file.type === "application/pdf") {
+                    const fileUrl = URL.createObjectURL(file);
+                    setPdfFile({ file, url: fileUrl });
+                  }
+                }}
+              />
+            </Button>
+          </Stack>
+        </Center>
+      ) : loading ? (
+        <Center style={{ flex: 1 }}>
+          <Loader size="lg" />
+        </Center>
+      ) : (
+        <ScrollArea style={{ flex: 1, height: "100%" }}>
+          <Stack spacing="xl" align="center">
+            {pageImages.length === 0 && (
+              <Text color="dimmed">No pages to display.</Text>
+            )}
+            {pageImages.map((img, idx) => (
+              <img
+                key={idx}
+                src={img}
+                alt={`Page ${idx + 1}`}
+                style={{
+                  width: "100%",
+                  maxWidth: 700,
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+                  borderRadius: 8,
+                  background: "#fff"
+                }}
+              />
+            ))}
+          </Stack>
+        </ScrollArea>
+      )}
+      {pdfFile && (
+        <Group position="right" mt="md">
+          <Button
+            variant="light"
+            color="red"
+            onClick={() => setPdfFile(null)}
+          >
+            Close PDF
+          </Button>
+        </Group>
+      )}
+    </Paper>
  );
 }
@@ -66,6 +66,12 @@ export default function HomePage() {
          borderRight: "1px solid #e9ecef",
          minHeight: "100vh",
          padding: 16,
+          position: "fixed",
+          left: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: 100,
+          overflowY: "auto",
        }}
      >
        <Text size="lg" weight={500} mb="md">
@@ -94,12 +100,15 @@ export default function HomePage() {
      {/* Middle: Main View (Viewer, Editor, Manager) */}
      <Box
        style={{
-          flex: 1,
-          minWidth: 0,
+          width: "calc(100vw - 220px - 380px)",
+          marginLeft: 220,
+          marginRight: 380,
          padding: 24,
          background: "#fff",
-          minHeight: "100vh",
          position: "relative",
+          minHeight: "100vh",
+          height: "100vh",
+          overflowY: "auto",
        }}
      >
        <Center>
@@ -126,32 +135,37 @@ export default function HomePage() {
          </Paper>
        </Center>
        <Box>
-          {currentView === "viewer" && (
+          {(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? (
+            <FileManager
+              files={files}
+              setFiles={setFiles}
+              setPdfFile={setPdfFile}
+              setCurrentView={setCurrentView}
+            />
+          ) : currentView === "viewer" ? (
            <Viewer
-              file={pdfFile}
-              setFile={setPdfFile}
+              pdfFile={pdfFile}
+              setPDFFile={setPdfFile}
              downloadUrl={downloadUrl}
              setDownloadUrl={setDownloadUrl}
            />
-          )}
-          {currentView === "pageEditor" && (
+          ) : currentView === "pageEditor" ? (
            <PageEditor
              file={pdfFile}
              setFile={setPdfFile}
              downloadUrl={downloadUrl}
              setDownloadUrl={setDownloadUrl}
            />
-          )}
-          {currentView === "fileManager" && (
+          ) : (
            <FileManager
              files={files}
              setFiles={setFiles}
              setPdfFile={setPdfFile}
+              setCurrentView={setCurrentView}
            />
          )}
        </Box>
      </Box>
-
      {/* Right: Tool Interaction */}
      <Box
        style={{
@@ -160,10 +174,17 @@ export default function HomePage() {
          borderLeft: "1px solid #e9ecef",
          minHeight: "100vh",
          padding: 24,
+          gap: 16,
+          position: "fixed",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: 100,
+          overflowY: "auto",
        }}
      >
        {selectedTool && selectedTool.component && (
-          <Paper p="md" radius="md" shadow="xs">
+          <>
            {React.createElement(selectedTool.component, {
              file: pdfFile,
              setPdfFile,
@@ -172,7 +193,7 @@ export default function HomePage() {
              downloadUrl,
              setDownloadUrl,
            })}
-          </Paper>
+            </>
        )}
      </Box>
    </Group>
@@ -89,7 +89,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
  return (
    <form onSubmit={handleSubmit} >
      <h3 className="font-semibold">Split PDF</h3>
-
+      <Stack spacing="sm" mb={16}>
      <Select
        label="Split Mode"
        value={mode}
@@ -111,7 +111,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
      )}

      {mode === "bySections" && (
-        <Stack spacing="sm">
+        <Stack spacing="sm" gap={16}>
          <TextInput
            label="Horizontal Divisions"
            type="number"
@@ -137,7 +137,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
      )}

      {mode === "bySizeOrCount" && (
-        <Stack spacing="sm">
+        <Stack spacing="sm" gap={16}>
          <Select
            label="Split Type"
            value={splitType}
@@ -202,6 +202,7 @@ export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
          Download Split PDF
        </Button>
      )}
+      </Stack>
    </form>
  );
 }