adds dropzone to add zips

.idea/workspace.xml

@@ -1,12 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="" />
+    <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$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MetaFilesCheckinStateConfiguration" checkMetaFiles="true" />
   <component name="ProjectColorInfo">{
   &quot;associatedIndex&quot;: 0,
   &quot;fromUser&quot;: false
@@ -26,6 +33,7 @@
     "RunOnceActivity.typescript.service.memoryLimit.init": "true",
     "cidr.known.project.marker": "true",
     "codeWithMe.voiceChat.enabledByDefault": "false",
+    "git-widget-placeholder": "main",
     "last_opened_file_path": "/home/rehlert/repos/juri-merger",
     "nodejs_package_manager_path": "pnpm",
     "settings.editor.selected.configurable": "preferences.pluginManager",
@@ -41,16 +49,28 @@
       <option name="presentableId" value="Default" />
       <updated>1781169139290</updated>
       <workItem from="1781169141138" duration="309000" />
-      <workItem from="1781251694220" duration="3847000" />
+      <workItem from="1781251694220" duration="5262000" />
     </task>
+    <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
+      <option name="closed" value="true" />
+      <created>1781256112217</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1781256112218</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="UnityCheckinConfiguration" checkUnsavedScenes="true" />
   <component name="UnityProjectConfiguration" hasMinimizedUI="false" />
   <component name="VcsManagerConfiguration">
     <option name="CLEAR_INITIAL_COMMIT_MESSAGE" value="true" />
+    <MESSAGE value="adapts styling of rvg.legal" />
+    <option name="LAST_COMMIT_MESSAGE" value="adapts styling of rvg.legal" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>

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)]">
+    {#if selectedZipFiles.length === 0}
-        <div class="flex flex-row justify-center items-baseline gap-2">
+        <ZipDropzone onFilesSelected={handleFilesSelected} />
-            <h1 class="h1 text-[20px] font-bold text-primary-900">Dateien hinzufügen</h1>
+    {:else}
-            <span class="font-extrabold text-primary-900 text-[20px]">
+        <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">
-            </span>
+                <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"/>
+    <Card {content} class="h-full"/>
-    <!--    <Button variant="primary">-->
-    <!--        Neu berechnen-->
-    <!--    </Button>-->
 </section>