feature: add auto closing timing logic for toasts

src/components/Toast.svelte

@@ -3,19 +3,44 @@
   import type { ToastMessage } from "../domain/models/toastMessage";
   import { ToastType } from "../domain/models/toastMessage";
   import { toastStore } from "../stores/toast";
-  import { Toast } from "flowbite-svelte";
+  import { Progressbar, Toast } from "flowbite-svelte";
   import { fly } from "svelte/transition";
   import {
     CheckCircleSolid,
     CloseCircleSolid,
     ExclamationCircleSolid,
   } from "flowbite-svelte-icons";
 
-  let toasts: ToastMessage[] = [];
+  let toast: ToastMessage | null = null;
+  let showToast: boolean = true;
+  let currentDuration = 0;
+  let interval: NodeJS.Timeout;
+  const MAX_TOAST_DURATION_IN_MS = 30000;
+
+  function removeToast() {
+    showToast = false;
+    currentDuration = 0;
+    toastStore.set(null);
+  }
+
+  setInterval(() => {
+    if (toast === null) {
+      clearInterval(interval);
+      return;
+    }
+    currentDuration += 1000;
+    if (currentDuration < MAX_TOAST_DURATION_IN_MS) {
+      return;
+    }
+    currentDuration = 0;
+    removeToast();
+  }, 1000);
 
   onMount(() => {
     const unsubscribe = toastStore.subscribe((value) => {
-      toasts = value;
+      toast = value;
+      showToast = true;
+      currentDuration = 0;
     });
 
     return unsubscribe;
@@ -24,8 +49,6 @@
   type ToastColors =
     | "green"
     | "red"
-    | "orange"
-    | "none"
     | "gray"
     | "yellow"
     | "indigo"
@@ -44,12 +67,14 @@
   }
 </script>
 
-{#each toasts as toast}
+{#if toast !== null}
   <Toast
     transition={fly}
     params={{ x: 200 }}
     color={getColorFromToast(toast)}
     class="mb-4"
+    bind:open={showToast}
+    on:close={() => removeToast()}
   >
     <svelte:fragment slot="icon">
       {#if toast.type === ToastType.SUCCESS}
@@ -69,5 +94,13 @@
       {toast.title}
     </span>
     <div class="mb-2 text-md font-normal">{toast.message}</div>
+    <Progressbar
+      color={getColorFromToast(toast)}
+      animate={true}
+      tweenDuration={1000}
+      progress={(currentDuration / MAX_TOAST_DURATION_IN_MS) * 100.0}
+      size="h-1"
+      divClass="w-full bg-gray-200 rounded-full dark:bg-gray-700 relative bottom-0"
+    />
   </Toast>
-{/each}
+{/if}

src/lib/toast.ts

@@ -1,11 +1,6 @@
 import type { ToastMessage } from "../domain/models/toastMessage";
 import { toastStore } from "../stores/toast";
 
-const MAX_TOASTS_SHOWN = 3;
-
 export function showToast(message: ToastMessage) {
-  toastStore.update((toasts: ToastMessage[]) => [
-    message,
-    ...toasts.slice(0, MAX_TOASTS_SHOWN),
-  ]);
+  toastStore.set(message);
 }

src/stores/toast.ts

@@ -1,4 +1,4 @@
 import { writable } from "svelte/store";
 import type { Writable } from "svelte/store";
 
-export const toastStore: Writable<any[]> = writable([]);
+export const toastStore: Writable<any> = writable(null);