release: 🎉 v2.3.3.

captureExceptions are used to report expected exceptions from domain-util.js and
config-util.js.
All files that include logger-util automatically includes sentry for those files
and report unexpected exceptions to sentry.

.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,9 +1,38 @@
-node_modules
-npm-debug.log
-domain.json
-dist
-config.gypi
+# Dependency directories
+node_modules/
+
+# npm cache directory
+.npm
+
+# Compiled binary build directory
+dist/
+
+#snap generated files
+snap/parts
+snap/prime
+snap/snap
+snap/stage
+snap/*.snap
+
+# 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

@@ -15,11 +15,12 @@ addons:
 
 language: node_js
 node_js:
-- '6'
+- '8'
 
 before_install:
-- npm install -g gulp
-- npm install
+  - ./scripts/travis-xvfb.sh
+  - npm install -g gulp
+  - npm install
 
 cache:
   directories:
@@ -33,4 +34,4 @@ notifications:
     urls:
       - https://zulip.org/zulipbot/travis
     on_success: always
-    on_failure: always
+    on_failure: always

CONTRIBUTING.md

@@ -2,44 +2,46 @@
 
 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 judgement 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 development environment, setting up with zulip project, testing, code of conduct can be read [here](https://zulip.readthedocs.io).
+* 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 [here](https://chat.zulip.org/#narrow/stream/electron).
+* 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/16-desktop).
 
 ## 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 the 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).
+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,82 +1,32 @@
-# Zulip Desktop Client 
+# 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"/>
 
-## Prerequisites
-* node >= v6.3.1
-> Use [nvm](https://github.com/creationix/nvm) to install the current stable version of node
+# Download
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
 
+# 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
 
-* python (v2.7.x recommended)
-* If you're on Debian or Ubuntu, you'll need to install following packages:
-```sh
-$ sudo apt-get install build-essential libxext-dev libxtst-dev libxkbfile-dev
-```
+# Development
+Please see our [development guide](./development.md) to get started and run app locally.
 
-## 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 dist
-```
-It will start the packaging process for operating system you are running this command on. Ready for distribution file (e.g. dmg, windows installer, deb package) will be outputted to `dist` directory.
-
-You can create Windows installer only when running on Windows, the same is true for Linux and OSX. So to generate all three installers you need all three operating systems.
-
-
-## Features
-
-- [x] Native Notifications
-- [x] SpellChecker
-- [x] OSX/Win/Linux installer
-- [x] Automatic Updates (macOS/Windows)
-- [x] Keyboard shortcuts
-
-Description            | Keys
------------------------| -----------------------
-Default shortcuts      | <kbd>Cmd/Ctrl</kbd> <kbd>k</kbd>
-Change Zulip Server    | <kbd>Cmd/Ctrl</kbd> <kbd>,</kbd>
-Back                   | <kbd>Cmd/Ctrl</kbd> <kbd>[</kbd>
-Forward                | <kbd>Cmd/Ctrl</kbd> <kbd>]</kbd>
-
-
-## 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

@@ -1,40 +1,105 @@
 'use strict';
-const {app, dialog} = require('electron');
-const {autoUpdater} = require('electron-updater');
+const { app, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const isDev = require('electron-is-dev');
+
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+
+function appUpdater(updateFromMenu = false) {
+	// Don't initiate auto-updates in development
+	if (isDev) {
+		return;
+	}
+
+	if (process.platform === 'linux' && !process.env.APPIMAGE) {
+		const { linuxUpdateNotification } = require('./linuxupdater');
+		linuxUpdateNotification();
+		return;
+	}
+
+	let updateAvailable = false;
+
+	// Create Logs directory
+	const LogsDir = `${app.getPath('userData')}/Logs`;
 
-function appUpdater() {
 	// Log whats happening
 	const log = require('electron-log');
+
+	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
-	/*
-	AutoUpdater.on('error', err => log.info(err));
-	autoUpdater.on('checking-for-update', () => log.info('checking-for-update'));
-	autoUpdater.on('update-available', () => log.info('update-available'));
-	autoUpdater.on('update-not-available', () => log.info('update-not-available'));
-	*/
+
+	// Handle auto updates for beta/pre releases
+	const isBetaUpdate = ConfigUtil.getConfigItem('betaUpdate');
+
+	autoUpdater.allowPrerelease = isBetaUpdate || false;
+
+	const eventsListenerRemove = ['update-available', 'update-not-available'];
+	autoUpdater.on('update-available', info => {
+		if (updateFromMenu) {
+			dialog.showMessageBox({
+				message: `A new version ${info.version}, of Zulip Desktop is available`,
+				detail: 'The update will be downloaded in the background. You will be notified when it is ready to be installed.'
+			});
+
+			updateAvailable = true;
+
+			// This is to prevent removal of 'update-downloaded' and 'error' event listener.
+			eventsListenerRemove.forEach(event => {
+				autoUpdater.removeAllListeners(event);
+			});
+		}
+	});
+
+	autoUpdater.on('update-not-available', () => {
+		if (updateFromMenu) {
+			dialog.showMessageBox({
+				message: 'No updates available',
+				detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`
+			});
+			// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
+			// listeners don't trigger multiple times.
+			autoUpdater.removeAllListeners();
+		}
+	});
+
+	autoUpdater.on('error', error => {
+		if (updateFromMenu) {
+			const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
+			dialog.showMessageBox({
+				type: 'error',
+				buttons: ['Manual Download', 'Cancel'],
+				message: messageText,
+				detail: (error).toString() + `\n\nThe latest version of Zulip Desktop is available at -\nhttps://zulipchat.com/apps/.\n
+Current Version: ${app.getVersion()}`
+			}, response => {
+				if (response === 0) {
+					shell.openExternal('https://zulipchat.com/apps/');
+				}
+			});
+			// Remove all autoUpdator listeners so that next time autoUpdator is manually called these
+			// listeners don't trigger multiple times.
+			autoUpdater.removeAllListeners();
+		}
+	});
 
 	// Ask the user if update is available
 	// eslint-disable-next-line no-unused-vars
-	autoUpdater.on('update-downloaded', (event, info) => {
-		// Let message = app.getName() + ' ' + info.releaseName + ' is now available. It will be installed the next time you restart the application.';
-		// if (info.releaseNotes) {
-			// const splitNotes = info.releaseNotes.split(/[^\r]\n/);
-			// message += '\n\nRelease notes:\n';
-			// splitNotes.forEach(notes => {
-				// message += notes + '\n\n';
-			// });
-		// }
+	autoUpdater.on('update-downloaded', event => {
 		// Ask user to update the app
 		dialog.showMessageBox({
 			type: 'question',
-			buttons: ['Install and Relaunch', 'Later'],
+			buttons: ['Install and Relaunch', 'Install Later'],
 			defaultId: 0,
-			message: 'A new version of ' + app.getName() + ' has been downloaded',
+			message: `A new update ${event.version} has been downloaded`,
 			detail: 'It will be installed the next time you restart the application'
 		}, response => {
 			if (response === 0) {
-				setTimeout(() => autoUpdater.quitAndInstall(), 1);
+				setTimeout(() => {
+					autoUpdater.quitAndInstall();
+					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+					app.quit();
+				}, 1000);
 			}
 		});
 	});

app/main/index.js

@@ -1,128 +1,34 @@
 'use strict';
 const path = require('path');
-const fs = require('fs');
-const os = require('os');
 const electron = require('electron');
-const {app} = require('electron');
-const ipc = require('electron').ipcMain;
-const {dialog} = require('electron');
-const https = require('https');
-const http = require('http');
-const electronLocalshortcut = require('electron-localshortcut');
-const Configstore = require('electron-config');
-const JsonDB = require('node-json-db');
+const windowStateKeeper = require('electron-window-state');
 const isDev = require('electron-is-dev');
 const appMenu = require('./menu');
-const {linkIsInternal, skipImages} = require('./link-helper');
-const {appUpdater} = require('./autoupdater');
+const { appUpdater } = require('./autoupdater');
 
-const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-const data = db.getData('/');
+const { setAutoLaunch } = require('./startup');
+
+const { app, ipcMain } = electron;
+
+const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+const ProxyUtil = require('./../renderer/js/utils/proxy-util.js');
+const { sentryInit } = require('./../renderer/js/utils/sentry-util.js');
 
 // Adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
-
-const conf = new Configstore();
-
-function userOS() {
-	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';
-		}
-	}
+// in development mode
+if (isDev) {
+	require('electron-debug')();
 }
 
-// Setting userAgent so that server-side code can identify the desktop app
-const isUserAgent = 'ZulipElectron/' + app.getVersion() + ' ' + userOS();
-
 // Prevent window being garbage collected
 let mainWindow;
-let targetLink;
+let badgeCount;
+
+let isQuitting = false;
 
 // Load this url in main window
-const staticURL = 'file://' + path.join(__dirname, '../renderer', 'index.html');
-
-const targetURL = function () {
-	if (data.domain === undefined) {
-		return staticURL;
-	}
-	return data.domain;
-};
-
-function serverError(targetURL) {
-	if (targetURL.indexOf('localhost:') < 0 && data.domain) {
-		const req = https.request(targetURL + '/static/audio/zulip.ogg', res => {
-			console.log('Server StatusCode:', res.statusCode);
-			console.log('You are connected to:', res.req._headers.host);
-			if (res.statusCode >= 500 && res.statusCode <= 599) {
-				return dialog.showErrorBox('SERVER IS DOWN!', 'We are getting a ' + res.statusCode + ' error status from the server ' + res.req._headers.host + '. Please try again after some time or you may switch server.');
-			}
-		});
-		req.on('error', e => {
-			if (e.toString().indexOf('Error: self signed certificate') >= 0) {
-				const url = targetURL.replace(/^https?:\/\//, '');
-				console.log('Server StatusCode:', 200);
-				console.log('You are connected to:', url);
-			} else {
-				console.error(e);
-			}
-		});
-		req.end();
-	} else if (data.domain) {
-		const req = http.request(targetURL + '/static/audio/zulip.ogg', res => {
-			console.log('Server StatusCode:', res.statusCode);
-			console.log('You are connected to:', res.req._headers.host);
-		});
-		req.on('error', e => {
-			console.error(e);
-		});
-		req.end();
-	}
-}
-
-function checkConnectivity() {
-	return dialog.showMessageBox({
-		title: 'Internet connection problem',
-		message: 'No internet available! Try again?',
-		type: 'warning',
-		buttons: ['Try again', 'Close'],
-		defaultId: 0
-	}, index => {
-		if (index === 0) {
-			mainWindow.webContents.reload();
-			mainWindow.webContents.send('destroytray');
-		}
-		if (index === 1) {
-			app.quit();
-		}
-	});
-}
-const connectivityERR = [
-	'ERR_INTERNET_DISCONNECTED',
-	'ERR_PROXY_CONNECTION_FAILED',
-	'ERR_CONNECTION_RESET',
-	'ERR_NOT_CONNECTED',
-	'ERR_NAME_NOT_RESOLVED'
-];
-
-function checkConnection() {
-	// eslint-disable-next-line no-unused-vars
-	mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription, validatedURL) => {
-		const hasConnectivityErr = (connectivityERR.indexOf(errorDescription) >= 0);
-		if (hasConnectivityErr) {
-			console.error('error', errorDescription);
-			checkConnectivity();
-		}
-	});
-}
+const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
 
 const isAlreadyRunning = app.makeSingleInstance(() => {
 	if (mainWindow) {
@@ -135,18 +41,7 @@ const isAlreadyRunning = app.makeSingleInstance(() => {
 });
 
 if (isAlreadyRunning) {
-	app.quit();
-}
-
-function checkWindowURL() {
-	if (data.domain !== undefined) {
-		return data.domain;
-	}
-	return targetLink;
-}
-
-function isWindowsOrmacOS() {
-	return process.platform === 'darwin' || process.platform === 'win32';
+	return app.quit();
 }
 
 const APP_ICON = path.join(__dirname, '../resources', 'Icon');
@@ -155,96 +50,69 @@ 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);
-	}
-	mainWindow.webContents.send('tray', messageCount);
-}
-
 function createMainWindow() {
+	// Load the previous state with fallback to defaults
+	const mainWindowState = windowStateKeeper({
+		defaultWidth: 1100,
+		defaultHeight: 720,
+		path: `${app.getPath('userData')}/config`
+	});
+
+	// 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, '../renderer/js/preload.js'),
 			plugins: true,
-			allowDisplayingInsecureContent: true,
-			nodeIntegration: false
+			nodeIntegration: true
 		},
 		show: false
 	});
 
+	win.on('focus', () => {
+		win.webContents.send('focus');
+	});
+
 	win.once('ready-to-show', () => {
-		win.show();
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
 	});
 
-	serverError(targetURL());
+	win.loadURL(mainURL);
 
-	win.loadURL(targetURL(), {
-		userAgent: isUserAgent + ' ' + win.webContents.getUserAgent()
+	// 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.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('resize', function () {
-		const size = this.getSize();
-		conf.set({
-			width: size[0],
-			height: size[1]
-		});
-	});
-
-	// 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);
+	win.on('leave-full-screen', () => {
+		win.webContents.send('leave-fullscreen');
 	});
 
 	//  To destroy tray icon when navigate to a new URL
@@ -254,47 +122,27 @@ function createMainWindow() {
 		}
 	});
 
+	// 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
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
 
-// app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
+// Temporary fix for Electron render colors differently
+// More info here - https://github.com/electron/electron/issues/10732
+app.commandLine.appendSwitch('force-color-profile', 'srgb');
 
-// For self-signed certificate
-ipc.on('certificate-err', (e, domain) => {
-	const detail = `URL: ${domain} \n Error: Self-Signed Certificate`;
-	dialog.showMessageBox(mainWindow, {
-		title: 'Certificate error',
-		message: `Do you trust certificate from ${domain}?`,
-		// eslint-disable-next-line object-shorthand
-		detail: detail,
-		type: 'warning',
-		buttons: ['Yes', 'No'],
-		cancelId: 1
-		// eslint-disable-next-line object-shorthand
-	}, response => {
-		if (response === 0) {
-			// eslint-disable-next-line object-shorthand
-			db.push('/domain', domain);
-			mainWindow.loadURL(domain);
-		}
-	});
-});
 // eslint-disable-next-line max-params
 app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
 	event.preventDefault();
 	callback(true);
 });
 
-app.on('window-all-closed', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-	if (process.platform !== 'darwin') {
-		app.quit();
-	}
-});
-
 app.on('activate', () => {
 	if (!mainWindow) {
 		mainWindow = createMainWindow();
@@ -302,73 +150,115 @@ app.on('activate', () => {
 });
 
 app.on('ready', () => {
-	electron.Menu.setApplicationMenu(appMenu);
+	appMenu.setMenu({
+		tabs: []
+	});
 	mainWindow = createMainWindow();
-	// Not using for now // tray.create();
+
+	// Initialize sentry for main process
+	sentryInit();
+
+	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+
+	if (isSystemProxy) {
+		ProxyUtil.resolveSystemProxy(mainWindow);
+	}
 
 	const page = mainWindow.webContents;
 
-	// TODO - use global shortcut instead
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		mainWindow.reload();
-		mainWindow.webContents.send('destroytray');
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		if (page.canGoBack()) {
-			page.goBack();
-		}
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		if (page.canGoForward()) {
-			page.goForward();
-		}
-	});
-
 	page.on('dom-ready', () => {
-		page.insertCSS(fs.readFileSync(path.join(__dirname, '../renderer/css/preload.css'), 'utf8'));
-		mainWindow.show();
-	});
-
-	page.on('new-window', (event, url) => {
-		if (linkIsInternal(checkWindowURL(), url) && url.match(skipImages) === null) {
-			event.preventDefault();
-			return mainWindow.loadURL(url);
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
 		}
-		event.preventDefault();
-		electron.shell.openExternal(url);
 	});
 
 	page.once('did-frame-finish-load', () => {
-		const checkOS = isWindowsOrmacOS();
-		if (checkOS && !isDev) {
-			// Initate auto-updates on MacOS and Windows
+		// Initate auto-updates on MacOS and Windows
+		if (ConfigUtil.getConfigItem('autoUpdate')) {
 			appUpdater();
 		}
 	});
-	checkConnection();
-});
 
-app.on('will-quit', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
+	// Temporarily remove this event
+	// electron.powerMonitor.on('resume', () => {
+	// 	mainWindow.reload();
+	// 	page.send('destroytray');
+	// });
 
-ipc.on('new-domain', (e, domain) => {
-	// MainWindow.loadURL(domain);
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-		mainWindow.loadURL(domain);
-		mainWindow.webContents.send('destroytray');
-	} else if (mainWindow.isMinimized()) {
-		mainWindow.webContents.send('destroytray');
-		mainWindow.loadURL(domain);
+	ipcMain.on('focus-app', () => {
 		mainWindow.show();
-	} else {
-		mainWindow.webContents.send('destroytray');
-		mainWindow.loadURL(domain);
-		serverError(domain);
-	}
-	targetLink = domain;
+	});
+
+	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();
+		}
+	});
+
+	ipcMain.on('toggle-badge-option', () => {
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+	});
+
+	ipcMain.on('update-badge', (event, messageCount) => {
+		badgeCount = messageCount;
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+		page.send('tray', messageCount);
+	});
+
+	ipcMain.on('update-taskbar-icon', (event, data, text) => {
+		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+	});
+
+	ipcMain.on('forward-message', (event, listener, ...params) => {
+		page.send(listener, ...params);
+	});
+
+	ipcMain.on('update-menu', (event, props) => {
+		appMenu.setMenu(props);
+	});
+
+	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
+		setAutoLaunch(AutoLaunchValue);
+	});
+
+	ipcMain.on('downloadFile', (event, url, downloadPath) => {
+		page.downloadURL(url);
+		page.session.once('will-download', (event, item) => {
+			const filePath = path.join(downloadPath, item.getFilename());
+			item.setSavePath(filePath);
+			item.once('done', () => {
+				page.send('downloadFileCompleted', filePath, item.getFilename());
+			});
+		});
+	});
+});
+
+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,16 +0,0 @@
-const wurl = require('wurl');
-
-// Check link if it's internal/external
-function linkIsInternal(currentUrl, newUrl) {
-	const currentDomain = wurl('hostname', currentUrl);
-	const newDomain = wurl('hostname', newUrl);
-	return currentDomain === newDomain;
-}
-
-// We'll be needing this to open images in default browser
-const skipImages = '.jpg|.gif|.png|.jpeg|.JPG|.PNG';
-
-module.exports = {
-	linkIsInternal,
-	skipImages
-};

app/main/linuxupdater.js

@@ -0,0 +1,49 @@
+const { app } = require('electron');
+const { Notification } = require('electron');
+
+const request = require('request');
+const semver = require('semver');
+const ConfigUtil = require('../renderer/js/utils/config-util');
+const LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
+const Logger = require('../renderer/js/utils/logger-util');
+
+const logger = new Logger({
+	file: 'linux-update-util.log',
+	timestamp: true
+});
+
+function linuxUpdateNotification() {
+	let	url = 'https://api.github.com/repos/zulip/zulip-electron/releases';
+	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
+
+	const options = {
+		url,
+		headers: {'User-Agent': 'request'}
+	};
+
+	request(options, (error, response, body) => {
+		if (error) {
+			logger.error('Linux update error.');
+			logger.error(error);
+			return;
+		}
+		if (response.statusCode < 400) {
+			const data = JSON.parse(body);
+			const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
+
+			if (semver.gt(latestVersion, app.getVersion())) {
+				const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
+				if (notified === null) {
+					new Notification({title: 'Zulip Update', body: 'A new version ' + latestVersion + ' is available. Please update using your package manager.'}).show();
+					LinuxUpdateUtil.setUpdateItem(latestVersion, true);
+				}
+			}
+		} else {
+			logger.log('Linux update response status: ', response.statusCode);
+		}
+	});
+}
+
+module.exports = {
+	linuxUpdateNotification
+};

app/main/menu.js

@@ -1,363 +1,474 @@
 'use strict';
-const os = require('os');
-const electron = require('electron');
+const path = require('path');
 
-const {dialog} = require('electron');
+const { app, shell, BrowserWindow, Menu, dialog } = require('electron');
+
+const fs = require('fs-extra');
+const AdmZip = require('adm-zip');
+const { appUpdater } = require('./autoupdater');
+
+const ConfigUtil = require(__dirname + '/../renderer/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/../renderer/js/utils/dnd-util.js');
+const Logger = require(__dirname + '/../renderer/js/utils/logger-util.js');
 
-const app = electron.app;
-const BrowserWindow = electron.BrowserWindow;
-const shell = electron.shell;
 const appName = app.getName();
-//	Const tray = require('./tray');
 
-const {addDomain, about} = require('./windowmanager');
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
 
-function sendAction(action) {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
+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');
+				}
+			}
+		}];
 	}
 
-	win.webContents.send(action);
-}
-
-function clearCache() {
-	const win = BrowserWindow.getAllWindows()[0];
-	const ses = win.webContents.session;
-	ses.clearCache(() => {
-		dialog.showMessageBox({type: 'info', buttons: [], message: 'Cache cleared!'});
-	});
-}
-
-const viewSubmenu = [
-	{
-		label: 'Reload',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.reload();
-				focusedWindow.webContents.send('destroytray');
+	getViewSubmenu() {
+		return [{
+			label: 'Reload',
+			accelerator: 'CommandOrControl+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('reload-current-viewer');
+				}
 			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		role: 'togglefullscreen'
-	},
-	{
-		label: 'Zoom In',
-		accelerator: 'CommandOrControl+=',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomIn');
+		}, {
+			label: 'Hard Reload',
+			accelerator: 'CommandOrControl+Shift+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('hard-reload');
+				}
 			}
-		}
-	},
-	{
-		label: 'Zoom Out',
-		accelerator: 'CommandOrControl+-',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomOut');
+		}, {
+			type: 'separator'
+		}, {
+			role: 'togglefullscreen'
+		}, {
+			label: 'Zoom In',
+			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomIn');
+				}
 			}
-		}
-	},
-	{
-		label: 'Actual Size',
-		accelerator: 'CommandOrControl+0',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomActualSize');
+		}, {
+			label: 'Zoom Out',
+			accelerator: 'CommandOrControl+-',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomOut');
+				}
 			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Toggle Tray Icon',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.webContents.send('toggletray');
+		}, {
+			label: 'Actual Size',
+			accelerator: 'CommandOrControl+0',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomActualSize');
+				}
 			}
-		}
-	},
-	{
-		label: 'Toggle Developer Tools',
-		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.webContents.toggleDevTools();
+		}, {
+			type: 'separator'
+		}, {
+			label: 'Toggle Tray Icon',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.send('toggletray');
+				}
 			}
-		}
+		}, {
+			label: 'Toggle Sidebar',
+			accelerator: 'CommandOrControl+Shift+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');
+				}
+			}
+		}];
 	}
-];
 
-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: [
+	getHelpSubmenu() {
+		return [
 			{
-				label: 'Zulip desktop',
+				label: `${appName + ' Desktop-'} v${app.getVersion()}`,
+				enabled: false
+			},
+			{
+				label: `What's New...`,
 				click() {
-					about();
+					shell.openExternal(`https://github.com/zulip/zulip-electron/releases/tag/v${app.getVersion()}`);
 				}
 			},
 			{
+				label: `${appName} Help`,
+				click() {
+					shell.openExternal('https://zulipchat.com/help/');
+				}
+			}, {
+				label: 'Show App Logs',
+				click() {
+					const zip = new AdmZip();
+					let date = new Date();
+					date = date.toLocaleDateString().replace(/\//g, '-');
+
+					// Create a zip file of all the logs and config data
+					zip.addLocalFolder(`${app.getPath('appData')}/${appName}/Logs`);
+					zip.addLocalFolder(`${app.getPath('appData')}/${appName}/config`);
+
+					// Put the log file in downloads folder
+					const logFilePath = `${app.getPath('downloads')}/Zulip-logs-${date}.zip`;
+					zip.writeZip(logFilePath);
+
+					// Open and select the log file
+					shell.showItemInFolder(logFilePath);
+				}
+			}, {
+				label: 'Report an Issue...',
+				click() {
+					// the goal is to notify the main.html BrowserWindow
+					// which may not be the focused window.
+					BrowserWindow.getAllWindows().forEach(window => {
+						window.webContents.send('open-feedback-modal');
+					});
+				}
+			}];
+	}
+
+	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',
-				accelerator: 'Cmd+,',
-				click() {
-					addDomain();
+			});
+			for (let i = 0; i < tabs.length; i++) {
+				// Do not add functional tab settings to list of windows in menu bar
+				if (tabs[i].props.role === 'function' && tabs[i].webview.props.name === 'Settings') {
+					continue;
 				}
-			},
-			{
-				label: 'Keyboard shortcuts',
-				accelerator: 'Cmd+K',
+
+				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: 'checkbox'
+				});
+			}
+		}
+
+		return initialSubmenu;
+	}
+
+	getDarwinTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: `${app.getName()}`,
+			submenu: [{
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('shortcut');
+						AppMenu.sendAction('open-about');
 					}
 				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Clear Cache',
+			}, {
+				label: `Check for Update`,
 				click() {
-					clearCache();
+					AppMenu.checkForUpdate();
 				}
-			},
-			{
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Desktop App Settings',
+				accelerator: 'Cmd+,',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-settings');
+					}
+				}
+			}, {
+				label: 'Keyboard Shortcuts',
+				accelerator: 'Cmd+Shift+K',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('shortcut');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Command+Shift+M',
+				click() {
+					const dndUtil = DNDUtil.toggle();
+					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				}
+			}, {
+				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();
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Change Zulip Server',
-				accelerator: 'Ctrl+,',
-				click() {
-					addDomain();
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Keyboard shortcuts',
-				accelerator: 'Ctrl+K',
+	getOtherTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: 'File',
+			submenu: [{
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
-						sendAction('shortcut');
+						AppMenu.sendAction('open-about');
 					}
 				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Clear Cache',
+			}, {
+				label: `Check for Update`,
 				click() {
-					clearCache();
+					AppMenu.checkForUpdate();
 				}
-			},
-			{
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Desktop App Settings',
+				accelerator: 'Ctrl+,',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-settings');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Keyboard Shortcuts',
+				accelerator: 'Ctrl+Shift+K',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('shortcut');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Ctrl+Shift+M',
+				click() {
+					const dndUtil = DNDUtil.toggle();
+					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				}
+			}, {
+				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 checkForUpdate() {
+		appUpdater(true);
+	}
+	static resetAppSettings() {
+		const resetAppSettingsMessage = 'By proceeding you will be removing all connected organizations and preferences from Zulip.';
+
+		// We save App's settings/configurations in following files
+		const settingFiles = ['config/window-state.json', 'config/domain.json', 'config/settings.json', 'config/certificates.json'];
+
+		dialog.showMessageBox({
+			type: 'warning',
+			buttons: ['YES', 'NO'],
+			defaultId: 0,
+			message: 'Are you sure?',
+			detail: resetAppSettingsMessage
+		}, response => {
+			if (response === 0) {
+				settingFiles.forEach(settingFileName => {
+					const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
+					fs.access(getSettingFilesPath, error => {
+						if (error) {
+							logger.error('Error while resetting app settings.');
+							logger.error(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/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/windowmanager.js

@@ -1,100 +0,0 @@
-'use strict';
-const path = require('path');
-const electron = require('electron');
-const ipc = require('electron').ipcMain;
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = () => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-let domainWindow;
-let aboutWindow;
-
-function onClosed() {
-	// Dereference the window
-	domainWindow = null;
-	aboutWindow = null;
-}
-
-// Change Zulip server Window
-function createdomainWindow() {
-	const domainwin = new electron.BrowserWindow({
-		title: 'Switch Server',
-		frame: false,
-		height: 300,
-		resizable: false,
-		width: 400,
-		show: false,
-		icon: iconPath()
-
-	});
-	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.once('ready-to-show', () => {
-		domainWindow.show();
-	});
-	setTimeout(() => {
-		if (domainWindow !== null) {
-			if (!domainWindow.isDestroyed()) {
-				domainWindow.destroy();
-			}
-		}
-	}, 15000);
-}
-// 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.once('ready-to-show', () => {
-		aboutWindow.show();
-	});
-}
-
-ipc.on('trayabout', event => {
-	if (event) {
-		about();
-	}
-});
-
-ipc.on('traychangeserver', event => {
-	if (event) {
-		addDomain();
-	}
-});
-module.exports = {
-	addDomain,
-	about
-};

app/package.json

@@ -1,14 +1,13 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "0.5.10",
+  "version": "2.3.3",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
-  "email": "<svnitakash@gmail.com>",
-  "copyright": "©2017 Kandra Labs, Inc.",
+  "copyright": "Kandra Labs, Inc.",
   "author": {
-    "name": "Akash Nimare",
-    "email": "svnitakash@gmail.com"
+    "name": "Kandra Labs, Inc.",
+    "email": "support@zulipchat.com"
   },
   "repository": {
     "type": "git",
@@ -27,16 +26,23 @@
     "InstantMessaging"
   ],
   "dependencies": {
-    "electron-config":"0.2.1",
-    "electron-debug": "1.1.0",
-    "electron-is-dev": "0.1.2",
-    "electron-localshortcut": "1.0.0",
-    "electron-log": "1.3.0",
-    "electron-spellchecker": "1.0.5",
-    "electron-updater": "1.11.2",
-    "https": "^1.0.0",
+    "@electron-elements/send-feedback": "1.0.7",
+    "@sentry/electron": "0.5.5",
+    "adm-zip": "0.4.11",
+    "auto-launch": "5.0.5",
+    "electron-is-dev": "0.3.0",
+    "electron-log": "2.2.14",
+    "electron-spellchecker": "1.1.2",
+    "electron-updater": "2.23.3",
+    "electron-window-state": "4.1.1",
+    "escape-html": "1.0.3",
+    "is-online": "7.0.0",
     "node-json-db": "0.7.3",
-    "request": "2.79.0",
-    "wurl": "2.1.0"
+    "request": "2.85.0",
+    "semver": "5.4.1",
+    "wurl": "2.5.0"
+  },
+  "optionalDependencies": {
+    "node-mac-notifier": "0.1.0"
   }
 }

app/renderer/about.html

@@ -1,33 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/about.css">
-	</head>
-	<body>
+
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="css/about.css">
+</head>
+
+<body>
 	<div class="about">
 		<img class="logo" src="../resources/zulip.png" />
-		<p class="detail" id="version">version ?.?.?</p>
+		<p class="detail" id="version">v?.?.?</p>
 		<div class="maintenance-info">
-			<p class="detail maintainer">Maintained by Zulip</p>
-			<p class="detail license">Available under the Apache License</p>
-			<a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a>
+			<p class="detail maintainer">
+				Maintained by
+				<a onclick="linkInBrowser('website')">Zulip</a>
+			</p>
+			<p class="detail license">
+				Available under the
+				<a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+			</p>
+			<a class="bug" onclick="linkInBrowser('bug')" href="#">Found bug?</a>
 		</div>
 	</div>
 	<script>
 
-	const app = require('electron').remote.app;
-	const version_tag = document.getElementById('version');
-	version_tag.innerHTML = 'version ' + app.getVersion();
+		const { app } = require('electron').remote;
+		const { shell } = require('electron');
+		const version_tag = document.querySelector('#version');
+		version_tag.innerHTML = 'v' + app.getVersion();
 
-	function linkInBrowser(event) {
-
-		const shell = require('electron').shell;
-
-		const url = "https://github.com/zulip/zulip-electron/issues/new?body=Please describe your issue and steps to reproduce it."
-
-		shell.openExternal(url);
-	}
+		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>
+	<script>require('./js/shared/preventdrag.js')</script>
+</body>
 </html>

app/renderer/css/about.css

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

app/renderer/css/main.css

@@ -1,143 +1,468 @@
-* {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
-                 Helvetica, Arial, sans-serif, "Apple Color Emoji",
-                 "Segoe UI Emoji", "Segoe UI Symbol";
-    -webkit-font-smoothing: antialiased;
-    color: #444;
+/*******************
+ *  General rules  *
+ *******************/
 
+html,
+body {
+    height: 100%;
+    margin: 0;
+    cursor: default;
+    user-select: none;
+}
+
+#content {
+    display: flex;
+    height: 100%;
+}
+
+.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;
+    z-index: 2;
+}
+
+.toggle-sidebar div {
+    transition: all 0.5s ease-out;
+}
+
+.sidebar-hide {
+    width: 0;
+    transition: all 0.8s ease;
+}
+
+.sidebar-hide div {
+    transform: translateX(-100%);
+    transition: all 0.6s ease-out;
+}
+
+#view-controls-container {
+	height: calc(100% - 208px);
+	overflow-y: hidden;
+}
+
+#view-controls-container:hover {
+	overflow-y: overlay;
+}
+
+#view-controls-container::-webkit-scrollbar {
+	width: 4px;
+}
+
+#view-controls-container::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+#view-controls-container::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
+
+@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');
+}
+
+
+/*******************
+  *   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;
+}
+
+#actions-container {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    bottom: 0;
+}
+
+.action-button {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+}
+
+.action-button:hover {
+    cursor: pointer;
+}
+
+.action-button i {
+    color: #6c8592;
+    font-size: 28px;
+}
+
+.action-button:hover i {
+    color: #98a9b3;
+}
+
+.action-button.disable {
+    opacity: 0.6;
+}
+
+.action-button.disable:hover {
+    cursor: not-allowed;
+}
+
+.action-button.disable:hover i {
+    color: #6c8592;
+}
+
+.action-button.active {
+    /* background-color: rgba(255, 255, 255, 0.25); */
+    background-color: #efefef;
+    opacity: 0.9;
+    padding-right: 14px;
+}
+
+.action-button.active i {
+    color: #1c262b;
+}
+
+.tab:first-child {
+    margin-top: 8px;
+}
+
+.tab {
+    position: relative;
+    margin: 2px 0;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.tab .server-icons {
+    border-radius: 50%;
+    width: 30px;
+    padding: 3px;
+    height: 30px;
     vertical-align: top;
 }
 
-body {
-    margin: 0;
-    background-image: url(../img/topography.png);
-}
-
-input,
-button {
-    font-size: 1em;
-}
-
-header {
+.tab .server-tab {
+    width: 100%;
+    height: 35px;
+    position: relative;
+    margin: 5px 0 2px 0;
+    z-index: 11;
+    line-height: 31px;
+    color: #eee;
     text-align: center;
-    margin: 0px 0px 30px 0px;
+    overflow: hidden;
+    opacity: 0.6;
+    padding: 2px 0;
 }
 
-header img {
-    width: 50px;
+.tab .server-tab:hover {
+    opacity: 0.8;
 }
 
-header h1 {
-    display: inline-block;
-    margin: 10px 0px 10px 10px;
-
-    font-weight: 500;
+.tab.functional-tab {
+    height: 46px;
+    padding: 0;
 }
 
-
-section.server {
-    display: inline-block;
-    padding: 50px;
-    margin-top: calc(50vh - 135px);
-
-    text-align: left;
-
-    box-shadow: 0px 0px 100px rgba(0,0,0,0.15);
-
-    background-color: #fff;
-
-    animation-name: pulse;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
+.tab.functional-tab.active .server-tab {
+    padding: 2px 0;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.25);
 }
 
-section.shake {
-    animation-name: shake;
-    animation-duration: 0.5s;
-    animation-iteration-count: 1;
+.tab.functional-tab .server-tab i {
+    font-size: 28px;
+    line-height: 36px;
 }
 
-form label {
+.tab.active .server-tab {
+    opacity: 1;
+    background-color: #648478;
+}
+
+.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;
+    right: 0;
+}
 
-    font-weight: 600;
+.tab .server-tab-badge {
+    display: none;
+}
+
+.tab .server-tab-badge.close-button {
+    width: 16px;
+    padding: 0;
+}
+
+.tab .server-tab-badge.close-button i {
+    font-size: 13px;
+    line-height: 17px;
+}
+
+#add-tab {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.tab .server-tab-shortcut {
+    color: #648478;
+    font-size: 12px;
+    text-align: center;
+    font-family: sans-serif;
     margin-bottom: 5px;
 }
 
-form input[type=text] {
-    width: 300px;
-    border: 2px solid #ccc;
-    padding: 10px 10px;
 
-    outline: none;
+/*******************
+  *   Webview Area  *
+  *******************/
 
-    transition: all 0.2s ease;
+#webviews-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
 }
 
-form input[type=text]:hover,
-form input[type=text]:focus {
-    border-color: #aaa;
+/*Pseudo element for loading indicator*/
+#webviews-container::before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    background: #fff url(../img/ic_loading.gif) no-repeat;
+    background-size: 60px 60px;
+    background-position: center;
+    width: 100%;
+    height: 100%;
 }
 
-form button {
-    padding: 10px 10px;
-
-    background-color: #52c2af;
-    color: #fff;
-
-    border: 2px solid #52c2af;
-    outline: none;
-
-    cursor: pointer;
-
-    transition: all 0.2s ease;
-}
-
-form button:hover {
-    background-color: #30b09a;
-    border-color: #30b09a;
-}
-
-form button:active {
-    background-color: #14957f;
-    border-color: #14957f;
-}
-
-form #error {
-    margin: 5px 0px 0px;
-
-    font-size: 0.8em;
-    font-weight: 600;
-
-    color: rgb(201, 107, 107);
-
+/*When the active webview is loaded*/
+#webviews-container.loaded::before {
     opacity: 0;
-    transform: translateY(-10px);
-
-    height: 15px;
-
-    transition: all 0.2s ease;
+    z-index: -1;
+    visibility: hidden;
 }
 
-form #error.show {
+webview {
+    /* transition: opacity 0.3s ease-in; */
+    flex-grow: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+webview.onload {
+    transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+}
+
+webview.active {
     opacity: 1;
-    transform: translateY(0px);
+    z-index: 1;
+    visibility: visible;
 }
 
-/* -- generic components -- */
-.center {
+webview.disabled {
+    opacity: 0;
+}
+
+webview.focus {
+    outline: 0px solid transparent;
+}
+
+/* Tooltip styling */
+
+#dnd-tooltip,
+#back-tooltip,
+#reload-tooltip,
+#setting-tooltip {
+    font-family: sans-serif;
+    background: #222c31;
+    margin-left: 48px;
+    padding: 6px 8px;
+    position: absolute;
+    margin-top: 0px;
+    z-index: 1000;
+    color: white;
+    border-radius: 4px;
     text-align: center;
+    width: 55px;
+    font-size: 14px;
 }
 
-@keyframes pulse {
-    0% { box-shadow: 0px 0px 100px rgba(0,0,0,0.15); }
-    50% { box-shadow: 0px 0px 100px rgba(0,0,0,0.30); }
-    100% { box-shadow: 0px 0px 100px rgba(0,0,0,0.15); }
+#dnd-tooltip:after,
+#back-tooltip:after,
+#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;
 }
 
-@keyframes shake {
-  10%, 90% { transform: translate3d(-1px, 0, 0); }
-  20%, 80% { transform: translate3d(2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
-  40%, 60% { transform: translate3d(4px, 0, 0); }
+#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;
+    flex-grow: 1;
+    flex-basis: 0px;
+}
+
+.hidden {
+    display: none !important;
+}
+
+
+/* Full screen Popup container  */
+
+.popup .popuptext {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 9px 0;
+    position: absolute;
+    z-index: 1000;
+    font-family: arial;
+    width: 240px;
+    top: 15px;
+    height: 20px;
+    left: 43%;
+}
+
+.popup .show {
+    visibility: visible;
+    animation: cssAnimation 0s ease-in 5s forwards;
+    animation-fill-mode: forwards;
+}
+
+@keyframes cssAnimation {
+    from {
+        opacity: 0;
+    }
+    to {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 1;
+    }
+}
+
+send-feedback {
+  width: 60%;
+  height: 85%;
+}
+
+#feedback-modal {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(68, 67, 67, 0.81);
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: all 1s ease-out;
+}
+
+#feedback-modal.show {
+  display: flex;
 }

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,74 +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;
-}

app/renderer/css/preference.css

@@ -0,0 +1,667 @@
+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 {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 15px;
+    font-family: Courier New, Courier, monospace;
+    font-weight: bold;
+    white-space: nowrap;
+    background-color: #f7f7f7;
+    color: #333;
+    margin: 0 0.1em;
+    padding: 0.3em 0.8em;
+    text-shadow: 0 1px 0 #fff;
+    line-height: 1.4;
+}
+
+table,
+th,
+td {
+    border-collapse: collapse;
+    color: #383430;
+}
+
+table {
+    width: 100%;
+    margin-top: 18px;
+    margin-bottom: 18px;
+}
+
+table tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+table tr:nth-child(odd) {
+    background-color: #fff;
+}
+
+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: 150px;
+    min-width: 100px;
+    padding: 30px 30px 30px 35px;
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    background: #f2f2f2;
+}
+
+#nav-container {
+    padding: 20px 0;
+}
+
+.nav {
+    padding: 5px 0;
+    color: #999;
+    cursor: pointer;
+}
+
+.nav.active {
+    color: #4ebfac;
+    cursor: default;
+    position: relative;
+}
+
+.nav.active::before {
+    background: #464e5a;
+    width: 3px;
+    height: 18px;
+    position: absolute;
+    left: -8px;
+    content: '';
+}
+
+
+/* We don't want to show this in nav item since we have the + button for adding an Organization */
+
+#nav-AddServer {
+    display: none;
+}
+
+#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 {
+    padding-left: 42px;
+    padding-top: 25px;
+    margin-right: 16px;
+}
+
+.title {
+    font-weight: 500;
+    color: #222c31;
+}
+
+.page-title {
+    color: #222c31;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 4px 0 6px 0;
+}
+
+.add-server-info-row {
+    display: flex;
+    margin: 8px 0 0 0;
+}
+
+.add-server-info-right {
+    flex-grow: 1;
+    margin-top: 10px;
+}
+
+.sub-title {
+    padding: 4px 0 6px 0;
+    font-weight: bold;
+    color: #616161;
+}
+
+img.server-info-icon {
+    width: 36px;
+    height: 36px;
+    padding: 4px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.server-info-left {
+    margin: 4px 20px 0 0;
+    min-width: 40%;
+}
+
+.server-info-right {
+    margin-top: 4px;
+    width: 55%;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    flex-grow: 1;
+}
+
+.server-info-row {
+    display: inline-block;
+    margin: 5px 0 0 0;
+}
+
+.server-info-left .server-info-row {
+    display: inline-flex;
+    align-items: inherit;
+    vertical-align: -2px;
+    position: relative;
+}
+
+.server-url {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.server-info-alias {
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.server-url-info {
+    margin-right: 10px;
+}
+
+.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;
+    border-radius: 3px;
+    padding: 13px;
+    border: #ededed 2px solid;
+    outline-width: 0;
+    background: transparent;
+    max-width: 450px;
+}
+
+.setting-input-value:focus {
+    border: #4EBFAC 2px solid;
+}
+
+.manual-proxy-block {
+    width: 96%;
+}
+
+.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 {
+    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: #ef5350;
+    padding: 8px;
+    border: rgba(239, 83, 80, 0.5) solid 1px;
+}
+
+.red:hover {
+    color: #e63431;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
+}
+
+.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-left: 2px;
+    font-size: 19px;
+    cursor: pointer;
+}
+
+.reset-data-button,
+.custom-css-button,
+.download-folder-button {
+    display: inline-block;
+    border: none;
+    padding: 10px;
+    width: 120px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background-color 0.2s ease;
+    text-decoration: none;
+}
+
+.css-delete-action {
+    margin-bottom: 10px;
+}
+
+.reset-data-button:hover {
+    background-color: #3c9f8d;
+    color: #fff;
+}
+
+.selected-css-path,
+.download-folder-path {
+    background: #eeeeee;
+    padding: 10px;
+    margin-top: 10px;
+    margin-right: 10px;
+    display: flex;
+    width: 90%;
+    justify-content: space-between;
+}
+
+#remove-custom-css {
+    align-items: flex-end;
+}
+
+#server-info-container {
+    min-height: calc(100% - 260px);
+}
+
+#create-organization-container {
+    font-size: 1.15em;
+}
+
+#create-organization-container i {
+    position: relative;
+    top: 3px;
+}
+
+#open-create-org-link {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.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;
+}
+
+input.toggle-round+label:after {
+    width: 25px;
+    height: 25px;
+    background-color: #fff;
+    border-radius: 100%;
+}
+
+input.toggle-round:checked+label:before {
+    background-color: #4EBFAC;
+}
+
+input.toggle-round:checked+label:after {
+    margin-left: 25px;
+}
+
+
+/*  Add new server modal */
+
+.add-server-modal {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    padding-top: 15vh;
+    left: 0;
+    top: 0;
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    /* background: rgba(61, 64, 67, 15); */
+    background: linear-gradient(35deg, #003b52, #45b59b);
+    overflow: auto;
+}
+
+
+/* Modal Content */
+
+.modal-container {
+    background-color: #f4f7f8;
+    margin: auto;
+    padding: 57px;
+    border: #dae1e3 1px solid;
+    width: 550px;
+    height: 370px;
+    border-radius: 4px;
+}
+
+.add-server-modal .page-title {
+    text-align: center;
+    font-size: 1.6rem;
+}
+
+.divider {
+    margin-bottom: 30px;
+    margin-top: 30px;
+    color: #7d878a;
+}
+
+.divider hr {
+    margin-left: 8px;
+    margin-right: 8px;
+    width: 44%;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.server-center {
+    width: 100%;
+    text-align: center;
+    align-items: center;
+    padding-top: 13px;
+    margin-left: -5px;
+}
+
+.server-center button {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin: auto;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    background: #4EBFAC;
+    border-color: none;
+    border: none;
+    width: 98%;
+    height: 46px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.server-center button:hover {
+    background: #329588;
+}
+
+.server-center button:focus {
+    background: #329588;
+}
+
+.certificates-card {
+     width:70%
+}
+
+.certificate-input {
+     width:100%;
+     margin-top: 10px; 
+     display:inline-flex;
+}
+
+.certificate-input div {
+    align-self:center;
+}
+
+.certificate-input .setting-input-value {
+    margin-left:10px;
+    max-width: 100%;
+}
+
+#add-certificate-button {
+    width:20%;
+    margin-right:0px;
+    height: 35px;
+}
+
+.tip {
+    background-color: hsl(46,63%,95%);
+    border: 1px solid hsl(46,63%,84%);
+    border-radius: 4px;
+}
+
+.md-14 {
+    font-size: 14px;
+    vertical-align: middle;
+    padding-right: 6px;
+}
+
+#open-hotkeys-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* responsive grid */
+
+@media (max-width: 650px) {
+    .selected-css-path,
+    .download-folder-path  {
+        margin-right: 15px;
+    }
+    #css-delete-action {
+        margin-left: 10px;
+    }
+    #css-delete-action span {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    .modal-container {
+        width: 60vw;
+        padding: 40px;
+        min-width: 300px;
+    }
+    .server-center button {
+        margin-right: -12px;
+        width: 100%;
+    }
+    .divider {
+        margin-right: -8px;
+    }
+    .divider hr {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: 43%;
+    }
+    #new-server-container {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 600px) {
+    .divider {
+        margin-left: 4%;
+    }
+    .divider hr {
+        margin-left: 2px;
+        margin-right: 2px;
+        width: 40%;
+    }
+}
+
+@media (max-width: 900px) {
+    .settings-card {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .server-info-right {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .action {
+        margin-top: 10px;
+    }
+}

app/renderer/css/preload.css

@@ -1 +1,9 @@
-/* We'll be overriding default styling so that app look more native * / 
+/* Override css rules */
+
+.portico-wrap>.header {
+    display: none;
+}
+
+.portico-container>.footer {
+    display: none;
+}

app/renderer/index.html

@@ -1,30 +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">
-  </head>
-    <body>
-        <div class="center">
-            <section class="server">
-                <header>
-                    <img src="../resources/zulip.png" id="logo"/>
-                    <h1>Zulip Login</h1>
-                </header>
-                <div class="container">
-                    <form id="frm-signInForm" class="form-large" onsubmit="addDomain(); return false">
-                        <label for="url">
-                            Zulip Server URL
-                        </label>
-                        <input type="text" id="url"  autofocus="autofocus" spellcheck="false" placeholder="Server URL">
-                        <button type="submit" id="main" class="btn-primary btn-large" value="Submit">Connect</button>
-                        <p id="error"></p>
-                    </form>
-                </div>
-            </section>
-        </div>
-    </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,44 @@
+'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());
+		if (this.props.name !== 'Settings') {
+			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/handle-external-link.js

@@ -0,0 +1,54 @@
+const { ipcRenderer } = require('electron');
+const { shell, app } = require('electron').remote;
+const LinkUtil = require('../utils/link-util');
+const DomainUtil = require('../utils/domain-util');
+const ConfigUtil = require('../utils/config-util');
+
+const dingSound = new Audio('../resources/sounds/ding.ogg');
+
+function handleExternalLink(event) {
+	const { url } = event;
+	const domainPrefix = DomainUtil.getDomain(this.props.index).url;
+	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
+  // Whitelist URLs which are allowed to be opened in the app
+	const {
+    isInternalUrl: isWhiteListURL,
+    isUploadsUrl: isUploadsURL
+  } = LinkUtil.isInternal(domainPrefix, url);
+
+	if (isWhiteListURL) {
+		event.preventDefault();
+
+    // download txt, pdf, mp3, mp4 etc.. by using downloadURL in the
+    // main process which allows the user to save the files to their desktop
+    // and not trigger webview reload while image in webview will
+    // do nothing and will not save it
+		if (!LinkUtil.isImage(url) && isUploadsURL) {
+			ipcRenderer.send('downloadFile', url, downloadPath);
+			ipcRenderer.once('downloadFileCompleted', (event, filePath, fileName) => {
+				const downloadNotification = new Notification('Download Complete', {
+					body: `Click to open ${fileName}`,
+					silent: true // We'll play our own sound - ding.ogg
+				});
+
+				// Play sound to indicate download complete
+				if (!ConfigUtil.getConfigItem('silent')) {
+					dingSound.play();
+				}
+
+				downloadNotification.onclick = () => {
+					shell.openItem(filePath);
+				};
+			});
+			return;
+		}
+
+    // open internal urls inside the current webview.
+		this.$el.loadURL(url);
+	} else {
+		event.preventDefault();
+		shell.openExternal(url);
+	}
+}
+
+module.exports = handleExternalLink;

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

@@ -0,0 +1,60 @@
+'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}`;
+		}
+
+		// Array index == Shown index - 1
+		ipcRenderer.send('switch-server-tab', shownIndex - 1);
+
+		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,247 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+const ConfigUtil = require(__dirname + '/../utils/config-util.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+const { app, dialog } = require('electron').remote;
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+const handleExternalLink = require(__dirname + '/../components/handle-external-link.js');
+
+const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
+class WebView extends BaseComponent {
+	constructor(props) {
+		super();
+
+		this.props = props;
+
+		this.zoomFactor = 1.0;
+		this.loading = true;
+		this.badgeCount = 0;
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
+	}
+
+	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 => {
+			handleExternalLink.call(this, event);
+		});
+
+		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('did-navigate-in-page', event => {
+			const isSettingPage = event.url.includes('renderer/preference.html');
+			if (isSettingPage) {
+				return;
+			}
+			this.canGoBackButton();
+		});
+
+		this.$el.addEventListener('did-navigate', () => {
+			this.canGoBackButton();
+		});
+
+		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('●');
+				// bounce the dock
+				if (ConfigUtil.getConfigItem('dockBouncing')) {
+					app.dock.bounce();
+				}
+			}
+		});
+
+		this.$el.addEventListener('dom-ready', () => {
+			if (this.props.role === 'server') {
+				this.$el.classList.add('onload');
+			}
+			this.loading = false;
+			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;
+		}
+
+		// To show or hide the loading indicator in the the active tab
+		if (this.loading) {
+			this.$webviewsContainer.remove('loaded');
+		} else {
+			this.$webviewsContainer.add('loaded');
+		}
+
+		this.$el.classList.remove('disabled');
+		this.$el.classList.add('active');
+		setTimeout(() => {
+			if (this.props.role === 'server') {
+				this.$el.classList.remove('onload');
+			}
+		}, 1000);
+		this.focus();
+		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'));
+
+		// get customCSS again from config util to avoid warning user again
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		if (this.customCSS) {
+			if (!fs.existsSync(this.customCSS)) {
+				this.customCSS = null;
+				ConfigUtil.setConfigItem('customCSS', null);
+
+				const errMsg = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errMsg);
+				return;
+			}
+
+			this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), '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');
+		this.$el.classList.remove('active');
+	}
+
+	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();
+		}
+	}
+
+	canGoBackButton() {
+		const $backButton = document.querySelector('#actions-container #back-action');
+		if (this.$el.canGoBack()) {
+			$backButton.classList.remove('disable');
+		} else {
+			$backButton.classList.add('disable');
+		}
+	}
+
+	forward() {
+		if (this.$el.canGoForward()) {
+			this.$el.goForward();
+		}
+	}
+
+	reload() {
+		this.hide();
+		// Shows the loading indicator till the webview is reloaded
+		this.$webviewsContainer.remove('loaded');
+		this.loading = true;
+		this.$el.reload();
+	}
+
+	send(...param) {
+		this.$el.send(...param);
+	}
+}
+
+module.exports = WebView;

