echo commit range on travis.

This will setup a commit hook that will check the commit msg run
`npm run lint-commits` to check all the commits. Additionaly setup
git hooks by running `npm run setup-gitlint-hooks`.

.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

@@ -1,8 +1,31 @@
-node_modules
-npm-debug.log
-domain.json
+# Dependency directories
+node_modules/
 
+# npm cache directory
+.npm
+
+# Compiled binary build directory
+dist/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 // osx garbage
 *.DS_Store
 .DS_Store
+
+# dotenv environment variables file
+.env
+
+# miscellaneous
+.idea
+config.gypi
+
+# Test generated files
+tests/package.json
+
+.python-version

.node-version

@@ -0,0 +1 @@
+6.9.4

.travis.yml

@@ -1,3 +1,43 @@
+sudo: required
+dist: trusty
+
+os:
+- osx
+- linux
+
+addons:
+  apt:
+    packages:
+    - build-essential
+    - libxext-dev
+    - libxtst-dev
+    - libxkbfile-dev
+
 language: node_js
 node_js:
-  - 'node'
+- '6'
+
+before_install:
+  - ./scripts/travis-xvfb.sh
+  - npm install -g gulp
+  - npm install
+
+cache:
+  directories:
+  - node_modules
+  - app/node_modules
+
+script:
+  - echo $TRAVIS_COMMIT_RANGE
+  - echo ${TRAVIS_COMMIT_RANGE/.../..}
+  - echo "test"
+  - git log -4
+  - node ./tools/gitlint --ci-mode
+  - npm run travis
+
+notifications:
+  webhooks:
+    urls:
+      - https://zulip.org/zulipbot/travis
+    on_success: always
+    on_failure: always

CONTRIBUTING.md

@@ -1,37 +1,47 @@
-#Contributing Guidelines
+# Contributing Guidelines
 
 Thanks for taking the time to contribute!
 
-The following is a set of guidelines for contributing to zulip-electron. These are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+The following is a set of guidelines for contributing to Zulip Electron Desktop Client. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
 
 ## Getting Started
 
-Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron please head over to [this](http://jlord.us/essential-electron/) great article.
+Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](http://jlord.us/essential-electron/) great article.
+
+## Community
+
+* The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).
+
+* If you have any questions regarding zulip-electron, open an [issue](https://github.com/zulip/zulip-electron/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/electron).
 
 ## Issue
-Ensure the bug was not already reported by searching on GitHub under [Issues](https://github.com/zulip/zulip-electron/issues). If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/zulip/zulip-electron/issues/new). Please pay attention to following points while opening an issue.
+Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-electron/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-electron/issues/new).
+
+The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by commenting the following in the comment section: "**@zulipbot** claim". **@zulipbot** will assign you to the issue and label the issue as **in progress**. For more details, check out [**@zulipbot**](https://github.com/zulip/zulipbot).
+
+Please pay attention to the following points while opening an issue.
 
 ### Does it happen on web browsers? (especially Chrome)
-Zulip-Desktop is based on Electron, which integrates the Chrome engine within a standalone application.
-If the problem you encounter can be reproduced on web browsers, it may be an issue with Zulip web app.
+Zulip's desktop client is based on Electron, which integrates the Chrome engine within a standalone application.
+If the problem you encounter can be reproduced on web browsers, it may be an issue with [Zulip web app](https://github.com/zulip/zulip).
 
 ### Write detailed information
-Detailed information is very helpful to understand the problem.
+Detailed information is very helpful to understand an issue.
 
 For example:
-* How to reproduce, step-by-step
-* Expected behavior (or what is wrong)
-* Screenshots (for GUI issues)
-* Application version
-* Operating system
-* Zulip-Desktop version
+* How to reproduce the issue, step-by-step.
+* The expected behavior (or what is wrong).
+* Screenshots for GUI issues.
+* The application version.
+* The operating system.
+* The Zulip-Desktop version.
 
 
 ## Pull Requests
-Pull Requests are welcome. 
+Pull Requests are always welcome. 
 
-1. When you edit the code, please run `npm run test` to check formatting of your code before git commit.
+1. When you edit the code, please run `npm run test` to check the formatting of your code before you `git commit`.
 2. Ensure the PR description clearly describes the problem and solution. It should include:
-   * Operating System version on which you tested
-   * Zulip-Desktop version on which you tested
-   * The relevant issue number if applicable
+   * The operating system on which you tested.
+   * The Zulip-Desktop version on which you tested.
+   * The relevant issue number, if applicable.

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

@@ -1,63 +1,32 @@
 # Zulip Desktop Client
+[![Build Status](https://travis-ci.org/zulip/zulip-electron.svg?branch=master)](https://travis-ci.org/zulip/zulip-electron)
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-electron?branch=master&svg=true)](https://ci.appveyor.com/project/akashnimare/zulip-electron/branch/master)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
 
-This is an experimental replacement for the [Zulip Desktop
-app](https://github.com/zulip/zulip-desktop) implemented in
-[Electron](http://electron.atom.io/).
+Desktop client for Zulip. Available for Mac, Linux and Windows.
 
-The goal is to achieve feature-compatibility with the old desktop app
-and then start adding cool features like easy support for
-multi-account, auto-updates etc.
+<img src="http://i.imgur.com/ChzTq4F.png"/>
 
-## Installation
+# Download
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
 
-Clone the source locally:
+# Features
+* Sign in to multiple teams
+* Desktop Notifications with inline reply support
+* Multilanguage SpellChecker
+* OSX/Win/Linux installers
+* Automatic Updates (macOS/Windows/Linux)
+* Keyboard shortcuts
 
-```sh
-$ git clone https://github.com/zulip/zulip-electron
-$ cd zulip-electron
-```
-If you're on Debian or Ubuntu, you'll also need to install
-`nodejs-legacy`:
+# Development
+Please see our [development guide](./development.md) to get started and run app locally.
 
-Use your package manager to install `npm`.
-
-```sh
-$ sudo apt-get install npm nodejs-legacy
-```
-
-Install project dependencies:
-
-```sh
-$ npm install
-```
-Start the app:
-
-```sh
-$ npm start
-```
-
-Start and watch changes  
-
-```sh
-$ npm run dev
-```
-
-## Features
-
-- [x] Native Notifications
-- [x] Spell Checker
-- [x] Keyboard Shortcuts
-- Default shortcuts - <kbd>cmdOrctrl + k </kbd>
-- Change Zulip Server: <kbd>cmdOrctrl + ,</kbd>
-- Back: <kbd>cmdOrctrl + [</kbd>
-- Forward: <kbd>cmdOrctrl + ]</kbd>
-- [ ] OSX/Win/Linux installer
-- [ ] Launch on OS startup
-- [ ] Automatic Updates
-
-## Contribute
+# Contribute
 
 If you want to contribute please make sure to read [our documentation about contributing](./CONTRIBUTING.md) first.
 
 * [Issue Tracker](https://github.com/zulip/zulip-electron/issues)
 * [Source Code](https://github.com/zulip/zulip-electron/)
+
+# License
+Released under the [Apache-2.0](./LICENSE) license.

app/main/autoupdater.js

@@ -0,0 +1,53 @@
+'use strict';
+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 => {
+		// Ask user to update the app
+		dialog.showMessageBox({
+			type: 'question',
+			buttons: ['Install and Relaunch', 'Install Later'],
+			defaultId: 0,
+			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();
+					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+					app.quit();
+				}, 1000);
+			}
+		});
+	});
+	// Init for updates
+	autoUpdater.checkForUpdates();
+}
+
+module.exports = {
+	appUpdater
+};

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,142 +1,141 @@
 'use strict';
 const path = require('path');
 const electron = require('electron');
-const {app} = require('electron');
-const electronLocalshortcut = require('electron-localshortcut');
-const ipc = require('electron').ipcMain;
-const Configstore = require('configstore');
-const JsonDB = require('node-json-db');
-const SpellChecker = require('simple-spellchecker');
-const tray = require('./tray');
+const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
 const appMenu = require('./menu');
-const link = require('./link-helper');
+const { appUpdater } = require('./autoupdater');
+const { crashHandler } = require('./crash-reporter');
 
-const {linkIsInternal} = link;
+const { setAutoLaunch } = require('./startup');
 
-const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-const data = db.getData('/');
+const { app, ipcMain } = electron;
 
-// adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
-require('electron-context-menu')();
+const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
-const conf = new Configstore('Zulip-Desktop');
+// Adds debug features like hotkeys for triggering dev tools and reload
+// in development mode
+if (isDev) {
+	require('electron-debug')();
+}
 
-// spellchecker enabled
-let myDictionary = null;
-
-// prevent window being garbage collected
+// Prevent window being garbage collected
 let mainWindow;
-let targetLink;
+let badgeCount;
+
+let isQuitting = false;
 
 // Load this url in main window
-const targetUrl = 'file://' + path.join(__dirname, '../renderer', 'index.html');
+const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
 
-function checkWindowURL() {
-	if (data.domain !== undefined) {
-		return data.domain;
+const isAlreadyRunning = app.makeSingleInstance(() => {
+	if (mainWindow) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+
+		mainWindow.show();
 	}
-	return targetLink;
+});
+
+if (isAlreadyRunning) {
+	return app.quit();
 }
 
 const APP_ICON = path.join(__dirname, '../resources', 'Icon');
 
-const spellDict = path.join(__dirname, '../../node_modules/simple-spellchecker/dict');
-
 const iconPath = () => {
 	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
 };
 
-function onClosed() {
-	// dereference the window
-	// for multiple windows store them in an array
-	mainWindow = null;
-}
-
-function updateDockBadge(title) {
-	if (title.indexOf('Zulip') === -1) {
-		return;
-	}
-
-	let messageCount = (/\(([0-9]+)\)/).exec(title);
-	messageCount = messageCount ? Number(messageCount[1]) : 0;
-
-	if (process.platform === 'darwin') {
-		app.setBadgeCount(messageCount);
-	}
-}
-
 function createMainWindow() {
+	// Load the previous state with fallback to defaults
+	const mainWindowState = windowStateKeeper({
+		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',
-		width: conf.get('width') || 1000,
-		height: conf.get('height') || 600,
 		icon: iconPath(),
-		minWidth: 600,
+		x: mainWindowState.x,
+		y: mainWindowState.y,
+		width: mainWindowState.width,
+		height: mainWindowState.height,
+		minWidth: 300,
 		minHeight: 400,
 		webPreferences: {
-			preload: path.join(__dirname, 'preload.js'),
-			nodeIntegration: true,
-			plugins: true
+			plugins: true,
+			allowDisplayingInsecureContent: true,
+			nodeIntegration: true
+		},
+		show: false
+	});
+
+	win.on('focus', () => {
+		win.webContents.send('focus');
+	});
+
+	win.once('ready-to-show', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
+	});
+
+	win.loadURL(mainURL);
+
+	// Keep the app running in background on close event
+	win.on('close', e => {
+		if (!isQuitting) {
+			e.preventDefault();
+
+			if (process.platform === 'darwin') {
+				app.hide();
+			} else {
+				win.hide();
+			}
 		}
 	});
 
-	win.loadURL(targetUrl);
-	win.on('closed', onClosed);
 	win.setTitle('Zulip');
 
-	// Let's save browser window position
-	if (conf.get('x') || conf.get('y')) {
-		win.setPosition(conf.get('x'), conf.get('y'));
-	}
-
-	if (conf.get('maximize')) {
-		win.maximize();
-	}
-
-	// Handle sizing events so we can persist them.
-	win.on('maximize', () => {
-		conf.set('maximize', true);
+	win.on('enter-full-screen', () => {
+		win.webContents.send('enter-fullscreen');
 	});
 
-	win.on('unmaximize', () => {
-		conf.set('maximize', false);
+	win.on('leave-full-screen', () => {
+		win.webContents.send('leave-fullscreen');
 	});
 
-	win.on('resize', function () {
-		const size = this.getSize();
-		conf.set({
-			width: size[0],
-			height: size[1]
-		});
+	//  To destroy tray icon when navigate to a new URL
+	win.webContents.on('will-navigate', e => {
+		if (e) {
+			win.webContents.send('destroytray');
+		}
 	});
 
-	// on osx it's 'moved'
-	win.on('move', function () {
-		const pos = this.getPosition();
-		conf.set({
-			x: pos[0],
-			y: pos[1]
-		});
-	});
-
-	// stop page to update it's title
-	win.on('page-title-updated', (e, title) => {
-		e.preventDefault();
-		updateDockBadge(title);
-	});
+	// Let us register listeners on the window, so we can update the state
+	// automatically (the listeners will be removed when the window is closed)
+	// and restore the maximized or full screen state
+	mainWindowState.manage(win);
 
 	return win;
 }
 
-// TODO - fix certificate errors
-app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
 
-app.on('window-all-closed', () => {
-	if (process.platform !== 'darwin') {
-		app.quit();
-	}
+// eslint-disable-next-line max-params
+app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
+	event.preventDefault();
+	callback(true);
 });
 
 app.on('activate', () => {
@@ -146,70 +145,98 @@ app.on('activate', () => {
 });
 
 app.on('ready', () => {
-	electron.Menu.setApplicationMenu(appMenu);
+	appMenu.setMenu({
+		tabs: []
+	});
 	mainWindow = createMainWindow();
-	tray.create(mainWindow);
 
 	const page = mainWindow.webContents;
 
-	// Add spellcheck dictionary
-	SpellChecker.getDictionary('en-US', spellDict, (err, result) => {
-		if (!err) {
-			myDictionary = result;
+	page.on('dom-ready', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
 		}
 	});
 
-	// Define function for consult the dictionary.
-	ipc.on('checkspell', (event, word) => {
-		if (myDictionary !== null && word !== null) {
-			event.returnValue = myDictionary.spellCheck(word);
-		}
+	page.once('did-frame-finish-load', () => {
+		// Initate auto-updates on MacOS and Windows
+		appUpdater();
+		crashHandler();
 	});
 
-	// TODO - use global shortcut instead
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
+	electron.powerMonitor.on('resume', () => {
 		mainWindow.reload();
+		page.send('destroytray');
 	});
 
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		if (page.canGoBack()) {
-			page.goBack();
+	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 {
+			mainWindow.show();
 		}
 	});
 
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		if (page.canGoForward()) {
-			page.goForward();
-		}
+	ipcMain.on('toggle-badge-option', () => {
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
 	});
 
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+=', () => {
-	// 	page.send('zoomIn');
-	// });
+	ipcMain.on('update-badge', (event, messageCount) => {
+		badgeCount = messageCount;
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+		page.send('tray', messageCount);
+	});
 
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+-', () => {
-	// 	page.send('zoomOut');
-	// });
+	ipcMain.on('update-taskbar-icon', (event, data, text) => {
+		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+	});
 
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+0', () => {
-	// 	page.send('zoomActualSize');
-	// });
+	ipcMain.on('forward-message', (event, listener, ...params) => {
+		page.send(listener, ...params);
+	});
 
-	page.on('new-window', (event, url) => {
-		if (mainWindow.useDefaultWindowBehaviour) {
-			mainWindow.useDefaultWindowBehaviour = false;
-			return;
-		}
-		if (linkIsInternal(checkWindowURL(), url)) {
-			event.preventDefault();
-			return mainWindow.loadURL(url);
-		}
-		event.preventDefault();
-		electron.shell.openExternal(url);
+	ipcMain.on('update-menu', (event, props) => {
+		appMenu.setMenu(props);
+	});
+
+	ipcMain.on('register-server-tab-shortcut', (event, index) => {
+		// Array index == Shown index - 1
+		page.send('switch-server-tab', index - 1);
+	});
+
+	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
+		setAutoLaunch(AutoLaunchValue);
 	});
 });
 
-ipc.on('new-domain', (e, domain) => {
-	mainWindow.loadURL(domain);
-	targetLink = domain;
+app.on('before-quit', () => {
+	isQuitting = true;
+});
+
+// Send crash reports
+process.on('uncaughtException', err => {
+	console.error(err);
+	console.error(err.stack);
 });

app/main/link-helper.js

@@ -1,12 +0,0 @@
-const wurl = require('wurl');
-
-// Check link if it's internal/external
-function linkIsInternal(currentUrl, newUrl) {
-	const currentDomain = wurl('domain', currentUrl);
-	const newDomain = wurl('domain', newUrl);
-	return currentDomain === newDomain;
-}
-
-exports = module.exports = {
-	linkIsInternal
-};

app/main/menu.js

@@ -1,335 +1,397 @@
 'use strict';
 const os = require('os');
-const electron = 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');
 
-const app = electron.app;
-const BrowserWindow = electron.BrowserWindow;
-const shell = electron.shell;
 const appName = app.getName();
 
-const {addDomain, about} = require('./windowmanager');
-
-function sendAction(action) {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action);
-}
-
-const viewSubmenu = [
-	{
-		label: 'Reload',
-		accelerator: 'CmdOrCtrl+R',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.reload();
-			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		role: 'togglefullscreen'
-	},
-	{
-		label: 'Zoom In',
-		accelerator: 'CommandOrControl+=',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomIn');
-			}
-		}
-	},
-	{
-		label: 'Zoom Out',
-		accelerator: 'CommandOrControl+-',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomOut');
-			}
-		}
-	},
-	{
-		label: 'Actual Size',
-		accelerator: 'CommandOrControl+0',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomActualSize');
-			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Toggle Developer Tools',
-		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.webContents.toggleDevTools();
-			}
-		}
-	}
-];
-
-const helpSubmenu = [
-	{
-		label: `${appName} Website`,
-		click() {
-			shell.openExternal('https://zulip.org');
-		}
-	},
-	{
-		label: `${appName + 'Desktop'} - ${app.getVersion()}`,
-		enabled: false
-	},
-	{
-		label: 'Report an Issue...',
-		click() {
-			const body = `
-<!-- Please succinctly describe your issue and steps to reproduce it. -->
--
-${app.getName()} ${app.getVersion()}
-Electron ${process.versions.electron}
-${process.platform} ${process.arch} ${os.release()}`;
-
-			shell.openExternal(`https://github.com/zulip/zulip-electron/issues/new?body=${encodeURIComponent(body)}`);
-		}
-	}
-];
-
-const darwinTpl = [
-
-	{
-		label: `${app.getName()}`,
-		submenu: [
-			{
-				label: 'Zulip desktop',
-				click() {
-					about();
+class AppMenu {
+	getHistorySubmenu() {
+		return [{
+			label: 'Back',
+			accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('back');
 				}
-			},
-			{
+			}
+		}, {
+			label: 'Forward',
+			accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('forward');
+				}
+			}
+		}];
+	}
+
+	getViewSubmenu() {
+		return [{
+			label: 'Reload',
+			accelerator: 'CommandOrControl+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('reload-current-viewer');
+				}
+			}
+		}, {
+			label: 'Hard Reload',
+			accelerator: 'CommandOrControl+Shift+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('hard-reload');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			role: 'togglefullscreen'
+		}, {
+			label: 'Zoom In',
+			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomIn');
+				}
+			}
+		}, {
+			label: 'Zoom Out',
+			accelerator: 'CommandOrControl+-',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomOut');
+				}
+			}
+		}, {
+			label: 'Actual Size',
+			accelerator: 'CommandOrControl+0',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomActualSize');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: 'Toggle Tray Icon',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.send('toggletray');
+				}
+			}
+		}, {
+			label: 'Toggle Sidebar',
+			accelerator: 'CommandOrControl+S',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					const newValue = !ConfigUtil.getConfigItem('showSidebar');
+					focusedWindow.webContents.send('toggle-sidebar', newValue);
+					ConfigUtil.setConfigItem('showSidebar', newValue);
+				}
+			}
+		}, {
+			label: 'Toggle DevTools for Zulip App',
+			accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.toggleDevTools();
+				}
+			}
+		}, {
+			label: 'Toggle DevTools for Active Tab',
+			accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('tab-devtools');
+				}
+			}
+		}];
+	}
+
+	getHelpSubmenu() {
+		return [{
+			label: `${appName} Website`,
+			click() {
+				shell.openExternal('https://zulipchat.com/help/');
+			}
+		}, {
+			label: `${appName + ' Desktop'} - ${app.getVersion()}`,
+			enabled: false
+		}, {
+			label: 'Report an Issue...',
+			click() {
+				const body = `
+					<!-- Please succinctly describe your issue and steps to reproduce it. -->
+					-
+					${app.getName()} ${app.getVersion()}
+					Electron ${process.versions.electron}
+					${process.platform} ${process.arch} ${os.release()}`;
+				shell.openExternal(`https://github.com/zulip/zulip-electron/issues/new?body=${encodeURIComponent(body)}`);
+			}
+		}];
+	}
+
+	getWindowSubmenu(tabs, activeTabIndex) {
+		const initialSubmenu = [{
+			role: 'minimize'
+		}, {
+			role: 'close'
+		}];
+
+		if (tabs.length > 0) {
+			const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
+			initialSubmenu.push({
 				type: 'separator'
-			},
-			{
-				label: 'Change Zulip Server',
+			});
+			for (let i = 0; i < tabs.length; i++) {
+				initialSubmenu.push({
+					label: tabs[i].webview.props.name,
+					accelerator: tabs[i].props.role === 'function' ? '' : `${ShortcutKey} + ${tabs[i].props.index + 1}`,
+					checked: tabs[i].props.index === activeTabIndex,
+					click(item, focusedWindow) {
+						if (focusedWindow) {
+							AppMenu.sendAction('switch-server-tab', tabs[i].props.index);
+						}
+					},
+					type: 'radio'
+				});
+			}
+		}
+
+		return initialSubmenu;
+	}
+
+	getDarwinTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: `${app.getName()}`,
+			submenu: [{
+				label: 'About Zulip',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-about');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Settings',
 				accelerator: 'Cmd+,',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						addDomain();
+						AppMenu.sendAction('open-settings');
 					}
 				}
