Some fixes with unread marker

client/components/MessageList.vue

@@ -6,9 +6,9 @@
 		aria-relevant="additions"
 		@copy="onCopy"
 	>
-		<template v-for="(message, id) in getCondensedMessages">
+		<template v-for="(message, id) in condensedMessages">
 			<div
-				v-if="shouldDisplayDateMarker(id)"
+				v-if="shouldDisplayDateMarker(message, id)"
 				:key="message.id + '-date'"
 				:data-time="message.time"
 				:aria-label="message.time | localedate"
@@ -21,7 +21,7 @@
 				</div>
 			</div>
 			<div
-				v-if="shouldDisplayUnreadMarker(message.id)"
+				v-if="shouldDisplayUnreadMarker(id)"
 				:key="message.id + '-unread'"
 				class="unread-marker"
 			>
@@ -56,7 +56,7 @@ export default {
 		channel: Object,
 	},
 	computed: {
-		getCondensedMessages() {
+		condensedMessages() {
 			if (this.channel.type !== "channel") {
 				return this.channel.messages;
 			}
@@ -78,6 +78,7 @@ export default {
 				if (lastCondensedContainer === null) {
 					lastCondensedContainer = {
 						id: message.id, // Use id of first message in the condensed container
+						time: message.time,
 						type: "condensed",
 						messages: [],
 					};
@@ -92,19 +93,23 @@ export default {
 		},
 	},
 	methods: {
-		shouldDisplayDateMarker(id) {
-			const previousTime = this.channel.messages[id - 1];
+		shouldDisplayDateMarker(message, id) {
+			const previousMessage = this.condensedMessages[id - 1];
 
-			if (!previousTime) {
+			if (!previousMessage) {
 				return true;
 			}
 
-			const currentTime = this.channel.messages[id];
-
-			return (new Date(previousTime.time)).getDay() !== (new Date(currentTime.time)).getDay();
+			return (new Date(previousMessage.time)).getDay() !== (new Date(message.time)).getDay();
 		},
-		shouldDisplayUnreadMarker(msgId) {
-			return this.channel.firstUnread === msgId;
+		shouldDisplayUnreadMarker(id) {
+			const previousMessage = this.condensedMessages[id - 1];
+
+			if (!previousMessage) {
+				return false;
+			}
+
+			return this.channel.firstUnread === previousMessage.id;
 		},
 		onCopy() {
 			clipboard(this.$el);

client/js/socket-events/msg.js

@@ -24,18 +24,18 @@ socket.on("msg", function(data) {
 		utils.lastMessageId = data.msg.id;
 	}
 
-	// We set a maximum timeout of 2 seconds so that messages don't take too long to appear.
-	utils.requestIdleCallback(() => processReceivedMessage(data), 2000);
-});
-
-function processReceivedMessage(data) {
 	let targetId = data.chan;
 	let target = "#chan-" + targetId;
 	let channelContainer = $("#chat").find(target);
 	let channel = findChannel(data.chan);
 
+	if (typeof data.highlight !== "undefined") {
 		channel.channel.highlight = data.highlight;
+	}
+
+	if (typeof data.unread !== "undefined") {
 		channel.channel.unread = data.unread;
+	}
 
 	if (data.msg.self || data.msg.highlight) {
 		utils.updateTitle();
@@ -65,7 +65,7 @@ function processReceivedMessage(data) {
 	notifyMessage(targetId, channelContainer, data);
 
 	if (data.msg.self) {
-		channel.channel.firstUnread = 0;
+		channel.channel.firstUnread = channel.channel.messages[channel.channel.messages.length - 1].id;
 	}
 
 	let messageLimit = 0;
@@ -93,7 +93,7 @@ function processReceivedMessage(data) {
 			user.lastMessage = (new Date(data.msg.time)).getTime() || Date.now();
 		}
 	}
-}
+});
 
 function notifyMessage(targetId, channel, msg) {
 	msg = msg.msg;