Merge pull request #220 from samply/feat/allow-closing-error-toasts

feat: add a close button to close error toasts
samply · Feb 14, 2025 · 92d4b5f · 92d4b5f
2 parents 5979ddf + fc86808
commit 92d4b5f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/packages/lib/src/components/ErrorToasts.wc.svelte b/packages/lib/src/components/ErrorToasts.wc.svelte
@@ -8,30 +8,56 @@
     import { fade } from "svelte/transition";
     import { errorChannel } from "../stores/error-channel";
 
-    let toasts: { uuid: string; message: string }[] = [];
+    // Each toast has a unique id that maps to the error message
+    let toasts: Map<string, string> = new Map();
 
     /**
      * @param message user-facing error message
      */
     function showToast(message: string): void {
-        toasts.push({ uuid: crypto.randomUUID(), message });
+        const uuid = crypto.randomUUID();
+        toasts.set(uuid, message);
         toasts = toasts; // update
 
         setTimeout(() => {
-            toasts.shift();
+            toasts.delete(uuid);
             toasts = toasts; // update
         }, 8000);
     }
 
     // subscribe to error channel
-    $: if ($errorChannel) {
+    $: if ($errorChannel !== "") {
         showToast($errorChannel);
         errorChannel.set("");
     }
 </script>
 
 <div part="flex-container">
-    {#each toasts as toast (toast.uuid)}
-        <div out:fade part="toast">{toast.message}</div>
+    {#each toasts as [uuid, message] (uuid)}
+        <div out:fade part="toast">
+            <div part="message">{message}</div>
+            <button
+                part="close-button"
+                on:click={() => {
+                    toasts.delete(uuid);
+                    toasts = toasts; // update
+                }}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    style="height: 24px; width: 24px; display: block;"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M6 18 18 6M6 6l12 12"
+                    />
+                </svg>
+            </button>
+        </div>
     {/each}
 </div>
diff --git a/packages/lib/src/styles/error-toasts.css b/packages/lib/src/styles/error-toasts.css
@@ -1,4 +1,5 @@
 error-toasts::part(flex-container) {
+    pointer-events: none;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -10,8 +11,27 @@ error-toasts::part(flex-container) {
 }
 
 error-toasts::part(toast) {
+    pointer-events: auto;
     border-radius: var(--border-radius-small);
     background-color: #EF9A9A;
     border: solid 1px var(--red);
+    display: flex;
+    align-items: center;
+}
+
+error-toasts::part(message) {
+    padding: var(--gap-xs);
+}
+
+error-toasts::part(close-button) {
     padding: var(--gap-xs);
-}
+    margin-left: auto; /* align right */
+
+    /* Remove button default styles */
+	background: none;
+	color: inherit;
+	border: none;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+}