From e1effca312b63a433a6faab2582090f2bf5e798a Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Sat, 7 Nov 2026 23:21:46 +0100
Subject: [PATCH] show toast when direct invitation link is copied

---
 .../DirectInvitations.svelte                  |  6 ++++
 src/components/toast/Toast.svelte             | 13 ++++++++
 src/components/toast/Toast.ts                 | 33 +++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 src/components/toast/Toast.svelte
 create mode 100644 src/components/toast/Toast.ts

diff --git a/src/app/admin/directInvitations/DirectInvitations.svelte b/src/app/admin/directInvitations/DirectInvitations.svelte
index 4e9a7a0..9dc8c55 100644
--- a/src/app/admin/directInvitations/DirectInvitations.svelte
+++ b/src/app/admin/directInvitations/DirectInvitations.svelte
@@ -2,12 +2,14 @@
   import DataTable from '@components/admin/table/DataTable.svelte';
   import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
   import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+  import { showToast } from '@components/toast/Toast.ts';
   import {
     deleteDirectInvitation,
     editDirectInvitation,
     type DirectInvitation,
     directInvitations
   } from '@app/admin/directInvitations/directInvitations.ts';
+  import Toast from '@components/toast/Toast.svelte';
 
   // props
   interface Props {
@@ -38,6 +40,8 @@
     setTimeout(() => {
       if (copiedCode === directInvitation.code) copiedCode = null;
     }, 2000);
+
+    showToast({ message: 'Link kopiert' });
   }
 
   function onDirectInvitationDelete(directInvitation: DirectInvitation) {
@@ -49,6 +53,8 @@
   }
 </script>
 
+<Toast />
+
 <DataTable
   data={directInvitations}
   count={true}
diff --git a/src/components/toast/Toast.svelte b/src/components/toast/Toast.svelte
new file mode 100644
index 0000000..5061469
--- /dev/null
+++ b/src/components/toast/Toast.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { dismissToast, toasts } from '@components/toast/Toast.ts';
+  import { fly } from 'svelte/transition';
+</script>
+
+<div class="toast toast-end toast-bottom z-[9999]">
+  {#each $toasts as toast (toast.id)}
+    <div class="alert" role="status" aria-live="polite" transition:fly={{ y: 8, duration: 150 }}>
+      <span>{toast.message}</span>
+      <button class="cursor-pointer" onclick={() => dismissToast(toast.id)} aria-label="Schließen">✕</button>
+    </div>
+  {/each}
+</div>
diff --git a/src/components/toast/Toast.ts b/src/components/toast/Toast.ts
new file mode 100644
index 0000000..b24289e
--- /dev/null
+++ b/src/components/toast/Toast.ts
@@ -0,0 +1,33 @@
+import { atom } from 'nanostores';
+
+export type Toast = {
+  id: number;
+  message: string;
+  duration: number;
+};
+
+export const toasts = atom<Toast[]>([]);
+
+let nextId = 0;
+
+export function showToast(toast: { message: string; duration?: number }) {
+  const id = nextId++;
+  const duration = toast.duration ?? 2000;
+
+  toasts.set([
+    ...toasts.get(),
+    {
+      id: id,
+      message: toast.message,
+      duration: duration
+    }
+  ]);
+
+  if (duration > 0) setTimeout(() => dismissToast(id), duration);
+
+  return id;
+}
+
+export function dismissToast(id: number) {
+  toasts.set(toasts.get().filter((toast) => toast.id !== id));
+}