src/lib/components/ExpandableForm.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { fly, scale, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { tick } from 'svelte';
+
+  let expanded = false;
+  let formContainer: HTMLDivElement;
+
+  async function toggle() {
+    expanded = !expanded;
+
+    if (expanded) {
+      // Wait for DOM to update
+      await tick();
+
+      // Scroll smoothly into view
+      formContainer?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+</script>
+
+<div class="flex flex-col items-center">
+  <!-- + / × button -->
+  <button
+    class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 text-white text-2xl font-bold hover:bg-blue-700 transition"
+    on:click={toggle}
+    aria-expanded={expanded}
+    aria-label="Add item"
+  >
+    {#if expanded}
+      ✕
+    {:else}
+      +
+    {/if}
+  </button>
+
+  <!-- Expandable content below button -->
+  {#if expanded}
+    <div
+      bind:this={formContainer}
+      class="w-full mt-4 flex justify-center"
+      transition:fade
+    >
+      <div
+        in:fly={{ y: 10, duration: 200, easing: cubicOut }}
+        out:scale={{ duration: 150 }}
+        class="w-full max-w-2xl"
+      >
+        <slot />
+      </div>
+    </div>
+  {/if}
+</div>

src/routes/(angemeldet)/list/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ExpandableForm from '$lib/components/ExpandableForm.svelte';
 	import Trash from '$lib/icons/Trash.svelte';
 	import Folder from '$lib/icons/Folder.svelte';
 	import EmptyList from '$lib/components/EmptyList.svelte';
@@ -130,7 +131,9 @@
 	</div>
 </div>
 
-<form class="flex flex-col items-center mt-10 space-y-4" method="POST">
+
+<ExpandableForm>
+<form class="flex flex-col items-center" method="POST">
 	<div class="flex flex-col sm:flex-row sm:space-x-4 w-full max-w-lg">
 		<div class="flex-1">
 			<label for="vorgang" class="block text-sm font-medium leading-6 text-gray-900">
@@ -188,6 +191,8 @@
 	</button>
 </form>
 
+</ExpandableForm>
+
 <style>
 	ul {
 		min-width: 24rem;

src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -2,6 +2,7 @@
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import timeElapsed from '$lib/helper/timeElapsed';
 	import { deserialize } from '$app/forms';
+	import ExpandableForm from '$lib/components/ExpandableForm.svelte';
 	import Alert from '$lib/components/Alert.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
@@ -313,6 +314,8 @@ Mit freundlichen Grüßen,
 		</div>
 
 		{#if admin}
+		<div class="flex justify-center my-4">
+		<ExpandableForm>
 			<div class="mx-auto max-w-2xl">
 				<div class="flex flex-col items-center space-y-6">
 					<!-- Name Input -->
@@ -392,6 +395,8 @@ Mit freundlichen Grüßen,
 						</Button>
 					</div>
 				</div>
+				</div>
+			</ExpandableForm>
 			</div>
 		{/if}