-			},
-			{
-				label: 'Keyboard shortcuts',
+			}, {
+				label: 'Keyboard Shortcuts',
 				accelerator: 'Cmd+K',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('shortcut');
+						AppMenu.sendAction('shortcut');
 					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
+				label: 'Reset App Settings',
+				accelerator: 'Command+Shift+D',
+				click() {
+					AppMenu.resetAppSettings();
+				}
+			}, {
 				label: 'Log Out',
+				accelerator: 'Cmd+L',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('log-out');
+						AppMenu.sendAction('log-out');
 					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'services',
 				submenu: []
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'hide'
-			},
-			{
+			}, {
 				role: 'hideothers'
-			},
-			{
+			}, {
 				role: 'unhide'
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'quit'
-			}
-		]
-	},
-	{
-		label: 'Edit',
-		submenu: [
-			{
+			}]
+		}, {
+			label: 'Edit',
+			submenu: [{
 				role: 'undo'
-			},
-			{
+			}, {
 				role: 'redo'
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'cut'
-			},
-			{
+			}, {
 				role: 'copy'
-			},
-			{
+			}, {
 				role: 'paste'
-			},
-			{
+			}, {
 				role: 'pasteandmatchstyle'
-			},
-			{
+			}, {
 				role: 'delete'
-			},
-			{
+			}, {
 				role: 'selectall'
-			}
-		]
-	},
-	{
-		label: 'View',
-		submenu: viewSubmenu
-	},
-	{
-		role: 'window',
-		submenu: [
-			{
-				role: 'minimize'
-			},
-			{
-				role: 'close'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'front'
-			}
-		]
-	},
-	{
-		role: 'help',
-		submenu: helpSubmenu
+			}]
+		}, {
+			label: 'View',
+			submenu: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
 	}
-];
 
-const otherTpl = [
-	{
-		label: 'File',
-		submenu: [
-			{
-				label: 'Zulip desktop',
-				click() {
-					about();
+	getOtherTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: 'File',
+			submenu: [{
+				label: 'About Zulip',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-about');
+					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
-				label: 'Change Zulip Server',
+			}, {
+				label: 'Settings',
 				accelerator: 'Ctrl+,',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						addDomain();
+						AppMenu.sendAction('open-settings');
 					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
-				label: 'Keyboard shortcuts',
+			}, {
+				label: 'Keyboard Shortcuts',
 				accelerator: 'Ctrl+K',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('shortcut');
+						AppMenu.sendAction('shortcut');
 					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
+				label: 'Reset App Settings',
+				accelerator: 'Ctrl+Shift+D',
+				click() {
+					AppMenu.resetAppSettings();
+				}
+			}, {
 				label: 'Log Out',
+				accelerator: 'Ctrl+L',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('log-out');
+						AppMenu.sendAction('log-out');
 					}
 				}
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
-				role: 'quit'
-			}
-		]
-	},
-	{
-		label: 'Edit',
-		submenu: [
-			{
+			}, {
+				role: 'quit',
+				accelerator: 'Ctrl+Q'
+			}]
+		}, {
+			label: 'Edit',
+			submenu: [{
 				role: 'undo'
-			},
-			{
+			}, {
 				role: 'redo'
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'cut'
-			},
-			{
+			}, {
 				role: 'copy'
-			},
-			{
+			}, {
 				role: 'paste'
-			},
-			{
+			}, {
 				role: 'pasteandmatchstyle'
-			},
-			{
+			}, {
 				role: 'delete'
-			},
-			{
+			}, {
 				type: 'separator'
-			},
-			{
+			}, {
 				role: 'selectall'
-			}
-
-		]
-	},
-	{
-		label: 'View',
-		submenu: viewSubmenu
-	},
-	{
-		role: 'help',
-		submenu: helpSubmenu
+			}]
+		}, {
+			label: 'View',
+			submenu: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
 	}
-];
 
-const tpl = process.platform === 'darwin' ? darwinTpl : otherTpl;
+	static sendAction(action, ...params) {
+		const win = BrowserWindow.getAllWindows()[0];
 
-module.exports = electron.Menu.buildFromTemplate(tpl);
+		if (process.platform === 'darwin') {
+			win.restore();
+		}
+
+		win.webContents.send(action, ...params);
+	}
+
+	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');
+					});
+				}
+			});
+		});
+	}
+
+	setMenu(props) {
+		const tpl = process.platform === 'darwin' ? this.getDarwinTpl(props) : this.getOtherTpl(props);
+		const menu = Menu.buildFromTemplate(tpl);
+		Menu.setApplicationMenu(menu);
+	}
+}
+
+module.exports = new AppMenu();

app/main/preload.js

