Make sure read marker is updated correctly

src/assets/css/chat.scss

@@ -77,6 +77,19 @@ body {
     position: fixed;
     z-index: 10;
   }
+
+  .icon-dropdown {
+    margin: 0px 8px;
+  }
+
+  .notification-alert {
+    display: inline-block;
+    background-color: #ff3300;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+  }
 }
 
 .room-list-notification-count {

src/assets/icons/ic_dropdown.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M5.5 3.21932L8.9822 0.289048C9.49482 -0.142463 10.2664 -0.0840681 10.7056 0.418955C11.1451 0.922246 11.0856 1.67975 10.5733 2.11099L6.29552 5.71092C5.83774 6.09636 5.16221 6.09636 4.70448 5.71092L0.42672 2.11099C-0.0856265 1.67975 -0.145103 0.92226 0.294406 0.418955C0.733642 -0.0840681 1.50517 -0.142463 2.0178 0.289048L5.5 3.21932Z"
+            fill="black" />
+    </svg>
+</template>

src/components/Chat.vue

@@ -528,7 +528,7 @@ export default {
         if (!this.$config.experimental_voice_mode) return false;
         return util.useVoiceMode(this.room);
       },
-    }
+    },
   },
 
   watch: {
@@ -1316,8 +1316,8 @@ export default {
       let eventIdLast = null;
       if (!this.useVoiceMode) {
         const container = this.chatContainer;
-        const elFirst = util.getFirstVisibleElement(container);
-        const elLast = util.getLastVisibleElement(container);
+        const elFirst = util.getFirstVisibleElement(container, (item) => item.hasAttribute("eventId"));
+        const elLast = util.getLastVisibleElement(container, (item) => item.hasAttribute("eventId"));
         if (elFirst && elLast) {
           eventIdFirst = elFirst.getAttribute("eventId");
           eventIdLast = elLast.getAttribute("eventId");

src/components/ChatHeader.vue

@@ -16,7 +16,8 @@
         @click.stop="onHeaderClicked"
       >
         <div class="room-name-inline text-truncate" :title="room.name">
-          {{ room.name }}
+          {{ room.name }}<v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon><div class="notification-alert" v-if="notifications"></div>
+
           <!--<v-icon>expand_more</v-icon>-->
         </div>
         <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
@@ -137,6 +138,9 @@ export default {
         }
       }
       return null;
+    },
+    notifications() {
+      return this.$matrix.joinedRooms.some(room => room.roomId !== this.$matrix.currentRoomId && room.getUnreadNotificationCount("total") > 0);
     }
   },
   watch: {

src/plugins/utils.js

@@ -504,16 +504,22 @@ class Util {
         return null;
     }
 
-    getFirstVisibleElement(parentNode) {
-        const visible = this.findVisibleElements(parentNode);
+    getFirstVisibleElement(parentNode, where) {
+        let visible = this.findVisibleElements(parentNode);
+        if (visible) {
+            visible = visible.filter(where);
+        }
         if (visible && visible.length > 0) {
             return visible[0];
         }
         return null;
     }
 
-    getLastVisibleElement(parentNode) {
-        const visible = this.findVisibleElements(parentNode);
+    getLastVisibleElement(parentNode, where) {
+        let visible = this.findVisibleElements(parentNode);
+        if (visible) {
+            visible = visible.filter(where);
+        }
         if (visible && visible.length > 0) {
             return visible[visible.length - 1];
         }