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

@@ -4,12 +4,16 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    isConnected: false
-  },
-  mutations: {
-    isConnected(state, payload) {
-      state.isConnected = payload;
-    },
-  }
+	state: {
+		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",