@@ -1,55 +0,0 @@
-'use strict';
-const ipcRenderer = require('electron').ipcRenderer;
-const webFrame = require('electron').webFrame;
-
-// Implement spellcheck using electron api
-
-webFrame.setSpellCheckProvider('en-US', false, {
-	spellCheck: text => {
-		const res = ipcRenderer.sendSync('checkspell', text);
-		return res === null ? true : res;
-	}
-});
-
-// Handle zooming functionality
-
-const zoomIn = () => {
-	webFrame.setZoomFactor(webFrame.getZoomFactor() + 0.1);
-};
-
-const zoomOut = () => {
-	webFrame.setZoomFactor(webFrame.getZoomFactor() - 0.1);
-};
-
-const zoomActualSize = () => {
-	webFrame.setZoomFactor(1);
-};
-
-// Get zooming actions from main process
-ipcRenderer.on('zoomIn', () => {
-	zoomIn();
-});
-
-ipcRenderer.on('zoomOut', () => {
-	zoomOut();
-});
-
-ipcRenderer.on('zoomActualSize', () => {
-	zoomActualSize();
-});
-
-ipcRenderer.on('log-out', () => {
-	// create the menu for the below
-	document.querySelector('.dropdown-toggle').click();
-
-	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-});
-
-ipcRenderer.on('shortcut', () => {
-	// create the menu for the below
-	document.querySelector('.dropdown-toggle').click();
-
-	const nodes = document.querySelectorAll('.dropdown-menu li:nth-child(4) a');
-	nodes[nodes.length - 1].click();
-});

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/main/tray.js

@@ -1,68 +0,0 @@
-'use strict';
-const path = require('path');
-const electron = require('electron');
-const app = require('electron').app;
-const {addDomain, about} = require('./windowmanager');
-
-let tray = null;
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = () => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-exports.create = () => {
-	// Noone is using this feature. so let's hide it for now.
-	// const toggleWin = () => {
-	// 	if (win.isVisible()) {
-	// 		win.hide();
-	// 	} else {
-	// 		win.show();
-	// 	}
-	// };
-	const contextMenu = electron.Menu.buildFromTemplate([
-		{
-			label: 'About',
-			click() {
-				about();
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Change Zulip server',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					addDomain();
-				}
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Reload',
-			click(item, focusedWindow) {
-				if (focusedWindow) {
-					focusedWindow.reload();
-				}
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Quit',
-			click() {
-				app.quit();
-			}
-		}
-	]);
-
-	tray = new electron.Tray(iconPath());
-	tray.setToolTip(`${app.getName()}`);
-	tray.setContextMenu(contextMenu);
-};
-

app/main/windowmanager.js

@@ -1,69 +0,0 @@
-'use strict';
-const path = require('path');
-const electron = require('electron');
-
-let domainWindow;
-let aboutWindow;
-
-function onClosed() {
-	// dereference the window
-	domainWindow = null;
-	aboutWindow = null;
-}
-
-// Change Zulip server Window
-function createdomainWindow() {
-	const domainwin = new electron.BrowserWindow({
-		frame: false,
-		height: 300,
-		resizable: false,
-		width: 400
-	});
-	const domainURL = 'file://' + path.join(__dirname, '../renderer', 'pref.html');
-	domainwin.loadURL(domainURL);
-	domainwin.on('closed', onClosed);
-
-	return domainwin;
-}
-
-// Call this window onClick addDomain in tray
-function addDomain() {
-	domainWindow = createdomainWindow();
-	domainWindow.show();
-}
-
-// About window
-function createAboutWindow() {
-	const aboutwin = new electron.BrowserWindow({
-		width: 500,
-		height: 500,
-		title: 'About Zulip Desktop',
-		show: false,
-		center: true,
-		fullscreen: false,
-		fullscreenable: false,
-		resizable: false
-	});
-	const aboutURL = 'file://' + path.join(__dirname, '../renderer', 'about.html');
-	aboutwin.loadURL(aboutURL);
-	aboutwin.on('closed', onClosed);
-
-	// stop page to update it's title
-	aboutwin.on('page-title-updated', e => {
-		e.preventDefault();
-	});
-
-	aboutwin.on('closed', onClosed);
-
-	return aboutwin;
-}
-
-// Call this onClick About in tray
-function about() {
-	aboutWindow = createAboutWindow();
-	aboutWindow.show();
-}
-
-exports = module.exports = {
-	addDomain, about
-};

app/package-lock.json

@@ -0,0 +1,935 @@
+{
+  "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"
+      }
+    },
+    "bindings": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.3.0.tgz",
+      "integrity": "sha512-DpLh5EzMR2kzvX1KIlVC0VkC3iZtHKTgdtZ0a3pglBZdaQFjt5S9g9xd1lE+YvXyfd6mtCeRnrUfOLYiTMlNSw==",
+      "optional": true
+    },
+    "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=="
+    },
+    "event-target-shim": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-1.1.1.tgz",
+      "integrity": "sha1-qG5e5r2qFgVEddp5fM3fDFVphJE=",
+      "optional": true
+    },
+    "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"
+      }
+    },
+    "node-mac-notifier": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/node-mac-notifier/-/node-mac-notifier-0.0.13.tgz",
+      "integrity": "sha1-1kt27RgfR5XURFui060Nb3KY9+I=",
+      "optional": true,
+      "requires": {
+        "bindings": "1.3.0",
+        "event-target-shim": "1.1.1",
+        "node-uuid": "1.4.8"
+      },
+      "dependencies": {
+        "node-uuid": {
+          "version": "1.4.8",
+          "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.8.tgz",
+          "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc=",
+          "optional": true
+        }
+      }
+    },
+    "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

@@ -0,0 +1,42 @@
+{
+  "name": "zulip",
+  "productName": "Zulip",
+  "version": "1.8.1",
+  "description": "Zulip Desktop App",
+  "license": "Apache-2.0",
+  "copyright": "Kandra Labs, Inc.",
+  "author": {
+    "name": "Kandra Labs, Inc.",
+    "email": "support@zulipchat.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zulip/zulip-electron.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zulip/zulip-electron/issues"
+  },
+  "main": "main/index.js",
+  "keywords": [
+    "Zulip",
+    "Group Chat app",
+    "electron-app",
+    "electron",
+    "Desktop app",
+    "InstantMessaging"
+  ],
+  "dependencies": {
+    "auto-launch": "5.0.1",
+    "electron-is-dev": "0.3.0",
+    "electron-log": "2.2.7",
+    "electron-spellchecker": "1.1.2",
+    "electron-updater": "2.18.2",
+    "electron-window-state": "4.1.1",
+    "node-json-db": "0.7.3",
+    "request": "2.81.0",
+    "wurl": "2.5.0"
+  },
+  "optionalDependencies": {
+    "node-mac-notifier": "0.0.13"
+  }
+}

app/renderer/about.html

@@ -6,22 +6,40 @@
 	</head>
 	<body>
 	<div class="about">
-		<center><img src="../resources/zulip.png"></center>
-		<center><p class="detail"> Version : 0.0.1 </p>
-		<center><p class="detail"> License : Apache </p>
-		<center><p class="detail"> Maintainer : Zulip </p>
-		<p class="left"><a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a></p>
+		<img class="logo" src="../resources/zulip.png" />
+		<p class="detail" id="version">v?.?.?</p>
+		<div class="maintenance-info">
+			<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>
 
-	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>
 	</body>
-</html>
+</html>

app/renderer/css/about.css

@@ -1,15 +1,24 @@
 body {
-	background: #6BB6C7;
+	background: #fafafa;
+	font-family: menu, "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: subpixel-antialiased;
+}
+
+.logo {
+	display: block;
+	margin: -40px auto;
+}
+
+#version {
+	color: #444343;
+	font-size: 1.3em;
+	padding-top: 40px;
 }
 
 .about {
-	margin-top: 50px;
-}
-
-.left {
-	position: absolute;
-	top:89%;
-	left:76%;
+	margin: 25vh auto;
+	height: 25vh;
+	text-align: center;
 }
 
 .about p {
@@ -18,10 +27,56 @@ body {
 }
 
 .about img {
-	width:160px;
+	width: 150px;
 }
 
 .detail {
-	text-align: left;
-	margin-left: 35%;
-}
+	text-align: center;
+}
+
+.detail.maintainer {
+	font-size: 1.2em;
+	font-weight: 500;
+}
+
+.detail.license {
+	font-size: 0.8em;
+}
+
+.maintenance-info {
+	cursor: pointer;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	color: #444;
+}
+
+.maintenance-info p {
+	margin: 0;
+	font-size: 1em;
+	width: 100%;
+}
+
+.maintenance-info .bug {
+	display: inline-block;
+	padding: 8px 15px;
+	margin-top: 30px;
+	text-decoration: none;
+	background-color: #52c2af;
+	color: #fff;
+	border-radius: 4px;
+
+	transition: background-color 0.2s ease;
+}
+
+.maintenance-info .bug:hover {
+	background-color: #32a692;
+}
+
+p.detail a {
+	color: #355f4c;
+}
+
+p.detail a:hover {
+	text-decoration: underline;
+}

app/renderer/css/main.css

@@ -1,375 +1,365 @@
-@charset "UTF-8";
-header,
-section {
-    display: block
-}
-html {
-    font-size: 100%;
-    overflow-y: scroll;
-    -webkit-text-size-adjust: 100%;
-}
-html,
-button,
-input {
-    font-family: "Helvetica Neue", Arial, sans-serif
-}
+/*******************
+ *  General rules  *
+ *******************/
+
 html,
 body {
     height: 100%;
-    margin: 0
-}
-img {
-    border: 0;
-    -ms-interpolation-mode: bicubic
-}
-img {
-    vertical-align: middle
-}
-form {
-    margin: 0
-}
-fieldset {
-    border: 0;
     margin: 0;
-    padding: 0
+    cursor: default;
+    user-select: none;
 }
-button,
-input {
-    font-size: 100%;
-    margin: 0;
-    vertical-align: baseline;
-    box-sizing: content-box;
-    -webkit-box-sizing: content-box
+
+#content {
+    display: flex;
+    height: 100%;
+    background: #eee url(../img/ic_loading.gif) no-repeat;
+    background-size: 60px 60px;
+    background-position: center;
 }
