From d63f0ccc50920a533add6a535c91a481f1072064 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Wed, 27 Jun 2018 10:05:37 +0300
Subject: [PATCH] Make userlist state consistent on mobile and desktop

---
 client/css/style.css            | 13 ++++---------
 client/js/lounge.js             | 18 ++++++++++--------
 client/js/socket-events/init.js | 13 +++++++++++--
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index b8daef10..d53ba3f4 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -510,8 +510,8 @@ kbd {
 	opacity: 1;
 }
 
-#viewport.rt #chat .userlist {
-	display: none;
+#viewport.userlist-open #chat .userlist {
+	display: flex;
 }
 
 #sidebar {
@@ -1051,14 +1051,10 @@ background on hover (unless active) */
 	-webkit-overflow-scrolling: touch;
 }
 
-#viewport.rt .chat {
-	right: 0;
-}
-
 #chat .userlist {
 	border-left: 1px solid #e7e7e7;
 	width: 180px;
-	display: flex;
+	display: none;
 	flex-direction: column;
 	flex-shrink: 0;
 	touch-action: pan-y;
@@ -2413,8 +2409,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		transition: transform 0.2s;
 	}
 
-	#viewport.rt #chat .userlist {
-		display: flex;
+	#viewport.userlist-open #chat .userlist {
 		transform: translateX(0);
 	}
 
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 03328b14..09b2197b 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -28,10 +28,6 @@ $(function() {
 	const viewport = $("#viewport");
 
 	function storeSidebarVisibility(name, state) {
-		if ($(window).outerWidth() < utils.mobileViewportPixels) {
-			return;
-		}
-
 		storage.set(name, state);
 
 		utils.togglePreviewMoreButtonsIfNeeded();
@@ -40,20 +36,26 @@ $(function() {
 	// If sidebar overlay is visible and it is clicked, close the sidebar
 	$("#sidebar-overlay").on("click", () => {
 		slideoutMenu.toggle(false);
-		storeSidebarVisibility("thelounge.state.sidebar", false);
+
+		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+			storeSidebarVisibility("thelounge.state.sidebar", false);
+		}
 	});
 
 	$("#windows").on("click", "button.lt", () => {
 		const isOpen = !slideoutMenu.isOpen();
 
 		slideoutMenu.toggle(isOpen);
-		storeSidebarVisibility("thelounge.state.sidebar", isOpen);
+
+		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+			storeSidebarVisibility("thelounge.state.sidebar", isOpen);
+		}
 	});
 
 	viewport.on("click", ".rt", function() {
-		const isOpen = !viewport.hasClass("rt");
+		const isOpen = !viewport.hasClass("userlist-open");
 
-		viewport.toggleClass("rt", isOpen);
+		viewport.toggleClass("userlist-open", isOpen);
 		chat.find(".chan.active .chat").trigger("keepToBottom");
 		storeSidebarVisibility("thelounge.state.userlist", isOpen);
 
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index 11debaef..d6738a29 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -41,12 +41,21 @@ socket.on("init", function(data) {
 		slideoutMenu.enable();
 
 		const viewport = $("#viewport");
+		const viewportWidth = $(window).outerWidth();
+		let isUserlistOpen = storage.get("thelounge.state.userlist");
 
-		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+		if (viewportWidth >= utils.mobileViewportPixels) {
 			slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true");
-			viewport.toggleClass("rt", storage.get("thelounge.state.userlist") === "true");
 		}
 
+		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
+		// user list state, close it by default
+		if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
+			isUserlistOpen = "true";
+		}
+
+		viewport.toggleClass("userlist-open", isUserlistOpen === "true");
+
 		$(document.body).removeClass("signed-out");
 		$("#loading").remove();
 		$("#sign-in").remove();