Add toast for error messages, fix #16

src/routes/+layout.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import FooterComponent from '$lib/components/FooterComponent.svelte'
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+
+  const options = {
+    pausable: true,
+    classes: ['toast']
+  };
 </script>
 <slot />
+<SvelteToast {options} />
 <div class="footer">
   <FooterComponent />
 </div>
@@ -12,4 +19,18 @@
     bottom: 0px;
     display: inline-block;
   }
+  :global(.toast.error) {
+    --toastColor: var(--color-button-text);
+    --toastBackground: var(--color-red-dark);
+    --toastBarBackground: var(--color-red-lighter);
+  }
+  :global(._toastMsg > img) {
+    position: relative;
+    height: 1.5em;
+  }
+  :global(._toastMsg) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 </style>