add showNativeNotification

capacitor.config.json

@@ -4,7 +4,7 @@
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "./dist",
-  "linuxAndroidStudioPath": "~/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/bin/studio.sh",
+  "linuxAndroidStudioPath": "/home/alban/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/bin/studio.sh",
   "plugins": {
     "SplashScreen": {
       "launchShowDuration": 0

src/App.vue

@@ -28,7 +28,7 @@ input{
   color: #fff;
   background-color: #1d1d1d;
   border-radius: 1.25rem;
-  border: 1px solid #fff;
+  border: 0.1rem solid #fff;
   text-align: center;
   font-size: 1.1rem;
   margin: 0.5rem;

src/components/avatar.vue

@@ -1,36 +1,30 @@
 <template>
-  <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
+  <img v-if="mxcURL" :src="getAvatarUrl(mxcURL)" class="userThumbnail image"/>
   <div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
 </template>
 
 <script>
-import parseMXC from '@modular-matrix/parse-mxc';
-import {matrix} from "@/main";
 import {toSvg} from 'jdenticon';
+import {getAvatarUrl} from '@/lib/getMxc';
 
 export default {
-  name: "userThumbnail.vue",
+  name: 'userThumbnail.vue',
   components: {
   },
   props: {
     mxcURL: String,
     username: String,
     fallback: String,
-    homeserver: String,
     size: Number
   },
   methods: {
-    thumbnailUrl(){
-      let mxc = parseMXC.parse(this.mxcURL);
-      return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
-        mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
-    },
     getFontSize(){
-      return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
+      return window.getComputedStyle(document.body,null).fontSize.split('px', 1)||16;
     },
     getJdenticon(){
       return toSvg(this.fallback, this.getFontSize()*this.size);
-    }
+    },
+    getAvatarUrl
   },
   data(){
     return {

src/components/chatInformation.vue

@@ -18,15 +18,15 @@
         <p v-if="members.length>20">and {{members.length-20}} other members</p>
       </div>
     </div>
-    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
+    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.svg" />
   </div>
 </template>
 <script>
 import icon from './icon.vue';
-import {matrix} from "@/main";
 import UserListElement from "@/components/userListElement";
 import avatar from "@/components/avatar";
 import {getMxcFromRoom} from "@/lib/getMxc";
+import {getUser} from "@/lib/matrixUtils";
 
 export default {
   name: "chatInformation",
@@ -40,12 +40,10 @@ export default {
     closeChatInfo: Function
   },
   methods: {
-    getUser(userId){
-      return matrix.client.getUser(userId);
-    },
     getMembers(){
       return Object.keys(this.room.currentState.members)
     },
+    getUser,
     getMxcFromRoom
   },
   data(){

src/components/message.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
       <div v-if="replyEvent" class="reply">
-        {{replyEvent.sender}}<br>
-        {{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
+        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
+        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
       </div>
       <div v-html="parseMessage(msg)"></div>
       <div class="time">{{time}}</div>
@@ -10,10 +10,12 @@
 </template>
 
 <script>
-import {matrix} from "@/main";
+import {matrix} from '@/main';
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';
 
 export default {
-  name: "message",
+  name: 'message',
   props: {
     msg: String,
     time: String,
@@ -22,18 +24,6 @@ export default {
     roomId: String
   },
   methods:{
-    solveTextLinks(text){
-      return (text || "").replace(
-        /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
-        (match, space, url)=>{
-          let hyperlink = url;
-          if (!hyperlink.match('^https?://')) {
-            hyperlink = 'http://' + hyperlink;
-          }
-          return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
-        }
-      )
-    },
     async getReplyEvent(content) {
       let replyId = this.getReplyId(content);
       if (replyId === undefined) return undefined;
@@ -43,15 +33,11 @@ export default {
     },
     getReplyId(content){
       if(!content['m.relates_to']) return undefined;
-      return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
+      if(!content['m.relates_to']['m.in_reply_to']) return undefined;
+      return content['m.relates_to']['m.in_reply_to'].event_id;
     },
-    parseMessage(msg){
-      return this.solveTextLinks(
-        msg.replace(/>.*\n/gm, '').trim()
-          .replace(/</g, '&lt')
-          .replace(/>/g, '&gt')
-      );
-    }
+    calcUserName,
+    parseMessage
   },
   data(){
     return{
@@ -79,13 +65,13 @@ export default {
     margin-top: 0.25rem;
   }
   .messageReceive{
-    background-color: #42b983;
+    background-color: #424141;
     border-radius: 1rem 1rem 1rem 0;
   }
   .messageSend{
     margin-left:auto;
     margin-right:0;
-    background-color: #42a7b9;
+    background-color: #357882;
     border-radius: 1rem 1rem 0 1rem;
   }
   .time{
@@ -99,4 +85,7 @@ export default {
     padding-left: 0.5rem;
     margin-bottom: 0.5rem;
   }
+  .username{
+    font-weight: bold;
+  }
 </style>

src/components/newMessage.vue

@@ -1,16 +1,16 @@
 <template>
-    <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
-      <label for="newMessageInput"></label>
+  <div class="newMessageBanner" ref="newMessageBanner">
+    <div class="reply" v-if="replyTo" @click="resetReplyTo">
+      <span class="username">{{calcUserName(replyTo.sender)}}</span><br>
+      {{parseMessage(replyTo.content.body)}}
+    </div>
+    <form v-on:submit.prevent="sendMessage()">
       <textarea
         @keyup.enter.exact="sendMessage()"
-        @input="resizeMessageBanner()"
-        v-model="msg.content.body"
-        ref="newMessageInput"
-        id="newMessageInput"
-        class="newMessageInput"
-        autocomplete="off"
-        rows="1"
-        placeholder="type a message ..."
+        @input="resizeMessageBanner(); sendTyping(2000);"
+        v-model="event.content.body"
+        ref="newMessageInput" class="newMessageInput"
+        rows="1" placeholder="type a message ..."
       />
       <icon
         type="submit"
@@ -19,55 +19,76 @@
         ic="./sym/ic_send_white.svg"
       />
     </form>
+  </div>
 </template>
 
 <script>
 import icon from '@/components/icon.vue';
 import {matrix} from '@/main.js';
+import {parseMessage} from '@/lib/eventUtils';
+import {calcUserName} from '@/lib/matrixUtils';
 
 export default {
-  name: "newMessage",
+  name: 'newMessage',
   components: {
     icon
   },
   props: {
     onResize: Function,
-    roomId: String
+    roomId: String,
+    replyTo: Object,
+    resetReplyTo: Function
   },
   methods: {
     sendMessage(){
-      let content = this.msg.content;
+      let content = this.event.content;
       if (!content.body.trim()) return;
-      let msgSend = Object.assign({}, this.msg);
-      matrix.sendEvent(msgSend, this.roomId);
-      content.body = "";
+      matrix.sendEvent(this.event, this.roomId, this.replyTo);
+      content.body = '';
+      this.resetReplyTo();
       let id = this.$refs.newMessageInput;
-      id.style.height = "1.25rem";
+      id.style.height = '1.25rem';
       this.onResize(id.parentElement.clientHeight);
     },
+    sendTyping(timeout){
+      if (this.waitForSendTyping) return;
+      matrix.client.sendTyping(this.roomId, true, timeout+100);
+      setTimeout(()=>this.waitForSendTyping=false, timeout);
+    },
     resizeMessageBanner(){
       let id = this.$refs.newMessageInput;
       id.style.height = '1.25rem';
       id.style.height = `${id.scrollHeight}px`;
-      this.onResize(id.parentElement.clientHeight);
+      this.onResize(this.$refs.newMessageBanner.clientHeight);
+    },
+    focusInput(){
+      this.$refs.newMessageInput.focus();
     },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
     onSelectEmoji(emoji) {
-      this.msg.content.body += emoji.data;
-    }
+      this.event.content.body += emoji.data;
+    },
+    parseMessage,
+    calcUserName
   },
   data(){
     return {
-      msg: {
-        type: "m.room.message",
+      event: {
+        type: 'm.room.message',
         content: {
-          body: "",
-          msgtype: "m.text"
+          body: '',
+          msgtype: 'm.text',
+          'm.relates_to': {
+            'm.in_reply_to': {
+              event_id: undefined
+            }
+          }
         }
       },
-      showEmojiPicker: false
+      showEmojiPicker: false,
+      waitForSendTyping: false
     }
   }
 }
@@ -89,7 +110,7 @@ export default {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
   padding: 0;
-  left: 2rem;
+  left: 1rem;
   min-height: 1.5rem;
   max-height: 10rem;
   width: calc(100% - 7rem);
@@ -110,4 +131,18 @@ export default {
   bottom: 0.25rem;
   background-color: unset;
 }
+.reply{
+  position: relative;
+  width: calc(100% - 7rem);
+  left: 1rem;
+  border-left:  2px solid #fff;
+  padding-left: 0.5rem;
+  margin-top: 0.75rem;
+  margin-right: 0.5rem;
+  word-break: break-word;
+  white-space: pre-line;
+}
+.username{
+  font-weight: bold;
+}
 </style>

src/components/roomListElement.vue

@@ -17,7 +17,7 @@
 import avatar from "@/components/avatar";
 import {getMxcFromRoom} from "@/lib/getMxc";
 import {getTime} from "@/lib/getTimeStrings";
-import {matrix} from "@/main";
+import {calcUserName} from "@/lib/matrixUtils";
 
 export default {
   name: "userListElement",
@@ -37,10 +37,7 @@ export default {
       if (!room.timeline[room.timeline.length-1]) return undefined;
       return room.timeline[room.timeline.length-1].event;
     },
-    calcUserName(userId) {
-      if (matrix.user === userId) return 'you';
-      return matrix.client.getUser(userId).displayName || userId;
-    },
+    calcUserName,
     getMxcFromRoom
   }
 }

src/components/timeline.vue

@@ -22,13 +22,14 @@
           :class="groupTimeline?'indent username':'username'"
           v-if="group[0].sender !== user && groupTimeline"
         >
-          {{getUser(group[0].sender).displayName || group[0].sender}}
+          {{calcUserName(group[0].sender)}}
         </div>
         <div
           :class="groupTimeline?'indent event':'event'"
            v-for="event in group"
           :key="event.origin_server_ts"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+          @contextmenu.prevent="setReplyTo(event)"
         >
           <message
             v-if="event.content.msgtype==='m.text'"
@@ -37,6 +38,10 @@
             :content="event.content"
             :roomId="roomId"
           />
+          <div v-else-if="event.content.msgtype==='m.notice'" class="notice">
+            {{event.content.body}}
+            <span class="time">{{getTime(event.origin_server_ts)}}</span>
+          </div>
           <div v-else-if="event.type==='m.room.member'" class="info">
             {{membershipEvents[event.content.membership]}}
             <span class="time">{{getTime(event.origin_server_ts)}}</span>
@@ -50,11 +55,12 @@
 </template>
 
 <script>
-import message from "@/components/message";
-import avatar from "@/components/avatar";
-import {matrix} from "@/main";
-import splitArray from "@/lib/splitArray";
-import {getDate, getTime} from "@/lib/getTimeStrings";
+import message from '@/components/message';
+import avatar from '@/components/avatar';
+import splitArray from '@/lib/splitArray';
+import {getDate, getTime} from '@/lib/getTimeStrings';
+import {getUser, calcUserName} from '@/lib/matrixUtils';
+
 export default {
   name: 'eventGroup',
   components: {
@@ -65,12 +71,12 @@ export default {
     timeline: Array,
     user: String,
     groupTimeline: Boolean,
-    roomId: String
+    roomId: String,
+    setReplyTo: Function
   },
   methods: {
-    getUser(userId) {
-      return matrix.client.getUser(userId);
-    },
+    getUser,
+    calcUserName,
     splitArray,
     getDate,
     getTime
@@ -132,11 +138,18 @@ export default {
         font-weight: bold;
       }
       .event{
-        .info{
+        .info {
           font-style: italic;
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
           margin-left: 0.5rem;
+          .time {
+            font-size: 0.7rem;
+          }
+        }
+        .notice{
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
           .time{
             font-size: 0.7rem;
           }

src/components/topBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon @click.native="closeChat()" class="topIcon" ic="./sym/arrow_back-24px.svg" />
+      <icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.svg" />
       <div @click="openChatInfo()" class="container">
         <avatar class="topIcon avatar" :mxcURL="getMxcFromRoom(room)" :fallback="room.roomId" :size="3"/>
         <div class="chatName">{{room.name}}</div>

src/lib/NotificationHandler.js

@@ -0,0 +1,47 @@
+import {getMxcFromUserId, getAvatarUrl} from '@/lib/getMxc';
+import {calcUserName} from '@/lib/matrixUtils';
+import {getRoom} from '@/lib/matrixUtils';
+import {router} from '@/router';
+import {Capacitor, Plugins} from '@capacitor/core';
+const {LocalNotifications} = Plugins;
+
+export class NotificationHandler{
+  constructor() {
+    this.activateNotification();
+  }
+  async activateNotification(){
+    if (!window.Notification){
+      console.log('notifications are unsupported')
+      return false;
+    }
+    if (Notification.permission === 'granted') return true;
+    return await Notification.requestPermission()
+      .then(permission => {return permission === 'granted'});
+  }
+  showNotification(event){
+    if (Capacitor.isNative) return this.showNativeNotification(event);
+    if (Notification.permission !== 'granted') return false;
+    console.log(event);
+    let mxc = getMxcFromUserId(event.sender);
+    new Notification(`${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`, {
+      body: event.content.body,
+      icon: mxc?getAvatarUrl(mxc):undefined
+    }).onclick = ()=>router.push(`/rooms/${event.room_id}`);
+  }
+  showNativeNotification(event){
+    LocalNotifications.schedule({
+      notifications: [
+        {
+          title: `${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`,
+          body: event.content.body,
+          id: 1,
+          schedule: { at: new Date(Date.now() + 1000 * 5) },
+          sound: null,
+          attachments: null,
+          actionTypeId: '',
+          extra: null
+        }
+      ]
+    });
+  }
+}

src/lib/eventUtils.js

@@ -0,0 +1,19 @@
+export function solveTextLinks(text){
+  return (text || '').replace(
+    /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
+    (match, space, url)=>{
+      let hyperlink = url;
+      if (!hyperlink.match('^https?://')) {
+        hyperlink = 'http://' + hyperlink;
+      }
+      return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
+    }
+  )
+}
+export function parseMessage(msg){
+  return solveTextLinks(
+    msg.replace(/>.*\n/gm, '').trim()
+      .replace(/</g, '&lt')
+      .replace(/>/g, '&gt')
+  );
+}

src/lib/getMxc.js

@@ -1,5 +1,6 @@
 import sdk from 'matrix-js-sdk'
-import {matrix} from "@/main";
+import {matrix} from '@/main';
+import parseMXC from '@modular-matrix/parse-mxc';
 
 export function getMxcFromUser(user){
   return user.avatarUrl;
@@ -10,10 +11,16 @@ export function getMxcFromUserId(userId){
 }
 
 export function getMxcFromRoom(room){
-  let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
+  let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents('m.room.avatar');
   return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
 }
 
 export function getMxcFromRoomId(roomId){
   return getMxcFromRoom(matrix.client.getRoom(roomId));
+}
+
+export function getAvatarUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
+  let mxc = parseMXC.parse(mxcUrl);
+  return `${matrix.baseUrl}/_matrix/media/v1/thumbnail/${
+    mxc.homeserver}/${mxc.id}?width=${size}&height=${size}&method=${resizeMethod}`;
 }

src/lib/matrixHandler.js

@@ -1,4 +1,5 @@
 import matrix from 'matrix-js-sdk';
+import {NotificationHandler} from "@/lib/NotificationHandler";
 
 export class MatrixHandler {
   constructor(clientDisplayName = 'matrix-chat') {
@@ -9,6 +10,7 @@ export class MatrixHandler {
     this.loading = undefined;
     this.user = undefined;
     this.baseUrl = undefined;
+    this.notify = new NotificationHandler();
   }
   login(user, password, baseUrl, onError, callback = ()=>{}){
     if (this.client){ console.log('there is already an active session'); return; }
@@ -57,29 +59,35 @@ export class MatrixHandler {
     await this.client.stopClient();
     this.client = undefined;
   }
-  startSync(callback = ()=>{}){
+  async startSync(callback = ()=>{}){
     this.loading = true;
-    this.client.startClient();
+    await this.client.startClient();
     this.client.once('sync', (state) => {
       console.log(state);
       this.rooms = this.client.getRooms();
-      console.log(this.rooms)
       this.loading = false;
       callback();
+      this.listenToPushEvents()
     });
   }
-  async sendEvent(msg, roomId){
-    const msgSend = {
-      type: msg.type,
-      content: {
-        body: msg.content.body.trim(),
-        msgtype: msg.content.msgtype,
-      },
-    };
-    await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => {
-      console.log('message sent successfully');
-    }).catch((err) => {
-      console.log(`error while sending message => ${err}`);
+  listenToPushEvents(){
+    this.client.on('event', event => {
+      if (this.client.getPushActionsForEvent(event).notify){
+        this.notify.showNotification(event.event);
+      }
     });
   }
+  async sendEvent({content, type}, roomId, replyTo = undefined){
+    await this.client.sendEvent(roomId, type, {
+      body: content.body.trim(),
+      msgtype: content.msgtype,
+      'm.relates_to': {
+        'm.in_reply_to': {
+          event_id: replyTo?replyTo.event_id:undefined
+        }
+      }
+    }).then(() => console.log('message sent successfully'))
+      .catch((err) => console.log(`error while sending message => ${err}`)
+      );
+  }
 }

src/lib/matrixUtils.js

@@ -0,0 +1,12 @@
+import {matrix} from '@/main';
+
+export function getUser(userId) {
+  return matrix.client.getUser(userId);
+}
+export function calcUserName(userId){
+  if (matrix.user === userId) return 'you';
+  return matrix.client.getUser(userId).displayName || userId;
+}
+export function getRoom(roomId){
+  return matrix.client.getRoom(roomId);
+}

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
-import {router} from './router.js'
+import {router} from '@/router'
 import {MatrixHandler} from './lib/matrixHandler.js'
 import {cookieHandler} from './lib/cookieHandler.js';
 

src/router.js

@@ -1,40 +0,0 @@
-import VueRouter from 'vue-router';
-import login from '@/views/login';
-import chat from '@/views/chat';
-import rooms from '@/views/rooms';
-import admin from '@/views/admin';
-
-export const router = new VueRouter({
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: login
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: login
-    },
-    {
-      path: '/chat/*',
-      name: 'chat',
-      component: chat
-    },
-    {
-      path: '/rooms/*',
-      name: 'room',
-      component: rooms
-    },
-    {
-      path: '/rooms',
-      name: 'rooms',
-      component: rooms
-    },
-    {
-      path: '/admin',
-      name: 'admin',
-      component: admin
-    }
-  ]
-})

src/router/index.js

@@ -0,0 +1,40 @@
+import VueRouter from 'vue-router';
+import login from '@/views/login';
+import chat from '@/views/chat';
+import rooms from '@/views/rooms';
+import admin from '@/views/admin';
+
+export const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: login
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login
+    },
+    {
+      path: '/chat/*',
+      name: 'chat',
+      component: chat
+    },
+    {
+      path: '/rooms/*',
+      name: 'room',
+      component: rooms
+    },
+    {
+      path: '/rooms',
+      name: 'rooms',
+      component: rooms
+    },
+    {
+      path: '/admin',
+      name: 'admin',
+      component: admin
+    }
+  ]
+})

src/views/chat.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
     <div ref="chatContainer" class="chatContainer">
-      <div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+      <div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
         <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"
+          :setReplyTo="event=>{replyTo=event; resize();}"
+        />
       </div>
       <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
     </div>
-    <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
+    <newMessage
+      :onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
+      :replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
+    />
     <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
   </div>
 </template>
@@ -20,7 +27,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";
+import scrollHandler from '@/lib/scrollHandler';
 
 export default {
   name: 'chat',
@@ -38,10 +45,10 @@ export default {
   },
   methods:{
     onScroll(){
-      if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
-      this.showScrollBtn = this.scroll.getScrollBottom() > 400;
+      if (this.$refs.timelineContainer.scrollTop < 400 && this.loadingStatus !== 'loading') this.loadEvents();
+      this.showScrollBtn = this.scroll.getScrollBottom() > 500;
     },
-    resize(height){
+    resize(height = this.$refs.newMessage.clientHeight){
       this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
     },
     isGroup(){
@@ -49,10 +56,10 @@ export default {
     },
     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);
+      this.loadingStatus = 'loading';
+      await matrix.client.scrollback(this.room, 30);
+      this.loadingStatus = 'load more';
+      this.scroll.setScrollBottom(scrollBottom)
     },
     getUser(userId){
       return matrix.client.getUser(userId);
@@ -64,15 +71,22 @@ export default {
       showScrollBtn: false,
       scrollOnUpdate: true,
       loadingStatus: 'load more',
-      scroll: ()=>{}
+      scroll: ()=>{},
+      replyTo: undefined
     }
   },
   updated(){
-    if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
+    if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
   },
   mounted(){
-    this.scroll = new scrollHandler(this.$refs.msgContainer);
+    this.scroll = new scrollHandler(this.$refs.timelineContainer);
     this.scroll.scrollToBottom();
+    this.onScroll();
+  },
+  watch: {
+    '$route'(){
+      this.scroll.scrollToBottom();
+    }
   }
 }
 </script>
@@ -85,7 +99,7 @@ export default {
   top: 3.5rem;
   width: 100%;
   height: calc(100% - 7rem);
-  .messagesContainer{
+  .timelineContainer{
     height: 100%;
     overflow-y: auto;
   }

src/views/rooms.vue

@@ -6,7 +6,11 @@
     <div id="roomList" class="roomList">
       <h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
       <input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
-      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
+      <div
+        v-for="room in Object.assign([], matrix.rooms)
+          .sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)"
+        :key="room.roomId" @click="openChat(room)"
+      >
         <room-list-element
             v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())"
             :room="room"
@@ -16,14 +20,14 @@
     </div>
     <chat
       class="chat"
-      v-if="currentRoom"
-      :room="currentRoom"
+      v-if="showRoom && getCurrentRoom()"
+      :room="getCurrentRoom()"
       :user="matrix.user"
-      :close-chat="()=>currentRoom=undefined"
+      :close-chat="closeChat"
       :open-chat-info="()=>showChatInfo=true"
     />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
-    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
+    <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
   </div>
 </template>
 
@@ -34,6 +38,7 @@ import {matrix} from "@/main";
 import ThrobberOverlay from "@/components/throbberOverlay";
 import {getMxcFromRoom} from "@/lib/getMxc";
 import roomListElement from "@/components/roomListElement";
+import {getRoom} from "@/lib/matrixUtils";
 
 export default {
   name: "rooms",
@@ -46,18 +51,25 @@ export default {
   methods:{
     openChat(room){
       this.showChatInfo = false;
-      this.currentRoom = undefined
-      this.$nextTick(() => this.currentRoom = room);
+      this.showRoom = false;
       this.$router.push(`/rooms/${room.roomId}`);
+      this.$nextTick(() => this.showRoom = true);
       this.search = '';
     },
-    getMxcFromRoom
+    getMxcFromRoom,
+    getRoom,
+    getCurrentRoom(){
+      return getRoom(this.$route.path.split('/')[2]);
+    },
+    closeChat(){
+      this.$router.push('/rooms');
+    }
   },
   data(){
     return {
       matrix,
-      currentRoom: undefined,
       showChatInfo: false,
+      showRoom: true,
       search: ''
     }
   },
@@ -102,7 +114,7 @@ export default {
   text-align: center;
 }
 input{
-  width: calc(100% - 5rem);
+  width: calc(100% - 5.2rem);
 }
 .wideElement{
   display: block;