From d00a7e2783a5db5692c8bbaac7e7b9c14a4acbcc Mon Sep 17 00:00:00 2001
From: rehlert <post@rehlert.de>
Date: Fri, 12 Jun 2026 12:31:44 +0200
Subject: [PATCH] renders preview of zips

---
 .idea/workspace.xml                           |  18 ++-
 package.json                                  |   3 +-
 pnpm-lock.yaml                                | 134 +++++++++++++++++
 src/lib/components/AttachmentPreview.svelte   |  89 ++++++++++++
 .../ProcessedZipArchiveEditor.svelte          | 136 ++++++++++++++++++
 src/routes/+page.svelte                       |  20 ++-
 6 files changed, 389 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/AttachmentPreview.svelte
 create mode 100644 src/lib/components/ProcessedZipArchiveEditor.svelte

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6fb4981..b672b2e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,7 +3,8 @@
   <component name="ChangeListManager">
     <list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/zip-processing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/zip-processing.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -50,7 +51,7 @@
       <option name="presentableId" value="Default" />
       <updated>1781169139290</updated>
       <workItem from="1781169141138" duration="309000" />
-      <workItem from="1781251694220" duration="7259000" />
+      <workItem from="1781251694220" duration="7924000" />
     </task>
     <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
       <option name="closed" value="true" />
@@ -76,7 +77,15 @@
       <option name="project" value="LOCAL" />
       <updated>1781258303003</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="parses xjustiz and orders attachments">
+      <option name="closed" value="true" />
+      <created>1781259433444</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1781259433444</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -89,7 +98,8 @@
     <MESSAGE value="adapts styling of rvg.legal" />
     <MESSAGE value="adds dropzone to add zips" />
     <MESSAGE value="zips are getting extracted" />
