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/App.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Main from "./pages/main/Main.svelte";
+    import Main from "./Main.svelte";
 </script>
 
 <Main />

frontend/src/components/Main.svelte

@@ -1,8 +1,8 @@
 <script>
     import { CloudIcon } from "svelte-feather-icons";
-    import { gatewayStatus, selectedChannel } from "../../../stores";
+    import { gatewayStatus, selectedChannel } from "../stores";
     import ChannelView from "./ChannelView.svelte";
-    import OverlayProvider from "./OverlayProvider.svelte";
+    import OverlayProvider from "./overlays/OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";
 </script>
 

frontend/src/components/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script>
-    import request from "../../../request";
-    import { apiRoute } from "../../../storage";
-    import { messagesStoreProvider, userInfoStore } from "../../../stores";
+    import request from "../request";
+    import { apiRoute } from "../storage";
+    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/Messages.svelte

@@ -1,6 +1,6 @@
 <script>
     import { afterUpdate, beforeUpdate, onMount } from "svelte";
-    import { messagesStoreProvider } from "../../../stores.js";
+    import { messagesStoreProvider } from "../stores.js";
     import Message from "./Message.svelte";
 
     export let channelId;

frontend/src/components/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script>
     import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
-    import { channels, overlayStore, selectedChannel } from "../../../stores";
+    import { channels, overlayStore, selectedChannel } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 </script>
 

frontend/src/components/UserTopBar.svelte

@@ -1,6 +1,6 @@
 <script>
     import { AtSignIcon } from "svelte-feather-icons";
-    import { userInfoStore } from "../../../stores";
+    import { userInfoStore } from "../stores";
 </script>
 
 <div class="top-bar">

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

@@ -0,0 +1,16 @@
+<script>
+    import { overlayStore } from "../../stores";
+    import EditChannel from "./EditChannel.svelte";
+    import CreateChannel from "./CreateChannel.svelte";
+    import Toast from "./Toast.svelte";
+</script>
+
+{#if $overlayStore.createChannel}
+    <CreateChannel { ...$overlayStore.createChannel } />
+{/if}
+{#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/components/pages/main/OverlayProvider.svelte

@@ -1,12 +0,0 @@
-<script>
-    import { overlayStore } from "../../../stores";
-    import EditChannel from "../../modals/EditChannel.svelte";
-    import CreateChannel from "../../modals/CreateChannel.svelte";
-</script>
-
-{#if $overlayStore.createChannel}
-    <CreateChannel { ...$overlayStore.createChannel } />
-{/if}
-{#if $overlayStore.editChannel}
-    <EditChannel { ...$overlayStore.editChannel } />
-{/if}

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"
+            });
         }
     }