Add tray icon from favicons.

* silent: Reflect changes in webview for mute/silent option.

This silent the webview incase silent option is toggled, and
by default silent the webview when its create if needed.

Fixes: #380.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,8 @@
+---
+<!-- Please Include: -->
+- **Operating System**:
+  - [ ] Windows
+  - [ ] Linux/Ubutnu
+  - [ ] macOS
+- **Clear steps to reproduce the issue**:
+- **Relevant error messages and/or screenshots**:

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+---
+<!--
+Remove the fields that are not appropriate
+Please include:
+-->
+
+**What's this PR do?**
+
+**Any background context you want to provide?**
+
+**Screenshots?**
+
+**You have tested this PR on:**
+  - [ ] Windows
+  - [ ] Linux/Ubuntu
+  - [ ] macOS

.gitignore

@@ -24,3 +24,8 @@ yarn-error.log*
 # miscellaneous
 .idea
 config.gypi
+
+# Test generated files
+tests/package.json
+
+.python-version

.python-version

@@ -1 +0,0 @@
-2.7.9

.travis.yml

@@ -18,8 +18,9 @@ node_js:
 - '6'
 
 before_install:
-- npm install -g gulp
-- npm install
+  - ./scripts/travis-xvfb.sh
+  - npm install -g gulp
+  - npm install
 
 cache:
   directories:

ISSUE_TEMPLATE.md

@@ -1,7 +0,0 @@
----
-Please include: 
-- `Operating System`
-- `Clear steps to reproduce the issue`
-- `Relevant error messages and/or screenshots`
-
-

README.md

@@ -8,7 +8,7 @@ Desktop client for Zulip. Available for Mac, Linux and Windows.
 <img src="http://i.imgur.com/ChzTq4F.png"/>
 
 # Download
-You can download the latest version from the [Releases](https://github.com/zulip/zulip-electron/releases/latest) page.
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
 
 # Features
 * Sign in to multiple teams

app/main/autoupdater.js

@@ -1,30 +1,46 @@
 'use strict';
-const {app, dialog} = require('electron');
-const {autoUpdater} = require('electron-updater');
+const { app, dialog } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const isDev = require('electron-is-dev');
 
 const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
 function appUpdater() {
+	// Don't initiate auto-updates in development
+	if (isDev) {
+		return;
+	}
+
+	// Create Logs directory
+	const LogsDir = `${app.getPath('userData')}/Logs`;
+
 	// Log whats happening
 	const log = require('electron-log');
+
+	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
+
 	// Handle auto updates for beta/pre releases
 	autoUpdater.allowPrerelease = ConfigUtil.getConfigItem('betaUpdate') || false;
 
 	// Ask the user if update is available
 	// eslint-disable-next-line no-unused-vars
-	autoUpdater.on('update-downloaded', (event, info) => {
+	autoUpdater.on('update-downloaded', event => {
 		// Ask user to update the app
 		dialog.showMessageBox({
 			type: 'question',
-			buttons: ['Install and Relaunch', 'Later'],
+			buttons: ['Install and Relaunch', 'Install Later'],
 			defaultId: 0,
-			message: 'A new version of ' + app.getName() + ' has been downloaded',
+			message: `A new update ${event.version} has been downloaded`,
 			detail: 'It will be installed the next time you restart the application'
 		}, response => {
 			if (response === 0) {
-				setTimeout(() => autoUpdater.quitAndInstall(), 1);
+				setTimeout(() => {
+					autoUpdater.quitAndInstall();
+					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+					app.quit();
+				}, 1000);
 			}
 		});
 	});

app/main/crash-reporter.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const { crashReporter } = require('electron');
+
+const crashHandler = () => {
+	crashReporter.start({
+		productName: 'zulip-electron',
+		companyName: 'Kandra Labs, Inc.',
+		submitURL: 'https://zulip-sentry.herokuapp.com/crashreport',
+		autoSubmit: true
+	});
+};
+
+module.exports = {
+	crashHandler
+};

app/main/index.js

@@ -1,19 +1,28 @@
 'use strict';
 const path = require('path');
 const electron = require('electron');
-const {app} = require('electron');
-const ipc = require('electron').ipcMain;
-const electronLocalshortcut = require('electron-localshortcut');
-const isDev = require('electron-is-dev');
 const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
 const appMenu = require('./menu');
-const {appUpdater} = require('./autoupdater');
+const { appUpdater } = require('./autoupdater');
+const { crashHandler } = require('./crash-reporter');
+
+const { setAutoLaunch } = require('./startup');
+
+const { app, ipcMain } = electron;
+
+const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
 // Adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
+// in development mode
+if (isDev) {
+	require('electron-debug')();
+}
 
 // Prevent window being garbage collected
 let mainWindow;
+let badgeCount;
 
 let isQuitting = false;
 
@@ -34,10 +43,6 @@ if (isAlreadyRunning) {
 	return app.quit();
 }
 
-function isWindowsOrmacOS() {
-	return process.platform === 'darwin' || process.platform === 'win32';
-}
-
 const APP_ICON = path.join(__dirname, '../resources', 'Icon');
 
 const iconPath = () => {
@@ -50,6 +55,10 @@ function createMainWindow() {
 		defaultWidth: 1000,
 		defaultHeight: 600
 	});
+
+	// Let's keep the window position global so that we can access it in other process
+	global.mainWindowState = mainWindowState;
+
 	const win = new electron.BrowserWindow({
 		// This settings needs to be saved in config
 		title: 'Zulip',
@@ -58,8 +67,8 @@ function createMainWindow() {
 		y: mainWindowState.y,
 		width: mainWindowState.width,
 		height: mainWindowState.height,
-		minWidth: 600,
-		minHeight: 500,
+		minWidth: 300,
+		minHeight: 400,
 		webPreferences: {
 			plugins: true,
 			allowDisplayingInsecureContent: true,
@@ -73,7 +82,11 @@ function createMainWindow() {
 	});
 
 	win.once('ready-to-show', () => {
-		win.show();
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
 	});
 
 	win.loadURL(mainURL);
@@ -89,9 +102,6 @@ function createMainWindow() {
 				win.hide();
 			}
 		}
-
-		// Unregister all the shortcuts so that they don't interfare with other apps
-		electronLocalshortcut.unregisterAll(mainWindow);
 	});
 
 	win.setTitle('Zulip');
@@ -119,21 +129,8 @@ function createMainWindow() {
 	return win;
 }
 
-function registerLocalShortcuts(page) {
-	// Somehow, reload action cannot be overwritten by the menu item
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		page.send('reload-viewer');
-	});
-
-	// Also adding these shortcuts because some users might want to use it instead of CMD/Left-Right
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		page.send('back');
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		page.send('forward');
-	});
-}
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
 
 // eslint-disable-next-line max-params
 app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
@@ -141,11 +138,6 @@ app.on('certificate-error', (event, webContents, url, error, certificate, callba
 	callback(true);
 });
 
