adds notification toast capability to the client

packages/client/src/components/ClientApp.svelte

@@ -2,6 +2,7 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
+  import NotificationDisplay from './NotificationDisplay.svelte'
   import SDK from "../sdk"
   import { createDataStore, initialise, screenStore, notificationStore } from "../store"
 
@@ -23,4 +24,5 @@
 
 {#if loaded && $screenStore.activeLayout}
   <Component definition={$screenStore.activeLayout.props} />
-{/if}
+{/if}
+<NotificationDisplay />

packages/client/src/components/NotificationDisplay.svelte

@@ -0,0 +1,58 @@
+<script>
+    import { fly } from "svelte/transition"
+    import { getContext } from "svelte"
+    const notifications = getContext("notification")
+  
+    export let themes = {
+      danger: "#E26D69",
+      success: "#84C991",
+      warning: "#f0ad4e",
+      info: "#5bc0de",
+      default: "#aaaaaa",
+    }
+  </script>
+  
+  <div class="notifications">
+    {#each $notifications as notification (notification.id)}
+      <div
+        class="toast"
+        style="background: {themes[notification.type]};"
+        transition:fly={{ y: -30 }}>
+        <div class="content">{notification.message}</div>
+        {#if notification.icon}<i class={notification.icon} />{/if}
+      </div>
+    {/each}
+  </div>
+  
+  <style>
+    .notifications {
+      position: fixed;
+      top: 10px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      padding: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+  
+    .toast {
+      flex: 0 0 auto;
+      margin-bottom: 10px;
+      border-radius: var(--border-radius-s);
+      /* The toasts now support being auto sized, so this static width could be removed */
+      width: 40vw;
+    }
+  
+    .content {
+      padding: 10px;
+      display: block;
+      color: white;
+      font-weight: 500;
+    }
+  </style>
+  

packages/standard-components/src/Icon.svelte

@@ -3,9 +3,6 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  const notification = getContext("notification")
-
-  $: console.log($notification)
 
   export let icon = ""
   export let size = "fa-lg"
@@ -20,8 +17,4 @@
 </script>
 
 <i use:styleable={styles}
-  class="{icon} {size}" />
+  class="{icon} {size}" />
-
-  <button on:click={() => {
-    notification.send('Hello!')
-  }}></button>