app/renderer/js/domain.js

@@ -1,80 +0,0 @@
-const {app} = require('electron').remote;
-const ipcRenderer = require('electron').ipcRenderer;
-const JsonDB = require('node-json-db');
-const request = require('request');
-
-const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-
-window.addDomain = function () {
-	const el = sel => {
-		return document.querySelector(sel);
-	};
-
-	const $el = {
-		error: el('#error'),
-		main: el('#main'),
-		section: el('section')
-	};
-
-	const event = sel => {
-		return {
-			on: (event, callback) => {
-				document.querySelector(sel).addEventListener(event, callback);
-			}
-		};
-	};
-
-	const displayError = msg => {
-		$el.error.innerText = msg;
-		$el.error.classList.add('show');
-		$el.section.classList.add('shake');
-	};
-
-	let newDomain = document.getElementById('url').value;
-	newDomain = newDomain.replace(/^https?:\/\//, '');
-	if (newDomain === '') {
-		displayError('Please input a valid URL.');
-	} else {
-		el('#main').innerHTML = 'Checking...';
-		if (newDomain.indexOf('localhost:') >= 0) {
-			const domain = 'http://' + newDomain;
-			const checkDomain = domain + '/static/audio/zulip.ogg';
-			request(checkDomain, (error, response) => {
-				if (!error && response.statusCode !== 404) {
-					document.getElementById('main').innerHTML = 'Connect';
-					db.push('/domain', domain);
-					ipcRenderer.send('new-domain', domain);
-				} else {
-					$el.main.innerHTML = 'Connect';
-					displayError('Not a valid Zulip local server');
-				}
-			});
-			//	});
-		} else {
-			const domain = 'https://' + newDomain;
-			const checkDomain = domain + '/static/audio/zulip.ogg';
-
-			request(checkDomain, (error, response) => {
-				if (!error && response.statusCode !== 404) {
-					$el.main.innerHTML = 'Connect';
-					db.push('/domain', domain);
-					ipcRenderer.send('new-domain', domain);
-				} else if (error.toString().indexOf('Error: self signed certificate') >= 0) {
-					$el.main.innerHTML = 'Connect';
-					ipcRenderer.send('certificate-err', domain);
-				} else {
-					$el.main.innerHTML = 'Connect';
-					displayError('Not a valid Zulip server');
-				}
-			});
-		}
-	}
-
-	event('#url').on('input', () => {
-		el('#error').classList.remove('show');
-	});
-
-	event('section').on('animationend', function () {
-		this.classList.remove('shake');
-	});
-};

app/renderer/js/feedback.js

@@ -0,0 +1,62 @@
+const { app } = require('electron').remote;
+const path = require('path');
+const fs = require('fs');
+const SendFeedback = require('@electron-elements/send-feedback');
+
+// make the button color match zulip app's theme
+SendFeedback.customStyles = `
+button:hover, button:focus {
+  border-color: #4EBFAC;
+  color: #4EBFAC;
+}
+
+button:active {
+  background-color: #f1f1f1;
+  color: #4EBFAC;
+}
+
+button {
+  background-color: #4EBFAC;
+  border-color: #4EBFAC;
+}
+`;
+
+customElements.define('send-feedback', SendFeedback);
+const sendFeedback = document.querySelector('send-feedback');
+const feedbackHolder = sendFeedback.parentElement;
+
+// customize the fields of custom elements
+sendFeedback.title = 'Report Issue';
+sendFeedback.titleLabel = 'Issue title:';
+sendFeedback.titlePlaceholder = 'Enter issue title';
+sendFeedback.textareaLabel = 'Describe the issue:';
+sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
+sendFeedback.buttonLabel = 'Report Issue';
+sendFeedback.loaderSuccessText = '';
+
+sendFeedback.useReporter('emailReporter', {
+	email: 'akash@zulipchat.com'
+});
+
+feedbackHolder.addEventListener('click', e => {
+  // only remove the class if the grey out faded
+  // part is clicked and not the feedback element itself
+	if (e.target === e.currentTarget) {
+		feedbackHolder.classList.remove('show');
+	}
+});
+
+sendFeedback.addEventListener('feedback-submitted', () => {
+	setTimeout(() => {
+		feedbackHolder.classList.remove('show');
+	}, 1000);
+});
+
+const dataDir = app.getPath('userData');
+const logsDir = path.join(dataDir, '/Logs');
+sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
+
+module.exports = {
+	feedbackHolder,
+	sendFeedback
+};

app/renderer/js/main.js

@@ -0,0 +1,610 @@
+'use strict';
+
+const { ipcRenderer, remote } = require('electron');
+const isDev = require('electron-is-dev');
+
+const { session, app } = remote;
+
+require(__dirname + '/js/tray.js');
+const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
+const WebView = require(__dirname + '/js/components/webview.js');
+const ServerTab = require(__dirname + '/js/components/server-tab.js');
+const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
+const ConfigUtil = require(__dirname + '/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/js/utils/dnd-util.js');
+const ReconnectUtil = require(__dirname + '/js/utils/reconnect-util.js');
+const Logger = require(__dirname + '/js/utils/logger-util.js');
+const { feedbackHolder } = require(__dirname + '/js/feedback.js');
+
+const escape = require('escape-html');
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+class ServerManagerView {
+	constructor() {
+		this.$addServerButton = document.getElementById('add-tab');
+		this.$tabsContainer = document.getElementById('tabs-container');
+
+		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.$backButton = $actionsContainer.querySelector('#back-action');
+		this.$dndButton = $actionsContainer.querySelector('#dnd-action');
+
+		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.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
+		this.$dndTooltip = $actionsContainer.querySelector('#dnd-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 => {
+			// To change proxyEnable to useManualProxy in older versions
+			const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
+			if (proxyEnabledOld) {
+				const proxyEnableOldState = ConfigUtil.getConfigItem('useProxy');
+				if (proxyEnableOldState) {
+					ConfigUtil.setConfigItem('useManualProxy', true);
+				}
+				ConfigUtil.removeConfigItem('useProxy');
+			}
+
+			const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+			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,
+			useManualProxy: false,
+			useSystemProxy: false,
+			showSidebar: true,
+			badgeOption: true,
+			startAtLogin: false,
+			startMinimized: false,
+			enableSpellchecker: true,
+			showNotification: true,
+			autoUpdate: true,
+			betaUpdate: false,
+			silent: false,
+			lastActiveTab: 0,
+			dnd: false,
+			dndPreviousSettings: {
+				showNotification: true,
+				silent: false
+			},
+			downloadsPath: `${app.getPath('downloads')}`
+		};
+
+		// Platform specific settings
+
+		if (process.platform === 'win32') {
+			// Only available on Windows
+			settingOptions.flashTaskbarOnMessage = true;
+			settingOptions.dndPreviousSettings.flashTaskbarOnMessage = true;
+		}
+
+		if (process.platform === 'darwin') {
+			// Only available on macOS
+			settingOptions.dockBouncing = 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'));
+			// Remove focus from the settings icon at sidebar bottom
+			this.$settingsButton.classList.remove('active');
+		} else {
+			this.openSettings('AddServer');
+		}
+	}
+
+	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.initDNDButton();
+		this.$dndButton.addEventListener('click', () => {
+			const dndUtil = DNDUtil.toggle();
+			ipcRenderer.send('forward-message', 'toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+		});
+		this.$reloadButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.reload();
+		});
+		this.$addServerButton.addEventListener('click', () => {
+			this.openSettings('AddServer');
+		});
+		this.$settingsButton.addEventListener('click', () => {
+			this.openSettings('General');
+		});
+		this.$backButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.back();
+		});
+
+		const $serverImgs = document.querySelectorAll('.server-icons');
+		$serverImgs.forEach($serverImg => {
+			$serverImg.addEventListener('error', () => {
+				$serverImg.src = 'img/icon.png';
+			});
+		});
+
+		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
+		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
+		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
+		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
+		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
+	}
+
+	initDNDButton() {
+		const dnd = ConfigUtil.getConfigItem('dnd', false);
+		this.toggleDNDButton(dnd);
+	}
+
+	getTabIndex() {
+		const currentIndex = this.tabIndex;
+		this.tabIndex++;
+		return currentIndex;
+	}
+
+	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
+		SidebarButton.addEventListener('mouseover', () => {
+			SidebarTooltip.removeAttribute('style');
+			// To handle position of add server tooltip due to scrolling of list of organizations
+			// This could not be handled using CSS, hence the top of the tooltip is made same
+			// as that of its parent element.
+			// This needs to handled only for the add server tooltip and not others.
+			if (addServer) {
+				const { top } = SidebarButton.getBoundingClientRect();
+				SidebarTooltip.style.top = top + 'px';
+			}
+		});
+		SidebarButton.addEventListener('mouseout', () => {
+			SidebarTooltip.style.display = 'none';
+		});
+	}
+
+	onHover(index, serverName) {
+		this.$serverIconTooltip[index].innerHTML = escape(serverName);
+		this.$serverIconTooltip[index].removeAttribute('style');
+		// To handle position of servers' tooltip due to scrolling of list of organizations
+		// This could not be handled using CSS, hence the top of the tooltip is made same
+		// as that of its parent element.
+		const { top } = this.$serverIconTooltip[index].parentElement.getBoundingClientRect();
+		this.$serverIconTooltip[index].style.top = top + 'px';
+	}
+
+	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,
+			name: tabProps.name,
+			$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
+			})
+		}));
+		// To show loading indicator the first time a functional tab is opened, indicator is
+		// closed when the functional tab DOM is ready, handled in webview.js
+		this.$webviewsContainer.classList.remove('loaded');
+		this.activateTab(this.functionalTabs[tabProps.name]);
+	}
+
+	openSettings(nav = 'General') {
+		this.openFunctionalTab({
+			name: 'Settings',
+			materialIcon: 'settings',
+			url: `file://${__dirname}/preference.html#${nav}`
+		});
+		this.$settingsButton.classList.add('active');
+		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 all the tabs in background, also activate the tab based on the index
+		this.activateTab(index);
+		// Save last active tab
+		ConfigUtil.setConfigItem('lastActiveTab', index);
+	}
+
+	activateTab(index, hideOldTab = true) {
+		if (!this.tabs[index]) {
+			return;
+		}
+
+		if (this.activeTabIndex !== -1) {
+			if (this.activeTabIndex === index) {
+				return;
+			} else if (hideOldTab) {
+				// If old tab is functional tab Settings, remove focus from the settings icon at sidebar bottom
+				if (this.tabs[this.activeTabIndex].props.role === 'function' && this.tabs[this.activeTabIndex].props.name === 'Settings') {
+					this.$settingsButton.classList.remove('active');
+				}
+				this.tabs[this.activeTabIndex].deactivate();
+			}
+		}
+
+		try {
+			this.tabs[index].webview.canGoBackButton();
+		} catch (err) {
+		}
+
+		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('toggle-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();
+					});
+				}
+			});
+		});
+
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+			this.toggleDNDButton(state);
+			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-dnd', state, newSettings);
+		});
+	}
+
+	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() {
+		// Show loading indicator
+		this.$webviewsContainer.classList.remove('loaded');
+
+		// 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');
+		}
+	}
+
+	// Toggles the dnd button icon.
+	toggleDNDButton(alert) {
+		this.$dndTooltip.textContent = (alert ? 'Turn Off' : 'Enable') + ' Do Not Disturb';
+		this.$dndButton.querySelector('i').textContent = alert ? 'notifications_off' : 'notifications';
+	}
+
+	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.activateLastTab(index);
+		});
+
+		ipcRenderer.on('reload-proxy', (event, showAlert) => {
+			this.loadProxy().then(() => {
+				if (showAlert) {
+					alert('Proxy settings saved!');
+					ipcRenderer.send('reload-full-app');
+				}
+			});
+		});
+
+		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));
+		});
+
+		ipcRenderer.on('open-feedback-modal', () => {
+			feedbackHolder.classList.add('show');
+		});
+	}
+}
+
+window.onload = () => {
+	const serverManagerView = new ServerManagerView();
+	const reconnectUtil = new ReconnectUtil(serverManagerView);
+	serverManagerView.init();
+	window.addEventListener('online', () => {
+		reconnectUtil.pollInternetAndReload();
+	});
+
+	window.addEventListener('offline', () => {
+		reconnectUtil.clearState();
+		logger.log('No internet connection, you are offline.');
+	});
+
+	// only start electron-connect (auto reload on change) when its ran
+	// from `npm run dev` or `gulp dev` and not from `npm start` when
+	// app is started `npm start` main process's proces.argv will have
+	// `--no-electron-connect`
+	const mainProcessArgv = remote.getGlobal('process').argv;
+	if (isDev && !mainProcessArgv.includes('--no-electron-connect')) {
+		const electronConnect = require('electron-connect');
+		electronConnect.client.create();
+	}
+};

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,155 @@
+const { remote } = require('electron');
+const Logger = require('../utils/logger-util.js');
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+// Do not change this
+const appId = 'org.zulip.zulip-electron';
+
+const botsList = [];
+let botsListLoaded = false;
+
+// this function load list of bots from the server
+// sync=True for a synchronous getJSON request
+// in case botsList isn't already completely loaded when required in parseRely
+function loadBots(sync = false) {
+	const { $ } = window;
+	botsList.length = 0;
+	if (sync) {
+		$.ajaxSetup({async: false});
+	}
+	$.getJSON('/json/users')
+		.done(data => {
+			const members = data.members;
+			members.forEach(membersRow => {
+				if (membersRow.is_bot) {
+					const bot = `@${membersRow.full_name}`;
+					const mention = `@**${bot.replace(/^@/, '')}**`;
+					botsList.push([bot, mention]);
+				}
+			});
+			botsListLoaded = true;
+		})
+		.fail(error => {
+			logger.log('Load bots request failed: ', error.responseText);
+			logger.log('Load bots request status: ', error.statusText);
+		});
+	if (sync) {
+		$.ajaxSetup({async: true});
+	}
+}
+
+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);
+	});
+
+	// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
+	if (botsListLoaded === false) {
+		loadBots(true);
+	}
+
+	// Iterate for every bot name and replace in reply
+	// @botname with @**botname**
+	botsList.forEach(([bot, mention]) => {
+		if (reply.includes(bot)) {
+			const regex = new RegExp(bot, 'g');
+			reply = reply.replace(regex, mention);
+		}
+	});
+
+	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,
+	loadBots
+};

