From 0a9c2b23808a73ad7542db83235be6d1725a1ede Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 1 Dec 2023 11:59:59 +0100
Subject: [PATCH] expand system messages group if visual unread marker is set
 on it

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.vue            |  9 ++++-----
 .../MessagesGroup/MessagesSystemGroup.vue        | 16 +++++++++++++---
 src/composables/useCombinedSystemMessage.js      |  1 +
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index c282e823a46..a55918b9471 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -239,10 +239,9 @@ the main body of the message as well as a quote.
 			@close="isTranslateDialogOpen = false" />
 
 		<div v-if="isLastReadMessage"
-			v-observe-visibility="lastReadMessageVisibilityChanged">
-			<div class="new-message-marker">
-				<span>{{ t('spreed', 'Unread messages') }}</span>
-			</div>
+			v-observe-visibility="lastReadMessageVisibilityChanged"
+			class="new-message-marker">
+			<span>{{ t('spreed', 'Unread messages') }}</span>
 		</div>
 	</li>
 </template>
@@ -1077,7 +1076,7 @@ export default {
 
 .new-message-marker {
 	position: relative;
-	margin: 20px 15px 20px -45px;
+	margin: 20px 15px;
 	border-top: 1px solid var(--color-border);
 
 	span {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index efc182f81b0..2fa3703adf7 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -104,6 +104,12 @@ export default {
 		}
 	},
 
+	computed: {
+		lastReadMessageId() {
+			return this.$store.getters.conversation(this.token)?.lastReadMessage
+		}
+	},
+
 	watch: {
 		messages: {
 			deep: true,
@@ -186,24 +192,28 @@ export default {
 			let lastMessage = null
 			let forceNextGroup = false
 			for (const message of messages) {
+				const isLastRead = message.id === this.lastReadMessageId
 				const groupingType = this.messagesShouldBeGrouped(message, lastMessage)
 				if (!groupingType || forceNextGroup) {
-					groups.push({ id: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+					groups.push({ id: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? !isLastRead })
 					forceNextGroup = false
 				} else {
 					if (groupingType === 'call_reconnected') {
-						groups.push({ id: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
+						groups.push({ id: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? !isLastRead })
 						forceNextGroup = true
 					}
 					groups.at(-1).messages.push(message)
 					groups.at(-1).type = groupingType
+					if (isLastRead) {
+						groups.at(-1).collapsed = false
+					}
 				}
 				lastMessage = message
 			}
 
 			groups.forEach(group => {
 				if (this.groupIsCollapsed[group.id] === undefined) {
-					this.groupIsCollapsed[group.id] = true
+					this.groupIsCollapsed[group.id] = group.collapsed
 				}
 			})
 			return groups
diff --git a/src/composables/useCombinedSystemMessage.js b/src/composables/useCombinedSystemMessage.js
index e1b247f10e9..a37640c86bc 100644
--- a/src/composables/useCombinedSystemMessage.js
+++ b/src/composables/useCombinedSystemMessage.js
@@ -71,6 +71,7 @@ export function useCombinedSystemMessage() {
 	 */
 	function createCombinedSystemMessage({ id, messages, type, collapsed }) {
 		const combinedMessage = cloneDeep(messages[0])
+		combinedMessage.id = messages[0].id + '_combined'
 
 		// Handle cases when users reconnected to the call
 		if (type === 'call_reconnected') {