From 4f951a7765d54ca725d7c570abb00a00738122a3 Mon Sep 17 00:00:00 2001
From: N Pex <npexdev@gmail.com>
Date: Tue, 28 Feb 2023 10:29:53 +0000
Subject: [PATCH] Make sure read marker is updated correctly

---
 src/assets/css/chat.scss         | 13 +++++++++++++
 src/assets/icons/ic_dropdown.vue |  7 +++++++
 src/components/Chat.vue          |  6 +++---
 src/components/ChatHeader.vue    |  6 +++++-
 src/plugins/utils.js             | 14 ++++++++++----
 5 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/icons/ic_dropdown.vue

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index ba92df1..bb1df52 100644
--- a/src/assets/css/chat.scss
+++ b/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 {
diff --git a/src/assets/icons/ic_dropdown.vue b/src/assets/icons/ic_dropdown.vue
new file mode 100644
index 0000000..1e2510a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index bf26cf4..1b7472b 100644
--- a/src/components/Chat.vue
+++ b/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");
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 8139f42..4d0d703 100644
--- a/src/components/ChatHeader.vue
+++ b/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: {
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 95ea715..f2f2fed 100644
--- a/src/plugins/utils.js
+++ b/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];
         }