zips are getting extracted

src/routes/+page.svelte

@@ -1,11 +1,32 @@
 <script lang="ts">
     import Card from "$lib/components/Card.svelte";
     import ZipDropzone from "$lib/components/ZipDropzone.svelte";
+    import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
 
     let selectedZipFiles: File[] = $state([]);
+    let processedZipFiles: ProcessedZipArchive[] = $state([]);
+    let pendingZipCount = $state(0);
 
     const handleFilesSelected = (files: File[]) => {
         selectedZipFiles = [...selectedZipFiles, ...files];
+
+        for (const file of files) {
+            void processZipFile(file);
+        }
+    };
+
+    const processZipFile = async (file: File) => {
+        pendingZipCount += 1;
+
+        try {
+            const processedZipArchive = await extractZipArchive(file);
+            processedZipArchive.xjustizNachrichtXml
+            processedZipFiles = [...processedZipFiles, processedZipArchive];
+        } catch (error) {
+            console.error(`Failed to process ${file.name}`, error);
+        } finally {
+            pendingZipCount -= 1;
+        }
     };
 </script>
 
@@ -15,16 +36,31 @@
     {:else}
         <div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
             <div class="flex flex-row items-baseline justify-center gap-2">
-                <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien geladen</h2>
+                <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien werden verarbeitet</h2>
             </div>
 
-            <ul class="mx-auto w-full max-w-3xl space-y-2">
-                {#each selectedZipFiles as file}
-                    <li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
-                        {file.name}
-                    </li>
-                {/each}
-            </ul>
+            <div class="mx-auto flex w-full max-w-3xl 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.
+                    {:else}
+                        Alle ZIP-Dateien wurden verarbeitet.
+                    {/if}
+                </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"}
+                                {#if file.xjustizNachrichtXml}
+                                    - xjustiz_nachricht.xml vorhanden
+                                {/if}
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
         </div>
     {/if}
 {/snippet}