From 1a9f0e876c1344986cbc0b0cf55542e69bc578bd Mon Sep 17 00:00:00 2001
From: rehlert <post@rehlert.de>
Date: Fri, 12 Jun 2026 13:33:00 +0200
Subject: [PATCH] renders thumbnails

---
 .idea/workspace.xml                           | 15 +++-
 src/lib/components/AttachmentPreview.svelte   | 74 ++++++++++++++-----
 .../ProcessedZipArchiveEditor.svelte          | 15 ++--
 src/routes/+page.svelte                       | 60 ++++++++++++++-
 4 files changed, 136 insertions(+), 28 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7fce527..1dd26a5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -51,7 +51,7 @@
       <option name="presentableId" value="Default" />
       <updated>1781169139290</updated>
       <workItem from="1781169141138" duration="309000" />
-      <workItem from="1781251694220" duration="9616000" />
+      <workItem from="1781251694220" duration="11612000" />
     </task>
     <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
       <option name="closed" value="true" />
@@ -93,7 +93,15 @@
       <option name="project" value="LOCAL" />
       <updated>1781260304085</updated>
     </task>
-    <option name="localTasksCounter" value="6" />
+    <task id="LOCAL-00006" summary="design anpassungen">
+      <option name="closed" value="true" />
+      <created>1781261986439</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1781261986439</updated>
+    </task>
+    <option name="localTasksCounter" value="7" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -108,7 +116,8 @@
     <MESSAGE value="zips are getting extracted" />
     <MESSAGE value="parses xjustiz and orders attachments" />
     <MESSAGE value="renders preview of zips" />
-    <option name="LAST_COMMIT_MESSAGE" value="renders preview of zips" />
+    <MESSAGE value="design anpassungen" />
+    <option name="LAST_COMMIT_MESSAGE" value="design anpassungen" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
diff --git a/src/lib/components/AttachmentPreview.svelte b/src/lib/components/AttachmentPreview.svelte
index f9eb124..a198a16 100644
--- a/src/lib/components/AttachmentPreview.svelte
+++ b/src/lib/components/AttachmentPreview.svelte
@@ -10,13 +10,26 @@
 
     let { attachment, class: className = "" }: 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;
