From eaf9f8f763ded31e01c97f36543123df87625674 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 5 Jun 2018 14:02:28 -0300
Subject: [PATCH 01/22] table component

---
 .../imports/components/modal/directory.css    | 53 ++++++++++++-------
 .../client/imports/components/table.css       | 49 ++++++++++++-----
 .../client/components/table.html              |  5 ++
 .../rocketchat-ui/client/components/table.js  |  4 ++
 .../client/views/app/directory.html           | 24 ++++-----
 packages/rocketchat-ui/package.js             |  3 ++
 6 files changed, 93 insertions(+), 45 deletions(-)
 create mode 100644 packages/rocketchat-ui/client/components/table.html
 create mode 100644 packages/rocketchat-ui/client/components/table.js

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index bb2b8b6f9ad78..b87fdc906206e 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -16,6 +16,7 @@
 		min-height: 36px;
 		padding: 0;
 	}
+
 	&-search {
 		max-width: 260px;
 	}
@@ -34,50 +35,60 @@
 .rc-directory-channel {
 	&-wrapper {
 		display: flex;
-		align-items: center;
-		margin: 0 -9px;
 
 		overflow: hidden;
+
+		align-items: center;
 	}
 
 	&-avatar {
-		width: 60px;
-		height: 60px;
-		margin: 0 9px;
 
 		flex: 0 0 auto;
 
-		background-size: contain;
+		width: 32px;
+		height: 32px;
+		padding: 2px;
+
 		background-repeat: no-repeat;
 		background-position: center center;
+
+		background-size: contain;
 	}
 
 	&-info {
 		display: flex;
 
+		overflow: hidden;
+
 		flex-direction: column;
+
 		width: 1%;
-		flex-grow: 1;
 
 		white-space: nowrap;
-		overflow: hidden;
+
 		text-overflow: ellipsis;
+		flex-grow: 1;
 	}
 
 	&-name {
-		font-size: 1rem;
-		font-weight: 500;
-		white-space: nowrap;
+
 		overflow: hidden;
+
+		white-space: nowrap;
+
 		text-overflow: ellipsis;
 	}
 
 	&-description {
-		margin-top: 0.625rem;
-		color: var(--rc-color-primary-light);
+
 		overflow: hidden;
-		text-overflow: ellipsis;
+
 		max-width: 200px;
+		margin-top: 0.625rem;
+
+		text-overflow: ellipsis;
+
+		color: var(--rc-color-primary-light);
 	}
 
 	&-createdAt {
@@ -88,6 +99,7 @@
 .rc-directory-content {
 	overflow-x: auto;
 	flex: 1 1 100%;
+
 	height: 100vh;
 
 	& .js-sort {
@@ -95,20 +107,23 @@
 	}
 }
 
-.rc-table-td--createdAt,
-.rc-table-td--users {
+.rc-directory-td--createdAt,
+.rc-directory-td--users {
+
+	overflow: hidden;
+
 	width: 120px;
+
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	overflow: hidden;
 }
 
-.rc-table-td--users {
+.rc-directory-td--users {
 	width: 80px;
 }
 
 @media (width <= 500px) {
-	.rc-directory-content .rc-table-head {
+	.rc-directory-content thead {
 		display: none;
 	}
 
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 3670b60ce6138..37be4f0d2416e 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -1,38 +1,59 @@
 .rc-table {
-	font-size: 0.875rem;
-	color: var(--rc-color-primary);
 	width: 100%;
 
+	color: var(--rc-color-primary);
+
+	font-size: 0.875rem;
+
 	&--fixed {
-		table-layout:fixed;
+		table-layout: fixed;
 	}
 
-	&-head {
+	& thead {
 		color: var(--rc-color-primary-light);
 
+		& tr {
+			border-bottom: 1px solid #d8d8d8;
+		}
+
+		& td {
+			padding: 0.5rem;
+
+			font-size: 0.75rem;
+		}
+
 		& .rc-icon {
 			fill: var(--rc-color-primary-light);
 		}
 	}
 
-	&-body .rc-table-tr {
-		cursor: pointer;
+	& tbody {
+		& tr {
+			cursor: pointer;
 
-		&:hover {
-			background-color: var(--rc-color-primary-lightest);
+			&:hover {
+				background-color: var(--rc-color-primary-lightest);
+			}
 		}
 	}
 
-	&-tr {
-		box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
-	}
+	& td {
+
+		padding: 0.25rem 0.5rem;
 
-	&-td {
-		padding: 1.25rem 1rem;
 		vertical-align: middle;
+		letter-spacing: 0;
 
-		&--bold {
+		font-size: 0.875rem;
+
+		line-height: 1.25rem;
+
+		&.bold {
 			font-weight: 600;
 		}
 	}
 }
+
+.tr-dummy {
+	height: 1rem;
+}
diff --git a/packages/rocketchat-ui/client/components/table.html b/packages/rocketchat-ui/client/components/table.html
new file mode 100644
index 0000000000000..1c0282d55b405
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/table.html
@@ -0,0 +1,5 @@
+<template name="table">
+	<table class="rc-table {{#if fixed}}rc-table--fixed{{/if}}">
+			{{> Template.contentBlock}}
+	</table>
+</template>
diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
new file mode 100644
index 0000000000000..8e706ec8b6bff
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -0,0 +1,4 @@
+Template.table.onRendered(function() {
+	const dummyTr = '<tr class="tr-dummy"></tr>';
+	this.$('tbody').prepend(dummyTr).append(dummyTr);
+});
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 106bb30b1f06d..f6b45aeeec629 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -21,18 +21,18 @@
 		{{/header}}
 		<div class="rc-directory-content">
 			{{#if $eq searchType 'channels'}}
-				<table class="rc-table rc-table--fixed">
-					<thead class="rc-table-head">
-						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</td>
-							<td class="rc-table-td rc-table-td--users">{{_ "Users"}}</td>
-							<td class="rc-table-td js-sort rc-table-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</td>
+				{{#table fixed='true' }}
+					<thead>
+						<tr>
+							<td class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</td>
+							<td class="rc-directory-td--users">{{_ "Users"}}</td>
+							<td class="js-sort rc-directory-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</td>
 						</tr>
 					</thead>
-					<tbody class="rc-table-body">
+					<tbody>
 						{{#each searchResults}}
-							<tr class="rc-table-tr" data-name="{{name}}">
-								<td class="rc-table-td rc-table-td--name">
+							<tr data-name="{{name}}">
+								<td>
 									<div class="rc-directory-channel-wrapper">
 										<div class="rc-directory-channel-avatar">{{> avatar username=name roomIcon="true"}}</div>
 										<div class="rc-directory-channel-info">
@@ -46,14 +46,14 @@
 										</div>
 									</div>
 								</td>
-								<td class="rc-table-td rc-table-td--users">{{users}}</td>
-								<td class="rc-table-td rc-table-td--createdAt">
+								<td class="rc-directory-td--users">{{users}}</td>
+								<td class="rc-directory-td--createdAt">
 									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
 								</td>
 							</tr>
 						{{/each}}
 					</tbody>
-				</table>
+				{{/table}}
 			{{/if}}
 			{{#if $eq searchType 'users'}}
 				<table class="rc-table">
diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js
index 343cd8152feb9..8846bce2ef934 100644
--- a/packages/rocketchat-ui/package.js
+++ b/packages/rocketchat-ui/package.js
@@ -124,6 +124,9 @@ Package.onUse(function(api) {
 	api.addFiles('client/components/icon.html', 'client');
 	api.addFiles('client/components/icon.js', 'client');
 
+	api.addFiles('client/components/table.html', 'client');
+	api.addFiles('client/components/table.js', 'client');
+
 	api.addFiles('client/components/popupList.html', 'client');
 	api.addFiles('client/components/popupList.js', 'client');
 

From 2c836914e448abfe2531c3bf1d5494187cc22137 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 5 Jun 2018 18:48:04 -0300
Subject: [PATCH 02/22] table component: fixed header

---
 .../imports/components/modal/directory.css    |  10 +-
 .../client/imports/components/table.css       | 106 +++++++++++++-----
 .../client/components/table.html              |  14 ++-
 .../rocketchat-ui/client/components/table.js  |   5 +-
 .../client/views/app/directory.html           |  32 +++---
 5 files changed, 116 insertions(+), 51 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index b87fdc906206e..cb20ac749ce99 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -8,7 +8,6 @@
 
 
 	/* TODO: -plus and -search should be "globals" */
-
 	&-plus {
 		width: 36px;
 		min-width: 36px;
@@ -42,12 +41,11 @@
 	}
 
 	&-avatar {
-
 		flex: 0 0 auto;
 
 		width: 32px;
 		height: 32px;
-		padding: 2px;
+		padding: 3px;
 
 		background-repeat: no-repeat;
 		background-position: center center;
@@ -71,12 +69,15 @@
 	}
 
 	&-name {
-
 		overflow: hidden;
 
 		white-space: nowrap;
 
 		text-overflow: ellipsis;
+
+		& .rc-icon {
+			font-size: 1rem;
+		}
 	}
 
 	&-description {
@@ -109,7 +110,6 @@
 
 .rc-directory-td--createdAt,
 .rc-directory-td--users {
-
 	overflow: hidden;
 
 	width: 120px;
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 37be4f0d2416e..2570714334626 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -9,24 +9,6 @@
 		table-layout: fixed;
 	}
 
-	& thead {
-		color: var(--rc-color-primary-light);
-
-		& tr {
-			border-bottom: 1px solid #d8d8d8;
-		}
-
-		& td {
-			padding: 0.5rem;
-
-			font-size: 0.75rem;
-		}
-
-		& .rc-icon {
-			fill: var(--rc-color-primary-light);
-		}
-	}
-
 	& tbody {
 		& tr {
 			cursor: pointer;
@@ -37,23 +19,95 @@
 		}
 	}
 
+	& th,
 	& td {
+		vertical-align: middle;
 
-		padding: 0.25rem 0.5rem;
+		&.bold {
+			font-weight: 600;
+		}
+	}
 
-		vertical-align: middle;
-		letter-spacing: 0;
+	& th {
+		height: 0;
 
-		font-size: 0.875rem;
+		padding-top: 0;
+		padding-bottom: 0;
 
-		line-height: 1.25rem;
+		white-space: nowrap;
 
-		&.bold {
-			font-weight: 600;
+		color: transparent;
+
+		line-height: 0;
+
+		& > .rc-icon {
+			display: none;
 		}
 	}
+
+	& td {
+		padding: 0.25rem 0.5rem;
+
+		font-size: 0.75rem;
+		line-height: 1rem;
+	}
+}
+
+.table-wrapper {
+	position: relative;
+
+	height: 100%;
+}
+
+.table-content-wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+}
+
+.table-content {
+	display: flex;
+	flex-direction: column;
+
+	min-height: 0;
+	flex-grow: 1;
+}
+
+.table-scroll {
+	overflow: auto;
+
+	min-height: 0;
+
+	margin-top: 2rem;
+
+	border-top: 1px solid #d8d8d8;
+	flex-grow: 1;
+}
+
+.table-fake-th {
+	position: absolute;
+	top: 0;
+
+	padding: 0.5rem;
+
+	text-align: left;
+
+	color: var(--rc-color-primary-light);
+
+	font-size: 0.75rem;
+	font-weight: 400;
+	line-height: 1rem;
+
+	& .rc-icon {
+		fill: var(--rc-color-primary-light);
+	}
 }
 
-.tr-dummy {
+.table-tr-dummy {
 	height: 1rem;
 }
diff --git a/packages/rocketchat-ui/client/components/table.html b/packages/rocketchat-ui/client/components/table.html
index 1c0282d55b405..a3a18f66acc70 100644
--- a/packages/rocketchat-ui/client/components/table.html
+++ b/packages/rocketchat-ui/client/components/table.html
@@ -1,5 +1,13 @@
 <template name="table">
-	<table class="rc-table {{#if fixed}}rc-table--fixed{{/if}}">
-			{{> Template.contentBlock}}
-	</table>
+	<div class="table-wrapper">
+		<div class="table-content-wrapper">
+			<div class="table-content">
+				<div class="table-scroll">
+					<table class="rc-table {{#if fixed}}rc-table--fixed{{/if}}">
+							{{> Template.contentBlock}}
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
index 8e706ec8b6bff..5342cec8206fd 100644
--- a/packages/rocketchat-ui/client/components/table.js
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -1,4 +1,7 @@
 Template.table.onRendered(function() {
-	const dummyTr = '<tr class="tr-dummy"></tr>';
+	const dummyTr = '<tr class="table-tr-dummy"></tr>';
 	this.$('tbody').prepend(dummyTr).append(dummyTr);
+	this.$('th').each(function() {
+		$(this).append(`<div class="table-fake-th">${ $(this).html() }</div>`);
+	});
 });
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index f6b45aeeec629..3d12d435ad855 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -21,12 +21,12 @@
 		{{/header}}
 		<div class="rc-directory-content">
 			{{#if $eq searchType 'channels'}}
-				{{#table fixed='true' }}
+				{{#table fixed='true'}}
 					<thead>
 						<tr>
-							<td class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</td>
-							<td class="rc-directory-td--users">{{_ "Users"}}</td>
-							<td class="js-sort rc-directory-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</td>
+							<th class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</th>
+							<th class="rc-directory-td--users">{{_ "Users"}}</th>
+							<th class="js-sort rc-directory-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -56,18 +56,18 @@
 				{{/table}}
 			{{/if}}
 			{{#if $eq searchType 'users'}}
-				<table class="rc-table">
-					<thead class="rc-table-head">
-						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">{{_ "Name"}} {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="username">{{_ "Username"}} {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon="sort" }}</td>
+				{{#table}}
+					<thead>
+						<tr>
+							<th class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon="sort" }}</th>
+							<th class="js-sort" data-sort="username">{{_ "Username"}} {{> icon icon="sort" }}</th>
+							<th class="js-sort" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon="sort" }}</th>
 						</tr>
 					</thead>
-					<tbody class="rc-table-body">
+					<tbody>
 						{{#each searchResults}}
-							<tr class="rc-table-tr" data-name="{{name}}">
-								<td class="rc-table-td rc-table-td--username">
+							<tr data-name="{{name}}">
+								<td>
 									<div class="rc-directory-channel-wrapper">
 										<div class="rc-directory-channel-avatar">{{> avatar username=username}}</div>
 										<div class="rc-directory-channel-info">
@@ -77,14 +77,14 @@
 										</div>
 									</div>
 								</td>
-								<td class="rc-table-td rc-table-td--name">{{name}}</td>
-								<td class="rc-table-td rc-table-td--createdAt">
+								<td>{{name}}</td>
+								<td>
 									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
 								</td>
 							</tr>
 						{{/each}}
 					</tbody>
-				</table>
+				{{/table}}
 			{{/if}}
 		</div>
 	</section>

From 1f05bc27e012b3efb035b89c43a9c9b2361b9f67 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Wed, 6 Jun 2018 19:31:58 -0300
Subject: [PATCH 03/22] tabs component

---
 .../imports/components/modal/directory.css    | 21 +++------------
 .../client/imports/components/tabs.css        | 27 +++++++++++++++++++
 packages/rocketchat-theme/client/main.css     |  5 ++--
 .../rocketchat-ui/client/components/tabs.html |  7 +++++
 .../rocketchat-ui/client/components/tabs.js   | 18 +++++++++++++
 .../client/views/app/directory.html           | 15 +++--------
 .../client/views/app/directory.js             | 21 ++++++++++++++-
 packages/rocketchat-ui/package.js             |  3 +++
 8 files changed, 84 insertions(+), 33 deletions(-)
 create mode 100644 packages/rocketchat-theme/client/imports/components/tabs.css
 create mode 100644 packages/rocketchat-ui/client/components/tabs.html
 create mode 100644 packages/rocketchat-ui/client/components/tabs.js

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index cb20ac749ce99..060ceb38f64ee 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -6,24 +6,9 @@
 		display: flex;
 	}
 
-
-	/* TODO: -plus and -search should be "globals" */
-	&-plus {
-		width: 36px;
-		min-width: 36px;
-		height: 36px;
-		min-height: 36px;
-		padding: 0;
-	}
-
 	&-search {
-		max-width: 260px;
-	}
-
-	&-selector,
-	&-search,
-	&-plus {
-		margin: 0 0.5rem;
+		width: 100%;
+		padding: 0 0.5rem;
 	}
 }
 
@@ -98,7 +83,9 @@
 }
 
 .rc-directory-content {
+	display: flex;
 	overflow-x: auto;
+	flex-direction: column;
 	flex: 1 1 100%;
 
 	height: 100vh;
diff --git a/packages/rocketchat-theme/client/imports/components/tabs.css b/packages/rocketchat-theme/client/imports/components/tabs.css
new file mode 100644
index 0000000000000..437953d88f5e3
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/components/tabs.css
@@ -0,0 +1,27 @@
+.tabs {
+	display: flex;
+
+	width: 100%;
+
+	margin: 0 -1rem 0.5rem;
+	padding: 0 0.5rem;
+
+	border-bottom: 1px solid rgba(216,216,216, 0.2);
+}
+
+.tab {
+	margin: 0 1rem;
+	padding: 1rem 0;
+
+	cursor: pointer;
+
+	color: var(--rc-color-primary-light);
+
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+
+	&.active {
+		color: var(--rc-color-button-primary);
+		border-bottom: 1px solid var(--rc-color-button-primary);
+	}
+}
diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css
index 4ac78a1175b07..e5b9b30580bca 100644
--- a/packages/rocketchat-theme/client/main.css
+++ b/packages/rocketchat-theme/client/main.css
@@ -45,14 +45,13 @@
 @import 'imports/components/emojiPicker.css';
 @import 'imports/components/table.css';
 @import 'imports/components/file-list.css';
-
-
-
+@import 'imports/components/tabs.css';
 
 /* Modal */
 @import 'imports/components/modal/full-modal.css';
 @import 'imports/components/modal/create-channel.css';
 @import 'imports/components/modal/directory.css';
+
 /* User Info */
 @import 'imports/components/userInfo.css';
 
diff --git a/packages/rocketchat-ui/client/components/tabs.html b/packages/rocketchat-ui/client/components/tabs.html
new file mode 100644
index 0000000000000..dfaa4bf593ff7
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabs.html
@@ -0,0 +1,7 @@
+<template name="tabs">
+	<div class="tabs">
+		{{#each tabs}}
+			<div class="tab" data-value={{value}}>{{label}}</div>
+		{{/each}}
+	</div>
+</template>
diff --git a/packages/rocketchat-ui/client/components/tabs.js b/packages/rocketchat-ui/client/components/tabs.js
new file mode 100644
index 0000000000000..32818c2face48
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabs.js
@@ -0,0 +1,18 @@
+Template.tabs.onRendered(function() {
+	this.$('.tab').first().addClass('active');
+	this.data.tabs.onChange(this.data.tabs.tabs[0].value);
+});
+
+Template.tabs.events({
+	'click .tab'(e) {
+		$('.tab').removeClass('active');
+		$(e.currentTarget).addClass('active');
+		Template.instance().data.tabs.onChange($(e.currentTarget).data('value'));
+	}
+});
+
+Template.tabs.helpers({
+	tabs() {
+		return Template.instance().data.tabs.tabs.filter(tab => tab.condition ? tab.condition() : tab);
+	}
+});
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 3d12d435ad855..406c5aa6cdfeb 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -1,11 +1,8 @@
 <template name="directory">
 	<section class="rc-directory">
-		{{# header sectionName="Directory" hideHelp=true}}
-		<div class="rc-directory-header">
-		<select class="rc-input__element rc-directory-selector js-typeSelector" name="type">
-				<option value="channels">{{_ "Channels"}}</option>
-				<option value="users">{{_ "Users"}}</option>
-			</select>
+		{{> header sectionName="Directory" hideHelp=true}}
+		<div class="rc-directory-content">
+			{{>tabs tabs=tabsData}}
 			<div class="rc-input rc-input--small rc-directory-search">
 				<label class="rc-input__label">
 					<div class="rc-input__wrapper">
@@ -14,12 +11,6 @@
 					</div>
 				</label>
 			</div>
-			{{#if createChannelOrGroup}}
-				<button class="rc-button rc-button--small rc-button--primary rc-directory-plus">{{> icon icon="plus" }}</button>
-			{{/if}}
-		</div>
-		{{/header}}
-		<div class="rc-directory-content">
 			{{#if $eq searchType 'channels'}}
 				{{#table fixed='true'}}
 					<thead>
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index e73f5083069f3..fcc1e0a88073e 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -52,6 +52,26 @@ Template.directory.helpers({
 	},
 	createChannelOrGroup() {
 		return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
+	},
+	tabsData() {
+		const searchType = Template.instance().searchType;
+		return {
+			tabs: [
+				{
+					label: t('Channels'),
+					value: 'channels',
+					condition() { return true; }
+				},
+				{
+					label: t('Users'),
+					value: 'users',
+					condition() { return true; }
+				}
+			],
+			onChange(value) {
+				searchType.set(value);
+			}
+		};
 	}
 });
 
@@ -89,7 +109,6 @@ Template.directory.events({
 		}
 	},
 	'click .js-sort'(e, t) {
-
 		const el = e.currentTarget;
 		const type = el.dataset.sort;
 
diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js
index 8846bce2ef934..cc20e61b0f995 100644
--- a/packages/rocketchat-ui/package.js
+++ b/packages/rocketchat-ui/package.js
@@ -127,6 +127,9 @@ Package.onUse(function(api) {
 	api.addFiles('client/components/table.html', 'client');
 	api.addFiles('client/components/table.js', 'client');
 
+	api.addFiles('client/components/tabs.html', 'client');
+	api.addFiles('client/components/tabs.js', 'client');
+
 	api.addFiles('client/components/popupList.html', 'client');
 	api.addFiles('client/components/popupList.js', 'client');
 

From f7375a9b5aea1e42adf313e29b40ba001cd020c7 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 7 Jun 2018 15:02:22 -0300
Subject: [PATCH 04/22] change directory header paddings

---
 .../imports/components/modal/directory.css    | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 060ceb38f64ee..24cb87456f4a1 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -2,18 +2,30 @@
 	display: flex;
 	flex-direction: column;
 
-	&-header {
-		display: flex;
-	}
+	padding: 0 1.5rem;
 
 	&-search {
 		width: 100%;
 		padding: 0 0.5rem;
+
+		& .rc-icon {
+			width: 0.875rem;
+		}
 	}
-}
 
-.rc-directory-header .rc-input__wrapper {
-	padding: 0;
+	& .rc-header {
+		padding: 1.25rem 0.5rem 0.75rem;
+
+		&__wrap {
+
+			padding: 0.75rem 0;
+			box-shadow: none;
+		}
+
+		&__block {
+			font-size: 1.375rem;
+		}
+	}
 }
 
 .rc-directory-channel {

From d5435d2b0c6642b66104d27d2b64c9353a2669a0 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 7 Jun 2018 15:47:05 -0300
Subject: [PATCH 05/22] add onItemClick to the table component

---
 .../rocketchat-ui/client/components/table.js  | 15 ++++--
 .../client/views/app/directory.html           | 34 ++++++++++---
 .../client/views/app/directory.js             | 49 +++++++++----------
 3 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
index 5342cec8206fd..7fcee04174f39 100644
--- a/packages/rocketchat-ui/client/components/table.js
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -1,7 +1,16 @@
 Template.table.onRendered(function() {
 	const dummyTr = '<tr class="table-tr-dummy"></tr>';
 	this.$('tbody').prepend(dummyTr).append(dummyTr);
-	this.$('th').each(function() {
-		$(this).append(`<div class="table-fake-th">${ $(this).html() }</div>`);
-	});
+});
+
+Template.table.events({
+	'click tbody tr'() {
+		const onItemClick = Template.instance().data.onItemClick;
+		if (onItemClick) {
+			onItemClick(this);
+			return;
+		}
+
+		return false;
+	}
 });
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 406c5aa6cdfeb..964bc7ff7b0e3 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -12,12 +12,21 @@
 				</label>
 			</div>
 			{{#if $eq searchType 'channels'}}
-				{{#table fixed='true'}}
+				{{#table fixed='true' onItemClick=onTableItemClick}}
 					<thead>
 						<tr>
-							<th class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</th>
-							<th class="rc-directory-td--users">{{_ "Users"}}</th>
-							<th class="js-sort rc-directory-td--createdAt" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</th>
+							<th class="js-sort" data-sort="name">
+								{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
+							</th>
+							<th class="rc-directory-td--users">
+								{{_ "Users"}}
+								<div class="table-fake-th">{{_ "Users"}}</div>
+							</th>
+							<th class="js-sort rc-directory-td--createdAt" data-sort="createdAt">
+								{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}
+								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
+							</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -47,12 +56,21 @@
 				{{/table}}
 			{{/if}}
 			{{#if $eq searchType 'users'}}
-				{{#table}}
+				{{#table onItemClick=onTableItemClick}}
 					<thead>
 						<tr>
-							<th class="js-sort" data-sort="name">{{_ "Name"}} {{> icon icon="sort" }}</th>
-							<th class="js-sort" data-sort="username">{{_ "Username"}} {{> icon icon="sort" }}</th>
-							<th class="js-sort" data-sort="createdAt">{{_ "Created_at"}} {{> icon icon="sort" }}</th>
+							<th class="js-sort" data-sort="name">
+								{{_ "Name"}} {{> icon icon="sort" }}
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon="sort" }}</div>
+							</th>
+							<th class="js-sort" data-sort="username">
+								{{_ "Username"}} {{> icon icon="sort" }}
+								<div class="table-fake-th">{{_ "Username"}} {{> icon icon="sort" }}</div>
+							</th>
+							<th class="js-sort" data-sort="createdAt">
+								{{_ "Created_at"}} {{> icon icon="sort" }}
+								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon="sort" }}</div>
+							</th>
 						</tr>
 					</thead>
 					<tbody>
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index fcc1e0a88073e..c7b292e31c935 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -54,7 +54,12 @@ Template.directory.helpers({
 		return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
 	},
 	tabsData() {
-		const searchType = Template.instance().searchType;
+		const {
+			sortDirection,
+			searchType,
+			end,
+			page
+		} = Template.instance();
 		return {
 			tabs: [
 				{
@@ -69,9 +74,27 @@ Template.directory.helpers({
 				}
 			],
 			onChange(value) {
+				end.set(false);
+				sortDirection.set('asc');
+				page.set(0);
 				searchType.set(value);
 			}
 		};
+	},
+	onTableItemClick() {
+		const searchType = Template.instance().searchType;
+		let type;
+		let routeConfig;
+		return function(item) {
+			if (searchType.get() === 'channels') {
+				type = 'c';
+				routeConfig = {name: item.name};
+			} else {
+				type = 'd';
+				routeConfig = {name: item.username};
+			}
+			FlowRouter.go(RocketChat.roomTypes.getRouteLink(type, routeConfig));
+		};
 	}
 });
 
@@ -82,24 +105,6 @@ Template.directory.events({
 		t.page.set(0);
 		t.searchText.set(e.currentTarget.value);
 	},
-	'change .js-typeSelector'(e, t) {
-		t.end.set(false);
-		t.sortDirection.set('asc');
-		t.page.set(0);
-		t.searchType.set(e.currentTarget.value);
-	},
-	'click .rc-table-body .rc-table-tr'() {
-		let searchType;
-		let routeConfig;
-		if (Template.instance().searchType.get() === 'channels') {
-			searchType = 'c';
-			routeConfig = {name: this.name};
-		} else {
-			searchType = 'd';
-			routeConfig = {name: this.username};
-		}
-		FlowRouter.go(RocketChat.roomTypes.getRouteLink(searchType, routeConfig));
-	},
 	'scroll .rc-directory-content'({currentTarget}, instance) {
 		if (instance.loading || instance.end.get()) {
 			return;
@@ -112,9 +117,6 @@ Template.directory.events({
 		const el = e.currentTarget;
 		const type = el.dataset.sort;
 
-		$('.js-sort').removeClass('rc-table-td--bold');
-		$(el).addClass('rc-table-td--bold');
-
 		t.end.set(false);
 		t.page.set(0);
 
@@ -125,9 +127,6 @@ Template.directory.events({
 
 		t.searchSortBy.set(type);
 		t.sortDirection.set('asc');
-	},
-	'click .rc-directory-plus'() {
-		FlowRouter.go('create-channel');
 	}
 });
 

From 20fa94a3c87e7a618e485c358738e434cffc1e4b Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 15:00:23 -0300
Subject: [PATCH 06/22] remove table horizontal padding and add animation to
 tabs

---
 .../client/imports/components/header.css        |  8 ++------
 .../imports/components/modal/directory.css      |  2 +-
 .../client/imports/components/table.css         |  4 ++--
 .../client/imports/components/tabs.css          | 17 ++++++++++++-----
 .../rocketchat-ui/client/components/tabs.html   |  8 +++++---
 5 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/header.css b/packages/rocketchat-theme/client/imports/components/header.css
index b05a45e848cdc..27da6f1fb5593 100644
--- a/packages/rocketchat-theme/client/imports/components/header.css
+++ b/packages/rocketchat-theme/client/imports/components/header.css
@@ -2,17 +2,14 @@
 	padding: 0 0.5rem;
 
 	&__wrap {
-
 		z-index: 2;
 
 		display: flex;
 
-		margin: 0 -0.5rem;
-
-
-		display: flex;
 		flex: 0 0 auto;
 
+		margin: 0 -0.5rem;
+
 		padding: var(--header-padding);
 
 		white-space: nowrap;
@@ -34,7 +31,6 @@
 	&__block {
 		display: flex;
 
-		margin: 0 0.5rem;
 		align-items: center;
 	}
 
diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 24cb87456f4a1..adcdbae9aef09 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -6,7 +6,6 @@
 
 	&-search {
 		width: 100%;
-		padding: 0 0.5rem;
 
 		& .rc-icon {
 			width: 0.875rem;
@@ -19,6 +18,7 @@
 		&__wrap {
 
 			padding: 0.75rem 0;
+
 			box-shadow: none;
 		}
 
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 2570714334626..62f6c34af0f66 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -46,7 +46,7 @@
 	}
 
 	& td {
-		padding: 0.25rem 0.5rem;
+		padding: 0.25rem 0;
 
 		font-size: 0.75rem;
 		line-height: 1rem;
@@ -93,7 +93,7 @@
 	position: absolute;
 	top: 0;
 
-	padding: 0.5rem;
+	padding: 0.5rem 0;
 
 	text-align: left;
 
diff --git a/packages/rocketchat-theme/client/imports/components/tabs.css b/packages/rocketchat-theme/client/imports/components/tabs.css
index 437953d88f5e3..1276b8aaae668 100644
--- a/packages/rocketchat-theme/client/imports/components/tabs.css
+++ b/packages/rocketchat-theme/client/imports/components/tabs.css
@@ -1,12 +1,15 @@
 .tabs {
+	margin-bottom: 0.5rem;
+
+	border-bottom: 1px solid rgba(216, 216, 216, 0.2);
+}
+
+.tabs-wrapper {
 	display: flex;
 
 	width: 100%;
 
-	margin: 0 -1rem 0.5rem;
-	padding: 0 0.5rem;
-
-	border-bottom: 1px solid rgba(216,216,216, 0.2);
+	margin: 0 -1rem;
 }
 
 .tab {
@@ -15,13 +18,17 @@
 
 	cursor: pointer;
 
+	transition: all 0.3s;
+
 	color: var(--rc-color-primary-light);
 
+	border-bottom: 1px solid transparent;
+
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 
 	&.active {
 		color: var(--rc-color-button-primary);
-		border-bottom: 1px solid var(--rc-color-button-primary);
+		border-bottom-color: var(--rc-color-button-primary);
 	}
 }
diff --git a/packages/rocketchat-ui/client/components/tabs.html b/packages/rocketchat-ui/client/components/tabs.html
index dfaa4bf593ff7..a537f97caa752 100644
--- a/packages/rocketchat-ui/client/components/tabs.html
+++ b/packages/rocketchat-ui/client/components/tabs.html
@@ -1,7 +1,9 @@
 <template name="tabs">
 	<div class="tabs">
-		{{#each tabs}}
-			<div class="tab" data-value={{value}}>{{label}}</div>
-		{{/each}}
+		<div class="tabs-wrapper">
+			{{#each tabs}}
+				<div class="tab" data-value={{value}}>{{label}}</div>
+			{{/each}}
+		</div>
 	</div>
 </template>

From 72ec73bdbfd301317fbd7703a1136a3c9627549f Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 15:02:16 -0300
Subject: [PATCH 07/22] improve readability on table and directory methods

---
 packages/rocketchat-ui/client/components/table.js    | 6 +-----
 packages/rocketchat-ui/client/views/app/directory.js | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
index 7fcee04174f39..99d3ee5d37313 100644
--- a/packages/rocketchat-ui/client/components/table.js
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -6,11 +6,7 @@ Template.table.onRendered(function() {
 Template.table.events({
 	'click tbody tr'() {
 		const onItemClick = Template.instance().data.onItemClick;
-		if (onItemClick) {
-			onItemClick(this);
-			return;
-		}
 
-		return false;
+		return onItemClick && onItemClick(this);
 	}
 });
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index c7b292e31c935..3cded50221b4c 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -82,7 +82,7 @@ Template.directory.helpers({
 		};
 	},
 	onTableItemClick() {
-		const searchType = Template.instance().searchType;
+		const { searchType } = Template.instance();
 		let type;
 		let routeConfig;
 		return function(item) {

From 803ea79ace195eb1e4668d6838accd6149a268af Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 15:05:04 -0300
Subject: [PATCH 08/22] show only channel/username column when access directory
 using mobile

---
 .../client/imports/components/modal/directory.css          | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index adcdbae9aef09..084c3a4d32bdc 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -122,8 +122,11 @@
 }
 
 @media (width <= 500px) {
-	.rc-directory-content thead {
-		display: none;
+	.rc-directory-content {
+		& thead,
+		& td:not(:first-child) {
+			display: none;
+		}
 	}
 
 	.rc-directory {

From 15da8ab7c0816a838f7529f92907fffb8e839cf5 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 15:52:20 -0300
Subject: [PATCH 09/22] change sort icons

---
 .../imports/components/modal/directory.css    | 18 +++++++++++++++
 .../rocketchat-ui-master/public/icons.svg     |  8 ++-----
 .../client/views/app/directory.html           | 22 +++++++------------
 .../client/views/app/directory.js             |  3 +++
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 084c3a4d32bdc..17da0cebb0e2d 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -104,6 +104,24 @@
 
 	& .js-sort {
 		cursor: pointer;
+
+		&.is-sorting .table-fake-th .rc-icon {
+			opacity: 1;
+		}
+	}
+
+	& .table-fake-th {
+		&:hover .rc-icon {
+			opacity: 1;
+		}
+
+		& .rc-icon {
+			transition: opacity 0.3s;
+
+			opacity: 0;
+
+			font-size: 1rem;
+		}
 	}
 }
 
diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index 368209622606a..f0299fa6c5ff5 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -448,12 +448,8 @@
     <symbol id="icon-loading" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling">
         <circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle>
     </symbol>
-    <symbol id="icon-sort-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-        <path d="M287.968 288H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 322.528 316.45 288 287.968 288zM160 448L32 320h256L160 448z" />
-    </symbol>
-    <symbol id="icon-sort-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-        <path d="M32.032 224h255.93c28.425 0 42.767-34.488 22.627-54.627l-127.962-128c-12.496-12.496-32.758-12.497-45.255 0l-127.968 128C-10.695 189.472 3.55 224 32.032 224zM160 64l128 128H32L160 64z" />
-    </symbol>
+    <symbol id="icon-sort-down" viewBox="0 0 16 16"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path stroke="#CBCED1" d="M10.657 6L8 3.343 5.343 6"/><path stroke="#9EA2A8" d="M10.657 10L8 12.657 5.343 10"/></g></symbol>
+    <symbol id="icon-sort-up" viewBox="0 0 16 16"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path stroke="#CBCED1" d="M10.657 10L8 12.657 5.343 10"/><path stroke="#9EA2A8" d="M10.657 6L8 3.343 5.343 6"/></g></symbol>
     <symbol id="icon-ban" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
         <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zM103.265 408.735c-80.622-80.622-84.149-208.957-10.9-293.743l304.644 304.643c-84.804 73.264-213.138 69.706-293.744-10.9zm316.37-11.727L114.992 92.365c84.804-73.263 213.137-69.705 293.743 10.9 80.622 80.621 84.149 208.957 10.9 293.743z" />
     </symbol>
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 964bc7ff7b0e3..eea7aa97af220 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -15,16 +15,13 @@
 				{{#table fixed='true' onItemClick=onTableItemClick}}
 					<thead>
 						<tr>
-							<th class="js-sort" data-sort="name">
-								{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}
+							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
 								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name')}}</div>
 							</th>
 							<th class="rc-directory-td--users">
-								{{_ "Users"}}
 								<div class="table-fake-th">{{_ "Users"}}</div>
 							</th>
-							<th class="js-sort rc-directory-td--createdAt" data-sort="createdAt">
-								{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}
+							<th class="js-sort rc-directory-td--createdAt {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
 								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
 							</th>
 						</tr>
@@ -59,17 +56,14 @@
 				{{#table onItemClick=onTableItemClick}}
 					<thead>
 						<tr>
-							<th class="js-sort" data-sort="name">
-								{{_ "Name"}} {{> icon icon="sort" }}
-								<div class="table-fake-th">{{_ "Name"}} {{> icon icon="sort" }}</div>
+							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name') }}</div>
 							</th>
-							<th class="js-sort" data-sort="username">
-								{{_ "Username"}} {{> icon icon="sort" }}
-								<div class="table-fake-th">{{_ "Username"}} {{> icon icon="sort" }}</div>
+							<th class="js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
+								<div class="table-fake-th">{{_ "Username"}} {{> icon icon=(sortIcon 'username') }}</div>
 							</th>
-							<th class="js-sort" data-sort="createdAt">
-								{{_ "Created_at"}} {{> icon icon="sort" }}
-								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon="sort" }}</div>
+							<th class="js-sort {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
 							</th>
 						</tr>
 					</thead>
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 3cded50221b4c..8d890f35e59ad 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -50,6 +50,9 @@ Template.directory.helpers({
 
 		return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down';
 	},
+	searchSortBy(key) {
+		return Template.instance().searchSortBy.get() === key;
+	},
 	createChannelOrGroup() {
 		return RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']);
 	},

From 1f04678b54b09a3a7d74085957c41536032099f8 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 15:57:10 -0300
Subject: [PATCH 10/22] debounce directory search

---
 packages/rocketchat-ui/client/views/app/directory.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 8d890f35e59ad..4633fab421285 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -1,4 +1,5 @@
 import moment from 'moment';
+import _ from 'underscore';
 
 function timeAgo(time) {
 	const now = new Date();
@@ -102,12 +103,12 @@ Template.directory.helpers({
 });
 
 Template.directory.events({
-	'input .js-search'(e, t) {
+	'input .js-search': _.debounce((e, t) => {
 		t.end.set(false);
 		t.sortDirection.set('asc');
 		t.page.set(0);
 		t.searchText.set(e.currentTarget.value);
-	},
+	}, 300),
 	'scroll .rc-directory-content'({currentTarget}, instance) {
 		if (instance.loading || instance.end.get()) {
 			return;

From b98547872cc054d4bf906516ab0e0c29f12bb82f Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 16:57:13 -0300
Subject: [PATCH 11/22] fix active tab

---
 packages/rocketchat-ui/client/components/tabs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rocketchat-ui/client/components/tabs.js b/packages/rocketchat-ui/client/components/tabs.js
index 32818c2face48..769eeaf462381 100644
--- a/packages/rocketchat-ui/client/components/tabs.js
+++ b/packages/rocketchat-ui/client/components/tabs.js
@@ -5,7 +5,7 @@ Template.tabs.onRendered(function() {
 
 Template.tabs.events({
 	'click .tab'(e) {
-		$('.tab').removeClass('active');
+		$(e.currentTarget).siblings('.tab').removeClass('active');
 		$(e.currentTarget).addClass('active');
 		Template.instance().data.tabs.onChange($(e.currentTarget).data('value'));
 	}

From 785f3dbff6e622c8e24323e097435908a300a117 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 18:52:50 -0300
Subject: [PATCH 12/22] put directory table header back on mobile

---
 .../client/imports/components/modal/directory.css             | 2 +-
 packages/rocketchat-ui/client/views/app/directory.html        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 17da0cebb0e2d..1d89735c8da51 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -141,7 +141,7 @@
 
 @media (width <= 500px) {
 	.rc-directory-content {
-		& thead,
+		& th:not(:first-child),
 		& td:not(:first-child) {
 			display: none;
 		}
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index eea7aa97af220..50d3fee2eb7a7 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -62,7 +62,7 @@
 							<th class="js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
 								<div class="table-fake-th">{{_ "Username"}} {{> icon icon=(sortIcon 'username') }}</div>
 							</th>
-							<th class="js-sort {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+							<th class="js-sort rc-directory-td--createdAt {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
 								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
 							</th>
 						</tr>
@@ -81,7 +81,7 @@
 									</div>
 								</td>
 								<td>{{name}}</td>
-								<td>
+								<td class="rc-directory-td--createdAt">
 									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
 								</td>
 							</tr>

From 78a20e38b3c81d311cf004f269024ff2e7ff7b70 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 19:16:14 -0300
Subject: [PATCH 13/22] directory table loading indicator

---
 packages/rocketchat-ui/client/views/app/directory.html | 10 ++++++++++
 packages/rocketchat-ui/client/views/app/directory.js   |  8 ++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 50d3fee2eb7a7..3a983261a6917 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -49,6 +49,11 @@
 								</td>
 							</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr>
+									<td colspan="3" style="position: relative;">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
 				{{/table}}
 			{{/if}}
@@ -86,6 +91,11 @@
 								</td>
 							</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr>
+									<td colspan="3" style="position: relative;">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
 				{{/table}}
 			{{/if}}
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 4633fab421285..2b975f17c1dc8 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -99,6 +99,10 @@ Template.directory.helpers({
 			}
 			FlowRouter.go(RocketChat.roomTypes.getRouteLink(type, routeConfig));
 		};
+	},
+	isLoading() {
+		console.log('loading', Template.instance().isLoading.get())
+		return Template.instance().isLoading.get();
 	}
 });
 
@@ -154,8 +158,10 @@ Template.directory.onRendered(function() {
 			return;
 		}
 		this.loading = true;
+		this.isLoading.set(true);
 		directorySearch(searchConfig, (result) => {
 			this.loading = false;
+			this.isLoading.set(false);
 			if (!result) {
 				this.end.set(true);
 			}
@@ -181,6 +187,8 @@ Template.directory.onCreated(function() {
 	this.end = new ReactiveVar(false);
 
 	this.results = new ReactiveVar([]);
+
+	this.isLoading = new ReactiveVar(false);
 });
 
 Template.directory.onRendered(function() {

From 06e44df5710e8bd014f78d18000bce6e4dc943a7 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 12 Jun 2018 19:35:14 -0300
Subject: [PATCH 14/22] better way to handle active state on tabs

---
 packages/rocketchat-ui/client/components/tabs.html |  2 +-
 packages/rocketchat-ui/client/components/tabs.js   | 14 ++++++++------
 .../rocketchat-ui/client/views/app/directory.js    |  4 ++--
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/rocketchat-ui/client/components/tabs.html b/packages/rocketchat-ui/client/components/tabs.html
index a537f97caa752..37ec16ef2270a 100644
--- a/packages/rocketchat-ui/client/components/tabs.html
+++ b/packages/rocketchat-ui/client/components/tabs.html
@@ -2,7 +2,7 @@
 	<div class="tabs">
 		<div class="tabs-wrapper">
 			{{#each tabs}}
-				<div class="tab" data-value={{value}}>{{label}}</div>
+				<div class="tab {{#if isActive value}}active{{/if}}" data-value={{value}}>{{label}}</div>
 			{{/each}}
 		</div>
 	</div>
diff --git a/packages/rocketchat-ui/client/components/tabs.js b/packages/rocketchat-ui/client/components/tabs.js
index 769eeaf462381..2beb1dcd7312b 100644
--- a/packages/rocketchat-ui/client/components/tabs.js
+++ b/packages/rocketchat-ui/client/components/tabs.js
@@ -1,18 +1,20 @@
-Template.tabs.onRendered(function() {
-	this.$('.tab').first().addClass('active');
-	this.data.tabs.onChange(this.data.tabs.tabs[0].value);
+Template.tabs.onCreated(function() {
+	this.activeTab = new ReactiveVar(this.data.tabs.tabs.find(tab => tab.active).value);
 });
 
 Template.tabs.events({
 	'click .tab'(e) {
-		$(e.currentTarget).siblings('.tab').removeClass('active');
-		$(e.currentTarget).addClass('active');
-		Template.instance().data.tabs.onChange($(e.currentTarget).data('value'));
+		const value = e.currentTarget.dataset.value;
+		Template.instance().activeTab.set(value);
+		Template.instance().data.tabs.onChange(value);
 	}
 });
 
 Template.tabs.helpers({
 	tabs() {
 		return Template.instance().data.tabs.tabs.filter(tab => tab.condition ? tab.condition() : tab);
+	},
+	isActive(value) {
+		return Template.instance().activeTab.get() === value;
 	}
 });
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 2b975f17c1dc8..744bd69167553 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -69,7 +69,8 @@ Template.directory.helpers({
 				{
 					label: t('Channels'),
 					value: 'channels',
-					condition() { return true; }
+					condition() { return true; },
+					active: true
 				},
 				{
 					label: t('Users'),
@@ -101,7 +102,6 @@ Template.directory.helpers({
 		};
 	},
 	isLoading() {
-		console.log('loading', Template.instance().isLoading.get())
 		return Template.instance().isLoading.get();
 	}
 });

From 39b7a4853c40b67c5ccdd919ddbd7bc3720a2938 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Wed, 13 Jun 2018 20:12:15 -0300
Subject: [PATCH 15/22] table methods: onResize, onScroll, onSort

---
 package-lock.json                             | 57 +++++++++++++--
 .../rocketchat-ui/client/components/table.js  | 18 ++++-
 .../client/views/app/directory.html           |  2 +-
 .../client/views/app/directory.js             | 72 ++++++++++---------
 4 files changed, 108 insertions(+), 41 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b93756bcc215f..4bccc97faab10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3364,7 +3364,7 @@
 		},
 		"compression": {
 			"version": "1.5.2",
-			"resolved": "http://registry.npmjs.org/compression/-/compression-1.5.2.tgz",
+			"resolved": "https://registry.npmjs.org/compression/-/compression-1.5.2.tgz",
 			"integrity": "sha1-sDuNhub4rSloPLqN+R3cb/x3s5U=",
 			"requires": {
 				"accepts": "1.2.13",
@@ -4473,7 +4473,6 @@
 			"version": "0.1.7",
 			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
 			"integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
-			"optional": true,
 			"requires": {
 				"prr": "1.0.1"
 			}
@@ -6463,6 +6462,11 @@
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
 			"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
 		},
+		"grapheme-splitter": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.2.tgz",
+			"integrity": "sha1-Y56dwb8GWJLGQ94x2qJ89YsQaOI="
+		},
 		"gridfs-stream": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/gridfs-stream/-/gridfs-stream-1.1.1.tgz",
@@ -9071,6 +9075,11 @@
 				}
 			}
 		},
+		"merge": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz",
+			"integrity": "sha1-dTHjnUlJwoGma4xabgJl6LBYlNo="
+		},
 		"merge-descriptors": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -9468,8 +9477,7 @@
 		"natives": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/natives/-/natives-1.1.4.tgz",
-			"integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg==",
-			"optional": true
+			"integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg=="
 		},
 		"natural-compare": {
 			"version": "1.4.0",
@@ -11201,8 +11209,7 @@
 		"prr": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-			"optional": true
+			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
 		},
 		"pseudomap": {
 			"version": "1.0.2",
@@ -11263,6 +11270,11 @@
 			"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
 			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
 		},
+		"querystringify": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-1.0.0.tgz",
+			"integrity": "sha1-YoYkIRLFtxL6ZU5SZlK/ahP/Bcs="
+		},
 		"quick-lru": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz",
@@ -11725,6 +11737,11 @@
 				"resolve-from": "1.0.1"
 			}
 		},
+		"requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+		},
 		"resolve": {
 			"version": "1.7.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
@@ -13913,6 +13930,15 @@
 			"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
 			"integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo="
 		},
+		"url-parse": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.2.0.tgz",
+			"integrity": "sha512-DT1XbYAfmQP65M/mE6OALxmXzZ/z1+e5zk2TcSKe/KiYbNGZxgtttzC0mR/sjopbpOXcbniq7eIKmocJnUWlEw==",
+			"requires": {
+				"querystringify": "1.0.0",
+				"requires-port": "1.0.0"
+			}
+		},
 		"url-parse-lax": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
@@ -14099,6 +14125,25 @@
 			"resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.5.tgz",
 			"integrity": "sha1-eWkVhNmGB/UHC9O3CkDmuyLkAes="
 		},
+		"webdav": {
+			"version": "1.5.2",
+			"resolved": "https://registry.npmjs.org/webdav/-/webdav-1.5.2.tgz",
+			"integrity": "sha512-x81G3ahrTwM8FIkMkT93YbEQM6/BoN7O7z6WkHHVX1ZkN0OA/wzSrUtpB2LMVk77hsuw1u1hRqkKee/rG2hErQ==",
+			"requires": {
+				"merge": "1.2.0",
+				"node-fetch": "2.0.0",
+				"url-join": "4.0.0",
+				"url-parse": "1.2.0",
+				"xml2js": "0.4.19"
+			},
+			"dependencies": {
+				"node-fetch": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.0.0.tgz",
+					"integrity": "sha1-mCu6Q+zU8pIqKcwYamu7C7c/y6Y="
+				}
+			}
+		},
 		"webdriverio": {
 			"version": "4.12.0",
 			"resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-4.12.0.tgz",
diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
index 99d3ee5d37313..bf8660dc9b9cc 100644
--- a/packages/rocketchat-ui/client/components/table.js
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -1,12 +1,26 @@
+import _ from 'underscore';
+
 Template.table.onRendered(function() {
 	const dummyTr = '<tr class="table-tr-dummy"></tr>';
 	this.$('tbody').prepend(dummyTr).append(dummyTr);
+
+	const onResize = this.data.onResize;
+	onResize();
+	$(window).on('resize', onResize);
 });
 
 Template.table.events({
-	'click tbody tr'() {
-		const onItemClick = Template.instance().data.onItemClick;
+	'click tbody tr'(e, t) {
+		const onItemClick = t.data.onItemClick;
 
 		return onItemClick && onItemClick(this);
+	},
+	'scroll .table-scroll': _.debounce((e, t) => {
+		const onScroll = t.data.onScroll;
+
+		return onScroll && onScroll(e.currentTarget);
+	}, 300),
+	'click .js-sort'(e, t) {
+		t.data.onSort(e.currentTarget.dataset.sort);
 	}
 });
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 3a983261a6917..8140ca559a859 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -12,7 +12,7 @@
 				</label>
 			</div>
 			{{#if $eq searchType 'channels'}}
-				{{#table fixed='true' onItemClick=onTableItemClick}}
+				{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
 					<thead>
 						<tr>
 							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 744bd69167553..7ca48f2f016be 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -103,6 +103,40 @@ Template.directory.helpers({
 	},
 	isLoading() {
 		return Template.instance().isLoading.get();
+	},
+	onTableScroll() {
+		const instance = Template.instance();
+		if (instance.loading || instance.end.get()) {
+			return;
+		}
+		return function(currentTarget) {
+			if (currentTarget.offsetHeight + currentTarget.scrollTop >= currentTarget.scrollHeight - 100) {
+				return instance.page.set(instance.page.get() + 1);
+			}
+		};
+	},
+	onTableResize() {
+		const { limit } = Template.instance();
+
+		return function() {
+			limit.set(Math.ceil((this.$('.table-scroll').height() / 40) + 5));
+		};
+	},
+	onTableSort() {
+		const { end, page, sortDirection, searchSortBy } = Template.instance();
+
+		return function(type) {
+			end.set(false);
+			page.set(0);
+
+			if (searchSortBy.get() === type) {
+				sortDirection.set(sortDirection.get() === 'asc' ? 'desc' : 'asc');
+				return;
+			}
+
+			searchSortBy.set(type);
+			sortDirection.set('asc');
+		};
 	}
 });
 
@@ -112,39 +146,10 @@ Template.directory.events({
 		t.sortDirection.set('asc');
 		t.page.set(0);
 		t.searchText.set(e.currentTarget.value);
-	}, 300),
-	'scroll .rc-directory-content'({currentTarget}, instance) {
-		if (instance.loading || instance.end.get()) {
-			return;
-		}
-		if (currentTarget.offsetHeight + currentTarget.scrollTop >= currentTarget.scrollHeight - 100) {
-			return instance.page.set(instance.page.get() + 1);
-		}
-	},
-	'click .js-sort'(e, t) {
-		const el = e.currentTarget;
-		const type = el.dataset.sort;
-
-		t.end.set(false);
-		t.page.set(0);
-
-		if (t.searchSortBy.get() === type) {
-			t.sortDirection.set(t.sortDirection.get() === 'asc' ? 'desc' : 'asc');
-			return;
-		}
-
-		t.searchSortBy.set(type);
-		t.sortDirection.set('asc');
-	}
+	}, 300)
 });
 
 Template.directory.onRendered(function() {
-	this.resize = () => {
-		const height = this.$('.rc-directory-content').height();
-		this.limit.set(Math.ceil((height / 100) + 5));
-	};
-	this.resize();
-	$(window).on('resize', this.resize);
 	Tracker.autorun(() => {
 		const searchConfig = {
 			text: this.searchText.get(),
@@ -162,9 +167,12 @@ Template.directory.onRendered(function() {
 		directorySearch(searchConfig, (result) => {
 			this.loading = false;
 			this.isLoading.set(false);
-			if (!result) {
-				this.end.set(true);
+			this.end.set(!result);
+
+			if (!Array.isArray(result)) {
+				return;
 			}
+
 			if (this.page.get() > 0) {
 				return this.results.set([...this.results.get(), ...result]);
 			}

From eba61dc01811eadfd73dd975527b4395b63fc8b7 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 14 Jun 2018 15:46:51 -0300
Subject: [PATCH 16/22] fixed table results when change tabs

---
 packages/rocketchat-ui/client/components/table.js    | 6 ++++--
 packages/rocketchat-ui/client/views/app/directory.js | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/rocketchat-ui/client/components/table.js b/packages/rocketchat-ui/client/components/table.js
index bf8660dc9b9cc..63e4f284b83e7 100644
--- a/packages/rocketchat-ui/client/components/table.js
+++ b/packages/rocketchat-ui/client/components/table.js
@@ -5,8 +5,10 @@ Template.table.onRendered(function() {
 	this.$('tbody').prepend(dummyTr).append(dummyTr);
 
 	const onResize = this.data.onResize;
-	onResize();
-	$(window).on('resize', onResize);
+	if (onResize) {
+		onResize();
+		$(window).on('resize', onResize);
+	}
 });
 
 Template.table.events({
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 7ca48f2f016be..8bf53ee072d34 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -170,7 +170,7 @@ Template.directory.onRendered(function() {
 			this.end.set(!result);
 
 			if (!Array.isArray(result)) {
-				return;
+				result = [];
 			}
 
 			if (this.page.get() > 0) {

From 06a06717a0d6ab5172f2281bcda140c14b0d9dfc Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 14 Jun 2018 17:07:58 -0300
Subject: [PATCH 17/22] fix directory table sort

---
 packages/rocketchat-ui/client/views/app/directory.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 8140ca559a859..3fdc9779ed1aa 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -58,7 +58,7 @@
 				{{/table}}
 			{{/if}}
 			{{#if $eq searchType 'users'}}
-				{{#table onItemClick=onTableItemClick}}
+				{{#table onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
 					<thead>
 						<tr>
 							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">

From 3e8a048bcc3ece9a437661252889173356013562 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 14 Jun 2018 17:38:09 -0300
Subject: [PATCH 18/22] fix user table columns on directory

---
 .../client/imports/components/modal/directory.css          | 3 ++-
 packages/rocketchat-ui/client/views/app/directory.html     | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index 1d89735c8da51..e11ed5682be05 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -65,7 +65,8 @@
 		flex-grow: 1;
 	}
 
-	&-name {
+	&-name,
+	&-username {
 		overflow: hidden;
 
 		white-space: nowrap;
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 3fdc9779ed1aa..f3e5eee0cd435 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -62,10 +62,10 @@
 					<thead>
 						<tr>
 							<th class="js-sort {{#if searchSortBy 'name'}}is-sorting{{/if}}" data-sort="name">
-								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name') }}</div>
+								<div class="table-fake-th">{{_ "Username"}} {{> icon icon=(sortIcon 'username') }}</div>
 							</th>
 							<th class="js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
-								<div class="table-fake-th">{{_ "Username"}} {{> icon icon=(sortIcon 'username') }}</div>
+								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name') }}</div>
 							</th>
 							<th class="js-sort rc-directory-td--createdAt {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
 								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
@@ -80,7 +80,8 @@
 										<div class="rc-directory-channel-avatar">{{> avatar username=username}}</div>
 										<div class="rc-directory-channel-info">
 											<span class="rc-directory-channel-username">
-												{{>icon icon="at"}}{{username}}
+												{{>icon icon="at"}}
+												{{username}}
 											</span>
 										</div>
 									</div>

From ff256741e8b39f79d6c4b2646c9a452a03d6c7ca Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Sun, 17 Jun 2018 20:59:05 -0300
Subject: [PATCH 19/22] remove channel description on directory

---
 packages/rocketchat-ui/client/views/app/directory.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index f3e5eee0cd435..378afac75e8ec 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -37,9 +37,6 @@
 												{{>icon icon="hashtag"}}
 												{{name}}
 											</span>
-											{{#if description}}
-												<span class="rc-directory-channel-description">{{description}}</span>
-											{{/if}}
 										</div>
 									</div>
 								</td>

From d0e16de09c316455ff8c39e8ef8310ca4a3bcd7f Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 19 Jun 2018 14:39:48 -0300
Subject: [PATCH 20/22] remove @ from users and add topic from channel search
 on directory

---
 .../imports/components/modal/directory.css    |  7 ++-----
 .../client/imports/components/table.css       | 12 ++++++++++++
 .../client/views/app/directory.html           | 19 +++++++++----------
 .../client/views/app/directory.js             |  3 ++-
 server/methods/browseChannels.js              |  1 +
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/components/modal/directory.css b/packages/rocketchat-theme/client/imports/components/modal/directory.css
index e11ed5682be05..7d3a2a0bf2c6c 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/directory.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/directory.css
@@ -63,6 +63,8 @@
 
 		text-overflow: ellipsis;
 		flex-grow: 1;
+
+		margin: 0 3px;
 	}
 
 	&-name,
@@ -89,10 +91,6 @@
 
 		color: var(--rc-color-primary-light);
 	}
-
-	&-createdAt {
-		text-transform: capitalize;
-	}
 }
 
 .rc-directory-content {
@@ -126,7 +124,6 @@
 	}
 }
 
-.rc-directory-td--createdAt,
 .rc-directory-td--users {
 	overflow: hidden;
 
diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 62f6c34af0f66..6f1e79d8fd8f7 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -50,6 +50,10 @@
 
 		font-size: 0.75rem;
 		line-height: 1rem;
+
+		overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 	}
 }
 
@@ -111,3 +115,11 @@
 .table-tr-dummy {
 	height: 1rem;
 }
+
+.table-column-date {
+	overflow: hidden;
+	width: 120px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-transform: capitalize;
+}
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 378afac75e8ec..aa50e46dc3b9e 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -21,9 +21,12 @@
 							<th class="rc-directory-td--users">
 								<div class="table-fake-th">{{_ "Users"}}</div>
 							</th>
-							<th class="js-sort rc-directory-td--createdAt {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+							<th class="js-sort table-column-date {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
 								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
 							</th>
+							<th>
+								<div class="table-fake-th">{{_ "Topic"}}</div>
+							</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -40,10 +43,9 @@
 										</div>
 									</div>
 								</td>
-								<td class="rc-directory-td--users">{{users}}</td>
-								<td class="rc-directory-td--createdAt">
-									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
-								</td>
+								<td>{{users}}</td>
+								<td>{{createdAt}}</td>
+								<td>{{topic}}</td>
 							</tr>
 						{{/each}}
 						{{#if isLoading}}
@@ -64,7 +66,7 @@
 							<th class="js-sort {{#if searchSortBy 'username'}}is-sorting{{/if}}" data-sort="username">
 								<div class="table-fake-th">{{_ "Name"}} {{> icon icon=(sortIcon 'name') }}</div>
 							</th>
-							<th class="js-sort rc-directory-td--createdAt {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
+							<th class="js-sort table-column-date {{#if searchSortBy 'createdAt'}}is-sorting{{/if}}" data-sort="createdAt">
 								<div class="table-fake-th">{{_ "Created_at"}} {{> icon icon=(sortIcon 'createdAt') }}</div>
 							</th>
 						</tr>
@@ -77,16 +79,13 @@
 										<div class="rc-directory-channel-avatar">{{> avatar username=username}}</div>
 										<div class="rc-directory-channel-info">
 											<span class="rc-directory-channel-username">
-												{{>icon icon="at"}}
 												{{username}}
 											</span>
 										</div>
 									</div>
 								</td>
 								<td>{{name}}</td>
-								<td class="rc-directory-td--createdAt">
-									<span class="rc-directory-channel-createdAt">{{createdAt}}</span>
-								</td>
+								<td>{{createdAt}}</td>
 							</tr>
 						{{/each}}
 						{{#if isLoading}}
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index 8bf53ee072d34..005c15e3b3afa 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -21,7 +21,8 @@ function directorySearch(config, cb) {
 					users: result.usernames.length,
 					createdAt: timeAgo(result.ts),
 					description: result.description,
-					archived: result.archived
+					archived: result.archived,
+					topic: result.topic
 				};
 			}
 
diff --git a/server/methods/browseChannels.js b/server/methods/browseChannels.js
index 1d918f63595e8..38b0922dbdc36 100644
--- a/server/methods/browseChannels.js
+++ b/server/methods/browseChannels.js
@@ -61,6 +61,7 @@ Meteor.methods({
 					sort,
 					fields: {
 						description: 1,
+						topic: 1,
 						name: 1,
 						ts: 1,
 						archived: 1,

From b9f6aa3e5d9345d932a9d7756585fa751d882944 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 19 Jun 2018 15:43:03 -0300
Subject: [PATCH 21/22] Update table.css

---
 packages/rocketchat-theme/client/imports/components/table.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/rocketchat-theme/client/imports/components/table.css b/packages/rocketchat-theme/client/imports/components/table.css
index 6f1e79d8fd8f7..edc65dd3f3117 100644
--- a/packages/rocketchat-theme/client/imports/components/table.css
+++ b/packages/rocketchat-theme/client/imports/components/table.css
@@ -95,6 +95,7 @@
 
 .table-fake-th {
 	position: absolute;
+	display: flex;
 	top: 0;
 
 	padding: 0.5rem 0;

From 4321d063b3339e40063909bf8b2e45eb96f1f531 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 19 Jun 2018 16:26:23 -0300
Subject: [PATCH 22/22] remove package

---
 package-lock.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4bccc97faab10..cdef413604d4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4473,6 +4473,7 @@
 			"version": "0.1.7",
 			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
 			"integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+			"optional": true,
 			"requires": {
 				"prr": "1.0.1"
 			}
@@ -9477,7 +9478,8 @@
 		"natives": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/natives/-/natives-1.1.4.tgz",
-			"integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg=="
+			"integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg==",
+			"optional": true
 		},
 		"natural-compare": {
 			"version": "1.4.0",
@@ -11209,7 +11211,8 @@
 		"prr": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+			"optional": true
 		},
 		"pseudomap": {
 			"version": "1.0.2",