Improve read marker

Fix login from sidebar (issue #31), initial message sending (issue #30), remove "open keanu app" (issue #29).

src/App.vue

@@ -12,24 +12,23 @@
 
     <v-navigation-drawer app v-model="openDrawer">
       <v-list nav dense>
-
         <template v-if="!currentUser && $route.path != '/login'">
-        <v-btn color="green" dark to="/login" replace
+          <v-btn
-          ><v-icon>mdi-login</v-icon>Login</v-btn
+            color="green"
-        >
+            dark
-      </template>
+            @click="openDrawer = false;$navigation.push({ path: '/login' }, -1)"
-      <template v-else-if="currentUser">
+            ><v-icon>mdi-login</v-icon>Login</v-btn
-        <div class="ma-2">{{ currentUser.user_id }}</div>
+          >
-            <v-list-item @click.prevent="logOut">
+        </template>
-              <v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
+        <template v-else-if="currentUser">
-              <v-list-item-title>Logout</v-list-item-title>
+          <div class="ma-2">{{ currentUser.user_id }}</div>
-            </v-list-item>
+          <v-list-item @click.prevent="logOut">
-      </template>
+            <v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
+            <v-list-item-title>Logout</v-list-item-title>
+          </v-list-item>
+        </template>
 
-        <RoomList
+        <RoomList v-if="$matrix.ready" @close="openDrawer = false" />
-          v-if="$matrix.ready"
-          @close="openDrawer = false"
-        />
       </v-list>
     </v-navigation-drawer>
 
@@ -38,10 +37,11 @@
     </v-main>
 
     <v-footer app class="copyright">
-       <v-btn icon x-small @click.stop="openDrawer = !openDrawer">
+      <v-btn icon x-small @click.stop="openDrawer = !openDrawer">
         <v-icon>menu</v-icon>
-       </v-btn>
+      </v-btn>
-      Powered by Guardian Project. Version: {{ buildVersion }}</v-footer>
+      Powered by Guardian Project. Version: {{ buildVersion }}</v-footer
+    >
   </v-app>
 </template>
 
@@ -68,8 +68,11 @@ export default {
       return this.$store.state.auth.status.loggedIn;
     },
     logOut() {
+      this.openDrawer = false;
       this.$store.dispatch("auth/logout");
-      this.$navigation.push("/login", -1);
+      this.$nextTick(() => {
+        this.$navigation.push({path: "/login"}, -1);
+      })
     },
   },
   computed: {
@@ -82,7 +85,8 @@ export default {
       immediate: true,
       handler(ignorednewVal, ignoredoldVal) {
         if (this.loggedIn()) {
-          this.$matrix.getMatrixClient(this.currentUser)
+          this.$matrix
+            .getMatrixClient(this.currentUser)
             .then(() => {
               console.log("Matrix client ready");
             })

src/assets/css/chat.scss

@@ -367,30 +367,29 @@
 
 
 .read-marker {
-    //display: block;
-    margin-top: 20px;
-    margin-bottom: 20px;
     margin-left: 20px;
     margin-right: 20px;
     height: 1px;
+    width: 100%;
     line-height: var(--v-theme-title-featured-line-height);
-    position: relative;
+    position: absolute;
+    bottom: 0;
     font-family: sans-serif;
     font-style: normal;
     font-weight: bold;
-    font-size: 9.88014 * $chat-text-size;
+    font-size: 8 * $chat-text-size;
     line-height: 140%;
     /* identical to box height, or 14px */
     letter-spacing: 0.29px;
-    color: #9C9CAE;
+    color: #c0c0c0;
-    background-color: #9C9CAE;
+    background-color: #c0c0c0;
+    text-align: center;
     &::after {
         position: absolute;
-        left: 10px;
+        top: -4px;
-        top: -6px;
         background: white;
-        padding-left: 10px;
+        padding-left: 4px;
-        padding-right: 10px;
+        padding-right: 4px;
         content: attr(title);
     }
 }

src/components/Chat.vue

@@ -282,8 +282,8 @@ export default {
       /** A timer for read receipts. */
       rrTimer: null,
 
-      /** Timestamp of last send Read Receipt */
+      /** Last event we sent a Read Receipt/Read Marker for */
-      lastRRTimestamp: null,
+      lastRR: null,
     };
   },
 
@@ -295,6 +295,10 @@ export default {
     this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
   },
 
+  beforeDestroy() {
+    this.stopRRTimer();
+  },
+
   destroyed() {
     this.$matrix.off("Room.timeline", this.onEvent);
     this.$matrix.off("RoomMember.typing", this.onUserTyping);
@@ -308,9 +312,16 @@ export default {
       return this.$matrix.currentRoom;
     },
     roomId() {
+      if (this.room) {
+        return this.room.roomId;
+      }
       return this.$matrix.currentRoomId;
     },
     readMarker() {
+      if (this.lastRR) {
+        // If we have sent a RR, use that as read marker (so we don't have to wait for server round trip)
+        return this.lastRR.getId();
+      }
       return this.fullyReadMarker || this.room.getEventReadUpTo(this.$matrix.currentUserId, false);
     },
     fullyReadMarker() {
@@ -370,6 +381,10 @@ export default {
         this.typingMembers = [];
         this.initialLoadDone = false;
 
+        // Stop RR timer
+        this.stopRRTimer();
+        this.lastRR = null;
+
         if (!room) {
           // Public room?
           if (this.roomId && this.roomId.startsWith('#')) {
@@ -552,6 +567,9 @@ export default {
     },
     onScroll(ignoredevent) {
       const container = this.$refs.chatContainer;
+      if (!container) {
+        return;
+      }
       if (container.scrollTop == 0) {
         // Scrolled to top
         this.handleScrolledToTop();
@@ -855,14 +873,19 @@ export default {
       }
     },
 
-    /**
+    /** Stop Read Receipt timer */
-    * Start/restart the timer to Read Receipts.
+    stopRRTimer() {
-    */
-    restartRRTimer() {
       if (this.rrTimer) {
         clearInterval(this.rrTimer);
         this.rrTimer = null;
       }
+    },
+    
+    /**
+    * Start/restart the timer to Read Receipts.
+    */
+    restartRRTimer() {
+      this.stopRRTimer();
       this.rrTimer = setInterval(this.rrTimerElapsed, READ_RECEIPT_TIMEOUT);
     },
 
@@ -873,7 +896,7 @@ export default {
         const eventId = el.getAttribute('eventId');
         if (eventId && this.room) {
           const event = this.room.findEventById(eventId);
-          if (event && event.getTs() > this.lastRRTimestamp) {
+          if (event && (!this.lastRR || event.getTs() > this.lastRR.getTs())) {
             
             // Disable timer while we are sending
             clearInterval(this.rrTimer);
@@ -886,7 +909,7 @@ export default {
             })
             .then(() => {
               console.log("RR sent for event: " + eventId);
-              this.lastRRTimestamp = event.getTs();
+              this.lastRR = event;             
             })
             .catch(err => {
               console.log("Failed to update read marker: ", err);

src/components/Join.vue

@@ -19,9 +19,9 @@
       </v-avatar>
       <div class="join-title">Welcome to {{ roomName }}</div>
       <div class="join-message">
-        Join the group chat in a web browser or with the Keanu app.
+        <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
-      <v-btn
+      <!--<v-btn
         class="btn-light"
         large
         block
@@ -30,7 +30,7 @@
         >Open Keanu app</v-btn
       >
 
-      <div class="join-or-divider">OR</div>
+      <div class="join-or-divider">OR</div> -->
 
       <v-btn
         class="btn-dark"