renders preview of zips

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>