Make class settings work (colored nicks, etc)

client/components/App.vue

@@ -61,6 +61,7 @@
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
+				:settings="settings"
 				:network="activeChannel.network"
 				:channel="activeChannel.channel"/>
 			<div
@@ -102,6 +103,7 @@ export default {
 		Chat,
 	},
 	props: {
+		settings: Object,
 		activeChannel: Object,
 		networks: Array,
 	},

client/components/Chat.vue

@@ -4,7 +4,14 @@
 		class="window">
 		<div
 			id="chat"
-			ref="chat">
+			ref="chat"
+			:class="{
+				'hide-motd': !settings.motd,
+				'hide-status-messages': settings.statusMessages === 'hidden',
+				'condensed-status-messages': settings.statusMessages === 'condensed',
+				'colored-nicks': settings.coloredNicks,
+			}"
+		>
 			<div
 				:id="'chan-' + channel.id"
 				:class="[channel.type, 'chan', 'active']"
@@ -81,6 +88,7 @@ export default {
 		ChatUserList,
 	},
 	props: {
+		settings: Object,
 		network: Object,
 		channel: Object,
 	},

client/js/options.js

@@ -91,13 +91,6 @@ function applySetting(name, value) {
 	if (name === "syncSettings" && value) {
 		$syncWarningOverride.hide();
 		$forceSyncButton.hide();
-	} else if (name === "motd") {
-		$chat.toggleClass("hide-" + name, !value);
-	} else if (name === "statusMessages") {
-		$chat.toggleClass("hide-status-messages", value === "hidden");
-		$chat.toggleClass("condensed-status-messages", value === "condensed");
-	} else if (name === "coloredNicks") {
-		$chat.toggleClass("colored-nicks", value);
 	} else if (name === "theme") {
 		value = `themes/${value}.css`;