Implement fuzzy-matching for the user list

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;
@@ -1219,6 +1214,10 @@ kbd {
 	content: "Users";
 }
 
+#chat .user-mode-search:before {
+	content: "Search Results";
+}
+
 #loading {
 	font-size: 14px;
 	z-index: 1;

client/js/lounge.js

@@ -6,6 +6,7 @@ const $ = require("jquery");
 const moment = require("moment");
 const Mousetrap = require("mousetrap");
 const URI = require("urijs");
+const fuzzy = require("fuzzy");
 
 // our libraries
 require("./libs/jquery/inputhistory");
@@ -257,7 +258,10 @@ $(function() {
 
 	function renderChannel(data) {
 		renderChannelMessages(data);
-		renderChannelUsers(data);
+
+		if (data.type === "channel") {
+			renderChannelUsers(data);
+		}
 	}
 
 	function renderChannelMessages(data) {
@@ -317,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) {
@@ -1067,17 +1083,31 @@ $(function() {
 	});
 
 	chat.on("input", ".search", function() {
-		var value = $(this).val().toLowerCase();
-		var names = $(this).closest(".users").find(".names");
-		names.find(".user").each(function() {
-			var btn = $(this);
-			var name = btn.text().toLowerCase().replace(/[+%@~]/, "");
-			if (name.indexOf(value) > -1) {
-				btn.show();
-			} else {
-				btn.hide();
-			}
-		});
+		const value = $(this).val();
+		const parent = $(this).closest(".users");
+		const names = parent.find(".names-original");
+		const container = parent.find(".names-filtered");
+
+		if (!value.length) {
+			container.hide();
+			names.show();
+			return;
+		}
+
+		const fuzzyOptions = {
+			pre: "<b>",
+			post: "</b>",
+			extract: el => $(el).text()
+		};
+
+		const result = fuzzy.filter(
+			value,
+			names.find(".user").toArray(),
+			fuzzyOptions
+		);
+
+		names.hide();
+		container.html(templates.user_filtered({matches: result})).show();
 	});
 
 	chat.on("msg", ".messages", function(e, target, msg) {

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/index.js

@@ -30,4 +30,5 @@ module.exports = {
 	toggle: require("./toggle.tpl"),
 	unread_marker: require("./unread_marker.tpl"),
 	user: require("./user.tpl"),
+	user_filtered: require("./user_filtered.tpl"),
 };

client/views/user.tpl

@@ -1,18 +1,11 @@
-{{#if users.length}}
-<div class="count">
-	<input class="search" placeholder="{{users users.length}}" aria-label="Search among the user list">
-</div>
-{{/if}}
-<div class="names">
-	{{#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>

client/views/user_filtered.tpl

@@ -0,0 +1,5 @@
+<div class="user-mode user-mode-search">
+{{#each matches}}
+	<span role="button" class="{{original.className}}">{{{string}}}</span>
+{{/each}}
+</div>

package.json

@@ -65,6 +65,7 @@
     "chai": "3.5.0",
     "eslint": "3.19.0",
     "font-awesome": "4.7.0",
+    "fuzzy": "0.1.3",
     "handlebars": "4.0.6",
     "handlebars-loader": "1.5.0",
     "jquery": "3.2.1",

webpack.config.js

@@ -18,6 +18,7 @@ let config = {
 			"mousetrap",
 			"socket.io-client",
 			"urijs",
+			"fuzzy",
 		],
 	},
 	devtool: "source-map",