From 1c87fa9758e261c23429cc9f01b216d8f8ea1ffb Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Wed, 27 Apr 2022 15:44:50 +0300
Subject: [PATCH] frontend: automatically keep scroll position when viewport is
 resized

---
 frontend/src/components/MessageInput.svelte |  4 +---
 frontend/src/components/Messages.svelte     | 23 ++++++++++++---------
 frontend/src/stores.js                      |  1 -
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 8f01df4..6b8a2ca 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/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>
diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index 45fdeca..3664565 100644
--- a/frontend/src/components/Messages.svelte
+++ b/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%;
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 356737b..5be2cba 100644
--- a/frontend/src/stores.js
+++ b/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);