frontend: implement autoscroll

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

@@ -1,7 +1,7 @@
 <script>
     import { HashIcon } from "svelte-feather-icons";
     import request from "../../../request";
-import { apiRoute } from "../../../storage";
+    import { apiRoute } from "../../../storage";
     import { messagesStoreProvider, userInfoStore } from "../../../stores";
     import Messages from "./Messages.svelte";
 
@@ -28,9 +28,10 @@ import { apiRoute } from "../../../storage";
             createdAt: Date.now().toString()
         };
         messages.addMessage(optimisticMessage);
+        messageInput = "";
 
         const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
-            content: messageInput
+            content: optimisticMessage.content
         });
         
         if (res.success && res.ok) {

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

@@ -1,10 +1,23 @@
 <script>
+    import { afterUpdate, beforeUpdate } from "svelte";
     import { messagesStoreProvider } from "../../../stores.js";
 
     export let channelId;
+    let scrollTarget;
+    let shouldAutoscroll = false;
 
     $: messages = messagesStoreProvider.getStore(channelId);
 
+    beforeUpdate(() => {
+        shouldAutoscroll = scrollTarget && (scrollTarget.offsetHeight + scrollTarget.scrollTop) > (scrollTarget.scrollHeight - 20);
+    });
+
+    afterUpdate(() => {
+        if (shouldAutoscroll && scrollTarget) {
+            scrollTarget.scrollIntoView();
+        }
+    });
+
     const onScroll = (e) => {
         const { scrollTop, offsetHeight, scrollHeight } = e.target;
         if (scrollTop === 0) {
@@ -37,4 +50,5 @@
             <span>{ message.content }</span>
         </div>
     {/each}
+    <div bind:this={ scrollTarget }></div>
 </div>