app/renderer/js/notification/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const {
+  remote: { app }
+} = require('electron');
+
+const DefaultNotification = require('./default-notification');
+const { appId, loadBots } = 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;
+}
+
+window.addEventListener('load', () => {
+	// Call this function only when user is logged in
+	// eslint-disable-next-line no-undef, camelcase
+	if (page_params.realm_uri) {
+		loadBots();
+	}
+});

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/add-certificate.js

@@ -0,0 +1,91 @@
+'use-strict';
+
+const { dialog } = require('electron').remote;
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const CertificateUtil = require(__dirname + '/../../utils/certificate-util.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+
+class AddCertificate extends BaseComponent {
+	constructor(props) {
+		super();
+		this.props = props;
+		this._certFile = '';
+	}
+
+	template() {
+		return `			
+			<div class="settings-card server-center certificates-card">
+				<div class="certificate-input">
+					<div>Organization URL :</div> 
+					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
+				</div>
+				<div class="certificate-input">
+					<div>Custom CA's certificate file :</div> 
+					<button id="add-certificate-button">Add</button>
+				</div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.$addCertificate = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$addCertificate);
+		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
+		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0];
+		this.initListeners();
+	}
+
+	validateAndAdd() {
+		const certificate = this._certFile;
+		const serverUrl = this.serverUrl.value;
+		if (certificate !== '' && serverUrl !== '') {
+			const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
+			const fileName = certificate.substring(certificate.lastIndexOf('/') + 1);
+			const copy = CertificateUtil.copyCertificate(server, certificate, fileName);
+			if (!copy) {
+				return;
+			}
+			CertificateUtil.setCertificate(server, fileName);
+			dialog.showMessageBox({
+				title: 'Success',
+				message: `Certificate saved!`
+			});
+			this.serverUrl.value = '';
+		} else {
+			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
+      'Enter an Organization URL' : 'Choose certificate file'}`);
+		}
+	}
+
+	addHandler() {
+		const showDialogOptions = {
+			title: 'Select file',
+			defaultId: 1,
+			properties: ['openFile'],
+			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
+		};
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				this._certFile = selectedFile[0] || '';
+				this.validateAndAdd();
+			}
+		});
+	}
+
+	initListeners() {
+		this.addCertificateButton.addEventListener('click', () => {
+			this.addHandler();
+		});
+
+		this.serverUrl.addEventListener('keypress', event => {
+			const EnterkeyCode = event.keyCode;
+
+			if (EnterkeyCode === 13) {
+				this.addHandler();
+			}
+		});
+	}
+}
+
+module.exports = AddCertificate;

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/connected-org-section.js