-button,
-input {
-    line-height: normal
+
+.toggle-sidebar {
+    background: #222c31;
+    width: 54px;
+    padding: 27px 0 20px 0;
+    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    -webkit-app-region: drag;
+    overflow: hidden;
+    transition: all 0.5s ease;
 }
-button {
-    cursor: pointer;
-    -webkit-appearance: button;
+
+.toggle-sidebar div {
+    transition: all 0.5s ease-out;
 }
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0
+
+.sidebar-hide {
+    width: 0;
+    transition: all 0.8s ease;
 }
-hr {
-    display: none
+
+.sidebar-hide div {
+    transform: translateX(-100%);
+    transition: all 0.6s ease-out;
 }
-img {
-    max-width: 100%
-}
-h1 {
-    color: #111;
-    line-height: 1em;
+
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
     font-weight: 400;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    text-rendering: optimizelegibility;
-    -webkit-text-stroke: none
-}
-h1 {
-    margin: 0 0 35px
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
-body.container-layout header #logo {
+
+/*******************
+  *   Left Sidebar  *
+  *******************/
+
+#tabs-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.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;
+}
+
+.action-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+}
+
+.action-button:hover {
+    cursor: pointer;
+}
+
+.action-button i {
+    color: #6c8592;
+    font-size: 28px;
+}
+
+.action-button:hover i {
+    color: #98a9b3;
+}
+
+.tab:first-child {
+    margin-top: 8px;
+}
+
+.tab {
     position: relative;
-    display: inline-block;
-    vertical-align: top
+    margin: 2px 0;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
 }
-body.container-layout header #logo {
-    width: 50px;
-    height: 50px;
-    background-position: -790px 0
-}
-button[type=submit] {
-    text-decoration: none;
-    display: inline-block;
+
+.tab .server-icons {
+    border-radius: 50%;
+    width: 30px;
+    padding: 3px;
+    height: 30px;
     vertical-align: top;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+}
+
+.tab .server-tab {
+    width: 100%;
+    height: 35px;
     position: relative;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-size-adjust: auto;
-    vertical-align: bottom;
-    background-color: #e6eaef;
-    border: 2px solid #e6eaef;
-    color: #96a0ac;
-    font-size: 20px;
-    line-height: 26px;
-    padding: 6px 17px
+    margin: 5px 0 2px 0;
+    z-index: 11;
+    line-height: 31px;
+    color: #eee;
+    text-align: center;
+    overflow: hidden;
+    opacity: 0.6;
+    padding: 2px 0;
 }
-.desktop button[type=submit] {
-    -webkit-transition: all .2s ease-in-out;
-    transition: all .2s ease-in-out
+
+.tab .server-tab:hover {
+    opacity: 0.8;
 }
-.desktop button[type=submit]:hover {
-    background-color: #eff2f5;
-    border: 2px solid #eff2f5;
-    color: #96a0ac
+
+.tab.functional-tab {
+    height: 46px;
+    padding: 0;
 }
-button[type=submit]:focus {
-    outline: 0
+
+.tab.functional-tab.active .server-tab {
+    padding: 2px 0;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.25);
 }
-button[type=submit].btn-primary {
-    background-color: #20b36c;
-    border: 2px solid #20b36c;
-    color: #fff
+
+.tab.functional-tab .server-tab i {
+    font-size: 28px;
+    line-height: 36px;
 }
-.desktop button[type=submit].btn-primary:hover {
-    background-color: #39ca83;
-    border: 2px solid #39ca83;
-    color: #fff
+
+.tab.active .server-tab {
+    opacity: 1;
+    background-color: #648478;
 }
-button[type=submit].btn-primary:focus {
-    outline: 0
-}
-button[type=submit].btn-large {
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-size: 20px;
-    line-height: 26px;
-    padding: 12px 30px
-}
-input[type=text] {
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-weight: 200;
-    display: inline-block;
-    vertical-align: top;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background-color: #fff;
-    border: 1px solid #cad0d7;
-    color: #000;
-    font-size: 18px;
-    line-height: 26px;
-    height: 42px;
-    padding: 10px 10px
-}
-.desktop input[type=text]:hover {
-    background-color: #fff;
-    border-color: #bbc3cc;
-    color: #111
-}
-input[type=text]:focus {
-    background-color: #fff;
-    border-color: #20b36c!important;
-    color: #000;
-    outline: 0
-}
-input[type=text]::-webkit-input-placeholder {
-    color: #8e959e
-}
-input[type=text]::-moz-placeholder {
-    color: #8e959e
-}
-input[type=text]:-ms-input-placeholder {
-    color: #8e959e
-}
-.form-large input[type=text] {
-    font-size: 18px;
-    line-height: 26px;
-    height: 54px;
-    padding: 12px 15px
-}
-.control-group {
-    margin-top: 40px
-}
-h1 {
-    white-space: normal;
-    word-break: break-all;
-    word-break: break-word;
-    -webkit-hyphens: auto;
-    -moz-hyphens: auto;
-    hyphens: auto
-}
-.section-main {
-    position: relative
-}
-body {
-    color: #111;
-    font-size: 18px;
-    line-height: 24px;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    background: #edf1f3;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box
-}
-.desktop body {
-    padding-top: 116px
-}
-body.container-layout {
-    padding: 0!important;
-    background-color: #E6EAEF
-}
-header {
-    z-index: 800;
-    border-bottom: 1px solid #dae0e7;
-    background: rgba(255, 255, 255, .97);
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%
-}
-header .container {
-    position: relative
-}
-.desktop header {
-    position: fixed
-}
- header .container {
-    position: relative;
-    height: 75px
-}
-.container-layout header {
-    position: relative;
-    border: 0;
-    background: 0 0;
-    padding: 30px 0
-}
-.container-layout header .container {
-    height: auto
-}
-header #logo {
+
+.tab .server-tab-badge.active {
+    border-radius: 9px;
+    min-width: 11px;
+    padding: 0 3px;
+    height: 17px;
+    background-color: #f44336;
+    font-size: 10px;
+    font-family: sans-serif;
+    position: absolute;
+    right: 5px;
+    z-index: 15;
+    top: 6px;
+    float: right;
+    color: #fff;
+    text-align: center;
+    line-height: 17px;
     display: block;
-    text-indent: -9999px
+    right: 0;
 }
 
- header #logo {
-    position: absolute!important;
-    top: 50%;
-    left: 10px;
-    -webkit-transform: translate(0, -50%);
-    transform: translate(0, -50%)
+.tab .server-tab-badge {
+    display: none;
 }
-body.container-layout header #logo {
-    position: relative!important;
-    top: 0;
-    left: 0;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-    margin: 0 auto;
-    display: block
+
+.tab .server-tab-badge.close-button {
+    width: 16px;
+    padding: 0;
 }
-.content {
-    padding-bottom: 40px;
-    overflow: hidden
+
+.tab .server-tab-badge.close-button i {
+    font-size: 13px;
+    line-height: 17px;
 }
-.container-layout .content {
-    max-width: 660px;
-    margin: 0 auto
+
+#add-tab {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
-.content .server {
-    position: relative;
-    margin: 0 10px
+
+.tab .server-tab-shortcut {
+    color: #648478;
+    font-size: 12px;
+    text-align: center;
+    font-family: sans-serif;
+    margin-bottom: 5px;
 }
-.content .server .container {
-    background: #fff;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 50px 0 0;
-    -webkit-border-radius: 4px;
+
+
+/*******************
+  *   Webview Area  *
+  *******************/
+
+#webviews-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+webview {
+    opacity: 1;
+    transition: opacity 0.3s ease-in;
+    flex-grow: 1;
+}
+
+webview.onload {
+    transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+}
+
+webview.disabled {
+    flex: 0 1;
+    height: 0;
+    width: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+}
+
+webview:focus {
+    outline: 0px solid transparent;
+}
+
+
+/* Tooltip styling */
+
+#reload-tooltip,
+#setting-tooltip {
+    font-family: sans-serif;
+    background: #222c31;
+    margin-left: 68px;
+    padding: 6px 8px;
+    position: absolute;
+    margin-top: 0px;
+    z-index: 1000;
+    color: white;
     border-radius: 4px;
+    text-align: center;
+    width: 55px;
+    font-size: 14px;
+}
+
+#reload-tooltip:after,
+#setting-tooltip:after {
+    content: " ";
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid #222c31;
+    position: absolute;
+    top: 7px;
+    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;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background: #222c31;
+    border-radius: 20px;
+    cursor: pointer;
+    box-shadow: #999 1px 1px;
+}
+
+#collapse-button i {
+    color: #efefef;
+}
+
+#main-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
     position: relative;
-    z-index: 10;
-    max-width: 580px
 }
-.content .server h1 {
+
+.hidden {
+    display: none !important;
+}
+
+
+/* Full screen Popup container  */
+
+.popup .popuptext {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
     text-align: center;
-    padding: 0 10%
+    border-radius: 6px;
+    padding: 9px 0;
+    position: absolute;
+    z-index: 1000;
+    font-family: arial;
+    width: 240px;
+    top: 15px;
+    height: 20px;
+    left: 43%;
 }
-.content .server h1 {
-    font-size: 2.4em;
-    line-height: 1.2em;
-    margin-bottom: 10px
+
+.popup .show {
+    visibility: visible;
+    animation: cssAnimation 0s ease-in 5s forwards;
+    animation-fill-mode: forwards;
 }
-.content .server fieldset {
-    padding: 25px 10% 80px 39px;
-    position: relative
-}
-.content .server fieldset .control-group .control-field input {
-    width: 100%
-}
-.content .server button {
-    width: 100%
-}
-@media screen and (min-width: 749px) {
-    input[type=text] {
-        width: 60%
+
+@keyframes cssAnimation {
+    from {
+        opacity: 0;
     }
-}
-@media screen and (min-width: 1071px) {
-    h1 {
-        font-size: 3.2em;
-        line-height: 1.3em
+    to {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 1;
     }
-}
-.container {
-    width: 1070px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-.container:before,
-.container:after {
-    content: "";
-    display: table
-}
-.container:after {
-    clear: both
-}
-.responsive .container {
-    max-width: 1070px;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-.responsive .container:before,
-.responsive .container:after {
-    content: "";
-    display: table
-}
-.responsive .container:after {
-    clear: both
-}
-@media screen and (max-width: 480px) {
-    .responsive h1 {
-        font-size: 1.7em;
-        line-height: 1.3em
-    }
-}
-@media screen and (min-width: 481px) and (max-width: 640px) {
-    .responsive h1 {
-        font-size: 1.9em;
-        line-height: 1.3em
-    }
-}
-@media screen and (min-width: 641px) and (max-width: 748px) {
-    .responsive h1 {
-        font-size: 2.2em;
-        line-height: 1.3em
-    }
-}
-@media screen and (max-width: 748px) {
-    .responsive input[type=text] {
-        width: 100%
-    }
-}
-@media screen and (min-width: 749px) and (max-width: 1070px) {
-    .responsive h1 {
-        font-size: 2.6em;
-        line-height: 1.3em
-    }
-}
-#server-status {
-    text-align: center;
-    color: #c71212;
-}
+}

app/renderer/css/network.css

@@ -0,0 +1,42 @@
+html, body {
+    margin: 0;
+    cursor: default;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+    user-select:none;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    font-family: "Trebuchet MS", Helvetica, sans-serif;
+    margin: 100px 200px;
+    text-align: center;
+}
+
+#title {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 20px 0;
+}
+
+#description {
+    font-size: 16px;
+}
+
+#reconnect {
+    font-size: 16px;
+    background: #009688;
+    color: #fff;
+    width: 84px;
+    height: 32px;
+    border-radius: 5px;
+    line-height: 32px;
+    margin: 20px auto 0;
+    cursor: pointer;
+}
+
+#reconnect:hover {
+    opacity: 0.8;
+}

app/renderer/css/pref.css

@@ -1,83 +0,0 @@
-body{
-	background-color: #6BB6C7;
-}
-
-.form {
-    position: absolute;
-    top: 35%;
-    width: 300px;
-    left: 9%;
-}
-
-.close {
-    background: transparent url('../img/close.png') no-repeat 4px 4px;
-    background-size: 24px 24px;
-    cursor: pointer;
-    display: inline-block;
-    height: 32px;
-    position: absolute;
-    right: 6px;
-    text-indent: -10000px;
-    top: 6px;
-    width: 32px;
-    z-index: 1;
-    -webkit-app-region: no-drag;
-}
-
-input[type="text"] {
-    display: block;
-    margin: 0;
-    width: 100%;
-    font-family: sans-serif;
-    font-size: 18px;
-    appearance: none;
-    box-shadow: none;
-    border-radius: none;
-    color: #646464;
-}
-input[type="text"]:focus {
-  outline: none;
-}
-
-.form input[type="text"] {
-  padding: 10px;
-  border: solid 1px #dcdcdc;
-  transition: box-shadow 0.3s, border 0.3s;
-}
-.form input[type="text"]:focus,
-.form input[type="text"].focus {
-  border: solid 1px #707070;
-  box-shadow: 0 0 5px 1px #969696;
-}
-button {
-    border: none;
-    color: #fff;
-    padding: 12px 32px;
-    text-align: center;
-    text-decoration: none;
-    margin-left: 107px;
-    margin-top: 24px;
-    display: inline-block;
-    font-size: 16px;
-    background: #137b86;
-}
-button:focus {
-    outline: 0;
-}
-#urladded {
-    font-size: 20px;
-    position: absolute;
-    font-family: 'opensans';
-    top: -61%;
-    left: 25%;
-    text-align: center;
-}
-
-#pic {
-width: 20px;
-left: 36%;
-margin-left: 4px;
-top: 63%;
-display: none;
-position: absolute;
-}

app/renderer/css/preference.css

@@ -0,0 +1,416 @@
+html,
+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-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;
+}
+
+#content {
+    display: flex;
+    height: 100%;
+    font-family: 'Montserrat';
+}
+
+#sidebar {
+    width: 80px;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+}
+
+#nav-container {
+    padding: 20px 0;
+}
+
+.nav {
+    padding: 5px 0;
+    color: #999;
+    cursor: pointer;
+}
+
+.nav.active {
+    color: #464e5a;
+    cursor: default;
+    position: relative;
+}
+
+.nav.active::before {
+    background: #464e5a;
+    width: 3px;
+    height: 16px;
+    position: absolute;
+    left: -8px;
+    content: '';
+}
+
+#settings-header {
+    font-size: 22px;
+    color: #222c31;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+#settings-container {
+    width: 100%;
+    display: flex;
+    padding: 30px;
+    overflow-y: scroll;
+}
+
+#new-server-container {
+    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;
+    padding: 4px 0 6px 0;
+}
+
+.sub-title {
+    padding: 4px 0 6px 0;
+    font-weight: bold;
+    color: #616161;
+}
+
+img.server-info-icon {
+    width: 36px;
+    height: 36px;
+    padding: 4px;
+}
+
+.server-info-left {
+    margin: 10px 20px 0 0;
+}
+
+.server-info-right {
+    flex-grow: 1;
+    margin-right: 10px;
+}
+
+.server-info-row {
+    display: flex;
+    margin: 8px 0 0 0;
+}
+
+.server-info-alias {
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.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: 22px;
+    border-radius: 3px;
+    padding: 7px;
+    border: #ededed 2px solid;
+    outline-width: 0;
+    background: transparent;
+    max-width: 500px;
+}
+
+.setting-input-value:focus {
+    border: #7cb980 2px solid;
+    border-radius: 3px;
+}
+
+.setting-block {
+    width: 100%;
+}
+
+.actions-container {
+    display: flex;
+    font-size: 14px;
+    color: #235d3a;
+    vertical-align: middle;
+    margin: 10px 0;
+    flex-wrap: wrap;
+}
+
+.action {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    margin-right: 10px;
+}
+
+.action i {
+    margin-right: 5px;
+    font-size: 18px;
+    line-height: 26px;
+}
+
+.settings-pane {
+    flex-grow: 1;
+}
+
+.action:hover {
+    cursor: pointer;
+}
+
+.action.disabled:hover {
+    cursor: default;
+}
+
+.action.disabled {
+    color: #999;
+}
+
+.settings-card {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 12px 30px;
+    margin: 10px 0 20px 0;
+    background: #fff;
+    width: 70%;
+    transition: all 0.2s;
+}
+
+.settings-card:hover {
+    border-left: 8px solid #bcbcbc;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
+                0 2px 0px 0px rgba(0,0,0,0.12);
+}
+
+.hidden {
+    display: none;
+    margin: 5px !important;
+}
+
+.red {
+    color: #ffffff;
+    background: #ef5350;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.blue {
+    color: #ffffff;
+    background: #4EBFAC;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.grey {
+    color: #9E9E9E;
+    background: #FAFAFA;
+    border: 1px solid #9E9E9E;
+}
+
+.setting-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 6px;
+}
+
+.code {
+    font-family: Courier New, Courier, monospace;
+}
+
+i.open-tab-button {
+    padding: 0 5px;
+    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/css/preload.css

@@ -0,0 +1,9 @@
+/* Override css rules */
+
+.portico-wrap>.header {
+    display: none;
+}
+
+.portico-container>.footer {
+    display: none;
+}

app/renderer/index.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="responsive desktop">
-  <!--<![endif]-->
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="width=device-width">
-    <title>Login - Zulip</title>
-    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
-    <script type="text/javascript">
-    const JsonDB = require('node-json-db');
-    const {app} = require('electron').remote;
-    const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-    const data = db.getData('/');
-
-    if (data.domain) {
-        window.location.href = data.domain;
-    }
-    </script>
-    <script>require('electron-connect').client.create()</script>
-  </head>
-  <body class="container-layout">
-    <div class="section-main">
-      <header>
-        <div class="container">
-          <img src="../resources/zulip.png" id="logo"/>
-        </div>
-      </header>
-      <hr>
-      <section class="content">
-        <section class="server">
-          <div class="container">
-            <h1>Login to Zulip Server</h1>
-            <form id="frm-signInForm" class="form-large" onsubmit="addDomain(); return false">
-              <fieldset>
-                <div class="control-group control-required">
-                  <div class="control-field">
-                    <input type="text" id="url"  autofocus="autofocus" spellcheck="false" placeholder="zulip.tabbott.net">
-                  </div>
-                </div>
-                <div class="control-group">
-                  <div class="control-submit">
-                    <button type="submit" id="main" class="btn-primary btn-large" value="Submit" onclick="addDomain();">Connect</button>
-                  </div>
-                </div>
-                <p id="server-status"><p>
-              </fieldset>
-            </form>
-          </div>
-        </section>
-      </section>
-    </div>
-    <script src="js/main.js"></script>
-  </body>
-</html>

app/renderer/js/components/base.js

@@ -0,0 +1,11 @@
+'use strict';
+
+class BaseComponent {
+	generateNodeFromTemplate(template) {
+		const wrapper = document.createElement('div');
+		wrapper.innerHTML = template;
+		return wrapper.firstElementChild;
+	}
+}
+
+module.exports = BaseComponent;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+const Tab = require(__dirname + '/../components/tab.js');
+
+class FunctionalTab extends Tab {
+	template() {
+		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
+					<div class="server-tab-badge close-button">
+						<i class="material-icons">close</i>
+					</div>
+					<div class="server-tab">
+						<i class="material-icons">${this.props.materialIcon}</i>
+					</div>
+				</div>`;
+	}
+
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
+
+		this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		super.registerListeners();
+
+		this.$el.addEventListener('mouseover', () => {
+			this.$closeButton.classList.add('active');
+		});
+
+		this.$el.addEventListener('mouseout', () => {
+			this.$closeButton.classList.remove('active');
+		});
+
+		this.$closeButton.addEventListener('click', e => {
+			this.props.onDestroy();
+			e.stopPropagation();
+		});
+	}
+}
+
+module.exports = FunctionalTab;

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

@@ -0,0 +1,59 @@
+'use strict';
+
+const Tab = require(__dirname + '/../components/tab.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+
+const {ipcRenderer} = require('electron');
+
+class ServerTab extends Tab {
+	template() {
+		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
+					<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}'/>
+					</div>
+					<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+				</div>`;
+	}
+
+	init() {
+		super.init();
+
+		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
+	}
+
+	updateBadge(count) {
+		if (count > 0) {
+			const formattedCount = count > 999 ? '1K+' : count;
+
+			this.$badge.innerHTML = formattedCount;
+			this.$badge.classList.add('active');
+		} else {
+			this.$badge.classList.remove('active');
+		}
+	}
+
+	generateShortcutText() {
+		// Only provide shortcuts for server [0..10]
+		if (this.props.index >= 10) {
+			return '';
+		}
+
+		const shownIndex = this.props.index + 1;
+
+		let shortcutText = '';
+
+		if (SystemUtil.getOS() === 'Mac') {
+			shortcutText = `⌘ ${shownIndex}`;
+		} else {
+			shortcutText = `Ctrl+${shownIndex}`;
+		}
+
+		ipcRenderer.send('register-server-tab-shortcut', shownIndex);
+
+		return shortcutText;
+	}
+}
+
+module.exports = ServerTab;

app/renderer/js/components/tab.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+
+class Tab extends BaseComponent {
+	constructor(props) {
+		super();
+
+		this.props = props;
+		this.webview = this.props.webview;
+
+		this.init();
+	}
+
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		this.$el.addEventListener('click', this.props.onClick);
+		this.$el.addEventListener('mouseover', this.props.onHover);
+		this.$el.addEventListener('mouseout', this.props.onHoverOut);
+	}
+
+	isLoading() {
+		return this.webview.isLoading;
+	}
+
+	activate() {
+		this.$el.classList.add('active');
+		this.webview.load();
+	}
+
+	deactivate() {
+		this.$el.classList.remove('active');
+		this.webview.hide();
+	}
+
+	destroy() {
+		this.$el.parentNode.removeChild(this.$el);
+		this.webview.$el.parentNode.removeChild(this.webview.$el);
+	}
+}
+
+module.exports = Tab;

