Keep condensed open when new messages arrive

client/components/MessageCondensed.vue

@@ -1,11 +1,15 @@
 <template>
-	<div class="msg condensed closed" ref="condensedContainer">
+	<div :class="[ 'msg', 'condensed', { closed: isCollapsed } ]">
-		<div class="condensed-summary">
+		<div
-			<span class="time"></span>
+			class="condensed-summary"
-			<span class="from"></span>
+			@click="isCollapsed = !isCollapsed">
+			<span class="time"/>
+			<span class="from"/>
 			<span class="content">
 				{{ condensedText }}
-				<button class="toggle-button" aria-label="Toggle status messages" @click="onExpandClick"></button>
+				<button
+					class="toggle-button"
+					aria-label="Toggle status messages"/>
 			</span>
 		</div>
 		<Message
@@ -22,11 +26,16 @@ import Message from "./Message.vue";
 export default {
 	name: "MessageCondensed",
 	components: {
-		Message
+		Message,
 	},
 	props: {
 		messages: Array,
 	},
+	data() {
+		return {
+			isCollapsed: true,
+		};
+	},
 	computed: {
 		condensedText() {
 			const obj = {};
@@ -83,10 +92,5 @@ export default {
 			return text;
 		},
 	},
-	methods: {
-		onExpandClick() {
-			this.$refs.condensedContainer.classList.toggle("closed");
-		},
-	},
 };
 </script>

client/components/MessageList.vue

@@ -27,7 +27,10 @@
 				<span class="unread-marker-text"/>
 			</div>
 
-			<MessageCondensed v-if="message.type === 'condensed'" :key="message.id" :messages="message.messages"/>
+			<MessageCondensed
+				v-if="message.type === 'condensed'"
+				:key="message.id"
+				:messages="message.messages"/>
 			<Message
 				v-else
 				:message="message"
@@ -72,6 +75,7 @@ export default {
 
 				if (lastCondensedContainer === null) {
 					lastCondensedContainer = {
+						id: message.id, // Use id of first message in the condensed container
 						type: "condensed",
 						messages: [],
 					};
@@ -79,7 +83,6 @@ export default {
 					condensed.push(lastCondensedContainer);
 				}
 
-				lastCondensedContainer.id = message.id; // TODO
 				lastCondensedContainer.messages.push(message);
 			}