frontend: automatically keep scroll position when viewport is resized

frontend/src/components/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script>
     import request from "../request";
     import { apiRoute } from "../storage";
-    import { messageInputFocusStatus, messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -76,7 +76,5 @@
         class="message-input"
         on:keydown={ onKeydown }
         bind:value={ messageInput }
-        on:focus="{ () => messageInputFocusStatus.set(true) }"
-        on:blur="{ () => messageInputFocusStatus.set(false) }"
     >
 </div>

frontend/src/components/Messages.svelte

@@ -1,6 +1,6 @@
 <script>
     import { afterUpdate, beforeUpdate, onMount } from "svelte";
-    import { messageInputFocusStatus, messagesStoreProvider } from "../stores.js";
+    import { messagesStoreProvider, showSidebar } from "../stores.js";
     import Message from "./Message.svelte";
 
     export let channelId;
@@ -8,17 +8,9 @@
     let scrollAnchor;
     let shouldAutoscroll = true;
     let lastScrollHeight = null;
-    let isScrolledToBottom = false;
+    let isScrolledToBottom = true;
 
     $: messages = messagesStoreProvider.getStore(channelId);
-    $: {
-        console.log($messageInputFocusStatus, isScrolledToBottom);
-        if ($messageInputFocusStatus && isScrolledToBottom) {
-            setTimeout(() => {
-                scrollTarget.scrollTop = scrollTarget.scrollHeight;
-            }, 0);
-        }
-    }
 
     afterUpdate(() => {
         // hacky way to preserve scroll position when messages are pushed back
@@ -55,8 +47,19 @@
         }
     };
 
+    const windowDidResize = () => {
+        // TODO: hack
+        // showSidebar is false on small viewports
+        // scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
+        const isSmallViewport = !$showSidebar;
+        if (isScrolledToBottom || isSmallViewport) {
+            scrollAnchor.scrollIntoView(false);
+        }
+    };
 </script>
 
+<svelte:window on:resize={ windowDidResize } />
+
 <style>
     .messages-container {
         height: 100%;

frontend/src/stores.js

@@ -265,4 +265,3 @@ export const userInfoStore = new UserInfoStore();
 export const overlayStore = new OverlayStore();
 export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
 export const showSidebar = writable(false);
-export const messageInputFocusStatus = writable(false);