adds dropzone to add zips

src/lib/components/ZipDropzone.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    type Props = {
+        onFilesSelected: (files: File[]) => void;
+        class?: string;
+    };
+
+    let { onFilesSelected, class: className = "" }: Props = $props();
+
+    let fileInput: HTMLInputElement | null = null;
+    let isDragging = $state(false);
+
+    const processFiles = (files: FileList | null | undefined) => {
+        if (!files) return;
+
+        const filtered = Array.from(files).filter((file) => {
+            const name = file.name.toLowerCase();
+            return (
+                name.endsWith('.zip') ||
+                file.type === 'application/zip' ||
+                file.type === 'application/x-zip-compressed'
+            );
+        });
+
+        if (filtered.length > 0) {
+            onFilesSelected(filtered);
+        }
+    };
+
+    const openFileDialog = () => fileInput?.click();
+
+    const handleFileSelection = (event: Event) => {
+        const input = event.currentTarget as HTMLInputElement;
+        processFiles(input.files);
+        input.value = ''; // Reset so same file can be uploaded twice
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+        event.preventDefault();
+        isDragging = true;
+    };
+
+    const handleDragLeave = (event: DragEvent) => {
+        event.preventDefault();
+        isDragging = false;
+    };
+
+    const handleDrop = (event: DragEvent) => {
+        event.preventDefault();
+        isDragging = false;
+        processFiles(event.dataTransfer?.files);
+    };
+</script>
+
+<input
+        bind:this={fileInput}
+        class="hidden"
+        type="file"
+        accept=".zip,application/zip,application/x-zip-compressed"
+        multiple
+        onchange={handleFileSelection}
+/>
+
+<button
+        type="button"
+        class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 bg-transparent p-0 text-center text-inherit appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
+        aria-label="ZIP-Dateien hinzufügen"
+        onclick={openFileDialog}
+        ondragover={handleDragOver}
+        ondragleave={handleDragLeave}
+        ondrop={handleDrop}
+>
+    <div class="flex flex-row items-baseline justify-center gap-2">
+        <!-- Changed h1 to span for better semantic HTML inside a button -->
+        <span class="text-[20px] font-bold text-primary-900">Dateien hinzufügen</span>
+        <span class="text-[20px] font-extrabold text-primary-900">+</span>
+    </div>
+</button>

src/routes/+page.svelte

@@ -1,22 +1,35 @@
-<script>
+<script lang="ts">
     import Card from "$lib/components/Card.svelte";
+    import ZipDropzone from "$lib/components/ZipDropzone.svelte";
+
+    let selectedZipFiles: File[] = $state([]);
+
+    const handleFilesSelected = (files: File[]) => {
+        selectedZipFiles = [...selectedZipFiles, ...files];
+    };
 </script>
 
 {#snippet content()}
-    <div class="text-center justify-center flex grow flex-col min-h-[calc(-180px+100vh)]">
-        <div class="flex flex-row justify-center items-baseline gap-2">
-            <h1 class="h1 text-[20px] font-bold text-primary-900">Dateien hinzufügen</h1>
-            <span class="font-extrabold text-primary-900 text-[20px]">
-            +
-            </span>
+    {#if selectedZipFiles.length === 0}
+        <ZipDropzone onFilesSelected={handleFilesSelected} />
+    {: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>
+            </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>
-    </div>
+    {/if}
 {/snippet}
 
 <section class="px-4">
     <h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
-    <Card {content} class="h-full cursor-pointer"/>
-    <!--    <Button variant="primary">-->
-    <!--        Neu berechnen-->
-    <!--    </Button>-->
+    <Card {content} class="h-full"/>
 </section>