frontend: add channel editing

frontend/public/global.css

@@ -84,7 +84,7 @@ body {
 	background-color: var(--background-color-1);
 }
 
-/* shared styles for all components */
+/* top bar */
 
 .top-bar {
 	display: flex;
@@ -102,6 +102,8 @@ body {
 	margin-left: var(--space-xxs);
 }
 
+/* modal */
+
 .modal-backdrop {
 	position: absolute;
 	width: 100vw;
@@ -126,7 +128,7 @@ body {
 }
 
 .modal-header {
-	margin-bottom: var(--space-md);
+	margin-bottom: var(--space-norm);
 	text-align: center;
 }
 
@@ -143,6 +145,8 @@ body {
 	float: left;
 }
 
+/* input */
+
 .input-label {
 	text-transform: uppercase;
 	color: var(--foreground-color-2);
@@ -158,6 +162,8 @@ body {
 	line-height: inherit;
 }
 
+/* button */
+
 .button {
 	background-color: var(--background-color-2);
 	text-align: center;
@@ -185,6 +191,25 @@ 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 {
 	font-size: 2.488rem;
 }

frontend/src/components/modals/CreateChannel.svelte

@@ -27,7 +27,7 @@
 <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="h3">Create Channel</span>
+            <span class="h4">Create Channel</span>
         </div>
 
         <label class="input-label">

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 />
+    <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,17 +222,18 @@ class MessagesStoreProvider {
 class OverlayStore extends Store {
     constructor() {
         super({
-            createChannel: false
+            createChannel: null,
+            editChannel: null
         });
     }
 
-    open(name) {
-        this.value[name] = true;
+    open(name, props={}) {
+        this.value[name] = props;
         this.updated();
     }
 
     close(name) {
-        this.value[name] = false;
+        this.value[name] = null;
         this.updated();
     }
 }