expand system messages group if visual unread marker is set on it

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -235,10 +235,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>
@@ -1052,7 +1051,7 @@ export default {
 
 .new-message-marker {
 	position: relative;
-	margin: 20px 15px 20px -45px;
+	margin: 20px 15px;
 	border-top: 1px solid var(--color-border);
 
 	span {

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

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') {