frontend: add message edit overlay

frontend/src/components/Message.svelte

@@ -1,4 +1,7 @@
 <script>
+    import { MoreVerticalIcon } from "svelte-feather-icons";
+    import { overlayStore } from "../stores";
+
     export let message;
 </script>
 
@@ -8,6 +11,18 @@
         word-break: break-all;
     }
 
+    .message .edit-message {
+        visibility: hidden;
+    }
+
+    .message:hover {
+        background-color: var(--background-color-2);
+    }
+
+    .message:hover .edit-message {
+        visibility: visible;
+    }
+
     .message-content {
         color: var(--foreground-color-2);
     }
@@ -20,9 +35,16 @@
         font-weight: bold;
         margin-right: var(--space-xxs);
     }
+
+    .edit-message {
+        float: right;
+    }
 </style>
 
 <div class="message">
     <span class="author">{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
+    <button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
+        <MoreVerticalIcon />
+    </button>
 </div>

frontend/src/components/overlays/EditMessage.svelte

@@ -0,0 +1,65 @@
+<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 message;
+
+    let messageContent = message.content;
+    let buttonsEnabled = true;
+
+    const close = () => overlayStore.close('editMessage');
+    const save = async () => {
+        buttonsEnabled = false;
+        const { ok } = await request("PUT", apiRoute(`messages/${message.id}`), true, {
+            content: messageContent
+        });
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't edit message"
+            });
+        }
+        close();
+    };
+    const deleteMessage = async () => {
+        buttonsEnabled = false;
+        const { ok } = await request("DELETE", apiRoute(`messages/${message.id}`), true);
+        if (!ok) {
+            overlayStore.open("toast", {
+                message: "Couldn't delete message"
+            });
+        }
+        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 Message</span>
+        </div>
+
+        <label class="input-label">
+            Content
+            <input class="input full-width" minlength="1" maxlength="32" bind:value={ messageContent } />
+        </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="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
+            <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
+        </div>
+    </div>
+</div>

frontend/src/components/overlays/OverlayProvider.svelte

@@ -5,6 +5,7 @@
     import Toast from "./Toast.svelte";
     import Login from "./Login.svelte";
     import CreateAccount from "./CreateAccount.svelte";
+    import EditMessage from "./EditMessage.svelte";
 </script>
 
 {#if $overlayStore.createChannel}
@@ -22,3 +23,6 @@
 {#if $overlayStore.createAccount}
     <CreateAccount />
 {/if}
+{#if $overlayStore.editMessage}
+    <EditMessage { ...$overlayStore.editMessage } />
+{/if}

src/routes/api/v1/messages.ts

@@ -43,7 +43,8 @@ router.delete(
         dispatch(`channel:${permissionCheckResult.rows[0].channel_id}`, {
             t: GatewayPayloadType.MessageDelete,
             d: {
-                id
+                id,
+                channel_id: permissionCheckResult.rows[0].channel_id
             }
         });