-app.on('window-all-closed', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
 app.on('activate', () => {
 	if (!mainWindow) {
 		mainWindow = createMainWindow();
@@ -160,39 +152,46 @@ app.on('ready', () => {
 
 	const page = mainWindow.webContents;
 
-	registerLocalShortcuts(page);
-
 	page.on('dom-ready', () => {
-		mainWindow.show();
-	});
-
-	page.once('did-frame-finish-load', () => {
-		const checkOS = isWindowsOrmacOS();
-		if (checkOS && !isDev) {
-			// Initate auto-updates on MacOS and Windows
-			appUpdater();
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
 		}
 	});
 
+	page.once('did-frame-finish-load', () => {
+		// Initate auto-updates on MacOS and Windows
+		appUpdater();
+		crashHandler();
+	});
+
 	electron.powerMonitor.on('resume', () => {
-		page.send('reload-viewer');
-	});
-
-	ipc.on('focus-app', () => {
-		mainWindow.show();
-	});
-
-	ipc.on('quit-app', () => {
-		app.quit();
-	});
-
-	// Reload full app not just webview, useful in debugging
-	ipc.on('reload-full-app', () => {
 		mainWindow.reload();
 		page.send('destroytray');
 	});
 
-	ipc.on('toggle-app', () => {
+	ipcMain.on('focus-app', () => {
+		mainWindow.show();
+	});
+
+	ipcMain.on('quit-app', () => {
+		app.quit();
+	});
+
+	// Reload full app not just webview, useful in debugging
+	ipcMain.on('reload-full-app', () => {
+		mainWindow.reload();
+		page.send('destroytray');
+	});
+
+	ipcMain.on('clear-app-settings', () => {
+		global.mainWindowState.unmanage(mainWindow);
+		app.relaunch();
+		app.exit();
+	});
+
+	ipcMain.on('toggle-app', () => {
 		if (mainWindow.isVisible()) {
 			mainWindow.hide();
 		} else {
@@ -200,57 +199,44 @@ app.on('ready', () => {
 		}
 	});
 
-	ipc.on('update-badge', (event, messageCount) => {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(messageCount);
-		}
-		if (process.platform === 'win32') {
-			if (!mainWindow.isFocused()) {
-				mainWindow.flashFrame(true);
-			}
-			if (messageCount === 0) {
-				mainWindow.setOverlayIcon(null, '');
-			} else {
-				page.send('render-taskbar-icon', messageCount);
-			}
-		}
+	ipcMain.on('toggle-badge-option', () => {
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+	});
+
+	ipcMain.on('update-badge', (event, messageCount) => {
+		badgeCount = messageCount;
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
 		page.send('tray', messageCount);
 	});
 
-	ipc.on('update-taskbar-icon', (event, data, text) => {
-		const img = electron.nativeImage.createFromDataURL(data);
-		mainWindow.setOverlayIcon(img, text);
+	ipcMain.on('update-taskbar-icon', (event, data, text) => {
+		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
 	});
 
-	ipc.on('forward-message', (event, listener, ...params) => {
+	ipcMain.on('forward-message', (event, listener, ...params) => {
 		page.send(listener, ...params);
 	});
 
-	ipc.on('update-menu', (event, props) => {
+	ipcMain.on('update-menu', (event, props) => {
 		appMenu.setMenu(props);
 	});
 
-	ipc.on('register-server-tab-shortcut', (event, index) => {
-		electronLocalshortcut.register(mainWindow, `CommandOrControl+${index}`, () => {
-			// Array index == Shown index - 1
-			page.send('switch-server-tab', index - 1);
-		});
+	ipcMain.on('register-server-tab-shortcut', (event, index) => {
+		// Array index == Shown index - 1
+		page.send('switch-server-tab', index - 1);
 	});
 
-	ipc.on('local-shortcuts', (event, enable) => {
-		if (enable) {
-			registerLocalShortcuts(page);
-		} else {
-			electronLocalshortcut.unregisterAll(mainWindow);
-		}
+	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
+		setAutoLaunch(AutoLaunchValue);
 	});
 });
 
-app.on('will-quit', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
 app.on('before-quit', () => {
 	isQuitting = true;
 });
+
+// Send crash reports
+process.on('uncaughtException', err => {
+	console.error(err);
+	console.error(err.stack);
+});

app/main/menu.js

@@ -1,6 +1,10 @@
 'use strict';
 const os = require('os');
-const {dialog, app, shell, BrowserWindow, Menu} = require('electron');
+const path = require('path');
+
+const { app, shell, BrowserWindow, Menu } = require('electron');
+
+const fs = require('fs-extra');
 
 const ConfigUtil = require(__dirname + '/../renderer/js/utils/config-util.js');
 
@@ -33,7 +37,7 @@ class AppMenu {
 			accelerator: 'CommandOrControl+R',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
-					AppMenu.sendAction('reload-viewer');
+					AppMenu.sendAction('reload-current-viewer');
 				}
 			}
 		}, {
@@ -50,7 +54,7 @@ class AppMenu {
 			role: 'togglefullscreen'
 		}, {
 			label: 'Zoom In',
-			accelerator: 'CommandOrControl+=',
+			accelerator: 'CommandOrControl+Plus',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
 					AppMenu.sendAction('zoomIn');
@@ -86,9 +90,9 @@ class AppMenu {
 			accelerator: 'CommandOrControl+S',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
-					const newValue = !ConfigUtil.getConfigItem('show-sidebar');
+					const newValue = !ConfigUtil.getConfigItem('showSidebar');
 					focusedWindow.webContents.send('toggle-sidebar', newValue);
-					ConfigUtil.setConfigItem('show-sidebar', newValue);
+					ConfigUtil.setConfigItem('showSidebar', newValue);
 				}
 			}
 		}, {
@@ -164,12 +168,12 @@ class AppMenu {
 	}
 
 	getDarwinTpl(props) {
-		const {tabs, activeTabIndex} = props;
+		const { tabs, activeTabIndex } = props;
 
 		return [{
 			label: `${app.getName()}`,
 			submenu: [{
-				label: 'Zulip Desktop',
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('open-about');
@@ -196,9 +200,10 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Clear Cache',
+				label: 'Reset App Settings',
+				accelerator: 'Command+Shift+D',
 				click() {
-					AppMenu.clearCache();
+					AppMenu.resetAppSettings();
 				}
 			}, {
 				label: 'Log Out',
@@ -263,12 +268,12 @@ class AppMenu {
 	}
 
 	getOtherTpl(props) {
-		const {tabs, activeTabIndex} = props;
+		const { tabs, activeTabIndex } = props;
 
 		return [{
 			label: 'File',
 			submenu: [{
-				label: 'Zulip Desktop',
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('open-about');
@@ -297,9 +302,10 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Clear Cache',
+				label: 'Reset App Settings',
+				accelerator: 'Ctrl+Shift+D',
 				click() {
-					AppMenu.clearCache();
+					AppMenu.resetAppSettings();
 				}
 			}, {
 				label: 'Log Out',
@@ -363,11 +369,21 @@ class AppMenu {
 		win.webContents.send(action, ...params);
 	}
 
-	static clearCache() {
-		const win = BrowserWindow.getAllWindows()[0];
-		const ses = win.webContents.session;
-		ses.clearCache(() => {
-			dialog.showMessageBox({type: 'info', buttons: [], message: 'Cache cleared!'});
+	static resetAppSettings() {
+		// We save App's settings/configurations in following files
+		const settingFiles = ['window-state.json', 'domain.json', 'settings.json'];
+
+		settingFiles.forEach(settingFileName => {
+			const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
+			fs.access(getSettingFilesPath, error => {
+				if (error) {
+					console.log(error);
+				} else {
+					fs.unlink(getSettingFilesPath, () => {
+						AppMenu.sendAction('clear-app-data');
+					});
+				}
+			});
 		});
 	}
 

app/main/startup.js

@@ -0,0 +1,34 @@
+'use strict';
+const { app } = require('electron');
+const AutoLaunch = require('auto-launch');
+const isDev = require('electron-is-dev');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+
+const setAutoLaunch = AutoLaunchValue => {
+	// Don't run this in development
+	if (isDev) {
+		return;
+	}
+
+	// On Mac, work around a bug in auto-launch where it opens a Terminal window
+	// See https://github.com/Teamwork/node-auto-launch/issues/28#issuecomment-222194437
+
+	const appPath = process.platform === 'darwin' ? app.getPath('exe').replace(/\.app\/Content.*/, '.app') : undefined; // Use the default
+
+	const ZulipAutoLauncher = new AutoLaunch({
+		name: 'Zulip',
+		path: appPath,
+		isHidden: false
+	});
+	const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
+
+	if (autoLaunchOption) {
+		ZulipAutoLauncher.enable();
+	} else {
+		ZulipAutoLauncher.disable();
+	}
+};
+
+module.exports = {
+	setAutoLaunch
+};

app/package-lock.json

@@ -0,0 +1,904 @@
+{
+  "name": "zulip",
+  "version": "1.7.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@paulcbetts/cld": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@paulcbetts/cld/-/cld-2.4.6.tgz",
+      "integrity": "sha1-qZL2vEPKshKsLESIpnHPMC+LYuc=",
+      "requires": {
+        "glob": "5.0.15",
+        "nan": "2.8.0",
+        "rimraf": "2.6.2",
+        "underscore": "1.8.3"
+      }
+    },
+    "@paulcbetts/spellchecker": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@paulcbetts/spellchecker/-/spellchecker-4.0.6.tgz",
+      "integrity": "sha512-9lhLEvWfAB00n2oOM/S08sna9AuFk+b+bPk8ficpSa2X0Ll40PahMwfFS3G54nqQBIFFZgTPrhoHtCLAao0xmg==",
+      "requires": {
+        "nan": "2.8.0"
+      }
+    },
+    "ajv": {
+      "version": "4.11.8",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+      "requires": {
+        "co": "4.6.0",
+        "json-stable-stringify": "1.0.1"
+      }
+    },
+    "applescript": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/applescript/-/applescript-1.0.0.tgz",
+      "integrity": "sha1-u4evVoytA0pOSMS9r2Bno6JwExc="
+    },
+    "argparse": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
+      "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
+      "requires": {
+        "sprintf-js": "1.0.3"
+      }
+    },
+    "asn1": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y="
+    },
+    "assert-plus": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "auto-launch": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/auto-launch/-/auto-launch-5.0.1.tgz",
+      "integrity": "sha1-IBWoowOEq+Dn+Yy9yoFFzxVHU64=",
+      "requires": {
+        "applescript": "1.0.0",
+        "mkdirp": "0.5.1",
+        "path-is-absolute": "1.0.1",
+        "untildify": "3.0.2",
+        "winreg": "1.2.2"
+      }
+    },
+    "aws-sign2": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
+    },
+    "aws4": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4="
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
+    "bcp47": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/bcp47/-/bcp47-1.1.2.tgz",
+      "integrity": "sha1-NUvjMH/9CEM6ePXh4glYRfifx/4="
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "optional": true,
+      "requires": {
+        "tweetnacl": "0.14.5"
+      }
+    },
+    "bluebird": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
+      "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA=="
+    },
+    "bluebird-lst": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.5.tgz",
+      "integrity": "sha512-Ey0bDNys5qpYPhZ/oQ9vOEvD0TYQDTILMXWP2iGfvMg7rSDde+oV4aQQgqRH+CvBFNz2BSDQnPGMUl6LKBUUQA==",
+      "requires": {
+        "bluebird": "3.5.1"
+      }
+    },
+    "boom": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
+      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
+      "requires": {
+        "balanced-match": "1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "builder-util-runtime": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-3.2.0.tgz",
+      "integrity": "sha512-VRvyyLiZZSBjcUTqEsHlBJSK0s6uVQChO7kbmVeU6QmSJ7TtsotNQELO6lbahwZMAQ4Z/haCKhlLBDdhW+3aqA==",
+      "requires": {
+        "bluebird-lst": "1.0.5",
+        "debug": "3.1.0",
+        "fs-extra-p": "4.4.4",
+        "sax": "1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+    },
+    "combined-stream": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "requires": {
+        "delayed-stream": "1.0.0"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "cryptiles": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+      "requires": {
+        "boom": "2.10.1"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "ecc-jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+      "optional": true,
+      "requires": {
+        "jsbn": "0.1.1"
+      }
+    },
+    "electron-is-dev": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/electron-is-dev/-/electron-is-dev-0.3.0.tgz",
+      "integrity": "sha1-FOb9pcaOnk7L7/nM8DfL18BcWv4="
+    },
+    "electron-log": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/electron-log/-/electron-log-2.2.7.tgz",
+      "integrity": "sha512-pRfRn53MQGJ9L1+aC0VFcps0Uo5NM4RYsdvIdnjiV6J+krMr4cgBZ/DDA3kjNsr0D0kzo2WKpMgn2fAVra99rg=="
+    },
+    "electron-remote": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/electron-remote/-/electron-remote-1.2.0.tgz",
+      "integrity": "sha512-Fo2wnwK2tzd81Ux4pfNhz9DwHBoooZahdWBqOh9HtESYh2jrcsjc6FAibIu2oIOk71T1USyC7OBcqE8BZw3FGQ==",
+      "requires": {
+        "debug": "2.6.9",
+        "hashids": "1.1.4",
+        "lodash.get": "4.4.2",
+        "pify": "2.3.0",
+        "rxjs": "5.5.2",
+        "xmlhttprequest": "1.8.0"
+      }
+    },
+    "electron-spellchecker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/electron-spellchecker/-/electron-spellchecker-1.1.2.tgz",
+      "integrity": "sha512-AdzD/Q82Svk9EDTc65vRr271UPLVIxsruKJM0iwqxEG9Y/CogNhEAJz/asV0BFWom4tpdB6cHcLbYePb11Musw==",
+      "requires": {
+        "@paulcbetts/cld": "2.4.6",
+        "@paulcbetts/spellchecker": "4.0.6",
+        "bcp47": "1.1.2",
+        "debug": "2.6.9",
+        "electron-remote": "1.2.0",
+        "keyboard-layout": "2.0.13",
+        "lru-cache": "4.1.1",
+        "mkdirp": "0.5.1",
+        "pify": "2.3.0",
+        "rxjs": "5.5.2",
+        "rxjs-serial-subscription": "0.1.1",
+        "spawn-rx": "2.0.12"
+      }
+    },
+    "electron-updater": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-2.16.2.tgz",
+      "integrity": "sha512-gv1kezjdXR6sw266aTzfs7HgPO5vaf5TsBFh7kMi47JABAIJSO3n+U79pSBperPVtGdqWQ4WfM6+2irrFvYXLw==",
+      "requires": {
+        "bluebird-lst": "1.0.5",
+        "builder-util-runtime": "3.2.0",
+        "electron-is-dev": "0.3.0",
+        "fs-extra-p": "4.4.4",
+        "js-yaml": "3.10.0",
+        "lazy-val": "1.0.2",
+        "lodash.isequal": "4.5.0",
+        "semver": "5.4.1",
+        "source-map-support": "0.5.0"
+      }
+    },
+    "electron-window-state": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-4.1.1.tgz",
+      "integrity": "sha1-azT9wxs4UU3+yLfI97XUrdtnYy0=",
+      "requires": {
+        "deep-equal": "1.0.1",
+        "jsonfile": "2.4.0",
+        "mkdirp": "0.5.1"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "4.1.11"
+          }
+        }
+      }
+    },
+    "esprima": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+      "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
+    },
+    "event-kit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/event-kit/-/event-kit-2.4.0.tgz",
+      "integrity": "sha512-ZXd9jxUoc/f/zdLdR3OUcCzT84WnpaNWefquLyE125akIC90sDs8S3T/qihliuVsaj7Osc0z8lLL2fjooE9Z4A=="
+    },
+    "extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ="
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.5",
+        "mime-types": "2.1.17"
+      }
+    },
+    "fs-extra": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.2.tgz",
+      "integrity": "sha1-+RcExT0bRh+JNFKwwwfZmXZHq2s=",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "jsonfile": "4.0.0",
+        "universalify": "0.1.1"
+      }
+    },
+    "fs-extra-p": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-4.4.4.tgz",
+      "integrity": "sha512-zHsMNJWhXD184QfHKEIFSQSgAFNV7v9J+Nt2XpaLZp2nTz6WxZNV+R4G2uYeGeLTMaKvUZiqGKrH/4iFCupcUA==",
+      "requires": {
+        "bluebird-lst": "1.0.5",
+        "fs-extra": "4.0.2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "glob": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+      "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+      "requires": {
+        "inflight": "1.0.6",
+        "inherits": "2.0.3",
+        "minimatch": "3.0.4",
+        "once": "1.4.0",
+        "path-is-absolute": "1.0.1"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+    },
+    "har-schema": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
+      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4="
+    },
+    "har-validator": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
+      "requires": {
+        "ajv": "4.11.8",
+        "har-schema": "1.0.5"
+      }
+    },
+    "hashids": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/hashids/-/hashids-1.1.4.tgz",
+      "integrity": "sha512-U/fnTE3edW0AV92ZI/BfEluMZuVcu3MDOopsN7jS+HqDYcarQo8rXQiWlsBlm0uX48/taYSdxRsfzh2HRg5Z6w=="
+    },
+    "hawk": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+      "requires": {
+        "boom": "2.10.1",
+        "cryptiles": "2.0.5",
+        "hoek": "2.16.3",
+        "sntp": "1.0.9"
+      }
+    },
+    "hoek": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+    },
+    "http-signature": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+      "requires": {
+        "assert-plus": "0.2.0",
+        "jsprim": "1.4.1",
+        "sshpk": "1.13.1"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "1.4.0",
+        "wrappy": "1.0.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "js-yaml": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
+      "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==",
+      "requires": {
+        "argparse": "1.0.9",
+        "esprima": "4.0.0"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "optional": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "requires": {
+        "jsonify": "0.0.0"
+      }
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "4.1.11"
+      }
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "keyboard-layout": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/keyboard-layout/-/keyboard-layout-2.0.13.tgz",
+      "integrity": "sha512-WxVc3bBITttHozSyEYPsyr5rN2KQuXtEaXMlQfQjEze1JrkLw30yH/bcNn1IGx48b+tdOdybpnq++JFLU2FaZg==",
+      "requires": {
+        "event-kit": "2.4.0",
+        "nan": "2.8.0"
+      }
+    },
+    "lazy-val": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.2.tgz",
+      "integrity": "sha512-2BaSu6qVnicKdWQPysrffZVFAKcPcZQ/q2YyeSjAxWaJlvCvKSrkcvsSHlleeIfA//fW2goTcYDTy2cBLN7+PQ=="
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
+    "lru-cache": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
+      "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
+      "requires": {
+        "pseudomap": "1.0.2",
+        "yallist": "2.1.2"
+      }
+    },
+    "mime-db": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz",
+      "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE="
+    },
+    "mime-types": {
+      "version": "2.1.17",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz",
+      "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=",
+      "requires": {
+        "mime-db": "1.30.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "1.1.8"
+      }
+    },
+    "minimist": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "nan": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
+      "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo="
+    },
+    "node-json-db": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/node-json-db/-/node-json-db-0.7.3.tgz",
+      "integrity": "sha1-v2Mf9NTPQhHL3/5srmqq/m7lTN8=",
+      "requires": {
+        "mkdirp": "0.5.1"
+      }
+    },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1.0.2"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "performance-now": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "qs": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM="
+    },
+    "request": {
+      "version": "2.81.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
+      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
+      "requires": {
+        "aws-sign2": "0.6.0",
+        "aws4": "1.6.0",
+        "caseless": "0.12.0",
+        "combined-stream": "1.0.5",
+        "extend": "3.0.1",
+        "forever-agent": "0.6.1",
+        "form-data": "2.1.4",
+        "har-validator": "4.2.1",
+        "hawk": "3.1.3",
+        "http-signature": "1.1.1",
+        "is-typedarray": "1.0.0",
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.17",
+        "oauth-sign": "0.8.2",
+        "performance-now": "0.2.0",
+        "qs": "6.4.0",
+        "safe-buffer": "5.1.1",
+        "stringstream": "0.0.5",
+        "tough-cookie": "2.3.3",
+        "tunnel-agent": "0.6.0",
+        "uuid": "3.1.0"
+      }
+    },
+    "rimraf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+      "requires": {
+        "glob": "7.1.2"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        }
+      }
+    },
+    "rxjs": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.2.tgz",
+      "integrity": "sha512-oRYoIKWBU3Ic37fLA5VJu31VqQO4bWubRntcHSJ+cwaDQBwdnZ9x4zmhJfm/nFQ2E82/I4loSioHnACamrKGgA==",
+      "requires": {
+        "symbol-observable": "1.1.0"
+      }
+    },
+    "rxjs-serial-subscription": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/rxjs-serial-subscription/-/rxjs-serial-subscription-0.1.1.tgz",
+      "integrity": "sha1-pCsdsL8QlLCSMRkeJ3jKP8+e0Uc=",
+      "requires": {
+        "rxjs": "5.5.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "semver": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
+      "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+    },
+    "sntp": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-support": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.0.tgz",
+      "integrity": "sha512-vUoN3I7fHQe0R/SJLKRdKYuEdRGogsviXFkHHo17AWaTGv17VLnxw+CFXvqy+y4ORZ3doWLQcxRYfwKrsd/H7Q==",
+      "requires": {
+        "source-map": "0.6.1"
+      }
+    },
+    "spawn-rx": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-2.0.12.tgz",
+      "integrity": "sha512-gOPXiQQFQ9lTOLuys0iMn3jfxxv9c7zzwhbYLOEbQGvEShHVJ5sSR1oD3Daj88os7jKArDYT7rbOKdvNhe7iEg==",
+      "requires": {
+        "debug": "2.6.9",
+        "lodash.assign": "4.2.0",
+        "rxjs": "5.5.2"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "sshpk": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
+      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "requires": {
+        "asn1": "0.2.3",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.1",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.1",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "tweetnacl": "0.14.5"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "stringstream": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg="
+    },
+    "symbol-observable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.1.0.tgz",
+      "integrity": "sha512-dQoid9tqQ+uotGhuTKEY11X4xhyYePVnqGSoSm3OGKh2E8LZ6RPULp1uXTctk33IeERlrRJYoVSBglsL05F5Uw=="
+    },
+    "tough-cookie": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
+      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "requires": {
+        "punycode": "1.4.1"
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "optional": true
+    },
+    "underscore": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
+      "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI="
+    },
+    "universalify": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
+      "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc="
+    },
+    "untildify": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-3.0.2.tgz",
+      "integrity": "sha1-fx8wIFWz/qDz6B3HjrNnZstl4/E="
+    },
+    "uuid": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
+      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "1.3.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "winreg": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/winreg/-/winreg-1.2.2.tgz",
+      "integrity": "sha1-hQmvo7ccW70RCm18YkfsZ3NsWY8="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "wurl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/wurl/-/wurl-2.5.0.tgz",
+      "integrity": "sha1-g7qrSEi5hmnSFISg/NmjSrpXKOk="
+    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    }
+  }
+}

