From c583d6edf9d01276e6be03e372146bd44dae452c Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sat, 22 Apr 2017 15:49:01 +0300
Subject: [PATCH] Correctly update user list and search filtering on user
 updates

---
 client/css/style.css               | 19 +++++++------------
 client/js/libs/handlebars/users.js |  5 -----
 client/js/lounge.js                | 19 +++++++++++++++++--
 client/views/chat.tpl              | 10 +++++++++-
 client/views/user.tpl              | 28 ++++++++++------------------
 5 files changed, 43 insertions(+), 38 deletions(-)
 delete mode 100644 client/js/libs/handlebars/users.js

diff --git a/client/css/style.css b/client/css/style.css
index 1327f271..89b01c94 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -768,6 +768,9 @@ kbd {
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 	position: absolute;
+}
+
+#chat .channel .chat {
 	right: 180px;
 }
 
@@ -791,18 +794,6 @@ kbd {
 	transform: translateZ(0);
 }
 
-#chat .lobby .chat,
-#chat .special .chat,
-#chat .query .chat {
-	right: 0;
-}
-
-#chat .lobby .sidebar,
-#chat .special .sidebar,
-#chat .query .sidebar {
-	display: none;
-}
-
 #chat .show-more {
 	display: none;
 	padding: 10px;
@@ -1180,6 +1171,10 @@ kbd {
 	width: 100%;
 }
 
+#chat .names-filtered {
+	display: none;
+}
+
 #chat .names .user {
 	display: block;
 	line-height: 1.6;
diff --git a/client/js/libs/handlebars/users.js b/client/js/libs/handlebars/users.js
deleted file mode 100644
index d962423c..00000000
--- a/client/js/libs/handlebars/users.js
+++ /dev/null
@@ -1,5 +0,0 @@
-"use strict";
-
-module.exports = function(count) {
-	return count + " " + (count === 1 ? "user" : "users");
-};
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 3d27ec68..a0e52e60 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -258,7 +258,10 @@ $(function() {
 
 	function renderChannel(data) {
 		renderChannelMessages(data);
-		renderChannelUsers(data);
+
+		if (data.type === "channel") {
+			renderChannelUsers(data);
+		}
 	}
 
 	function renderChannelMessages(data) {
@@ -318,7 +321,19 @@ $(function() {
 			return (oldSortOrder[a] || Number.MAX_VALUE) - (oldSortOrder[b] || Number.MAX_VALUE);
 		});
 
-		users.html(templates.user(data)).data("nicks", nicks);
+		const search = users
+			.find(".search")
+			.attr("placeholder", nicks.length + " " + (nicks.length === 1 ? "user" : "users"));
+
+		users
+			.find(".names-original")
+			.html(templates.user(data))
+			.data("nicks", nicks);
+
+		// Refresh user search
+		if (search.val().length) {
+			search.trigger("input");
+		}
 	}
 
 	function renderNetworks(data) {
diff --git a/client/views/chat.tpl b/client/views/chat.tpl
index 9ccb6391..898dd75b 100644
--- a/client/views/chat.tpl
+++ b/client/views/chat.tpl
@@ -19,8 +19,16 @@
 		</div>
 		<div class="messages"></div>
 	</div>
+	{{#equal type "channel"}}
 	<aside class="sidebar">
-		<div class="users"></div>
+		<div class="users">
+			<div class="count">
+				<input type="search" class="search" aria-label="Search among the user list">
+			</div>
+			<div class="names names-filtered"></div>
+			<div class="names names-original"></div>
+		</div>
 	</aside>
+	{{/equal}}
 </div>
 {{/each}}
diff --git a/client/views/user.tpl b/client/views/user.tpl
index 29a6872c..b0af2a0c 100644
--- a/client/views/user.tpl
+++ b/client/views/user.tpl
@@ -1,19 +1,11 @@
-{{#if users.length}}
-<div class="count">
-	<input class="search" placeholder="{{users users.length}}" aria-label="Search among the user list">
-</div>
-<div class="names names-filtered"></div>
-{{/if}}
-<div class="names names-original">
-	{{#diff "reset"}}{{/diff}}
-	{{#each users}}
-		{{#diff mode}}
-		{{#unless @first}}
-			</div>
-		{{/unless}}
-		<div class="user-mode {{modes mode}}">
-		{{/diff}}
-		<span role="button" class="user {{colorClass name}}" data-name="{{name}}">{{mode}}{{name}}</span>
-	{{/each}}
-	</div>
+{{#diff "reset"}}{{/diff}}
+{{#each users}}
+	{{#diff mode}}
+	{{#unless @first}}
+		</div>
+	{{/unless}}
+	<div class="user-mode {{modes mode}}">
+	{{/diff}}
+	<span role="button" class="user {{colorClass name}}" data-name="{{name}}">{{mode}}{{name}}</span>
+{{/each}}
 </div>