search user and initiate chat from expanded chat page

less/chats.less

@@ -234,3 +234,36 @@
 		z-index: 1;
 	}
 }
+
+[component="chat/search/list"] {
+	
+	padding-left: 0px;
+	
+	li {
+		position: relative;
+		clear: both;
+		list-style-type: none;
+		padding: .5em;
+		height: 70px;
+		cursor: pointer;
+		border-left: 1px solid;
+		border-right: 1px solid;
+		border-bottom: 1px solid;
+		border-color: #eee;
+		background: #fff;
+
+		i {
+			position: relative;
+			left: -30px;
+			font-size: 20px;
+			top: -20px;
+		}
+
+		img, .user-icon {
+			.user-icon-style(50px, 2.4rem, 50%);
+			margin-top: 4px;
+			margin-right: 13px;
+			margin-left: .5em;
+		}
+	}
+}

templates/chats.tpl

@@ -3,6 +3,12 @@
 
 <div class="row">
 	<div class="col-md-4">
+		<div class="chat-search hidden-xs">
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" />
+		</div>
+		<ul component="chat/search/list" class="chat-search-list">
+			
+		</ul>
 		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
 			<!-- BEGIN rooms -->
 			<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">