@@ -0,0 +1,64 @@
+'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 AddCertificate = require(__dirname + '/add-certificate.js');
+
+class ConnectedOrgSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-pane" id="server-settings-pane">
+				<div class="page-title">Connected organizations</div>
+				<div class="title" id="existing-servers">All the connected orgnizations will appear here.</div>
+				<div id="server-info-container"></div>
+
+				<div class="page-title">Add Custom Certificates</div>
+				<div id="add-certificate-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');
+
+		const noServerText = 'All the connected orgnizations will appear here';
+		// Show noServerText if no servers are there otherwise hide it
+		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
+
+		for (let i = 0; i < servers.length; i++) {
+			new ServerInfoForm({
+				$root: this.$serverInfoContainer,
+				server: servers[i],
+				index: i,
+				onChange: this.reloadApp
+			}).init();
+		}
+
+		this.$addCertificateContainer = document.getElementById('add-certificate-container');
+		this.initAddCertificate();
+	}
+
+	initAddCertificate() {
+		new AddCertificate({
+			$root: this.$addCertificateContainer
+		}).init();
+	}
+
+}
+
+module.exports = ConnectedOrgSection;

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

@@ -0,0 +1,390 @@
+'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="dock-bounce-option" style= "display:${process.platform === 'darwin' ? '' : 'none'}">
+						<div class="setting-description">Bounce dock on new private message</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="autoupdate-option">
+						<div class="setting-description">Enable auto updates</div>
+						<div class="setting-control"></div>
+					</div>
+					<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">Add custom CSS</div>
+				<div class="settings-card">
+					<div class="setting-row" id="add-custom-css">
+						<div class="setting-description">
+							This will inject the selected css stylesheet in all the added accounts
+						</div>
+						<button class="custom-css-button blue">Add</button>
+					</div>
+					<div class="setting-row" id="remove-custom-css">
+						<div class="setting-description">
+							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
+						</div>
+						<div class="action red" id="css-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>Delete</span>
+						</div>
+					</div>
+				</div>
+				<div class="title">Advanced</div>
+				<div class="settings-card">
+					<div class="setting-row" id="download-folder">
+						<div class="setting-description">
+							Default download location
+						</div>
+						<button class="download-folder-button blue">Choose</button>
+					</div>
+					<div class="setting-row">
+						<div class="setting-description">
+							<div class="download-folder-path">${ConfigUtil.getConfigItem('downloadsPath')}</div>
+						</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.autoUpdateOption();
+		this.betaUpdateOption();
+		this.updateSidebarOption();
+		this.updateStartAtLoginOption();
+		this.updateResetDataOption();
+		this.showDesktopNotification();
+		this.enableSpellchecker();
+		this.minimizeOnStart();
+		this.addCustomCSS();
+		this.showCustomCSSPath();
+		this.removeCustomCSS();
+		this.downloadFolder();
+
+		// Platform specific settings
+
+		// Flashing taskbar on Windows
+		if (process.platform === 'win32') {
+			this.updateFlashTaskbar();
+		}
+		// Dock bounce on macOS
+		if (process.platform === 'darwin') {
+			this.updateDockBouncing();
+		}
+	}
+
+	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();
+			}
+		});
+	}
+
+	updateDockBouncing() {
+		this.generateSettingOption({
+			$element: document.querySelector('#dock-bounce-option .setting-control'),
+			value: ConfigUtil.getConfigItem('dockBouncing', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('dockBouncing');
+				ConfigUtil.setConfigItem('dockBouncing', newValue);
+				this.updateDockBouncing();
+			}
+		});
+	}
+
+	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();
+			}
+		});
+	}
+
+	autoUpdateOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#autoupdate-option .setting-control'),
+			value: ConfigUtil.getConfigItem('autoUpdate', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
+				ConfigUtil.setConfigItem('autoUpdate', newValue);
+				this.autoUpdateOption();
+			}
+		});
+	}
+
+	betaUpdateOption() {
+		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.betaUpdateOption();
+			}
+		});
+	}
+
+	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('toggle-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);
+			}
+		});
+	}
+
+	customCssDialog() {
+		const showDialogOptions = {
+			title: 'Select file',
+			defaultId: 1,
+			properties: ['openFile'],
+			filters: [{ name: 'CSS file', extensions: ['css'] }]
+		};
+
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+				ipcRenderer.send('forward-message', 'hard-reload');
+			}
+		});
+	}
+
+	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();
+			}
+		});
+	}
+
+	addCustomCSS() {
+		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
+		customCSSButton.addEventListener('click', () => {
+			this.customCssDialog();
+		});
+	}
+
+	showCustomCSSPath() {
+		if (!ConfigUtil.getConfigItem('customCSS')) {
+			const cssPATH = document.getElementById('remove-custom-css');
+			cssPATH.style.display = 'none';
+		}
+	}
+
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
+		removeCSSButton.addEventListener('click', () => {
+			ConfigUtil.setConfigItem('customCSS');
+			ipcRenderer.send('forward-message', 'hard-reload');
+		});
+	}
+
+	downloadFolderDialog() {
+		const showDialogOptions = {
+			title: 'Select Download Location',
+			defaultId: 1,
+			properties: ['openDirectory']
+		};
+
+		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
+			if (selectedFolder) {
+				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
+				const downloadFolderPath = document.querySelector('.download-folder-path');
+				downloadFolderPath.innerText = selectedFolder[0];
+			}
+		});
+	}
+	downloadFolder() {
+		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
+		downloadFolder.addEventListener('click', () => {
+			this.downloadFolderDialog();
+		});
+	}
+
+}
+
+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', 'AddServer', 'Organizations', '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,129 @@
+'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-system-settings">
+						<div class="setting-description">Use system proxy settings (requires restart)</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="use-manual-settings">
+						<div class="setting-description">Manual proxy configuration</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="manual-proxy-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.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-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 manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
+		this.toggleManualProxySettings(manualProxyEnabled);
+
+		this.updateProxyOption();
+	}
+
+	toggleManualProxySettings(option) {
+		if (option) {
+			this.$manualProxyBlock.classList.remove('hidden');
+		} else {
+			this.$manualProxyBlock.classList.add('hidden');
+		}
+	}
+
+	updateProxyOption() {
+		this.generateSettingOption({
+			$element: document.querySelector('#use-system-settings .setting-control'),
+			value: ConfigUtil.getConfigItem('useSystemProxy', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('useSystemProxy');
+				const manualProxyValue = ConfigUtil.getConfigItem('useManualProxy');
+				if (manualProxyValue && newValue) {
+					ConfigUtil.setConfigItem('useManualProxy', !manualProxyValue);
+					this.toggleManualProxySettings(!manualProxyValue);
+				}
+				if (newValue === false) {
+					// Remove proxy system proxy settings
+					ConfigUtil.setConfigItem('proxyRules', '');
+					ipcRenderer.send('forward-message', 'reload-proxy', true);
+				}
+				ConfigUtil.setConfigItem('useSystemProxy', newValue);
+				this.updateProxyOption();
+			}
+		});
+		this.generateSettingOption({
+			$element: document.querySelector('#use-manual-settings .setting-control'),
+			value: ConfigUtil.getConfigItem('useManualProxy', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('useManualProxy');
+				const systemProxyValue = ConfigUtil.getConfigItem('useSystemProxy');
+				this.toggleManualProxySettings(newValue);
+				if (systemProxyValue && newValue) {
+					ConfigUtil.setConfigItem('useSystemProxy', !systemProxyValue);
+				}
+				ConfigUtil.setConfigItem('proxyRules', '');
+				ConfigUtil.setConfigItem('useManualProxy', newValue);
+				// Reload app only when turning manual proxy off, hence !newValue
+				ipcRenderer.send('forward-message', 'reload-proxy', !newValue);
+				this.updateProxyOption();
+			}
+		});
+	}
+}
+
+module.exports = NetworkSection;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+const shell = require('electron').shell;
+
+class NewServerForm extends BaseComponent {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="server-input-container">
+				<div class="title">Organization URL</div>
+				<div class="add-server-info-row">
+					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
+				</div>
+				<div class="server-center">
+					<div class="server-save-action">
+						<button id="connect">Connect</button>
+					</div>
+				</div>
+				<div class="server-center">
+				<div class="divider">
+					<hr class="left"/>OR<hr class="right" />
+				</div>
+				</div>
+				<div class="server-center">
+				<div class="server-save-action">
+					<button id="open-create-org-link">Create a new organization</button>
+			</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[0].innerHTML = 'Connecting...';
+		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
+			DomainUtil.addDomain(serverConf).then(() => {
+				this.props.onChange(this.props.index);
+			});
+		}, errorMessage => {
+			this.$saveServerButton.children[0].innerHTML = 'Connect';
+			alert(errorMessage);
+		});
+	}
+
+	openCreateNewOrgExternalLink() {
+		const link = 'https://zulipchat.com/new/';
+		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
+
+	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();
+			}
+		});
+		// open create new org link in default browser
+		this.openCreateNewOrgExternalLink();
+	}
+}
+
+module.exports = NewServerForm;

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

