From 4e2dea375a6b922068ccca153ba251eb231ba6c7 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Wed, 20 Jul 2022 13:41:18 +0100
Subject: [PATCH] Allow client notifications to be stacked

---
 .../overlay/NotificationDisplay.svelte        | 19 +++++++++++--------
 packages/client/src/stores/notification.js    | 17 +++++++++++------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte
index 667f706ff2..5b95ab1ed5 100644
--- a/packages/client/src/components/overlay/NotificationDisplay.svelte
+++ b/packages/client/src/components/overlay/NotificationDisplay.svelte
@@ -6,7 +6,7 @@
 
 <div class="notifications">
   {#if $notificationStore}
-    {#key $notificationStore.id}
+    {#each $notificationStore as { type, icon, message, id, dismissable } (id)}
       <div
         in:fly={{
           duration: 300,
@@ -16,14 +16,14 @@
         out:fly={{ y: -20, duration: 150 }}
       >
         <Notification
-          type={$notificationStore.type}
-          message={$notificationStore.message}
-          icon={$notificationStore.icon}
-          dismissable={$notificationStore.dismissable}
-          on:dismiss={notificationStore.actions.dismiss}
+          {type}
+          {message}
+          {icon}
+          {dismissable}
+          on:dismiss={() => notificationStore.actions.dismiss(id)}
         />
       </div>
-    {/key}
+    {/each}
   {/if}
 </div>
 
@@ -31,6 +31,8 @@
   .notifications {
     position: fixed;
     top: 20px;
+    bottom: 40px;
+    width: 25%;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -39,7 +41,8 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
+    align-items: end;
     pointer-events: none;
+    gap: 10px;
   }
 </style>
diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js
index e12eccf210..37a4dcc5d2 100644
--- a/packages/client/src/stores/notification.js
+++ b/packages/client/src/stores/notification.js
@@ -8,9 +8,10 @@ const createNotificationStore = () => {
   let timeout
   let block = false
 
-  const store = writable(null, () => {
+  const store = writable([], () => {
     return () => {
       clearTimeout(timeout)
+      store.set([])
     }
   })
 
@@ -37,15 +38,17 @@ const createNotificationStore = () => {
       })
       return
     }
-
-    store.set({
+    store.update(state => {
+      return [...state,
+      {
       id: generate(),
       type,
       message,
       icon,
       dismissable: !autoDismiss,
       delay: get(store) != null,
-    })
+    }
+  ]})
     clearTimeout(timeout)
     if (autoDismiss) {
       timeout = setTimeout(() => {
@@ -54,9 +57,11 @@ const createNotificationStore = () => {
     }
   }
 
-  const dismiss = () => {
+  const dismiss = id => {
     clearTimeout(timeout)
-    store.set(null)
+    store.update(state => {
+      return state.filter(n => n.id !== id)
+    })
   }
 
   return {