.idea/workspace.xml

@@ -3,8 +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$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/AttachmentPreview.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/AttachmentPreview.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" 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" />
@@ -51,7 +51,7 @@
       <option name="presentableId" value="Default" />
       <updated>1781169139290</updated>
       <workItem from="1781169141138" duration="309000" />
-      <workItem from="1781251694220" duration="7924000" />
+      <workItem from="1781251694220" duration="9616000" />
     </task>
     <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
       <option name="closed" value="true" />
@@ -85,7 +85,15 @@
       <option name="project" value="LOCAL" />
       <updated>1781259433444</updated>
     </task>
-    <option name="localTasksCounter" value="5" />
+    <task id="LOCAL-00005" summary="renders preview of zips">
+      <option name="closed" value="true" />
+      <created>1781260304085</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1781260304085</updated>
+    </task>
+    <option name="localTasksCounter" value="6" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -99,7 +107,8 @@
     <MESSAGE value="adds dropzone to add zips" />
     <MESSAGE value="zips are getting extracted" />
     <MESSAGE value="parses xjustiz and orders attachments" />
-    <option name="LAST_COMMIT_MESSAGE" value="parses xjustiz and orders attachments" />
+    <MESSAGE value="renders preview of zips" />
+    <option name="LAST_COMMIT_MESSAGE" value="renders preview of zips" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>

src/lib/components/AttachmentPreview.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+    import { onMount } from "svelte";
 
     import type {ZipAttachment} from "$lib/zip-processing";
 
     type Props = {
         attachment: ZipAttachment;
+        class?: string;
     };
 
-    let {attachment}: Props = $props();
+    let { attachment, class: className = "" }: Props = $props();
 
     let canvasElement = $state<HTMLCanvasElement | null>(null);
     let imageUrl = $state<string | null>(null);
@@ -17,27 +18,26 @@
         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;
+            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;
 
+            GlobalWorkerOptions.workerSrc = await import("pdfjs-dist/build/pdf.worker.mjs?url").then((m) => m.default);
 
             const loadPreview = async () => {
                 previewError = null;
 
                 if (attachment.kind === "image") {
-                    objectUrl = URL.createObjectURL(new Blob([attachment.data as unknown as ArrayBuffer]));
+                    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;
                     return;
                 }
 
                 try {
-                    // Use the imported getDocument
+                    const loadingTask = getDocument({ data: attachment.data });
-                    const loadingTask = getDocument({data: attachment.data});
                     const pdfDocument = await loadingTask.promise;
                     const page = await pdfDocument.getPage(1);
 
@@ -46,15 +46,12 @@
                         return;
                     }
 
-                    const viewport = page.getViewport({scale: 1.2});
+                    const viewport = page.getViewport({ scale: 0.4 });
 
                     canvasElement.width = viewport.width;
                     canvasElement.height = viewport.height;
 
-                    await page.render({
+                    await page.render({ canvas: canvasElement, viewport }).promise;
-                        canvas: canvasElement,
-                        viewport,
-                    }).promise;
 
                     await loadingTask.destroy();
                 } catch (error) {
@@ -64,26 +61,31 @@
             };
 
             void loadPreview();
-        })
+        })();
+
         return () => {
             cancelled = true;
-            if (objectUrl) URL.revokeObjectURL(objectUrl);
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+            }
         };
     });
 </script>
 
-{#if attachment.kind === "image"}
+<div class={className}>
+    {#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"
+                class="block h-full w-full rounded-md border border-primary-100 bg-white object-contain"
                 src={imageUrl}
             />
         {/if}
-{:else if previewError}
+    {: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">
+        <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}
+    {:else}
-    <canvas bind:this={canvasElement} class="w-full rounded-md border border-primary-100 bg-white"></canvas>
+        <canvas bind:this={canvasElement} class="block rounded-md border border-primary-100 bg-white"></canvas>
-{/if}
+    {/if}
+</div>

src/lib/components/ProcessedZipArchiveEditor.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
     import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
-    import type { ProcessedZipArchive, ZipAttachment } from "$lib/zip-processing";
+    import type {ProcessedZipArchive, ZipAttachment} from "$lib/zip-processing";
 
     type Props = {
         archive: ProcessedZipArchive;
         onArchiveChange?: (archive: ProcessedZipArchive) => void;
     };
 
-    let { archive, onArchiveChange = () => {} }: Props = $props();
+    let {
+        archive, onArchiveChange = () => {
+        }
+    }: Props = $props();
 
     let attachments = $state<ZipAttachment[]>([]);
+    let archiveName = $state("");
     let dragIndex = $state<number | null>(null);
     let dropIndex = $state<number | null>(null);
 
     $effect(() => {
-        attachments = archive.attachments.map((attachment) => ({ ...attachment }));
+        archiveName = archive.name;
+        attachments = archive.attachments.map((attachment) => ({...attachment}));
     });
 
     const emitArchiveChange = () => {
         onArchiveChange({
             ...archive,
-            attachments: attachments.map((attachment) => ({ ...attachment })),
+            name: archiveName,
+            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 ||
@@ -87,18 +87,29 @@
 
 <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">
+        <div class="min-w-0 flex-1">
-            <h2 class="truncate text-[16px] font-bold text-primary-900">{archive.name}</h2>
+            <label class="block min-w-0">
-            <p class="text-[13px] text-primary-700">
+                <span class="sr-only">Archivname</span>
+                <input
+                        class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
+                        type="text"
+                        value={archiveName}
+                        oninput={(event) => {
+                        archiveName = (event.currentTarget as HTMLInputElement).value;
+                        emitArchiveChange();
+                    }}
+                />
+            </label>
+            <p class="mt-1 text-[13px] text-primary-700">
                 {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
             </p>
         </div>
     </header>
 
-    <ul class="flex flex-col gap-3">
+    <ul class="flex gap-3 overflow-x-auto pb-1">
         {#each attachments as attachment, index (attachment.path)}
             <li
-                class={`flex flex-col gap-3 rounded-xl border bg-primary-50 p-3 ${
+                    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" : ""}`}
                     draggable="true"
@@ -107,9 +118,9 @@
                     ondrop={(event) => handleDrop(index, event)}
                     ondragend={handleDragEnd}
             >
-                <div class="flex items-center gap-3">
+                <div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
                     <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"
+                            class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
                             draggable="false"
                             type="button"
                             aria-label="Datei verschieben"
@@ -117,19 +128,13 @@
                         ::
                     </button>
 
-                    <label class="min-w-0 flex-1">
+                    <div class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
-                        <span class="sr-only">Dateiname</span>
+                        {attachment.name}
-                        <input
+                    </div>
-                            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"
+                </div>
-                            type="text"
+                <div class="shrink-0">
-                            value={attachment.name}
+                    <AttachmentPreview {attachment} class="h-full w-full"/>
-                            oninput={(event) =>
-                                updateAttachmentName(index, (event.currentTarget as HTMLInputElement).value)}
-                        />
-                    </label>
                 </div>
-
-                <AttachmentPreview {attachment} />
             </li>
         {/each}
     </ul>

src/routes/+page.svelte

@@ -45,7 +45,7 @@
                 <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien werden verarbeitet</h2>
             </div>
 
-            <div class="mx-auto flex w-full max-w-3xl flex-col gap-3">
+            <div class="mx-auto flex w-full flex-col gap-3">
                 <div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
                     {#if pendingZipCount > 0}
                         Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung.