From b0f833cc3f6b3ea2bd37d0cc46847db011999ede Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 29 Apr 2021 09:15:22 +0200
Subject: [PATCH 1/8] Add indicator of unread messages while in call

When in a call and the sidebar is collapsed, whenever new unread
messages arrive, a bubble will be displayed on top of the button that
opens the sidebar.

If a mention exists, the bubble will appear highlighted.

Whenever a new unread message or new mention arrives while in a call
with the sidebar closed, a notification will appear once.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
---
 src/components/TopBar/TopBar.vue | 54 +++++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ce6b674613a..ba68b300e7b 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -129,13 +129,20 @@
 					@click="openSidebar" />
 			</Actions>
 		</div>
+		<CounterBubble
+			v-if="showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
+			class="unread-messages-counter"
+			:highlighted="hasUnreadMentions">
+			{{ unreadMessagesCounter }}
+		</CounterBubble>
 	</div>
 </template>
 
 <script>
-import { showError, showSuccess } from '@nextcloud/dialogs'
+import { showError, showSuccess, showMessage } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
+import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
 import CallButton from './CallButton'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
@@ -160,6 +167,7 @@ export default {
 		ActionButton,
 		Actions,
 		ActionLink,
+		CounterBubble,
 		CallButton,
 		ActionSeparator,
 		MicrophoneOff,
@@ -260,6 +268,13 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		unreadMessagesCounter() {
+			return this.conversation.unreadMessages
+		},
+		hasUnreadMentions() {
+			return this.conversation.unreadMention
+		},
+
 		linkToConversation() {
 			if (this.token !== '') {
 				return window.location.protocol + '//' + window.location.host + generateUrl('/call/' + this.token)
@@ -282,6 +297,37 @@ export default {
 		},
 	},
 
+	watch: {
+		unreadMessagesCounter(newValue, oldValue) {
+			if (!this.isInCall || !this.showOpenSidebarButton) {
+				return
+			}
+
+			// new messages arrived
+			if (newValue > 0 && oldValue === 0) {
+				if (this.hasUnreadMentions) {
+					showMessage(t('spreed', 'You have been mentioned in the chat.'))
+				} else {
+					showMessage(t('spreed', 'You have new unread messages in the chat.'))
+				}
+			}
+		},
+
+		hasUnreadMentions(newValue, oldValue) {
+			if (!this.isInCall || !this.showOpenSidebarButton) {
+				return
+			}
+
+			// in some cases the user already had unread messages and saw the other notification
+			// but then got mentionned
+			// the limit of "> 1" is here to avoid seeing two notifications, one for the first non-mention
+			// unread message and the second for the mention
+			if (newValue && this.unreadMessagesCounter > 1) {
+				showMessage(t('spreed', 'You have been mentioned in the chat.'))
+			}
+		},
+	},
+
 	mounted() {
 		document.addEventListener('fullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
@@ -425,6 +471,12 @@ export default {
 			margin-right: 4px !important;
 		}
 	}
+
+	.unread-messages-counter {
+		position: absolute;
+		top: 40px;
+		right: 10px;
+	}
 }
 
 .conversation-header {

From 1608322a91daec844088d720f3ea44e2f79ba1a1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 14 Jun 2021 17:17:38 +0200
Subject: [PATCH 2/8] Adjust chat button in call view

Replace icon with MessageText when in call.
Counter bubble now lets hover and click through.
Display two notifications when mentionned.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/TopBar/TopBar.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ba68b300e7b..36fa9f79e84 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -125,6 +125,19 @@
 				close-after-click="true"
 				container="#content-vue">
 				<ActionButton
+					v-if="isInCall"
+					key="openSideBarButtonMessageText"
+					@click="openSidebar">
+					<MessageText
+						slot="icon"
+						:size="24"
+						title=""
+						fill-color="#ffffff"
+						decorative />
+				</ActionButton>
+				<ActionButton
+					v-else
+					key="openSideBarButtonMenuPeople"
 					:icon="iconMenuPeople"
 					@click="openSidebar" />
 			</Actions>
@@ -147,6 +160,7 @@ import CallButton from './CallButton'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
+import MessageText from 'vue-material-design-icons/MessageText'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import { CONVERSATION, PARTICIPANT } from '../../constants'
 import { generateUrl } from '@nextcloud/router'
@@ -170,6 +184,7 @@ export default {
 		CounterBubble,
 		CallButton,
 		ActionSeparator,
+		MessageText,
 		MicrophoneOff,
 		ConversationIcon,
 	},
@@ -318,11 +333,7 @@ export default {
 				return
 			}
 
-			// in some cases the user already had unread messages and saw the other notification
-			// but then got mentionned
-			// the limit of "> 1" is here to avoid seeing two notifications, one for the first non-mention
-			// unread message and the second for the mention
-			if (newValue && this.unreadMessagesCounter > 1) {
+			if (newValue && this.unreadMessagesCounter > 0) {
 				showMessage(t('spreed', 'You have been mentioned in the chat.'))
 			}
 		},
@@ -476,6 +487,7 @@ export default {
 		position: absolute;
 		top: 40px;
 		right: 10px;
+		pointer-events: none;
 	}
 }
 

From c167a1a3fd25c8e2fb83cd40406cf26d6e5b633e Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 15 Jun 2021 12:37:45 +0200
Subject: [PATCH 3/8] Update unread messages count earlier

As soon as we receive new messages from the "lookForNewMessages"
action, they are counted and added to the number of known unread
messages.

This makes the store update and counter in the left sidebar update more
quickly.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/store/conversationsStore.js |  4 ++++
 src/store/messagesStore.js      | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index af1aad384aa..70bb2910019 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -121,6 +121,10 @@ const mutations = {
 		Vue.set(state.conversations[token], 'lastMessage', lastMessage)
 	},
 
+	updateUnreadMessages(state, { token, unreadMessages = 0 }) {
+		Vue.set(state.conversations[token], 'unreadMessages', unreadMessages)
+	},
+
 	setNotificationLevel(state, { token, notificationLevel }) {
 		Vue.set(state.conversations[token], 'notificationLevel', notificationLevel)
 	},
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 149bd00c3f2..6bffcd52ff7 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -621,6 +621,8 @@ const actions = {
 			})
 		}
 
+		const conversation = context.getters.conversation(token)
+		let countNewMessages = 0
 		let lastMessage = null
 		// Process each messages and adds it to the store
 		response.data.ocs.data.forEach(message => {
@@ -632,7 +634,18 @@ const actions = {
 			}
 			context.dispatch('processMessage', message)
 			if (!lastMessage || message.id > lastMessage.id) {
+				if (!message.systemMessage) {
+					countNewMessages++
+				}
 				lastMessage = message
+				// TODO: parse mentions data to update "conversation.unreadMention"
+			}
+
+			// in case we encounter an already read message, reset the counter
+			// this is probably unlikely to happen unless one starts browsing from
+			// an earlier page and scrolls down
+			if (conversation.lastReadMessage.id === message.id) {
+				countNewMessages = 0
 			}
 		})
 
@@ -641,7 +654,6 @@ const actions = {
 			id: parseInt(response.headers['x-chat-last-given'], 10),
 		})
 
-		const conversation = context.getters.conversation(token)
 		if (conversation && conversation.lastMessage && lastMessage.id > conversation.lastMessage.id) {
 			context.dispatch('updateConversationLastMessage', {
 				token,
@@ -649,6 +661,8 @@ const actions = {
 			})
 		}
 
+		context.commit('updateUnreadMessages', { token, unreadMessages: conversation.unreadMessages + countNewMessages })
+
 		return response
 	},
 

From fb0d339139c23f6ae8fc11994ba62ae3081377f5 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 15 Jun 2021 14:12:19 +0200
Subject: [PATCH 4/8] Update unread mentions earlier

When fetching new messages in the current conversation, also scan them
for mentions to update the conversation store's unreadMention flag if
necessary.

This makes a mention notification or the counter bubble highlight
color update more quickly without having to wait for the conversation
list reload.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/store/conversationsStore.js |  9 ++++--
 src/store/messagesStore.js      | 54 +++++++++++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index 70bb2910019..d31db4097a0 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -121,8 +121,13 @@ const mutations = {
 		Vue.set(state.conversations[token], 'lastMessage', lastMessage)
 	},
 
-	updateUnreadMessages(state, { token, unreadMessages = 0 }) {
-		Vue.set(state.conversations[token], 'unreadMessages', unreadMessages)
+	updateUnreadMessages(state, { token, unreadMessages, unreadMention }) {
+		if (unreadMessages !== undefined) {
+			Vue.set(state.conversations[token], 'unreadMessages', unreadMessages)
+		}
+		if (unreadMention !== undefined) {
+			Vue.set(state.conversations[token], 'unreadMention', unreadMention)
+		}
 	},
 
 	setNotificationLevel(state, { token, notificationLevel }) {
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 6bffcd52ff7..14afcb5750d 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -36,6 +36,43 @@ import {
 	ATTENDEE,
 } from '../constants'
 
+/**
+ * Returns whether the given message contains a mention to self, directly
+ * or indirectly through a global mention.
+ *
+ * @param {Object} context store context
+ * @param {Object} message message object
+ * @returns {bool} true if the message contains a mention to self or all,
+ * false otherwise
+ */
+function hasMentionToSelf(context, message) {
+	if (!message.messageParameters) {
+		return false
+	}
+
+	for (const key in message.messageParameters) {
+		const param = message.messageParameters[key]
+
+		if (param.type === 'call') {
+			return true
+		}
+		if (param.type === 'guest'
+			&& context.getters.getActorType() === ATTENDEE.ACTOR_TYPE.GUESTS
+			&& param.id === ('guest/' + context.getters.getActorId())
+		) {
+			return true
+		}
+		if (param.type === 'user'
+			&& context.getters.getActorType() === ATTENDEE.ACTOR_TYPE.USERS
+			&& param.id === context.getters.getUserId()
+		) {
+			return true
+		}
+	}
+
+	return false
+}
+
 const state = {
 	/**
 	 * Map of conversation token to message list
@@ -623,6 +660,7 @@ const actions = {
 
 		const conversation = context.getters.conversation(token)
 		let countNewMessages = 0
+		let hasNewMention = conversation.unreadMention
 		let lastMessage = null
 		// Process each messages and adds it to the store
 		response.data.ocs.data.forEach(message => {
@@ -636,9 +674,14 @@ const actions = {
 			if (!lastMessage || message.id > lastMessage.id) {
 				if (!message.systemMessage) {
 					countNewMessages++
+
+					// parse mentions data to update "conversation.unreadMention",
+					// if needed
+					if (!hasNewMention && hasMentionToSelf(context, message)) {
+						hasNewMention = true
+					}
 				}
 				lastMessage = message
-				// TODO: parse mentions data to update "conversation.unreadMention"
 			}
 
 			// in case we encounter an already read message, reset the counter
@@ -661,7 +704,14 @@ const actions = {
 			})
 		}
 
-		context.commit('updateUnreadMessages', { token, unreadMessages: conversation.unreadMessages + countNewMessages })
+		if (countNewMessages > 0) {
+			context.commit('updateUnreadMessages', {
+				token,
+				unreadMessages: conversation.unreadMessages + countNewMessages,
+				// only update the value if it's true
+				unreadMention: hasNewMention || undefined,
+			})
+		}
 
 		return response
 	},

From 502bce1220225fbb70b384c53dfaf00b0019bc60 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Tue, 15 Jun 2021 14:13:41 +0200
Subject: [PATCH 5/8] Adjust in-call chat notification

Adjust icon size.
Prevent double notification.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/TopBar/TopBar.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 36fa9f79e84..208b42045cb 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -130,7 +130,7 @@
 					@click="openSidebar">
 					<MessageText
 						slot="icon"
-						:size="24"
+						:size="16"
 						title=""
 						fill-color="#ffffff"
 						decorative />
@@ -320,11 +320,7 @@ export default {
 
 			// new messages arrived
 			if (newValue > 0 && oldValue === 0) {
-				if (this.hasUnreadMentions) {
-					showMessage(t('spreed', 'You have been mentioned in the chat.'))
-				} else {
-					showMessage(t('spreed', 'You have new unread messages in the chat.'))
-				}
+				showMessage(t('spreed', 'You have new unread messages in the chat.'))
 			}
 		},
 
@@ -333,6 +329,7 @@ export default {
 				return
 			}
 
+			// prevent duplicate notification caused by unreadMessagesCounter in case of mention
 			if (newValue && this.unreadMessagesCounter > 0) {
 				showMessage(t('spreed', 'You have been mentioned in the chat.'))
 			}

From 9500c646a73977a88ee0a9a8334fcedb80cba4e1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 17 Jun 2021 17:25:56 +0200
Subject: [PATCH 6/8] Only display unread notification once in call

Only show one notification for unread messages, either for new messages
or for mentions.
When switching from "new messages" to "you have been mentionned",
discard the former notification.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/TopBar/TopBar.vue | 33 +++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 208b42045cb..975c91b440e 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -198,6 +198,12 @@ export default {
 		},
 	},
 
+	data: () => {
+		return {
+			unreadNotificationHandle: null,
+		}
+	},
+
 	computed: {
 		isFullscreen() {
 			return this.$store.getters.isFullscreen()
@@ -319,8 +325,8 @@ export default {
 			}
 
 			// new messages arrived
-			if (newValue > 0 && oldValue === 0) {
-				showMessage(t('spreed', 'You have new unread messages in the chat.'))
+			if (newValue > 0 && oldValue === 0 && !this.hasUnreadMentions) {
+				this.notifyUnreadMessages(t('spreed', 'You have new unread messages in the chat.'))
 			}
 		},
 
@@ -329,9 +335,15 @@ export default {
 				return
 			}
 
-			// prevent duplicate notification caused by unreadMessagesCounter in case of mention
-			if (newValue && this.unreadMessagesCounter > 0) {
-				showMessage(t('spreed', 'You have been mentioned in the chat.'))
+			if (newValue) {
+				this.notifyUnreadMessages(t('spreed', 'You have been mentioned in the chat.'))
+			}
+		},
+
+		isInCall(newValue) {
+			if (!newValue) {
+				// discard notification if the call ends
+				this.notifyUnreadMessages(null)
 			}
 		},
 	},
@@ -344,6 +356,7 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.notifyUnreadMessages(null)
 		document.removeEventListener('fullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
@@ -351,6 +364,16 @@ export default {
 	},
 
 	methods: {
+		notifyUnreadMessages(message) {
+			if (this.unreadNotificationHandle) {
+				this.unreadNotificationHandle.hideToast()
+				this.unreadNotificationHandle = null
+			}
+			if (message) {
+				this.unreadNotificationHandle = showMessage(message)
+			}
+		},
+
 		openSidebar() {
 			this.$store.dispatch('showSidebar')
 			BrowserStorage.setItem('sidebarOpen', 'true')

From 0a0639ed9a5af24e0170b5e0aca6ba0b2d85e000 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 17 Jun 2021 17:27:10 +0200
Subject: [PATCH 7/8] Adjust messagesStore for unread messages update

Minor fixes to messagesStore unread messages counter logic.
Added tests for all cases.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/store/messagesStore.js      |   8 +-
 src/store/messagesStore.spec.js | 265 +++++++++++++++++++++++++++++++-
 2 files changed, 269 insertions(+), 4 deletions(-)

diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 14afcb5750d..105ddf64ad9 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -687,8 +687,10 @@ const actions = {
 			// in case we encounter an already read message, reset the counter
 			// this is probably unlikely to happen unless one starts browsing from
 			// an earlier page and scrolls down
-			if (conversation.lastReadMessage.id === message.id) {
+			if (conversation.lastReadMessage === message.id) {
+				// discard counters
 				countNewMessages = 0
+				hasNewMention = conversation.unreadMention
 			}
 		})
 
@@ -708,8 +710,8 @@ const actions = {
 			context.commit('updateUnreadMessages', {
 				token,
 				unreadMessages: conversation.unreadMessages + countNewMessages,
-				// only update the value if it's true
-				unreadMention: hasNewMention || undefined,
+				// only update the value if it's been changed to true
+				unreadMention: conversation.unreadMention !== hasNewMention ? hasNewMention : undefined,
 			})
 		}
 
diff --git a/src/store/messagesStore.spec.js b/src/store/messagesStore.spec.js
index 5ddd5bf796d..c5ab788c3af 100644
--- a/src/store/messagesStore.spec.js
+++ b/src/store/messagesStore.spec.js
@@ -867,6 +867,7 @@ describe('messagesStore', () => {
 	describe('look for new messages', () => {
 		let updateLastCommonReadMessageAction
 		let updateConversationLastMessageAction
+		let updateUnreadMessagesMutation
 		let forceGuestNameAction
 		let cancelFunctionMock
 		let conversationMock
@@ -877,11 +878,13 @@ describe('messagesStore', () => {
 			conversationMock = jest.fn()
 			updateConversationLastMessageAction = jest.fn()
 			updateLastCommonReadMessageAction = jest.fn()
+			updateUnreadMessagesMutation = jest.fn()
 			forceGuestNameAction = jest.fn()
 			testStoreConfig.getters.conversation = jest.fn().mockReturnValue(conversationMock)
 			testStoreConfig.actions.updateConversationLastMessage = updateConversationLastMessageAction
 			testStoreConfig.actions.updateLastCommonReadMessage = updateLastCommonReadMessageAction
 			testStoreConfig.actions.forceGuestName = forceGuestNameAction
+			testStoreConfig.mutations.updateUnreadMessages = updateUnreadMessagesMutation
 
 			cancelFunctionMock = jest.fn()
 			CancelableRequest.mockImplementation((request) => {
@@ -919,7 +922,9 @@ describe('messagesStore', () => {
 			lookForNewMessages.mockResolvedValueOnce(response)
 
 			// smaller number to make it update
-			conversationMock.mockReturnValue({ lastMessage: { id: 1 } })
+			conversationMock.mockReturnValue({
+				lastMessage: { id: 1 },
+			})
 
 			await store.dispatch('lookForNewMessages', {
 				token: TOKEN,
@@ -1023,6 +1028,264 @@ describe('messagesStore', () => {
 
 			expect(cancelFunctionMock).toHaveBeenCalledWith('canceled')
 		})
+
+		describe('updates unread counters immediately', () => {
+			let testConversation
+
+			beforeEach(() => {
+				testConversation = {
+					lastMessage: { id: 100 },
+					lastReadMessage: 100,
+					unreadMessages: 144,
+					unreadMention: false,
+				}
+			})
+
+			async function testUpdateMessageCounters(messages, expectedPayload) {
+				const response = {
+					headers: {
+						'x-chat-last-common-read': '123',
+						'x-chat-last-given': '100',
+					},
+					data: {
+						ocs: {
+							data: messages,
+						},
+					},
+				}
+
+				lookForNewMessages.mockResolvedValueOnce(response)
+
+				// smaller number to make it update
+				conversationMock.mockReturnValue(testConversation)
+
+				await store.dispatch('lookForNewMessages', {
+					token: TOKEN,
+					lastKnownMessageId: 100,
+				})
+
+				if (expectedPayload) {
+					expect(updateUnreadMessagesMutation).toHaveBeenCalledWith(expect.anything(), expectedPayload)
+				} else {
+					expect(updateUnreadMessagesMutation).not.toHaveBeenCalled()
+				}
+			}
+
+			describe('updating unread messages counter', () => {
+				test('updates unread message counter for regular messages', async() => {
+					const messages = [{
+						id: 101,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}, {
+						id: 102,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.GUESTS,
+					}]
+					const expectedPayload = {
+						token: TOKEN,
+						unreadMessages: 146,
+						unreadMention: undefined,
+					}
+					await testUpdateMessageCounters(messages, expectedPayload)
+				})
+
+				test('skips system messages when counting unread messages', async() => {
+					const messages = [{
+						id: 101,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}, {
+						id: 102,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+						systemMessage: 'i_am_the_system',
+					}]
+					const expectedPayload = {
+						token: TOKEN,
+						unreadMessages: 145,
+						unreadMention: undefined,
+					}
+					await testUpdateMessageCounters(messages, expectedPayload)
+				})
+
+				test('only counts unread messages from the last unread message', async() => {
+					const messages = [{
+						id: 99,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}, {
+						// this is the last unread message
+						id: 100,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}, {
+						id: 101,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}, {
+						id: 102,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.GUESTS,
+					}]
+					const expectedPayload = {
+						token: TOKEN,
+						unreadMessages: 146,
+						unreadMention: undefined,
+					}
+					await testUpdateMessageCounters(messages, expectedPayload)
+				})
+
+				test('does not update counter if no new messages were found', async() => {
+					const messages = [{
+						// this one is the last read message so doesn't count
+						id: 100,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}]
+					await testUpdateMessageCounters(messages, null)
+				})
+			})
+
+			describe('updating unread mention flag', () => {
+				let getActorIdMock
+				let getActorTypeMock
+				let getUserIdMock
+
+				beforeEach(() => {
+					getActorIdMock = jest.fn()
+					getActorTypeMock = jest.fn()
+					getUserIdMock = jest.fn()
+					testStoreConfig.getters.getActorId = getActorIdMock
+					testStoreConfig.getters.getActorType = getActorTypeMock
+					testStoreConfig.getters.getUserId = getUserIdMock
+
+					store = new Vuex.Store(testStoreConfig)
+				})
+
+				async function testMentionFlag(messageParameters, expectedValue) {
+					const messages = [{
+						id: 101,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+						messageParameters,
+					}]
+					const expectedPayload = {
+						token: TOKEN,
+						unreadMessages: 145,
+						unreadMention: expectedValue,
+					}
+					await testUpdateMessageCounters(messages, expectedPayload)
+				}
+
+				test('updates unread mention flag for global message', async() => {
+					await testMentionFlag({
+						'mention-1': {
+							type: 'call',
+						},
+					}, true)
+				})
+
+				test('updates unread mention flag for guest mention', async() => {
+					getActorIdMock.mockReturnValue(() => 'me_as_guest')
+					getActorTypeMock.mockReturnValue(() => ATTENDEE.ACTOR_TYPE.GUESTS)
+					await testMentionFlag({
+						'mention-0': {
+							type: 'user',
+							id: 'some_user',
+						},
+						'mention-1': {
+							type: 'guest',
+							id: 'guest/me_as_guest',
+						},
+					}, true)
+				})
+
+				test('does not update unread mention flag for a different guest mention', async() => {
+					getActorIdMock.mockReturnValue(() => 'me_as_guest')
+					getActorTypeMock.mockReturnValue(() => ATTENDEE.ACTOR_TYPE.GUESTS)
+					await testMentionFlag({
+						'mention-1': {
+							type: 'guest',
+							id: 'guest/someone_else_as_guest',
+						},
+					}, undefined)
+				})
+
+				test('updates unread mention flag for user mention', async() => {
+					getUserIdMock.mockReturnValue(() => 'me_as_user')
+					getActorTypeMock.mockReturnValue(() => ATTENDEE.ACTOR_TYPE.USERS)
+					await testMentionFlag({
+						'mention-0': {
+							type: 'user',
+							id: 'some_user',
+						},
+						'mention-1': {
+							type: 'user',
+							id: 'me_as_user',
+						},
+					}, true)
+				})
+
+				test('does not update unread mention flag for another user mention', async() => {
+					getUserIdMock.mockReturnValue(() => 'me_as_user')
+					getActorTypeMock.mockReturnValue(() => ATTENDEE.ACTOR_TYPE.USERS)
+					await testMentionFlag({
+						'mention-1': {
+							type: 'user',
+							id: 'another_user',
+						},
+					}, undefined)
+				})
+
+				test('does not update unread mention flag when no params', async() => {
+					await testMentionFlag({}, undefined)
+					await testMentionFlag(null, undefined)
+				})
+
+				test('does not update unread mention flag when already set', async() => {
+					testConversation.unreadMention = true
+					await testMentionFlag({
+						'mention-1': {
+							type: 'call',
+						},
+					}, undefined)
+				})
+
+				test('does not update unread mention flag for non-mention parameter', async() => {
+					testConversation.unreadMention = true
+					await testMentionFlag({
+						'file-1': {
+							type: 'file',
+						},
+					}, undefined)
+				})
+
+				test('does not update unread mention flag for previously read messages', async() => {
+					const messages = [{
+						// this message was already read
+						id: 100,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+						messageParameters: {
+							'mention-1': {
+								type: 'call',
+							},
+						},
+					}, {
+						id: 101,
+						token: TOKEN,
+						actorType: ATTENDEE.ACTOR_TYPE.USERS,
+					}]
+					const expectedPayload = {
+						token: TOKEN,
+						unreadMessages: 145,
+						unreadMention: undefined,
+					}
+					await testUpdateMessageCounters(messages, expectedPayload)
+				})
+			})
+		})
 	})
 
 	describe('posting new message', () => {

From df04143de21233670cf4c5d8a7fdc209c8eb338e Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 17 Jun 2021 17:39:41 +0100
Subject: [PATCH 8/8] Adjust unread messages counter and icon positions

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TopBar/TopBar.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 975c91b440e..09a02c0ce97 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -495,9 +495,6 @@ export default {
 		display: flex;
 		align-items: center;
 		white-space: nowrap;
-		svg {
-			margin-right: 4px !important;
-		}
 		.icon {
 			margin-right: 4px !important;
 		}
@@ -506,7 +503,7 @@ export default {
 	.unread-messages-counter {
 		position: absolute;
 		top: 40px;
-		right: 10px;
+		right: 4px;
 		pointer-events: none;
 	}
 }