Implement global user and room search

client/stylesheets/base.less

@@ -149,7 +149,7 @@ blockquote {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 .small-title {
@@ -1711,6 +1711,47 @@ a.github-fork {
 	}
 }
 
+.spotlight {
+	background-color: rgba(0,0,0,.3);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	display: flex;
+	display: -webkit-flex;
+	justify-content: center;
+	padding: 0 40px;
+
+	> .spotlight-input {
+		width: 100%;
+		max-width: 600px;
+		font-size: 24px;
+		color: #444;
+		margin-top: 6%;
+
+		> input {
+			box-shadow: 0px 10px 20px rgba(0,0,0,.5);
+			border-width: 0px;
+			line-height: 46px;
+			height: 46px;
+			padding: 18px;
+			padding-left: 46px;
+		}
+
+		> i {
+			position: absolute;
+			z-index: 10;
+			line-height: 46px;
+			width: 46px;
+			text-align: center;
+			color: #aaa;
+			font-weight: 100;
+		}
+	}
+}
+
 // MAIN CONTENT + MAIN PAGES //
 .main-content {
 	position: fixed;

client/views/app/sportlight/spotlight.coffee

@@ -0,0 +1,46 @@
+@spotlight =
+	hide: ->
+		$('.spotlight').addClass('hidden')
+
+	show: ->
+		$('.spotlight').removeClass('hidden')
+		$('.spotlight input').focus()
+
+Template.spotlight.helpers
+	autocompleteSettingsRoomSearch: ->
+		return {
+			limit: 10
+			# inputDelay: 300
+			rules: [
+				{
+					collection: 'UserAndRoom'
+					subscription: 'roomSearch'
+					field: 'name'
+					template: Template.roomSearch
+					noMatchTemplate: Template.roomSearchEmpty
+					matchAll: true
+					filter: { uid: { $ne: Meteor.userId() } }
+					sort: 'name'
+				}
+			]
+		}
+
+Template.spotlight.events
+	'autocompleteselect input': (event, template, doc) ->
+		if doc.type is 'u'
+			Meteor.call 'createDirectMessage', doc.username, (error, result) ->
+				if error
+					return Errors.throw error.reason
+
+				if result?.rid?
+					FlowRouter.go('direct', { username: doc.username })
+					event.currentTarget.value = ''
+		else if doc.type is 'r'
+			if doc.t is 'c'
+				FlowRouter.go('channel', { name: doc.name })
+			else if doc.t is 'p'
+				FlowRouter.go('group', { name: doc.name })
+
+			event.currentTarget.value = ''
+
+		spotlight.hide()

client/views/app/sportlight/spotlight.html

@@ -0,0 +1,8 @@
+<template name="spotlight">
+	<div class="spotlight hidden">
+		<div class="spotlight-input">
+			<i class="icon-search"></i>
+			{{> inputAutocomplete settings=autocompleteSettingsRoomSearch id="room-search" class="search" placeholder=tQuickSearch autocomplete="off"}}
+		</div>
+	</div>
+</template>

client/views/main.coffee

@@ -1,4 +1,12 @@
 Template.body.onRendered ->
+	$(document.body).on 'keydown', (e) ->
+		if e.keyCode is 80 and e.metaKey is true
+			e.preventDefault()
+			e.stopPropagation()
+			spotlight.show()
+
+		if e.keyCode is 27
+			spotlight.hide()
 
 	Tracker.autorun (c) ->
 		w = window

client/views/main.html

@@ -50,6 +50,7 @@
 			{{#unless hasUsername}}
 				{{> username}}
 			{{else}}
+				{{> spotlight}}
 				<div id="user-card-popover"></div>
 				<div id="rocket-chat" class="menu-nav menu-closed">
 					<div class="connection-status">