frontend/public/global.css

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

frontend/src/components/App.svelte

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

frontend/src/components/modals/CreateChannel.svelte

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

frontend/src/components/modals/EditChannel.svelte

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

@@ -1,16 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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/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 "./overlays/OverlayProvider.svelte";
+    import OverlayProvider from "./OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";
 </script>
 

frontend/src/components/pages/main/MessageInput.svelte

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

frontend/src/components/pages/main/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/pages/main/OverlayProvider.svelte

@@ -0,0 +1,12 @@
+<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/components/pages/main/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/pages/main/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/stores.js

@@ -182,10 +182,6 @@ 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"
-            });
         }
     }