From 008acbb0561e6daa88e51cbd208552cdf19603bd Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sat, 20 Mar 2021 22:31:33 +0100
Subject: [PATCH 1/2] fix scrollBottom

---
 src/components/newMessage.vue |  6 +++---
 src/lib/scrollHandler.js      | 14 ++++++++++++++
 src/views/chat.vue            | 25 +++++++++++++------------
 src/views/rooms.vue           |  6 +++---
 4 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/scrollHandler.js

diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 793490c..8c23df5 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -35,11 +35,11 @@ export default {
     roomId: String
   },
   methods: {
-    async sendMessage(){
+    sendMessage(){
       let content = this.msg.content;
-      if (!content.body) return;
+      if (!content.body.trim()) return;
       let msgSend = Object.assign({}, this.msg);
-      await matrix.sendEvent(msgSend, this.roomId);
+      matrix.sendEvent(msgSend, this.roomId);
       content.body = "";
       let id = this.$refs.newMessageInput;
       id.style.height = "1.25rem";
diff --git a/src/lib/scrollHandler.js b/src/lib/scrollHandler.js
new file mode 100644
index 0000000..950f645
--- /dev/null
+++ b/src/lib/scrollHandler.js
@@ -0,0 +1,14 @@
+export default class {
+  constructor(element) {
+    this.element = element
+  }
+  scrollToBottom(){
+    this.setScrollBottom(0);
+  }
+  getScrollBottom(){
+    return this.element.scrollHeight - this.element.scrollTop - this.element.offsetHeight;
+  }
+  setScrollBottom(height){
+    this.element.scrollTop = this.element.scrollHeight - this.element.offsetHeight - height;
+  }
+}
\ No newline at end of file
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 3aa5d05..92cb2cc 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <div ref="chatContainer" class="chatContainer">
-      <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+      <div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
         <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
         <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
-        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId"/>
+        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" />
       </div>
-      <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
+      <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     </div>
     <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
     <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
@@ -20,6 +20,7 @@ import Icon from '@/components/icon';
 import {matrix} from '@/main';
 import splitArray from '@/lib/splitArray.js'
 import timeline from '@/components/timeline';
+import scrollHandler from "@/lib/scrollHandler";
 
 export default {
   name: 'chat',
@@ -36,13 +37,9 @@ export default {
     openChatInfo: Function
   },
   methods:{
-    scrollToBottom(){
-      this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
-    },
-    scrollHandler(){
+    onScroll(){
       if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
-      let msg = this.$refs.msgContainer;
-      this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
+      this.showScrollBtn = this.scroll.getScrollBottom() > 400;
     },
     resize(height){
       this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
@@ -51,9 +48,11 @@ export default {
       return Object.keys(this.room.currentState.members).length > 2;
     },
     async loadEvents(){
+      let scrollBottom = this.scroll.getScrollBottom();
       this.loadingStatus = 'loading ...';
       await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
         .then(state => this.loadingStatus = state?'load more':false);
+      this.scroll.setScrollBottom(scrollBottom);
     },
     getUser(userId){
       return matrix.client.getUser(userId);
@@ -64,14 +63,16 @@ export default {
     return {
       showScrollBtn: false,
       scrollOnUpdate: true,
-      loadingStatus: 'load more'
+      loadingStatus: 'load more',
+      scroll: ()=>{}
     }
   },
   updated(){
-    //this.scrollToBottom();
+    if(this.scroll.getScrollBottom() < 400) this.scroll.scrollToBottom();
   },
   mounted(){
-    //this.scrollToBottom();
+    this.scroll = new scrollHandler(this.$refs.msgContainer);
+    this.scroll.scrollToBottom();
   }
 }
 </script>
diff --git a/src/views/rooms.vue b/src/views/rooms.vue
index 068c4d8..64dcb5d 100644
--- a/src/views/rooms.vue
+++ b/src/views/rooms.vue
@@ -7,7 +7,7 @@
       <h1>[chat]</h1>
       <input v-model="search" class="input" type="text" maxlength="50" placeholder="search"><br>
       <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
-        <div v-if="!search || room.name.toLowerCase().includes(search.toLowerCase())" class="roomListElement">
+        <div v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())" class="roomListElement">
           <userThumbnail
             class="roomImg"
             :mxcURL="getUrl(room)"
@@ -63,9 +63,9 @@ export default {
   },
   methods:{
     openChat(room){
-      this.currentRoom = room;
+      this.currentRoom = undefined
+      this.$nextTick(() => this.currentRoom = room);
       this.$router.push(`/rooms/${room.roomId}`);
-      this.$forceUpdate();
       this.search = '';
     },
     getUrl(room){

From 5651c88298f1550cf9b249d2d47b3d83ccb4a27d Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sat, 20 Mar 2021 22:38:03 +0100
Subject: [PATCH 2/2] fix chrome newMessage height

---
 src/components/newMessage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 8c23df5..dba5eda 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -88,6 +88,7 @@ export default {
   position: relative;
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
+  padding: 0;
   left: 2rem;
   min-height: 1.5rem;
   max-height: 10rem;