@@ -0,0 +1,115 @@
+'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 ConnectedOrgSection = require(__dirname + '/js/pages/preference/connected-org-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 'AddServer': {
+				this.section = new ServersSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
+			case 'General': {
+				this.section = new GeneralSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
+			case 'Organizations': {
+				this.section = new ConnectedOrgSection({
+					$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);
+		});
+
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+			this.handleToggle('show-notification-option', newSettings.showNotification);
+			this.handleToggle('silent-option', newSettings.silent);
+
+			if (process.platform === 'win32') {
+				this.handleToggle('flash-taskbar-option', newSettings.flashTaskbarOnMessage);
+			}
+		});
+	}
+}
+
+window.onload = () => {
+	const preferenceView = new PreferenceView();
+	preferenceView.init();
+};

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

@@ -0,0 +1,82 @@
+'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 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>
+				<div class="server-info-right">
+					<div class="server-info-row server-url">
+						<span class="server-url-info" title="${this.props.server.url}">${this.props.server.url}</span>
+					</div>
+					<div class="server-info-row">
+						<div class="action red server-delete-action">
+							<span>Disconnect</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.$serverIcon = this.$serverInfoForm.getElementsByClassName('server-info-icon')[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 disconnect this organization?'
+			}, 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);
+		});
+
+		this.$serverIcon.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,46 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+const NewServerForm = require(__dirname + '/new-server-form.js');
+
+class ServersSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+		<div class="add-server-modal">
+			<div class="modal-container">
+				<div class="settings-pane" id="server-settings-pane">
+					<div class="page-title">Add a Zulip organization</div>
+					<div id="new-server-container"></div>
+				</div>
+			</div>
+		</div>
+		`;
+	}
+
+	init() {
+		this.initServers();
+	}
+
+	initServers() {
+		this.props.$root.innerHTML = '';
+
+		this.props.$root.innerHTML = this.template();
+		this.$newServerContainer = document.getElementById('new-server-container');
+
+		this.initNewServerForm();
+	}
+
+	initNewServerForm() {
+		new NewServerForm({
+			$root: this.$newServerContainer,
+			onChange: this.reloadApp
+		}).init();
+	}
+}
+
+module.exports = ServersSection;

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

@@ -0,0 +1,322 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+const shell = require('electron').shell;
+
+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>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+                    <td>Toggle Do Not Disturb</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>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>Shift</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 class="settings-card tip"><b><i class="material-icons md-14">settings</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</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>Shift</kbd> + <kbd>M</kbd></td>
+                    <td>Toggle Do Not Disturb</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>Shift</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 class="tip"><b><i class="material-icons md-14">lightbulb_outline</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
+            </div>
+		`;
+	}
+
+	openHotkeysExternalLink() {
+		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
+		const externalCreateNewOrgEl = document.getElementById('open-hotkeys-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
+	init() {
+		this.props.$root.innerHTML = (process.platform === 'darwin') ?
+			this.templateMac() : this.templateWinLin();
+		this.openHotkeysExternalLink();
+	}
+}
+
+module.exports = ShortcutsSection;

app/renderer/js/pref.js

@@ -1,69 +0,0 @@
-'use strict';
-// eslint-disable-next-line import/no-extraneous-dependencies
-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
-window.prefDomain = function () {
-	const request = require('request');
-	// eslint-disable-next-line import/no-extraneous-dependencies
-	const ipcRenderer = require('electron').ipcRenderer;
-	const JsonDB = require('node-json-db');
-	// eslint-disable-next-line import/no-extraneous-dependencies
-	const {app} = require('electron').remote;
-
-	const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-
-	let newDomain = document.getElementById('url').value;
-	newDomain = newDomain.replace(/^https?:\/\//, '');
-	newDomain = newDomain.replace(/^http?:\/\//, '');
-
-	if (newDomain === '') {
-		document.getElementById('urladded').innerHTML = 'Please input a value';
-	} else {
-		document.getElementById('main').innerHTML = 'Checking...';
-		if (newDomain.indexOf('localhost:') >= 0) {
-			const domain = 'http://' + newDomain;
-			const checkDomain = domain + '/static/audio/zulip.ogg';
-			request(checkDomain, (error, response) => {
-				if (!error && response.statusCode !== 404) {
-					document.getElementById('main').innerHTML = 'Switch';
-					document.getElementById('urladded').innerHTML = 'Switched to ' + newDomain;
-					db.push('/domain', domain);
-					ipcRenderer.send('new-domain', domain);
-				} else {
-					document.getElementById('main').innerHTML = 'Switch';
-					document.getElementById('urladded').innerHTML = 'Not a valid Zulip Local Server.';
-				}
-			});
-		} else {
-			const domain = 'https://' + newDomain;
-			const checkDomain = domain + '/static/audio/zulip.ogg';
-			request(checkDomain, (error, response) => {
-				if (!error && response.statusCode !== 404) {
-					document.getElementById('main').innerHTML = 'Switch';
-					document.getElementById('urladded').innerHTML = 'Switched to ' + newDomain;
-					db.push('/domain', domain);
-					ipcRenderer.send('new-domain', domain);
-				} else if (error.toString().indexOf('Error: self signed certificate') >= 0) {
-					document.getElementById('main').innerHTML = 'Switch';
-					ipcRenderer.send('certificate-err', domain);
-					document.getElementById('urladded').innerHTML = 'Switched to ' + newDomain;
-				} else {
-					document.getElementById('main').innerHTML = 'Switch';
-					document.getElementById('urladded').innerHTML = 'Not a valid Zulip Server.';
-				}
-			});
-		}
-	}
-};

app/renderer/js/preload.js

@@ -1,69 +1,96 @@
 'use strict';
-const ipcRenderer = require('electron').ipcRenderer;
-const {webFrame} = require('electron');
-const {spellChecker} = require('./spellchecker');
 
-const _setImmediate = setImmediate;
-const _clearImmediate = clearImmediate;
-process.once('loaded', () => {
-	global.setImmediate = _setImmediate;
-	global.clearImmediate = _clearImmediate;
-});
+const { ipcRenderer, shell } = require('electron');
+const SetupSpellChecker = require('./spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const LinkUtil = require(__dirname + '/utils/link-util.js');
 
 // eslint-disable-next-line import/no-unassigned-import
-require('./domain');
-// eslint-disable-next-line import/no-unassigned-import
-require('./tray.js');
-// Calling Tray.js in renderer process everytime app window loads
+require('./notification');
 
-// Handle zooming functionality
-const zoomIn = () => {
-	webFrame.setZoomFactor(webFrame.getZoomFactor() + 0.1);
-};
+// Prevent drag and drop event in main process which prevents remote code executaion
+require(__dirname + '/shared/preventdrag.js');
 
-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', () => {
+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();
-});
+};
 
-ipcRenderer.on('shortcut', () => {
+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') {
+	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', () => {
-	// Init spellchecker
-	spellChecker();
+	// Get the default language of the server
+	const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, camelcase
+
+	if (serverLanguage) {
+		// Set spellcheker language
+		ConfigUtil.setConfigItem('spellcheckerLanguage', serverLanguage);
+		// Init spellchecker
+		SetupSpellChecker.init();
+	}
+
+	// redirect users to network troubleshooting page
+	const getRestartButton = document.querySelector('.restart_get_events_button');
+	if (getRestartButton) {
+		getRestartButton.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'reload-viewer');
+		});
+	}
+
+	// Open image attachment link in the lightbox instead of opening in the default browser
+	const { $, lightbox } = window;
+
+	$('#main_div').on('click', '.message_content p a', function (e) {
+		const url = $(this).attr('href');
+
+		if (LinkUtil.isImage(url)) {
+			const $img = $(this).parent().siblings('.message_inline_image').find('img');
+
+			// prevent the image link from opening in a new page.
+			e.preventDefault();
+			// prevent the message compose dialog from happening.
+			e.stopPropagation();
+
+			// Open image in the default browser if image preview is unavailable
+			if (!$img[0]) {
+				shell.openExternal(window.location.origin + url);
+			}
+			// Open image in lightbox
+			lightbox.open($img);
+		}
+	});
+});
+
+// Clean up spellchecker events after you navigate away from this page;
+// otherwise, you may experience errors
+window.addEventListener('beforeunload', () => {
+	SetupSpellChecker.unsubscribeSpellChecker();
+});
+
+// electron's globalShortcut can cause unexpected results
+// so adding the reload shortcut in the old-school way
+document.addEventListener('keydown', event => {
+	if (event.code === 'F5') {
+		ipcRenderer.send('forward-message', 'hard-reload');
+	}
 });