app/package.json

@@ -1,14 +1,13 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "1.3.0-beta",
+  "version": "1.7.0",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
-  "email": "<svnitakash@gmail.com>",
-  "copyright": "©2017 Kandra Labs, Inc.",
+  "copyright": "Kandra Labs, Inc.",
   "author": {
     "name": "Kandra Labs, Inc.",
-    "email": "svnitakash@gmail.com"
+    "email": "support@zulipchat.com"
   },
   "repository": {
     "type": "git",
@@ -27,15 +26,14 @@
     "InstantMessaging"
   ],
   "dependencies": {
-    "electron-debug": "1.4.0",
+    "auto-launch": "5.0.1",
     "electron-is-dev": "0.3.0",
-    "electron-localshortcut": "2.0.2",
     "electron-log": "2.2.7",
-    "electron-spellchecker": "1.2.0",
-    "electron-updater": "2.8.5",
+    "electron-spellchecker": "1.1.2",
+    "electron-window-state": "4.1.1",
+    "electron-updater": "2.16.2",
     "node-json-db": "0.7.3",
     "request": "2.81.0",
-    "wurl": "2.5.0",
-    "electron-window-state": "4.1.1"
+    "wurl": "2.5.0"
   }
 }

app/renderer/about.html

@@ -7,25 +7,37 @@
 	<body>
 	<div class="about">
 		<img class="logo" src="../resources/zulip.png" />
-		<p class="detail" id="version">version ?.?.?</p>
+		<p class="detail" id="version">v?.?.?</p>
 		<div class="maintenance-info">
-			<p class="detail maintainer">Maintained by Zulip</p>
-			<p class="detail license">Available under the Apache License</p>
-			<a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a>
+			<p class="detail maintainer">
+				Maintained by <a onclick="linkInBrowser('website')">Zulip</a>
+			</p>
+			<p class="detail license">
+				Available under the <a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+			</p>
+			<a class="bug" onclick="linkInBrowser('bug')" href="#">Found bug?</a>
 		</div>
 	</div>
 	<script>
 
-	const app = require('electron').remote.app;
-	const version_tag = document.getElementById('version');
-	version_tag.innerHTML = 'version ' + app.getVersion();
-
-	function linkInBrowser(event) {
-
-		const shell = require('electron').shell;
-
-		const url = "https://github.com/zulip/zulip-electron/issues/new?body=Please describe your issue and steps to reproduce it."
+	const { app } = require('electron').remote;
+	const { shell } = require('electron');
+	const version_tag = document.querySelector('#version');
+	version_tag.innerHTML = 'v' + app.getVersion();
 
+	function linkInBrowser(type) {
+		let url;
+		switch (type) {
+			case 'website': 
+				url = "https://zulipchat.com";
+				break;
+			case 'license': 
+				url = "https://github.com/zulip/zulip-electron/blob/master/LICENSE";
+				break;
+			default:
+				url = 'https://github.com/zulip/zulip-electron/issues/new?body=' + 
+				      '%3C!--Please%20describe%20your%20issue%20and%20steps%20to%20reproduce%20it.--%3E';
+		}
 		shell.openExternal(url);
 	}
 	</script>

app/renderer/css/about.css

@@ -1,21 +1,23 @@
 body {
 	background: #fafafa;
 	font-family: menu, "Helvetica Neue", sans-serif;
-	-webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing: subpixel-antialiased;
 }
 
 .logo {
 	display: block;
-	margin: 0 auto;
+	margin: -40px auto;
 }
 
 #version {
-	color: #aaa;
-	font-size: 0.9em;
+	color: #444343;
+	font-size: 1.3em;
+	padding-top: 40px;
 }
 
 .about {
-	margin-top: 50px;
+	margin: 25vh auto;
+	height: 25vh;
 	text-align: center;
 }
 
@@ -42,9 +44,9 @@ body {
 }
 
 .maintenance-info {
+	cursor: pointer;
 	position: absolute;
 	width: 100%;
-	bottom: 20px;
 	left: 0px;
 	color: #444;
 }
