Make a consistent single funciton for updating notified/favicon/title

client/index.html.tpl

@@ -19,7 +19,7 @@
 	<title>The Lounge</title>
 
 	<!-- Browser tab icon -->
-	<link id="favicon" rel="icon" sizes="16x16 32x32 64x64" href="img/favicon-normal.ico" data-other="img/favicon-alerted.ico" data-toggled="false" type="image/x-icon">
+	<link id="favicon" rel="icon" sizes="16x16 32x32 64x64" href="img/favicon-normal.ico" data-other="img/favicon-alerted.ico" type="image/x-icon">
 
 	<!-- Safari pinned tab icon -->
 	<link rel="mask-icon" href="img/icon-black-transparent-bg.svg" color="#415363">

client/js/lounge.js

@@ -132,21 +132,6 @@ window.vueMounted = () => {
 
 			socket.emit("open", channel ? channel.channel.id : null);
 
-			let hasAnyHighlights = false;
-
-			for (const network of vueApp.networks) {
-				for (const chan of network.channels) {
-					if (chan.highlight > 0) {
-						hasAnyHighlights = true;
-						break;
-					}
-				}
-			}
-
-			if (!hasAnyHighlights) {
-				utils.toggleNotificationMarkers(false);
-			}
-
 			if (!keepSidebarOpen && $(window).outerWidth() <= utils.mobileViewportPixels) {
 				slideoutMenu.toggle(false);
 			}
@@ -161,7 +146,7 @@ window.vueMounted = () => {
 			.addClass("active")
 			.trigger("show");
 
-		utils.updateTitle();
+		utils.synchronizeNotifiedState();
 
 		if (self.hasClass("chan")) {
 			vueApp.$nextTick(() => $("#chat-container").addClass("active"));
@@ -223,15 +208,7 @@ window.vueMounted = () => {
 	});
 
 	$(document).on("visibilitychange focus click", () => {
-		for (const network of vueApp.networks) {
-			for (const channel of network.channels) {
-				if (channel.highlight > 0) {
-					return;
-				}
-			}
-		}
-
-		utils.toggleNotificationMarkers(false);
+		utils.synchronizeNotifiedState();
 	});
 
 	// Compute how many milliseconds are remaining until the next day starts

client/js/socket-events/init.js

@@ -98,16 +98,7 @@ socket.on("init", function(data) {
 	vueApp.$nextTick(() => openCorrectChannel(previousActive, data.active));
 
 	utils.confirmExit();
-
-	for (const network of vueApp.networks) {
-		for (const channel of network.channels) {
-			if (channel.highlight > 0) {
-				utils.updateTitle();
-				utils.toggleNotificationMarkers(true);
-				return;
-			}
-		}
-	}
+	utils.synchronizeNotifiedState();
 });
 
 function openCorrectChannel(clientActive, serverActive) {

client/js/socket-events/msg.js

@@ -32,7 +32,7 @@ socket.on("msg", function(data) {
 	}
 
 	if (data.msg.self || data.msg.highlight) {
-		utils.updateTitle();
+		utils.synchronizeNotifiedState();
 	}
 
 	// Display received notices and errors in currently active channel.
@@ -89,8 +89,6 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
 				}
 			}
 
-			utils.toggleNotificationMarkers(true);
-
 			if (options.settings.desktopNotifications && ("Notification" in window) && Notification.permission === "granted") {
 				let title;
 				let body;

client/js/socket-events/open.js

@@ -27,5 +27,5 @@ socket.on("open", function(id) {
 		}
 	}
 
-	utils.updateTitle();
+	utils.synchronizeNotifiedState();
 });

client/js/socket-events/part.js

@@ -2,6 +2,7 @@
 
 const $ = require("jquery");
 const socket = require("../socket");
+const utils = require("../utils");
 const {vueApp, findChannel} = require("../vue");
 
 socket.on("part", function(data) {
@@ -18,4 +19,6 @@ socket.on("part", function(data) {
 	if (channel) {
 		channel.network.channels.splice(channel.network.channels.findIndex((c) => c.id === data.chan), 1);
 	}
+
+	utils.synchronizeNotifiedState();
 });

client/js/utils.js

@@ -17,8 +17,7 @@ module.exports = {
 	hasRoleInChannel,
 	move,
 	closeChan,
-	toggleNotificationMarkers,
-	updateTitle,
+	synchronizeNotifiedState,
 	togglePasswordField,
 	requestIdleCallback,
 };
@@ -51,13 +50,31 @@ function scrollIntoViewNicely(el) {
 
 const favicon = $("#favicon");
 
+function synchronizeNotifiedState() {
+	updateTitle();
+
+	let hasAnyHighlights = false;
+
+	for (const network of vueApp.networks) {
+		for (const chan of network.channels) {
+			if (chan.highlight > 0) {
+				hasAnyHighlights = true;
+				break;
+			}
+		}
+	}
+
+	toggleNotificationMarkers(hasAnyHighlights);
+}
+
 function toggleNotificationMarkers(newState) {
 	// Toggles the favicon to red when there are unread notifications
-	if (favicon.data("toggled") !== newState) {
+	if (vueApp.isNotified !== newState) {
+		vueApp.isNotified = newState;
+
 		const old = favicon.prop("href");
 		favicon.prop("href", favicon.data("other"));
 		favicon.data("other", old);
-		favicon.data("toggled", newState);
 	}
 
 	// Toggles a dot on the menu icon when there are unread notifications

client/js/vue.js

@@ -25,6 +25,7 @@ const vueApp = new Vue({
 		connected: false,
 		connectionError: false,
 		fileUploadEnabled: false,
+		isNotified: false,
 		appName: document.title,
 		activeChannel: null,
 		networks: [],