Added user search

Gruntfile.js

@@ -2,7 +2,7 @@ module.exports = function(grunt) {
 	var components = "";
 	var files = [
 		"./lib/**/*.js",
-		"./client/js/shout.js"
+		"./client/js/chat.js"
 	];
 	grunt.initConfig({
 		watch: {

client/css/style.css

@@ -11,6 +11,7 @@ body {
 	height: 100%;
 }
 body {
+	background: #fff;
 	color: #222;
 	font: 16px Lato, sans-serif;
 	margin: 0;
@@ -245,7 +246,7 @@ button {
 	display: inline;
 }
 #meta {
-	border-bottom: 1px solid #e9ecef;
+	
 	height: 80px;
 	padding: 25px 0 0 20px;
 }
@@ -253,18 +254,46 @@ button {
 	color: #222;
 	font-size: 15px;
 }
-#meta .count {
-	color: #ccc;
-}
 #meta .type {
+	color: #ccc;
 	text-transform: capitalize;
 }
+#count {
+	background: #f9f9f9;
+	border-top: 1px dashed #e9ecef;
+	border-bottom: 1px solid #e9ecef;
+	height: 40px;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 80px;
+}
+#count:before {
+	color: #eee;
+	font: 16px Octicons;
+	content: "\f02e";
+	position: absolute;
+	right: 18px;
+	line-height: 40px;
+	transition: color .2s;
+}
+#search {
+	color: #222;
+	border: 0;
+	background: none;
+	font: inherit;
+	outline: 0;
+	padding: 12px 20px;
+	position: relative;
+	width: 100%;
+	z-index: 2;
+}
 #users {
 	bottom: 0;
 	overflow: auto;
 	padding: 15px 20px;
 	position: absolute;
-	top: 80px;
+	top: 120px;
 	width: 100%;
 }
 #users button {

client/index.html

@@ -71,16 +71,15 @@
 		<script type="text/html" class="users">
 		<div id="meta">
 			<h1>{{name}}</h1>
-			<div class="count">
-			{{#if users.length}}
-			{{users.length}} users
-			{{else}}
 			<span class="type">
 				{{type}}
 			</span>
+		</div>
+		{{#if users.length}}
+		<div id="count">
+			<input id="search" placeholder="{{users.length}} users">
+		</div>
 		{{/if}}
-			</div>
-		</div>
 		<div id="users">
 			{{#each users}}
 			<button>{{mode}}{{name}}</button>

client/js/chat.js

@@ -49,7 +49,7 @@ $(function() {
 	});
 	
 	socket.on("init", function(data) {
-		networks.empty()
+		networks.empty();
 		channels = $.map(data.networks, function(n) {
 			return n.channels;
 		});
@@ -102,12 +102,21 @@ $(function() {
 	});
 	
 	socket.on("part", function(data) {
-		networks.find(".chan[data-id='" + data.chan + "']").remove();
+		networks.find(".chan[data-id='" + data.chan + "']")
+			.remove()
+			.end()
+			.find(".chan")
+			.eq(0)
+			.trigger("click");
 	});
 	
 	socket.on("quit", function(data) {
-		console.log(data);
-		networks.find(".network[data-id='" + data.network + "']").remove();
+		networks.find(".network[data-id='" + data.network + "']")
+			.remove()
+			.end()
+			.find(".chan")
+			.eq(0)
+			.trigger("click");
 	});
 	
 	socket.on("users", function(data) {
@@ -136,9 +145,15 @@ $(function() {
 	});
 	
 	networks.on("click", ".chan", function() {
-		var id = $(this).data("id");
-		var chan = find(id);
+		var self = $(this);
+		var id = self.data("id");
+		
+		networks.find(".active").removeClass("active");
+		self.addClass("active");
+		
 		chat.data("target", id);
+		
+		var chan = find(id);
 		if (typeof chan !== "undefined") {
 			activeChannel = chan;
 			chat.html(
@@ -147,6 +162,18 @@ $(function() {
 		}
 	});
 	
+	chat.on("input", "#search", function() {
+		var val = $(this).val();
+		$("#users").find("button").each(function() {
+			var btn = $(this);
+			if (btn.text().toLowerCase().indexOf(val) === 0) {
+				btn.show();
+			} else {
+				btn.hide();
+			}
+		});
+	});
+	
 	function isActive(chan) {
 		return activeChannel !== null && chan == activeChannel;
 	}