frontend: add channel editing

frontend/public/global.css

@@ -191,6 +191,23 @@ body {
 	background-color: var(--purple-2);
 }
 
+.icon-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: transparent;
+	color: var(--foreground-color-3);
+	text-align: center;
+	border: none;
+	border-radius: var(--radius-md);
+	font: inherit;
+	margin-left: auto;
+}
+
+.icon-button:hover {
+	color: var(--foreground-color-1);
+}
+
 /* text */
 
 .h1 {

frontend/src/components/modals/EditChannel.svelte

@@ -0,0 +1,55 @@
+<script>
+    import { fade, fly } from "svelte/transition";
+    import { quintInOut } from "svelte/easing";
+    import { overlayStore } from "../../stores";
+    import request from "../../request";
+    import { apiRoute } from "../../storage";
+
+    export let channel;
+
+    let channelName = channel.name;
+    let buttonsEnabled = true;
+
+    const close = () => overlayStore.close('editChannel');
+    const save = async () => {
+        buttonsEnabled = false;
+        await request("PUT", apiRoute(`channels/${channel.id}`), true, {
+            name: channelName
+        });
+        close();
+    };
+    const deleteChannel = async () => {
+        buttonsEnabled = false;
+        await request("DELETE", apiRoute(`channels/${channel.id}`), true);
+        close();
+    };
+</script>
+
+<style>
+    .full-width {
+        width: 100%;
+    }
+
+    .delete-button {
+        color: var(--red-2);
+    }
+</style>
+
+<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+        <div class="modal-header">
+            <span class="h4">Edit Channel</span>
+        </div>
+
+        <label class="input-label">
+            Channel Name
+            <input class="input full-width" bind:value={ channelName } />
+        </label>
+
+        <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 button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
+        </div>
+    </div>
+</div>

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

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

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

@@ -1,8 +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,5 +1,5 @@
 <script>
-    import { HashIcon, PlusIcon } from "svelte-feather-icons";
+    import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
     import { channels, overlayStore, selectedChannel } from "../../../stores";
     import UserTopBar from "./UserTopBar.svelte";
 </script>
@@ -13,6 +13,9 @@
                     <HashIcon />
                 </div>
                 <span>{ channel.name }</span>
+                <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
+                    <MoreVerticalIcon />
+                </button>
             </button>
         {/each}
         <button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
@@ -52,7 +55,6 @@
         border-radius: var(--radius-md);
         width: 100%;
         max-height: 3.4em;
-        text-align: center;
     }
 
     .sidebar-button span {
@@ -71,6 +73,14 @@
         height: 24px;
     }
 
+    .sidebar-button .icon-button {
+        visibility: hidden;
+    }
+
+    .sidebar-button:hover .icon-button {
+        visibility: visible;
+    }
+
     .sidebar-button.selected,
     .sidebar-button:hover {
         background-color: var(--background-color-2);

frontend/src/stores.js

@@ -222,7 +222,8 @@ class MessagesStoreProvider {
 class OverlayStore extends Store {
     constructor() {
         super({
-            createChannel: null
+            createChannel: null,
+            editChannel: null
         });
     }