feat: add toasts

frontend/src/lib/components/Toast.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Toast } from "sveltestrap";
+
+  export let header: string | undefined = undefined;
+  export let body: string;
+
+  let isOpen = true;
+  const toggle = () => (isOpen = !isOpen);
+</script>
+
+<Toast {isOpen} {header} body class="m-3" {toggle}>
+  {body}
+</Toast>

frontend/src/lib/toast.ts

@@ -0,0 +1,35 @@
+import { writable } from "svelte/store";
+
+export interface ToastData {
+  header?: string;
+  body: string;
+  duration?: number;
+}
+
+interface IdToastData extends ToastData {
+  id: number;
+}
+
+export const toastStore = writable<IdToastData[]>([]);
+
+let maxId = 0;
+
+export const addToast = (data: ToastData) => {
+  const id = maxId++;
+
+  console.log(id);
+
+  toastStore.update((toasts) => (toasts = [...toasts, { ...data, id }]));
+
+  if (data.duration !== -1) {
+    setTimeout(() => {
+      toastStore.update((toasts) => (toasts = toasts.filter((toast) => toast.id !== id)));
+    }, data.duration ?? 5000);
+  }
+
+  return id;
+};
+
+export const delToast = (id: number) => {
+  toastStore.update((toasts) => (toasts = toasts.filter((toast) => toast.id !== id)));
+};