app/renderer/js/components/webview.js

@@ -0,0 +1,202 @@
+'use strict';
+
+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, app } = require('electron').remote;
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+
+const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
+class WebView extends BaseComponent {
+	constructor(props) {
+		super();
+
+		this.props = props;
+
+		this.zoomFactor = 1.0;
+		this.loading = false;
+		this.badgeCount = 0;
+	}
+
+	template() {
+		return `<webview
+					class="disabled"
+					data-tab-id="${this.props.tabIndex}"
+					src="${this.props.url}"
+					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
+					disablewebsecurity
+					${this.props.preload ? 'preload="js/preload.js"' : ''}
+					partition="persist:webviewsession"
+					webpreferences="allowRunningInsecureContent, javascript=yes">
+				</webview>`;
+	}
+
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		this.$el.addEventListener('new-window', event => {
+			const { url } = event;
+			const domainPrefix = DomainUtil.getDomain(this.props.index).url;
+
+			if (LinkUtil.isInternal(domainPrefix, url) || url === (domainPrefix + '/')) {
+				event.preventDefault();
+				this.$el.loadURL(url);
+			} else {
+				event.preventDefault();
+				shell.openExternal(url);
+			}
+		});
+
+		if (shouldSilentWebview) {
+			this.$el.addEventListener('dom-ready', () => {
+				this.$el.setAudioMuted(true);
+			});
+		}
+
+		this.$el.addEventListener('page-title-updated', 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', () => {
+			if (this.props.role === 'server') {
+				this.$el.classList.add('onload');
+			}
+			this.show();
+		});
+
+		this.$el.addEventListener('did-fail-load', event => {
+			const { errorDescription } = event;
+			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
+			if (hasConnectivityErr) {
+				console.error('error', errorDescription);
+				this.props.onNetworkError();
+			}
+		});
+
+		this.$el.addEventListener('did-start-loading', () => {
+			let userAgent = SystemUtil.getUserAgent();
+			if (!userAgent) {
+				SystemUtil.setUserAgent(this.$el.getUserAgent());
+				userAgent = SystemUtil.getUserAgent();
+			}
+			this.$el.setUserAgent(userAgent);
+		});
+	}
+
+	getBadgeCount(title) {
+		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
+		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
+	}
+
+	show() {
+		// Do not show WebView if another tab was selected and this tab should be in background.
+		if (!this.props.isActive()) {
+			return;
+		}
+
+		this.$el.classList.remove('disabled');
+		setTimeout(() => {
+			if (this.props.role === 'server') {
+				this.$el.classList.remove('onload');
+			}
+		}, 1000);
+		this.focus();
+		this.loading = false;
+		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'));
+	}
+
+	focus() {
+		// focus Webview and it's contents when Window regain focus.
+		const webContents = this.$el.getWebContents();
+		if (webContents && !webContents.isFocused()) {
+			this.$el.focus();
+			webContents.focus();
+		}
+	}
+
+	hide() {
+		this.$el.classList.add('disabled');
+	}
+
+	load() {
+		if (this.$el) {
+			this.show();
+		} else {
+			this.init();
+		}
+	}
+
+	zoomIn() {
+		this.zoomFactor += 0.1;
+		this.$el.setZoomFactor(this.zoomFactor);
+	}
+
+	zoomOut() {
+		this.zoomFactor -= 0.1;
+		this.$el.setZoomFactor(this.zoomFactor);
+	}
+
+	zoomActualSize() {
+		this.zoomFactor = 1.0;
+		this.$el.setZoomFactor(this.zoomFactor);
+	}
+
+	logOut() {
+		this.$el.executeJavaScript('logout()');
+	}
+
+	showShortcut() {
+		this.$el.executeJavaScript('shortcut()');
+	}
+
+	openDevTools() {
+		this.$el.openDevTools();
+	}
+
+	back() {
+		if (this.$el.canGoBack()) {
+			this.$el.goBack();
+		}
+	}
+
+	forward() {
+		if (this.$el.canGoForward()) {
+			this.$el.goForward();
+		}
+	}
+
+	reload() {
+		this.hide();
+		this.$el.reload();
+	}
+
+	send(...param) {
+		this.$el.send(...param);
+	}
+}
+
+module.exports = WebView;

app/renderer/js/main.js

