add placeholder janky reply button

frontend/src/components/Message.svelte

@@ -1,8 +1,21 @@
 <script>
-    import { MoreVerticalIcon } from "svelte-feather-icons";
+    import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
-    import { overlayStore, userInfoStore } from "../stores";
+    import { overlayStore, setMessageInputEvent, userInfoStore } from "../stores";
 
     export let message;
+
+    const reply = () => {
+        let replyString = "";
+        const messageLines = message.content.split("\n");
+
+        messageLines.forEach(line => {
+            replyString += `> ${line}\n`;
+        });
+
+        replyString += `@${message.author_username} `;
+
+        setMessageInputEvent.update(replyString);
+    };
 </script>
 
 <style>
@@ -50,8 +63,11 @@
 <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 icon-button-auto edit-message" on:click="{ reply }" aria-label="Reply to Message">
+        <CornerUpLeftIcon />
+    </button>
     {#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)}
-        <button class="icon-button icon-button-auto edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }" aria-label="Edit Message">
+        <button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }" aria-label="Edit Message">
             <MoreVerticalIcon />
         </button>
     {/if}

frontend/src/components/MessageInput.svelte

@@ -3,7 +3,7 @@
     import { ArrowUpIcon } from "svelte-feather-icons";
     import request from "../request";
     import { apiRoute, getItem } from "../storage";
-    import { messagesStoreProvider, overlayStore, selectedChannel, smallViewport, typingStore, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, selectedChannel, setMessageInputEvent, smallViewport, typingStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -92,10 +92,25 @@
         typingStore.didInputKey();
     };
 
+
+    const unsubscribers = [];
+
+
     // Focus the text area when the component first loads, or when the user selects another channel
     const focusTextarea = () => messageTextarea && messageTextarea.focus();
     onMount(focusTextarea);
-    onDestroy(selectedChannel.subscribe(focusTextarea));
+    unsubscribers.push(selectedChannel.subscribe(focusTextarea));
+
+    // Handle the setMessageInput event
+    unsubscribers.push(setMessageInputEvent.subscribe((value) => {
+        messageInput = value;
+        focusTextarea();
+    }));
+
+
+    onDestroy(() => {
+        unsubscribers.forEach(e => e());
+    });
 </script>
 
 <style>

frontend/src/stores.js

@@ -37,6 +37,12 @@ class Store {
         this.updated();
     }
 
+    // like set(), but without checking if the value is the same
+    update(value) {
+        this.value = value;
+        this.updated();
+    }
+
     updated() {
         storeLog(`(${this.name}) (updated) Calling all (${this._handlers.length}) handlers`, this.value);
         for (let i = this._handlers.length - 1; i >= 0; i--) {
@@ -456,6 +462,7 @@ export const userInfoStore = new UserInfoStore();
 export const overlayStore = new OverlayStore();
 export const typingStore = new TypingStore();
 export const presenceStore = new PresenceStore();
+export const setMessageInputEvent = new Store(null, "event:setMessageInput");
 
 export const allStores = {
     selectedChannel,