-    <option name="LAST_COMMIT_MESSAGE" value="zips are getting extracted" />
+    <MESSAGE value="parses xjustiz and orders attachments" />
+    <option name="LAST_COMMIT_MESSAGE" value="parses xjustiz and orders attachments" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
diff --git a/package.json b/package.json
index 57060a1..58a5eec 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 	"dependencies": {
 		"@skeletonlabs/skeleton": "^4.15.2",
 		"@skeletonlabs/skeleton-svelte": "^4.15.2",
-		"fflate": "^0.8.3"
+		"fflate": "^0.8.3",
+		"pdfjs-dist": "^6.0.227"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7eeef8e..f9df5cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       fflate:
         specifier: ^0.8.3
         version: 0.8.3
+      pdfjs-dist:
+        specifier: ^6.0.227
+        version: 6.0.227
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.1
@@ -100,6 +103,81 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@napi-rs/canvas-android-arm64@1.0.0':
+    resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@1.0.0':
+    resolution: {integrity: sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@1.0.0':
+    resolution: {integrity: sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
+    resolution: {integrity: sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.0.0':
+    resolution: {integrity: sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@1.0.0':
+    resolution: {integrity: sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
+    resolution: {integrity: sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@1.0.0':
+    resolution: {integrity: sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@1.0.0':
+    resolution: {integrity: sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.0.0':
+    resolution: {integrity: sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@1.0.0':
+    resolution: {integrity: sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@1.0.0':
+    resolution: {integrity: sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg==}
+    engines: {node: '>= 10'}
+
   '@napi-rs/wasm-runtime@1.1.5':
     resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
     peerDependencies:
@@ -720,6 +798,10 @@ packages:
     resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
     engines: {node: '>=12.20.0'}
 
+  pdfjs-dist@6.0.227:
+    resolution: {integrity: sha512-/P6M4SXw+70waMVLUM7rdRtvo+dEzqE1t6W/zQNvBETo2MaRa5rrvCcAYdfWGiUzadTgM0lJmRApUrW0d9zgKg==}
+    engines: {node: '>=22.13.0 || >=24'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -973,6 +1055,54 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@napi-rs/canvas-android-arm64@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@1.0.0':
+    optional: true
+
+  '@napi-rs/canvas@1.0.0':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 1.0.0
+      '@napi-rs/canvas-darwin-arm64': 1.0.0
+      '@napi-rs/canvas-darwin-x64': 1.0.0
+      '@napi-rs/canvas-linux-arm-gnueabihf': 1.0.0
+      '@napi-rs/canvas-linux-arm64-gnu': 1.0.0
+      '@napi-rs/canvas-linux-arm64-musl': 1.0.0
+      '@napi-rs/canvas-linux-riscv64-gnu': 1.0.0
+      '@napi-rs/canvas-linux-x64-gnu': 1.0.0
+      '@napi-rs/canvas-linux-x64-musl': 1.0.0
+      '@napi-rs/canvas-win32-arm64-msvc': 1.0.0
+      '@napi-rs/canvas-win32-x64-msvc': 1.0.0
+    optional: true
+
   '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -1656,6 +1786,10 @@ snapshots:
 
   obug@2.1.2: {}
 
+  pdfjs-dist@6.0.227:
+    optionalDependencies:
+      '@napi-rs/canvas': 1.0.0
+
   picocolors@1.1.1: {}
 
   picomatch@4.0.4: {}
diff --git a/src/lib/components/AttachmentPreview.svelte b/src/lib/components/AttachmentPreview.svelte
new file mode 100644
index 0000000..e8ddec7
--- /dev/null
+++ b/src/lib/components/AttachmentPreview.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    import type {ZipAttachment} from "$lib/zip-processing";
+
+    type Props = {
+        attachment: ZipAttachment;
+    };
+
+    let {attachment}: Props = $props();
+
+    let canvasElement = $state<HTMLCanvasElement | null>(null);
+    let imageUrl = $state<string | null>(null);
+    let previewError = $state<string | null>(null);
+
+    onMount(() => {
+        let objectUrl: string | null = null;
+        let cancelled = false;
+        (async () => {
+            // This prevents the code from running on the server (SSR)
+            const pdfjsLib = await import("pdfjs-dist");
+            const {getDocument, GlobalWorkerOptions} = pdfjsLib;
+
+            // Import the worker URL dynamically as well
+            const pdfWorkerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then(m => m.default);
+            GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
+
+
+            const loadPreview = async () => {
+                previewError = null;
+
+                if (attachment.kind === "image") {
+                    objectUrl = URL.createObjectURL(new Blob([attachment.data as unknown as ArrayBuffer]));
+                    imageUrl = objectUrl;
+                    return;
+                }
+
+                try {
+                    // Use the imported getDocument
+                    const loadingTask = getDocument({data: attachment.data});
+                    const pdfDocument = await loadingTask.promise;
+                    const page = await pdfDocument.getPage(1);
+
+                    if (cancelled || !canvasElement) {
+                        void loadingTask.destroy();
+                        return;
+                    }
+
+                    const viewport = page.getViewport({scale: 1.2});
+
+                    canvasElement.width = viewport.width;
+                    canvasElement.height = viewport.height;
+
+                    await page.render({
+                        canvas: canvasElement,
+                        viewport,
+                    }).promise;
+
+                    await loadingTask.destroy();
+                } catch (error) {
+                    console.error(`Failed to render preview for ${attachment.path}`, error);
+                    previewError = "PDF-Vorschau konnte nicht geladen werden.";
+                }
+            };
+
+            void loadPreview();
+        })
+        return () => {
+            cancelled = true;
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+        };
+    });
+</script>
+
+{#if attachment.kind === "image"}
+    {#if imageUrl}
+        <img
+                alt={attachment.name}
+                class="max-h-72 w-full rounded-md border border-primary-100 bg-white object-contain"
+                src={imageUrl}
+        />
+    {/if}
+{:else if previewError}
+    <div class="flex min-h-48 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-4 py-6 text-sm text-primary-800">
+        {previewError}
+    </div>
+{:else}
+    <canvas bind:this={canvasElement} class="w-full rounded-md border border-primary-100 bg-white"></canvas>
+{/if}
diff --git a/src/lib/components/ProcessedZipArchiveEditor.svelte b/src/lib/components/ProcessedZipArchiveEditor.svelte
new file mode 100644
index 0000000..922b193
--- /dev/null
+++ b/src/lib/components/ProcessedZipArchiveEditor.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
+    import type { ProcessedZipArchive, ZipAttachment } from "$lib/zip-processing";
+
+    type Props = {
+        archive: ProcessedZipArchive;
+        onArchiveChange?: (archive: ProcessedZipArchive) => void;
+    };
+
+    let { archive, onArchiveChange = () => {} }: Props = $props();
+
+    let attachments = $state<ZipAttachment[]>([]);
+    let dragIndex = $state<number | null>(null);
+    let dropIndex = $state<number | null>(null);
+
+    $effect(() => {
+        attachments = archive.attachments.map((attachment) => ({ ...attachment }));
+    });
+
+    const emitArchiveChange = () => {
+        onArchiveChange({
+            ...archive,
+            attachments: attachments.map((attachment) => ({ ...attachment })),
+        });
+    };
+
+    const updateAttachmentName = (index: number, name: string) => {
+        attachments[index] = { ...attachments[index], name };
+        attachments = [...attachments];
+        emitArchiveChange();
+    };
+
+    const moveAttachment = (fromIndex: number, toIndex: number) => {
+        if (
+            fromIndex === toIndex ||
+            fromIndex < 0 ||
+            toIndex < 0 ||
+            fromIndex >= attachments.length ||
+            toIndex >= attachments.length
+        ) {
+            return;
+        }
+
+        const nextAttachments = [...attachments];
+        const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
+        nextAttachments.splice(toIndex, 0, movedAttachment);
+
+        attachments = nextAttachments;
+        emitArchiveChange();
+    };
+
+    const handleDragStart = (index: number, event: DragEvent) => {
+        dragIndex = index;
+        dropIndex = index;
+
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", String(index));
+        }
+    };
+
+    const handleDragOver = (index: number, event: DragEvent) => {
+        event.preventDefault();
+        dropIndex = index;
+    };
+
+    const handleDrop = (index: number, event: DragEvent) => {
+        event.preventDefault();
+
+        const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain"));
+        const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
+
+        if (fromIndex === null) {
+            return;
+        }
+
+        moveAttachment(fromIndex, index);
+        dragIndex = null;
+        dropIndex = null;
+    };
+
+    const handleDragEnd = () => {
+        dragIndex = null;
+        dropIndex = null;
+    };
+</script>
+
+<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm">
+    <header class="flex flex-wrap items-baseline justify-between gap-2">
+        <div class="min-w-0">
+            <h2 class="truncate text-[16px] font-bold text-primary-900">{archive.name}</h2>
+            <p class="text-[13px] text-primary-700">
+                {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
+            </p>
+        </div>
+    </header>
+
+    <ul class="flex flex-col gap-3">
+        {#each attachments as attachment, index (attachment.path)}
+            <li
+                class={`flex flex-col gap-3 rounded-xl border bg-primary-50 p-3 ${
+                    dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
+                } ${dragIndex === index ? "opacity-60" : ""}`}
+                draggable="true"
+                ondragstart={(event) => handleDragStart(index, event)}
+                ondragover={(event) => handleDragOver(index, event)}
+                ondrop={(event) => handleDrop(index, event)}
+                ondragend={handleDragEnd}
+            >
+                <div class="flex items-center gap-3">
+                    <button
+                        class="cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold text-primary-700 active:cursor-grabbing"
+                        draggable="false"
+                        type="button"
+                        aria-label="Datei verschieben"
+                    >
+                        ::
+                    </button>
+
+                    <label class="min-w-0 flex-1">
+                        <span class="sr-only">Dateiname</span>
+                        <input
+                            class="w-full rounded-md border border-primary-200 bg-white px-3 py-2 text-[14px] text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
+                            type="text"
+                            value={attachment.name}
+                            oninput={(event) =>
+                                updateAttachmentName(index, (event.currentTarget as HTMLInputElement).value)}
+                        />
+                    </label>
+                </div>
+
+                <AttachmentPreview {attachment} />
+            </li>
+        {/each}
+    </ul>
+</section>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1ae991d..b2557ea 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Card from "$lib/components/Card.svelte";
+    import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
     import ZipDropzone from "$lib/components/ZipDropzone.svelte";
     import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
 
@@ -27,6 +28,12 @@
             pendingZipCount -= 1;
         }
     };
+
+    const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
+        processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
+            existingIndex === index ? archive : existingArchive,
+        );
+    };
 </script>
 
 {#snippet content()}
@@ -48,13 +55,14 @@
                 </div>
 
                 {#if processedZipFiles.length > 0}
-                    <ul class="space-y-2">
-                        {#each processedZipFiles as file}
-                            <li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
-                                {file.name} - {file.attachments.length} relevante Datei{file.attachments.length === 1 ? "" : "en"}
-                            </li>
+                    <div class="flex flex-col gap-4">
+                        {#each processedZipFiles as file, index}
+                            <ProcessedZipArchiveEditor
+                                archive={file}
+                                onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
+                            />
                         {/each}
-                    </ul>
+                    </div>
                 {/if}
             </div>
         </div>