Add Toasts notifications

src/lib/components/Toast.svelte

@@ -0,0 +1,66 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import CloseIcon from "$lib/icons/CloseIcon.svelte";
+  import InfoIcon from "$lib/icons/InfoIcon.svelte";
+  import ErrorIcon from "$lib/icons/ErrorIcon.svelte";
+  import SuccessIcon from "$lib/icons/SuccessIcon.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let type = "error";
+  export let dismissible = true;
+</script>
+
+<article class={type} role="alert" transition:fade>
+  {#if type === "success"}
+    <SuccessIcon width="1.1em" />
+  {:else if type === "error"}
+    <ErrorIcon width="1.1em" />
+  {:else}
+    <InfoIcon width="1.1em" />
+  {/if}
+
+  <div class="text">
+    <slot />
+  </div>
+
+  {#if dismissible}
+    <button class="close" on:click={() => dispatch("dismiss")}>
+      <CloseIcon width="0.8em" />
+    </button>
+  {/if}
+</article>
+
+<style lang="postcss">
+  article {
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.2rem;
+    display: flex;
+    align-items: center;
+    margin: 0 auto 0.5rem auto;
+    width: 20rem;
+  }
+  .error {
+    background: IndianRed;
+  }
+  .success {
+    background: MediumSeaGreen;
+  }
+  .info {
+    background: SkyBlue;
+  }
+  .text {
+    margin-left: 1rem;
+  }
+  button {
+    color: white;
+    background: transparent;
+    border: 0 none;
+    padding: 0;
+    margin: 0 0 0 auto;
+    line-height: 1;
+    font-size: 1rem;
+  }
+</style>

src/lib/components/Toasts.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Toast from "./Toast.svelte";
+
+  import { dismissToast, toasts } from "./store";
+</script>
+
+{#if $toasts}
+  <section>
+    {#each $toasts as toast (toast.id)}
+      <Toast
+        type={toast.type}
+        dismissible={toast.dismissible}
+        on:dismiss={() => dismissToast(toast.id)}>{toast.message}</Toast
+      >
+    {/each}
+  </section>
+{/if}
+
+<style lang="postcss">
+  section {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    margin-top: 1rem;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 1000;
+  }
+</style>

src/lib/components/store.ts

@@ -0,0 +1,70 @@
+import { writable } from "svelte/store";
+
+interface ToastNotification {
+  id: number;
+  type: "info" | "success" | "error" | "warning";
+  dismissible: boolean;
+  timeout: number;
+  message: string;
+}
+
+export const toasts = writable<ToastNotification[]>([]);
+
+interface InternalToast {
+  type: "info" | "success" | "error" | "warning";
+  dismissible: boolean;
+  timeout: number;
+  message: string;
+}
+
+const addToast = (toast: InternalToast) => {
+  // Create a unique ID so we can easily find/remove it
+  // if it is dismissible/has a timeout.
+  const id = Math.floor(Math.random() * 10000);
+
+  // Setup some sensible defaults for a toast.
+  const defaults = {
+    id,
+    type: "info",
+    dismissible: true,
+    timeout: 3000,
+  };
+
+  // Push the toast to the top of the list of toasts
+  toasts.update((all) => [{ ...defaults, ...toast }, ...all]);
+
+  // If toast is dismissible, dismiss it after "timeout" amount of time.
+  if (toast.timeout) setTimeout(() => dismissToast(id), toast.timeout);
+};
+
+export const dismissToast = (id: number) => {
+  toasts.update((all) => all.filter((t) => t.id !== id));
+};
+
+export const addSuccessToast = (message: string, dismissible: boolean = false, timeout: number = 1000) => {
+  addToast({
+    type: "success",
+    dismissible,
+    timeout,
+    message,
+  })
+}
+
+export const addErrorToast = (message: string, dismissible: boolean = false, timeout: number = 1000) => {
+  addToast({
+    type: "error",
+    dismissible,
+    timeout,
+    message,
+  })
+}
+
+export const addInfoToast = (message: string, dismissible: boolean = false, timeout: number = 1000) => {
+  addToast({
+    type: "error",
+    dismissible,
+    timeout,
+    message,
+  })
+}
+

src/lib/icons/CloseIcon.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = "1em";
+</script>
+
+<svg
+  {width}
+  style="text-align: center; display: inline-block;"
+  aria-hidden="true"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 352 512"
+>
+  <path
+    fill="currentColor"
+    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+  />
+</svg>

src/lib/icons/ErrorIcon.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let width = "1em";
+</script>
+
+<svg
+  {width}
+  style="text-align: center; display: inline-block;"
+  aria-hidden="true"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <path
+    fill="currentColor"
+    d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"
+    class=""
+  ></path>
+</svg>

src/lib/icons/InfoIcon.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = "1em";
+</script>
+
+<svg
+  {width}
+  style="text-align: center; display: inline-block;"
+  aria-hidden="true"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <path
+    fill="currentColor"
+    d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"
+  />
+</svg>

src/lib/icons/SuccessIcon.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let width = "1em";
+</script>
+
+<svg
+  {width}
+  style="text-align: center; display: inline-block;"
+  aria-hidden="true"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <path
+    fill="currentColor"
+    d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"
+  />
+</svg>