Replace synchronizeNotifiedState with a getter & watcher

client/components/Chat.vue

@@ -162,8 +162,6 @@ export default {
 					target: this.channel.id,
 				});
 			}
-
-			this.$root.synchronizeNotifiedState();
 		},
 		hideUserVisibleError() {
 			this.$store.commit("currentUserVisibleError", null);

client/js/socket-events/init.js

@@ -62,8 +62,6 @@ socket.on("init", function(data) {
 		}
 	}
 
-	vueApp.synchronizeNotifiedState();
-
 	if (document.body.classList.contains("public")) {
 		window.addEventListener(
 			"beforeunload",

client/js/socket-events/msg.js

@@ -88,10 +88,6 @@ socket.on("msg", function(data) {
 			user.lastMessage = new Date(data.msg.time).getTime() || Date.now();
 		}
 	}
-
-	if (data.msg.self || data.msg.highlight) {
-		vueApp.synchronizeNotifiedState();
-	}
 });
 
 function notifyMessage(targetId, channel, activeChannel, msg) {

client/js/socket-events/open.js

@@ -1,7 +1,6 @@
 "use strict";
 
 const socket = require("../socket");
-const {vueApp} = require("../vue");
 const store = require("../store").default;
 
 // Sync unread badge and marker when other clients open a channel
@@ -27,6 +26,4 @@ socket.on("open", function(id) {
 				channel.channel.messages[channel.channel.messages.length - 1].id;
 		}
 	}
-
-	vueApp.synchronizeNotifiedState();
 });

client/js/socket-events/part.js

@@ -18,6 +18,4 @@ socket.on("part", function(data) {
 			1
 		);
 	}
-
-	vueApp.synchronizeNotifiedState();
 });

client/js/store.js

@@ -140,6 +140,17 @@ const store = new Vuex.Store({
 
 			return null;
 		},
+		highlightCount(state) {
+			let highlightCount = 0;
+
+			for (const network of state.networks) {
+				for (const channel of network.channels) {
+					highlightCount += channel.highlight;
+				}
+			}
+
+			return highlightCount;
+		},
 		title(state, getters) {
 			const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : "";
 

client/js/vue.js

@@ -11,6 +11,10 @@ const constants = require("./constants");
 
 Vue.filter("localetime", localetime);
 
+const favicon = document.getElementById("favicon");
+const faviconNormal = favicon.getAttribute("href");
+const faviconAlerted = favicon.dataset.other;
+
 const vueApp = new Vue({
 	el: "#viewport",
 	router,
@@ -51,32 +55,6 @@ const vueApp = new Vue({
 				channel.moreHistoryAvailable = true;
 			}
 		},
-		synchronizeNotifiedState() {
-			let hasAnyHighlights = false;
-
-			for (const network of this.$store.state.networks) {
-				for (const chan of network.channels) {
-					if (chan.highlight > 0) {
-						hasAnyHighlights = true;
-						break;
-					}
-				}
-			}
-
-			this.toggleNotificationMarkers(hasAnyHighlights);
-		},
-		toggleNotificationMarkers(newState) {
-			if (this.$store.state.isNotified !== newState) {
-				// Toggles a dot on the menu icon when there are unread notifications
-				this.$store.commit("isNotified", newState);
-
-				// Toggles the favicon to red when there are unread notifications
-				const favicon = document.getElementById("favicon");
-				const old = favicon.getAttribute("href");
-				favicon.setAttribute("href", favicon.dataset.other);
-				favicon.dataset.other = old;
-			}
-		},
 	},
 	render(createElement) {
 		return createElement(App, {
@@ -113,6 +91,14 @@ store.watch(
 	}
 );
 
+// Toggles the favicon to red when there are unread notifications
+store.watch(
+	(_, getters) => getters.highlightCount,
+	(highlightCount) => {
+		favicon.setAttribute("href", highlightCount > 0 ? faviconAlerted : faviconNormal);
+	}
+);
+
 Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line