@@ -1,30 +1,489 @@
-/* global app */
-// eslint-disable-next-line no-unused-vars
-function addDomain() {
-	const request = require('request');
-	const ipcRenderer = require('electron').ipcRenderer;
-	const JsonDB = require('node-json-db');
+'use strict';
 
-	const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
+const { ipcRenderer, remote } = require('electron');
 
-	document.getElementById('main').innerHTML = 'checking...';
+const { session } = remote;
 
-	let newDomain = document.getElementById('url').value;
-	newDomain = newDomain.replace(/^https?:\/\//, '');
+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');
+const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
+const ConfigUtil = require(__dirname + '/js/utils/config-util.js');
 
-	const domain = 'https://' + newDomain;
-	const checkDomain = domain + '/static/audio/zulip.ogg';
+class ServerManagerView {
+	constructor() {
+		this.$addServerButton = document.getElementById('add-tab');
+		this.$tabsContainer = document.getElementById('tabs-container');
 
-	request(checkDomain, (error, response) => {
-		if (!error && response.statusCode !== 404) {
-			document.getElementById('main').innerHTML = 'Connect';
-			db.push('/domain', domain);
-			ipcRenderer.send('new-domain', domain);
-			// window.location.href = domain;
-		} else {
-			document.getElementById('main').innerHTML = 'Connect';
-			document.getElementById('server-status').innerHTML = 'Not a vaild Zulip Server.';
+		const $actionsContainer = document.getElementById('actions-container');
+		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
+		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');
+		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
+		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
+
+		this.activeTabIndex = -1;
+		this.tabs = [];
+		this.functionalTabs = {};
+		this.tabIndex = 0;
+	}
+
+	init() {
+		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('showSidebar', true);
+		this.toggleSidebar(showSidebar);
+	}
+
+	initTabs() {
+		const servers = DomainUtil.getDomains();
+		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);
+			}
+			// Open last active tab
+			this.activateTab(ConfigUtil.getConfigItem('lastActiveTab'));
+		} else {
+			this.openSettings('Servers');
+		}
+	}
+
+	initServer(server, index) {
+		const tabIndex = this.getTabIndex();
+		this.tabs.push(new ServerTab({
+			role: 'server',
+			icon: server.icon,
+			$root: this.$tabsContainer,
+			onClick: this.activateLastTab.bind(this, index),
+			index,
+			tabIndex,
+			onHover: this.onHover.bind(this, index, server.alias),
+			onHoverOut: this.onHoverOut.bind(this, index),
+			webview: new WebView({
+				$root: this.$webviewsContainer,
+				index,
+				tabIndex,
+				url: server.url,
+				name: server.alias,
+				isActive: () => {
+					return index === this.activeTabIndex;
+				},
+				onNetworkError: this.openNetworkTroubleshooting.bind(this),
+				onTitleChange: this.updateBadge.bind(this),
+				nodeIntegration: false,
+				preload: true
+			})
+		}));
+	}
+
+	initActions() {
+		this.$reloadButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.reload();
+		});
+		this.$addServerButton.addEventListener('click', () => {
+			this.openSettings('Servers');
+		});
+		this.$settingsButton.addEventListener('click', () => {
+			this.openSettings('General');
+		});
+
+		const $serverImgs = document.querySelectorAll('.server-icons');
+		$serverImgs.forEach($serverImg => {
+			$serverImg.addEventListener('error', () => {
+				$serverImg.src = 'img/icon.png';
+			});
+		});
+
+		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip);
+		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
+		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
+	}
+
+	getTabIndex() {
+		const currentIndex = this.tabIndex;
+		this.tabIndex++;
+		return currentIndex;
+	}
+
+	sidebarHoverEvent(SidebarButton, SidebarTooltip) {
+		SidebarButton.addEventListener('mouseover', () => {
+			SidebarTooltip.removeAttribute('style');
+		});
+		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]);
+			return;
+		}
+
+		this.functionalTabs[tabProps.name] = this.tabs.length;
+
+		const tabIndex = this.getTabIndex();
+		this.tabs.push(new FunctionalTab({
+			role: 'function',
+			materialIcon: tabProps.materialIcon,
+			$root: this.$tabsContainer,
+			index: this.functionalTabs[tabProps.name],
+			tabIndex,
+			onClick: this.activateTab.bind(this, this.functionalTabs[tabProps.name]),
+			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs[tabProps.name]),
+			webview: new WebView({
+				$root: this.$webviewsContainer,
+				index: this.functionalTabs[tabProps.name],
+				tabIndex,
+				url: tabProps.url,
+				name: tabProps.name,
+				isActive: () => {
+					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
+				},
+				onNetworkError: this.openNetworkTroubleshooting.bind(this),
+				onTitleChange: this.updateBadge.bind(this),
+				nodeIntegration: true,
+				preload: false
+			})
+		}));
+
+		this.activateTab(this.functionalTabs[tabProps.name]);
+	}
+
+	openSettings(nav = 'General') {
+		this.openFunctionalTab({
+			name: 'Settings',
+			materialIcon: 'settings',
+			url: `file://${__dirname}/preference.html#${nav}`
+		});
+		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
+	}
+
+	openAbout() {
+		this.openFunctionalTab({
+			name: 'About',
+			materialIcon: 'sentiment_very_satisfied',
+			url: `file://${__dirname}/about.html`
+		});
+	}
+
+	openNetworkTroubleshooting() {
+		this.openFunctionalTab({
+			name: 'Network Troubleshooting',
+			materialIcon: 'network_check',
+			url: `file://${__dirname}/network.html`
+		});
+	}
+
+	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]) {
+			return;
+		}
+
+		if (this.activeTabIndex !== -1) {
+			if (this.activeTabIndex === index) {
+				return;
+			} else if (hideOldTab) {
+				this.tabs[this.activeTabIndex].deactivate();
+			}
+		}
+
+		this.activeTabIndex = index;
+		this.tabs[index].activate();
+
+		ipcRenderer.send('update-menu', {
+			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) {
+		if (this.tabs[index].webview.loading) {
+			return;
+		}
+
+		this.tabs[index].destroy();
+
+		delete this.tabs[index];
+		delete this.functionalTabs[name];
+
+		// Issue #188: If the functional tab was not focused, do not activate another tab.
+		if (this.activeTabIndex === index) {
+			this.activateTab(0, false);
+		}
+	}
+
+	destroyView() {
+		// Clear global variables
+		this.activeTabIndex = -1;
+		this.tabs = [];
+		this.functionalTabs = {};
+
+		// Clear DOM elements
+		this.$tabsContainer.innerHTML = '';
+		this.$webviewsContainer.innerHTML = '';
+	}
+
+	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++) {
+			if (this.tabs[i] && this.tabs[i].updateBadge) {
+				const count = this.tabs[i].webview.badgeCount;
+				messageCountAll += count;
+				this.tabs[i].updateBadge(count);
+			}
+		}
+
+		ipcRenderer.send('update-badge', messageCountAll);
+	}
+
+	toggleSidebar(show) {
+		if (show) {
+			this.$sidebar.classList.remove('sidebar-hide');
+		} else {
+			this.$sidebar.classList.add('sidebar-hide');
+		}
+	}
+
+	registerIpcs() {
+		const webviewListeners = {
+			'webview-reload': 'reload',
+			back: 'back',
+			focus: 'focus',
+			forward: 'forward',
+			zoomIn: 'zoomIn',
+			zoomOut: 'zoomOut',
+			zoomActualSize: 'zoomActualSize',
+			'log-out': 'logOut',
+			shortcut: 'showShortcut',
+			'tab-devtools': 'openDevTools'
+		};
+
+		for (const key in webviewListeners) {
+			ipcRenderer.on(key, () => {
+				const activeWebview = this.tabs[this.activeTabIndex].webview;
+				if (activeWebview) {
+					activeWebview[webviewListeners[key]]();
+				}
+			});
+		}
+
+		ipcRenderer.on('open-settings', (event, settingNav) => {
+			this.openSettings(settingNav);
+		});
+
+		ipcRenderer.on('open-about', this.openAbout.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);
+		});
+
+		ipcRenderer.on('enter-fullscreen', () => {
+			this.$fullscreenPopup.classList.add('show');
+			this.$fullscreenPopup.classList.remove('hidden');
+		});
+
+		ipcRenderer.on('leave-fullscreen', () => {
+			this.$fullscreenPopup.classList.remove('show');
+		});
+
+		ipcRenderer.on('focus-webview-with-id', (event, webviewId) => {
+			const webviews = document.querySelectorAll('webview');
+			webviews.forEach(webview => {
+				const currentId = webview.getWebContents().id;
+				const tabId = webview.getAttribute('data-tab-id');
+				const concurrentTab = document.querySelector(`div[data-tab-id="${tabId}"]`);
+				if (currentId === webviewId) {
+					concurrentTab.click();
+				}
+			});
+		});
+
+		ipcRenderer.on('render-taskbar-icon', (event, messageCount) => {
+			// Create a canvas from unread messagecounts
+			function createOverlayIcon(messageCount) {
+				const canvas = document.createElement('canvas');
+				canvas.height = 128;
+				canvas.width = 128;
+				canvas.style.letterSpacing = '-5px';
+				const ctx = canvas.getContext('2d');
+				ctx.fillStyle = '#f42020';
+				ctx.beginPath();
+				ctx.ellipse(64, 64, 64, 64, 0, 0, 2 * Math.PI);
+				ctx.fill();
+				ctx.textAlign = 'center';
+				ctx.fillStyle = 'white';
+				if (messageCount > 99) {
+					ctx.font = '65px Helvetica';
+					ctx.fillText('99+', 64, 85);
+				} else if (messageCount < 10) {
+					ctx.font = '90px Helvetica';
+					ctx.fillText(String(Math.min(99, messageCount)), 64, 96);
+				} else {
+					ctx.font = '85px Helvetica';
+					ctx.fillText(String(Math.min(99, messageCount)), 64, 90);
+				}
+				return canvas;
+			}
+			ipcRenderer.send('update-taskbar-icon', createOverlayIcon(messageCount).toDataURL(), String(messageCount));
+		});
+	}
 }
 
+window.onload = () => {
+	const serverManagerView = new ServerManagerView();
+	serverManagerView.init();
+
+	window.addEventListener('online', () => {
+		serverManagerView.reloadView();
+	});
+};

app/renderer/js/notification/darwin-notifications.js

@@ -0,0 +1,100 @@
+'use strict';
+
+const { ipcRenderer } = require('electron');
+const url = require('url');
+const MacNotifier = require('node-mac-notifier');
+const ConfigUtil = require('../utils/config-util');
+const {
+	appId, customReply, focusCurrentServer, parseReply, setupReply
+} = require('./helpers');
+
+let replyHandler;
+let clickHandler;
+class DarwinNotification {
+	constructor(title, opts) {
+		const silent = ConfigUtil.getConfigItem('silent') || false;
+		const { host, protocol } = location;
+		const { icon } = opts;
+		const profilePic = url.resolve(`${protocol}//${host}`, icon);
+
+		this.tag = opts.tag;
+		const notification = new MacNotifier(title, Object.assign(opts, {
+			bundleId: appId,
+			canReply: true,
+			silent,
+			icon: profilePic
+		}));
+
+		notification.addEventListener('click', () => {
+			// focus to the server who sent the
+			// notification if not focused already
+			if (clickHandler) {
+				clickHandler();
+			}
+
+			focusCurrentServer();
+			ipcRenderer.send('focus-app');
+		});
+
+		notification.addEventListener('reply', this.notificationHandler);
+	}
+
+	static requestPermission() {
+		return; // eslint-disable-line no-useless-return
+	}
+
+	// Override default Notification permission
+	static get permission() {
+		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
+	}
+
+	set onreply(handler) {
+		replyHandler = handler;
+	}
+
+	get onreply() {
+		return replyHandler;
+	}
+
+	set onclick(handler) {
+		clickHandler = handler;
+	}
+
+	get onclick() {
+		return clickHandler;
+	}
+
+	// not something that is common or
+	// used by zulip server but added to be
+	// future proff.
+	addEventListener(event, handler) {
+		if (event === 'click') {
+			clickHandler = handler;
+		}
+
+		if (event === 'reply') {
+			replyHandler = handler;
+		}
+	}
+
+	notificationHandler({ response }) {
+		response = parseReply(response);
+		focusCurrentServer();
+		setupReply(this.tag);
+
+		if (replyHandler) {
+			replyHandler(response);
+			return;
+		}
+
+		customReply(response);
+	}
+
+	// method specific to notification api
+	// used by zulip
+	close() {
+		return; // eslint-disable-line no-useless-return
+	}
+}
+
+module.exports = DarwinNotification;

app/renderer/js/notification/default-notification.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const { ipcRenderer } = require('electron');
+const ConfigUtil = require('../utils/config-util');
+const { focusCurrentServer } = require('./helpers');
+
+const NativeNotification = window.Notification;
+class BaseNotification extends NativeNotification {
+	constructor(title, opts) {
+		opts.silent = true;
+		super(title, opts);
+
+		this.addEventListener('click', () => {
+			// focus to the server who sent the
+			// notification if not focused already
+			focusCurrentServer();
+			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';
+	}
+}
+
+module.exports = BaseNotification;

app/renderer/js/notification/helpers.js

@@ -0,0 +1,102 @@
+const { remote } = require('electron');
+
+// Do not change this
+const appId = 'org.zulip.zulip-electron';
+
+function checkElements(...elements) {
+	let status = true;
+	elements.forEach(element => {
+		if (element === null || element === undefined) {
+			status = false;
+		}
+	});
+	return status;
+}
+
+function customReply(reply) {
+	// server does not support notification reply yet.
+	const buttonSelector = '.messagebox #send_controls button[type=submit]';
+	const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
+	const textarea = document.querySelector('#compose-textarea');
+	const messagebox = document.querySelector(messageboxSelector);
+	const sendButton = document.querySelector(buttonSelector);
+
+	// sanity check for old server versions
+	const elementsExists = checkElements(textarea, messagebox, sendButton);
+	if (!elementsExists) {
+		return;
+	}
+
+	textarea.value = reply;
+	messagebox.click();
+	sendButton.click();
+}
+
+const currentWindow = remote.getCurrentWindow();
+const webContents = remote.getCurrentWebContents();
+const webContentsId = webContents.id;
+
+// this function will focus the server that sent
+// the notification. Main function implemented in main.js
+function focusCurrentServer() {
+	currentWindow.send('focus-webview-with-id', webContentsId);
+}
+
+// this function parses the reply from to notification
+// making it easier to reply from notification eg
+// @username in reply will be converted to @**username**
+// #stream in reply will be converted to #**stream**
+// bot mentions are not yet supported
+function parseReply(reply) {
+	const usersDiv = document.querySelectorAll('#user_presences li');
+	const streamHolder = document.querySelectorAll('#stream_filters li');
+	const users = [];
+	const streams = [];
+
+	usersDiv.forEach(userRow => {
+		const anchor = userRow.querySelector('span a');
+		if (anchor !== null) {
+			const user = `@${anchor.textContent.trim()}`;
+			const mention = `@**${user.replace(/^@/, '')}**`;
+			users.push([user, mention]);
+		}
+	});
+
+	streamHolder.forEach(stream => {
+		const streamAnchor = stream.querySelector('div a');
+		if (streamAnchor !== null) {
+			const streamName = `#${streamAnchor.textContent.trim()}`;
+			const streamMention = `#**${streamName.replace(/^#/, '')}**`;
+			streams.push([streamName, streamMention]);
+		}
+	});
+
+	users.forEach(([user, mention]) => {
+		if (reply.includes(user)) {
+			const regex = new RegExp(user, 'g');
+			reply = reply.replace(regex, mention);
+		}
+	});
+
+	streams.forEach(([stream, streamMention]) => {
+		const regex = new RegExp(stream, 'g');
+		reply = reply.replace(regex, streamMention);
+	});
+
+	reply = reply.replace(/\\n/, '\n');
+	return reply;
+}
+
+function setupReply(id) {
+	const { narrow } = window;
+	narrow.by_subject(id, { trigger: 'notification' });
+}
+
+module.exports = {
+	appId,
+	checkElements,
+	customReply,
+	parseReply,
+	setupReply,
+	focusCurrentServer
+};

app/renderer/js/notification/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const {
+  remote: { app }
+} = require('electron');
+
+const DefaultNotification = require('./default-notification');
+const { appId } = require('./helpers');
+
+// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
+// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
+app.setAppUserModelId(appId);
+
+window.Notification = DefaultNotification;
+if (process.platform === 'darwin') {
+	const DarwinNotification = require('./darwin-notifications');
+	window.Notification = DarwinNotification;
+}

app/renderer/js/pages/network.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const {ipcRenderer} = require('electron');
+
+class NetworkTroubleshootingView {
+	constructor() {
+		this.$reconnectButton = document.getElementById('reconnect');
+	}
+
+	init() {
+		this.$reconnectButton.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'reload-viewer');
+		});
+	}
+}
+
+window.onload = () => {
+	const networkTroubleshootingView = new NetworkTroubleshootingView();
+	networkTroubleshootingView.init();
+};

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

