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

frontend/src/routes/+layout.svelte

@@ -5,6 +5,8 @@
   import Navigation from "./nav/Navigation.svelte";
   import type { LayoutData } from "./$types";
   import { version } from "$app/environment";
+  import { toastStore } from "$lib/toast";
+  import Toast from "$lib/components/Toast.svelte";
 
   export let data: LayoutData;
 
@@ -24,6 +26,11 @@
 <Navigation />
 <div class="container">
   <slot />
+  <div class="position-absolute top-0 end-0">
+    {#each $toastStore as toast}
+      <Toast header={toast.header} body={toast.body} />
+    {/each}
+  </div>
   <footer>
     <hr />
     <p>