Correctly update user list and search filtering on user updates

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;

client/js/libs/handlebars/users.js

@@ -1,5 +0,0 @@
-"use strict";
-
-module.exports = function(count) {
-	return count + " " + (count === 1 ? "user" : "users");
-};

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) {

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}}

client/views/user.tpl

@@ -1,19 +1,11 @@
-{{#if users.length}}
+{{#diff "reset"}}{{/diff}}
-<div class="count">
+{{#each users}}
-	<input class="search" placeholder="{{users users.length}}" aria-label="Search among the user list">
+	{{#diff mode}}
-</div>
+	{{#unless @first}}
-<div class="names names-filtered"></div>
+		</div>
-{{/if}}
+	{{/unless}}
-<div class="names names-original">
+	<div class="user-mode {{modes mode}}">
-	{{#diff "reset"}}{{/diff}}
+	{{/diff}}
-	{{#each users}}
+	<span role="button" class="user {{colorClass name}}" data-name="{{name}}">{{mode}}{{name}}</span>
-		{{#diff mode}}
+{{/each}}
-		{{#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>
 </div>