@@ -0,0 +1,256 @@
+'use strict';
+const path = require('path');
+const { ipcRenderer, remote } = require('electron');
+const fs = require('fs-extra');
+
+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 BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+            <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 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 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">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>
+		`;
+	}
+
+	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();
+		}
+	}
+
+	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();
+			}
+		});
+	}
+
+	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();
+			}
+		});
+	}
+
+	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();
+			}
+		});
+	}
+
+	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();
+			}
+		});
+	}
+
+	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

@@ -0,0 +1,67 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+
+class PreferenceNav extends BaseComponent {
+	constructor(props) {
+		super();
+
+		this.props = props;
+
+		this.navItems = ['General', 'Network', 'Servers', 'Shortcuts'];
+
+		this.init();
+	}
+
+	template() {
+		let navItemsTemplate = '';
+		for (const navItem of this.navItems) {
+			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${navItem}</div>`;
+		}
+
+		return `
+			<div>
+				<div id="settings-header">Settings</div>
+				<div id="nav-container">${navItemsTemplate}</div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
+		for (const navItem of this.navItems) {
+			const $item = document.getElementById(`nav-${navItem}`);
+			$item.addEventListener('click', () => {
+				this.props.onItemSelected(navItem);
+			});
+		}
+	}
+
+	select(navItemToSelect) {
+		for (const navItem of this.navItems) {
+			if (navItem === navItemToSelect) {
+				this.activate(navItem);
+			} else {
+				this.deactivate(navItem);
+			}
+		}
+	}
+
+	activate(navItem) {
+		const $item = document.getElementById(`nav-${navItem}`);
+		$item.classList.add('active');
+	}
+
+	deactivate(navItem) {
+		const $item = document.getElementById(`nav-${navItem}`);
+		$item.classList.remove('active');
+	}
+}
+
+module.exports = PreferenceNav;

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

@@ -0,0 +1,71 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+
+class NewServerForm extends BaseComponent {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-card">
+				<div class="server-info-right">
+					<div class="title">URL of Zulip organization</div>
+					<div class="server-info-row">
+						<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or chat.your-organization.com"/>
+					</div>
+					<div class="server-info-row">
+						<div class="action blue server-save-action">
+							<i class="material-icons">add_box</i>
+							<span>Add</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.initForm();
+		this.initActions();
+	}
+
+	initForm() {
+		this.$newServerForm = this.generateNodeFromTemplate(this.template());
+		this.$saveServerButton = this.$newServerForm.getElementsByClassName('server-save-action')[0];
+		this.props.$root.innerHTML = '';
+		this.props.$root.appendChild(this.$newServerForm);
+
+		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
+	}
+
+	submitFormHandler() {
+		this.$saveServerButton.children[1].innerHTML = 'Adding...';
+		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
+			DomainUtil.addDomain(serverConf).then(() => {
+				this.props.onChange(this.props.index);
+			});
+		}, errorMessage => {
+			this.$saveServerButton.children[1].innerHTML = 'Add';
+			alert(errorMessage);
+		});
+	}
+
+	initActions() {
+		this.$saveServerButton.addEventListener('click', () => {
+			this.submitFormHandler();
+		});
+		this.$newServerUrl.addEventListener('keypress', event => {
+			const EnterkeyCode = event.keyCode;
+			// Submit form when Enter key is pressed
+			if (EnterkeyCode === 13) {
+				this.submitFormHandler();
+			}
+		});
+	}
+}
+
+module.exports = NewServerForm;

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

@@ -0,0 +1,99 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/js/components/base.js');
+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() {
+		super();
+
+		this.$sidebarContainer = document.getElementById('sidebar');
+		this.$settingsContainer = document.getElementById('settings-container');
+	}
+
+	init() {
+		this.nav = new Nav({
+			$root: this.$sidebarContainer,
+			onItemSelected: this.handleNavigation.bind(this)
+		});
+
+		this.setDefaultView();
+		this.registerIpcs();
+	}
+
+	setDefaultView() {
+		let nav = 'General';
+		const hasTag = window.location.hash;
+		if (hasTag) {
+			nav = hasTag.substring(1);
+		}
+		this.handleNavigation(nav);
+	}
+
+	handleNavigation(navItem) {
+		this.nav.select(navItem);
+		switch (navItem) {
+			case 'Servers': {
+				this.section = new ServersSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
+			case 'General': {
+				this.section = new GeneralSection({
+					$root: this.$settingsContainer
+				});
+				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();
+		window.location.hash = `#${navItem}`;
+	}
+
+	// Handle toggling and reflect changes in preference page
+	handleToggle(elementName, state) {
+		const inputSelector = `#${elementName} .action .switch input`;
+		const input = document.querySelector(inputSelector);
+		if (input) {
+			input.checked = state;
+		}
+	}
+
+	registerIpcs() {
+		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
+			this.handleNavigation(navItem);
+		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			this.handleToggle('sidebar-option', state);
+		});
+
+		ipcRenderer.on('toggletray', (event, state) => {
+			this.handleToggle('tray-option', state);
+		});
+	}
+}
+
+window.onload = () => {
+	const preferenceView = new PreferenceView();
+	preferenceView.init();
+};

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

@@ -0,0 +1,77 @@
+'use strict';
+const {dialog} = require('electron').remote;
+const {ipcRenderer} = require('electron');
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+
+class ServerInfoForm extends BaseComponent {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-card">
+				<div class="server-info-left">
+					<img class="server-info-icon" src="${this.props.server.icon}"/>
+				</div>
+				<div class="server-info-right">
+					<div class="server-info-row">
+						<span class="server-info-alias">${this.props.server.alias}</span>
+						<i class="material-icons open-tab-button">open_in_new</i>
+					</div>
+					<div class="server-info-row">
+						<input class="setting-input-value" disabled value="${this.props.server.url}"/>
+					</div>
+					<div class="server-info-row">
+						<div class="action red server-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>Delete</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.initForm();
+		this.initActions();
+	}
+
+	initForm() {
+		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
+		this.$serverInfoAlias = this.$serverInfoForm.getElementsByClassName('server-info-alias')[0];
+		this.$deleteServerButton = this.$serverInfoForm.getElementsByClassName('server-delete-action')[0];
+		this.$openServerButton = this.$serverInfoForm.getElementsByClassName('open-tab-button')[0];
+		this.props.$root.appendChild(this.$serverInfoForm);
+	}
+
+	initActions() {
+		this.$deleteServerButton.addEventListener('click', () => {
+			dialog.showMessageBox({
+				type: 'warning',
+				buttons: ['YES', 'NO'],
+				defaultId: 0,
+				message: 'Are you sure you want to delete this server?'
+			}, response => {
+				if (response === 0) {
+					DomainUtil.removeDomain(this.props.index);
+					this.props.onChange(this.props.index);
+				}
+			});
+		});
+
+		this.$openServerButton.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
+
+		this.$serverInfoAlias.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
+	}
+}
+
+module.exports = ServerInfoForm;

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

@@ -0,0 +1,73 @@
+'use strict';
+
+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 BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-pane" id="server-settings-pane">
+				<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();
+	}
+
+	initServers() {
+		this.props.$root.innerHTML = '';
+
+		const servers = DomainUtil.getDomains();
+		this.props.$root.innerHTML = this.template();
+		this.$serverInfoContainer = document.getElementById('server-info-container');
+		this.$existingServers = document.getElementById('existing-servers');
+		this.$newServerContainer = document.getElementById('new-server-container');
+		this.$newServerButton = document.getElementById('new-server-action');
+
+		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
+		// Show Existing servers if servers are there otherwise hide it
+		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.reloadApp
+			}).init();
+		}
+	}
+
+	initCreateNewOrganization() {
+		new CreateOrganziation({
+			$root: this.$createOrganizationContainer
+		}).init();
+	}
+
+	initNewServerForm() {
+		new NewServerForm({
+			$root: this.$newServerContainer,
+			onChange: this.reloadApp
+		}).init();
+	}
+}
+
+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/pref.js

@@ -1,45 +0,0 @@
-'use strict';
-const {remote} = require('electron');
-
-const prefWindow = remote.getCurrentWindow();
-
-document.getElementById('close-button').addEventListener('click', () => {
-	prefWindow.close();
-});
-
-document.addEventListener('keydown', event => {
-	if (event.key === 'Escape' || event.keyCode === 27) {
-		prefWindow.close();
-	}
-});
-// eslint-disable-next-line no-unused-vars
-function addDomain() {
-	const request = require('request');
-	const ipcRenderer = require('electron').ipcRenderer;
-	const JsonDB = require('node-json-db');
-	const {app} = require('electron').remote;
-
-	const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-	document.getElementById('main').innerHTML = 'checking...';
-	document.getElementById('pic').style.display = 'block';
-
-	let newDomain = document.getElementById('url').value;
-	newDomain = newDomain.replace(/^https?:\/\//, '');
-
-	const domain = 'https://' + newDomain;
-	const checkDomain = domain + '/static/audio/zulip.ogg';
-
-	request(checkDomain, (error, response) => {
-		if (!error && response.statusCode !== 404) {
-			document.getElementById('pic').style.display = 'none';
-			document.getElementById('main').innerHTML = 'Switch';
-			document.getElementById('urladded').innerHTML = 'Switched to ' + newDomain;
-			db.push('/domain', domain);
-			ipcRenderer.send('new-domain', domain);
-		} else {
-			document.getElementById('pic').style.display = 'none';
-			document.getElementById('main').innerHTML = 'Switch';
-			document.getElementById('urladded').innerHTML = 'Not a vaild Zulip server.';
-		}
-	});
-}

app/renderer/js/preload.js

@@ -0,0 +1,62 @@
+'use strict';
+
+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');
+
+const logout = () => {
+	// Create the menu for the below
+	document.querySelector('.dropdown-toggle').click();
+
+	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
+	nodes[nodes.length - 1].click();
+};
+
+const shortcut = () => {
+	// Create the menu for the below
+	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
+	// Additional check
+	if (node.text.trim().toLowerCase() === 'keyboard shortcuts') {
+		node.click();
+	} else {
+		// Atleast click the dropdown
+		document.querySelector('.dropdown-toggle').click();
+	}
+};
+
+process.once('loaded', () => {
+	global.logout = logout;
+	global.shortcut = shortcut;
+});
+
+// To prevent failing this script on linux we need to load it after the document loaded
+document.addEventListener('DOMContentLoaded', () => {
+	// 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
+	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

@@ -0,0 +1,56 @@
+'use strict';
+
+const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+
+class SetupSpellChecker {
+	init() {
+		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
+			this.enableSpellChecker();
+		}
+		this.enableContextMenu();
+	}
+
+	enableSpellChecker() {
+		try {
+			this.SpellCheckHandler = new SpellCheckHandler();
+		} catch (err) {
+			console.log(err);
+		}
+	}
+
+	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 = new SetupSpellChecker();

app/renderer/js/tray.js

@@ -0,0 +1,229 @@
+'use strict';
+const path = require('path');
+
+const electron = require('electron');
+
+const {ipcRenderer, remote} = electron;
+
+const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+
+const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+
+const iconPath = () => {
+	if (process.platform === 'linux') {
+		return APP_ICON + 'linux.png';
+	}
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
+};
+
+let unread = 0;
+
+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 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;
+
+		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));
+			}
+
+			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));
+		});
+};
+
+function sendAction(action) {
+	const win = BrowserWindow.getAllWindows()[0];
+
+	if (process.platform === 'darwin') {
+		win.restore();
+	}
+
+	win.webContents.send(action);
+}
+
+const createTray = function () {
+	window.tray = new Tray(iconPath());
+	const contextMenu = Menu.buildFromTemplate([{
+		label: 'About',
+		click() {
+			// We need to focus the main window first
+			ipcRenderer.send('focus-app');
+			sendAction('open-about');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Focus',
+		click() {
+			ipcRenderer.send('focus-app');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Settings',
+		click() {
+			ipcRenderer.send('focus-app');
+			sendAction('open-settings');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Quit',
+		click() {
+			ipcRenderer.send('quit-app');
+		}
+	}
+	]);
+	window.tray.setContextMenu(contextMenu);
+	window.tray.on('click', () => {
+		// Click event only works on Windows
+		if (process.platform === 'win32') {
+			ipcRenderer.send('toggle-app');
+		}
+	});
+};
+
+ipcRenderer.on('destroytray', event => {
+	if (!window.tray) {
+		return;
+	}
+
+	window.tray.destroy();
+	if (window.tray.isDestroyed()) {
+		window.tray = null;
+	} else {
+		throw new Error('Tray icon not properly destroyed.');
+	}
+
+	return event;
+});
+
+ipcRenderer.on('tray', (event, arg) => {
+	if (!window.tray) {
+		return;
+	}
+	// We don't want to create tray from unread messages on macOS since it already has dock badges.
+	if (process.platform === 'linux' || process.platform === 'win32') {
+		if (arg === 0) {
+			unread = arg;
+			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');
+			});
+		}
+	}
+});
+
+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' || process.platform === 'win32') {
+			renderNativeImage(unread).then(image => {
+				window.tray.setImage(image);
+				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);
+
+if (ConfigUtil.getConfigItem('trayIcon', true)) {
+	createTray();
+}

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

@@ -0,0 +1,82 @@
+'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') {
+	const remote = require('electron').remote;
+	dialog = remote.dialog;
+	app = remote.app;
+} else {
+	const electron = require('electron');
+	dialog = electron.dialog;
+	app = electron.app;
+}
+
+class ConfigUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		return instance;
+	}
+
+	getConfigItem(key, defaultValue = null) {
+		this.reloadDB();
+		const value = this.db.getData('/')[key];
+		if (value === undefined) {
+			this.setConfigItem(key, defaultValue);
+			return defaultValue;
+		} else {
+			return value;
+		}
+	}
+
+	setConfigItem(key, value) {
+		this.db.push(`/${key}`, value, true);
+		this.reloadDB();
+	}
+
+	removeConfigItem(key) {
+		this.db.delete(`/${key}`);
+		this.reloadDB();
+	}
+
+	reloadDB() {
+		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);
+	}
+}
+
+module.exports = new ConfigUtil();

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

