From b1e9a7ffda5bdca68b29c9229d8f954b2d9b0cb0 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sat, 28 Jan 2017 19:37:26 +0200
Subject: [PATCH] Use separate container for search results

---
 client/css/style.css           |  4 ++++
 client/js/lounge.js            | 21 +++++++++++++--------
 client/views/index.js          |  1 +
 client/views/user.tpl          |  3 ++-
 client/views/user_filtered.tpl |  5 +++++
 5 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 client/views/user_filtered.tpl

diff --git a/client/css/style.css b/client/css/style.css
index 7fbd6492..1327f271 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1219,6 +1219,10 @@ kbd {
 	content: "Users";
 }
 
+#chat .user-mode-search:before {
+	content: "Search Results";
+}
+
 #loading {
 	font-size: 14px;
 	z-index: 1;
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 5fd07abe..3d27ec68 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -1069,11 +1069,15 @@ $(function() {
 
 	chat.on("input", ".search", function() {
 		const value = $(this).val();
-		const names = $(this).closest(".users").find(".names");
+		const parent = $(this).closest(".users");
+		const names = parent.find(".names-original");
+		const container = parent.find(".names-filtered");
 
-		names.find(".user").each((i, el) => {
-			$(el).text($(el).text().replace(/<\/?b>;/, "")).hide();
-		});
+		if (!value.length) {
+			container.hide();
+			names.show();
+			return;
+		}
 
 		const fuzzyOptions = {
 			pre: "<b>",
@@ -1081,13 +1085,14 @@ $(function() {
 			extract: el => $(el).text()
 		};
 
-		fuzzy.filter(
+		const result = fuzzy.filter(
 			value,
 			names.find(".user").toArray(),
 			fuzzyOptions
-		).forEach(el => {
-			$(el.original).html(el.string).show();
-		});
+		);
+
+		names.hide();
+		container.html(templates.user_filtered({matches: result})).show();
 	});
 
 	chat.on("msg", ".messages", function(e, target, msg) {
diff --git a/client/views/index.js b/client/views/index.js
index fa1916ee..201690ee 100644
--- a/client/views/index.js
+++ b/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"),
 };
diff --git a/client/views/user.tpl b/client/views/user.tpl
index 23a3a9f0..29a6872c 100644
--- a/client/views/user.tpl
+++ b/client/views/user.tpl
@@ -2,8 +2,9 @@
 <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">
+<div class="names names-original">
 	{{#diff "reset"}}{{/diff}}
 	{{#each users}}
 		{{#diff mode}}
diff --git a/client/views/user_filtered.tpl b/client/views/user_filtered.tpl
new file mode 100644
index 00000000..1b86f99d
--- /dev/null
+++ b/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>