app/renderer/js/shared/preventdrag.js

@@ -0,0 +1,17 @@
+'use strict';
+
+// This is a security fix. Following function prevents drag and drop event in the app
+// so that attackers can't execute any remote code within the app
+// It doesn't affect the compose box so that users can still
+// use drag and drop event to share files etc
+
+const preventDragAndDrop = () => {
+	const preventEvents = ['dragover', 'drop'];
+	preventEvents.forEach(dragEvents => {
+		document.addEventListener(dragEvents, event => {
+			event.preventDefault();
+		});
+	});
+};
+
+preventDragAndDrop();

app/renderer/js/spellchecker.js

@@ -1,27 +1,62 @@
-const {SpellCheckHandler, ContextMenuListener, ContextMenuBuilder} = require('electron-spellchecker');
+'use strict';
 
-function spellChecker() {
-	// Implement spellcheck using electron api
-	window.spellCheckHandler = new SpellCheckHandler();
-	window.spellCheckHandler.attachToInput();
+const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
 
-	// Start off as US English
-	window.spellCheckHandler.switchLanguage('en-US');
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const Logger = require(__dirname + '/utils/logger-util.js');
 
-	const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
-	const contextMenuListener = new ContextMenuListener(info => {
-		contextMenuBuilder.showPopupMenu(info);
-	});
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
 
-	// Clean up events after you navigate away from this page;
-	// otherwise, you may experience errors
-	window.addEventListener('beforeunload', () => {
-	// eslint-disable-next-line no-undef
-		spellCheckHandler.unsubscribe();
-		contextMenuListener.unsubscribe();
-	});
+class SetupSpellChecker {
+	init() {
+		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
+			this.enableSpellChecker();
+		}
+		this.enableContextMenu();
+	}
+
+	enableSpellChecker() {
+		try {
+			this.SpellCheckHandler = new SpellCheckHandler();
+		} catch (err) {
+			logger.error(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 = {
-	spellChecker
-};
+module.exports = new SetupSpellChecker();

app/renderer/js/tray.js

@@ -5,10 +5,12 @@ const electron = require('electron');
 
 const {ipcRenderer, remote} = electron;
 
-const {Tray, Menu, nativeImage} = remote;
+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';
@@ -45,7 +47,8 @@ const config = {
 
 const renderCanvas = function (arg) {
 	config.unreadCount = arg;
-	return new Promise((resolve, reject) => {
+
+	return new Promise(resolve => {
 		const SIZE = config.size * config.pixelRatio;
 		const PADDING = SIZE * 0.05;
 		const CENTER = SIZE / 2;
@@ -83,8 +86,6 @@ const renderCanvas = function (arg) {
 			}
 
 			resolve(canvas);
-		} else {
-			reject(canvas);
 		}
 	});
 };
@@ -97,36 +98,48 @@ const renderNativeImage = function (arg) {
 	return Promise.resolve()
 		.then(() => renderCanvas(arg))
 		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
+			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() {
-			ipcRenderer.send('trayabout');
+			// We need to focus the main window first
+			ipcRenderer.send('focus-app');
+			sendAction('open-about');
 		}
 	},
 	{
 		type: 'separator'
 	},
 	{
-		label: 'Change Zulip server',
+		label: 'Focus',
 		click() {
-			ipcRenderer.send('traychangeserver');
+			ipcRenderer.send('focus-app');
 		}
 	},
 	{
 		type: 'separator'
 	},
 	{
-		label: 'Reload',
+		label: 'Settings',
 		click() {
-			remote.getCurrentWindow().reload();
-			window.tray.destroy();
+			ipcRenderer.send('focus-app');
+			sendAction('open-settings');
 		}
 	},
 	{
@@ -135,14 +148,24 @@ const createTray = function () {
 	{
 		label: 'Quit',
 		click() {
-			remote.getCurrentWindow().close();
+			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;
@@ -154,35 +177,53 @@ ipcRenderer.on('destroytray', event => {
 });
 
 ipcRenderer.on('tray', (event, arg) => {
-	if (arg === 0) {
-		unread = arg;
-		// Message Count // console.log("message count is zero.");
-		window.tray.setImage(iconPath());
-		window.tray.setToolTip('No unread messages');
-	} else {
-		unread = arg;
-		renderNativeImage(arg).then(image => {
-			window.tray.setImage(image);
-			window.tray.setToolTip(arg + ' unread messages');
-		});
+	if (!window.tray) {
+		return;
 	}
-});
-
-ipcRenderer.on('toggletray', event => {
-	if (event) {
-		if (window.tray) {
-			window.tray.destroy();
-			if (window.tray.isDestroyed()) {
-				window.tray = null;
-			}
+	// 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 {
-			createTray();
-			renderNativeImage(unread).then(image => {
+			unread = arg;
+			renderNativeImage(arg).then(image => {
 				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
+				window.tray.setToolTip(arg + ' unread messages');
 			});
 		}
 	}
 });
 
-createTray();
+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/certificate-util.js

@@ -0,0 +1,86 @@
+'use strict';
+
+const { app, dialog } = require('electron').remote;
+const fs = require('fs');
+const path = require('path');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');
+const { initSetUp } = require('./default-util');
+
+initSetUp();
+
+const logger = new Logger({
+	file: `certificate-util.log`,
+	timestamp: true
+});
+
+let instance = null;
+const certificatesDir = `${app.getPath('userData')}/certificates`;
+
+class CertificateUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		return instance;
+	}
+	getCertificate(server, defaultValue = null) {
+		this.reloadDB();
+		const value = this.db.getData('/')[server];
+		if (value === undefined) {
+			return defaultValue;
+		} else {
+			return value;
+		}
+	}
+	// Function to copy the certificate to userData folder
+	copyCertificate(server, location, fileName) {
+		let copied = false;
+		const filePath = `${certificatesDir}/${fileName}`;
+		try {
+			fs.copyFileSync(location, filePath);
+			copied = true;
+		} catch (err) {
+			dialog.showErrorBox(
+				'Error saving certificate',
+				'We encountered error while saving the certificate.'
+			);
+			logger.error('Error while copying the certificate to certificates folder.');
+			logger.error(err);
+		}
+		return copied;
+	}
+	setCertificate(server, fileName) {
+		const filePath = `${certificatesDir}/${fileName}`;
+		this.db.push(`/${server}`, filePath, true);
+		this.reloadDB();
+	}
+	removeCertificate(server) {
+		this.db.delete(`/${server}`);
+		this.reloadDB();
+	}
+	reloadDB() {
+		const settingsJsonPath = path.join(app.getPath('userData'), '/config/certificates.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 the certificate.'
+				);
+				logger.error('Error while JSON parsing certificates.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(settingsJsonPath, true, true);
+	}
+}
+
+module.exports = new CertificateUtil();

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

@@ -0,0 +1,89 @@
+'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;
+		}
+	}
+	// This function returns whether a key exists in the configuration file (settings.json)
+	isConfigItemExists(key) {
+		this.reloadDB();
+		const value = this.db.getData('/')[key];
+		return (value !== undefined);
+	}
+
+	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'), '/config/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 an error while saving the settings.'
+				);
+				logger.error('Error while JSON parsing settings.json: ');
+				logger.error(err);
+				logger.reportSentry(err);
+			}
+		}
+		this.db = new JsonDB(settingsJsonPath, true, true);
+	}
+}
+
+module.exports = new ConfigUtil();

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

@@ -0,0 +1,78 @@
+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 certificatesDir = `${zulipDir}/certificates/`;
+const configDir = `${zulipDir}/config/`;
+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);
+		}
+
+		if (!fs.existsSync(certificatesDir)) {
+			fs.mkdirSync(certificatesDir);
+		}
+
+		// Migrate config files from app data folder to config folder inside app
+		// data folder. This will be done once when a user updates to the new version.
+		if (!fs.existsSync(configDir)) {
+			fs.mkdirSync(configDir);
+			const domainJson = `${zulipDir}/domain.json`;
+			const certificatesJson = `${zulipDir}/certificates.json`;
+			const settingsJson = `${zulipDir}/settings.json`;
+			const updatesJson = `${zulipDir}/updates.json`;
+			const windowStateJson = `${zulipDir}/window-state.json`;
+			const configData = [
+				{
+					path: domainJson,
+					fileName: `domain.json`
+				},
+				{
+					path: certificatesJson,
+					fileName: `certificates.json`
+				},
+				{
+					path: settingsJson,
+					fileName: `settings.json`
+				},
+				{
+					path: updatesJson,
+					fileName: `updates.json`
+				}
+			];
+			configData.forEach(data => {
+				if (fs.existsSync(data.path)) {
+					fs.copyFileSync(data.path, configDir + data.fileName);
+					fs.unlinkSync(data.path);
+				}
+			});
+			// window-state.json is only deleted not moved, as the electron-window-state
+			// package will recreate the file in the config folder.
+			if (fs.existsSync(windowStateJson)) {
+				fs.unlinkSync(windowStateJson);
+			}
+		}
+
+		setupCompleted = true;
+	}
+};
+
+module.exports = {
+	initSetUp
+};

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

@@ -0,0 +1,41 @@
+'use strict';
+
+const ConfigUtil = require(__dirname + '/config-util.js');
+
+function toggle() {
+	const dnd = !ConfigUtil.getConfigItem('dnd', false);
+	const dndSettingList = ['showNotification', 'silent'];
+	if (process.platform === 'win32') {
+		dndSettingList.push('flashTaskbarOnMessage');
+	}
+
+	let newSettings;
+	if (dnd) {
+		const oldSettings = {};
+		newSettings = {};
+
+		// Iterate through the dndSettingList.
+		for (const settingName of dndSettingList) {
+			// Store the current value of setting.
+			oldSettings[settingName] = ConfigUtil.getConfigItem(settingName);
+			// New value of setting.
+			newSettings[settingName] = (settingName === 'silent');
+		}
+
+		// Store old value in oldSettings.
+		ConfigUtil.setConfigItem('dndPreviousSettings', oldSettings);
+	} else {
+		newSettings = ConfigUtil.getConfigItem('dndPreviousSettings');
+	}
+
+	for (const settingName of dndSettingList) {
+		ConfigUtil.setConfigItem(settingName, newSettings[settingName]);
+	}
+
+	ConfigUtil.setConfigItem('dnd', dnd);
+	return {dnd, newSettings};
+}
+
+module.exports = {
+	toggle
+};

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

@@ -0,0 +1,309 @@
+'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 escape = require('escape-html');
+
+const Logger = require('./logger-util');
+
+const CertificateUtil = require(__dirname + '/certificate-util.js');
+
+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 certificate = CertificateUtil.getCertificate(encodeURIComponent(domain));
+		let certificateLocation = '';
+
+		if (certificate) {
+			// To handle case where certificate has been moved from the location in certificates.json
+			try {
+				certificateLocation = fs.readFileSync(certificate);
+			} catch (err) {
+				logger.warn('Error while trying to get certificate: ' + err);
+			}
+		}
+		// If certificate for the domain exists add it as a ca key in the request's parameter else consider only domain as the parameter for request
+		const checkDomain = (certificateLocation) ? ({url: domain + '/static/audio/zulip.ogg', ca: certificateLocation}) : domain + '/static/audio/zulip.ogg';
+
+		const serverConf = {
+			icon: defaultIconUrl,
+			url: domain,
+			alias: domain
+		};
+
+		return new Promise((resolve, reject) => {
+			request(checkDomain, (error, response) => {
+				// If the domain contains following strings we just bypass the server
+				const whitelistDomains = [
+					'zulipdev.org'
+				];
+
+				// make sure that error is an error or string not undefined
+				// so validation does not throw error.
+				error = error || '';
+
+				const certsError = error.toString().includes('certificate');
+				if (!error && response.statusCode < 400) {
+					// Correct
+					this.getServerSettings(domain).then(serverSettings => {
+						resolve(serverSettings);
+					}, () => {
+						resolve(serverConf);
+					});
+				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
+					if (silent) {
+						this.getServerSettings(domain).then(serverSettings => {
+							resolve(serverSettings);
+						}, () => {
+							resolve(serverConf);
+						});
+					} else {
+						// Report error to sentry to get idea of possible certificate errors
+						// users get when adding the servers
+						logger.reportSentry(new Error(error));
+						const certErrorMessage = `Do you trust certificate from ${domain}? \n ${error}`;
+						const certErrorDetail = `The organization 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.
+						\nIf you have a valid certificate please add it from Settings>Organizations and try to add the organization again.
+						\nUnless you have a good reason to believe otherwise, you should not proceed.
+						\nYou can click here if you'd like to proceed with the connection.`;
+
+						dialog.showMessageBox({
+							type: 'warning',
+							buttons: ['Yes', 'No'],
+							defaultId: 1,
+							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 \
+					\n (4) the server has a valid certificate, you can add custom certificates in Settings>Organizations`;
+					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: escape(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 => {
+						logger.log('Could not get server icon.');
+						logger.log(err);
+						logger.reportSentry(err);
+						resolve(defaultIconUrl);
+					});
+					response.pipe(file).on('finish', () => {
+						resolve(filePath);
+					});
+				}).on('error', err => {
+					logger.log('Could not get server icon.');
+					logger.log(err);
+					logger.reportSentry(err);
+					resolve(defaultIconUrl);
+				});
+			} catch (err) {
+				logger.log('Could not get server icon.');
+				logger.log(err);
+				logger.reportSentry(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'), 'config/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);
+				logger.reportSentry(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,39 @@
+'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);
+
+		const sameDomainUrl = (currentDomain === newDomain || newUrl === currentUrl + '/');
+		const isUploadsUrl = newUrl.includes(currentUrl + '/user_uploads/');
+		const isInternalUrl = newUrl.includes('/#narrow') || isUploadsUrl;
+
+		return {
+			isInternalUrl: sameDomainUrl && isInternalUrl,
+			isUploadsUrl
+		};
+	}
+
+	isImage(url) {
+		// test for images extension as well as urls like .png?s=100
+		const isImageUrl = /\.(bmp|gif|jpg|jpeg|png|webp)\?*.*$/i;
+		return isImageUrl.test(url);
+	}
+}
+
+module.exports = new LinkUtil();

app/renderer/js/utils/linux-update-util.js

@@ -0,0 +1,74 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const remote =
+	process.type === 'renderer' ? require('electron').remote : require('electron');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: 'linux-update-util.log',
+	timestamp: true
+});
+
+/* To make the util runnable in both main and renderer process */
+const { dialog, app } = remote;
+
+let instance = null;
+
+class LinuxUpdateUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		return instance;
+	}
+
+	getUpdateItem(key, defaultValue = null) {
+		this.reloadDB();
+		const value = this.db.getData('/')[key];
+		if (value === undefined) {
+			this.setUpdateItem(key, defaultValue);
+			return defaultValue;
+		} else {
+			return value;
+		}
+	}
+
+	setUpdateItem(key, value) {
+		this.db.push(`/${key}`, value, true);
+		this.reloadDB();
+	}
+
+	removeUpdateItem(key) {
+		this.db.delete(`/${key}`);
+		this.reloadDB();
+	}
+
+	reloadDB() {
+		const linuxUpdateJsonPath = path.join(app.getPath('userData'), '/config/updates.json');
+		try {
+			const file = fs.readFileSync(linuxUpdateJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(linuxUpdateJsonPath)) {
+				fs.unlinkSync(linuxUpdateJsonPath);
+				dialog.showErrorBox(
+					'Error saving update notifications.',
+					'We encountered an error while saving the update notifications.'
+				);
+				logger.error('Error while JSON parsing updates.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(linuxUpdateJsonPath, true, true);
+	}
+}
+
+module.exports = new LinuxUpdateUtil();

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

@@ -0,0 +1,93 @@
+const NodeConsole = require('console').Console;
+const fs = require('fs');
+const isDev = require('electron-is-dev');
+const { initSetUp } = require('./default-util');
+const { sentryInit, captureException } = require('./sentry-util');
+
+initSetUp();
+sentryInit();
+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;
+	}
+
+	reportSentry(err) {
+		captureException(err);
+	}
+}
+
+module.exports = Logger;

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

@@ -0,0 +1,96 @@
+'use strict';
+
+const ConfigUtil = require('./config-util.js');
+
+let instance = null;
+
+class ProxyUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		return instance;
+	}
+
+	resolveSystemProxy(mainWindow) {
+		const page = mainWindow.webContents;
+		const ses = page.session;
+		const resolveProxyUrl = 'www.google.com';
+
+		// Check HTTP Proxy
+		const httpProxy = new Promise(resolve => {
+			ses.resolveProxy('http://' + resolveProxyUrl, proxy => {
+				let httpString = '';
+				if (proxy !== 'DIRECT') {
+					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+					// for all other HTTP or direct url:port both uses PROXY
+					if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
+						httpString = 'http=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(httpString);
+			});
+		});
+		// Check HTTPS Proxy
+		const httpsProxy = new Promise(resolve => {
+			ses.resolveProxy('https://' + resolveProxyUrl, proxy => {
+				let httpsString = '';
+				if (proxy !== 'DIRECT' || proxy.includes('HTTPS')) {
+					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+					// for all other HTTP or direct url:port both uses PROXY
+					if (proxy.includes('PROXY' || proxy.includes('HTTPS'))) {
+						httpsString += 'https=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(httpsString);
+			});
+		});
+
+		// Check FTP Proxy
+		const ftpProxy = new Promise(resolve => {
+			ses.resolveProxy('ftp://' + resolveProxyUrl, proxy => {
+				let ftpString = '';
+				if (proxy !== 'DIRECT') {
+					if (proxy.includes('PROXY')) {
+						ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(ftpString);
+			});
+		});
+
+		// Check SOCKS Proxy
+		const socksProxy = new Promise(resolve => {
+			ses.resolveProxy('socks4://' + resolveProxyUrl, proxy => {
+				let socksString = '';
+				if (proxy !== 'DIRECT') {
+					if (proxy.includes('SOCKS5')) {
+						socksString += 'socks=' + proxy.split('SOCKS5')[1] + ';';
+					} else if (proxy.includes('SOCKS4')) {
+						socksString += 'socks=' + proxy.split('SOCKS4')[1] + ';';
+					} else if (proxy.includes('PROXY')) {
+						socksString += 'socks=' + proxy.split('PROXY')[1] + ';';
+					}
+				}
+				resolve(socksString);
+			});
+		});
+
+		Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]).then(values => {
+			let proxyString = '';
+			values.forEach(proxy => {
+				proxyString += proxy;
+			});
+			ConfigUtil.setConfigItem('systemProxyRules', proxyString);
+			const useSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+			if (useSystemProxy) {
+				ConfigUtil.setConfigItem('proxyRules', proxyString);
+			}
+		});
+	}
+}
+
+module.exports = new ProxyUtil();

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

@@ -0,0 +1,60 @@
+const isOnline = require('is-online');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
+
+class ReconnectUtil {
+	constructor(serverManagerView) {
+		this.serverManagerView = serverManagerView;
+		this.alreadyReloaded = false;
+	}
+
+	clearState() {
+		this.alreadyReloaded = false;
+	}
+
+	pollInternetAndReload() {
+		const pollInterval = setInterval(() => {
+			this._checkAndReload()
+				.then(status => {
+					if (status) {
+						this.alreadyReloaded = true;
+						clearInterval(pollInterval);
+					}
+				});
+		}, 1500);
+	}
+
+	_checkAndReload() {
+		return new Promise(resolve => {
+			if (!this.alreadyReloaded) { // eslint-disable-line no-negated-condition
+				isOnline()
+					.then(online => {
+						if (online) {
+							if (!this.alreadyReloaded) {
+								this.serverManagerView.reloadView();
+							}
+							logger.log('You\'re back online.');
+							return resolve(true);
+						}
+
+						logger.log('There is no internet connection, try checking network cables, modem and router.');
+						const errMsgHolder = document.querySelector('#description');
+						if (errMsgHolder) {
+							errMsgHolder.innerHTML = `
+										<div>You internet connection does't seem to work properly!</div>
+										</div>Verify that it works and then click try again.</div>`;
+						}
+						return resolve(false);
+					});
+			} else {
+				return resolve(true);
+			}
+		});
+	}
+}
+
+module.exports = ReconnectUtil;

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

@@ -0,0 +1,16 @@
+const { init, captureException } = require('@sentry/electron');
+const isDev = require('electron-is-dev');
+
+const sentryInit = () => {
+	if (!isDev) {
+		init({
+			dsn: 'SENTRY_DSN',
+			sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
+		});
+	}
+};
+
+module.exports = {
+	sentryInit,
+	captureException
+};

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,56 @@
+<!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="dnd-action">
+        <i class="material-icons md-48">notifications</i>
+        <span id="dnd-tooltip" style="display:none">Do Not Disturb</span>
+      </div>
+      <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 disable" id="back-action">
+        <i class="material-icons md-48">arrow_back</i>
+        <span id="back-tooltip" style="display:none">Go Back</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>
+
+  <div id="feedback-modal">
+    <send-feedback></send-feedback>
+  </div>
+</body>
+<script src="js/main.js"></script>
+<script>require('./js/shared/preventdrag.js')</script>
+</html>

app/renderer/network.html

@@ -0,0 +1,22 @@
+<!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>
+  <script>require('./js/shared/preventdrag.js')</script>
+</html>

app/renderer/pref.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/pref.css">
-	</head>
-	<body>
-		<div class="close" id="close-button">Close</div>
-		<div class="form">
-			<form onsubmit="prefDomain(); return false">
-				<input id="url" type="text" placeholder="Server URL">
-				<button type="submit" id="main" value="Submit">
-				Switch</button>
-			</form>
-			<p id="urladded"><p>
-			</div>
-			<script src="js/pref.js"></script>
-		</body>
-	</html>

app/renderer/preference.html

@@ -0,0 +1,17 @@
+<!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>
+  <script>require('./js/shared/preventdrag.js')</script>
+</html>

app/translations/bg.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "За Зулип",
+	"Actual Size": "Реален размер",
+	"Back": "обратно",
+	"Close": "Близо",
+	"Copy": "копие",
+	"Cut": "Разрез",
+	"Delete": "Изтрий",
+	"Desktop App Settings": "Настройки за настолни приложения",
+	"Edit": "редактиране",
+	"File": "досие",
+	"Forward": "напред",
+	"Hard Reload": "Трудно презареждане",
+	"Help": "Помогне",
+	"History": "история",
+	"Keyboard Shortcuts": "Комбинация от клавиши",
+	"Log Out": "Излез от профила си",
+	"Minimize": "Минимизиране",
+	"Paste": "паста",
+	"Paste and Match Style": "Поставяне и съвпадение на стила",
+	"Quit": "напускам",
+	"Redo": "ремонтирам",
+	"Reload": "Презареди",
+	"Report an issue...": "Подаване на сигнал за проблем ...",
+	"Reset App Settings": "Нулирайте настройките на приложението",
+	"Select All": "Избери всички",
+	"Show App Logs": "Показване на регистрационните файлове на приложения",
+	"Toggle DevTools for Active Tab": "Превключете DevTools за активен раздел",
+	"Toggle DevTools for Zulip App": "Превключете DevTools за Zulip App",
+	"Toggle Full Screen": "Превключване на цял екран",
+	"Toggle Sidebar": "Превключване на страничната лента",
+	"Toggle Tray Icon": "Превключване на иконата на тавата",
+	"Undo": "премахвам",
+	"View": "изглед",
+	"Window": "прозорец",
+	"Zoom In": "Увеличавам",
+	"Zoom Out": "Отдалечавам",
+	"Zulip Help": "Помощ за Zulip"
+}

app/translations/cs.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "O společnosti Zulip",
+	"Actual Size": "Aktuální velikost",
+	"Back": "Zadní",
+	"Close": "Zavřít",
+	"Copy": "kopírovat",
+	"Cut": "Střih",
+	"Delete": "Vymazat",
+	"Desktop App Settings": "Nastavení aplikace Desktop",
+	"Edit": "Upravit",
+	"File": "Soubor",
+	"Forward": "Vpřed",
+	"Hard Reload": "Hard Reload",
+	"Help": "Pomoc",
+	"History": "Dějiny",
+	"Keyboard Shortcuts": "Klávesové zkratky",
+	"Log Out": "Odhlásit se",
+	"Minimize": "Minimalizujte",
+	"Paste": "Vložit",
+	"Paste and Match Style": "Vložit a přizpůsobit styl",
+	"Quit": "Přestat",
+	"Redo": "Předělat",
+	"Reload": "Znovu načíst",
+	"Report an issue...": "Nahlásit problém...",
+	"Reset App Settings": "Obnovit nastavení aplikace",
+	"Select All": "Vybrat vše",
+	"Show App Logs": "Zobrazit protokoly aplikace",
+	"Toggle DevTools for Active Tab": "Přepínač DevTools pro aktivní kartu",
+	"Toggle DevTools for Zulip App": "Přepnout nástroj DevTools pro aplikaci Zulip App",
+	"Toggle Full Screen": "Přepnout na celou obrazovku",
+	"Toggle Sidebar": "Přepnout postranní panel",
+	"Toggle Tray Icon": "Přepnout ikonu zásobníku",
+	"Undo": "vrátit",
+	"View": "Pohled",
+	"Window": "Okno",
+	"Zoom In": "Přiblížit",
+	"Zoom Out": "Oddálit",
+	"Zulip Help": "Zulip Nápověda"
+}

app/translations/de.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Über Zulip",
+	"Actual Size": "Tatsächliche Größe",
+	"Back": "Zurück",
+	"Close": "Schließen",
+	"Copy": "Kopieren",
+	"Cut": "Schnitt",
+	"Delete": "Löschen",
+	"Desktop App Settings": "Desktop App Einstellungen",
+	"Edit": "Bearbeiten",
+	"File": "Datei",
+	"Forward": "Nach vorne",
+	"Hard Reload": "Hard Reload",
+	"Help": "Hilfe",
+	"History": "Geschichte",
+	"Keyboard Shortcuts": "Tastatürkürzel",
+	"Log Out": "Ausloggen",
+	"Minimize": "Minimieren",
+	"Paste": "Einfügen",
+	"Paste and Match Style": "Einfügen und Anpassen von Stilen",
+	"Quit": "Verlassen",
+	"Redo": "Wiederholen",
+	"Reload": "Neu laden",
+	"Report an issue...": "Ein Problem melden...",
+	"Reset App Settings": "App-Einstellungen zurücksetzen",
+	"Select All": "Wählen Sie Alle",
+	"Show App Logs": "App-Logs anzeigen",
+	"Toggle DevTools for Active Tab": "Schalten Sie DevTools für Active Tab ein",
+	"Toggle DevTools for Zulip App": "Umschalt DevTools für Zulip App",
+	"Toggle Full Screen": "Vollbild umschalten",
+	"Toggle Sidebar": "Toggle Seitenleiste",
+	"Toggle Tray Icon": "Toggle Tray-Symbol",
+	"Undo": "Rückgängig machen",
+	"View": "Aussicht",
+	"Window": "Fenster",
+	"Zoom In": "Hineinzoomen",
+	"Zoom Out": "Rauszoomen",
+	"Zulip Help": "Zulip Hilfe"
+}

app/translations/en.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "About Zulip",
+	"Actual Size": "Actual Size",
+	"Back": "Back",
+	"Close": "Close",
+	"Copy": "Copy",
+	"Cut": "Cut",
+	"Delete": "Delete",
+	"Desktop App Settings": "Desktop App Settings",
+	"Edit": "Edit",
+	"File": "File",
+	"Forward": "Forward",
+	"Hard Reload": "Hard Reload",
+	"Help": "Help",
+	"History": "History",
+	"Keyboard Shortcuts": "Keyboard Shortcuts",
+	"Log Out": "Log Out",
+	"Minimize": "Minimize",
+	"Paste": "Paste",
+	"Paste and Match Style": "Paste and Match Style",
+	"Quit": "Quit",
+	"Redo": "Redo",
+	"Reload": "Reload",
+	"Report an issue...": "Report an issue...",
+	"Reset App Settings": "Reset App Settings",
+	"Select All": "Select All",
+	"Show App Logs": "Show App Logs",
+	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
+	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
+	"Toggle Full Screen": "Toggle Full Screen",
+	"Toggle Sidebar": "Toggle Sidebar",
+	"Toggle Tray Icon": "Toggle Tray Icon",
+	"Undo": "Undo",
+	"View": "View",
+	"Window": "Window",
+	"Zoom In": "Zoom In",
+	"Zoom Out": "Zoom Out",
+	"Zulip Help": "Zulip Help"
+}

app/translations/es.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Acerca de Zulip",
+	"Actual Size": "Tamaño real",
+	"Back": "Espalda",
+	"Close": "Cerca",
+	"Copy": "Dupdo",
+	"Cut": "Cortar",
+	"Delete": "Borrar",
+	"Desktop App Settings": "Configuración de la aplicación de escritorio",
+	"Edit": "Editar",
+	"File": "Archivo",
+	"Forward": "Adelante",
+	"Hard Reload": "Recargar duro",
+	"Help": "Ayuda",
+	"History": "Historia",
+	"Keyboard Shortcuts": "Atajos de teclado",
+	"Log Out": "Cerrar sesión",
+	"Minimize": "Minimizar",
+	"Paste": "Pegar",
+	"Paste and Match Style": "Pegar y combinar estilo",
+	"Quit": "Dejar",
+	"Redo": "Rehacer",
+	"Reload": "Recargar",
+	"Report an issue...": "Reportar un problema...",
+	"Reset App Settings": "Restablecer configuraciones",
+	"Select All": "Seleccionar todo",
+	"Show App Logs": "Mostrar registros de aplicaciones",
+	"Toggle DevTools for Active Tab": "Alternar DevTools para Active Tab",
+	"Toggle DevTools for Zulip App": "Alternar DevTools para la aplicación Zulip",
+	"Toggle Full Screen": "Alternar pantalla completa",
+	"Toggle Sidebar": "Alternar barra lateral",
+	"Toggle Tray Icon": "Alternar el icono de la bandeja",
+	"Undo": "Deshacer",
+	"View": "Ver",
+	"Window": "Ventana",
+	"Zoom In": "Acercarse",
+	"Zoom Out": "Disminuir el zoom",
+	"Zulip Help": "Ayuda de Zulip"
+}

app/translations/fr.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "À propos de Zulip",
+	"Actual Size": "Taille actuelle",
+	"Back": "Arrière",
+	"Close": "Fermer",
+	"Copy": "Copie",
+	"Cut": "Couper",
+	"Delete": "Effacer",
+	"Desktop App Settings": "Paramètres de l'application de bureau",
+	"Edit": "modifier",
+	"File": "Fichier",
+	"Forward": "Vers l'avant",
+	"Hard Reload": "Rechargement dur",
+	"Help": "Aidez-moi",
+	"History": "Histoire",
+	"Keyboard Shortcuts": "Raccourcis clavier",
+	"Log Out": "Connectez - Out",
+	"Minimize": "Minimiser",
+	"Paste": "Coller",
+	"Paste and Match Style": "Coller et assortir le style",
+	"Quit": "Quitter",
+	"Redo": "Refaire",
+	"Reload": "Recharger",
+	"Report an issue...": "Signaler un problème...",
+	"Reset App Settings": "Réinitialiser les paramètres",
+	"Select All": "Tout sélectionner",
+	"Show App Logs": "Afficher les journaux d'applications",
+	"Toggle DevTools for Active Tab": "Basculer DevTools pour l'onglet actif",
+	"Toggle DevTools for Zulip App": "Basculer DevTools pour l'application Zulip",
+	"Toggle Full Screen": "Basculer en plein écran",
+	"Toggle Sidebar": "Basculer la barre latérale",
+	"Toggle Tray Icon": "Toggle Tray Icône",
+	"Undo": "annuler",
+	"View": "Vue",
+	"Window": "Fenêtre",
+	"Zoom In": "Agrandir",
+	"Zoom Out": "Dézoomer",
+	"Zulip Help": "Aide Zulip"
+}

app/translations/hi.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Zulip के बारे में",
+	"Actual Size": "वास्तविक आकार",
+	"Back": "वापस",
+	"Close": "बंद करे",
+	"Copy": "प्रतिलिपि",
+	"Cut": "कट गया",
+	"Delete": "हटाना",
+	"Desktop App Settings": "डेस्कटॉप ऐप सेटिंग्स",
+	"Edit": "संपादित करें",
+	"File": "फ़ाइल",
+	"Forward": "आगे",
+	"Hard Reload": "कठिन पुन: लोड करें",
+	"Help": "मदद",
+	"History": "इतिहास",
+	"Keyboard Shortcuts": "कुंजीपटल अल्प मार्ग",
+	"Log Out": "लोग आउट",
+	"Minimize": "छोटा करना",
+	"Paste": "चिपकाएं",
+	"Paste and Match Style": "चिपकाएं और शैली का मिलान करें",
+	"Quit": "छोड़ना",
+	"Redo": "फिर से करना",
+	"Reload": "सीमा से अधिक लादना",
+	"Report an issue...": "मामले की रिपोर्ट करें...",
+	"Reset App Settings": "ऐप सेटिंग्स रीसेट करें",
+	"Select All": "सभी का चयन करे",
+	"Show App Logs": "ऐप लॉग दिखाएं",
+	"Toggle DevTools for Active Tab": "सक्रिय टैब के लिए DevTools टॉगल करें",
+	"Toggle DevTools for Zulip App": "Zulip ऐप के लिए DevTools टॉगल करें",
+	"Toggle Full Screen": "पूर्णस्क्रीन चालू करें",
+	"Toggle Sidebar": "साइडबार टॉगल करें",
+	"Toggle Tray Icon": "ट्रे आइकन टॉगल करें",
+	"Undo": "पूर्ववत करें",
+	"View": "राय",
+	"Window": "खिड़की",
+	"Zoom In": "ज़ूम इन",
+	"Zoom Out": "ज़ूम आउट",
+	"Zulip Help": "Zulip सहायता"
+}

app/translations/hu.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "A Zulipról",
+	"Actual Size": "Valódi méret",
+	"Back": "Hát",
+	"Close": "Bezárás",
+	"Copy": "Másolat",
+	"Cut": "Vágott",
+	"Delete": "Töröl",
+	"Desktop App Settings": "Asztali alkalmazások beállításai",
+	"Edit": "szerkesztése",
+	"File": "fájl",
+	"Forward": "Előre",
+	"Hard Reload": "Hard Reload",
+	"Help": "Segítség",
+	"History": "Történelem",
+	"Keyboard Shortcuts": "Gyorsbillentyűket",
+	"Log Out": "Kijelentkezés",
+	"Minimize": "Kis méret",
+	"Paste": "Paszta",
+	"Paste and Match Style": "Beillesztés és stílusok illesztése",
+	"Quit": "quit",
+	"Redo": "Újra",
+	"Reload": "Reload",
+	"Report an issue...": "Hibajelentés ...",
+	"Reset App Settings": "Az alkalmazás beállításainak visszaállítása",
+	"Select All": "Mindet kiválaszt",
+	"Show App Logs": "Alkalmazásnaplók megjelenítése",
+	"Toggle DevTools for Active Tab": "A DevTools aktiválása az Aktív laphoz",
+	"Toggle DevTools for Zulip App": "Kapcsolja a DevTools-ot a Zulip App-hoz",
+	"Toggle Full Screen": "Teljes képernyőre váltás",
+	"Toggle Sidebar": "Oldalsáv átkapcsolása",
+	"Toggle Tray Icon": "Tálcaikon átkapcsolása",
+	"Undo": "kibont",
+	"View": "Kilátás",
+	"Window": "Ablak",
+	"Zoom In": "Nagyítás",
+	"Zoom Out": "Kicsinyítés",
+	"Zulip Help": "Zulip Súgó"
+}

app/translations/id.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Tentang Zulip",
+	"Actual Size": "Ukuran sebenarnya",
+	"Back": "Kembali",
+	"Close": "Dekat",
+	"Copy": "Salinan",
+	"Cut": "Memotong",
+	"Delete": "Menghapus",
+	"Desktop App Settings": "Setelan Aplikasi Desktop",
+	"Edit": "Edit",
+	"File": "Mengajukan",
+	"Forward": "Meneruskan",
+	"Hard Reload": "Hard Reload",
+	"Help": "Membantu",
+	"History": "Sejarah",
+	"Keyboard Shortcuts": "Cara pintas keyboard",
+	"Log Out": "Keluar",
+	"Minimize": "Memperkecil",
+	"Paste": "Pasta",
+	"Paste and Match Style": "Tempel dan Cocokkan Gaya",
+	"Quit": "Berhenti",
+	"Redo": "Mengulangi",
+	"Reload": "Reload",
+	"Report an issue...": "Laporkan masalah ...",
+	"Reset App Settings": "Setel ulang Pengaturan Aplikasi",
+	"Select All": "Pilih Semua",
+	"Show App Logs": "Tampilkan log aplikasi",
+	"Toggle DevTools for Active Tab": "Toggle DevTools untuk Tab Aktif",
+	"Toggle DevTools for Zulip App": "Toggle DevTools untuk Aplikasi Zulip",
+	"Toggle Full Screen": "Toggle Full Screen",
+	"Toggle Sidebar": "Toggle Sidebar",
+	"Toggle Tray Icon": "Toggle Tray Icon",
+	"Undo": "Membuka",
+	"View": "Melihat",
+	"Window": "Jendela",
+	"Zoom In": "Perbesar",
+	"Zoom Out": "Zoom Out",
+	"Zulip Help": "Zulip Help"
+}

app/translations/ja.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "チューリップについて",
+	"Actual Size": "実際のサイズ",
+	"Back": "バック",
+	"Close": "閉じる",
+	"Copy": "コピー",
+	"Cut": "カット",
+	"Delete": "削除",
+	"Desktop App Settings": "デスクトップアプリケーションの設定",
+	"Edit": "編集",
+	"File": "ファイル",
+	"Forward": "フォワード",
+	"Hard Reload": "ハードリロード",
+	"Help": "助けて",
+	"History": "歴史",
+	"Keyboard Shortcuts": "キーボードショートカット",
+	"Log Out": "ログアウト",
+	"Minimize": "最小化する",
+	"Paste": "ペースト",
+	"Paste and Match Style": "スタイルの貼り付けと一致",
+	"Quit": "終了する",
+	"Redo": "やり直し",
+	"Reload": "リロード",
+	"Report an issue...": "問題を報告する...",
+	"Reset App Settings": "アプリの設定をリセットする",
+	"Select All": "すべて選択",
+	"Show App Logs": "アプリケーションログを表示する",
+	"Toggle DevTools for Active Tab": "DevTools for Activeタブを切り替える",
+	"Toggle DevTools for Zulip App": "Zulip AppのDevToolsの切り替え",
+	"Toggle Full Screen": "フルスクリーン切り替え",
+	"Toggle Sidebar": "サイドバーの切り替え",
+	"Toggle Tray Icon": "トレイアイコンを切り替える",
+	"Undo": "元に戻す",
+	"View": "ビュー",
+	"Window": "窓",
+	"Zoom In": "ズームイン",
+	"Zoom Out": "ズームアウトする",
+	"Zulip Help": "チューリップヘルプ"
+}

app/translations/ko.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "튤립 소개",
+	"Actual Size": "실제 크기",
+	"Back": "뒤로",
+	"Close": "닫기",
+	"Copy": "부",
+	"Cut": "절단",
+	"Delete": "지우다",
+	"Desktop App Settings": "데스크톱 앱 설정",
+	"Edit": "편집하다",
+	"File": "파일",
+	"Forward": "앞으로",
+	"Hard Reload": "하드 다시로드",
+	"Help": "도움",
+	"History": "역사",
+	"Keyboard Shortcuts": "키보드 단축키",
+	"Log Out": "로그 아웃",
+	"Minimize": "최소화",
+	"Paste": "풀",
+	"Paste and Match Style": "붙여 넣기 및 스타일 일치",
+	"Quit": "떠나다",
+	"Redo": "다시 하다",
+	"Reload": "다시로드",
+	"Report an issue...": "문제 신고 ...",
+	"Reset App Settings": "앱 설정 재설정",
+	"Select All": "모두 선택",
+	"Show App Logs": "앱 로그 표시",
+	"Toggle DevTools for Active Tab": "DevTools for Active Tab 토글",
+	"Toggle DevTools for Zulip App": "Zulip App 용 DevTools 토글",
+	"Toggle Full Screen": "전체 화면 토글",
+	"Toggle Sidebar": "사이드 바 전환",
+	"Toggle Tray Icon": "트레이 아이콘 토글",
+	"Undo": "끄르다",
+	"View": "전망",
+	"Window": "창문",
+	"Zoom In": "확대",
+	"Zoom Out": "축소",
+	"Zulip Help": "튤립 도움말"
+}

app/translations/ml.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "സുലിപ്",
+	"Actual Size": "യഥാർത്ഥ വലുപ്പം",
+	"Back": "തിരികെ",
+	"Close": "അടയ്ക്കുക",
+	"Copy": "പകർത്തുക",
+	"Cut": "മുറിക്കുക",
+	"Delete": "ഇല്ലാതാക്കുക",
+	"Desktop App Settings": "ഡെസ്ക്ടോപ്പ് അപ്ലിക്കേഷൻ ക്രമീകരണങ്ങൾ",
+	"Edit": "എഡിറ്റുചെയ്യുക",
+	"File": "ഫയൽ",
+	"Forward": "മുന്നോട്ട്",
+	"Hard Reload": "ഹാർഡ് റീലോഡ്",
+	"Help": "സഹായിക്കൂ",
+	"History": "ചരിത്രം",
+	"Keyboard Shortcuts": "കീബോർഡ് കുറുക്കുവഴികൾ",
+	"Log Out": "ലോഗ് ഔട്ട്",
+	"Minimize": "ചെറുതാക്കുക",
+	"Paste": "പേസ്റ്റ്",
+	"Paste and Match Style": "ശൈലി ഒട്ടിക്കുകയും പൊരുത്തപ്പെടുത്തുകയും ചെയ്യുക",
+	"Quit": "പുറത്തുകടക്കുക",
+	"Redo": "വീണ്ടും ചെയ്യുക",
+	"Reload": "വീണ്ടും ലോഡുചെയ്യുക",
+	"Report an issue...": "ഒരു പ്രശ്നം റിപ്പോർട്ടുചെയ്യുക ...",
+	"Reset App Settings": "അപ്ലിക്കേഷൻ ക്രമീകരണങ്ങൾ പുനഃസജ്ജമാക്കുക",
+	"Select All": "എല്ലാം തിരഞ്ഞെടുക്കുക",
+	"Show App Logs": "അപ്ലിക്കേഷൻ ലോഗുകൾ കാണിക്കുക",
+	"Toggle DevTools for Active Tab": "സജീവ ടാബിനായി DevTools ടോഗിൾ ചെയ്യുക",
+	"Toggle DevTools for Zulip App": "സുലിപ്പ് ആപ്ലിക്കേഷനായി DevTools ടോഗിൾ ചെയ്യുക",
+	"Toggle Full Screen": "പൂർണ്ണ സ്ക്രീൻ ടോഗിൾ ചെയ്യുക",
+	"Toggle Sidebar": "സൈഡ്ബാർ ടോഗിൾ ചെയ്യുക",
+	"Toggle Tray Icon": "ട്രേ ഐക്കൺ ടോഗിൾ ചെയ്യുക",
+	"Undo": "പഴയപടിയാക്കുക",
+	"View": "കാണുക",
+	"Window": "ജാലകം",
+	"Zoom In": "വലുതാക്കുക",
+	"Zoom Out": "സൂം ഔട്ട്",
+	"Zulip Help": "സുലിപ്പ് സഹായം"
+}

app/translations/nl.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Over Zulip",
+	"Actual Size": "Daadwerkelijke grootte",
+	"Back": "Terug",
+	"Close": "Dichtbij",
+	"Copy": "Kopiëren",
+	"Cut": "Besnoeiing",
+	"Delete": "Verwijder",
+	"Desktop App Settings": "Desktop-app-instellingen",
+	"Edit": "Bewerk",
+	"File": "het dossier",
+	"Forward": "Vooruit",
+	"Hard Reload": "Moeilijke herladen",
+	"Help": "Helpen",
+	"History": "Geschiedenis",
+	"Keyboard Shortcuts": "Toetsenbord sneltoetsen",
+	"Log Out": "Uitloggen",
+	"Minimize": "verkleinen",
+	"Paste": "Plakken",
+	"Paste and Match Style": "Plak en match stijl",
+	"Quit": "ophouden",
+	"Redo": "Opnieuw doen",
+	"Reload": "vernieuwen",
+	"Report an issue...": "Een probleem melden...",
+	"Reset App Settings": "App-instellingen opnieuw instellen",
+	"Select All": "Selecteer alles",
+	"Show App Logs": "App-logs weergeven",
+	"Toggle DevTools for Active Tab": "DevTools voor actieve tabblad omschakelen",
+	"Toggle DevTools for Zulip App": "DevTools voor Zulip-app omschakelen",
+	"Toggle Full Screen": "Volledig scherm activeren",
+	"Toggle Sidebar": "Zijbalk verschuiven",
+	"Toggle Tray Icon": "Pictogram Lade wisselen",
+	"Undo": "ongedaan maken",
+	"View": "Uitzicht",
+	"Window": "Venster",
+	"Zoom In": "In zoomen",
+	"Zoom Out": "Uitzoomen",
+	"Zulip Help": "Zulip Help"
+}

app/translations/pl.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "O Zulip",
+	"Actual Size": "Rzeczywisty rozmiar",
+	"Back": "Plecy",
+	"Close": "Blisko",
+	"Copy": "Kopiuj",
+	"Cut": "Ciąć",
+	"Delete": "Kasować",
+	"Desktop App Settings": "Ustawienia aplikacji na komputer",
+	"Edit": "Edytować",
+	"File": "Plik",
+	"Forward": "Naprzód",
+	"Hard Reload": "Trudne przeładowanie",
+	"Help": "Wsparcie",
+	"History": "Historia",
+	"Keyboard Shortcuts": "Skróty klawiszowe",
+	"Log Out": "Wyloguj",
+	"Minimize": "Zminimalizować",
+	"Paste": "Pasta",
+	"Paste and Match Style": "Wklej i dopasuj styl",
+	"Quit": "Porzucić",
+	"Redo": "Przerobić",
+	"Reload": "Przeładować",
+	"Report an issue...": "Zgłoś problem...",
+	"Reset App Settings": "Zresetuj ustawienia aplikacji",
+	"Select All": "Zaznacz wszystko",
+	"Show App Logs": "Pokaż dzienniki aplikacji",
+	"Toggle DevTools for Active Tab": "Przełącz DevTools dla Active Tab",
+	"Toggle DevTools for Zulip App": "Przełącz DevTools dla aplikacji Zulip",
+	"Toggle Full Screen": "Przełącz tryb pełnoekranowy",
+	"Toggle Sidebar": "Przełącz boczny pasek",
+	"Toggle Tray Icon": "Przełącz ikonę tacy",
+	"Undo": "Cofnij",
+	"View": "Widok",
+	"Window": "Okno",
+	"Zoom In": "Zbliżenie",
+	"Zoom Out": "Pomniejsz",
+	"Zulip Help": "Zulip Help"
+}

app/translations/pt.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Sobre Zulip",
+	"Actual Size": "Tamanho atual",
+	"Back": "Costas",
+	"Close": "Fechar",
+	"Copy": "cópia de",
+	"Cut": "Cortar",
+	"Delete": "Excluir",
+	"Desktop App Settings": "Configurações da aplicação Desktop",
+	"Edit": "Editar",
+	"File": "Arquivo",
+	"Forward": "frente",
+	"Hard Reload": "Hard Recargar",
+	"Help": "Socorro",
+	"History": "História",
+	"Keyboard Shortcuts": "Atalhos do teclado",
+	"Log Out": "Sair",
+	"Minimize": "Minimizar",
+	"Paste": "Colar",
+	"Paste and Match Style": "Estilo de colar e combinar",
+	"Quit": "Sair",
+	"Redo": "Refazer",
+	"Reload": "recarregar",
+	"Report an issue...": "Relatar um problema ...",
+	"Reset App Settings": "Redefinir as configurações da aplicação",
+	"Select All": "Selecionar tudo",
+	"Show App Logs": "Mostrar logs de aplicativos",
+	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
+	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
+	"Toggle Full Screen": "Alternar para o modo tela cheia",
+	"Toggle Sidebar": "Toggle Sidebar",
+	"Toggle Tray Icon": "Ícone Toggle Tray",
+	"Undo": "Desfazer",
+	"View": "Visão",
+	"Window": "Janela",
+	"Zoom In": "Mais Zoom",
+	"Zoom Out": "Reduzir o zoom",
+	"Zulip Help": "Zulip Help"
+}

app/translations/ru.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "О пользователе Zulip",
+	"Actual Size": "Фактический размер",
+	"Back": "назад",
+	"Close": "Закрыть",
+	"Copy": "копия",
+	"Cut": "Порез",
+	"Delete": "Удалить",
+	"Desktop App Settings": "Настройки настольных приложений",
+	"Edit": "редактировать",
+	"File": "файл",
+	"Forward": "Вперед",
+	"Hard Reload": "Hard Reload",
+	"Help": "Помогите",
+	"History": "история",
+	"Keyboard Shortcuts": "Горячие клавиши",
+	"Log Out": "Выйти",
+	"Minimize": "Минимизировать",
+	"Paste": "Вставить",
+	"Paste and Match Style": "Стиль вставки и совпадения",
+	"Quit": "Уволиться",
+	"Redo": "переделывать",
+	"Reload": "перезагружать",
+	"Report an issue...": "Сообщить о проблеме...",
+	"Reset App Settings": "Сбросить настройки приложения",
+	"Select All": "Выбрать все",
+	"Show App Logs": "Показать журналы приложений",
+	"Toggle DevTools for Active Tab": "Toggle DevTools для активной вкладки",
+	"Toggle DevTools for Zulip App": "Toggle DevTools для приложения Zulip",
+	"Toggle Full Screen": "Включить полноэкранный режим",
+	"Toggle Sidebar": "Переключить боковую панель",
+	"Toggle Tray Icon": "Иконка Toggle Tray",
+	"Undo": "расстегивать",
+	"View": "Посмотреть",
+	"Window": "Окно",
+	"Zoom In": "Приблизить",
+	"Zoom Out": "Уменьшить",
+	"Zulip Help": "Zulip Help"
+}