Add connected state

client/components/Chat.vue

@@ -45,19 +45,16 @@
 				</div>
 				<div class="chat-content">
 					<div class="chat">
-						<div
-							v-if="channel.messages.length > 0"
-							ref="loadMoreButton"
-							:disabled="channel.historyLoading"
-							class="show-more show"
-							@click="onShowMoreClick"
-						>
+						<div class="show-more">
 							<button
-								v-if="channel.historyLoading"
-								class="btn">Loading…</button>
-							<button
-								v-else
-								class="btn">Show older messages</button>
+								ref="loadMoreButton"
+								:disabled="channel.historyLoading || !$root.connected"
+								class="btn"
+								@click="onShowMoreClick"
+							>
+								<span v-if="channel.historyLoading">Loading…</span>
+								<span v-else>Show older messages</span>
+							</button>
 						</div>
 						<MessageList :channel="channel"/>
 					</div>

client/components/ChatInput.vue

@@ -11,10 +11,12 @@
 			v-model="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
+			:disabled="!$root.connected"
 			class="mousetrap"
 			@keyup.enter="onSubmit"
 		/>
 		<span
+			v-if="$root.connected"
 			id="submit-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
 			aria-label="Send message">

client/css/style.css

@@ -1080,7 +1080,6 @@ background on hover (unless active) */
 }
 
 #chat .show-more {
-	display: none;
 	padding: 10px;
 	padding-top: 15px;
 	padding-bottom: 0;

client/js/socket-events/init.js

@@ -28,8 +28,8 @@ socket.on("init", function(data) {
 	}
 
 	$("#connection-error").removeClass("shown");
-	$(".show-more button, #input").prop("disabled", false);
-	$("#submit").show();
+
+	vueApp.connected = true;
 
 	if (lastMessageId < 0) {
 		if (data.token) {

client/js/socket-events/more.js

@@ -7,19 +7,12 @@ const {vueApp, findChannel} = require("../vue");
 
 socket.on("more", function(data) {
 	let chan = $("#chat #chan-" + data.chan);
-	const type = chan.data("type");
 	chan = chan.find(".messages");
 
 	// get the scrollable wrapper around messages
 	const scrollable = chan.closest(".chat");
 	const heightOld = chan.height() - scrollable.scrollTop();
 
-	// If there are no more messages to show, just hide the button and do nothing else
-	if (!data.messages.length) {
-		scrollable.find(".show-more").removeClass("show");
-		return;
-	}
-
 	const channel = findChannel(data.chan);
 
 	if (!channel) {

client/js/socket.js

@@ -10,9 +10,10 @@ const socket = io({
 	reconnection: !$(document.body).hasClass("public"),
 });
 
-$("#connection-error").on("click", function() {
-	$(this).removeClass("shown");
-});
+module.exports = socket;
+
+const {vueApp} = require("./vue");
+const {requestIdleCallback} = require("./utils");
 
 socket.on("disconnect", handleDisconnect);
 socket.on("connect_error", handleDisconnect);
@@ -42,17 +43,13 @@ socket.on("authorized", function() {
 function handleDisconnect(data) {
 	const message = data.message || data;
 
+	vueApp.connected = false;
+
 	$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
-	$(".show-more button, #input").prop("disabled", true);
-	$("#submit").hide();
-	$("#upload").hide();
 
 	// If the server shuts down, socket.io skips reconnection
 	// and we have to manually call connect to start the process
 	if (socket.io.skipReconnect) {
-		const utils = require("./utils");
-		utils.requestIdleCallback(() => socket.connect(), 2000);
+		requestIdleCallback(() => socket.connect(), 2000);
 	}
 }
-
-module.exports = socket;

client/js/vue.js

@@ -21,6 +21,7 @@ Vue.filter("roundBadgeNumber", roundBadgeNumber);
 const vueApp = new Vue({
 	el: "#viewport",
 	data: {
+		connected: false,
 		appName: document.title,
 		activeChannel: null,
 		networks: [],