From 7f973b9e9a2a1589203d3cf99d909138562a39de Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 27 Feb 2019 01:39:58 -0300
Subject: [PATCH 01/15] Split landing and sidebar code

---
 src/public/app.html    |   7 --
 src/scripts/events.js  |   3 +-
 src/scripts/sidebar.js |   7 ++
 src/scripts/start.js   | 187 +++++++++++++++++------------------------
 4 files changed, 83 insertions(+), 121 deletions(-)

diff --git a/src/public/app.html b/src/public/app.html
index 54752f2796..c2971c3d7f 100644
--- a/src/public/app.html
+++ b/src/public/app.html
@@ -6,13 +6,6 @@
 	<link rel="stylesheet" href="../stylesheets/main.css">
 	<script>
 		window.addEventListener('load', () => {
-			const i18n = require('../i18n');
-			document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
-			document.querySelector('#login-card .connect__prompt').innerHTML = i18n.__('landing.inputUrl');
-			document.querySelector('#login-card #invalidUrl').innerHTML = i18n.__('error.noValidServerFound');
-			document.querySelector('#login-card .connect__error').innerHTML = i18n.__('error.offline');
-			document.querySelector('#login-card .login').innerHTML = i18n.__('landing.connect');
-
 			const script = document.createElement('script');
 			script.src = '../app.js';
 			document.body.appendChild(script);
diff --git a/src/scripts/events.js b/src/scripts/events.js
index fd630d9af2..d4373f5bf4 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -58,6 +58,7 @@ const destroyAll = () => {
 
 export default () => {
 	window.addEventListener('beforeunload', destroyAll);
+	window.addEventListener('focus', () => webview.focusActive());
 
 	menus.on('quit', () => app.quit());
 	menus.on('about', () => ipcRenderer.send('open-about-dialog'));
@@ -185,10 +186,8 @@ export default () => {
 		setTouchBar();
 	}
 
-
 	servers.restoreActive();
 	updatePreferences();
 	updateServers();
 	updateWindowState();
-
 };
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index 9477349be2..62d23eca31 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -8,6 +8,13 @@ class SideBar extends EventEmitter {
 	constructor() {
 		super();
 
+		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
+
+		document.querySelector('.add-server').addEventListener('click', () => {
+			servers.clearActive();
+			webview.showLanding();
+		});
+
 		this.sortOrder = JSON.parse(localStorage.getItem(this.sortOrderKey)) || [];
 		localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
 
diff --git a/src/scripts/start.js b/src/scripts/start.js
index a5a49711a3..325d2a7e63 100644
--- a/src/scripts/start.js
+++ b/src/scripts/start.js
@@ -1,119 +1,108 @@
-import { ipcRenderer, shell } from 'electron';
+import { ipcRenderer } from 'electron';
 import attachEvents from './events';
 import servers from './servers';
-import sidebar from './sidebar';
-import webview from './webview';
 import i18n from '../i18n';
 
-export const start = async function() {
-	await i18n.initialize();
-
-	const defaultInstance = 'https://open.rocket.chat';
 
-	// connection check
-	function online() {
-		document.body.classList.remove('offline');
+async function setupLanding() {
+	function handleConnectionStatus() {
+		document.body.classList[navigator.onLine ? 'remove' : 'add']('offline');
 	}
+	window.addEventListener('online', handleConnectionStatus);
+	window.addEventListener('offline', handleConnectionStatus);
+	handleConnectionStatus();
 
-	function offline() {
-		document.body.classList.add('offline');
-	}
-
-	if (!navigator.onLine) {
-		offline();
-	}
+	const defaultInstance = 'https://open.rocket.chat';
 
-	window.addEventListener('online', online);
-	window.addEventListener('offline', offline);
-	// end connection check
+	document.querySelector('#login-card .connect__prompt').innerHTML = i18n.__('landing.inputUrl');
+	document.querySelector('#login-card #invalidUrl').innerHTML = i18n.__('error.noValidServerFound');
+	document.querySelector('#login-card .connect__error').innerHTML = i18n.__('error.offline');
+	document.querySelector('#login-card .login').innerHTML = i18n.__('landing.connect');
 
-	const form = document.querySelector('form');
+	const form = document.querySelector('#login-card');
+	const errorPane = form.querySelector('#invalidUrl');
 	const hostField = form.querySelector('[name="host"]');
-	const button = form.querySelector('[type="submit"]');
-	const invalidUrl = form.querySelector('#invalidUrl');
-
-	window.addEventListener('load', () => hostField.focus());
-
-	window.addEventListener('focus', () => webview.focusActive());
+	const connectButton = form.querySelector('[type="submit"]');
 
 	function validateHost() {
 		return new Promise(function(resolve, reject) {
-			const execValidation = function() {
-				invalidUrl.style.display = 'none';
+			function execValidation() {
+				errorPane.style.display = 'none';
 				hostField.classList.remove('wrong');
 
 				const host = hostField.value.trim();
 				hostField.value = host;
 
 				if (host.length === 0) {
-					button.value = i18n.__('landing.connect');
-					button.disabled = false;
+					connectButton.value = i18n.__('landing.connect');
+					connectButton.disabled = false;
 					resolve();
 					return;
 				}
 
-				button.value = i18n.__('landing.validating');
-				button.disabled = true;
+				connectButton.value = i18n.__('landing.validating');
+				connectButton.disabled = true;
+
+				servers.validateHost(host, 2000)
+					.then(() => {
+						connectButton.value = i18n.__('landing.connect');
+						connectButton.disabled = false;
+						resolve();
+					})
+					.catch(function(status) {
+						// If the url begins with HTTP, mark as invalid
+						if (/^https?:\/\/.+/.test(host) || status === 'basic-auth') {
+							connectButton.value = i18n.__('landing.invalidUrl');
+							errorPane.style.display = 'block';
+							switch (status) {
+								case 'basic-auth':
+									errorPane.innerHTML = i18n.__('error.authNeeded', { auth: 'username:password@host' });
+									break;
+								case 'invalid':
+									errorPane.innerHTML = i18n.__('error.noValidServerFound');
+									break;
+								case 'timeout':
+									errorPane.innerHTML = i18n.__('error.connectTimeout');
+									break;
+							}
+							hostField.classList.add('wrong');
+							reject();
+							return;
+						}
 
-				servers.validateHost(host, 2000).then(function() {
-					button.value = i18n.__('landing.connect');
-					button.disabled = false;
-					resolve();
-				}, function(status) {
-					// If the url begins with HTTP, mark as invalid
-					if (/^https?:\/\/.+/.test(host) || status === 'basic-auth') {
-						button.value = i18n.__('landing.invalidUrl');
-						invalidUrl.style.display = 'block';
-						switch (status) {
-							case 'basic-auth':
-								invalidUrl.innerHTML = i18n.__('error.authNeeded', { auth: 'username:password@host' });
-								break;
-							case 'invalid':
-								invalidUrl.innerHTML = i18n.__('error.noValidServerFound');
-								break;
-							case 'timeout':
-								invalidUrl.innerHTML = i18n.__('error.connectTimeout');
-								break;
+						// If the url isn't localhost, don't have dots and don't have protocol
+						// try as a .rocket.chat subdomain
+						if (!/(^https?:\/\/)|(\.)|(^([^:]+:[^@]+@)?localhost(:\d+)?$)/.test(host)) {
+							hostField.value = `https://${ host }.rocket.chat`;
+							return execValidation();
 						}
-						hostField.classList.add('wrong');
-						reject();
-						return;
-					}
-
-					// // If the url begins with HTTPS, fallback to HTTP
-					// if (/^https:\/\/.+/.test(host)) {
-					//     hostField.value = host.replace('https://', 'http://');
-					//     return execValidation();
-					// }
-
-					// If the url isn't localhost, don't have dots and don't have protocol
-					// try as a .rocket.chat subdomain
-					if (!/(^https?:\/\/)|(\.)|(^([^:]+:[^@]+@)?localhost(:\d+)?$)/.test(host)) {
-						hostField.value = `https://${ host }.rocket.chat`;
-						return execValidation();
-					}
-
-					// If the url don't start with protocol try HTTPS
-					if (!/^https?:\/\//.test(host)) {
-						hostField.value = `https://${ host }`;
-						return execValidation();
-					}
-				});
-			};
+
+						// If the url don't start with protocol try HTTPS
+						if (!/^https?:\/\//.test(host)) {
+							hostField.value = `https://${ host }`;
+							return execValidation();
+						}
+					});
+			}
 			execValidation();
 		});
 	}
 
-	hostField.addEventListener('blur', function() {
+	window.addEventListener('load', () => hostField.focus());
+
+	hostField.addEventListener('blur', () => {
 		validateHost().then(function() {}, function() {});
 	});
 
-	ipcRenderer.on('certificate-reload', function(event, url) {
+	ipcRenderer.on('certificate-reload', (event, url) => {
 		hostField.value = url.replace(/\/api\/info$/, '');
 		validateHost().then(function() {}, function() {});
 	});
 
-	const submit = function() {
+	form.addEventListener('submit', (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+
 		validateHost().then(function() {
 			const input = form.querySelector('[name="host"]');
 			let url = input.value;
@@ -124,42 +113,16 @@ export const start = async function() {
 
 			url = servers.addHost(url);
 			if (url !== false) {
-				sidebar.show();
 				servers.setActive(url);
 			}
 
 			input.value = '';
 		}, function() {});
-	};
-
-	hostField.addEventListener('keydown', function(ev) {
-		if (ev.which === 13) {
-			ev.preventDefault();
-			ev.stopPropagation();
-			submit();
-			return false;
-		}
-	});
-
-	form.addEventListener('submit', function(ev) {
-		ev.preventDefault();
-		ev.stopPropagation();
-		submit();
-		return false;
-	});
-
-	document.querySelector('.add-server').addEventListener('click', () => {
-		servers.clearActive();
-		webview.showLanding();
 	});
+}
 
-	document.addEventListener('click', (event) => {
-		const anchorElement = event.target.closest('a[rel="noopener noreferrer"]');
-		if (anchorElement) {
-			shell.openExternal(anchorElement.href);
-			event.preventDefault();
-		}
-	});
-
-	attachEvents();
-};
+export async function start() {
+	await i18n.initialize();
+	await setupLanding();
+	await attachEvents();
+}

From 8fce0153f1363823e94db8f38ae28f7f0fcf588c Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 27 Feb 2019 01:42:14 -0300
Subject: [PATCH 02/15] Update primary-background-color

---
 src/stylesheets/pages/app.less | 2 +-
 src/stylesheets/variables.less | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stylesheets/pages/app.less b/src/stylesheets/pages/app.less
index 11384f0021..0fc8f1d435 100644
--- a/src/stylesheets/pages/app.less
+++ b/src/stylesheets/pages/app.less
@@ -50,7 +50,7 @@ div.sidebar {
 	padding-top: 27px;
 
 	color: #ffffff;
-	background-color: #2f343d;
+	background-color: @primary-background-color;
 	-webkit-app-region: drag;
 }
 
diff --git a/src/stylesheets/variables.less b/src/stylesheets/variables.less
index 260bb5cc73..cb73e75265 100755
--- a/src/stylesheets/variables.less
+++ b/src/stylesheets/variables.less
@@ -1,4 +1,4 @@
-@primary-background-color: #030C1A;
+@primary-background-color: #2f343d;
 @secondary-background-color: #F4F4F4;
 @tertiary-background-color: #EAEAEA;
 

From 34dbe5f2f114f86d46393ea8869d330c9e100d4d Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 27 Feb 2019 02:01:49 -0300
Subject: [PATCH 03/15] Isolate sidebar styles

---
 src/stylesheets/pages/app.less         | 215 +------------------------
 src/stylesheets/pages/app/sidebar.less | 212 ++++++++++++++++++++++++
 2 files changed, 214 insertions(+), 213 deletions(-)
 create mode 100644 src/stylesheets/pages/app/sidebar.less

diff --git a/src/stylesheets/pages/app.less b/src/stylesheets/pages/app.less
index 0fc8f1d435..03868a73e3 100644
--- a/src/stylesheets/pages/app.less
+++ b/src/stylesheets/pages/app.less
@@ -1,3 +1,5 @@
+@import './app/sidebar.less';
+
 .app-page {
 	cursor: default;
 	user-select: none;
@@ -39,215 +41,6 @@ body.offline .only-offline {
 	animation: wrong 1s;
 }
 
-div.sidebar {
-	position: fixed;
-	z-index: 100000;
-	top: 0;
-	bottom: 0;
-
-	width: 68px;
-	height: 100%;
-	padding-top: 27px;
-
-	color: #ffffff;
-	background-color: @primary-background-color;
-	-webkit-app-region: drag;
-}
-
-div.sidebar::after {
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	content: "";
-
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
-div.sidebar ul {
-	position: relative;
-	z-index: 2;
-
-	margin: 0;
-	padding: 0;
-	-webkit-app-region: no-drag;
-}
-
-div.sidebar li {
-
-	position: relative;
-
-	display: flex;
-
-	height: 55px;
-	margin-bottom: 17px;
-
-	cursor: pointer;
-	-webkit-user-select: none;
-	user-select: none;
-
-	color: inherit;
-
-	font-size: 17pt;
-	align-items: center;
-	-webkit-app-region: no-drag;
-	filter: brightness(110%);
-	justify-content: flex-start;
-}
-
-div.sidebar li.active img {
-	opacity: 1;
-}
-
-div.sidebar li.active span {
-	opacity: 1;
-}
-
-div.sidebar li.unread::before {
-	width: 5px;
-	height: 6px;
-
-	opacity: 0.6;
-}
-
-div.sidebar li.active::before {
-	width: 5px;
-	height: 30px;
-
-	opacity: 1;
-}
-
-div.sidebar li::before {
-	width: 0;
-	height: 0;
-
-	content: "";
-	transition: height 0.2s, opacity 0.2s;
-
-	opacity: 1;
-	border-radius: 0 3px 3px 0;
-	background-color: #ffffff;
-}
-
-.sidebar img {
-	position: absolute;
-	left: 15px;
-
-	display: none;
-
-	width: 42px;
-	height: 42px;
-
-	transition: opacity 0.2s;
-
-	opacity: 0.6;
-}
-
-.sidebar span {
-	position: absolute;
-
-	width: 100%;
-
-	transition: opacity 0.2s;
-	text-align: center;
-
-	opacity: 0.6;
-
-	line-height: 60px;
-}
-
-.sidebar li .tooltip {
-	position: absolute;
-	top: 15px;
-	left: 70px;
-
-	display: none;
-
-	padding: 0 15px;
-
-	white-space: nowrap;
-
-	color: #ffffff;
-	border-radius: 6px;
-	background-color: #000000;
-
-	font-size: 14px;
-	line-height: 30px;
-}
-
-.sidebar li .badge {
-	position: absolute;
-	z-index: 1;
-	top: 2px;
-	right: 8px;
-
-	min-width: 15px;
-	padding: 0 5px;
-
-	text-align: center;
-
-	border-radius: 20px;
-	background-color: #e43325;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-
-	font-family: Helvetica;
-	font-size: 11px;
-	font-weight: bold;
-	line-height: 15px;
-}
-
-.sidebar li .name {
-	position: absolute;
-	bottom: -12px;
-
-	display: none;
-
-	width: 100%;
-
-	text-align: center;
-
-	opacity: 0.6;
-
-	font-size: 12px;
-	font-weight: 600;
-	line-height: 11px;
-}
-
-.command-pressed li .name {
-	display: initial;
-}
-
-.sidebar li:hover span {
-	opacity: 0.8;
-}
-
-.sidebar li:hover img {
-	opacity: 0.8;
-}
-
-.sidebar li:hover .tooltip {
-	display: block;
-}
-
-.sidebar li.add-server {
-	height: 30px;
-}
-
-.sidebar li.add-server span {
-	font-size: 40px;
-}
-
-div.sidebar.sidebar--hidden {
-	display: none;
-}
-
-div.sidebar.sidebar--hidden ~ webview {
-	left: 0;
-}
-
 @-webkit-keyframes wrong {
 	0%,
 	100% {
@@ -468,10 +261,6 @@ webview.active {
 	}
 }
 
-.sidebar--hidden ~ .landing-page {
-	left: 0;
-}
-
 .drag-region {
 	position: absolute;
 
diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
new file mode 100644
index 0000000000..892385e4b9
--- /dev/null
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -0,0 +1,212 @@
+.sidebar {
+	position: fixed;
+	z-index: 100000;
+	top: 0;
+	bottom: 0;
+
+	width: 68px;
+	height: 100%;
+	padding-top: 27px;
+
+	color: #ffffff;
+	background-color: @primary-background-color;
+	-webkit-app-region: drag;
+}
+
+.sidebar::after {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	content: "";
+
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sidebar ul {
+	position: relative;
+	z-index: 2;
+
+	margin: 0;
+	padding: 0;
+	-webkit-app-region: no-drag;
+}
+
+.sidebar li {
+
+	position: relative;
+
+	display: flex;
+
+	height: 55px;
+	margin-bottom: 17px;
+
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+
+	color: inherit;
+
+	font-size: 17pt;
+	align-items: center;
+	-webkit-app-region: no-drag;
+	filter: brightness(110%);
+	justify-content: flex-start;
+}
+
+.sidebar li.active img {
+	opacity: 1;
+}
+
+.sidebar li.active span {
+	opacity: 1;
+}
+
+.sidebar li.unread::before {
+	width: 5px;
+	height: 6px;
+
+	opacity: 0.6;
+}
+
+.sidebar li.active::before {
+	width: 5px;
+	height: 30px;
+
+	opacity: 1;
+}
+
+.sidebar li::before {
+	width: 0;
+	height: 0;
+
+	content: "";
+	transition: height 0.2s, opacity 0.2s;
+
+	opacity: 1;
+	border-radius: 0 3px 3px 0;
+	background-color: #ffffff;
+}
+
+.sidebar img {
+	position: absolute;
+	left: 15px;
+
+	display: none;
+
+	width: 42px;
+	height: 42px;
+
+	transition: opacity 0.2s;
+
+	opacity: 0.6;
+}
+
+.sidebar span {
+	position: absolute;
+
+	width: 100%;
+
+	transition: opacity 0.2s;
+	text-align: center;
+
+	opacity: 0.6;
+
+	line-height: 60px;
+}
+
+.sidebar li .tooltip {
+	position: absolute;
+	top: 15px;
+	left: 70px;
+
+	display: none;
+
+	padding: 0 15px;
+
+	white-space: nowrap;
+
+	color: #ffffff;
+	border-radius: 6px;
+	background-color: #000000;
+
+	font-size: 14px;
+	line-height: 30px;
+}
+
+.sidebar li .badge {
+	position: absolute;
+	z-index: 1;
+	top: 2px;
+	right: 8px;
+
+	min-width: 15px;
+	padding: 0 5px;
+
+	text-align: center;
+
+	border-radius: 20px;
+	background-color: #e43325;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+
+	font-family: Helvetica;
+	font-size: 11px;
+	font-weight: bold;
+	line-height: 15px;
+}
+
+.sidebar li .name {
+	position: absolute;
+	bottom: -12px;
+
+	display: none;
+
+	width: 100%;
+
+	text-align: center;
+
+	opacity: 0.6;
+
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 11px;
+}
+
+.command-pressed li .name {
+	display: initial;
+}
+
+.sidebar li:hover span {
+	opacity: 0.8;
+}
+
+.sidebar li:hover img {
+	opacity: 0.8;
+}
+
+.sidebar li:hover .tooltip {
+	display: block;
+}
+
+.sidebar li.add-server {
+	height: 30px;
+}
+
+.sidebar li.add-server span {
+	font-size: 40px;
+}
+
+.sidebar.sidebar--hidden {
+	display: none;
+}
+
+.sidebar.sidebar--hidden ~ webview {
+	left: 0;
+}
+
+.sidebar.sidebar--hidden ~ .landing-page {
+	left: 0;
+}

From 3682ba38f2de33415922e71dc941ed04878e5546 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 27 Feb 2019 02:46:08 -0300
Subject: [PATCH 04/15] Extract events from sidebar and webview modules

---
 src/scripts/events.js  |  91 ++++++++++++++++++++--
 src/scripts/sidebar.js | 171 ++++++++++++++++++-----------------------
 src/scripts/webview.js |  36 +--------
 3 files changed, 160 insertions(+), 138 deletions(-)

diff --git a/src/scripts/events.js b/src/scripts/events.js
index d4373f5bf4..126f91f819 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -147,13 +147,64 @@ export default () => {
 		updatePreferences();
 	});
 
-	servers.on('loaded', updateServers);
-	servers.on('active-cleared', updateServers);
-	servers.on('active-setted', updateServers);
-	servers.on('host-added', updateServers);
-	servers.on('host-removed', updateServers);
-	servers.on('title-setted', updateServers);
-	sidebar.on('hosts-sorted', updateServers);
+	servers.on('loaded', () => {
+		webview.loaded();
+		updateServers();
+	});
+
+	servers.on('host-added', (hostUrl) => {
+		sidebar.add(servers.get(hostUrl));
+		webview.add(servers.get(hostUrl));
+		updateServers();
+	});
+
+	servers.on('host-removed', (hostUrl) => {
+		sidebar.remove(hostUrl);
+		webview.remove(hostUrl);
+		updateServers();
+	});
+
+	servers.on('active-setted', (hostUrl) => {
+		sidebar.setActive(hostUrl);
+		webview.setActive(hostUrl);
+		updateServers();
+	});
+
+	servers.on('active-cleared', (hostUrl) => {
+		sidebar.deactiveAll(hostUrl);
+		webview.deactiveAll(hostUrl);
+		updateServers();
+	});
+
+	servers.on('title-setted', (hostUrl, title) => {
+		sidebar.setLabel(hostUrl, title);
+		updateServers();
+	});
+
+	sidebar.on('select-server', (hostUrl) => {
+		servers.setActive(hostUrl);
+	});
+
+	sidebar.on('reload-server', (hostUrl) => {
+		webview.getByUrl(hostUrl).reload();
+	});
+
+	sidebar.on('remove-server', (hostUrl) => {
+		servers.removeHost(hostUrl);
+	});
+
+	sidebar.on('open-devtools-for-server', (hostUrl) => {
+		webview.getByUrl(hostUrl).openDevTools();
+	});
+
+	sidebar.on('add-server', () => {
+		servers.clearActive();
+		webview.showLanding();
+	});
+
+	sidebar.on('hosts-sorted', () => {
+		updateServers();
+	});
 
 	sidebar.on('badge-setted', () => {
 		const badge = sidebar.getGlobalBadge();
@@ -161,6 +212,7 @@ export default () => {
 		dock.setState({ badge });
 	});
 
+
 	getCurrentWindow().on('hide', updateWindowState);
 	getCurrentWindow().on('show', updateWindowState);
 
@@ -180,6 +232,30 @@ export default () => {
 				mainWindow.flashFrame(true);
 			}
 		}
+		sidebar.setBadge(hostUrl, count);
+	});
+
+	webview.on('ipc-message-title-changed', (hostUrl, [title]) => {
+		servers.setHostTitle(hostUrl, title);
+	});
+
+	webview.on('ipc-message-focus', (hostUrl) => {
+		servers.setActive(hostUrl);
+	});
+
+	webview.on('ipc-message-sidebar-background', (hostUrl, [colors]) => {
+		sidebar.changeSidebarColor(colors);
+	});
+
+	webview.on('dom-ready', (webviewObj, hostUrl) => {
+		sidebar.setActive(localStorage.getItem(servers.activeKey));
+		webviewObj.send('request-sidebar-color');
+		sidebar.setImage(hostUrl);
+		if (sidebar.isHidden()) {
+			sidebar.hide();
+		} else {
+			sidebar.show();
+		}
 	});
 
 	if (process.platform === 'darwin') {
@@ -187,6 +263,7 @@ export default () => {
 	}
 
 	servers.restoreActive();
+	sidebar.setState({ hosts: servers.hosts });
 	updatePreferences();
 	updateServers();
 	updateWindowState();
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index 62d23eca31..1a376c7eb2 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -1,62 +1,95 @@
 import { EventEmitter } from 'events';
 import { remote } from 'electron';
 import i18n from '../i18n';
-import servers from './servers';
 import webview from './webview';
+const { getCurrentWindow, Menu } = remote;
+
 
 class SideBar extends EventEmitter {
 	constructor() {
 		super();
+		this.state = {};
 
 		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
-
-		document.querySelector('.add-server').addEventListener('click', () => {
-			servers.clearActive();
-			webview.showLanding();
-		});
+		document.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
 
 		this.sortOrder = JSON.parse(localStorage.getItem(this.sortOrderKey)) || [];
 		localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
 
 		this.listElement = document.getElementById('sidebar__servers');
 
-		Object.values(servers.hosts)
-			.sort((a, b) => this.sortOrder.indexOf(a.url) - this.sortOrder.indexOf(b.url))
-			.forEach((host) => {
-				this.add(host);
-			});
+		window.addEventListener('contextmenu', (e) => {
+			const selectedInstance = (e.target.classList.contains('instance') && e.target) ||
+				(e.target.parentNode.classList.contains('instance') && e.target.parentNode);
 
-		servers.on('host-added', (hostUrl) => {
-			this.add(servers.get(hostUrl));
-		});
+			if (!selectedInstance) {
+				return;
+			}
 
-		servers.on('host-removed', (hostUrl) => {
-			this.remove(hostUrl);
-		});
+			const { host } = selectedInstance.dataset;
+
+			e.preventDefault();
+
+			const menu = Menu.buildFromTemplate([
+				{
+					label: i18n.__('sidebar.item.reload'),
+					click: () => this.emit('reload-server', host),
+				},
+				{
+					label: i18n.__('sidebar.item.remove'),
+					click: () => this.emit('remove-server', host),
+				},
+				{
+					label: i18n.__('sidebar.item.openDevTools'),
+					click: () => this.emit('open-devtools-for-server', host),
+				},
+			]);
+			menu.popup(getCurrentWindow());
+		}, false);
 
-		servers.on('active-setted', (hostUrl) => {
-			this.setActive(hostUrl);
-		});
+		if (process.platform === 'darwin') {
+			window.addEventListener('keydown', function(e) {
+				if (e.key === 'Meta') {
+					document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
+				}
+			});
 
-		servers.on('active-cleared', (hostUrl) => {
-			this.deactiveAll(hostUrl);
-		});
+			window.addEventListener('keyup', function(e) {
+				if (e.key === 'Meta') {
+					document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
+				}
+			});
+		} else {
+			window.addEventListener('keydown', function(e) {
+				if (e.key === 'ctrlKey') {
+					document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
+				}
+			});
 
-		servers.on('title-setted', (hostUrl, title) => {
-			this.setLabel(hostUrl, title);
-		});
+			window.addEventListener('keyup', function(e) {
+				if (e.key === 'ctrlKey') {
+					document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
+				}
+			});
+		}
+	}
 
-		webview.on('dom-ready', (webviewObj, hostUrl) => {
-			this.setActive(localStorage.getItem(servers.activeKey));
-			webviewObj.send('request-sidebar-color');
-			this.setImage(hostUrl);
-			if (this.isHidden()) {
-				this.hide();
-			} else {
-				this.show();
-			}
-		});
+	setState(partialState) {
+		this.state = {
+			...this.state,
+			...partialState,
+		};
+		this.update();
+	}
 
+	update() {
+		Object.values(this.state.hosts)
+			.sort(({ url: a, url: b }) => this.sortOrder.indexOf(a) - this.sortOrder.indexOf(b))
+			.forEach((host) => this.add(host));
+	}
+
+	handleAddServerClick() {
+		this.emit('add-server');
 	}
 
 	get sortOrderKey() {
@@ -165,14 +198,16 @@ class SideBar extends EventEmitter {
 			this.setActive(window.dragged.dataset.host);
 		};
 
-		item.onclick = () => {
-			servers.setActive(host.url);
-		};
+		item.onclick = this.handleServerClick.bind(this, host.url);
 
 		this.listElement.appendChild(item);
 		this.emit('hosts-sorted');
 	}
 
+	handleServerClick(hostUrl) {
+		this.emit('select-server', hostUrl);
+	}
+
 	setImage(hostUrl) {
 		const img = this.getByUrl(hostUrl).querySelector('img');
 		img.src = `${ hostUrl.replace(/\/$/, '') }/assets/favicon.svg?v=${ Math.round(Math.random() * 10000) }`;
@@ -352,61 +387,3 @@ class SideBar extends EventEmitter {
 }
 
 export default new SideBar();
-
-
-let selectedInstance = null;
-const instanceMenu = remote.Menu.buildFromTemplate([{
-	label: i18n.__('sidebar.item\.reload'),
-	click() {
-		webview.getByUrl(selectedInstance.dataset.host).reload();
-	},
-}, {
-	label: i18n.__('sidebar.item\.remove'),
-	click() {
-		servers.removeHost(selectedInstance.dataset.host);
-	},
-}, {
-	label: i18n.__('sidebar.item\.openDevTools'),
-	click() {
-		webview.getByUrl(selectedInstance.dataset.host).openDevTools();
-	},
-}]);
-
-window.addEventListener('contextmenu', function(e) {
-	if (e.target.classList.contains('instance') || e.target.parentNode.classList.contains('instance')) {
-		e.preventDefault();
-		if (e.target.classList.contains('instance')) {
-			selectedInstance = e.target;
-		} else {
-			selectedInstance = e.target.parentNode;
-		}
-
-		instanceMenu.popup(remote.getCurrentWindow());
-	}
-}, false);
-
-if (process.platform === 'darwin') {
-	window.addEventListener('keydown', function(e) {
-		if (e.key === 'Meta') {
-			document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
-		}
-	});
-
-	window.addEventListener('keyup', function(e) {
-		if (e.key === 'Meta') {
-			document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
-		}
-	});
-} else {
-	window.addEventListener('keydown', function(e) {
-		if (e.key === 'ctrlKey') {
-			document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
-		}
-	});
-
-	window.addEventListener('keyup', function(e) {
-		if (e.key === 'ctrlKey') {
-			document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
-		}
-	});
-}
diff --git a/src/scripts/webview.js b/src/scripts/webview.js
index 9eff1a8fec..0f7c06d4bd 100644
--- a/src/scripts/webview.js
+++ b/src/scripts/webview.js
@@ -1,7 +1,7 @@
+import { ipcRenderer } from 'electron';
 import { EventEmitter } from 'events';
 import servers from './servers';
-import sidebar from './sidebar';
-import { ipcRenderer } from 'electron';
+
 
 class WebView extends EventEmitter {
 	constructor() {
@@ -13,26 +13,6 @@ class WebView extends EventEmitter {
 			this.add(host);
 		});
 
-		servers.on('host-added', (hostUrl) => {
-			this.add(servers.get(hostUrl));
-		});
-
-		servers.on('host-removed', (hostUrl) => {
-			this.remove(hostUrl);
-		});
-
-		servers.on('active-setted', (hostUrl) => {
-			this.setActive(hostUrl);
-		});
-
-		servers.on('active-cleared', (hostUrl) => {
-			this.deactiveAll(hostUrl);
-		});
-
-		servers.once('loaded', () => {
-			this.loaded();
-		});
-
 		ipcRenderer.on('screenshare-result', (e, id) => {
 			const webviewObj = this.getActive();
 			webviewObj.executeJavaScript(`
@@ -75,15 +55,6 @@ class WebView extends EventEmitter {
 			this.emit(`ipc-message-${ event.channel }`, host.url, event.args);
 
 			switch (event.channel) {
-				case 'title-changed':
-					servers.setHostTitle(host.url, event.args[0]);
-					break;
-				case 'unread-changed':
-					sidebar.setBadge(host.url, event.args[0]);
-					break;
-				case 'focus':
-					servers.setActive(host.url);
-					break;
 				case 'get-sourceId':
 					ipcRenderer.send('open-screenshare-dialog');
 					break;
@@ -94,9 +65,6 @@ class WebView extends EventEmitter {
 					webviewObj.loadURL(server);
 					break;
 				}
-				case 'sidebar-background':
-					sidebar.changeSidebarColor(event.args[0]);
-					break;
 			}
 		});
 

From 11e91cd6587b29079d6e1b61bdda553d9213fca4 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 27 Feb 2019 15:52:30 -0300
Subject: [PATCH 05/15] Expose all sidebar events

---
 src/scripts/events.js  |   5 +-
 src/scripts/sidebar.js | 126 +++++++++++++++--------------------------
 2 files changed, 49 insertions(+), 82 deletions(-)

diff --git a/src/scripts/events.js b/src/scripts/events.js
index 126f91f819..73afb32512 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -167,6 +167,9 @@ export default () => {
 	servers.on('active-setted', (hostUrl) => {
 		sidebar.setActive(hostUrl);
 		webview.setActive(hostUrl);
+		if (webview.getActive() && webview.getActive().classList.contains('ready')) {
+			webview.getActive().send('request-sidebar-color');
+		}
 		updateServers();
 	});
 
@@ -263,7 +266,7 @@ export default () => {
 	}
 
 	servers.restoreActive();
-	sidebar.setState({ hosts: servers.hosts });
+	sidebar.setHosts(servers.hosts);
 	updatePreferences();
 	updateServers();
 	updateWindowState();
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index 1a376c7eb2..c2659fe755 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -1,97 +1,67 @@
-import { EventEmitter } from 'events';
 import { remote } from 'electron';
+import { EventEmitter } from 'events';
 import i18n from '../i18n';
-import webview from './webview';
 const { getCurrentWindow, Menu } = remote;
 
 
 class SideBar extends EventEmitter {
 	constructor() {
 		super();
-		this.state = {};
 
 		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
 		document.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
 
+		// TODO: use globalShortcut and mainWindow focus
+		window.addEventListener('keydown', this.handleShortcutsKey.bind(this, true));
+		window.addEventListener('keyup', this.handleShortcutsKey.bind(this, false));
+
 		this.sortOrder = JSON.parse(localStorage.getItem(this.sortOrderKey)) || [];
 		localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
 
 		this.listElement = document.getElementById('sidebar__servers');
+	}
 
-		window.addEventListener('contextmenu', (e) => {
-			const selectedInstance = (e.target.classList.contains('instance') && e.target) ||
-				(e.target.parentNode.classList.contains('instance') && e.target.parentNode);
-
-			if (!selectedInstance) {
-				return;
-			}
-
-			const { host } = selectedInstance.dataset;
-
-			e.preventDefault();
-
-			const menu = Menu.buildFromTemplate([
-				{
-					label: i18n.__('sidebar.item.reload'),
-					click: () => this.emit('reload-server', host),
-				},
-				{
-					label: i18n.__('sidebar.item.remove'),
-					click: () => this.emit('remove-server', host),
-				},
-				{
-					label: i18n.__('sidebar.item.openDevTools'),
-					click: () => this.emit('open-devtools-for-server', host),
-				},
-			]);
-			menu.popup(getCurrentWindow());
-		}, false);
-
-		if (process.platform === 'darwin') {
-			window.addEventListener('keydown', function(e) {
-				if (e.key === 'Meta') {
-					document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
-				}
-			});
+	handleServerClick(hostUrl) {
+		this.emit('select-server', hostUrl);
+	}
 
-			window.addEventListener('keyup', function(e) {
-				if (e.key === 'Meta') {
-					document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
-				}
-			});
-		} else {
-			window.addEventListener('keydown', function(e) {
-				if (e.key === 'ctrlKey') {
-					document.getElementsByClassName('sidebar')[0].classList.add('command-pressed');
-				}
-			});
+	handleServerContextMenu(hostUrl, event) {
+		event.preventDefault();
+
+		const menu = Menu.buildFromTemplate([
+			{
+				label: i18n.__('sidebar.item.reload'),
+				click: () => this.emit('reload-server', hostUrl),
+			},
+			{
+				label: i18n.__('sidebar.item.remove'),
+				click: () => this.emit('remove-server', hostUrl),
+			},
+			{
+				label: i18n.__('sidebar.item.openDevTools'),
+				click: () => this.emit('open-devtools-for-server', hostUrl),
+			},
+		]);
+		menu.popup(getCurrentWindow());
+	}
 
-			window.addEventListener('keyup', function(e) {
-				if (e.key === 'ctrlKey') {
-					document.getElementsByClassName('sidebar')[0].classList.remove('command-pressed');
-				}
-			});
-		}
+	handleAddServerClick() {
+		this.emit('add-server');
 	}
 
-	setState(partialState) {
-		this.state = {
-			...this.state,
-			...partialState,
-		};
-		this.update();
+	handleShortcutsKey(down, event) {
+		const shortcutKey = process.platform === 'darwin' ? 'Meta' : 'ctrlKey';
+		if (event.key === shortcutKey) {
+			document.querySelector('.sidebar').classList[down ? 'add' : 'remove']('command-pressed');
+		}
 	}
 
-	update() {
-		Object.values(this.state.hosts)
+	setHosts(hosts) {
+		Object.values(hosts)
 			.sort(({ url: a, url: b }) => this.sortOrder.indexOf(a) - this.sortOrder.indexOf(b))
 			.forEach((host) => this.add(host));
 	}
 
-	handleAddServerClick() {
-		this.emit('add-server');
-	}
-
 	get sortOrderKey() {
 		return 'rocket.chat.sortOrder';
 	}
@@ -126,12 +96,12 @@ class SideBar extends EventEmitter {
 			this.sortOrder.push(host.url);
 		}
 
-		const hotkey = document.createElement('div');
-		hotkey.classList.add('name');
+		const shortcut = document.createElement('div');
+		shortcut.classList.add('name');
 		if (process.platform === 'darwin') {
-			hotkey.innerHTML = `⌘${ hostOrder }`;
+			shortcut.innerHTML = `⌘${ hostOrder }`;
 		} else {
-			hotkey.innerHTML = `^${ hostOrder }`;
+			shortcut.innerHTML = `^${ hostOrder }`;
 		}
 
 		const item = document.createElement('li');
@@ -139,7 +109,7 @@ class SideBar extends EventEmitter {
 		item.appendChild(tooltip);
 		item.appendChild(badge);
 		item.appendChild(img);
-		item.appendChild(hotkey);
+		item.appendChild(shortcut);
 
 		item.dataset.host = host.url;
 		item.dataset.sortOrder = hostOrder;
@@ -195,19 +165,16 @@ class SideBar extends EventEmitter {
 					this.setImage(url);
 				});
 
-			this.setActive(window.dragged.dataset.host);
+			this.emit('select-server', window.dragged.dataset.host);
 		};
 
-		item.onclick = this.handleServerClick.bind(this, host.url);
+		item.addEventListener('click', this.handleServerClick.bind(this, host.url), false);
+		item.addEventListener('contextmenu', this.handleServerContextMenu.bind(this, host.url), false);
 
 		this.listElement.appendChild(item);
 		this.emit('hosts-sorted');
 	}
 
-	handleServerClick(hostUrl) {
-		this.emit('select-server', hostUrl);
-	}
-
 	setImage(hostUrl) {
 		const img = this.getByUrl(hostUrl).querySelector('img');
 		img.src = `${ hostUrl.replace(/\/$/, '') }/assets/favicon.svg?v=${ Math.round(Math.random() * 10000) }`;
@@ -250,9 +217,6 @@ class SideBar extends EventEmitter {
 		if (item) {
 			item.classList.add('active');
 		}
-		if (webview.getActive() && webview.getActive().classList.contains('ready')) {
-			webview.getActive().send('request-sidebar-color');
-		}
 	}
 
 	deactiveAll() {

From cdecea3ed4ff476d2d171e59b81ffc0628ffb65d Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 28 Feb 2019 13:53:09 -0300
Subject: [PATCH 06/15] Remove sidebar visibility preference from sidebar
 module

---
 src/scripts/events.js  |  24 +++++----
 src/scripts/sidebar.js | 107 +++++++++--------------------------------
 src/scripts/webview.js |  15 ++++++
 3 files changed, 53 insertions(+), 93 deletions(-)

diff --git a/src/scripts/events.js b/src/scripts/events.js
index 73afb32512..241d25a659 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -10,15 +10,18 @@ const { certificate, dock, menus, tray } = remote.require('./background');
 
 const updatePreferences = () => {
 	const mainWindow = getCurrentWindow();
+	const showWindowOnUnreadChanged = localStorage.getItem('showWindowOnUnreadChanged') === 'true';
 	const hasTrayIcon = localStorage.getItem('hideTray') ?
 		localStorage.getItem('hideTray') !== 'true' : (process.platform !== 'linux');
+	const hasMenuBar = localStorage.getItem('autohideMenu') !== 'true';
+	const hasSidebar = localStorage.getItem('sidebar-closed') !== 'true';
 
 	menus.setState({
 		showTrayIcon: hasTrayIcon,
 		showFullScreen: mainWindow.isFullScreen(),
-		showWindowOnUnreadChanged: localStorage.getItem('showWindowOnUnreadChanged') === 'true',
-		showMenuBar: localStorage.getItem('autohideMenu') !== 'true',
-		showServerList: localStorage.getItem('sidebar-closed') !== 'true',
+		showWindowOnUnreadChanged,
+		showMenuBar: hasMenuBar,
+		showServerList: hasSidebar,
 	});
 
 	tray.setState({
@@ -28,6 +31,9 @@ const updatePreferences = () => {
 	dock.setState({
 		hasTrayIcon,
 	});
+
+	sidebar.setVisible(hasSidebar);
+	webview.setSidebarPaddingEnabled(!hasSidebar);
 };
 
 
@@ -139,7 +145,9 @@ export default () => {
 			}
 
 			case 'showServerList': {
-				sidebar.toggle();
+				const previousValue = localStorage.getItem('sidebar-closed') !== 'true';
+				const newValue = !previousValue;
+				localStorage.setItem('sidebar-closed', JSON.stringify(!newValue));
 				break;
 			}
 		}
@@ -251,14 +259,12 @@ export default () => {
 	});
 
 	webview.on('dom-ready', (webviewObj, hostUrl) => {
+		const hasSidebar = localStorage.getItem('sidebar-closed') !== 'true';
 		sidebar.setActive(localStorage.getItem(servers.activeKey));
 		webviewObj.send('request-sidebar-color');
 		sidebar.setImage(hostUrl);
-		if (sidebar.isHidden()) {
-			sidebar.hide();
-		} else {
-			sidebar.show();
-		}
+		sidebar.setVisible(hasSidebar);
+		webview.setSidebarPaddingEnabled(!hasSidebar);
 	});
 
 	if (process.platform === 'darwin') {
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index c2659fe755..4b7e5e9d8c 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -8,19 +8,26 @@ class SideBar extends EventEmitter {
 	constructor() {
 		super();
 
-		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
-		document.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
-
 		// TODO: use globalShortcut and mainWindow focus
 		window.addEventListener('keydown', this.handleShortcutsKey.bind(this, true));
 		window.addEventListener('keyup', this.handleShortcutsKey.bind(this, false));
 
+		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
+		document.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
+
 		this.sortOrder = JSON.parse(localStorage.getItem(this.sortOrderKey)) || [];
 		localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
 
 		this.listElement = document.getElementById('sidebar__servers');
 	}
 
+	handleShortcutsKey(down, event) {
+		const shortcutKey = process.platform === 'darwin' ? 'Meta' : 'ctrlKey';
+		if (event.key === shortcutKey) {
+			document.querySelector('.sidebar').classList[down ? 'add' : 'remove']('command-pressed');
+		}
+	}
+
 	handleServerClick(hostUrl) {
 		this.emit('select-server', hostUrl);
 	}
@@ -49,13 +56,6 @@ class SideBar extends EventEmitter {
 		this.emit('add-server');
 	}
 
-	handleShortcutsKey(down, event) {
-		const shortcutKey = process.platform === 'darwin' ? 'Meta' : 'ctrlKey';
-		if (event.key === shortcutKey) {
-			document.querySelector('.sidebar').classList[down ? 'add' : 'remove']('command-pressed');
-		}
-	}
-
 	setHosts(hosts) {
 		Object.values(hosts)
 			.sort(({ url: a, url: b }) => this.sortOrder.indexOf(a) - this.sortOrder.indexOf(b))
@@ -66,6 +66,17 @@ class SideBar extends EventEmitter {
 		return 'rocket.chat.sortOrder';
 	}
 
+	isBefore(a, b) {
+		if (a.parentNode === b.parentNode) {
+			for (let cur = a; cur; cur = cur.previousSibling) {
+				if (cur === b) {
+					return true;
+				}
+			}
+		}
+		return false;
+	}
+
 	add(host) {
 		let name = host.title.replace(/^https?:\/\/(?:www\.)?([^\/]+)(.*)/, '$1');
 		name = name.split('.');
@@ -273,80 +284,8 @@ class SideBar extends EventEmitter {
 		};
 	}
 
-	hide() {
-		document.querySelector('.sidebar').classList.add('sidebar--hidden');
-		localStorage.setItem('sidebar-closed', 'true');
-		this.emit('hide');
-		if (process.platform === 'darwin') {
-			Array.from(document.querySelectorAll('webview.ready'))
-				.forEach((webviewObj) => {
-					if (!webviewObj.insertCSS) {
-						return;
-					}
-
-					webviewObj.insertCSS(`
-						aside.side-nav {
-							margin-top: 15px;
-							overflow: hidden;
-							transition: margin .5s ease-in-out;
-						}
-						.sidebar {
-							padding-top: 10px;
-							transition: margin .5s ease-in-out;
-						}
-					`);
-				});
-		}
-	}
-
-	show() {
-		document.querySelector('.sidebar').classList.remove('sidebar--hidden');
-		localStorage.setItem('sidebar-closed', 'false');
-		this.emit('show');
-		if (process.platform === 'darwin') {
-			Array.from(document.querySelectorAll('webview.ready'))
-				.forEach((webviewObj) => {
-					if (!webviewObj.insertCSS) {
-						return;
-					}
-
-					webviewObj.insertCSS(`
-						aside.side-nav {
-							margin-top: 0;
-							overflow: hidden;
-							transition: margin .5s ease-in-out;
-						}
-
-						.sidebar {
-							padding-top: 0;
-							transition: margin .5s ease-in-out;
-						}
-					`);
-				});
-		}
-	}
-
-	toggle() {
-		if (this.isHidden()) {
-			this.show();
-		} else {
-			this.hide();
-		}
-	}
-
-	isHidden() {
-		return localStorage.getItem('sidebar-closed') === 'true';
-	}
-
-	isBefore(a, b) {
-		if (a.parentNode === b.parentNode) {
-			for (let cur = a; cur; cur = cur.previousSibling) {
-				if (cur === b) {
-					return true;
-				}
-			}
-		}
-		return false;
+	setVisible(visible) {
+		document.querySelector('.sidebar').classList[visible ? 'remove' : 'add']('sidebar--hidden');
 	}
 }
 
diff --git a/src/scripts/webview.js b/src/scripts/webview.js
index 0f7c06d4bd..1147905385 100644
--- a/src/scripts/webview.js
+++ b/src/scripts/webview.js
@@ -157,6 +157,21 @@ class WebView extends EventEmitter {
 	goForward() {
 		this.getActive().goForward();
 	}
+
+	setSidebarPaddingEnabled(enabled) {
+		if (process.platform !== 'darwin') {
+			return;
+		}
+
+		Array.from(document.querySelectorAll('webview.ready'))
+			.filter((webviewObj) => webviewObj.insertCSS)
+			.forEach((webviewObj) => webviewObj.insertCSS(`
+				.sidebar {
+					padding-top: ${ enabled ? '10px' : '0' };
+					transition: margin .5s ease-in-out;
+				}
+			`));
+	}
 }
 
 export default new WebView();

From b6a6fd6b2182722fdf67ecc3715ab55fc1bb00a5 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 28 Feb 2019 17:34:28 -0300
Subject: [PATCH 07/15] Split state handling and rendering in sidebar module

---
 src/background/dock.js                 |  29 +-
 src/background/icon.js                 |  24 +-
 src/background/icon.spec.js            |  88 +++---
 src/background/tray.js                 |  19 +-
 src/preload/sidebar.js                 |  42 ++-
 src/public/app.html                    |   4 +-
 src/scripts/events.js                  |  77 +++--
 src/scripts/sidebar.js                 | 401 +++++++++++--------------
 src/stylesheets/pages/app/sidebar.less |  63 ++--
 9 files changed, 367 insertions(+), 380 deletions(-)

diff --git a/src/background/dock.js b/src/background/dock.js
index b1ff790e63..96ad70c3ef 100644
--- a/src/background/dock.js
+++ b/src/background/dock.js
@@ -4,19 +4,20 @@ import { getMainWindow } from './mainWindow';
 import { getTrayIconImage, getAppIconImage } from './icon';
 
 
-const getBadgeText = ({ badge: { title, count } }) => {
-	if (title === '•') {
+const getBadgeText = ({ badge }) => {
+	if (badge === '•') {
 		return '•';
-	} else if (count > 0) {
-		return String(count);
 	}
+
+	if (Number.isInteger(badge)) {
+		return String(badge);
+	}
+
+	return '';
 };
 
 let state = {
-	badge: {
-		title: '',
-		count: 0,
-	},
+	badge: null,
 	hasTrayIcon: false,
 };
 
@@ -28,22 +29,24 @@ const destroy = () => {
 
 const update = async(previousState) => {
 	const mainWindow = await getMainWindow();
-	const badgeText = getBadgeText(state);
 
 	if (process.platform === 'darwin') {
-		app.dock.setBadge(badgeText || '');
-		if (state.badge.count > 0 && previousState.badge.count === 0) {
+		app.dock.setBadge(getBadgeText(state));
+		const count = Number.isInteger(state.badge) ? state.badge : 0;
+		const previousCount = Number.isInteger(previousState.badge) ? state.badge : 0;
+		if (count > 0 && previousCount === 0) {
 			app.dock.bounce();
 		}
 	}
 
 	if (process.platform === 'linux' || process.platform === 'win32') {
-		const image = state.hasTrayIcon ? getAppIconImage() : getTrayIconImage(state.badge);
+		const image = state.hasTrayIcon ? getAppIconImage() : getTrayIconImage({ badge: state.badge });
 		mainWindow.setIcon(image);
 	}
 
 	if (!mainWindow.isFocused()) {
-		mainWindow.flashFrame(state.badge.count > 0);
+		const count = Number.isInteger(state.badge) ? state.badge : 0;
+		mainWindow.flashFrame(count > 0);
 	}
 
 	instance.emit('update');
diff --git a/src/background/icon.js b/src/background/icon.js
index c986cb412d..7e0d61d3e4 100644
--- a/src/background/icon.js
+++ b/src/background/icon.js
@@ -9,15 +9,17 @@ function getTrayIconSet({ platform, dark }) {
 	return platform;
 }
 
-function getTrayIconName({ title, count, platform }) {
+function getTrayIconName({ badge, platform }) {
 	if (platform === 'darwin') {
-		return (title || count) ? 'notification' : 'default';
+		return badge ? 'notification' : 'default';
 	}
 
-	if (title === '•') {
+	if (badge === '•') {
 		return 'notification-dot';
-	} else if (count > 0) {
-		return count > 9 ? 'notification-plus-9' : `notification-${ String(count) }`;
+	}
+
+	if (Number.isInteger(badge)) {
+		return badge > 9 ? 'notification-plus-9' : `notification-${ String(badge) }`;
 	}
 
 	return 'default';
@@ -35,7 +37,7 @@ export function getAppIconPath() {
 	return 'public/images/icon.png';
 }
 
-export function getTrayIconPath({ title, count, platform, dark } = {}) {
+export function getTrayIconPath({ badge, platform, dark } = {}) {
 	if (typeof platform === 'undefined') {
 		platform = process.platform;
 	}
@@ -44,7 +46,7 @@ export function getTrayIconPath({ title, count, platform, dark } = {}) {
 		dark = systemPreferences.isDarkMode();
 	}
 
-	const params = { title, count, platform, dark };
+	const params = { badge, platform, dark };
 	const iconset = getTrayIconSet(params);
 	const name = getTrayIconName(params);
 	const extension = getTrayIconExtension(params);
@@ -55,15 +57,15 @@ export function getAppIconImage() {
 	return nativeImage.createFromPath(`${ __dirname }/${ getAppIconPath() }`);
 }
 
-export function getTrayIconImage({ title, count, platform, dark } = {}) {
-	return nativeImage.createFromPath(`${ __dirname }/${ getTrayIconPath({ title, count, platform, dark }) }`);
+export function getTrayIconImage({ badge, platform, dark } = {}) {
+	return nativeImage.createFromPath(`${ __dirname }/${ getTrayIconPath({ badge, platform, dark }) }`);
 }
 
-export function getIconImage({ badge: { title, count } }) {
+export function getIconImage({ badge }) {
 	const iconsetsPath = `${ __dirname }/public/images/tray`;
 	const { platform } = process;
 	const dark = systemPreferences.isDarkMode();
-	const params = { title, count, platform, dark };
+	const params = { badge, platform, dark };
 	const iconset = getTrayIconSet(params);
 	const name = getTrayIconName(params);
 	const extension = getTrayIconExtension(params);
diff --git a/src/background/icon.spec.js b/src/background/icon.spec.js
index 78d95e87b9..927fabf6d5 100644
--- a/src/background/icon.spec.js
+++ b/src/background/icon.spec.js
@@ -15,65 +15,65 @@ describe('icon', () => {
 			it('darwin', () => {
 
 				expect(getTrayIconPath({ platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/default.png');
-				expect(getTrayIconPath({ title: '•', platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 1, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 2, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 3, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 4, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 5, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 6, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 7, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 8, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 9, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
-				expect(getTrayIconPath({ count: 10, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: '•', platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 1, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 2, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 3, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 4, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 5, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 6, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 7, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 8, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 9, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
+				expect(getTrayIconPath({ badge: 10, platform: 'darwin', dark: false })).to.be.equals('public/images/tray/darwin/notification.png');
 			});
 
 			it('darwin-dark', () => {
 
 				expect(getTrayIconPath({ platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/default.png');
-				expect(getTrayIconPath({ title: '•', platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 1, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 2, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 3, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 4, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 5, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 6, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 7, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 8, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 9, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
-				expect(getTrayIconPath({ count: 10, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: '•', platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 1, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 2, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 3, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 4, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 5, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 6, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 7, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 8, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 9, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
+				expect(getTrayIconPath({ badge: 10, platform: 'darwin', dark: true })).to.be.equals('public/images/tray/darwin-dark/notification.png');
 			});
 
 			it('linux', () => {
 
 				expect(getTrayIconPath({ platform: 'linux' })).to.be.equals('public/images/tray/linux/default.png');
-				expect(getTrayIconPath({ title: '•', platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-dot.png');
-				expect(getTrayIconPath({ count: 1, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-1.png');
-				expect(getTrayIconPath({ count: 2, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-2.png');
-				expect(getTrayIconPath({ count: 3, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-3.png');
-				expect(getTrayIconPath({ count: 4, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-4.png');
-				expect(getTrayIconPath({ count: 5, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-5.png');
-				expect(getTrayIconPath({ count: 6, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-6.png');
-				expect(getTrayIconPath({ count: 7, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-7.png');
-				expect(getTrayIconPath({ count: 8, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-8.png');
-				expect(getTrayIconPath({ count: 9, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-9.png');
-				expect(getTrayIconPath({ count: 10, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-plus-9.png');
+				expect(getTrayIconPath({ badge: '•', platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-dot.png');
+				expect(getTrayIconPath({ badge: 1, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-1.png');
+				expect(getTrayIconPath({ badge: 2, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-2.png');
+				expect(getTrayIconPath({ badge: 3, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-3.png');
+				expect(getTrayIconPath({ badge: 4, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-4.png');
+				expect(getTrayIconPath({ badge: 5, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-5.png');
+				expect(getTrayIconPath({ badge: 6, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-6.png');
+				expect(getTrayIconPath({ badge: 7, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-7.png');
+				expect(getTrayIconPath({ badge: 8, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-8.png');
+				expect(getTrayIconPath({ badge: 9, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-9.png');
+				expect(getTrayIconPath({ badge: 10, platform: 'linux' })).to.be.equals('public/images/tray/linux/notification-plus-9.png');
 			});
 
 			it('win32', () => {
 
 				expect(getTrayIconPath({ platform: 'win32' })).to.be.equals('public/images/tray/win32/default.ico');
-				expect(getTrayIconPath({ title: '•', platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-dot.ico');
-				expect(getTrayIconPath({ count: 1, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-1.ico');
-				expect(getTrayIconPath({ count: 2, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-2.ico');
-				expect(getTrayIconPath({ count: 3, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-3.ico');
-				expect(getTrayIconPath({ count: 4, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-4.ico');
-				expect(getTrayIconPath({ count: 5, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-5.ico');
-				expect(getTrayIconPath({ count: 6, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-6.ico');
-				expect(getTrayIconPath({ count: 7, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-7.ico');
-				expect(getTrayIconPath({ count: 8, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-8.ico');
-				expect(getTrayIconPath({ count: 9, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-9.ico');
-				expect(getTrayIconPath({ count: 10, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-plus-9.ico');
+				expect(getTrayIconPath({ badge: '•', platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-dot.ico');
+				expect(getTrayIconPath({ badge: 1, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-1.ico');
+				expect(getTrayIconPath({ badge: 2, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-2.ico');
+				expect(getTrayIconPath({ badge: 3, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-3.ico');
+				expect(getTrayIconPath({ badge: 4, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-4.ico');
+				expect(getTrayIconPath({ badge: 5, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-5.ico');
+				expect(getTrayIconPath({ badge: 6, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-6.ico');
+				expect(getTrayIconPath({ badge: 7, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-7.ico');
+				expect(getTrayIconPath({ badge: 8, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-8.ico');
+				expect(getTrayIconPath({ badge: 9, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-9.ico');
+				expect(getTrayIconPath({ badge: 10, platform: 'win32' })).to.be.equals('public/images/tray/win32/notification-plus-9.ico');
 			});
 		});
 	});
diff --git a/src/background/tray.js b/src/background/tray.js
index f66d03cbc0..9875da31c4 100644
--- a/src/background/tray.js
+++ b/src/background/tray.js
@@ -4,17 +4,17 @@ import i18n from '../i18n';
 import { getTrayIconImage } from './icon';
 
 
-const getIconTitle = ({ badge: { title, count } }) => ((count > 0) ? title : '');
+const getIconTitle = ({ badge }) => (Number.isInteger(badge) ? String(badge) : '');
 
-const getIconTooltip = ({ badge: { title, count } }) => {
+const getIconTooltip = ({ badge }) => {
 	const appName = app.getName();
 
-	if (title === '•') {
+	if (badge === '•') {
 		return i18n.__('tray.tooltip.unreadMessage', { appName });
 	}
 
-	if (count > 0) {
-		return i18n.__('tray.tooltip.unreadMention', { appName, count });
+	if (Number.isInteger(badge)) {
+		return i18n.__('tray.tooltip.unreadMention', { appName, count: badge });
 	}
 
 	return i18n.__('tray.tooltip.noUnreadMessage', { appName });
@@ -34,10 +34,7 @@ const createContextMenuTemplate = ({ isMainWindowVisible }, events) => ([
 let trayIcon = null;
 
 let state = {
-	badge: {
-		title: '',
-		count: 0,
-	},
+	badge: null,
 	isMainWindowVisible: true,
 	showIcon: true,
 };
@@ -47,7 +44,7 @@ const instance = new (class Tray extends EventEmitter {});
 let darwinThemeSubscriberId = null;
 
 const createIcon = () => {
-	const image = getTrayIconImage(state.badge);
+	const image = getTrayIconImage({ badge: state.badge });
 
 	if (trayIcon) {
 		trayIcon.setImage(image);
@@ -58,7 +55,7 @@ const createIcon = () => {
 
 	if (process.platform === 'darwin') {
 		darwinThemeSubscriberId = systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
-			trayIcon.setImage(getTrayIconImage(state.badge));
+			trayIcon.setImage(getTrayIconImage({ badge: state.badge }));
 		});
 	}
 
diff --git a/src/preload/sidebar.js b/src/preload/sidebar.js
index 03eccef08a..69a19ccb40 100644
--- a/src/preload/sidebar.js
+++ b/src/preload/sidebar.js
@@ -1,26 +1,48 @@
 import { ipcRenderer } from 'electron';
 
 
-const requestSidebarColor = function pollSidebarColor() {
+function getStylesFromSidebar(sidebar) {
+	const { color, background } = window.getComputedStyle(sidebar);
+	const sidebarItem = sidebar.querySelector('.sidebar-item');
+	const itemColor = sidebarItem && window.getComputedStyle(sidebarItem).color;
+	ipcRenderer.sendToHost('sidebar-style', { color: itemColor || color, background });
+}
+
+function getStylesFromPage(fullpage) {
+	const { color, background } = window.getComputedStyle(fullpage);
+	ipcRenderer.sendToHost('sidebar-style', { color, background });
+}
+
+function createStylesObserver(element, getStylesFrom) {
+	const observer = new MutationObserver(() => {
+		getStylesFrom(element);
+	});
+
+	observer.observe(element, { attributes: true });
+
+	return observer;
+}
+
+let observer;
+
+function requestSidebarStyle() {
 	const sidebar = document.querySelector('.sidebar');
 	if (sidebar) {
-		const { color, background } = window.getComputedStyle(sidebar);
-		const sidebarItem = sidebar.querySelector('.sidebar-item');
-		const itemColor = sidebarItem && window.getComputedStyle(sidebarItem).color;
-		ipcRenderer.sendToHost('sidebar-background', { color: itemColor || color, background });
+		observer && observer.disconnect();
+		observer = createStylesObserver(sidebar, getStylesFromSidebar);
 		return;
 	}
 
 	const fullpage = document.querySelector('.full-page');
 	if (fullpage) {
-		const { color, background } = window.getComputedStyle(fullpage);
-		ipcRenderer.sendToHost('sidebar-background', { color, background });
+		observer = createStylesObserver(fullpage, getStylesFromPage);
+		setTimeout(requestSidebarStyle, 1000);
 		return;
 	}
 
-	requestAnimationFrame(pollSidebarColor);
-};
+	requestAnimationFrame(requestSidebarStyle);
+}
 
 export default () => {
-	ipcRenderer.on('request-sidebar-color', requestSidebarColor);
+	requestSidebarStyle();
 };
diff --git a/src/public/app.html b/src/public/app.html
index c2971c3d7f..12b9c46b1e 100644
--- a/src/public/app.html
+++ b/src/public/app.html
@@ -14,9 +14,9 @@
 </head>
 <body class="app-page app-page--loading">
 	<div class="sidebar sidebar--hidden">
-		<ul id="sidebar__servers">
+		<ul class="sidebar__list server-list">
 		</ul>
-		<ul>
+		<ul class="sidebar__list">
 			<li class="add-server">
 				<span>+</span>
 				<div class="tooltip">Add new server</div>
diff --git a/src/scripts/events.js b/src/scripts/events.js
index 241d25a659..4bff9c2b59 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -32,18 +32,29 @@ const updatePreferences = () => {
 		hasTrayIcon,
 	});
 
-	sidebar.setVisible(hasSidebar);
+	sidebar.setState({
+		visible: hasSidebar,
+	});
+
 	webview.setSidebarPaddingEnabled(!hasSidebar);
 };
 
 
 const updateServers = () => {
+	const sorting = JSON.parse(localStorage.getItem('rocket.chat.sortOrder')) || [];
+
 	menus.setState({
 		servers: Object.values(servers.hosts)
-			.sort((a, b) => (sidebar ? (sidebar.sortOrder.indexOf(a.url) - sidebar.sortOrder.indexOf(b.url)) : 0))
+			.sort(({ url: a }, { url: b }) => (sidebar ? (sorting.indexOf(a) - sorting.indexOf(b)) : 0))
 			.map(({ title, url }) => ({ title, url })),
 		currentServerUrl: servers.active,
 	});
+
+	sidebar.setState({
+		hosts: servers.hosts,
+		sorting,
+		active: servers.active,
+	});
 };
 
 
@@ -161,34 +172,26 @@ export default () => {
 	});
 
 	servers.on('host-added', (hostUrl) => {
-		sidebar.add(servers.get(hostUrl));
 		webview.add(servers.get(hostUrl));
 		updateServers();
 	});
 
 	servers.on('host-removed', (hostUrl) => {
-		sidebar.remove(hostUrl);
 		webview.remove(hostUrl);
 		updateServers();
 	});
 
 	servers.on('active-setted', (hostUrl) => {
-		sidebar.setActive(hostUrl);
 		webview.setActive(hostUrl);
-		if (webview.getActive() && webview.getActive().classList.contains('ready')) {
-			webview.getActive().send('request-sidebar-color');
-		}
 		updateServers();
 	});
 
 	servers.on('active-cleared', (hostUrl) => {
-		sidebar.deactiveAll(hostUrl);
 		webview.deactiveAll(hostUrl);
 		updateServers();
 	});
 
-	servers.on('title-setted', (hostUrl, title) => {
-		sidebar.setLabel(hostUrl, title);
+	servers.on('title-setted', () => {
 		updateServers();
 	});
 
@@ -213,17 +216,11 @@ export default () => {
 		webview.showLanding();
 	});
 
-	sidebar.on('hosts-sorted', () => {
+	sidebar.on('servers-sorted', (sorting) => {
+		localStorage.setItem('rocket.chat.sortOrder', JSON.stringify(sorting));
 		updateServers();
 	});
 
-	sidebar.on('badge-setted', () => {
-		const badge = sidebar.getGlobalBadge();
-		tray.setState({ badge });
-		dock.setState({ badge });
-	});
-
-
 	getCurrentWindow().on('hide', updateWindowState);
 	getCurrentWindow().on('show', updateWindowState);
 
@@ -234,8 +231,8 @@ export default () => {
 	tray.on('quit', () => app.quit());
 
 
-	webview.on('ipc-message-unread-changed', (hostUrl, [count]) => {
-		if (typeof count === 'number' && localStorage.getItem('showWindowOnUnreadChanged') === 'true') {
+	webview.on('ipc-message-unread-changed', (hostUrl, [badge]) => {
+		if (typeof unread === 'number' && localStorage.getItem('showWindowOnUnreadChanged') === 'true') {
 			const mainWindow = remote.getCurrentWindow();
 			if (!mainWindow.isFocused()) {
 				mainWindow.once('focus', () => mainWindow.flashFrame(false));
@@ -243,7 +240,23 @@ export default () => {
 				mainWindow.flashFrame(true);
 			}
 		}
-		sidebar.setBadge(hostUrl, count);
+
+		sidebar.setState({
+			badges: {
+				...sidebar.state.badges,
+				[hostUrl]: badge || null,
+			},
+		});
+
+		const mentionCount = Object.values(sidebar.state.badges)
+			.filter((badge) => Number.isInteger(badge))
+			.reduce((sum, count) => sum + count, 0);
+		const globalBadge = mentionCount ||
+			(Object.values(sidebar.state.badges).some((badge) => !!badge) && '•') ||
+			null;
+
+		tray.setState({ badge: globalBadge });
+		dock.setState({ badge: globalBadge });
 	});
 
 	webview.on('ipc-message-title-changed', (hostUrl, [title]) => {
@@ -254,16 +267,20 @@ export default () => {
 		servers.setActive(hostUrl);
 	});
 
-	webview.on('ipc-message-sidebar-background', (hostUrl, [colors]) => {
-		sidebar.changeSidebarColor(colors);
+	webview.on('ipc-message-sidebar-style', (hostUrl, [style]) => {
+		sidebar.setState({
+			styles: {
+				...sidebar.state.styles,
+				[hostUrl]: style || null,
+			},
+		});
 	});
 
-	webview.on('dom-ready', (webviewObj, hostUrl) => {
+	webview.on('dom-ready', () => {
 		const hasSidebar = localStorage.getItem('sidebar-closed') !== 'true';
-		sidebar.setActive(localStorage.getItem(servers.activeKey));
-		webviewObj.send('request-sidebar-color');
-		sidebar.setImage(hostUrl);
-		sidebar.setVisible(hasSidebar);
+		sidebar.setState({
+			visible: hasSidebar,
+		});
 		webview.setSidebarPaddingEnabled(!hasSidebar);
 	});
 
@@ -272,7 +289,7 @@ export default () => {
 	}
 
 	servers.restoreActive();
-	sidebar.setHosts(servers.hosts);
+	sidebar.mount();
 	updatePreferences();
 	updateServers();
 	updateWindowState();
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index 4b7e5e9d8c..d42b9d5b1d 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -4,288 +4,237 @@ import i18n from '../i18n';
 const { getCurrentWindow, Menu } = remote;
 
 
+const faviconCacheBustingTime = 15 * 60 * 1000;
+
 class SideBar extends EventEmitter {
 	constructor() {
 		super();
 
+		this.state = {
+			hosts: {},
+			sorting: [],
+			active: null,
+			badges: {},
+			styles: {},
+			showShortcuts: false,
+			visible: false,
+		};
+	}
+
+	setState(partialState) {
+		this.state = {
+			...this.state,
+			...partialState,
+		};
+
+		if (this.node) {
+			this.render();
+		}
+	}
+
+	mount() {
+		this.node = document.querySelector('.sidebar');
+
 		// TODO: use globalShortcut and mainWindow focus
 		window.addEventListener('keydown', this.handleShortcutsKey.bind(this, true));
 		window.addEventListener('keyup', this.handleShortcutsKey.bind(this, false));
 
-		document.querySelector('.add-server .tooltip').innerHTML = i18n.__('sidebar.addNewServer');
-		document.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
+		this.node.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
+
+		this.serverListElement = this.node.querySelector('.server-list');
+
+		this.render();
+	}
+
+	render() {
+		const {
+			hosts,
+			sorting,
+			active,
+			badges,
+			styles,
+			showShortcuts,
+			visible,
+		} = this.state;
+
+		this.node.classList.toggle('sidebar--shortcuts', showShortcuts);
+		this.node.classList.toggle('sidebar--hidden', !visible);
+
+		const style = styles[active] || {};
+		this.node.style.background = style.background || '';
+		this.node.style.color = style.color || '';
+
+		const orderedHosts = Object.values(hosts)
+			.sort(({ url: a }, { url: b }) => sorting.indexOf(a) - sorting.indexOf(b));
+
+		const hostUrls = orderedHosts.map(({ url }) => url);
+		Array.from(this.serverListElement.querySelectorAll('.server'))
+			.filter((serverElement) => !hostUrls.includes(serverElement.dataset.host))
+			.forEach((serverElement) => serverElement.remove());
+
+		orderedHosts.forEach((host, order) => this.renderHost({
+			...host,
+			order,
+			active: active === host.url,
+			hasUnreadMessages: !!badges[host.url],
+			mentionCount: (badges[host.url] || badges[host.url] === 0) ? parseInt(badges[host.url], 10) : null,
+		}));
+
+		this.node.querySelector('.add-server .tooltip').innerText = i18n.__('sidebar.addNewServer');
+	}
+
+	renderHost({ url, title, order, active, hasUnreadMessages, mentionCount }) {
+		let name = title.replace(/^https?:\/\/(?:www\.)?([^\/]+)(.*)/, '$1').split('.');
+		name = (name[0][0] + (name[1] ? name[1][0] : '')).toUpperCase();
+
+		const bustingParam = Math.round(Date.now() / faviconCacheBustingTime);
+		const faviconUrl = `${ url.replace(/\/$/, '') }/assets/favicon.svg?_=${ bustingParam }`;
+
+		const node = this.node.querySelector(`.server[data-url="${ url }"]`);
+		const serverElement = node ? node : document.createElement('li');
+		const initialsElement = node ? node.querySelector('.initials') : document.createElement('span');
+		const tooltipElement = node ? node.querySelector('.tooltip') : document.createElement('div');
+		const badgeElement = node ? node.querySelector('.badge') : document.createElement('div');
+		const faviconElement = node ? node.querySelector('img') : document.createElement('img');
+		const shortcutElement = node ? node.querySelector('.name') : document.createElement('div');
+
+		serverElement.setAttribute('draggable', 'true');
+		serverElement.setAttribute('server', url);
+		serverElement.dataset.url = url;
+		serverElement.dataset.host = url;
+		serverElement.dataset.sortOrder = order + 1;
+		serverElement.classList.add('server');
+		serverElement.classList.add('instance');
+		serverElement.classList.toggle('active', active);
+		serverElement.classList.toggle('unread', hasUnreadMessages);
+		serverElement.onclick = this.handleServerClick.bind(this, url);
+		serverElement.oncontextmenu = this.handleServerContextMenu.bind(this, url);
+		serverElement.ondragstart = this.handleDragStart.bind(this);
+		serverElement.ondragend = this.handleDragEnd.bind(this);
+		serverElement.ondragenter = this.handleDragEnter.bind(this);
+		serverElement.ondragover = this.handleDragOver.bind(this);
+		serverElement.ondrop = this.handleDrop.bind(this);
+
+		initialsElement.classList.add('initials');
+		initialsElement.innerText = name;
+
+		tooltipElement.classList.add('tooltip');
+		tooltipElement.innerText = title;
+
+		badgeElement.classList.add('badge');
+		badgeElement.innerText = Number.isInteger(mentionCount) ? String(mentionCount) : '',
+
+		faviconElement.onload = () => {
+			initialsElement.style.display = 'none';
+			faviconElement.style.display = 'initial';
+		};
+		faviconElement.src = faviconUrl;
+
+		shortcutElement.classList.add('name');
+		shortcutElement.innerText = `${ process.platform === 'darwin' ? '⌘' : '^' }${ order + 1 }`;
 
-		this.sortOrder = JSON.parse(localStorage.getItem(this.sortOrderKey)) || [];
-		localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
+		if (!node) {
+			serverElement.appendChild(initialsElement);
+			serverElement.appendChild(tooltipElement);
+			serverElement.appendChild(badgeElement);
+			serverElement.appendChild(faviconElement);
+			serverElement.appendChild(shortcutElement);
+		}
 
-		this.listElement = document.getElementById('sidebar__servers');
+		const shouldAppend = !node || order !== Array.from(this.serverListElement.children).indexOf(serverElement);
+
+		if (shouldAppend) {
+			this.serverListElement.appendChild(serverElement);
+		}
 	}
 
 	handleShortcutsKey(down, event) {
-		const shortcutKey = process.platform === 'darwin' ? 'Meta' : 'ctrlKey';
+		const shortcutKey = process.platform === 'darwin' ? 'Meta' : 'Control';
 		if (event.key === shortcutKey) {
-			document.querySelector('.sidebar').classList[down ? 'add' : 'remove']('command-pressed');
+			this.setState({ showShortcuts: down });
 		}
 	}
 
-	handleServerClick(hostUrl) {
-		this.emit('select-server', hostUrl);
+	handleServerClick(url) {
+		this.emit('select-server', url);
 	}
 
-	handleServerContextMenu(hostUrl, event) {
+	handleServerContextMenu(url, event) {
 		event.preventDefault();
 
 		const menu = Menu.buildFromTemplate([
 			{
 				label: i18n.__('sidebar.item.reload'),
-				click: () => this.emit('reload-server', hostUrl),
+				click: () => this.emit('reload-server', url),
 			},
 			{
 				label: i18n.__('sidebar.item.remove'),
-				click: () => this.emit('remove-server', hostUrl),
+				click: () => this.emit('remove-server', url),
 			},
 			{
 				label: i18n.__('sidebar.item.openDevTools'),
-				click: () => this.emit('open-devtools-for-server', hostUrl),
+				click: () => this.emit('open-devtools-for-server', url),
 			},
 		]);
 		menu.popup(getCurrentWindow());
 	}
 
-	handleAddServerClick() {
-		this.emit('add-server');
-	}
+	handleDragStart(event) {
+		const serverElement = event.currentTarget;
+		serverElement.classList.add('server--dragged');
+		serverElement.style.opacity = .5;
 
-	setHosts(hosts) {
-		Object.values(hosts)
-			.sort(({ url: a, url: b }) => this.sortOrder.indexOf(a) - this.sortOrder.indexOf(b))
-			.forEach((host) => this.add(host));
+		event.dataTransfer.dropEffect = 'move';
+		event.dataTransfer.effectAllowed = 'move';
 	}
 
-	get sortOrderKey() {
-		return 'rocket.chat.sortOrder';
+	handleDragEnd(event) {
+		const serverElement = event.currentTarget;
+		serverElement.classList.remove('server--dragged');
+		serverElement.style.opacity = '';
 	}
 
-	isBefore(a, b) {
-		if (a.parentNode === b.parentNode) {
-			for (let cur = a; cur; cur = cur.previousSibling) {
-				if (cur === b) {
+	handleDragEnter(event) {
+		const draggedServerElement = this.serverListElement.querySelector('.server--dragged');
+		const targetServerElement = event.currentTarget;
+
+		const isTargetBeforeDragged = (() => {
+			for (let current = draggedServerElement; current; current = current.previousSibling) {
+				if (current === targetServerElement) {
 					return true;
 				}
 			}
-		}
-		return false;
-	}
-
-	add(host) {
-		let name = host.title.replace(/^https?:\/\/(?:www\.)?([^\/]+)(.*)/, '$1');
-		name = name.split('.');
-		name = name[0][0] + (name[1] ? name[1][0] : '');
-		name = name.toUpperCase();
-
-		const initials = document.createElement('span');
-		initials.innerHTML = name;
-
-		const tooltip = document.createElement('div');
-		tooltip.classList.add('tooltip');
-		tooltip.innerHTML = host.title;
 
-		const badge = document.createElement('div');
-		badge.classList.add('badge');
-
-		const img = document.createElement('img');
-		img.onload = function() {
-			img.style.display = 'initial';
-			initials.style.display = 'none';
-		};
-
-		let hostOrder = 0;
-		if (this.sortOrder.includes(host.url)) {
-			hostOrder = this.sortOrder.indexOf(host.url) + 1;
-		} else {
-			hostOrder = this.sortOrder.length + 1;
-			this.sortOrder.push(host.url);
-		}
+			return false;
+		})();
 
-		const shortcut = document.createElement('div');
-		shortcut.classList.add('name');
-		if (process.platform === 'darwin') {
-			shortcut.innerHTML = `⌘${ hostOrder }`;
+		if (isTargetBeforeDragged) {
+			this.serverListElement.insertBefore(draggedServerElement, targetServerElement);
+		} else if (targetServerElement !== this.serverListElement.lastChild) {
+			this.serverListElement.insertBefore(draggedServerElement, targetServerElement.nextSibling);
 		} else {
-			shortcut.innerHTML = `^${ hostOrder }`;
-		}
-
-		const item = document.createElement('li');
-		item.appendChild(initials);
-		item.appendChild(tooltip);
-		item.appendChild(badge);
-		item.appendChild(img);
-		item.appendChild(shortcut);
-
-		item.dataset.host = host.url;
-		item.dataset.sortOrder = hostOrder;
-		item.setAttribute('server', host.url);
-		item.classList.add('instance');
-
-		item.setAttribute('draggable', true);
-
-		item.ondragstart = (event) => {
-			window.dragged = event.target.nodeName !== 'LI' ? event.target.closest('li') : event.target;
-			event.dataTransfer.effectAllowed = 'move';
-			event.dataTransfer.dropEffect = 'move';
-			event.target.style.opacity = .5;
-		};
-
-		item.ondragover = (event) => {
-			event.preventDefault();
-		};
-
-		item.ondragenter = (event) => {
-			if (this.isBefore(window.dragged, event.target)) {
-				event.currentTarget.parentNode.insertBefore(window.dragged, event.currentTarget);
-			} else if (event.currentTarget !== event.currentTarget.parentNode.lastChild) {
-				event.currentTarget.parentNode.insertBefore(window.dragged, event.currentTarget.nextSibling);
-			} else {
-				event.currentTarget.parentNode.appendChild(window.dragged);
-			}
-		};
-
-		item.ondragend = (event) => {
-			event.target.style.opacity = '';
-		};
-
-		item.ondrop = (event) => {
-			event.preventDefault();
-
-			const newSortOrder = [];
-			Array.from(event.currentTarget.parentNode.children)
-				.map((sideBarElement) => {
-					const url = sideBarElement.dataset.host;
-					newSortOrder.push(url);
-					this.remove(url);
-
-					return sideBarElement;
-				})
-				.forEach((sideBarElement) => {
-					this.sortOrder = newSortOrder;
-					localStorage.setItem(this.sortOrderKey, JSON.stringify(this.sortOrder));
-
-					const url = sideBarElement.dataset.host;
-					const host = { url, title: sideBarElement.querySelector('div.tooltip').innerHTML };
-					this.add(host);
-					this.setImage(url);
-				});
-
-			this.emit('select-server', window.dragged.dataset.host);
-		};
-
-		item.addEventListener('click', this.handleServerClick.bind(this, host.url), false);
-		item.addEventListener('contextmenu', this.handleServerContextMenu.bind(this, host.url), false);
-
-		this.listElement.appendChild(item);
-		this.emit('hosts-sorted');
-	}
-
-	setImage(hostUrl) {
-		const img = this.getByUrl(hostUrl).querySelector('img');
-		img.src = `${ hostUrl.replace(/\/$/, '') }/assets/favicon.svg?v=${ Math.round(Math.random() * 10000) }`;
-	}
-
-	remove(hostUrl) {
-		const el = this.getByUrl(hostUrl);
-		if (el) {
-			el.remove();
-		}
-	}
-
-	getByUrl(hostUrl) {
-		return this.listElement.querySelector(`.instance[server="${ hostUrl }"]`);
-	}
-
-	getActive() {
-		return this.listElement.querySelector('.instance.active');
-	}
-
-	isActive(hostUrl) {
-		return !!this.listElement.querySelector(`.instance.active[server="${ hostUrl }"]`);
-	}
-
-	changeSidebarColor({ color, background }) {
-		const sidebar = document.querySelector('.sidebar');
-		if (sidebar) {
-			sidebar.style.background = background;
-			sidebar.style.color = color;
-		}
-	}
-
-	setActive(hostUrl) {
-		if (this.isActive(hostUrl)) {
-			return;
-		}
-
-		this.deactiveAll();
-		const item = this.getByUrl(hostUrl);
-		if (item) {
-			item.classList.add('active');
+			this.serverListElement.appendChild(draggedServerElement);
 		}
 	}
 
-	deactiveAll() {
-		let item;
-		while (!(item = this.getActive()) === false) {
-			item.classList.remove('active');
-		}
+	handleDragOver(event) {
+		event.preventDefault();
 	}
 
-	setLabel(hostUrl, label) {
-		this.listElement.querySelector(`.instance[server="${ hostUrl }"] .tooltip`).innerHTML = label;
-	}
+	handleDrop(event) {
+		event.preventDefault();
 
-	setBadge(hostUrl, badge) {
-		const item = this.getByUrl(hostUrl);
-		const badgeEl = item.querySelector('.badge');
+		const serverElement = event.currentTarget;
 
-		if (badge !== null && badge !== undefined && badge !== '') {
-			item.classList.add('unread');
-			if (isNaN(parseInt(badge))) {
-				badgeEl.innerHTML = '';
-			} else {
-				badgeEl.innerHTML = badge;
-			}
-		} else {
-			badge = undefined;
-			item.classList.remove('unread');
-			badgeEl.innerHTML = '';
-		}
-		this.emit('badge-setted', hostUrl, badge);
-	}
+		const newSorting = Array.from(this.serverListElement.querySelectorAll('.server'))
+			.reduce((sorting, serverElement) => [...sorting, serverElement.dataset.url], []);
 
-	getGlobalBadge() {
-		let count = 0;
-		let title = '';
-		const instanceEls = this.listElement.querySelectorAll('li.instance');
-		for (let i = instanceEls.length - 1; i >= 0; i--) {
-			const instanceEl = instanceEls[i];
-			const text = instanceEl.querySelector('.badge').innerHTML;
-			if (!isNaN(parseInt(text))) {
-				count += parseInt(text);
-			}
-			if (title === '' && instanceEl.classList.contains('unread') === true) {
-				title = '•';
-			}
-		}
-		if (count > 0) {
-			title = count.toString();
-		}
-		return {
-			count,
-			title,
-			showAlert: (title !== ''),
-		};
+		this.emit('servers-sorted', newSorting);
+		this.emit('select-server', serverElement.dataset.host);
 	}
 
-	setVisible(visible) {
-		document.querySelector('.sidebar').classList[visible ? 'remove' : 'add']('sidebar--hidden');
+	handleAddServerClick() {
+		this.emit('add-server');
 	}
 }
 
diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
index 892385e4b9..9fa2710ab8 100644
--- a/src/stylesheets/pages/app/sidebar.less
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -11,28 +11,41 @@
 	color: #ffffff;
 	background-color: @primary-background-color;
 	-webkit-app-region: drag;
-}
 
-.sidebar::after {
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	&::after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
 
-	content: "";
+		content: "";
 
-	background-color: rgba(0, 0, 0, 0.1);
-}
+		background-color: rgba(0, 0, 0, 0.1);
+	}
 
-.sidebar ul {
-	position: relative;
-	z-index: 2;
 
-	margin: 0;
-	padding: 0;
-	-webkit-app-region: no-drag;
+	.sidebar__list {
+		position: relative;
+		z-index: 2;
+
+		margin: 0;
+		padding: 0;
+		-webkit-app-region: no-drag;
+	}
+
+	&.sidebar--shortcuts li .name {
+		display: initial;
+	}
+
+	&.sidebar--hidden {
+		display: none;
+
+		& ~ .landing-page,
+		& ~ webview {
+			left: 0;
+		}
+	}
 }
 
 .sidebar li {
@@ -175,10 +188,6 @@
 	line-height: 11px;
 }
 
-.command-pressed li .name {
-	display: initial;
-}
-
 .sidebar li:hover span {
 	opacity: 0.8;
 }
@@ -198,15 +207,3 @@
 .sidebar li.add-server span {
 	font-size: 40px;
 }
-
-.sidebar.sidebar--hidden {
-	display: none;
-}
-
-.sidebar.sidebar--hidden ~ webview {
-	left: 0;
-}
-
-.sidebar.sidebar--hidden ~ .landing-page {
-	left: 0;
-}

From 71941807df6da40e6c27f0c1a6df039d127c88da Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 1 Mar 2019 03:08:32 -0300
Subject: [PATCH 08/15] Update sidebar styles

---
 src/public/app.html                    |  15 +-
 src/scripts/sidebar.js                 |  76 +++---
 src/stylesheets/pages/app/sidebar.less | 330 +++++++++++++++----------
 3 files changed, 242 insertions(+), 179 deletions(-)

diff --git a/src/public/app.html b/src/public/app.html
index 12b9c46b1e..4c2268decc 100644
--- a/src/public/app.html
+++ b/src/public/app.html
@@ -14,14 +14,13 @@
 </head>
 <body class="app-page app-page--loading">
 	<div class="sidebar sidebar--hidden">
-		<ul class="sidebar__list server-list">
-		</ul>
-		<ul class="sidebar__list">
-			<li class="add-server">
-				<span>+</span>
-				<div class="tooltip">Add new server</div>
-			</li>
-		</ul>
+		<div class="sidebar__inner">
+			<ol class="sidebar__list sidebar__server-list">
+			</ol>
+			<button class="sidebar__action sidebar__add-server" data-tooltip="Add server">
+				<span class="sidebar__action-label">+</span>
+			</button>
+		</div>
 	</div>
 
 	<section class="landing-page">
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index d42b9d5b1d..062f180009 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -1,6 +1,7 @@
 import { remote } from 'electron';
 import { EventEmitter } from 'events';
 import i18n from '../i18n';
+import { parse as parseUrl } from 'url';
 const { getCurrentWindow, Menu } = remote;
 
 
@@ -39,9 +40,9 @@ class SideBar extends EventEmitter {
 		window.addEventListener('keydown', this.handleShortcutsKey.bind(this, true));
 		window.addEventListener('keyup', this.handleShortcutsKey.bind(this, false));
 
-		this.node.querySelector('.add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
+		this.node.querySelector('.sidebar__add-server').addEventListener('click', this.handleAddServerClick.bind(this), false);
 
-		this.serverListElement = this.node.querySelector('.server-list');
+		this.serverListElement = this.node.querySelector('.sidebar__server-list');
 
 		this.render();
 	}
@@ -57,19 +58,19 @@ class SideBar extends EventEmitter {
 			visible,
 		} = this.state;
 
-		this.node.classList.toggle('sidebar--shortcuts', showShortcuts);
 		this.node.classList.toggle('sidebar--hidden', !visible);
+		this.serverListElement.classList.toggle('sidebar__server-list--shortcuts', showShortcuts);
 
 		const style = styles[active] || {};
-		this.node.style.background = style.background || '';
-		this.node.style.color = style.color || '';
+		this.node.style.setProperty('--background', style.background || '');
+		this.node.style.setProperty('--color', style.color || '');
 
 		const orderedHosts = Object.values(hosts)
 			.sort(({ url: a }, { url: b }) => sorting.indexOf(a) - sorting.indexOf(b));
 
 		const hostUrls = orderedHosts.map(({ url }) => url);
 		Array.from(this.serverListElement.querySelectorAll('.server'))
-			.filter((serverElement) => !hostUrls.includes(serverElement.dataset.host))
+			.filter((serverElement) => !hostUrls.includes(serverElement.dataset.url))
 			.forEach((serverElement) => serverElement.remove());
 
 		orderedHosts.forEach((host, order) => this.renderHost({
@@ -80,33 +81,35 @@ class SideBar extends EventEmitter {
 			mentionCount: (badges[host.url] || badges[host.url] === 0) ? parseInt(badges[host.url], 10) : null,
 		}));
 
-		this.node.querySelector('.add-server .tooltip').innerText = i18n.__('sidebar.addNewServer');
+		this.node.querySelector('.sidebar__add-server').dataset.tooltip = i18n.__('sidebar.addNewServer');
 	}
 
 	renderHost({ url, title, order, active, hasUnreadMessages, mentionCount }) {
-		let name = title.replace(/^https?:\/\/(?:www\.)?([^\/]+)(.*)/, '$1').split('.');
-		name = (name[0][0] + (name[1] ? name[1][0] : '')).toUpperCase();
-
+		const initials = (
+			title
+				.replace(url, parseUrl(url).hostname)
+				.split(/[^A-Za-z0-9]+/g)
+				.slice(0, 2)
+				.map((text) => text[0].toUpperCase())
+				.join('')
+		);
 		const bustingParam = Math.round(Date.now() / faviconCacheBustingTime);
 		const faviconUrl = `${ url.replace(/\/$/, '') }/assets/favicon.svg?_=${ bustingParam }`;
 
 		const node = this.node.querySelector(`.server[data-url="${ url }"]`);
 		const serverElement = node ? node : document.createElement('li');
-		const initialsElement = node ? node.querySelector('.initials') : document.createElement('span');
-		const tooltipElement = node ? node.querySelector('.tooltip') : document.createElement('div');
-		const badgeElement = node ? node.querySelector('.badge') : document.createElement('div');
-		const faviconElement = node ? node.querySelector('img') : document.createElement('img');
-		const shortcutElement = node ? node.querySelector('.name') : document.createElement('div');
+		const initialsElement = node ? node.querySelector('.server__initials') : document.createElement('span');
+		const faviconElement = node ? node.querySelector('.server__favicon') : document.createElement('img');
+		const badgeElement = node ? node.querySelector('.server__badge') : document.createElement('div');
+		const shortcutElement = node ? node.querySelector('.server__shortcut') : document.createElement('div');
 
 		serverElement.setAttribute('draggable', 'true');
-		serverElement.setAttribute('server', url);
 		serverElement.dataset.url = url;
-		serverElement.dataset.host = url;
-		serverElement.dataset.sortOrder = order + 1;
+		serverElement.dataset.tooltip = title;
+		serverElement.classList.add('sidebar__list-item');
 		serverElement.classList.add('server');
-		serverElement.classList.add('instance');
-		serverElement.classList.toggle('active', active);
-		serverElement.classList.toggle('unread', hasUnreadMessages);
+		serverElement.classList.toggle('server--active', active);
+		serverElement.classList.toggle('server--unread', hasUnreadMessages);
 		serverElement.onclick = this.handleServerClick.bind(this, url);
 		serverElement.oncontextmenu = this.handleServerContextMenu.bind(this, url);
 		serverElement.ondragstart = this.handleDragStart.bind(this);
@@ -115,29 +118,28 @@ class SideBar extends EventEmitter {
 		serverElement.ondragover = this.handleDragOver.bind(this);
 		serverElement.ondrop = this.handleDrop.bind(this);
 
-		initialsElement.classList.add('initials');
-		initialsElement.innerText = name;
-
-		tooltipElement.classList.add('tooltip');
-		tooltipElement.innerText = title;
-
-		badgeElement.classList.add('badge');
-		badgeElement.innerText = Number.isInteger(mentionCount) ? String(mentionCount) : '',
+		initialsElement.classList.add('server__initials');
+		initialsElement.innerText = initials;
 
+		faviconElement.classList.add('server__favicon');
 		faviconElement.onload = () => {
-			initialsElement.style.display = 'none';
-			faviconElement.style.display = 'initial';
+			serverElement.classList.add('server--with-favicon');
+		};
+		faviconElement.onerror = () => {
+			serverElement.classList.remove('server--with-favicon');
 		};
 		faviconElement.src = faviconUrl;
 
-		shortcutElement.classList.add('name');
+		badgeElement.classList.add('server__badge');
+		badgeElement.innerText = Number.isInteger(mentionCount) ? String(mentionCount) : '',
+
+		shortcutElement.classList.add('server__shortcut');
 		shortcutElement.innerText = `${ process.platform === 'darwin' ? '⌘' : '^' }${ order + 1 }`;
 
 		if (!node) {
 			serverElement.appendChild(initialsElement);
-			serverElement.appendChild(tooltipElement);
-			serverElement.appendChild(badgeElement);
 			serverElement.appendChild(faviconElement);
+			serverElement.appendChild(badgeElement);
 			serverElement.appendChild(shortcutElement);
 		}
 
@@ -182,7 +184,6 @@ class SideBar extends EventEmitter {
 	handleDragStart(event) {
 		const serverElement = event.currentTarget;
 		serverElement.classList.add('server--dragged');
-		serverElement.style.opacity = .5;
 
 		event.dataTransfer.dropEffect = 'move';
 		event.dataTransfer.effectAllowed = 'move';
@@ -191,7 +192,6 @@ class SideBar extends EventEmitter {
 	handleDragEnd(event) {
 		const serverElement = event.currentTarget;
 		serverElement.classList.remove('server--dragged');
-		serverElement.style.opacity = '';
 	}
 
 	handleDragEnter(event) {
@@ -227,10 +227,10 @@ class SideBar extends EventEmitter {
 		const serverElement = event.currentTarget;
 
 		const newSorting = Array.from(this.serverListElement.querySelectorAll('.server'))
-			.reduce((sorting, serverElement) => [...sorting, serverElement.dataset.url], []);
+			.map((serverElement) => serverElement.dataset.url);
 
 		this.emit('servers-sorted', newSorting);
-		this.emit('select-server', serverElement.dataset.host);
+		this.emit('select-server', serverElement.dataset.url);
 	}
 
 	handleAddServerClick() {
diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
index 9fa2710ab8..e7c63964ac 100644
--- a/src/stylesheets/pages/app/sidebar.less
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -1,209 +1,273 @@
 .sidebar {
+	--transitions-duration: 200ms;
+
 	position: fixed;
 	z-index: 100000;
 	top: 0;
 	bottom: 0;
 
+	display: flex;
+	flex-direction: column;
+
 	width: 68px;
 	height: 100%;
-	padding-top: 27px;
 
-	color: #ffffff;
-	background-color: @primary-background-color;
+	user-select: none;
+
+	color: var(--color, #ffffff);
+	background: var(--background, @primary-background-color);
+	align-items: stretch;
 	-webkit-app-region: drag;
 
-	&::after {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+	&.sidebar--hidden {
+		display: none;
+
+		& ~ .landing-page,
+		& ~ webview {
+			left: 0;
+		}
+	}
+
+	.sidebar__inner {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 0;
 
-		content: "";
+		padding-top: 20px;
 
 		background-color: rgba(0, 0, 0, 0.1);
+		align-items: stretch;
 	}
 
-
 	.sidebar__list {
-		position: relative;
-		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 auto;
 
 		margin: 0;
 		padding: 0;
+		align-items: stretch;
 		-webkit-app-region: no-drag;
 	}
 
-	&.sidebar--shortcuts li .name {
-		display: initial;
-	}
+	.sidebar__action,
+	.sidebar__list-item {
+		position: relative;
 
-	&.sidebar--hidden {
-		display: none;
+		flex: 0 0 auto;
 
-		& ~ .landing-page,
-		& ~ webview {
-			left: 0;
+		box-sizing: border-box;
+		margin: 4px 0;
+
+		font-size: 2.5rem;
+		line-height: 1.25;
+
+		&[data-tooltip]::after {
+			position: absolute;
+			top: 50%;
+			left: 100%;
+
+			display: block;
+			visibility: hidden;
+
+			padding: 0.5rem 1rem;
+
+			content: attr(data-tooltip);
+
+			transition: all var(--transitions-duration) ease-out var(--transitions-duration);
+			transform: translate(10px, -50%);
+
+			white-space: nowrap;
+			pointer-events: none;
+
+			opacity: 0;
+
+			color: #ffffff;
+			border-radius: 2px;
+			background-color: #1f2329;
+
+			font-size: 0.875rem;
+			line-height: normal;
 		}
-	}
-}
 
-.sidebar li {
+		&[data-tooltip]:hover::after {
+			visibility: visible;
 
-	position: relative;
+			transform: translate(0, -50%);
 
-	display: flex;
+			opacity: 1;
+		}
+	}
 
-	height: 55px;
-	margin-bottom: 17px;
+	.sidebar__action {
+		display: flex;
+		flex-direction: row;
 
-	cursor: pointer;
-	-webkit-user-select: none;
-	user-select: none;
+		height: 40px;
+		padding: 0;
 
-	color: inherit;
+		cursor: pointer;
 
-	font-size: 17pt;
-	align-items: center;
-	-webkit-app-region: no-drag;
-	filter: brightness(110%);
-	justify-content: flex-start;
-}
+		color: inherit;
 
-.sidebar li.active img {
-	opacity: 1;
-}
+		border: none;
+		background: none;
 
-.sidebar li.active span {
-	opacity: 1;
-}
+		align-items: center;
+		justify-content: center;
 
-.sidebar li.unread::before {
-	width: 5px;
-	height: 6px;
+		.sidebar__action-label {
+			width: 40px;
+			height: 40px;
 
-	opacity: 0.6;
-}
+			transition: opacity var(--transitions-duration);
+
+			opacity: 0.6;
+			color: inherit;
+			background-color: rgba(0, 0, 0, 0.1);
+		}
 
-.sidebar li.active::before {
-	width: 5px;
-	height: 30px;
+		&:hover .sidebar__action-label {
+			opacity: 1;
+		}
+	}
 
-	opacity: 1;
+	.sidebar__add-server .sidebar__action-label {
+		line-height: 30px;
+	}
 }
 
-.sidebar li::before {
-	width: 0;
-	height: 0;
+.sidebar__server-list {
+	&.sidebar__server-list--shortcuts .server .server__shortcut {
+		visibility: visible;
+	}
 
-	content: "";
-	transition: height 0.2s, opacity 0.2s;
+	.server {
+		position: relative;
 
-	opacity: 1;
-	border-radius: 0 3px 3px 0;
-	background-color: #ffffff;
-}
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
 
-.sidebar img {
-	position: absolute;
-	left: 15px;
+		cursor: pointer;
 
-	display: none;
+		color: inherit;
 
-	width: 42px;
-	height: 42px;
+		font-size: 24px;
+		align-items: center;
+		justify-content: space-between;
 
-	transition: opacity 0.2s;
+		&::before {
+			flex: 0 0 auto;
 
-	opacity: 0.6;
-}
+			width: 5px;
+			margin-right: -5px;
+			height: 0;
 
-.sidebar span {
-	position: absolute;
+			content: "";
+			transition:
+				height var(--transitions-duration),
+				opacity var(--transitions-duration);
 
-	width: 100%;
+			opacity: 1;
+			border-radius: 0 3px 3px 0;
+			background-color: #ffffff;
+		}
 
-	transition: opacity 0.2s;
-	text-align: center;
+		.server__initials {
+			flex: 1 1 auto;
 
-	opacity: 0.6;
+			transition: opacity var(--transitions-duration);
+			text-align: center;
 
-	line-height: 60px;
-}
+			opacity: 0.6;
 
-.sidebar li .tooltip {
-	position: absolute;
-	top: 15px;
-	left: 70px;
+			line-height: 42px;
+		}
 
-	display: none;
+		.server__favicon {
+			display: none;
+			flex: 1 1 auto;
 
-	padding: 0 15px;
+			width: 42px;
+			height: 42px;
 
-	white-space: nowrap;
+			transition: opacity var(--transitions-duration);
 
-	color: #ffffff;
-	border-radius: 6px;
-	background-color: #000000;
+			opacity: 0.6;
+			object-fit: contain;
+		}
 
-	font-size: 14px;
-	line-height: 30px;
-}
+		.server__badge {
+			display: block;
+			position: absolute;
+			z-index: 1;
+			top: 2px;
+			right: 8px;
 
-.sidebar li .badge {
-	position: absolute;
-	z-index: 1;
-	top: 2px;
-	right: 8px;
+			min-width: 15px;
 
-	min-width: 15px;
-	padding: 0 5px;
+			text-align: center;
 
-	text-align: center;
+			border-radius: 20px;
+			background-color: #e43325;
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 
-	border-radius: 20px;
-	background-color: #e43325;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+			font-size: 10px;
+			font-weight: bold;
+			line-height: 15px;
+		}
 
-	font-family: Helvetica;
-	font-size: 11px;
-	font-weight: bold;
-	line-height: 15px;
-}
+		.server__shortcut {
+			visibility: hidden;
+			flex: 1 0 100%;
 
-.sidebar li .name {
-	position: absolute;
-	bottom: -12px;
+			text-align: center;
 
-	display: none;
+			padding-top: 8px;
+			font-size: 12px;
+			line-height: 1;
+		}
 
-	width: 100%;
+		&.server--unread {
+			&::before {
+				height: 6px;
 
-	text-align: center;
+				opacity: 0.6;
+			}
+		}
 
-	opacity: 0.6;
+		&.server--active,
+		&:hover.server--active {
+			&::before {
+				height: 30px;
 
-	font-size: 12px;
-	font-weight: 600;
-	line-height: 11px;
-}
+				opacity: 1;
+			}
 
-.sidebar li:hover span {
-	opacity: 0.8;
-}
+			.server__favicon,
+			.server__initials {
+				opacity: 1;
+			}
+		}
 
-.sidebar li:hover img {
-	opacity: 0.8;
-}
+		&.server--with-favicon {
+			.server__initials {
+				display: none;
+			}
 
-.sidebar li:hover .tooltip {
-	display: block;
-}
+			.server__favicon {
+				display: initial;
+			}
+		}
 
-.sidebar li.add-server {
-	height: 30px;
-}
+		&.server--dragged {
+			opacity: 0.5;
+		}
 
-.sidebar li.add-server span {
-	font-size: 40px;
+		&:hover .server__initials,
+		&:hover .server__favicon {
+			opacity: 0.8;
+		}
+	}
 }

From 491d8b4cf5aa666e63427d22ba00123a311d5c4b Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 1 Mar 2019 17:14:01 -0300
Subject: [PATCH 09/15] Fix sidebar style preload

---
 src/preload/sidebar.js | 3 ++-
 src/scripts/servers.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/preload/sidebar.js b/src/preload/sidebar.js
index 69a19ccb40..e0ad12eb3b 100644
--- a/src/preload/sidebar.js
+++ b/src/preload/sidebar.js
@@ -19,6 +19,7 @@ function createStylesObserver(element, getStylesFrom) {
 	});
 
 	observer.observe(element, { attributes: true });
+	getStylesFrom(element);
 
 	return observer;
 }
@@ -44,5 +45,5 @@ function requestSidebarStyle() {
 }
 
 export default () => {
-	requestSidebarStyle();
+	window.addEventListener('load', requestSidebarStyle);
 };
diff --git a/src/scripts/servers.js b/src/scripts/servers.js
index 2d49793243..641c1b68ae 100644
--- a/src/scripts/servers.js
+++ b/src/scripts/servers.js
@@ -201,7 +201,8 @@ class Servers extends EventEmitter {
 	}
 
 	get active() {
-		return localStorage.getItem(this.activeKey);
+		const active = localStorage.getItem(this.activeKey);
+		return active === 'null' ? null : active;
 	}
 
 	setActive(hostUrl) {

From ff52a841605d9122f936857199dcab808ded3cb3 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 1 Mar 2019 17:28:15 -0300
Subject: [PATCH 10/15] Add small fixes to sidebar

---
 src/scripts/sidebar.js                 | 2 ++
 src/stylesheets/pages/app/sidebar.less | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index 062f180009..7aa9116fca 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -35,6 +35,7 @@ class SideBar extends EventEmitter {
 
 	mount() {
 		this.node = document.querySelector('.sidebar');
+		this.node.classList.toggle('sidebar--macos', process.platform === 'darwin');
 
 		// TODO: use globalShortcut and mainWindow focus
 		window.addEventListener('keydown', this.handleShortcutsKey.bind(this, true));
@@ -121,6 +122,7 @@ class SideBar extends EventEmitter {
 		initialsElement.classList.add('server__initials');
 		initialsElement.innerText = initials;
 
+		faviconElement.setAttribute('draggable', 'false');
 		faviconElement.classList.add('server__favicon');
 		faviconElement.onload = () => {
 			serverElement.classList.add('server--with-favicon');
diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
index e7c63964ac..adc8a0ddc1 100644
--- a/src/stylesheets/pages/app/sidebar.less
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -28,13 +28,17 @@
 		}
 	}
 
+	&.sidebar--macos {
+		.sidebar__inner {
+			padding-top: 28px;
+		}
+	}
+
 	.sidebar__inner {
 		display: flex;
 		flex-direction: column;
 		flex: 1 1 0;
 
-		padding-top: 20px;
-
 		background-color: rgba(0, 0, 0, 0.1);
 		align-items: stretch;
 	}
@@ -211,6 +215,7 @@
 
 			border-radius: 20px;
 			background-color: #e43325;
+			color: #ffffff;
 			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 
 			font-size: 10px;

From f4560da361233d3c1f12271cf3fbc8523ab39160 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 1 Mar 2019 17:33:30 -0300
Subject: [PATCH 11/15] Show landing page on remove server

---
 src/scripts/events.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scripts/events.js b/src/scripts/events.js
index 4bff9c2b59..cb03849e8b 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -178,6 +178,8 @@ export default () => {
 
 	servers.on('host-removed', (hostUrl) => {
 		webview.remove(hostUrl);
+		servers.clearActive();
+		webview.showLanding();
 		updateServers();
 	});
 

From 44eee940340237d798461f80e60c4822b70ee161 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 6 Mar 2019 15:36:56 -0300
Subject: [PATCH 12/15] Fix stylelint errors

---
 src/stylesheets/pages/app/sidebar.less | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
index adc8a0ddc1..3bc7337c60 100644
--- a/src/stylesheets/pages/app/sidebar.less
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -150,8 +150,6 @@
 		position: relative;
 
 		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
 
 		cursor: pointer;
 
@@ -159,14 +157,15 @@
 
 		font-size: 24px;
 		align-items: center;
+		flex-flow: row wrap;
 		justify-content: space-between;
 
 		&::before {
 			flex: 0 0 auto;
 
 			width: 5px;
-			margin-right: -5px;
 			height: 0;
+			margin-right: -5px;
 
 			content: "";
 			transition:
@@ -203,19 +202,21 @@
 		}
 
 		.server__badge {
-			display: block;
 			position: absolute;
 			z-index: 1;
 			top: 2px;
 			right: 8px;
 
+			display: block;
+
 			min-width: 15px;
 
 			text-align: center;
 
+			color: #ffffff;
+
 			border-radius: 20px;
 			background-color: #e43325;
-			color: #ffffff;
 			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 
 			font-size: 10px;
@@ -227,9 +228,10 @@
 			visibility: hidden;
 			flex: 1 0 100%;
 
+			padding-top: 8px;
+
 			text-align: center;
 
-			padding-top: 8px;
 			font-size: 12px;
 			line-height: 1;
 		}

From 024708761b25d2fab5b6e40948b1750c838aee55 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 6 Mar 2019 18:10:50 -0300
Subject: [PATCH 13/15] Make stylelint ignore webview tag

---
 .stylelintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.stylelintrc b/.stylelintrc
index a6f49c9715..3085572334 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -123,7 +123,7 @@
 		"selector-pseudo-element-colon-notation": "double",
 		"selector-pseudo-element-no-unknown": true,
 		"selector-type-case": "lower",
-		"selector-type-no-unknown": true,
+		"selector-type-no-unknown": [true, { "ignoreTypes": ["webview"] }],
 		"shorthand-property-no-redundant-values": true,
 		"string-no-newline": true,
 		"unit-case": "lower",

From f6ad6dc13a352f80c1560b5d4bbf311494f8d8f6 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 7 Mar 2019 16:59:24 -0300
Subject: [PATCH 14/15] Add smooth transitions for webviews

---
 src/scripts/webview.js                 | 1 +
 src/stylesheets/pages/app.less         | 3 +++
 src/stylesheets/pages/app/webview.less | 9 +++++++++
 3 files changed, 13 insertions(+)
 create mode 100644 src/stylesheets/pages/app/webview.less

diff --git a/src/scripts/webview.js b/src/scripts/webview.js
index 1147905385..9ec8fadc4a 100644
--- a/src/scripts/webview.js
+++ b/src/scripts/webview.js
@@ -36,6 +36,7 @@ class WebView extends EventEmitter {
 		}
 
 		webviewObj = document.createElement('webview');
+		webviewObj.classList.add('webview');
 		webviewObj.setAttribute('server', host.url);
 		webviewObj.setAttribute('preload', '../preload.js');
 		webviewObj.setAttribute('allowpopups', 'on');
diff --git a/src/stylesheets/pages/app.less b/src/stylesheets/pages/app.less
index 03868a73e3..baa4179e95 100644
--- a/src/stylesheets/pages/app.less
+++ b/src/stylesheets/pages/app.less
@@ -1,9 +1,12 @@
 @import './app/sidebar.less';
+@import './app/webview.less';
 
 .app-page {
 	cursor: default;
 	user-select: none;
 
+	background: @primary-background-color;
+
 	&.app-page--loading {
 		.loading-indicator {
 			display: flex;
diff --git a/src/stylesheets/pages/app/webview.less b/src/stylesheets/pages/app/webview.less
new file mode 100644
index 0000000000..86fafc1d77
--- /dev/null
+++ b/src/stylesheets/pages/app/webview.less
@@ -0,0 +1,9 @@
+.webview {
+	transition: opacity linear 100ms;
+
+	opacity: 0;
+
+	&.ready.active {
+		opacity: 1;
+	}
+}

From 76c72b91548f623cd6ded17cc223cadf2e607f65 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 14 Mar 2019 11:01:15 -0300
Subject: [PATCH 15/15] Add padding to sidebar

---
 src/stylesheets/pages/app/sidebar.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/stylesheets/pages/app/sidebar.less b/src/stylesheets/pages/app/sidebar.less
index 3bc7337c60..ab84107311 100644
--- a/src/stylesheets/pages/app/sidebar.less
+++ b/src/stylesheets/pages/app/sidebar.less
@@ -39,6 +39,8 @@
 		flex-direction: column;
 		flex: 1 1 0;
 
+		padding-top: 10px;
+
 		background-color: rgba(0, 0, 0, 0.1);
 		align-items: stretch;
 	}