persist toggle state during list re-render, align toggle button with …

…first message line

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

src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue

@@ -240,18 +240,24 @@ export default {
 			for (const message of messages) {
 				const groupingType = this.messagesShouldBeGrouped(message, lastMessage)
 				if (!groupingType || forceNextGroup) {
-					groups.push({ messages: [message], type: '', collapsed: true })
+					groups.push({ id: message.id, messages: [message], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
 					forceNextGroup = false
 				} else {
 					if (groupingType === 'call_reconnected') {
-						groups.push({ messages: [groups.at(-1).messages.pop()], type: '', collapsed: true })
+						groups.push({ id: message.id, messages: [groups.at(-1).messages.pop()], type: '', collapsed: this.groupIsCollapsed[message.id] ?? true })
 						forceNextGroup = true
 					}
 					groups.at(-1).messages.push(message)
 					groups.at(-1).type = groupingType
 				}
 				lastMessage = message
 			}
+
+			groups.forEach(group => {
+				if (this.groupIsCollapsed[group.id] === undefined) {
+					this.groupIsCollapsed[group.id] = true
+				}
+			})
 			return groups
 		},
 
@@ -533,6 +539,7 @@ export default {
 
 		toggleCollapsed(messages) {
 			this.$set(messages, 'collapsed', !messages.collapsed)
+			this.groupIsCollapsed[messages.id] = !this.groupIsCollapsed[messages.id]
 		},
 
 		getNextMessageId(message) {
@@ -600,9 +607,8 @@ export default {
 		position: relative;
 		& &__toggle {
 			position: absolute;
-			top: 50%;
+			top: -6px;
 			right: 0;
-			transform: translateY(-50%);
 		}
 	}
 	&--collapsed {