+
+        const revokeObjectUrl = () => {
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+                objectUrl = null;
+            }
+        };
+
+        const setBlobImage = (blob: Blob) => {
+            revokeObjectUrl();
+            objectUrl = URL.createObjectURL(blob);
+            imageUrl = objectUrl;
+        };
+
         (async () => {
             const pdfjsLib = await import("pdfjs-dist");
             const { getDocument, GlobalWorkerOptions } = pdfjsLib;
@@ -25,14 +38,14 @@
 
             const loadPreview = async () => {
                 previewError = null;
+                imageUrl = null;
 
                 if (attachment.kind === "image") {
                     const imageBuffer = attachment.data.buffer.slice(
                         attachment.data.byteOffset,
                         attachment.data.byteOffset + attachment.data.byteLength,
                     ) as ArrayBuffer;
-                    objectUrl = URL.createObjectURL(new Blob([imageBuffer]));
-                    imageUrl = objectUrl;
+                    setBlobImage(new Blob([imageBuffer]));
                     return;
                 }
 
@@ -41,17 +54,42 @@
                     const pdfDocument = await loadingTask.promise;
                     const page = await pdfDocument.getPage(1);
 
-                    if (cancelled || !canvasElement) {
+                    if (cancelled) {
                         void loadingTask.destroy();
                         return;
                     }
 
-                    const viewport = page.getViewport({ scale: 0.4 });
+                    const viewport = page.getViewport({ scale: 1 });
+                    const canvasElement = document.createElement("canvas");
 
                     canvasElement.width = viewport.width;
                     canvasElement.height = viewport.height;
 
-                    await page.render({ canvas: canvasElement, viewport }).promise;
+                    const canvasContext = canvasElement.getContext("2d");
+
+                    if (!canvasContext) {
+                        throw new Error("Could not create thumbnail canvas context.");
+                    }
+
+                    await page.render({ canvas: canvasElement, canvasContext, viewport }).promise;
+
+                    if (cancelled) {
+                        void loadingTask.destroy();
+                        return;
+                    }
+
+                    const blob = await new Promise<Blob>((resolve, reject) => {
+                        canvasElement.toBlob((result) => {
+                            if (result) {
+                                resolve(result);
+                                return;
+                            }
+
+                            reject(new Error("Could not create thumbnail blob."));
+                        }, "image/png");
+                    });
+
+                    setBlobImage(blob);
 
                     await loadingTask.destroy();
                 } catch (error) {
@@ -65,27 +103,25 @@
 
         return () => {
             cancelled = true;
-            if (objectUrl) {
-                URL.revokeObjectURL(objectUrl);
-            }
+            revokeObjectUrl();
         };
     });
 </script>
 
 <div class={className}>
-    {#if attachment.kind === "image"}
-        {#if imageUrl}
-            <img
-                alt={attachment.name}
-                class="block h-full w-full rounded-md border border-primary-100 bg-white object-contain"
-                src={imageUrl}
-            />
-        {/if}
-    {:else if previewError}
+    {#if previewError}
         <div class="flex h-full min-h-0 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-3 py-4 text-center text-[12px] text-primary-800">
             {previewError}
         </div>
+    {:else if imageUrl}
+        <img
+            alt={attachment.name}
+            class="block rounded-md border border-primary-100 bg-white object-contain"
+            src={imageUrl}
+        />
     {:else}
-        <canvas bind:this={canvasElement} class="block rounded-md border border-primary-100 bg-white"></canvas>
+        <div class="flex items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-3 py-4 text-center text-[12px] text-primary-800">
+            Vorschau wird erstellt
+        </div>
     {/if}
 </div>
diff --git a/src/lib/components/ProcessedZipArchiveEditor.svelte b/src/lib/components/ProcessedZipArchiveEditor.svelte
index d8d4241..f7fe174 100644
--- a/src/lib/components/ProcessedZipArchiveEditor.svelte
+++ b/src/lib/components/ProcessedZipArchiveEditor.svelte
@@ -4,11 +4,14 @@
 
     type Props = {
         archive: ProcessedZipArchive;
+        thumbnailWidth: number;
         onArchiveChange?: (archive: ProcessedZipArchive) => void;
     };
 
     let {
-        archive, onArchiveChange = () => {
+        archive,
+        thumbnailWidth = 200,
+        onArchiveChange = () => {
         }
     }: Props = $props();
 
@@ -112,6 +115,7 @@
                     class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
                     dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
                 } ${dragIndex === index ? "opacity-60" : ""}`}
+                    style={`width: ${thumbnailWidth}px;`}
                     draggable="true"
                     ondragstart={(event) => handleDragStart(index, event)}
                     ondragover={(event) => handleDragOver(index, event)}
@@ -128,13 +132,14 @@
                         ::
                     </button>
 
-                    <div class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
+                    <div
+                            class="truncate text-[13px] font-medium leading-tight text-primary-900"
+                            title={attachment.name}
+                    >
                         {attachment.name}
                     </div>
                 </div>
-                <div class="shrink-0">
-                    <AttachmentPreview {attachment} class="h-full w-full"/>
-                </div>
+                <AttachmentPreview {attachment} />
             </li>
         {/each}
     </ul>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e5d21e7..9e52527 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,41 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     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";
 
+    const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth";
+
     let selectedZipFiles: File[] = $state([]);
     let processedZipFiles: ProcessedZipArchive[] = $state([]);
     let pendingZipCount = $state(0);
+    let thumbnailWidth = $state(200);
+    let thumbnailWidthHydrated = $state(false);
+
+    const clampThumbnailWidth = (value: number) => Math.min(400, Math.max(100, value));
+
+    onMount(() => {
+        const storedValue = localStorage.getItem(THUMBNAIL_WIDTH_STORAGE_KEY);
+
+        if (storedValue !== null) {
+            const parsedValue = Number(storedValue);
+
+            if (Number.isFinite(parsedValue)) {
+                thumbnailWidth = clampThumbnailWidth(parsedValue);
+            }
+        }
+
+        thumbnailWidthHydrated = true;
+    });
+
+    $effect(() => {
+        if (!thumbnailWidthHydrated) {
+            return;
+        }
+
+        localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
+    });
 
     const handleFilesSelected = (files: File[]) => {
         selectedZipFiles = [...selectedZipFiles, ...files];
@@ -59,6 +88,7 @@
                         {#each processedZipFiles as file, index}
                             <ProcessedZipArchiveEditor
                                 archive={file}
+                                {thumbnailWidth}
                                 onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
                             />
                         {/each}
@@ -70,6 +100,34 @@
 {/snippet}
 
 <section class="px-4">
-    <h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
+    <div class="flex flex-wrap items-center justify-between gap-3 py-6">
+        <h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
+
+        <details class="relative">
+            <summary class="flex cursor-pointer list-none items-center rounded-md border border-primary-200 bg-white px-3 py-2 text-sm font-semibold text-primary-800 shadow-sm transition hover:border-primary-300 hover:bg-primary-50">
+                <span class="sr-only">Settings</span>
+                <span>⚙️</span>
+            </summary>
+
+            <div class="absolute right-0 z-10 mt-2 w-64 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
+                <label class="flex flex-col gap-2">
+                    <div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900">
+                        <span>Thumbnail width</span>
+                        <span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
+                    </div>
+
+                    <input
+                        class="w-full accent-primary-700"
+                        type="range"
+                        min="100"
+                        max="400"
+                        step="1"
+                        bind:value={thumbnailWidth}
+                    />
+                </label>
+            </div>
+        </details>
+    </div>
+
     <Card {content} class="h-full"/>
 </section>