@@ -0,0 +1,286 @@
+'use strict';
+
+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;
+
+const defaultIconUrl = '../renderer/img/icon.png';
+
+class DomainUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		// Migrate from old schema
+		if (this.db.getData('/').domain) {
+			this.addDomain({
+				alias: 'Zulip',
+				url: this.db.getData('/domain')
+			});
+			this.db.delete('/domain');
+		}
+
+		return instance;
+	}
+
+	getDomains() {
+		this.reloadDB();
+		if (this.db.getData('/').domains === undefined) {
+			return [];
+		} else {
+			return this.db.getData('/domains');
+		}
+	}
+
+	getDomain(index) {
+		this.reloadDB();
+		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) {
+				this.saveServerIcon(server.icon).then(localIconUrl => {
+					server.icon = localIconUrl;
+					this.db.push('/domains[]', server, true);
+					this.reloadDB();
+					resolve();
+				});
+			} else {
+				server.icon = defaultIconUrl;
+				this.db.push('/domains[]', server, true);
+				this.reloadDB();
+				resolve();
+			}
+		});
+	}
+
+	removeDomains() {
+		this.db.delete('/domains');
+		this.reloadDB();
+	}
+
+	removeDomain(index) {
+		this.db.delete(`/domains[${index}]`);
+		this.reloadDB();
+	}
+
+	// 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
+			return Promise.reject('This server has been added.');
+		}
+
+		domain = this.formatUrl(domain);
+
+		const checkDomain = domain + '/static/audio/zulip.ogg';
+
+		const serverConf = {
+			icon: defaultIconUrl,
+			url: domain,
+			alias: domain
+		};
+
+		return new Promise((resolve, reject) => {
+			request(checkDomain, (error, response) => {
+				const certsError =
+					[
+						'Error: self signed certificate',
+						'Error: unable to verify the first certificate',
+						'Error: unable to get local issuer certificate'
+					];
+
+				// 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 (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 {
+					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);
+				}
+			});
+		});
+	}
+
+	getServerSettings(domain) {
+		const serverSettingsUrl = domain + '/api/v1/server_settings';
+		return new Promise((resolve, reject) => {
+			request(serverSettingsUrl, (error, response) => {
+				if (!error && response.statusCode === 200) {
+					const data = JSON.parse(response.body);
+					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
+						resolve({
+							// 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
+						});
+					}
+				} else {
+					reject('Zulip server version < 1.6.');
+				}
+			});
+		});
+	}
+
+	saveServerIcon(url) {
+		// The save will always succeed. If url is invalid, downgrade to default icon.
+		return new Promise(resolve => {
+			const filePath = this.generateFilePath(url);
+			const file = fs.createWriteStream(filePath);
+			try {
+				request(url).on('response', response => {
+					response.on('error', err => {
+						console.log(err);
+						resolve(defaultIconUrl);
+					});
+					response.pipe(file).on('finish', () => {
+						resolve(filePath);
+					});
+				}).on('error', err => {
+					console.log(err);
+					resolve(defaultIconUrl);
+				});
+			} catch (err) {
+				console.log(err);
+				resolve(defaultIconUrl);
+			}
+		});
+	}
+
+	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() {
+		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}`;
+		}
+	}
+}
+
+module.exports = new DomainUtil();

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

@@ -0,0 +1,26 @@
+'use strict';
+
+const wurl = require('wurl');
+
+let instance = null;
+
+class LinkUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		return instance;
+	}
+
+	isInternal(currentUrl, newUrl) {
+		const currentDomain = wurl('hostname', currentUrl);
+		const newDomain = wurl('hostname', newUrl);
+
+		return (currentDomain === newDomain) && newUrl.includes('/#narrow');
+	}
+}
+
+module.exports = new LinkUtil();

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/js/utils/system-util.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const {app} = require('electron').remote;
+
+const os = require('os');
+
+let instance = null;
+
+class SystemUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.connectivityERR = [
+			'ERR_INTERNET_DISCONNECTED',
+			'ERR_PROXY_CONNECTION_FAILED',
+			'ERR_CONNECTION_RESET',
+			'ERR_NOT_CONNECTED',
+			'ERR_NAME_NOT_RESOLVED',
+			'ERR_NETWORK_CHANGED'
+		];
+		this.userAgent = null;
+
+		return instance;
+	}
+
+	getOS() {
+		if (os.platform() === 'darwin') {
+			return 'Mac';
+		}
+		if (os.platform() === 'linux') {
+			return 'Linux';
+		}
+		if (os.platform() === 'win32' || os.platform() === 'win64') {
+			if (parseFloat(os.release()) < 6.2) {
+				return 'Windows 7';
+			} else {
+				return 'Windows 10';
+			}
+		}
+	}
+
+	setUserAgent(webViewUserAgent) {
+		this.userAgent = 'ZulipElectron/' + app.getVersion() + ' ' + webViewUserAgent;
+	}
+
+	getUserAgent() {
+		return this.userAgent;
+	}
+}
+
+module.exports = new SystemUtil();

app/renderer/main.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" class="responsive desktop">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Zulip</title>
+  <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
+</head>
+
+<body>
+  <div id="content">
+    <div class="popup">
+      <span class="popuptext hidden" id="fullscreen-popup"></span>
+  </div>
+  <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">
+      <div class="action-button" id="reload-action">
+        <i class="material-icons md-48">refresh</i>
+        <span id="reload-tooltip" style="display:none">Reload</span>
+      </div>
+      <div class="action-button" id="settings-action">
+        <i class="material-icons md-48">settings</i>
+        <span id="setting-tooltip" style="display:none">Settings</span>
+      </div>
+    </div>
+  </div>
+  <div id="main-container">
+    <div id="webviews-container"></div>
+  </div>
+  </div>
+</body>
+<script src="js/main.js"></script>
+
+<!-- To trigger electron.reload on changes in renderer from gulp -->
+<script>
+  window.addEventListener('load', () => {
+    const isDev = require('electron-is-dev');
+    if (isDev) {
+      require('electron-connect').client.create();
+    }
+  });
+</script>
+</html>

app/renderer/network.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" class="responsive desktop">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Zulip - Network Troubleshooting</title>
+    <link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
+  </head>
+  <body>
+    <div id="content">
+      <div id="picture"><img src="img/zulip_network.png"></div>
+      <div id="title">Zulip can't connect</div>
+      <div id="description">
+        <div>Your computer seems to be offline.</div>
+        <div>We will keep trying to reconnect, or you can try now.</div>
+      </div>
+      <div id="reconnect">Try now</div>
+    </div>
+  </body>
+  <script src="js/pages/network.js"></script>  
+</html>

app/renderer/pref.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/pref.css">
-		<script type="text/javascript">
-		</script>
-	</head>
-	<body>
-		<div class="close" id="close-button">Close</div>
-		<div class="form">
-			<form onsubmit="addDomain(); return false">
-				<input id="url" type="text" placeholder="zulip.example.com">
-				<button type="submit" id="main" value="Submit" onclick="addDomain();">
-				Switch</button>
-				<img id="pic" src="img/loader.gif" />
-			</form>
-			<p id="urladded"><p>
-			</div>
-			<script src="js/pref.js"></script>
-		</body>
-	</html>

app/renderer/preference.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="responsive desktop">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Zulip - Settings</title>
+    <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+  </head>
+  <body>
+    <div id="content">
+      <div id="sidebar"></div>
+      <div id="settings-container"></div>
+    </div>
+  </body>
+  <script src="js/pages/preference/preference.js"></script>
+</html>

appveyor.yml

@@ -0,0 +1,25 @@
+version: build{build}
+
+platform:
+  - x64
+os: Previous Visual Studio 2015
+
+cache:
+  - node_modules
+
+install:
+  - ps: Install-Product node 6 x64
+  - git reset --hard HEAD
+  - npm install npm -g
+  - node --version
+  - npm --version
+  - python --version
+  - npm install
+  - npm install -g gulp
+
+build: off
+
+test_script:
+  - node ./tools/gitlint --ci-mode
+  - npm run test
+  - npm run test-e2e

build/entitlements.mas.plist

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.security.app-sandbox</key>
+	<true/>
+	<key>com.apple.security.network.client</key>
+	<true/>
+	<key>com.apple.security.files.user-selected.read-only</key>
+	<true/>
+	<key>com.apple.security.files.user-selected.read-write</key>
+	<true/>
+	<key>com.apple.security.files.downloads.read-write</key>
+	<true/>
+</dict>
+</plist>

build/icons/1024x1024.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b92ae5c6e5fb0e5b7fcdb46fe102fa0ca7f4d150016cf1a461c0e86921bc731
+size 163336

development.md

@@ -0,0 +1,84 @@
+# Development setup
+
+This is a guide to running the Zulip desktop app from a source tree,
+in order to contribute to developing it.
+
+## Prerequisites
+
+To build and run the app from source, you'll need the following:
+
+* [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+* [Node.js](https://nodejs.org) >= v6.9.0
+  * [NPM](https://www.npmjs.com/get-npm) and
+    [node-gyp](https://github.com/nodejs/node-gyp#installation),
+    if they don't come bundled with your Node.js installation
+* [Python](https://www.python.org/downloads/release/python-2713/)
+  (v2.7.x recommended)
+* A C++ compiler compatible with C++11
+* Development headers for the libXext, libXtst, and libxkbfile libraries
+
+### Debian/Ubuntu and friends
+
+On a system running Debian, Ubuntu, or another Debian-based Linux
+distribution, you can install all dependencies through the package
+manager (see [here][nodesource-install] for more on the first command):
+
+```sh
+$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+$ sudo apt install git nodejs python build-essential libxext-dev libxtst-dev libxkbfile-dev
+```
+
+[nodesource-install]: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
+
+### Other OSes
+
+Other developers run the app on Windows, macOS, and possibly other OSes.
+PRs to add specific instructions to this doc are welcome!
+
+On Windows, your C++ compiler should be Visual Studio 2015 or later.
+
+## Download, build, and run
+
+Clone the source locally:
+```sh
+$ git clone https://github.com/zulip/zulip-electron
+$ cd zulip-electron
+```
+
+Install project dependencies:
+```sh
+$ npm install
+```
+
+Start the app:
+```sh
+$ npm start
+```
+
+Start and watch changes:
+```sh
+$ npm run dev
+```
+
+## Troubleshooting
+
+If you have any problems running the app, see the [most common
+issues](./troubleshooting.md).
+
+## Making a release
+
+To package the app into an installer:
+```
+npm run dist
+```
+
+This command will produce distributable packages or installers for the
+operating system you're running on:
+* on Windows, a Windows installer file
+* on macOS, a `.dmg` file
+* on Linux, a plain `.zip` file as well as a `.deb` file and an
+  `AppImage` file.
+To generate all three types, you will need all three operating
+systems.
+
+The output files appear in the `dist/` directory.

docs/Home.md

@@ -0,0 +1,2 @@
+# Installation instructions
+* [[Windows]]

docs/Windows.md

@@ -0,0 +1,58 @@
+** Windows Set up instructions **
+
+## Prerequisites
+
+* [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+* [Node.js](https://nodejs.org) >= v6.9.0
+* [python](https://www.python.org/downloads/release/python-2713/) (v2.7.x recommended)
+* [node-gyp](https://github.com/nodejs/node-gyp#installation) (installed via powershell)
+
+## System specific dependencies
+
+* use only 32bit or 64bit for all of the installers, do not mix architectures
+* install using default settings
+* open Windows Powershell as Admin
+```powershell
+C:\Windows\system32> npm install --global --production windows-build-tools
+```
+
+## Installation
+
+Clone the source locally:
+
+```sh
+$ git clone https://github.com/zulip/zulip-electron
+$ cd zulip-electron
+```
+
+Install project dependencies:
+
+```sh
+$ npm install
+```
+
+Start the app:
+
+```sh
+$ npm start
+```
+
+Start and watch changes
+
+```sh
+$ npm run dev
+```
+### Making a release
+
+To package app into an installer use command:
+```
+npm run pack
+npm run dist
+```
+It will start the packaging process. The ready for distribution file (e.g. dmg, windows installer, deb package) will be outputted to the `dist` directory.
+
+# Troubleshooting
+If you have any problems running the app please see the [most common issues](./troubleshooting.md).
+
+
+