copy link into clipboard and open mail client

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import timeElapsed from '$lib/helper/timeElapsed';
 	import { deserialize } from '$app/forms';
@@ -45,6 +46,9 @@
 	// Model Variablen für Upload
 	let openUL = $state(false);
 	let inProgressUL = $state(form === null);
+	
+	// Variablen für Copy-Funktion
+    let copied = $state(false);
 
 	async function buttonClick(event: MouseEvent) {
 		if (!(await validateForm())) {
@@ -248,9 +252,8 @@
 		}
 	}
 
-	function constructMailToLink() {
+	async function copyAndOpenMail() {
 		const subject = 'Link zum Tatvorgang';
-
 		const link = data.url.origin + data.url.pathname;
 		const body = `Hallo,
 
@@ -262,10 +265,23 @@ Der Zugangs-PIN wird zur Sicherheit über einen zweiten Kommunikationskanal übe
 Mit freundlichen Grüßen,
 `;
 
-		const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    try {
+        await navigator.clipboard.writeText(body);
+        
+        copied = true;
 
-		return mailtoLink;
-	}
+        // Kurz warten, dann Mail öffnen
+        setTimeout(() => {
+            const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}`;
+            window.location.href = mailtoLink;
+        }, 1000);
+        
+        setTimeout(() => copied = false, 2000);
+    } catch (err) {
+        console.error('Clipboard-Fehler:', err);
+        error = 'Konnte Text nicht kopieren. Bitte manuell markieren und kopieren.';
+        }
+    }
 
 	function closeModal() {
 		open = false;
@@ -288,9 +304,10 @@ Mit freundlichen Grüßen,
 				onDelete={null}
 				/>
 				</div>
-				<a class="pt-2 pb-6" href={constructMailToLink()}
-					><Button disabled={isEmptyList}>Share Link</Button></a
-				>
+                <Button on:click={copyAndOpenMail} disabled={isEmptyList}>Link kopieren und Mail verfassen</Button>
+                {#if copied}
+                <p transition:fade>✔ Kopiert! Per Ctrl+V einfügen.</p>
+                {/if}
 			{/if}
 		</div>
 		<div class="mx-auto flex justify-center max-w-7xl h-full">