@@ -52,7 +54,6 @@ body {
 .maintenance-info p {
 	margin: 0;
 	font-size: 1em;
-
 	width: 100%;
 }
 
@@ -71,3 +72,11 @@ body {
 .maintenance-info .bug:hover {
 	background-color: #32a692;
 }
+
+p.detail a {
+	color: #355f4c;
+}
+
+p.detail a:hover {
+	text-decoration: underline;
+}

app/renderer/css/main.css

@@ -18,7 +18,7 @@ body {
     background-position: center;
 }
 
-#sidebar {
+.toggle-sidebar {
     background: #222c31;
     width: 54px;
     padding: 27px 0 20px 0;
@@ -27,6 +27,21 @@ body {
     flex-direction: column;
     -webkit-app-region: drag;
     overflow: hidden;
+    transition: all 0.5s ease;
+}
+
+.toggle-sidebar div {
+    transition: all 0.5s ease-out;
+}
+
+.sidebar-hide {
+    width: 0;
+    transition: all 0.8s ease;
+}
+
+.sidebar-hide div {
+    transform: translateX(-100%);
+    transition: all 0.6s ease-out;
 }
 
 @font-face {
@@ -38,8 +53,8 @@ body {
 
 
 /*******************
- *   Left Sidebar  *
- *******************/
+  *   Left Sidebar  *
+  *******************/
 
 #tabs-container {
     display: flex;
@@ -197,8 +212,8 @@ body {
 
 
 /*******************
- *   Webview Area  *
- *******************/
+  *   Webview Area  *
+  *******************/
 
 #webviews-container {
     display: flex;
@@ -258,6 +273,33 @@ webview:focus {
     right: 68px;
 }
 
+#add-server-tooltip,
+.server-tooltip {
+    font-family: 'arial';
+    background: #222c31;
+    left: 56px;
+    padding: 10px 20px;
+    position: fixed;
+    margin-top: 8px;
+    z-index: 5000 !important;
+    color: #fff;
+    border-radius: 4px;
+    text-align: center;
+    width: max-content;
+    font-size: 14px;
+}
+
+#add-server-tooltip:after,
+.server-tooltip:after {
+    content: " ";
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid #222c31;
+    position: absolute;
+    top: 10px;
+    left: -5px;
+}
+
 #collapse-button {
     bottom: 30px;
     left: 20px;
@@ -285,7 +327,9 @@ webview:focus {
     display: none !important;
 }
 
+
 /* Full screen Popup container  */
+
 .popup .popuptext {
     visibility: hidden;
     background-color: #555;

app/renderer/css/preference.css

@@ -3,43 +3,92 @@ body {
     height: 100%;
     margin: 0;
     cursor: default;
+    user-select: none;
+    font-family: menu, "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
     font-size: 14px;
     color: #333;
     background: #efefef;
 }
 
+kbd {
+    padding: 0.3em 0.8em;
+    border: 1px solid #ccc;
+    font-size: 15px;
+    font-family: Courier New, Courier, monospace;
+    background-color: #383430;
+    color: #ededed;
+    display: inline-block;
+    margin: 0 0.1em;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+table,
+th,
+td {
+    border-collapse: collapse;
+    color: #383430;
+}
+
+table {
+    width: 100%;
+    margin-top: 18px;
+    margin-bottom: 18px;
+}
+
+table tr:nth-child(even) {
+    background-color: #f7eee6;
+}
+
+table tr:nth-child(odd) {
+    background-color: #fff8ef;
+}
+
+td {
+    padding: 5px;
+}
+
+td:nth-child(odd) {
+    text-align: right;
+    width: 50%;
+}
+
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url(../fonts/Montserrat-Regular.ttf) format('truetype');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  /* Preferred icon size */
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    /* Preferred icon size */
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
 }
 
 #content {
     display: flex;
     height: 100%;
-    font-family: sans-serif;
+    font-family: 'Montserrat';
 }
 
 #sidebar {
@@ -77,7 +126,9 @@ body {
 
 #settings-header {
     font-size: 22px;
-    color: #5c6166;
+    color: #222c31;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
 #settings-container {
@@ -88,15 +139,21 @@ body {
 }
 
 #new-server-container {
-    margin: 20px 0;
     opacity: 1;
     transition: opacity 0.3s;
 }
 
 .title {
     padding: 4px 0 6px 0;
+    font-weight: 500;
+    color: #222c31;
+}
+
+.page-title {
+    color: #222c31;
+    font-size: 15px;
     font-weight: bold;
-    color: #1e1e1e;
+    padding: 4px 0 6px 0;
 }
 
 .sub-title {
@@ -130,19 +187,35 @@ img.server-info-icon {
     cursor: pointer;
 }
 
-.server-info-url {
+.setting-input-key {
+    font-size: 14px;
+    height: 27px;
+    line-height: 27px;
+    font-weight: bold;
+    background: transparent;
+    flex-wrap: nowrap;
+    margin-right: 10px;
+}
+
+.setting-input-value {
     flex-grow: 1;
     font-size: 14px;
-    height: 24px;
-    border: none;
-    border-bottom: #ededed 1px solid;
+    height: 22px;
+    border-radius: 3px;
+    padding: 7px;
+    border: #ededed 2px solid;
     outline-width: 0;
     background: transparent;
     max-width: 500px;
 }
 
-.server-info-value:focus {
-    border-bottom: #388E3C 1px solid;
+.setting-input-value:focus {
+    border: #7cb980 2px solid;
+    border-radius: 3px;
+}
+
+.setting-block {
+    width: 100%;
 }
 
 .actions-container {
@@ -158,14 +231,13 @@ img.server-info-icon {
     display: flex;
     align-items: center;
     padding: 0 10px;
-    border-radius: 2px;
     margin-right: 10px;
 }
 
 .action i {
     margin-right: 5px;
     font-size: 18px;
-    line-height: 27px;
+    line-height: 26px;
 }
 
 .settings-pane {
@@ -186,12 +258,12 @@ img.server-info-icon {
 
 .settings-card {
     display: flex;
-    padding: 16px 30px;
+    flex-wrap: wrap;
+    padding: 12px 30px;
     margin: 10px 0 20px 0;
     background: #fff;
-    border-radius: 2px;
-    width: 540px;
-    box-shadow: 1px 2px 4px #bcbcbc;
+    width: 70%;
+    border-left: 8px solid #bcbcbc;
 }
 
 .hidden {
@@ -200,15 +272,19 @@ img.server-info-icon {
 }
 
 .red {
-    color: #ef5350;
-    background: #ffebee;
-    border: 1px solid #ef5350;
+    color: #ffffff;
+    background: #ef5350;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
 }
 
-.green {
-    color: #388E3C;
-    background: #E8F5E9;
-    border: 1px solid #388E3C;
+.blue {
+    color: #ffffff;
+    background: #4EBFAC;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
 }
 
 .grey {
@@ -219,8 +295,10 @@ img.server-info-icon {
 
 .setting-row {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     width: 100%;
+    margin: 6px;
 }
 
 .code {
@@ -232,3 +310,101 @@ i.open-tab-button {
     font-size: 18px;
     cursor: pointer;
 }
+
+.reset-data-button {
+    display: inline-block;
+    border: none;
+    padding: 10px;
+    width: 120px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background-color 0.2s ease;
+    text-decoration: none;
+}
+
+.reset-data-button:hover {
+    background-color: #3c9f8d;
+    color: #fff;
+}
+
+#server-info-container {
+    min-height: calc(100% - 235px);
+}
+
+#create-organization-container {
+    font-size: 1.15em;
+    position: fixed;
+    bottom: 15px;
+}
+
+#create-organization-container i {
+    position: relative;
+    top: 3px;
+}
+
+#open-create-org-link {
+    color: #666;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+#open-create-org-link:hover {
+    color: #005580;
+    ;
+    text-decoration: underline;
+}
+
+.toggle {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+}
+
+.toggle+label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+}
+
+input.toggle-round+label {
+    padding: 2px;
+    width: 50px;
+    height: 25px;
+    background-color: #dddddd;
+    border-radius: 25px;
+}
+
+input.toggle-round+label:before,
+input.toggle-round+label:after {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    bottom: 2px;
+    content: "";
+}
+
+input.toggle-round+label:before {
+    right: 2px;
+    background-color: #f1f1f1;
+    border-radius: 25px;
+    transition: background 0.4s;
+}
+
+input.toggle-round+label:after {
+    width: 25px;
+    height: 25px;
+    background-color: #fff;
+    border-radius: 100%;
+    transition: margin 0.4s;
+}
+
+input.toggle-round:checked+label:before {
+    background-color: #4EBFAC;
+}
+
+input.toggle-round:checked+label:after {
+    margin-left: 25px;
+}

app/renderer/js/components/server-tab.js

@@ -8,6 +8,7 @@ const {ipcRenderer} = require('electron');
 class ServerTab extends Tab {
 	template() {
 		return `<div class="tab">
+					<div class="server-tooltip" style="display:none"></div>
 					<div class="server-tab-badge"></div>
 					<div class="server-tab">
 					<img class="server-icons" src='${this.props.icon}'/>

app/renderer/js/components/tab.js

@@ -21,6 +21,8 @@ class Tab extends BaseComponent {
 
 	registerListeners() {
 		this.$el.addEventListener('click', this.props.onClick);
+		this.$el.addEventListener('mouseover', this.props.onHover);
+		this.$el.addEventListener('mouseout', this.props.onHoverOut);
 	}
 
 	isLoading() {

app/renderer/js/components/webview.js

@@ -4,12 +4,14 @@ const path = require('path');
 const fs = require('fs');
 
 const DomainUtil = require(__dirname + '/../utils/domain-util.js');
+const ConfigUtil = require(__dirname + '/../utils/config-util.js');
 const SystemUtil = require(__dirname + '/../utils/system-util.js');
 const LinkUtil = require(__dirname + '/../utils/link-util.js');
-const {shell} = require('electron').remote;
+const { shell, app } = require('electron').remote;
 
 const BaseComponent = require(__dirname + '/../components/base.js');
 
+const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
 class WebView extends BaseComponent {
 	constructor(props) {
 		super();
@@ -28,6 +30,7 @@ class WebView extends BaseComponent {
 					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
 					disablewebsecurity
 					${this.props.preload ? 'preload="js/preload.js"' : ''}
+					partition="persist:webviewsession"
 					webpreferences="allowRunningInsecureContent, javascript=yes">
 				</webview>`;
 	}
@@ -41,7 +44,7 @@ class WebView extends BaseComponent {
 
 	registerListeners() {
 		this.$el.addEventListener('new-window', event => {
-			const {url} = event;
+			const { url } = event;
 			const domainPrefix = DomainUtil.getDomain(this.props.index).url;
 
 			if (LinkUtil.isInternal(domainPrefix, url) || url === (domainPrefix + '/')) {
@@ -53,19 +56,37 @@ class WebView extends BaseComponent {
 			}
 		});
 
+		if (shouldSilentWebview) {
+			this.$el.addEventListener('dom-ready', () => {
+				this.$el.setAudioMuted(true);
+			});
+		}
+
 		this.$el.addEventListener('page-title-updated', event => {
-			const {title} = event;
+			const { title } = event;
 			this.badgeCount = this.getBadgeCount(title);
 			this.props.onTitleChange();
 		});
 
+		this.$el.addEventListener('page-favicon-updated', event => {
+			const { favicons } = event;
+			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
+			// https://chat.zulip.org/static/images/favicon/favicon-pms.png
+			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
+				// This api is only supported on macOS
+				app.dock.setBadge('●');
+			}
+		});
+
 		this.$el.addEventListener('dom-ready', () => {
-			this.$el.classList.add('onload');
+			if (this.props.role === 'server') {
+				this.$el.classList.add('onload');
+			}
 			this.show();
 		});
 
 		this.$el.addEventListener('did-fail-load', event => {
-			const {errorDescription} = event;
+			const { errorDescription } = event;
 			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
@@ -96,11 +117,13 @@ class WebView extends BaseComponent {
 
 		this.$el.classList.remove('disabled');
 		setTimeout(() => {
-			this.$el.classList.remove('onload');
+			if (this.props.role === 'server') {
+				this.$el.classList.remove('onload');
+			}
 		}, 1000);
 		this.focus();
 		this.loading = false;
-		this.props.onTitleChange(this.$el.getTitle());
+		this.props.onTitleChange();
 		// Injecting preload css in webview to override some css rules
 		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
 	}

app/renderer/js/main.js

@@ -1,8 +1,10 @@
 'use strict';
 
-require(__dirname + '/js/tray.js');
-const {ipcRenderer} = require('electron');
+const { ipcRenderer, remote } = require('electron');
 
+const { session } = remote;
+
+require(__dirname + '/js/tray.js');
 const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
 const WebView = require(__dirname + '/js/components/webview.js');
 const ServerTab = require(__dirname + '/js/components/server-tab.js');
@@ -19,8 +21,11 @@ class ServerManagerView {
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$webviewsContainer = document.getElementById('webviews-container');
 
+		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
+		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
+
 		this.$sidebar = document.getElementById('sidebar');
 
 		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
@@ -33,14 +38,69 @@ class ServerManagerView {
 	}
 
 	init() {
-		this.initSidebar();
-		this.initTabs();
-		this.initActions();
-		this.registerIpcs();
+		this.loadProxy().then(() => {
+			this.initSidebar();
+			this.initTabs();
+			this.initActions();
+			this.registerIpcs();
+			this.initDefaultSettings();
+		});
+	}
+
+	loadProxy() {
+		return new Promise(resolve => {
+			const proxyEnabled = ConfigUtil.getConfigItem('useProxy', false);
+			if (proxyEnabled) {
+				session.fromPartition('persist:webviewsession').setProxy({
+					pacScript: ConfigUtil.getConfigItem('proxyPAC', ''),
+					proxyRules: ConfigUtil.getConfigItem('proxyRules', ''),
+					proxyBypassRules: ConfigUtil.getConfigItem('proxyBypass', '')
+				}, resolve);
+			} else {
+				session.fromPartition('persist:webviewsession').setProxy({
+					pacScript: '',
+					proxyRules: '',
+					proxyBypassRules: ''
+				}, resolve);
+			}
+		});
+	}
+
+	// Settings are initialized only when user clicks on General/Server/Network section settings
+	// In case, user doesn't visit these section, those values set to be null automatically
+	// This will make sure the default settings are correctly set to either true or false
+	initDefaultSettings() {
+		// Default settings which should be respected
+		const settingOptions = {
+			trayIcon: true,
+			useProxy: false,
+			showSidebar: true,
+			badgeOption: true,
+			startAtLogin: false,
+			startMinimized: false,
+			enableSpellchecker: true,
+			showNotification: true,
+			betaUpdate: false,
+			silent: false,
+			lastActiveTab: 0
+		};
+
+		// Platform specific settings
+
+		if (process.platform === 'win32') {
+			// Only available on Windows
+			settingOptions.flashTaskbarOnMessage = true;
+		}
+
+		for (const i in settingOptions) {
+			if (ConfigUtil.getConfigItem(i) === null) {
+				ConfigUtil.setConfigItem(i, settingOptions[i]);
+			}
+		}
 	}
 
 	initSidebar() {
-		const showSidebar = ConfigUtil.getConfigItem('show-sidebar', true);
+		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
 	}
 
@@ -49,13 +109,14 @@ class ServerManagerView {
 		if (servers.length > 0) {
 			for (let i = 0; i < servers.length; i++) {
 				this.initServer(servers[i], i);
+				DomainUtil.updateSavedServer(servers[i].url, i);
+				this.activateTab(i);
 			}
-			this.activateTab(0);
+			// Open last active tab
+			this.activateTab(ConfigUtil.getConfigItem('lastActiveTab'));
 		} else {
 			this.openSettings('Servers');
 		}
-
-		ipcRenderer.send('local-shortcuts', true);
 	}
 
 	initServer(server, index) {
@@ -63,8 +124,10 @@ class ServerManagerView {
 			role: 'server',
 			icon: server.icon,
 			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, index),
+			onClick: this.activateLastTab.bind(this, index),
 			index,
+			onHover: this.onHover.bind(this, index, server.alias),
+			onHoverOut: this.onHoverOut.bind(this, index),
 			webview: new WebView({
 				$root: this.$webviewsContainer,
 				index,
@@ -91,20 +154,37 @@ class ServerManagerView {
 		this.$settingsButton.addEventListener('click', () => {
 			this.openSettings('General');
 		});
-		this.$reloadButton.addEventListener('mouseover', () => {
-			this.$reloadTooltip.removeAttribute('style');
+
+		const $serverImgs = document.querySelectorAll('.server-icons');
+		$serverImgs.forEach($serverImg => {
+			$serverImg.addEventListener('error', () => {
+				$serverImg.src = 'img/icon.png';
+			});
 		});
-		this.$reloadButton.addEventListener('mouseout', () => {
-			this.$reloadTooltip.style.display = 'none';
+
+		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip);
+		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
+		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
+	}
+
+	sidebarHoverEvent(SidebarButton, SidebarTooltip) {
+		SidebarButton.addEventListener('mouseover', () => {
+			SidebarTooltip.removeAttribute('style');
 		});
-		this.$settingsButton.addEventListener('mouseover', () => {
-			this.$settingsTooltip.removeAttribute('style');
-		});
-		this.$settingsButton.addEventListener('mouseout', () => {
-			this.$settingsTooltip.style.display = 'none';
+		SidebarButton.addEventListener('mouseout', () => {
+			SidebarTooltip.style.display = 'none';
 		});
 	}
 
+	onHover(index, serverName) {
+		this.$serverIconTooltip[index].innerHTML = serverName;
+		this.$serverIconTooltip[index].removeAttribute('style');
+	}
+
+	onHoverOut(index) {
+		this.$serverIconTooltip[index].style.display = 'none';
+	}
+
 	openFunctionalTab(tabProps) {
 		if (this.functionalTabs[tabProps.name] !== undefined) {
 			this.activateTab(this.functionalTabs[tabProps.name]);
@@ -163,8 +243,15 @@ class ServerManagerView {
 		});
 	}
 
+	activateLastTab(index) {
+		// Open last active tab
+		ConfigUtil.setConfigItem('lastActiveTab', index);
+		// Open all the tabs in background
+		this.activateTab(index);
+	}
+
 	activateTab(index, hideOldTab = true) {
-		if (this.tabs[index].webview.loading) {
+		if (!this.tabs[index]) {
 			return;
 		}
 
@@ -183,6 +270,27 @@ class ServerManagerView {
 			tabs: this.tabs,
 			activeTabIndex: this.activeTabIndex
 		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-sidebar', state);
+		});
+
+		ipcRenderer.on('toogle-silent', (event, state) => {
+			const webviews = document.querySelectorAll('webview');
+			webviews.forEach(webview => {
+				try {
+					webview.setAudioMuted(state);
+				} catch (err) {
+					// webview is not ready yet
+					webview.addEventListener('dom-ready', () => {
+						webview.isAudioMuted();
+					});
+				}
+			});
+		});
 	}
 
 	destroyTab(name, index) {
@@ -210,16 +318,24 @@ class ServerManagerView {
 		// Clear DOM elements
 		this.$tabsContainer.innerHTML = '';
 		this.$webviewsContainer.innerHTML = '';
-
-		// Destroy shortcuts
-		ipcRenderer.send('local-shortcuts', false);
 	}
 
 	reloadView() {
+		// Save and remember the index of last active tab so that we can use it later
+		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
+		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
+
+		// Destroy the current view and re-initiate it
 		this.destroyView();
 		this.initTabs();
 	}
 
+	// This will trigger when pressed CTRL/CMD + R [WIP]
+	// It won't reload the current view properly when you add/delete a server.
+	reloadCurrentView() {
+		this.$reloadButton.click();
+	}
+
 	updateBadge() {
 		let messageCountAll = 0;
 		for (let i = 0; i < this.tabs.length; i++) {
@@ -235,9 +351,9 @@ class ServerManagerView {
 
 	toggleSidebar(show) {
 		if (show) {
-			this.$sidebar.classList.remove('hidden');
+			this.$sidebar.classList.remove('sidebar-hide');
 		} else {
-			this.$sidebar.classList.add('hidden');
+			this.$sidebar.classList.add('sidebar-hide');
 		}
 	}
 
@@ -270,16 +386,30 @@ class ServerManagerView {
 
 		ipcRenderer.on('open-about', this.openAbout.bind(this));
 
-		ipcRenderer.on('reload-viewer', this.reloadView.bind(this));
+		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
+
+		ipcRenderer.on('reload-current-viewer', this.reloadCurrentView.bind(this));
 
 		ipcRenderer.on('hard-reload', () => {
 			ipcRenderer.send('reload-full-app');
 		});
 
+		ipcRenderer.on('clear-app-data', () => {
+			ipcRenderer.send('clear-app-settings');
+		});
+
 		ipcRenderer.on('switch-server-tab', (event, index) => {
 			this.activateTab(index);
 		});
 
+		ipcRenderer.on('reload-proxy', (event, showAlert) => {
+			this.loadProxy().then(() => {
+				if (showAlert) {
+					alert('Proxy settings saved!');
+				}
+			});
+		});
+
 		ipcRenderer.on('toggle-sidebar', (event, show) => {
 			this.toggleSidebar(show);
 		});

app/renderer/js/notification.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const {remote} = require('electron');
+const { remote, ipcRenderer } = require('electron');
 
 const ConfigUtil = require(__dirname + '/utils/config-util.js');
 
-const app = remote.app;
+const { app } = remote;
 
 // From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
 // On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
@@ -12,11 +12,23 @@ app.setAppUserModelId('org.zulip.zulip-electron');
 
 const NativeNotification = window.Notification;
 
-class SilentNotification extends NativeNotification {
+class baseNotification extends NativeNotification {
 	constructor(title, opts) {
 		opts.silent = ConfigUtil.getConfigItem('silent') || false;
 		super(title, opts);
+
+		this.addEventListener('click', () => {
+			ipcRenderer.send('focus-app');
+		});
+	}
+	static requestPermission() {
+		return; // eslint-disable-line no-useless-return
+	}
+	// Override default Notification permission
+	static get permission() {
+		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
 	}
 }
 
-window.Notification = SilentNotification;
+window.Notification = baseNotification;
+

app/renderer/js/pages/preference/badge-settings.js

@@ -0,0 +1,63 @@
+'use strict';
+const electron = require('electron');
+const { app } = require('electron');
+
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
+
+let instance = null;
+
+class BadgeSettings {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		return instance;
+	}
+
+	showBadgeCount(messageCount, mainWindow) {
+		if (process.platform === 'darwin') {
+			app.setBadgeCount(messageCount);
+		}
+		if (process.platform === 'win32') {
+			this.updateOverlayIcon(messageCount, mainWindow);
+		}
+	}
+
+	hideBadgeCount(mainWindow) {
+		if (process.platform === 'darwin') {
+			app.setBadgeCount(0);
+		}
+		if (process.platform === 'win32') {
+			mainWindow.setOverlayIcon(null, '');
+		}
+	}
+
+	updateBadge(badgeCount, mainWindow) {
+		if (ConfigUtil.getConfigItem('badgeOption', true)) {
+			this.showBadgeCount(badgeCount, mainWindow);
+		} else {
+			this.hideBadgeCount(mainWindow);
+		}
+	}
+
+	updateOverlayIcon(messageCount, mainWindow) {
+		if (!mainWindow.isFocused()) {
+			mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
+		}
+		if (messageCount === 0) {
+			mainWindow.setOverlayIcon(null, '');
+		} else {
+			mainWindow.webContents.send('render-taskbar-icon', messageCount);
+		}
+	}
+
+	updateTaskbarIcon(data, text, mainWindow) {
+		const img = electron.nativeImage.createFromDataURL(data);
+		mainWindow.setOverlayIcon(img, text);
+	}
+}
+
+module.exports = new BadgeSettings();

app/renderer/js/pages/preference/base-section.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const {ipcRenderer} = require('electron');
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+
+class BaseSection extends BaseComponent {
+	generateSettingOption(props) {
+		const {$element, value, clickHandler} = props;
+
+		$element.innerHTML = '';
+
+		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value));
+		$element.appendChild($optionControl);
+
+		$optionControl.addEventListener('click', clickHandler);
+	}
+
+	generateOptionTemplate(settingOption) {
+		if (settingOption) {
+			return `
+				<div class="action">
+					<div class="switch">
+					  <input class="toggle toggle-round" type="checkbox" checked>
+					  <label></label>
+					</div>
+				</div>
+			`;
+		} else {
+			return `
+				<div class="action">
+					<div class="switch">
+					  <input class="toggle toggle-round" type="checkbox">
+					  <label></label>
+					</div>
+				</div>
+			`;
+		}
+	}
+
+	reloadApp() {
+		ipcRenderer.send('forward-message', 'reload-viewer');
+	}
+}
+
+module.exports = BaseSection;

app/renderer/js/pages/preference/create-new-org.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const shell = require('electron').shell;
+
+class CreateOrganziation extends BaseComponent {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="setting-row">
+				<div class="setting-description">
+					<span id="open-create-org-link">Or create a new organization on zulipchat.com<i class="material-icons open-tab-button">open_in_new</i></span>
+				</div>
+				<div class="setting-control"></div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.props.$root.innerHTML = this.template();
+		this.openCreateNewOrgExternalLink();
+	}
+
+	openCreateNewOrgExternalLink() {
+		const link = 'https://zulipchat.com/beta/';
+		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
+}
+
+module.exports = CreateOrganziation;

app/renderer/js/pages/preference/general-section.js

@@ -1,11 +1,14 @@
 'use strict';
+const path = require('path');
+const { ipcRenderer, remote } = require('electron');
+const fs = require('fs-extra');
 
-const {ipcRenderer} = require('electron');
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
+const { app, dialog } = remote;
+const currentBrowserWindow = remote.getCurrentWindow();
+const BaseSection = require(__dirname + '/base-section.js');
 const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
 
-class GeneralSection extends BaseComponent {
+class GeneralSection extends BaseSection {
 	constructor(props) {
 		super();
 		this.props = props;
@@ -13,144 +16,241 @@ class GeneralSection extends BaseComponent {
 
 	template() {
 		return `
-            <div class="settings-pane" id="server-settings-pane">
-                <div class="title">Tray Options</div>
-                <div id="tray-option-settings" class="settings-card">
-					<div class="setting-row">
+            <div class="settings-pane">
+                <div class="title">Appearance</div>
+                <div id="appearance-option-settings" class="settings-card">
+					<div class="setting-row" id="tray-option">
 						<div class="setting-description">Show app icon in system tray</div>
 						<div class="setting-control"></div>
 					</div>
-				</div>
-				<div class="title">App Updates</div>
-                <div id="betaupdate-option-settings" class="settings-card">
-					<div class="setting-row">
-						<div class="setting-description">Get beta updates</div>
+					<div class="setting-row" id="sidebar-option">
+						<div class="setting-description">Show sidebar (<span class="code">Cmd Or Ctrl+S</span>)</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="badge-option">
+						<div class="setting-description">Show app unread badge</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="flash-taskbar-option" style= "display:${process.platform === 'win32' ? '' : 'none'}">
+						<div class="setting-description">Flash taskbar on new message</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
 				<div class="title">Desktop Notification</div>
-                <div id="silent-option-settings" class="settings-card">
-					<div class="setting-row">
-						<div class="setting-description">Mute all sounds from Zulip (requires reload)</div>
+				<div class="settings-card">
+					<div class="setting-row" id="show-notification-option">
+						<div class="setting-description">Show Desktop Notifications</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="silent-option">
+						<div class="setting-description">Mute all sounds from Zulip</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">User Interface</div>
-                <div id="ui-option-settings" class="settings-card">
-					<div class="setting-row" id="sidebar-option">
-						<div class="setting-description">Show sidebar (<span class="code">CmdOrCtrl+S</span>)</div>
+				<div class="title">App Updates</div>
+                <div class="settings-card">
+					<div class="setting-row" id="betaupdate-option">
+						<div class="setting-description">Get beta updates</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
+				<div class="title">Functionality</div>
+                <div class="settings-card">
+					<div class="setting-row" id="startAtLogin-option">
+						<div class="setting-description">Start app at login</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="start-minimize-option">
+						<div class="setting-description">Always start minimized</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="enable-spellchecker-option">
+						<div class="setting-description">Enable Spellchecker (requires restart)</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">Reset Application Data</div>
+                <div class="settings-card">
+					<div class="setting-row" id="resetdata-option">
+						<div class="setting-description">This will delete all application data including all added accounts and preferences
+						</div>
+						<button class="reset-data-button blue">Reset App Data</button>
+					</div>
+				</div>
             </div>
 		`;
 	}
 
-	settingsOptionTemplate(settingOption) {
-		if (settingOption) {
-			return `
-				<div class="action green">
-					<span>On</span>
-				</div>
-			`;
-		} else {
-			return `
-				<div class="action red">
-					<span>Off</span>
-				</div>
-			`;
+	init() {
+		this.props.$root.innerHTML = this.template();
+		this.updateTrayOption();
+		this.updateBadgeOption();
+		this.updateSilentOption();
+		this.updateUpdateOption();
+		this.updateSidebarOption();
+		this.updateStartAtLoginOption();
+		this.updateResetDataOption();
+		this.showDesktopNotification();
+		this.enableSpellchecker();
+		this.minimizeOnStart();
+
+		// Platform specific settings
+		// Flashing taskbar on Windows
+		if (process.platform === 'win32') {
+			this.updateFlashTaskbar();
 		}
 	}
 
-	trayOptionTemplate(trayOption) {
-		this.settingsOptionTemplate(trayOption);
-	}
-
-	updateOptionTemplate(updateOption) {
-		this.settingsOptionTemplate(updateOption);
-	}
-
-	silentOptionTemplate(silentOption) {
-		this.settingsOptionTemplate(silentOption);
-	}
-
-	sidebarToggleTemplate(toggleOption) {
-		this.settingsOptionTemplate(toggleOption);
-	}
-
-	init() {
-		this.props.$root.innerHTML = this.template();
-		this.initTrayOption();
-		this.initUpdateOption();
-		this.initSilentOption();
-		this.initSidebarToggle();
-	}
-
-	initTrayOption() {
-		this.$trayOptionSettings = document.querySelector('#tray-option-settings .setting-control');
-		this.$trayOptionSettings.innerHTML = '';
-
-		const trayOption = ConfigUtil.getConfigItem('trayIcon', true);
-		const $trayOption = this.generateNodeFromTemplate(this.settingsOptionTemplate(trayOption));
-		this.$trayOptionSettings.appendChild($trayOption);
-
-		$trayOption.addEventListener('click', () => {
-			const newValue = !ConfigUtil.getConfigItem('trayIcon');
-			ConfigUtil.setConfigItem('trayIcon', newValue);
-			ipcRenderer.send('forward-message', 'toggletray');
-			this.initTrayOption();
+	updateTrayOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#tray-option .setting-control'),
+			value: ConfigUtil.getConfigItem('trayIcon', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('trayIcon');
+				ConfigUtil.setConfigItem('trayIcon', newValue);
+				ipcRenderer.send('forward-message', 'toggletray');
+				this.updateTrayOption();
+			}
 		});
 	}
 
-	initUpdateOption() {
-		this.$updateOptionSettings = document.querySelector('#betaupdate-option-settings .setting-control');
-		this.$updateOptionSettings.innerHTML = '';
-
-		const updateOption = ConfigUtil.getConfigItem('betaUpdate', false);
-		const $updateOption = this.generateNodeFromTemplate(this.settingsOptionTemplate(updateOption));
-		this.$updateOptionSettings.appendChild($updateOption);
-
-		$updateOption.addEventListener('click', () => {
-			const newValue = !ConfigUtil.getConfigItem('betaUpdate');
-			ConfigUtil.setConfigItem('betaUpdate', newValue);
-			this.initUpdateOption();
+	updateBadgeOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#badge-option .setting-control'),
+			value: ConfigUtil.getConfigItem('badgeOption', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('badgeOption');
+				ConfigUtil.setConfigItem('badgeOption', newValue);
+				ipcRenderer.send('toggle-badge-option', newValue);
+				this.updateBadgeOption();
+			}
 		});
 	}
 
-	initSilentOption() {
-		this.$silentOptionSettings = document.querySelector('#silent-option-settings .setting-control');
-		this.$silentOptionSettings.innerHTML = '';
-
-		const silentOption = ConfigUtil.getConfigItem('silent', false);
-		const $silentOption = this.generateNodeFromTemplate(this.settingsOptionTemplate(silentOption));
-		this.$silentOptionSettings.appendChild($silentOption);
-
-		$silentOption.addEventListener('click', () => {
-			const newValue = !ConfigUtil.getConfigItem('silent', true);
-			ConfigUtil.setConfigItem('silent', newValue);
-			this.initSilentOption();
+	updateFlashTaskbar() {
+		this.generateSettingOption({
+			$element: document.querySelector('#flash-taskbar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('flashTaskbarOnMessage');
+				ConfigUtil.setConfigItem('flashTaskbarOnMessage', newValue);
+				this.updateFlashTaskbar();
+			}
 		});
 	}
 
-	initSidebarToggle() {
-		this.$sidebarOptionSettings = document.querySelector('#ui-option-settings #sidebar-option .setting-control');
-		this.$sidebarOptionSettings.innerHTML = '';
-
-		const sidebarOption = ConfigUtil.getConfigItem('show-sidebar', true);
-		const $sidebarOption = this.generateNodeFromTemplate(this.settingsOptionTemplate(sidebarOption));
-		this.$sidebarOptionSettings.appendChild($sidebarOption);
-
-		$sidebarOption.addEventListener('click', () => {
-			const newValue = !ConfigUtil.getConfigItem('show-sidebar');
-			ConfigUtil.setConfigItem('show-sidebar', newValue);
-			ipcRenderer.send('forward-message', 'toggle-sidebar', newValue);
-			this.initSidebarToggle();
+	updateUpdateOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#betaupdate-option .setting-control'),
+			value: ConfigUtil.getConfigItem('betaUpdate', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('betaUpdate');
+				ConfigUtil.setConfigItem('betaUpdate', newValue);
+				this.updateUpdateOption();
+			}
 		});
 	}
 
-	handleServerInfoChange() {
-		ipcRenderer.send('forward-message', 'reload-viewer');
+	updateSilentOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#silent-option .setting-control'),
+			value: ConfigUtil.getConfigItem('silent', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('silent', true);
+				ConfigUtil.setConfigItem('silent', newValue);
+				this.updateSilentOption();
+				currentBrowserWindow.send('toogle-silent', newValue);
+			}
+		});
 	}
+
+	showDesktopNotification() {
+		this.generateSettingOption({
+			$element: document.querySelector('#show-notification-option .setting-control'),
+			value: ConfigUtil.getConfigItem('showNotification', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('showNotification', true);
+				ConfigUtil.setConfigItem('showNotification', newValue);
+				this.showDesktopNotification();
+			}
+		});
+	}
+
+	updateSidebarOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#sidebar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('showSidebar', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('showSidebar');
+				ConfigUtil.setConfigItem('showSidebar', newValue);
+				ipcRenderer.send('forward-message', 'toggle-sidebar', newValue);
+				this.updateSidebarOption();
+			}
+		});
+	}
+
+	updateStartAtLoginOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#startAtLogin-option .setting-control'),
+			value: ConfigUtil.getConfigItem('startAtLogin', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('startAtLogin');
+				ConfigUtil.setConfigItem('startAtLogin', newValue);
+				ipcRenderer.send('toggleAutoLauncher', newValue);
+				this.updateStartAtLoginOption();
+			}
+		});
+	}
+
+	enableSpellchecker() {
+		this.generateSettingOption({
+			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
+			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('enableSpellchecker');
+				ConfigUtil.setConfigItem('enableSpellchecker', newValue);
+				this.enableSpellchecker();
+			}
+		});
+	}
+
+	clearAppDataDialog() {
+		const clearAppDataMessage = 'By clicking proceed you will be removing all added accounts and preferences from Zulip. When the application restarts, it will be as if you are starting Zulip for the first time.';
+		const getAppPath = path.join(app.getPath('appData'), app.getName());
+
+		dialog.showMessageBox({
+			type: 'warning',
+			buttons: ['YES', 'NO'],
+			defaultId: 0,
+			message: 'Are you sure',
+			detail: clearAppDataMessage
+		}, response => {
+			if (response === 0) {
+				fs.remove(getAppPath);
+				setTimeout(() => ipcRenderer.send('forward-message', 'hard-reload'), 1000);
+			}
+		});
+	}
+
+	updateResetDataOption() {
+		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
+		resetDataButton.addEventListener('click', () => {
+			this.clearAppDataDialog();
+		});
+	}
+
+	minimizeOnStart() {
+		this.generateSettingOption({
+			$element: document.querySelector('#start-minimize-option .setting-control'),
+			value: ConfigUtil.getConfigItem('startMinimized', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('startMinimized');
+				ConfigUtil.setConfigItem('startMinimized', newValue);
+				this.minimizeOnStart();
+			}
+		});
+	}
+
 }
 
 module.exports = GeneralSection;

app/renderer/js/pages/preference/nav.js

@@ -8,7 +8,7 @@ class PreferenceNav extends BaseComponent {
 
 		this.props = props;
 
-		this.navItems = ['General', 'Servers'];
+		this.navItems = ['General', 'Network', 'Servers', 'Shortcuts'];
 
 		this.init();
 	}

app/renderer/js/pages/preference/network-section.js

@@ -0,0 +1,102 @@
+'use strict';
+
+const {ipcRenderer} = require('electron');
+
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');
+
+class NetworkSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+            <div class="settings-pane">
+                <div class="title">Proxy</div>
+                <div id="appearance-option-settings" class="settings-card">
+					<div class="setting-row" id="use-proxy-option">
+						<div class="setting-description">Connect servers through a proxy</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-block">
+						<div class="setting-row" id="proxy-pac-option">
+							<span class="setting-input-key">PAC script</span>
+							<input class="setting-input-value" placeholder="e.g. foobar.com/pacfile.js"/>
+						</div>
+						<div class="setting-row" id="proxy-rules-option">
+							<span class="setting-input-key">Proxy rules</span>
+							<input class="setting-input-value" placeholder="e.g. http=foopy:80;ftp=foopy2"/>
+						</div>
+						<div class="setting-row" id="proxy-bypass-option">
+							<span class="setting-input-key">Proxy bypass rules</span>
+							<input class="setting-input-value" placeholder="e.g. foobar.com"/>
+						</div>
+						<div class="setting-row">
+							<div class="action blue" id="proxy-save-action">
+								<i class="material-icons">check_box</i>
+								<span>Save</span>
+							</div>
+						</div>
+					</div>
+				</div>
+            </div>
+		`;
+	}
+
+	init() {
+		this.props.$root.innerHTML = this.template();
+		this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
+		this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
+		this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
+		this.$proxySaveAction = document.getElementById('proxy-save-action');
+		this.$settingBlock = this.props.$root.querySelector('.setting-block');
+		this.initProxyOption();
+
+		this.$proxyPAC.value = ConfigUtil.getConfigItem('proxyPAC', '');
+		this.$proxyRules.value = ConfigUtil.getConfigItem('proxyRules', '');
+		this.$proxyBypass.value = ConfigUtil.getConfigItem('proxyBypass', '');
+
+		this.$proxySaveAction.addEventListener('click', () => {
+			ConfigUtil.setConfigItem('proxyPAC', this.$proxyPAC.value);
+			ConfigUtil.setConfigItem('proxyRules', this.$proxyRules.value);
+			ConfigUtil.setConfigItem('proxyBypass', this.$proxyBypass.value);
+
+			ipcRenderer.send('forward-message', 'reload-proxy', true);
+		});
+	}
+
+	initProxyOption() {
+		const proxyEnabled = ConfigUtil.getConfigItem('useProxy', false);
+		this.toggleProxySettings(proxyEnabled);
+		this.updateProxyOption();
+	}
+
+	toggleProxySettings(option) {
+		if (option) {
+			this.$settingBlock.classList.remove('hidden');
+		} else {
+			this.$settingBlock.classList.add('hidden');
+		}
+	}
+
+	updateProxyOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#use-proxy-option .setting-control'),
+			value: ConfigUtil.getConfigItem('useProxy', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('useProxy');
+				ConfigUtil.setConfigItem('useProxy', newValue);
+				this.toggleProxySettings(newValue);
+				if (newValue === false) {
+					// Reload proxy if the proxy is turned off
+					ipcRenderer.send('forward-message', 'reload-proxy', false);
+				}
+				this.updateProxyOption();
+			}
+		});
+	}
+}
+
+module.exports = NetworkSection;

app/renderer/js/pages/preference/new-server-form.js

@@ -11,15 +11,16 @@ class NewServerForm extends BaseComponent {
 
 	template() {
 		return `
-			<div class="settings-card" style="border: solid 1px #4CAF50;">
+			<div class="settings-card">
 				<div class="server-info-right">
+					<div class="title">URL of Zulip organization</div>
 					<div class="server-info-row">
-						<input class="server-info-url" autofocus placeholder="Enter the url of your Zulip server..."/>
+						<input class="setting-input-value" autofocus placeholder="acme.zulipchat.com or chat.acme.com"/>
 					</div>
 					<div class="server-info-row">
-						<div class="action green server-save-action">
-							<i class="material-icons">check_box</i>
-							<span>Save</span>
+						<div class="action blue server-save-action">
+							<i class="material-icons">add_box</i>
+							<span>Add</span>
 						</div>
 					</div>
 				</div>
@@ -38,18 +39,29 @@ class NewServerForm extends BaseComponent {
 		this.props.$root.innerHTML = '';
 		this.props.$root.appendChild(this.$newServerForm);
 
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.server-info-url')[0];
+		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
+	}
+
+	submitFormHandler() {
+		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
+			DomainUtil.addDomain(serverConf).then(() => {
+				this.props.onChange(this.props.index);
+			});
+		}, errorMessage => {
+			alert(errorMessage);
+		});
 	}
 
 	initActions() {
 		this.$saveServerButton.addEventListener('click', () => {
-			DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
-				DomainUtil.addDomain(serverConf).then(() => {
-					this.props.onChange(this.props.index);
-				});
-			}, errorMessage => {
-				alert(errorMessage);
-			});
+			this.submitFormHandler();
+		});
+		this.$newServerUrl.addEventListener('keypress', event => {
+			const EnterkeyCode = event.keyCode;
+			// Submit form when Enter key is pressed
+			if (EnterkeyCode === 13) {
+				this.submitFormHandler();
+			}
 		});
 	}
 }

app/renderer/js/pages/preference/preference.js

@@ -1,11 +1,13 @@
 'use strict';
 
 const BaseComponent = require(__dirname + '/js/components/base.js');
-const {ipcRenderer} = require('electron');
+const { ipcRenderer } = require('electron');
 
 const Nav = require(__dirname + '/js/pages/preference/nav.js');
 const ServersSection = require(__dirname + '/js/pages/preference/servers-section.js');
 const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
+const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
+const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');
 
 class PreferenceView extends BaseComponent {
 	constructor() {
@@ -49,6 +51,18 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
+			case 'Network': {
+				this.section = new NetworkSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
+			case 'Shortcuts': {
+				this.section = new ShortcutsSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
 			default: break;
 		}
 		this.section.init();
@@ -59,6 +73,18 @@ class PreferenceView extends BaseComponent {
 		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
 			this.handleNavigation(navItem);
 		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			const inputSelector = '#sidebar-option .action .switch input';
+			const input = document.querySelector(inputSelector);
+			input.checked = state;
+		});
+
+		ipcRenderer.on('toggletray', (event, state) => {
+			const inputSelector = '#tray-option .action .switch input';
+			const input = document.querySelector(inputSelector);
+			input.checked = state;
+		});
 	}
 }
 

app/renderer/js/pages/preference/server-info-form.js

@@ -23,7 +23,7 @@ class ServerInfoForm extends BaseComponent {
 						<i class="material-icons open-tab-button">open_in_new</i>
 					</div>
 					<div class="server-info-row">
-						<input class="server-info-url" disabled value="${this.props.server.url}"/>
+						<input class="setting-input-value" disabled value="${this.props.server.url}"/>
 					</div>
 					<div class="server-info-row">
 						<div class="action red server-delete-action">

app/renderer/js/pages/preference/servers-section.js

@@ -1,13 +1,12 @@
 'use strict';
 
-const {ipcRenderer} = require('electron');
-
-const BaseComponent = require(__dirname + '/../../components/base.js');
+const BaseSection = require(__dirname + '/base-section.js');
 const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
 const ServerInfoForm = require(__dirname + '/server-info-form.js');
 const NewServerForm = require(__dirname + '/new-server-form.js');
+const CreateOrganziation = require(__dirname + '/create-new-org.js');
 
-class ServersSection extends BaseComponent {
+class ServersSection extends BaseSection {
 	constructor(props) {
 		super();
 		this.props = props;
@@ -16,23 +15,17 @@ class ServersSection extends BaseComponent {
 	template() {
 		return `
 			<div class="settings-pane" id="server-settings-pane">
-				<div class="title">Manage Servers</div>
-				<div class="actions-container">
-					<div class="action green" id="new-server-action">
-						<i class="material-icons">add_box</i>
-						<span>Add Server</span>
-					</div>
-				</div>
-				<div id="new-server-container" class="hidden"></div>
-				<div class="sub-title" id="existing-servers"></div>
+				<div class="page-title">Register or login to a Zulip organization to get started</div>
+				<div id="new-server-container"></div>
+				<div class="title" id="existing-servers"></div>
 				<div id="server-info-container"></div>
+				<div id="create-organization-container"></div>
 			</div>
 		`;
 	}
 
 	init() {
 		this.initServers();
-		this.initActions();
 	}
 
 	initServers() {
@@ -45,37 +38,36 @@ class ServersSection extends BaseComponent {
 		this.$newServerContainer = document.getElementById('new-server-container');
 		this.$newServerButton = document.getElementById('new-server-action');
 
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
+		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
 		// Show Existing servers if servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing servers';
+		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing organizations';
 		this.initNewServerForm();
 
+		this.$createOrganizationContainer = document.getElementById('create-organization-container');
+		this.initCreateNewOrganization();
+
 		for (let i = 0; i < servers.length; i++) {
 			new ServerInfoForm({
 				$root: this.$serverInfoContainer,
 				server: servers[i],
 				index: i,
-				onChange: this.handleServerInfoChange.bind(this)
+				onChange: this.reloadApp
 			}).init();
 		}
 	}
 
+	initCreateNewOrganization() {
+		new CreateOrganziation({
+			$root: this.$createOrganizationContainer
+		}).init();
+	}
+
 	initNewServerForm() {
 		new NewServerForm({
 			$root: this.$newServerContainer,
-			onChange: this.handleServerInfoChange.bind(this)
+			onChange: this.reloadApp
 		}).init();
 	}
-
-	initActions() {
-		this.$newServerContainer.classList.remove('hidden');
-		this.$newServerButton.classList.remove('green');
-		this.$newServerButton.classList.add('grey');
-	}
-
-	handleServerInfoChange() {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	}
 }
 
 module.exports = ServersSection;

app/renderer/js/pages/preference/shortcuts-section.js

@@ -0,0 +1,311 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+
+class ShortcutsSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	templateMac() {
+		const userOSKey = '⌘';
+
+		return `
+            <div class="settings-pane">
+              <div class="title">Application Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
+                    <td>Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
+                    <td>Keyboard Shortcuts</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
+                    <td>Reset App Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
+                    <td>Log Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+                    <td>Hide Zulip</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+                    <td>Hide Others</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
+                    <td>Quit Zulip</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Edit Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+                    <td>Undo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+                    <td>Redo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
+                    <td>Cut</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
+                    <td>Copy</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+                    <td>Paste</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+                    <td>Paste and Match Style</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
+                    <td>Select All</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
+                    <td>Find</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>G</kbd></td>
+                    <td>Find Next</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
+                    <td>Emoji & Symbols</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">View Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+                    <td>Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+                    <td>Hard Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
+                    <td>Enter Full Screen</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>=</kbd></td>
+                    <td>Zoom In</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
+                    <td>Zoom Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
+                    <td>Actual Size</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>S</kbd></td>
+                    <td>Toggle Sidebar</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
+                    <td>Toggle DevTools for Zulip App</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
+                    <td>Toggle DevTools for Active Tab</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">History Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
+                    <td>Back</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
+                    <td>Forward</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Window Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
+                    <td>Minimize</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
+                    <td>Close</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+            </div>
+		`;
+	}
+
+	templateWinLin() {
+		const userOSKey = 'Ctrl';
+
+		return `
+            <div class="settings-pane">
+              <div class="title">Application Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
+                    <td>Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
+                    <td>Keyboard Shortcuts</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
+                    <td>Log Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
+                    <td>Quit Zulip</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Edit Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
+                    <td>Undo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
+                    <td>Redo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
+                    <td>Cut</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
+                    <td>Copy</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
+                    <td>Paste</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
+                    <td>Paste and Match Style</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
+                    <td>Select All</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">View Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
+                    <td>Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+                    <td>Hard Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>F11</kbd></td>
+                    <td>Toggle Full Screen</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
+                    <td>Zoom In</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
+                    <td>Zoom Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
+                    <td>Actual Size</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>S</kbd></td>
+                    <td>Toggle Sidebar</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+                    <td>Toggle DevTools for Zulip App</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
+                    <td>Toggle DevTools for Active Tab</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">History Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>Alt</kbd> + <kbd>←</kbd></td>
+                    <td>Back</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Alt</kbd> + <kbd>→</kbd></td>
+                    <td>Forward</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Window Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
+                    <td>Minimize</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
+                    <td>Close</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+            </div>
+		`;
+	}
+
+	init() {
+		this.props.$root.innerHTML = (process.platform === 'darwin') ?
+			this.templateMac() : this.templateWinLin();
+	}
+}
+
+module.exports = ShortcutsSection;

app/renderer/js/preload.js

@@ -1,7 +1,10 @@
 'use strict';
 
-const {ipcRenderer} = require('electron');
-const {spellChecker} = require('./spellchecker');
+const { ipcRenderer } = require('electron');
+const SetupSpellChecker = require('./spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+
 // eslint-disable-next-line import/no-unassigned-import
 require('./notification');
 
@@ -32,11 +35,28 @@ process.once('loaded', () => {
 
 // To prevent failing this script on linux we need to load it after the document loaded
 document.addEventListener('DOMContentLoaded', () => {
-	// Init spellchecker
-	spellChecker();
+	// Get the default language of the server
+	const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, camelcase
+
+	if (serverLanguage) {
+		// Set spellcheker language
+		ConfigUtil.setConfigItem('spellcheckerLanguage', serverLanguage);
+		// Init spellchecker
+		SetupSpellChecker.init();
+	}
 
 	// redirect users to network troubleshooting page
-	document.querySelector('.restart_get_events_button').addEventListener('click', () => {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	});
+	const getRestartButton = document.querySelector('.restart_get_events_button');
+	if (getRestartButton) {
+		getRestartButton.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'reload-viewer');
+		});
+	}
 });
+
+// Clean up spellchecker events after you navigate away from this page;
+// otherwise, you may experience errors
+window.addEventListener('beforeunload', () => {
+	SetupSpellChecker.unsubscribeSpellChecker();
+});
+

app/renderer/js/spellchecker.js

@@ -1,29 +1,56 @@
 'use strict';
 
-const {SpellCheckHandler, ContextMenuListener, ContextMenuBuilder} = require('electron-spellchecker');
+const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
 
-function spellChecker() {
-	// Implement spellcheck using electron api
-	window.spellCheckHandler = new SpellCheckHandler();
-	window.spellCheckHandler.attachToInput();
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
 
-	// Start off as US English
-	window.spellCheckHandler.switchLanguage('en-US');
+class SetupSpellChecker {
+	init() {
+		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
+			this.enableSpellChecker();
+		}
+		this.enableContextMenu();
+	}
 
-	const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
-	const contextMenuListener = new ContextMenuListener(info => {
-		contextMenuBuilder.showPopupMenu(info);
-	});
+	enableSpellChecker() {
+		try {
+			this.SpellCheckHandler = new SpellCheckHandler();
+		} catch (err) {
+			console.log(err);
+		}
+	}
 
-	// Clean up events after you navigate away from this page;
-	// otherwise, you may experience errors
-	window.addEventListener('beforeunload', () => {
-	// eslint-disable-next-line no-undef
-		spellCheckHandler.unsubscribe();
-		contextMenuListener.unsubscribe();
-	});
+	enableContextMenu() {
+		if (this.SpellCheckHandler) {
+			this.SpellCheckHandler.attachToInput();
+
+			const userLanguage = ConfigUtil.getConfigItem('spellcheckerLanguage');
+
+			// eslint-disable-next-line no-unused-expressions
+			process.platform === 'darwin' ?
+				// On macOS, spellchecker fails to auto-detect the lanugage user is typing in
+				// that's why we need to mention it explicitly
+				this.SpellCheckHandler.switchLanguage(userLanguage) :
+				// On Linux and Windows, spellchecker can automatically detects the language the user is typing in
+				// and silently switches on the fly; thus we can start off as US English
+				this.SpellCheckHandler.switchLanguage('en-US');
+		}
+
+		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
+		this.contextMenuListener = new ContextMenuListener(info => {
+			contextMenuBuilder.showPopupMenu(info);
+		});
+	}
+
+	unsubscribeSpellChecker() {
+		// eslint-disable-next-line no-undef
+		if (this.SpellCheckHandler) {
+			this.SpellCheckHandler.unsubscribe();
+		}
+		if (this.contextMenuListener) {
+			this.contextMenuListener.unsubscribe();
+		}
+	}
 }
 
-module.exports = {
-	spellChecker
-};
+module.exports = new SetupSpellChecker();

app/renderer/js/tray.js

@@ -3,105 +3,111 @@ const path = require('path');
 
 const electron = require('electron');
 
-const {ipcRenderer, remote} = electron;
+const { ipcRenderer, remote } = electron;
 
-const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+const { Tray, Menu, BrowserWindow } = remote;
 
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+const APP_ICON = path.join(__dirname, '../../resources/', 'f');
 
 const ConfigUtil = require(__dirname + '/utils/config-util.js');
 
-const iconPath = () => {
+const iconPath = unreadCount => {
 	if (process.platform === 'linux') {
 		return APP_ICON + 'linux.png';
 	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
+	if (!unreadCount) {
+		return path.join(__dirname, '../../resources/tray', 'trayosx@2x.png');
+	}
+	if (unreadCount > 99) {
+		return APP_ICON + (process.platform === 'win32' ? 'win.ico' : `/favicon-infinite.png`);
+	}
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : `/favicon-${unreadCount}.png`);
 };
 
 let unread = 0;
 
-const trayIconSize = () => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
-};
+// const trayIconSize = () => {
+// 	switch (process.platform) {
+// 		case 'darwin':
+// 			return 20;
+// 		case 'win32':
+// 			return 100;
+// 		case 'linux':
+// 			return 100;
+// 		default: return 80;
+// 	}
+// };
 
 //  Default config for Icon we might make it OS specific if needed like the size
-const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
-};
+// const config = {
+// 	pixelRatio: window.devicePixelRatio,
+// 	unreadCount: 0,
+// 	showUnreadCount: true,
+// 	unreadColor: '#000000',
+// 	readColor: '#000000',
+// 	unreadBackgroundColor: '#B9FEEA',
+// 	readBackgroundColor: '#B9FEEA',
+// 	size: trayIconSize(),
+// 	thick: process.platform === 'win32'
+// };
 
-const renderCanvas = function (arg) {
-	config.unreadCount = arg;
+// const renderCanvas = function (arg) {
+// 	config.unreadCount = arg;
 
-	return new Promise(resolve => {
-		const SIZE = config.size * config.pixelRatio;
-		const PADDING = SIZE * 0.05;
-		const CENTER = SIZE / 2;
-		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-		const color = config.unreadCount ? config.unreadColor : config.readColor;
-		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+// 	return new Promise(resolve => {
+// 		const SIZE = config.size * config.pixelRatio;
+// 		const PADDING = SIZE * 0.05;
+// 		const CENTER = SIZE / 2;
+// 		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
+// 		const color = config.unreadCount ? config.unreadColor : config.readColor;
+// 		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
 
-		const canvas = document.createElement('canvas');
-		canvas.width = SIZE;
-		canvas.height = SIZE;
-		const ctx = canvas.getContext('2d');
+// 		const canvas = document.createElement('canvas');
+// 		canvas.width = SIZE;
+// 		canvas.height = SIZE;
+// 		const ctx = canvas.getContext('2d');
 
-		// Circle
-		// If (!config.thick || config.thick && HAS_COUNT) {
-		ctx.beginPath();
-		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-		ctx.fillStyle = backgroundColor;
-		ctx.fill();
-		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-		ctx.strokeStyle = backgroundColor;
-		ctx.stroke();
-		// Count or Icon
-		if (HAS_COUNT) {
-			ctx.fillStyle = color;
-			ctx.textAlign = 'center';
-			if (config.unreadCount > 99) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-			} else if (config.unreadCount < 10) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
-			} else {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
-			}
+// 		// Circle
+// 		// If (!config.thick || config.thick && HAS_COUNT) {
+// 		ctx.beginPath();
+// 		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
+// 		ctx.fillStyle = backgroundColor;
+// 		ctx.fill();
+// 		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
+// 		ctx.strokeStyle = backgroundColor;
+// 		ctx.stroke();
+// 		// Count or Icon
+// 		if (HAS_COUNT) {
+// 			ctx.fillStyle = color;
+// 			ctx.textAlign = 'center';
+// 			if (config.unreadCount > 99) {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
+// 				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
+// 			} else if (config.unreadCount < 10) {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+// 				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
+// 			} else {
+// 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+// 				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
+// 			}
 
-			resolve(canvas);
-		}
-	});
-};
-/**
- * Renders the tray icon as a native image
- * @param arg: Unread count
- * @return the native image
- */
-const renderNativeImage = function (arg) {
-	return Promise.resolve()
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
-		});
-};
+// 			resolve(canvas);
+// 		}
+// 	});
+// };
+// /**
+//  * Renders the tray icon as a native image
+//  * @param arg: Unread count
+//  * @return the native image
+//  */
+// const renderNativeImage = function (arg) {
+// 	return Promise.resolve()
+// 		.then(() => iconPath(arg))
+// 	// .then(canvas => {
+// 	// 	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
+// 	// 	return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
+// 	// });
+// };
 
 function sendAction(action) {
 	const win = BrowserWindow.getAllWindows()[0];
@@ -180,40 +186,46 @@ ipcRenderer.on('tray', (event, arg) => {
 	if (!window.tray) {
 		return;
 	}
-	// We don't want to create tray from unread messages on windows and macOS since these systems already have dock badges and taskbar overlay icon.
-	if (process.platform === 'linux') {
+	// We don't want to create tray from unread messages on macOS since it already has dock badges.
+	if (process.platform === 'darwin' || process.platform === 'win32') {
 		if (arg === 0) {
 			unread = arg;
-			// Message Count // console.log("message count is zero.");
 			window.tray.setImage(iconPath());
 			window.tray.setToolTip('No unread messages');
 		} else {
 			unread = arg;
-			renderNativeImage(arg).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(arg + ' unread messages');
-			});
+			// renderNativeImage(arg).then(image => {
+			window.tray.setImage(iconPath(arg));
+			window.tray.setToolTip(arg + ' unread messages');
+			// });
 		}
 	}
 });
 
 function toggleTray() {
+	let state;
 	if (window.tray) {
+		state = false;
 		window.tray.destroy();
 		if (window.tray.isDestroyed()) {
 			window.tray = null;
 		}
 		ConfigUtil.setConfigItem('trayIcon', false);
 	} else {
+		state = true;
 		createTray();
-		if (process.platform === 'linux') {
-			renderNativeImage(unread).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
-			});
+		if (process.platform === 'darwin' || process.platform === 'win32') {
+			// renderNativeImage(unread).then(image => {
+			window.tray.setImage(iconPath());
+			window.tray.setToolTip(unread + ' unread messages');
+			// });
 		}
 		ConfigUtil.setConfigItem('trayIcon', true);
 	}
+	const selector = 'webview:not([class*=disabled])';
+	const webview = document.querySelector(selector);
+	const webContents = webview.getWebContents();
+	webContents.send('toggletray', state);
 }
 
 ipcRenderer.on('toggletray', toggleTray);

app/renderer/js/utils/config-util.js

@@ -1,16 +1,29 @@
 'use strict';
 
+const fs = require('fs');
+const path = require('path');
 const process = require('process');
 const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: 'config-util.log',
+	timestamp: true
+});
 
 let instance = null;
+let dialog = null;
 let app = null;
 
 /* To make the util runnable in both main and renderer process */
 if (process.type === 'renderer') {
-	app = require('electron').remote.app;
+	const remote = require('electron').remote;
+	dialog = remote.dialog;
+	app = remote.app;
 } else {
-	app = require('electron').app;
+	const electron = require('electron');
+	dialog = electron.dialog;
+	app = electron.app;
 }
 
 class ConfigUtil {
@@ -26,6 +39,7 @@ class ConfigUtil {
 	}
 
 	getConfigItem(key, defaultValue = null) {
+		this.reloadDB();
 		const value = this.db.getData('/')[key];
 		if (value === undefined) {
 			this.setConfigItem(key, defaultValue);
@@ -46,7 +60,22 @@ class ConfigUtil {
 	}
 
 	reloadDB() {
-		this.db = new JsonDB(app.getPath('userData') + '/settings.json', true, true);
+		const settingsJsonPath = path.join(app.getPath('userData'), '/settings.json');
+		try {
+			const file = fs.readFileSync(settingsJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(settingsJsonPath)) {
+				fs.unlinkSync(settingsJsonPath);
+				dialog.showErrorBox(
+					'Error saving settings',
+					'We encountered error while saving current settings.'
+				);
+				logger.error('Error while JSON parsing settings.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(settingsJsonPath, true, true);
 	}
 }
 

app/renderer/js/utils/default-util.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+
+let app = null;
+let setupCompleted = false;
+if (process.type === 'renderer') {
+	app = require('electron').remote.app;
+} else {
+	app = require('electron').app;
+}
+
+const zulipDir = app.getPath('userData');
+const logDir = `${zulipDir}/Logs/`;
+const initSetUp = () => {
+	// if it is the first time the app is running
+	// create zulip dir in userData folder to
+	// avoid errors
+	if (!setupCompleted) {
+		if (!fs.existsSync(zulipDir)) {
+			fs.mkdirSync(zulipDir);
+		}
+
+		if (!fs.existsSync(logDir)) {
+			fs.mkdirSync(logDir);
+		}
+		setupCompleted = true;
+	}
+};
+
+module.exports = {
+	initSetUp
+};

app/renderer/js/utils/domain-util.js

@@ -1,10 +1,16 @@
 'use strict';
 
-const {app, dialog} = require('electron').remote;
+const { app, dialog } = require('electron').remote;
 const fs = require('fs');
 const path = require('path');
 const JsonDB = require('node-json-db');
 const request = require('request');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
 
 let instance = null;
 
@@ -45,6 +51,11 @@ class DomainUtil {
 		return this.db.getData(`/domains[${index}]`);
 	}
 
+	updateDomain(index, server) {
+		this.reloadDB();
+		this.db.push(`/domains[${index}]`, server, true);
+	}
+
 	addDomain(server) {
 		return new Promise(resolve => {
 			if (server.icon) {
@@ -73,11 +84,26 @@ class DomainUtil {
 		this.reloadDB();
 	}
 
-	checkDomain(domain) {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (!hasPrefix) {
-			domain = (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
+	// Check if domain is already added
+	duplicateDomain(domain) {
+		domain = this.formatUrl(domain);
+		const servers = this.getDomains();
+		for (const i in servers) {
+			if (servers[i].url === domain) {
+				return true;
+			}
 		}
+		return false;
+	}
+
+	checkDomain(domain, silent = false) {
+		if (!silent && this.duplicateDomain(domain)) {
+			// Do not check duplicate in silent mode
+			alert('This server has been added.');
+			return;
+		}
+
+		domain = this.formatUrl(domain);
 
 		const checkDomain = domain + '/static/audio/zulip.ogg';
 
@@ -90,35 +116,62 @@ class DomainUtil {
 		return new Promise((resolve, reject) => {
 			request(checkDomain, (error, response) => {
 				const certsError =
-					['Error: self signed certificate',
-						'Error: unable to verify the first certificate'
+					[
+						'Error: self signed certificate',
+						'Error: unable to verify the first certificate',
+						'Error: unable to get local issuer certificate'
 					];
-				if (!error && response.statusCode !== 404) {
+
+				// If the domain contains following strings we just bypass the server
+				const whitelistDomains = [
+					'zulipdev.org'
+				];
+
+				// make sure that error is a error or string not undefined
+				// so validation does not throw error.
+				error = error || '';
+				if (!error && response.statusCode < 400) {
 					// Correct
 					this.getServerSettings(domain).then(serverSettings => {
 						resolve(serverSettings);
 					}, () => {
 						resolve(serverConf);
 					});
-				} else if (certsError.indexOf(error.toString()) >= 0) {
-					dialog.showMessageBox({
-						type: 'question',
-						buttons: ['Yes', 'No'],
-						defaultId: 0,
-						message: `Do you trust certificate from ${domain}? \n ${error}`
-					}, response => {
-						if (response === 0) {
-							this.getServerSettings(domain).then(serverSettings => {
-								resolve(serverSettings);
-							}, () => {
-								resolve(serverConf);
-							});
-						} else {
-							reject('Untrusted Certificate.');
-						}
-					});
+				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError.indexOf(error.toString()) >= 0) {
+					if (silent) {
+						this.getServerSettings(domain).then(serverSettings => {
+							resolve(serverSettings);
+						}, () => {
+							resolve(serverConf);
+						});
+					} else {
+						const certErrorMessage = `Do you trust certificate from ${domain}? \n ${error}`;
+						const certErrorDetail = `The server you're connecting to is either someone impersonating the Zulip server you entered, or the server you're trying to connect to is configured in an insecure way.
+						\n Unless you have a good reason to believe otherwise, you should not proceed.
+						\n You can click here if you'd like to proceed with the connection.`;
+
+						dialog.showMessageBox({
+							type: 'warning',
+							buttons: ['Yes', 'No'],
+							defaultId: 0,
+							message: certErrorMessage,
+							detail: certErrorDetail
+						}, response => {
+							if (response === 0) {
+								this.getServerSettings(domain).then(serverSettings => {
+									resolve(serverSettings);
+								}, () => {
+									resolve(serverConf);
+								});
+							} else {
+								reject('Untrusted Certificate.');
+							}
+						});
+					}
 				} else {
-					reject('Not a valid Zulip server');
+					const invalidZulipServerError = `${domain} does not appear to be a valid Zulip server. Make sure that \
+					\n(1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings \n (3) its a zulip server`;
+					reject(invalidZulipServerError);
 				}
 			});
 		});
@@ -132,7 +185,9 @@ class DomainUtil {
 					const data = JSON.parse(response.body);
 					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
 						resolve({
-							icon: data.realm_uri + data.realm_icon,
+							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+							// Following check handles both the cases
+							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
 							url: data.realm_uri,
 							alias: data.realm_name
 						});
@@ -146,14 +201,8 @@ class DomainUtil {
 
 	saveServerIcon(url) {
 		// The save will always succeed. If url is invalid, downgrade to default icon.
-		const dir = `${app.getPath('userData')}/server-icons`;
-
-		if (!fs.existsSync(dir)) {
-			fs.mkdirSync(dir);
-		}
-
 		return new Promise(resolve => {
-			const filePath = `${dir}/${new Date().getMilliseconds()}${path.extname(url).split('?')[0]}`;
+			const filePath = this.generateFilePath(url);
 			const file = fs.createWriteStream(filePath);
 			try {
 				request(url).on('response', response => {
@@ -175,8 +224,63 @@ class DomainUtil {
 		});
 	}
 
+	updateSavedServer(url, index) {
+		// Does not promise successful update
+		this.checkDomain(url, true).then(newServerConf => {
+			this.saveServerIcon(newServerConf.icon).then(localIconUrl => {
+				newServerConf.icon = localIconUrl;
+				this.updateDomain(index, newServerConf);
+				this.reloadDB();
+			});
+		});
+	}
+
 	reloadDB() {
-		this.db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
+		const domainJsonPath = path.join(app.getPath('userData'), '/domain.json');
+		try {
+			const file = fs.readFileSync(domainJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(domainJsonPath)) {
+				fs.unlinkSync(domainJsonPath);
+				dialog.showErrorBox(
+					'Error saving new organization',
+					'There seems to be error while saving new organization, ' +
+					'you may have to re-add your previous organizations back.'
+				);
+				logger.error('Error while JSON parsing domain.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(domainJsonPath, true, true);
+	}
+
+	generateFilePath(url) {
+		const dir = `${app.getPath('userData')}/server-icons`;
+		const extension = path.extname(url).split('?')[0];
+
+		let hash = 5381;
+		let len = url.length;
+
+		while (len) {
+			hash = (hash * 33) ^ url.charCodeAt(--len);
+		}
+
+		// Create 'server-icons' directory if not existed
+		if (!fs.existsSync(dir)) {
+			fs.mkdirSync(dir);
+		}
+
+		return `${dir}/${hash >>> 0}${extension}`;
+	}
+
+	formatUrl(domain) {
+		const hasPrefix = (domain.indexOf('http') === 0);
+		if (hasPrefix) {
+			return domain;
+		} else {
+			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
+		}
 	}
 }
 

app/renderer/js/utils/logger-util.js

@@ -0,0 +1,87 @@
+const NodeConsole = require('console').Console;
+const fs = require('fs');
+const isDev = require('electron-is-dev');
+const { initSetUp } = require('./default-util');
+
+initSetUp();
+let app = null;
+if (process.type === 'renderer') {
+	app = require('electron').remote.app;
+} else {
+	app = require('electron').app;
+}
+
+const browserConsole = console;
+const logDir = `${app.getPath('userData')}/Logs`;
+
+class Logger {
+	constructor(opts = {}) {
+		let {
+			timestamp = true,
+			file = 'console.log',
+			level = true,
+			logInDevMode = false
+		} = opts;
+
+		file = `${logDir}/${file}`;
+		if (timestamp === true) {
+			timestamp = this.getTimestamp;
+		}
+
+		const fileStream = fs.createWriteStream(file, { flags: 'a' });
+		const nodeConsole = new NodeConsole(fileStream);
+
+		this.nodeConsole = nodeConsole;
+		this.timestamp = timestamp;
+		this.level = level;
+		this.logInDevMode = logInDevMode;
+		this.setUpConsole();
+	}
+
+	_log(type, ...args) {
+		const {
+			nodeConsole, timestamp, level, logInDevMode
+		} = this;
+		let nodeConsoleLog;
+
+		/* eslint-disable no-fallthrough */
+		switch (true) {
+			case typeof timestamp === 'function':
+				args.unshift(timestamp() + ' |\t');
+
+			case (level !== false):
+				args.unshift(type.toUpperCase() + ' |');
+
+			case isDev || logInDevMode:
+				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
+				nodeConsoleLog.apply(null, args);
+
+			default: break;
+		}
+		/* eslint-enable no-fallthrough */
+
+		browserConsole[type].apply(null, args);
+	}
+
+	setUpConsole() {
+		for (const type in browserConsole) {
+			this.setupConsoleMethod(type);
+		}
+	}
+
+	setupConsoleMethod(type) {
+		this[type] = (...args) => {
+			this._log(type, ...args);
+		};
+	}
+
+	getTimestamp() {
+		const date = new Date();
+		const timestamp =
+			`${date.getMonth()}/${date.getDate()} ` +
+			`${date.getMinutes()}:${date.getSeconds()}`;
+		return timestamp;
+	}
+}
+
+module.exports = Logger;

app/renderer/main.html

@@ -13,13 +13,14 @@
     <div class="popup">
       <span class="popuptext hidden" id="fullscreen-popup"></span>
   </div>
-  <div id="sidebar">
+  <div id="sidebar" class="toggle-sidebar">
     <div id="view-controls-container">
       <div id="tabs-container"></div>
       <div id="add-tab" class="tab functional-tab">
         <div class="server-tab" id="add-action">
           <i class="material-icons">add</i>
         </div>
+        <span id="add-server-tooltip" style="display:none">Add organization</span>
       </div>
     </div>
     <div id="actions-container">