Synchronize number of highlighted messages to client

Also fixes #1791

client/js/lounge.js

@@ -188,6 +188,7 @@ $(function() {
 			self.addClass("active")
 				.attr("aria-selected", true)
 				.find(".badge")
+				.attr("data-highlight", 0)
 				.removeClass("highlight")
 				.empty();
 

client/js/socket-events/msg.js

@@ -129,7 +129,9 @@ function processReceivedMessage(data) {
 }
 
 function notifyMessage(targetId, channel, msg) {
-	const unread = msg.unread;
+	const serverUnread = msg.unread;
+	const serverHighlight = msg.highlight;
+
 	msg = msg.msg;
 
 	if (msg.self) {
@@ -205,13 +207,15 @@ function notifyMessage(targetId, channel, msg) {
 		}
 	}
 
-	if (!unread || button.hasClass("active")) {
+	if (!serverUnread || button.hasClass("active")) {
 		return;
 	}
 
-	const badge = button.find(".badge").html(helpers_roundBadgeNumber(unread));
+	const badge = button.find(".badge").html(helpers_roundBadgeNumber(serverUnread));
 
 	if (msg.highlight) {
-		badge.addClass("highlight");
+		badge
+			.attr("data-highlight", serverHighlight)
+			.addClass("highlight");
 	}
 }

client/js/socket-events/open.js

@@ -18,6 +18,7 @@ socket.on("open", function(id) {
 
 	// Clear the unread badge
 	$("#sidebar").find(".chan[data-id='" + id + "'] .badge")
+		.attr("data-highlight", 0)
 		.removeClass("highlight")
 		.empty();
 

client/views/chan.tpl

@@ -20,7 +20,7 @@
 			<span class="not-connected-tooltip tooltipped tooltipped-w" aria-label="Disconnected">
 				<span class="not-connected-icon"></span>
 			</span>
-			<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
+			<span class="badge{{#if highlight}} highlight{{/if}}" data-highlight="{{highlight}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 		</div>
 		<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
 			<button class="add-channel" aria-label="Join a channel…" aria-controls="join-channel-{{id}}"></button>
@@ -28,7 +28,7 @@
 	{{/equal}}
 	{{#notEqual type "lobby"}}
 		<span class="name" title="{{name}}">{{name}}</span>
-		<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
+		<span class="badge{{#if highlight}} highlight{{/if}}" data-highlight="{{highlight}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 		<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
 			<button class="close" aria-label="Leave"></button>
 		</span>

src/models/chan.js

@@ -48,8 +48,23 @@ Chan.prototype.pushMessage = function(client, msg, increasesUnread) {
 	// If this channel is open in any of the clients, do not increase unread counter
 	const isOpen = _.find(client.attachedClients, {openChannel: chan}) !== undefined;
 
-	if ((increasesUnread || msg.highlight) && !isOpen) {
+	if (msg.self) {
-		obj.unread = ++this.unread;
+		// reset counters/markers when receiving self-/echo-message
+		this.unread = 0;
+		this.firstUnread = 0;
+		this.highlight = 0;
+	} else if (!isOpen) {
+		if (!this.firstUnread) {
+			this.firstUnread = msg.id;
+		}
+
+		if (increasesUnread || msg.highlight) {
+			obj.unread = ++this.unread;
+		}
+
+		if (msg.highlight) {
+			obj.highlight = ++this.highlight;
+		}
 	}
 
 	client.emit("msg", obj);
@@ -71,20 +86,6 @@ Chan.prototype.pushMessage = function(client, msg, increasesUnread) {
 			this.dereferencePreviews(deleted);
 		}
 	}
-
-	if (msg.self) {
-		// reset counters/markers when receiving self-/echo-message
-		this.firstUnread = 0;
-		this.highlight = 0;
-	} else if (!isOpen) {
-		if (!this.firstUnread) {
-			this.firstUnread = msg.id;
-		}
-
-		if (msg.highlight) {
-			this.highlight++;
-		}
-	}
 };
 
 Chan.prototype.dereferencePreviews = function(messages) {