Make a single function to initialize channel variables

client/components/MessageList.vue

@@ -240,7 +240,7 @@ export default {
 			let lastMessage = this.channel.messages[0];
 			lastMessage = lastMessage ? lastMessage.id : -1;
 
-			this.$set(this.channel, "historyLoading", true);
+			this.channel.historyLoading = true;
 
 			socket.emit("more", {
 				target: this.channel.id,

client/css/style.css

@@ -1087,7 +1087,7 @@ background on hover (unless active) */
 .scroll-down.fade-enter-active {
 	opacity: 0;
 	transform: translateY(16px);
-	transition: opacity .3s, transform .3s;
+	transition: opacity 0.3s, transform 0.3s;
 }
 
 .scroll-down.fade-enter-to {
@@ -1097,7 +1097,6 @@ background on hover (unless active) */
 
 .scroll-down {
 	position: absolute;
-
 	bottom: 16px;
 	right: 16px;
 	z-index: 2;

client/js/socket-events/init.js

@@ -8,7 +8,7 @@ const slideoutMenu = require("../slideout");
 const sidebar = $("#sidebar");
 const storage = require("../localStorage");
 const utils = require("../utils");
-const {vueApp} = require("../vue");
+const {vueApp, initChannel} = require("../vue");
 
 socket.on("init", function(data) {
 	$("#loading-page-message, #connection-error").text("Rendering…");
@@ -46,13 +46,7 @@ socket.on("init", function(data) {
 			network.isCollapsed = networks.has(network.uuid);
 		}
 
-		for (const channel of network.channels) {
+		network.channels.forEach(initChannel);
-			channel.scrolledToBottom = true;
-
-			if (channel.type === "channel") {
-				channel.usersOutdated = true;
-			}
-		}
 	}
 
 	vueApp.networks = data.networks;

client/js/socket-events/join.js

@@ -3,9 +3,11 @@
 const $ = require("jquery");
 const socket = require("../socket");
 const sidebar = $("#sidebar");
-const {vueApp} = require("../vue");
+const {vueApp, initChannel} = require("../vue");
 
 socket.on("join", function(data) {
+	initChannel(data.chan);
+
 	vueApp.networks.find((n) => n.uuid === data.network)
 		.channels.splice(data.index || -1, 0, data.chan);
 

client/js/socket-events/network.js

@@ -5,20 +5,17 @@ const socket = require("../socket");
 const templates = require("../../views");
 const sidebar = $("#sidebar");
 const utils = require("../utils");
-const {vueApp} = require("../vue");
+const {vueApp, initChannel} = require("../vue");
 
 socket.on("network", function(data) {
 	const network = data.networks[0];
 
 	network.isJoinChannelShown = false;
 	network.isCollapsed = false;
+	network.channels.forEach(initChannel);
 
 	for (const channel of network.channels) {
-		channel.scrolledToBottom = true;
+		initChannel(channel);
-
-		if (channel.type === "channel") {
-			channel.usersOutdated = true;
-		}
 	}
 
 	vueApp.networks.push(network);

client/js/vue.js

@@ -67,7 +67,17 @@ function findChannel(id) {
 	return null;
 }
 
+function initChannel(channel) {
+	channel.historyLoading = false;
+	channel.scrolledToBottom = true;
+
+	if (channel.type === "channel") {
+		channel.usersOutdated = true;
+	}
+}
+
 module.exports = {
 	vueApp,
 	findChannel,
+	initChannel,
 };