show toast when direct invitation link is copied

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}

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>

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));
+}