frontend: add "toast" system to tell the user of errors

frontend/public/global.css

@@ -196,7 +196,7 @@ body {
 	justify-content: center;
 	align-items: center;
 	background-color: transparent;
-	color: var(--foreground-color-3);
+	color: var(--foreground-color-2);
 	text-align: center;
 	border: none;
 	border-radius: var(--radius-md);

frontend/src/components/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script>
     import request from "../request";
     import { apiRoute } from "../storage";
-    import { messagesStoreProvider, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -39,6 +39,9 @@
             messages.deleteMessage({
                 id: optimisticMessageId
             });
+            overlayStore.open("toast", {
+                message: "Couldn't send message"
+            });
         }
     };
 </script>

frontend/src/components/overlays/CreateChannel.svelte

@@ -11,9 +11,14 @@
     const close = () => overlayStore.close('createChannel');
     const create = async () => {
         createButtonEnabled = false;
-        await request("POST", apiRoute("channels"), true, {
+        const { ok } = await request("POST", apiRoute("channels"), true, {
             name: channelName
         });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't create channel"
+            });
+        }
         close();
     };
 </script>

frontend/src/components/overlays/EditChannel.svelte

@@ -13,14 +13,24 @@
     const close = () => overlayStore.close('editChannel');
     const save = async () => {
         buttonsEnabled = false;
-        await request("PUT", apiRoute(`channels/${channel.id}`), true, {
+        const { ok } = await request("PUT", apiRoute(`channels/${channel.id}`), true, {
             name: channelName
         });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't edit channel"
+            });
+        }
         close();
     };
     const deleteChannel = async () => {
         buttonsEnabled = false;
-        await request("DELETE", apiRoute(`channels/${channel.id}`), true);
+        const { ok } = await request("DELETE", apiRoute(`channels/${channel.id}`), true);
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't delete channel"
+            });
+        }
         close();
     };
 </script>
@@ -48,7 +58,7 @@
 
         <div class="modal-footer">
             <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
-            <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }">Delete</button>
+            <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
             <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
         </div>
     </div>

frontend/src/components/overlays/OverlayProvider.svelte

@@ -2,6 +2,7 @@
     import { overlayStore } from "../../stores";
     import EditChannel from "./EditChannel.svelte";
     import CreateChannel from "./CreateChannel.svelte";
+    import Toast from "./Toast.svelte";
 </script>
 
 {#if $overlayStore.createChannel}
@@ -10,3 +11,6 @@
 {#if $overlayStore.editChannel}
     <EditChannel { ...$overlayStore.editChannel } />
 {/if}
+{#if $overlayStore.toast}
+    <Toast { ...$overlayStore.toast } />
+{/if}

frontend/src/components/overlays/Toast.svelte

@@ -0,0 +1,32 @@
+<script>
+    import { XIcon } from "svelte-feather-icons";
+    import { quintInOut } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { overlayStore } from "../../stores";
+
+    export let message;
+</script>
+
+<style>
+    .toast {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 5.5em;
+        left: 50%;
+        background-color: var(--purple-1);
+        transform: translate(-50%, -50%);
+        padding: var(--space-sm);
+        border-radius: var(--radius-md);
+    }
+</style>
+
+{#key message}
+    <div class="toast" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}">
+        <span>{ message }</span>
+        <button class="icon-button" on:click="{ () => overlayStore.close('toast') }">
+            <XIcon />
+        </button>
+    </div>
+{/key}

frontend/src/stores.js

@@ -182,6 +182,10 @@ class MessageStore extends Store {
             res.json.reverse();
             this.value = res.json.concat(this.value);
             this.updated();
+        } else {
+            overlayStore.open("toast", {
+                message: "Messages failed to load"
+            });
         }
     }