Move isNotified to vuex.

client/components/App.vue

@@ -1,6 +1,7 @@
 <template>
 	<div
 		id="viewport"
+		:class="{notified: $store.state.isNotified}"
 		role="tablist">
 		<Sidebar
 			:networks="networks"

client/components/ChatInput.vue

@@ -187,7 +187,7 @@ export default {
 			this.$refs.input.click();
 			this.$refs.input.focus();
 
-			if (!$store.state.isConnected) {
+			if (!this.$store.state.isConnected) {
 				return false;
 			}
 

client/js/store.js

@@ -5,11 +5,15 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
 	state: {
-    isConnected: false
+		isConnected: false,
+		isNotified: false,
 	},
 	mutations: {
 		isConnected(state, payload) {
 			state.isConnected = payload;
 		},
+		isNotified(state, payload) {
+			state.isNotified = payload;
+		},
 	}
 });

client/js/utils.js

@@ -67,17 +67,15 @@ function synchronizeNotifiedState() {
 }
 
 function toggleNotificationMarkers(newState) {
-	// Toggles the favicon to red when there are unread notifications
-	if (vueApp.isNotified !== newState) {
-		vueApp.isNotified = newState;
+	if (vueApp.$store.state.isNotified !== newState) {
+		// Toggles a dot on the menu icon when there are unread notifications
+		vueApp.$store.commit("isNotified", newState);
 
+		// Toggles the favicon to red when there are unread notifications
 		const old = favicon.prop("href");
 		favicon.prop("href", favicon.data("other"));
 		favicon.data("other", old);
 	}
-
-	// Toggles a dot on the menu icon when there are unread notifications
-	viewport.toggleClass("notified", newState);
 }
 
 function updateTitle() {

client/js/vue.js

@@ -23,7 +23,6 @@ const vueApp = new Vue({
 		initialized: false,
 		isAutoCompleting: false,
 		isFileUploadEnabled: false,
-		isNotified: false,
 		networks: [],
 		pushNotificationState: "unsupported",
 		desktopNotificationState: "unsupported",