pdf-viewer: Persist webview session.

This passes the partition parameter to the pdf window so that a user don't need to login in order to view the pdf.
pdf-viewer: Show pdf files in a new window.
2025-10-24 08:33:36 +00:00 · 2018-08-29 23:07:36 +05:30 · 2018-08-29 18:28:30 +05:30
174 changed files with 15510 additions and 22072 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,7 +2,6 @@ root = true

 [*]
 indent_style = tab
-indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,14 +1 @@
-* text=auto eol=lf
-
-*.gif binary
-*.jpg binary
-*.jpeg binary
-*.eot binary
-*.woff binary
-*.woff2 binary
-*.svg binary
-*.ttf binary
-*.png binary
-*.otf binary
-*.tif binary
-*.ogg binary
+* text=auto
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -2,7 +2,7 @@
 <!-- Please Include: -->
 - **Operating System**:
  - [ ] Windows
-  - [ ] Linux/Ubuntu
+  - [ ] Linux/Ubutnu
  - [ ] macOS
 - **Clear steps to reproduce the issue**:
 - **Relevant error messages and/or screenshots**:
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
-# Dependency directory
-/node_modules/
+# Dependency directories
+node_modules/

 # npm cache directory
 .npm
@@ -33,9 +33,6 @@ yarn-error.log*
 config.gypi

 # Test generated files
-# tests/package.json
+tests/package.json

 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js
--- a/.htmlhintrc
+++ b/.htmlhintrc
@@ -1,25 +0,0 @@
-{
-  "tagname-lowercase": true,
-  "attr-lowercase": true,
-  "attr-value-double-quotes": true,
-  "attr-value-not-empty": false,
-  "attr-no-duplication": true,
-  "doctype-first": true,
-  "tag-pair": true,
-  "empty-tag-not-self-closed": true,
-  "spec-char-escape": true,
-  "id-unique": true,
-  "src-not-empty": true,
-  "title-require": true,
-  "alt-require": false,
-  "doctype-html5": true,
-  "id-class-value": "dash",
-  "style-disabled": false,
-  "inline-style-disabled": false,
-  "inline-script-disabled": false,
-  "space-tab-mixed-disabled": "space4",
-  "id-class-ad-disabled": false,
-  "href-abs-or-rel": false,
-  "attr-unsafe-chars": true,
-  "head-script-disabled": true
-}
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,67 +0,0 @@
-{
-    "rules": {
-        # Stylistic rules for CSS.
-        "function-comma-space-after": "always",
-        "function-comma-space-before": "never",
-        "function-max-empty-lines": 0,
-        "function-whitespace-after": "always",
-
-        "value-keyword-case": "lower",
-        "value-list-comma-newline-after": "always-multi-line",
-        "value-list-comma-space-after": "always-single-line",
-        "value-list-comma-space-before": "never",
-        "value-list-max-empty-lines": 0,
-
-        "unit-case": "lower",
-        "property-case": "lower",
-        "color-hex-case": "lower",
-
-        "declaration-bang-space-before": "always",
-        "declaration-colon-newline-after": "always-multi-line",
-        "declaration-colon-space-after": "always-single-line",
-        "declaration-colon-space-before": "never",
-        "declaration-block-semicolon-newline-after": "always",
-        "declaration-block-semicolon-space-before": "never",
-        "declaration-block-trailing-semicolon": "always",
-
-        "block-closing-brace-empty-line-before": "never",
-        "block-closing-brace-newline-after": "always",
-        "block-closing-brace-newline-before": "always",
-        "block-opening-brace-newline-after": "always",
-        "block-opening-brace-space-before": "always",
-
-        "selector-attribute-brackets-space-inside": "never",
-        "selector-attribute-operator-space-after": "never",
-        "selector-attribute-operator-space-before": "never",
-        "selector-combinator-space-after": "always",
-        "selector-combinator-space-before": "always",
-        "selector-descendant-combinator-no-non-space": true,
-        "selector-pseudo-class-parentheses-space-inside": "never",
-        "selector-pseudo-element-case": "lower",
-        "selector-pseudo-element-colon-notation": "double",
-        "selector-type-case": "lower",
-        "selector-list-comma-newline-after": "always",
-        "selector-list-comma-space-before": "never",
-
-        "media-feature-colon-space-after": "always",
-        "media-feature-colon-space-before": "never",
-        "media-feature-name-case": "lower",
-        "media-feature-parentheses-space-inside": "never",
-        "media-feature-range-operator-space-after": "always",
-        "media-feature-range-operator-space-before": "always",
-        "media-query-list-comma-newline-after": "always",
-        "media-query-list-comma-space-before": "never",
-
-        "at-rule-name-case": "lower",
-        "at-rule-name-space-after": "always",
-        "at-rule-semicolon-newline-after": "always",
-        "at-rule-semicolon-space-before": "never",
-
-        "comment-whitespace-inside": "always",
-        "indentation": 4,
-        
-        # Limit language features
-        "color-no-hex": true,
-        "color-named": "never",
-    }
-}
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,17 +15,17 @@ addons:

 language: node_js
 node_js:
- '10'
- '12'
+- '8'

 before_install:
  - ./scripts/travis-xvfb.sh
  - npm install -g gulp
-  - npm ci
+  - npm install

 cache:
  directories:
  - node_modules
+  - app/node_modules

 script:
 - npm run travis
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,20 +2,20 @@

 Thanks for taking the time to contribute!

-The following is a set of guidelines for contributing to Zulip's 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.
+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](https://jlord.us/essential-electron) great article.
+Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](http://jlord.us/essential-electron/) great article.

 ## Community

 * The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).

-* If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
+* 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-desktop/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-desktop/issues/new).
+Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-electron/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-electron/issues/new).

 The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by commenting the following in the comment section: "**@zulipbot** claim". **@zulipbot** will assign you to the issue and label the issue as **in progress**. For more details, check out [**@zulipbot**](https://github.com/zulip/zulipbot).

@@ -38,7 +38,7 @@ For example:


 ## Pull Requests
-Pull Requests are always welcome.
+Pull Requests are always welcome. 

 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:
--- a/README.md
+++ b/README.md
@@ -1,36 +1,32 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.org/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.org/zulip/zulip-desktop)
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=master&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
+[![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)
-[![project chat](https://img.shields.io/badge/zulip-join_chat-brightgreen.svg)](https://chat.zulip.org)

-Desktop client for Zulip. Available for Mac, Linux, and Windows.
+Desktop client for Zulip. Available for Mac, Linux and Windows.

 <img src="http://i.imgur.com/ChzTq4F.png"/>

 # Download
-Please see the [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).

 # Features
-* Sign in to multiple organizations
-* Desktop notifications with inline reply
-* Tray/dock integration
-* Multi-language spell checker
-* Automatic updates
+* Sign in to multiple teams
+* Desktop Notifications with inline reply support
+* Multilanguage SpellChecker
+* OSX/Win/Linux installers
+* Automatic Updates (macOS/Windows/Linux)
+* Keyboard shortcuts

-# Reporting issues
-
-This desktop client shares most of its code with the Zulip webapp.
-Issues in an individual organization's Zulip window should be reported
-in the [Zulip server and webapp
-project](https://github.com/zulip/zulip/issues/new).  Other
-issues in the desktop app and its settings should be reported [in this
-project](https://github.com/zulip/zulip-desktop/issues/new).
+# Development
+Please see our [development guide](./development.md) to get started and run app locally.

 # Contribute

-First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html)!
-Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
+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.
--- a/app/main/autoupdater.js
+++ b/app/main/autoupdater.js
@@ -1,19 +1,18 @@
-import { app, dialog } from 'electron';
-import { autoUpdater } from 'electron-updater';
-import { linuxUpdateNotification } from './linuxupdater';	// Required only in case of linux
+'use strict';
+const { app, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const isDev = require('electron-is-dev');

-import log from 'electron-log';
-import isDev from 'electron-is-dev';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as LinkUtil from '../renderer/js/utils/link-util';
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');

-export function appUpdater(updateFromMenu = false): void {
+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;
 	}
@@ -24,6 +23,8 @@ export function appUpdater(updateFromMenu = false): void {
 	const LogsDir = `${app.getPath('userData')}/Logs`;

 	// Log whats happening
+	const log = require('electron-log');
+
 	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
@@ -62,19 +63,20 @@ export function appUpdater(updateFromMenu = false): void {
 		}
 	});

-	autoUpdater.on('error', async error => {
+	autoUpdater.on('error', error => {
 		if (updateFromMenu) {
 			const messageText = (updateAvailable) ? ('Unable to download the updates') : ('Unable to check for updates');
-			const { response } = await dialog.showMessageBox({
+			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()}`
+Current Version: ${app.getVersion()}`
+			}, response => {
+				if (response === 0) {
+					shell.openExternal('https://zulipchat.com/apps/');
+				}
 			});
-			if (response === 0) {
-				LinkUtil.openBrowser(new URL('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();
@@ -82,23 +84,29 @@ export function appUpdater(updateFromMenu = false): void {
 	});

 	// Ask the user if update is available
-	autoUpdater.on('update-downloaded', async event => {
+	// eslint-disable-next-line no-unused-vars
+	autoUpdater.on('update-downloaded', event => {
 		// Ask user to update the app
-		const { response } = await dialog.showMessageBox({
+		dialog.showMessageBox({
 			type: 'question',
 			buttons: ['Install and Relaunch', 'Install Later'],
 			defaultId: 0,
 			message: `A new update ${event.version} has been downloaded`,
 			detail: 'It will be installed the next time you restart the application'
+		}, response => {
+			if (response === 0) {
+				setTimeout(() => {
+					autoUpdater.quitAndInstall();
+					// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
+					app.quit();
+				}, 1000);
+			}
 		});
-		if (response === 0) {
-			setTimeout(() => {
-				autoUpdater.quitAndInstall();
-				// force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
-				app.quit();
-			}, 1000);
-		}
 	});
 	// Init for updates
 	autoUpdater.checkForUpdates();
 }
+
+module.exports = {
+	appUpdater
+};
--- a/app/main/index.js
+++ b/app/main/index.js
@@ -0,0 +1,319 @@
+'use strict';
+const path = require('path');
+const electron = require('electron');
+const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
+const appMenu = require('./menu');
+const { appUpdater } = require('./autoupdater');
+
+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
+// in development mode
+if (isDev) {
+	require('electron-debug')();
+}
+
+// Prevent window being garbage collected
+let mainWindow;
+let badgeCount;
+
+let isQuitting = false;
+
+// Load this url in main window
+const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
+
+const isAlreadyRunning = app.makeSingleInstance(() => {
+	if (mainWindow) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+
+		mainWindow.show();
+	}
+});
+
+if (isAlreadyRunning) {
+	return app.quit();
+}
+
+const APP_ICON = path.join(__dirname, '../resources', 'Icon');
+
+const iconPath = () => {
+	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
+};
+
+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',
+		icon: iconPath(),
+		x: mainWindowState.x,
+		y: mainWindowState.y,
+		width: mainWindowState.width,
+		height: mainWindowState.height,
+		minWidth: 300,
+		minHeight: 400,
+		webPreferences: {
+			plugins: true,
+			nodeIntegration: true,
+			partition: 'persist:webviewsession'
+		},
+		show: false
+	});
+
+	win.on('focus', () => {
+		win.webContents.send('focus');
+	});
+
+	win.once('ready-to-show', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
+	});
+
+	win.loadURL(mainURL);
+
+	// Keep the app running in background on close event
+	win.on('close', e => {
+		if (!isQuitting) {
+			e.preventDefault();
+
+			if (process.platform === 'darwin') {
+				app.hide();
+			} else {
+				win.hide();
+			}
+		}
+	});
+
+	win.setTitle('Zulip');
+
+	win.on('enter-full-screen', () => {
+		win.webContents.send('enter-fullscreen');
+	});
+
+	win.on('leave-full-screen', () => {
+		win.webContents.send('leave-fullscreen');
+	});
+
+	//  To destroy tray icon when navigate to a new URL
+	win.webContents.on('will-navigate', e => {
+		if (e) {
+			win.webContents.send('destroytray');
+		}
+	});
+
+	// 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;
+}
+
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
+
+// Temporary fix for Electron render colors differently
+// More info here - https://github.com/electron/electron/issues/10732
+app.commandLine.appendSwitch('force-color-profile', 'srgb');
+
+// eslint-disable-next-line max-params
+app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
+	event.preventDefault();
+	callback(true);
+});
+
+app.on('activate', () => {
+	if (!mainWindow) {
+		mainWindow = createMainWindow();
+	}
+});
+
+app.on('ready', () => {
+	appMenu.setMenu({
+		tabs: []
+	});
+	mainWindow = createMainWindow();
+
+	// Initialize sentry for main process
+	sentryInit();
+
+	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+
+	if (isSystemProxy) {
+		ProxyUtil.resolveSystemProxy(mainWindow);
+	}
+
+	const page = mainWindow.webContents;
+
+	page.on('dom-ready', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
+		}
+	});
+
+	page.once('did-frame-finish-load', () => {
+		// Initiate auto-updates on MacOS and Windows
+		if (ConfigUtil.getConfigItem('autoUpdate')) {
+			appUpdater();
+		}
+	});
+
+	// Temporarily remove this event
+	// electron.powerMonitor.on('resume', () => {
+	// 	mainWindow.reload();
+	// 	page.send('destroytray');
+	// });
+
+	ipcMain.on('focus-app', () => {
+		mainWindow.show();
+	});
+
+	ipcMain.on('quit-app', () => {
+		app.quit();
+	});
+
+	// Show pdf in a new BrowserWindow
+	ipcMain.on('pdf-view', (event, url) => {
+		// Paddings for pdfWindow so that it fits into the main browserWindow
+		const paddingWidth = 55;
+		const paddingHeight = 22;
+
+		// Get the config of main browserWindow
+		const mainWindowState = global.mainWindowState;
+
+		// Window to view the pdf file
+		const pdfWindow = new electron.BrowserWindow({
+			x: mainWindowState.x + paddingWidth,
+			y: mainWindowState.y + paddingHeight,
+			width: mainWindowState.width - paddingWidth,
+			height: mainWindowState.height - paddingHeight,
+			webPreferences: {
+				plugins: true,
+				partition: 'persist:webviewsession'
+			}
+		});
+		pdfWindow.loadURL(url);
+	});
+
+	// 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.on('updated', (event, state) => {
+				switch (state) {
+					case 'interrupted': {
+						// Can interrupted to due to network error, cancel download then
+						console.log('Download interrupted, cancelling and fallback to dialog download.');
+						item.cancel();
+						break;
+					}
+					case 'progressing': {
+						if (item.isPaused()) {
+							item.cancel();
+						}
+						// This event can also be used to show progres in percentage in future.
+						break;
+					}
+					default: {
+						console.info('Unknown updated state of download item');
+					}
+				}
+			});
+			item.once('done', (event, state) => {
+				if (state === 'completed') {
+					page.send('downloadFileCompleted', item.getSavePath(), item.getFilename());
+				} else {
+					console.log('Download failed state: ', state);
+					page.send('downloadFileFailed');
+				}
+				// To stop item for listening to updated events of this file
+				item.removeAllListeners('updated');
+			});
+		});
+	});
+
+	ipcMain.on('realm-icon-changed', (event, serverURL, iconURL) => {
+		page.send('update-realm-icon', serverURL, iconURL);
+	});
+});
+
+app.on('before-quit', () => {
+	isQuitting = true;
+});
+
+// Send crash reports
+process.on('uncaughtException', err => {
+	console.error(err);
+	console.error(err.stack);
+});
--- a/app/main/index.ts
+++ b/app/main/index.ts
@@ -1,435 +0,0 @@
-import { sentryInit } from '../renderer/js/utils/sentry-util';
-import { appUpdater } from './autoupdater';
-import { setAutoLaunch } from './startup';
-
-import windowStateKeeper from 'electron-window-state';
-import path from 'path';
-import fs from 'fs';
-import electron, { app, ipcMain, session, dialog } from 'electron';
-
-import * as AppMenu from './menu';
-import * as BadgeSettings from '../renderer/js/pages/preference/badge-settings';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as ProxyUtil from '../renderer/js/utils/proxy-util';
-
-interface PatchedGlobal extends NodeJS.Global {
-	mainWindowState: windowStateKeeper.State;
-}
-
-const globalPatched = global as PatchedGlobal;
-
-// Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
-let badgeCount: number;
-
-let isQuitting = false;
-
-// Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
-
-const singleInstanceLock = app.requestSingleInstanceLock();
-if (singleInstanceLock) {
-	app.on('second-instance', () => {
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) {
-				mainWindow.restore();
-			}
-
-			mainWindow.show();
-		}
-	});
-} else {
-	app.quit();
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = (): string => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-// toggle the app window
-const toggleApp = (): void => {
-	if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
-		mainWindow.show();
-	} else {
-		mainWindow.hide();
-	}
-};
-
-function createMainWindow(): Electron.BrowserWindow {
-	// Load the previous state with fallback to defaults
-	const mainWindowState: windowStateKeeper.State = 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
-	globalPatched.mainWindowState = mainWindowState;
-
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		icon: iconPath(),
-		x: mainWindowState.x,
-		y: mainWindowState.y,
-		width: mainWindowState.width,
-		height: mainWindowState.height,
-		minWidth: 300,
-		minHeight: 400,
-		webPreferences: {
-			plugins: true,
-			nodeIntegration: true,
-			partition: 'persist:webviewsession',
-			webviewTag: true
-		},
-		show: false
-	});
-
-	win.on('focus', () => {
-		win.webContents.send('focus');
-	});
-
-	win.loadURL(mainURL);
-
-	// Keep the app running in background on close event
-	win.on('close', event => {
-		if (ConfigUtil.getConfigItem('quitOnClose')) {
-			app.quit();
-		}
-		if (!isQuitting) {
-			event.preventDefault();
-
-			if (process.platform === 'darwin') {
-				app.hide();
-			} else {
-				win.hide();
-			}
-		}
-	});
-
-	win.setTitle('Zulip');
-
-	win.on('enter-full-screen', () => {
-		win.webContents.send('enter-fullscreen');
-	});
-
-	win.on('leave-full-screen', () => {
-		win.webContents.send('leave-fullscreen');
-	});
-
-	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', event => {
-		if (event) {
-			win.webContents.send('destroytray');
-		}
-	});
-
-	// 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;
-}
-
-// Decrease load on GPU (experimental)
-app.disableHardwareAcceleration();
-
-// Temporary fix for Electron render colors differently
-// More info here - https://github.com/electron/electron/issues/10732
-app.commandLine.appendSwitch('force-color-profile', 'srgb');
-
-// eslint-disable-next-line max-params
-app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
-	event.preventDefault();
-	callback(true);
-});
-
-// this event is only available on macOS. Triggers when you click on the dock icon.
-app.on('activate', () => {
-	if (mainWindow) {
-		// if there is already a window show it
-		mainWindow.show();
-	} else {
-		mainWindow = createMainWindow();
-	}
-});
-
-app.on('ready', () => {
-	const ses = session.fromPartition('persist:webviewsession');
-	ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
-
-	AppMenu.setMenu({
-		tabs: []
-	});
-	mainWindow = createMainWindow();
-
-	// Auto-hide menu bar on Windows + Linux
-	if (process.platform !== 'darwin') {
-		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.autoHideMenuBar = shouldHideMenu;
-		mainWindow.setMenuBarVisibility(!shouldHideMenu);
-	}
-
-	// Initialize sentry for main process
-	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
-	if (errorReporting) {
-		sentryInit();
-	}
-
-	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-
-	if (isSystemProxy) {
-		ProxyUtil.resolveSystemProxy(mainWindow);
-	}
-
-	const page = mainWindow.webContents;
-
-	page.on('dom-ready', () => {
-		if (ConfigUtil.getConfigItem('startMinimized')) {
-			mainWindow.hide();
-		} else {
-			mainWindow.show();
-		}
-	});
-
-	ipcMain.on('fetch-user-agent', event => {
-		event.returnValue = session.fromPartition('persist:webviewsession').getUserAgent();
-	});
-
-	page.once('did-frame-finish-load', () => {
-		// Initiate auto-updates on MacOS and Windows
-		if (ConfigUtil.getConfigItem('autoUpdate')) {
-			appUpdater();
-		}
-	});
-
-	const permissionCallbacks = new Map();
-	let nextPermissionId = 0;
-
-	page.session.setPermissionRequestHandler((webContents, permission, callback, details) => {
-		const {origin} = new URL(details.requestingUrl);
-		permissionCallbacks.set(nextPermissionId, callback);
-		page.send('permission-request', nextPermissionId, {
-			webContentsId: webContents.id === mainWindow.webContents.id ?
-				null :
-				webContents.id,
-			origin,
-			permission
-		});
-		nextPermissionId++;
-	});
-
-	ipcMain.on('permission-response', (event: Event, permissionId: number, grant: boolean) => {
-		permissionCallbacks.get(permissionId)(grant);
-		permissionCallbacks.delete(permissionId);
-	});
-
-	// Temporarily remove this event
-	// electron.powerMonitor.on('resume', () => {
-	// 	mainWindow.reload();
-	// 	page.send('destroytray');
-	// });
-
-	ipcMain.on('focus-app', () => {
-		mainWindow.show();
-	});
-
-	ipcMain.on('quit-app', () => {
-		app.quit();
-	});
-
-	// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-	// ipcMain.on('pdf-view', (event, url) => {
-	// 	// Paddings for pdfWindow so that it fits into the main browserWindow
-	// 	const paddingWidth = 55;
-	// 	const paddingHeight = 22;
-
-	// 	// Get the config of main browserWindow
-	// 	const mainWindowState = global.mainWindowState;
-
-	// 	// Window to view the pdf file
-	// 	const pdfWindow = new electron.BrowserWindow({
-	// 		x: mainWindowState.x + paddingWidth,
-	// 		y: mainWindowState.y + paddingHeight,
-	// 		width: mainWindowState.width - paddingWidth,
-	// 		height: mainWindowState.height - paddingHeight,
-	// 		webPreferences: {
-	// 			plugins: true,
-	// 			partition: 'persist:webviewsession'
-	// 		}
-	// 	});
-	// 	pdfWindow.loadURL(url);
-
-	// 	// We don't want to have the menu bar in pdf window
-	// 	pdfWindow.setMenu(null);
-	// });
-
-	// Reload full app not just webview, useful in debugging
-	ipcMain.on('reload-full-app', () => {
-		mainWindow.reload();
-		page.send('destroytray');
-	});
-
-	ipcMain.on('clear-app-settings', () => {
-		globalPatched.mainWindowState.unmanage();
-		app.relaunch();
-		app.exit();
-	});
-
-	ipcMain.on('toggle-app', () => {
-		toggleApp();
-	});
-
-	ipcMain.on('toggle-badge-option', () => {
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-	});
-
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
-		mainWindow.autoHideMenuBar = showMenubar;
-		mainWindow.setMenuBarVisibility(!showMenubar);
-		page.send('toggle-autohide-menubar', showMenubar, true);
-	});
-
-	ipcMain.on('update-badge', (_event: Electron.IpcMainEvent, messageCount: number) => {
-		badgeCount = messageCount;
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-		page.send('tray', messageCount);
-	});
-
-	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMainEvent, data: string, text: string) => {
-		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-	});
-
-	ipcMain.on('forward-message', (_event: Electron.IpcMainEvent, listener: string, ...parameters: any[]) => {
-		page.send(listener, ...parameters);
-	});
-
-	ipcMain.on('update-menu', (_event: Electron.IpcMainEvent, props: any) => {
-		AppMenu.setMenu(props);
-		const activeTab = props.tabs[props.activeTabIndex];
-		if (activeTab) {
-			mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
-		}
-	});
-
-	ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
-		setAutoLaunch(AutoLaunchValue);
-	});
-
-	ipcMain.on('downloadFile', (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
-		page.downloadURL(url);
-		page.session.once('will-download', async (_event: Event, item) => {
-			let setFilePath: string;
-			let shortFileName: string;
-			if (ConfigUtil.getConfigItem('promptDownload', false)) {
-				const showDialogOptions: object = {
-					defaultPath: path.join(downloadPath, item.getFilename())
-				};
-
-				const result = await dialog.showSaveDialog(mainWindow, showDialogOptions);
-				if (result.canceled) {
-					item.cancel();
-					return;
-				}
-				setFilePath = result.filePath;
-				shortFileName = path.basename(setFilePath);
-			} else {
-				const getTimeStamp = (): number => {
-					const date = new Date();
-					return date.getTime();
-				};
-
-				const formatFile = (filePath: string): string => {
-					const fileExtension = path.extname(filePath);
-					const baseName = path.basename(filePath, fileExtension);
-					return `${baseName}-${getTimeStamp()}${fileExtension}`;
-				};
-
-				const filePath = path.join(downloadPath, item.getFilename());
-
-				// Update the name and path of the file if it already exists
-				const updatedFilePath = path.join(downloadPath, formatFile(filePath));
-				setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
-				shortFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
-			}
-
-			item.setSavePath(setFilePath);
-
-			const updatedListener = (_event: Event, state: string): void => {
-				switch (state) {
-					case 'interrupted': {
-						// Can interrupted to due to network error, cancel download then
-						console.log('Download interrupted, cancelling and fallback to dialog download.');
-						item.cancel();
-						break;
-					}
-					case 'progressing': {
-						if (item.isPaused()) {
-							item.cancel();
-						}
-						// This event can also be used to show progress in percentage in future.
-						break;
-					}
-					default: {
-						console.info('Unknown updated state of download item');
-					}
-				}
-			};
-			item.on('updated', updatedListener);
-			item.once('done', (_event: Event, state) => {
-				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), shortFileName);
-				} else {
-					console.log('Download failed state:', state);
-					page.send('downloadFileFailed');
-				}
-				// To stop item for listening to updated events of this file
-				item.removeListener('updated', updatedListener);
-			});
-		});
-	});
-
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
-		page.send('update-realm-name', serverURL, realmName);
-	});
-
-	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
-		page.send('update-realm-icon', serverURL, iconURL);
-	});
-
-	// Using event.sender.send instead of page.send here to
-	// make sure the value of errorReporting is sent only once on load.
-	ipcMain.on('error-reporting', (event: Electron.IpcMainEvent) => {
-		event.sender.send('error-reporting-val', errorReporting);
-	});
-
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMainEvent, index: number) => {
-		ConfigUtil.setConfigItem('lastActiveTab', index);
-	});
-
-	// Update user idle status for each realm after every 15s
-	const idleCheckInterval = 15 * 1000; // 15 seconds
-	setInterval(() => {
-		// Set user idle if no activity in 1 second (idleThresholdSeconds)
-		const idleThresholdSeconds = 1; // 1 second
-		const idleState = electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
-		if (idleState === 'active') {
-			page.send('set-active');
-		} else {
-			page.send('set-idle');
-		}
-	}, idleCheckInterval);
-});
-
-app.on('before-quit', () => {
-	isQuitting = true;
-});
-
-// Send crash reports
-process.on('uncaughtException', err => {
-	console.error(err);
-	console.error(err.stack);
-});
--- a/app/main/linuxupdater.js
+++ b/app/main/linuxupdater.js
@@ -1,30 +1,30 @@
-import { app, Notification } from 'electron';
+const { app } = require('electron');
+const { Notification } = require('electron');

-import request from 'request';
-import semver from 'semver';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as ProxyUtil from '../renderer/js/utils/proxy-util';
-import * as LinuxUpdateUtil from '../renderer/js/utils/linux-update-util';
-import Logger from '../renderer/js/utils/logger-util';
+const request = require('request');
+const semver = require('semver');
+const ConfigUtil = require('../renderer/js/utils/config-util');
+const ProxyUtil = require('../renderer/js/utils/proxy-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
 });

-export function linuxUpdateNotification(): void {
-	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
+function linuxUpdateNotification() {
+	let	url = 'https://api.github.com/repos/zulip/zulip-electron/releases';
 	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
 	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');

 	const options = {
 		url,
 		headers: {'User-Agent': 'request'},
-		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
-		ecdhCurve: 'auto'
+		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : ''
 	};

-	request(options, (error: any, response: any, body: any) => {
+	request(options, (error, response, body) => {
 		if (error) {
 			logger.error('Linux update error.');
 			logger.error(error);
@@ -46,3 +46,7 @@ export function linuxUpdateNotification(): void {
 		}
 	});
 }
+
+module.exports = {
+	linuxUpdateNotification
+};
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -0,0 +1,474 @@
+'use strict';
+const path = require('path');
+
+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 appName = app.getName();
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+class AppMenu {
+	getHistorySubmenu() {
+		return [{
+			label: 'Back',
+			accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('back');
+				}
+			}
+		}, {
+			label: 'Forward',
+			accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('forward');
+				}
+			}
+		}];
+	}
+
+	getViewSubmenu() {
+		return [{
+			label: 'Reload',
+			accelerator: 'CommandOrControl+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('reload-current-viewer');
+				}
+			}
+		}, {
+			label: 'Hard Reload',
+			accelerator: 'CommandOrControl+Shift+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('hard-reload');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			role: 'togglefullscreen'
+		}, {
+			label: 'Zoom In',
+			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomIn');
+				}
+			}
+		}, {
+			label: 'Zoom Out',
+			accelerator: 'CommandOrControl+-',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomOut');
+				}
+			}
+		}, {
+			label: 'Actual Size',
+			accelerator: 'CommandOrControl+0',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomActualSize');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: 'Toggle Tray Icon',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.send('toggletray');
+				}
+			}
+		}, {
+			label: 'Toggle Sidebar',
+			accelerator: 'CommandOrControl+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');
+				}
+			}
+		}];
+	}
+
+	getHelpSubmenu() {
+		return [
+			{
+				label: `${appName + ' Desktop-'} v${app.getVersion()}`,
+				enabled: false
+			},
+			{
+				label: `What's New...`,
+				click() {
+					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'
+			});
+			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;
+				}
+
+				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) {
+						AppMenu.sendAction('open-about');
+					}
+				}
+			}, {
+				label: `Check for Update`,
+				click() {
+					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) {
+						AppMenu.sendAction('log-out');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				role: 'services',
+				submenu: []
+			}, {
+				type: 'separator'
+			}, {
+				role: 'hide'
+			}, {
+				role: 'hideothers'
+			}, {
+				role: 'unhide'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'quit'
+			}]
+		}, {
+			label: 'Edit',
+			submenu: [{
+				role: 'undo'
+			}, {
+				role: 'redo'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'cut'
+			}, {
+				role: 'copy'
+			}, {
+				role: 'paste'
+			}, {
+				role: 'pasteandmatchstyle'
+			}, {
+				role: 'delete'
+			}, {
+				role: 'selectall'
+			}]
+		}, {
+			label: 'View',
+			submenu: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
+	}
+
+	getOtherTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: 'File',
+			submenu: [{
+				label: 'About Zulip',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-about');
+					}
+				}
+			}, {
+				label: `Check for Update`,
+				click() {
+					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) {
+						AppMenu.sendAction('log-out');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				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: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
+	}
+
+	static sendAction(action, ...params) {
+		const win = BrowserWindow.getAllWindows()[0];
+
+		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();
--- a/app/main/menu.ts
+++ b/app/main/menu.ts
@@ -1,608 +0,0 @@
-import { app, shell, BrowserWindow, Menu, dialog } from 'electron';
-import { appUpdater } from './autoupdater';
-
-import AdmZip from 'adm-zip';
-import fs from 'fs-extra';
-import path from 'path';
-import * as DNDUtil from '../renderer/js/utils/dnd-util';
-import Logger from '../renderer/js/utils/logger-util';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-import * as LinkUtil from '../renderer/js/utils/link-util';
-import * as t from '../renderer/js/utils/translation-util';
-
-const appName = app.name;
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-function getHistorySubmenu(enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
-	return [{
-		label: t.__('Back'),
-		accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
-		enabled: enableMenu,
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('back');
-			}
-		}
-	}, {
-		label: t.__('Forward'),
-		accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
-		enabled: enableMenu,
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('forward');
-			}
-		}
-	}];
-}
-
-function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
-	return [{
-		label: t.__('Check for Updates'),
-		click() {
-			checkForUpdate();
-		}
-	},
-	{
-		label: t.__('Release Notes'),
-		click() {
-			LinkUtil.openBrowser(new URL(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`));
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: t.__('Factory Reset'),
-		accelerator: process.platform === 'darwin' ? 'Command+Shift+D' : 'Ctrl+Shift+D',
-		click() {
-			resetAppSettings();
-		}
-	},
-	{
-		label: t.__('Download App Logs'),
-		click() {
-			const zip = new AdmZip();
-			const date = new Date();
-			const dateString = 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-${dateString}.zip`;
-			zip.writeZip(logFilePath);
-
-			// Open and select the log file
-			shell.showItemInFolder(logFilePath);
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: t.__('Toggle DevTools for Zulip App'),
-		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				focusedWindow.webContents.openDevTools({mode: 'undocked'});
-			}
-		}
-	},
-	{
-		label: t.__('Toggle DevTools for Active Tab'),
-		accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('tab-devtools');
-			}
-		}
-	}];
-}
-
-function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
-	return [{
-		label: t.__('Reload'),
-		accelerator: 'CommandOrControl+R',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('reload-current-viewer');
-			}
-		}
-	}, {
-		label: t.__('Hard Reload'),
-		accelerator: 'CommandOrControl+Shift+R',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('hard-reload');
-			}
-		}
-	}, {
-		type: 'separator'
-	}, {
-		label: t.__('Toggle Full Screen'),
-		role: 'togglefullscreen'
-	}, {
-		label: t.__('Zoom In'),
-		role: 'zoomIn',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('zoomIn');
-			}
-		}
-	}, {
-		label: t.__('Zoom Out'),
-		role: 'zoomOut',
-		accelerator: 'CommandOrControl+-',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('zoomOut');
-			}
-		}
-	}, {
-		label: t.__('Actual Size'),
-		role: 'resetZoom',
-		accelerator: 'CommandOrControl+0',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				sendAction('zoomActualSize');
-			}
-		}
-	}, {
-		type: 'separator'
-	}, {
-		label: t.__('Toggle Tray Icon'),
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				focusedWindow.webContents.send('toggletray');
-			}
-		}
-	}, {
-		label: t.__('Toggle Sidebar'),
-		accelerator: 'CommandOrControl+Shift+S',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				const newValue = !ConfigUtil.getConfigItem('showSidebar');
-				focusedWindow.webContents.send('toggle-sidebar', newValue);
-				ConfigUtil.setConfigItem('showSidebar', newValue);
-			}
-		}
-	}, {
-		label: t.__('Auto hide Menu bar'),
-		checked: ConfigUtil.getConfigItem('autoHideMenubar', false),
-		visible: process.platform !== 'darwin',
-		click(_item: any, focusedWindow: any) {
-			if (focusedWindow) {
-				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-				focusedWindow.autoHideMenuBar = newValue;
-				focusedWindow.setMenuBarVisibility(!newValue);
-				focusedWindow.webContents.send('toggle-autohide-menubar', newValue);
-				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
-			}
-		},
-		type: 'checkbox'
-	}];
-}
-
-function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
-	return [
-		{
-			label: `${appName + ' Desktop'} v${app.getVersion()}`,
-			enabled: false
-		},
-		{
-			label: t.__('About Zulip'),
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('open-about');
-				}
-			}
-		},
-		{
-			label: t.__('Help Center'),
-			click(focusedWindow) {
-				if (focusedWindow) {
-					sendAction('open-help');
-				}
-			}
-		},
-		{
-			label: t.__('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');
-				});
-			}
-		}
-	];
-}
-
-function getWindowSubmenu(tabs: any[], activeTabIndex: number, enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
-	const initialSubmenu: Electron.MenuItemConstructorOptions[] = [{
-		label: t.__('Minimize'),
-		role: 'minimize'
-	}, {
-		label: t.__('Close'),
-		role: 'close'
-	}];
-
-	if (tabs.length > 0) {
-		const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
-		initialSubmenu.push({
-			type: 'separator'
-		});
-		tabs.forEach(tab => {
-			// Do not add functional tab settings to list of windows in menu bar
-			if (tab.props.role === 'function' && tab.props.name === 'Settings') {
-				return;
-			}
-
-			initialSubmenu.push({
-				label: tab.props.name,
-				accelerator: tab.props.role === 'function' ? '' : `${ShortcutKey} + ${tab.props.index + 1}`,
-				checked: tab.props.index === activeTabIndex,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						sendAction('switch-server-tab', tab.props.index);
-					}
-				},
-				type: 'checkbox'
-			});
-		});
-		initialSubmenu.push({
-			type: 'separator'
-		});
-		initialSubmenu.push({
-			label: t.__('Switch to Next Organization'),
-			accelerator: 'Ctrl+Tab',
-			enabled: tabs.length > 1,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('switch-server-tab', getNextServer(tabs, activeTabIndex));
-				}
-			}
-		}, {
-			label: t.__('Switch to Previous Organization'),
-			accelerator: 'Ctrl+Shift+Tab',
-			enabled: tabs.length > 1,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('switch-server-tab', getPreviousServer(tabs, activeTabIndex));
-				}
-			}
-		});
-	}
-
-	return initialSubmenu;
-}
-
-function getDarwinTpl(props: any): Electron.MenuItemConstructorOptions[] {
-	const { tabs, activeTabIndex, enableMenu } = props;
-
-	return [{
-		label: app.name,
-		submenu: [{
-			label: t.__('Add Organization'),
-			accelerator: 'Cmd+Shift+N',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('new-server');
-				}
-			}
-		}, {
-			label: t.__('Toggle Do Not Disturb'),
-			accelerator: 'Cmd+Shift+M',
-			click() {
-				const dndUtil = DNDUtil.toggle();
-				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-			}
-		}, {
-			label: t.__('Desktop Settings'),
-			accelerator: 'Cmd+,',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('open-settings');
-				}
-			}
-		}, {
-			label: t.__('Keyboard Shortcuts'),
-			accelerator: 'Cmd+Shift+K',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('shortcut');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Copy Zulip URL'),
-			accelerator: 'Cmd+Shift+C',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('copy-zulip-url');
-				}
-			}
-		}, {
-			label: t.__('Log Out of Organization'),
-			accelerator: 'Cmd+L',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('log-out');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Services'),
-			role: 'services',
-			submenu: []
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Hide'),
-			role: 'hide'
-		}, {
-			label: t.__('Hide Others'),
-			role: 'hideOthers'
-		}, {
-			label: t.__('Unhide'),
-			role: 'unhide'
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Minimize'),
-			role: 'minimize'
-		}, {
-			label: t.__('Close'),
-			role: 'close'
-		}, {
-			label: t.__('Quit'),
-			role: 'quit'
-		}]
-	}, {
-		label: t.__('Edit'),
-		submenu: [{
-			label: t.__('Undo'),
-			accelerator: 'Cmd+Z',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('undo');
-				}
-			}
-		}, {
-			label: t.__('Redo'),
-			accelerator: 'Cmd+Shift+Z',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('redo');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Cut'),
-			role: 'cut'
-		}, {
-			label: t.__('Copy'),
-			role: 'copy'
-		}, {
-			label: t.__('Paste'),
-			role: 'paste'
-		}, {
-			label: t.__('Paste and Match Style'),
-			role: 'pasteAndMatchStyle'
-		}, {
-			label: t.__('Select All'),
-			role: 'selectAll'
-		}]
-	}, {
-		label: t.__('View'),
-		submenu: getViewSubmenu()
-	}, {
-		label: t.__('History'),
-		submenu: getHistorySubmenu(enableMenu)
-	}, {
-		label: t.__('Window'),
-		submenu: getWindowSubmenu(tabs, activeTabIndex, enableMenu)
-	}, {
-		label: t.__('Tools'),
-		submenu: getToolsSubmenu()
-	}, {
-		label: t.__('Help'),
-		role: 'help',
-		submenu: getHelpSubmenu()
-	}];
-}
-
-function getOtherTpl(props: any): Electron.MenuItemConstructorOptions[] {
-	const { tabs, activeTabIndex, enableMenu } = props;
-	return [{
-		label: t.__('File'),
-		submenu: [{
-			label: t.__('Add Organization'),
-			accelerator: 'Ctrl+Shift+N',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('new-server');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Toggle Do Not Disturb'),
-			accelerator: 'Ctrl+Shift+M',
-			click() {
-				const dndUtil = DNDUtil.toggle();
-				sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-			}
-		}, {
-			label: t.__('Desktop Settings'),
-			accelerator: 'Ctrl+,',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('open-settings');
-				}
-			}
-		}, {
-			label: t.__('Keyboard Shortcuts'),
-			accelerator: 'Ctrl+Shift+K',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('shortcut');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Copy Zulip URL'),
-			accelerator: 'Ctrl+Shift+C',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('copy-zulip-url');
-				}
-			}
-		}, {
-			label: t.__('Log Out of Organization'),
-			accelerator: 'Ctrl+L',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					sendAction('log-out');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Minimize'),
-			role: 'minimize'
-		}, {
-			label: t.__('Close'),
-			role: 'close'
-		}, {
-			label: t.__('Quit'),
-			role: 'quit',
-			accelerator: 'Ctrl+Q'
-		}]
-	}, {
-		label: t.__('Edit'),
-		submenu: [{
-			label: t.__('Undo'),
-			role: 'undo'
-		}, {
-			label: t.__('Redo'),
-			role: 'redo'
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Cut'),
-			role: 'cut'
-		}, {
-			label: t.__('Copy'),
-			role: 'copy'
-		}, {
-			label: t.__('Paste'),
-			role: 'paste'
-		}, {
-			label: t.__('Paste and Match Style'),
-			role: 'pasteAndMatchStyle'
-		}, {
-			type: 'separator'
-		}, {
-			label: t.__('Select All'),
-			role: 'selectAll'
-		}]
-	}, {
-		label: t.__('View'),
-		submenu: getViewSubmenu()
-	}, {
-		label: t.__('History'),
-		submenu: getHistorySubmenu(enableMenu)
-	}, {
-		label: t.__('Window'),
-		submenu: getWindowSubmenu(tabs, activeTabIndex, enableMenu)
-	}, {
-		label: t.__('Tools'),
-		submenu: getToolsSubmenu()
-	}, {
-		label: t.__('Help'),
-		role: 'help',
-		submenu: getHelpSubmenu()
-	}];
-}
-
-function sendAction(action: string, ...parameters: any[]): void {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action, ...parameters);
-}
-
-function checkForUpdate(): void {
-	appUpdater(true);
-}
-
-function getNextServer(tabs: any[], activeTabIndex: number): number {
-	do {
-		activeTabIndex = (activeTabIndex + 1) % tabs.length;
-	}
-	while (tabs[activeTabIndex].props.role !== 'server');
-	return activeTabIndex;
-}
-
-function getPreviousServer(tabs: any[], activeTabIndex: number): number {
-	do {
-		activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-	}
-	while (tabs[activeTabIndex].props.role !== 'server');
-	return activeTabIndex;
-}
-
-async function resetAppSettings(): Promise<void> {
-	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'];
-
-	const { response } = await dialog.showMessageBox({
-		type: 'warning',
-		buttons: ['YES', 'NO'],
-		defaultId: 0,
-		message: 'Are you sure?',
-		detail: resetAppSettingsMessage
-	});
-	if (response === 0) {
-		settingFiles.forEach(settingFileName => {
-			const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
-			fs.access(getSettingFilesPath, (error: any) => {
-				if (error) {
-					logger.error('Error while resetting app settings.');
-					logger.error(error);
-				} else {
-					fs.unlink(getSettingFilesPath, () => {
-						sendAction('clear-app-data');
-					});
-				}
-			});
-		});
-	}
-}
-
-export function setMenu(props: any): void {
-	const tpl = process.platform === 'darwin' ? getDarwinTpl(props) : getOtherTpl(props);
-	const menu = Menu.buildFromTemplate(tpl);
-	Menu.setApplicationMenu(menu);
-}
--- a/app/main/startup.js
+++ b/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
+};
--- a/app/main/startup.ts
+++ b/app/main/startup.ts
@@ -1,32 +0,0 @@
-import { app } from 'electron';
-
-import AutoLaunch from 'auto-launch';
-import isDev from 'electron-is-dev';
-import * as ConfigUtil from '../renderer/js/utils/config-util';
-
-export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
-	// Don't run this in development
-	if (isDev) {
-		return;
-	}
-
-	const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
-
-	// setLoginItemSettings doesn't support linux
-	if (process.platform === 'linux') {
-		const ZulipAutoLauncher = new AutoLaunch({
-			name: 'Zulip',
-			isHidden: false
-		});
-		if (autoLaunchOption) {
-			ZulipAutoLauncher.enable();
-		} else {
-			ZulipAutoLauncher.disable();
-		}
-	} else {
-		app.setLoginItemSettings({
-			openAtLogin: autoLaunchOption,
-			openAsHidden: false
-		});
-	}
-};
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "zulip",
+  "productName": "Zulip",
+  "version": "2.3.6",
+  "description": "Zulip Desktop App",
+  "license": "Apache-2.0",
+  "copyright": "Kandra Labs, Inc.",
+  "author": {
+    "name": "Kandra Labs, Inc.",
+    "email": "support@zulipchat.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zulip/zulip-electron.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zulip/zulip-electron/issues"
+  },
+  "main": "main/index.js",
+  "keywords": [
+    "Zulip",
+    "Group Chat app",
+    "electron-app",
+    "electron",
+    "Desktop app",
+    "InstantMessaging"
+  ],
+  "dependencies": {
+    "@electron-elements/send-feedback": "1.0.7",
+    "@sentry/electron": "0.8.1",
+    "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.85.0",
+    "semver": "5.4.1",
+    "wurl": "2.5.0"
+  },
+  "optionalDependencies": {
+    "node-mac-notifier": "0.1.0"
+  }
+}
--- a/app/renderer/about.html
+++ b/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">
-        <title>Zulip - About</title>
-    </head>
+<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">v?.?.?</p>
-            <div class="maintenance-info">
-                <p class="detail maintainer">
-                    Maintained by
-                    <a href="https://zulipchat.com" target="_blank" rel="noopener noreferrer">Zulip</a>
-                </p>
-                <p class="detail license">
-                    Available under the
-                    <a href="https://github.com/zulip/zulip-desktop/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">Apache 2.0 License</a>
-                </p>
-            </div>
-        </div>
-        <script>
+<body>
+	<div class="about">
+		<img class="logo" src="../resources/zulip.png" />
+		<p class="detail" id="version">v?.?.?</p>
+		<div class="maintenance-info">
+			<p class="detail maintainer">
+				Maintained by
+				<a onclick="linkInBrowser('website')">Zulip</a>
+			</p>
+			<p class="detail license">
+				Available under the
+				<a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+			</p>
+			<a class="bug" onclick="linkInBrowser('bug')" href="#">Found bug?</a>
+		</div>
+	</div>
+	<script>

-            const { app } = require('electron').remote;
-            const version_tag = document.querySelector('#version');
-            version_tag.innerHTML = 'v' + app.getVersion();
-        </script>
-        <script>require('./js/shared/preventdrag.js')</script>
-    </body>
+		const { app } = require('electron').remote;
+		const { shell } = require('electron');
+		const version_tag = document.querySelector('#version');
+		version_tag.innerHTML = 'v' + app.getVersion();
+
+		function linkInBrowser(type) {
+			let url;
+			switch (type) {
+				case 'website':
+					url = "https://zulipchat.com";
+					break;
+				case 'license':
+					url = "https://github.com/zulip/zulip-electron/blob/master/LICENSE";
+					break;
+				default:
+					url = 'https://github.com/zulip/zulip-electron/issues/new?body=' +
+						'%3C!--Please%20describe%20your%20issue%20and%20steps%20to%20reproduce%20it.--%3E';
+			}
+			shell.openExternal(url);
+		}
+	</script>
+	<script>require('./js/shared/preventdrag.js')</script>
+</body>
 </html>
--- a/app/renderer/css/about.css
+++ b/app/renderer/css/about.css
@@ -1,66 +1,82 @@
 body {
-    background: rgba(250, 250, 250, 1.000);
-    font-family: menu, "Helvetica Neue", sans-serif;
-    -webkit-font-smoothing: subpixel-antialiased;
+	background: #fafafa;
+	font-family: menu, "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: subpixel-antialiased;
 }

 .logo {
-    display: block;
-    margin: -40px auto;
+	display: block;
+	margin: -40px auto;
 }

 #version {
-    color: rgba(68, 67, 67, 1.000);
-    font-size: 1.3em;
-    padding-top: 40px;
+	color: #444343;
+	font-size: 1.3em;
+	padding-top: 40px;
 }

 .about {
-    margin: 25vh auto;
-    height: 25vh;
-    text-align: center;
+	margin: 25vh auto;
+	height: 25vh;
+	text-align: center;
 }

 .about p {
-    font-size: 20px;
-    color: rgba(0, 0, 0, 0.62);
+	font-size: 20px;
+	color: rgba(0, 0, 0, 0.62);
 }

 .about img {
-    width: 150px;
+	width: 150px;
 }

 .detail {
-    text-align: center;
+	text-align: center;
 }

 .detail.maintainer {
-    font-size: 1.2em;
-    font-weight: 500;
+	font-size: 1.2em;
+	font-weight: 500;
 }

 .detail.license {
-    font-size: 0.8em;
+	font-size: 0.8em;
 }

 .maintenance-info {
-    cursor: pointer;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    color: rgba(68, 68, 68, 1.000);
+	cursor: pointer;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	color: #444;
 }

 .maintenance-info p {
-    margin: 0;
-    font-size: 1em;
-    width: 100%;
+	margin: 0;
+	font-size: 1em;
+	width: 100%;
+}
+
+.maintenance-info .bug {
+	display: inline-block;
+	padding: 8px 15px;
+	margin-top: 30px;
+	text-decoration: none;
+	background-color: #52c2af;
+	color: #fff;
+	border-radius: 4px;
+
+	transition: background-color 0.2s ease;
+}
+
+.maintenance-info .bug:hover {
+	background-color: #32a692;
 }

 p.detail a {
-    color: rgba(53, 95, 76, 1.000);
+	color: #355f4c;
 }

 p.detail a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -16,7 +16,7 @@ body {
 }

 .toggle-sidebar {
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    width: 54px;
    padding: 27px 0 20px 0;
    justify-content: space-between;
@@ -43,25 +43,25 @@ body {
 }

 #view-controls-container {
-    height: calc(100% - 208px);
-    overflow-y: hidden;
+	height: calc(100% - 208px);
+	overflow-y: hidden;
 }

 #view-controls-container:hover {
-    overflow-y: overlay;
+	overflow-y: overlay;
 }

 #view-controls-container::-webkit-scrollbar {
-    width: 4px;
+	width: 4px;
 }

 #view-controls-container::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }

 #view-controls-container::-webkit-scrollbar-thumb {
-    background-color: rgba(169, 169, 169, 1.000);
-    outline: 1px solid rgba(169, 169, 169, 1.000);
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
 }

@font-face {
@@ -119,12 +119,12 @@ body {
 }

 .action-button i {
-    color: rgba(108, 133, 146, 1.000);
+    color: #6c8592;
    font-size: 28px;
 }

 .action-button:hover i {
-    color: rgba(152, 169, 179, 1.000);
+    color: #98a9b3;
 }

 .action-button.disable {
@@ -136,22 +136,22 @@ body {
 }

 .action-button.disable:hover i {
-    color: rgba(108, 133, 146, 1.000);
+    color: #6c8592;
 }

 .action-button.active {
    /* background-color: rgba(255, 255, 255, 0.25); */
-    background-color: rgba(239, 239, 239, 1.000);
+    background-color: #efefef;
    opacity: 0.9;
    padding-right: 14px;
 }

 .action-button.active i {
-    color: rgba(28, 38, 43, 1.000);
+    color: #1c262b;
 }

 .tab:first-child {
-    margin-top: 9px;
+    margin-top: 8px;
 }

 .tab {
@@ -165,33 +165,25 @@ body {
 }

 .tab .server-icons {
-    width: 35px;
+    border-radius: 50%;
+    width: 30px;
+    padding: 3px;
+    height: 30px;
    vertical-align: top;
-    border-radius: 4px;
 }

 .tab .server-tab {
    width: 100%;
    height: 35px;
    position: relative;
-    margin-top: 5px;
+    margin: 5px 0 2px 0;
    z-index: 11;
    line-height: 31px;
-    color: rgba(238, 238, 238, 1.000);
+    color: #eee;
    text-align: center;
    overflow: hidden;
    opacity: 0.6;
-    padding: 6px 0;
-}
-
-.server-tab .alt-icon {
-    font-family: Verdana;
-    font-weight: 600;
-    font-size: 22px;
-    border: 2px solid rgba(34, 44, 49, 1.000);
-    margin-left: 17%;
-    width: 35px;
-    border-radius: 4px;
+    padding: 2px 0;
 }

 .tab .server-tab:hover {
@@ -216,7 +208,7 @@ body {

 .tab.active .server-tab {
    opacity: 1;
-    background-color: rgba(100, 132, 120, 1.000);
+    background-color: #648478;
 }

 .tab .server-tab-badge.active {
@@ -224,7 +216,7 @@ body {
    min-width: 11px;
    padding: 0 3px;
    height: 17px;
-    background-color: rgba(244, 67, 54, 1.000);
+    background-color: #f44336;
    font-size: 10px;
    font-family: sans-serif;
    position: absolute;
@@ -232,7 +224,7 @@ body {
    z-index: 15;
    top: 6px;
    float: right;
-    color: rgba(255, 255, 255, 1.000);
+    color: #fff;
    text-align: center;
    line-height: 17px;
    display: block;
@@ -260,25 +252,13 @@ body {
 }

 .tab .server-tab-shortcut {
-    color: rgba(100, 132, 120, 1.000);
+    color: #648478;
    font-size: 12px;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: 5px;
 }

-.refresh {
-    animation: rotate-loader 1s linear infinite;
-}
-
-@keyframes rotate-loader {
-    from {
-        transform: rotate(0);
-    }
-    to {
-        transform: rotate(-360deg);
-    }
-}

 /*******************
  *   Webview Area  *
@@ -290,19 +270,19 @@ body {
    width: 100%;
 }

-/* Pseudo element for loading indicator */
+/*Pseudo element for loading indicator*/
 #webviews-container::before {
    content: "";
    position: absolute;
    z-index: 1;
-    background: rgba(255, 255, 255, 1.000) url(../img/ic_loading.gif) no-repeat;
+    background: #fff url(../img/ic_loading.gif) no-repeat;
    background-size: 60px 60px;
    background-position: center;
    width: 100%;
    height: 100%;
 }

-/* When the active webview is loaded */
+/*When the active webview is loaded*/
 #webviews-container.loaded::before {
    opacity: 0;
    z-index: -1;
@@ -340,34 +320,32 @@ webview.focus {

 /* Tooltip styling */

-#loading-tooltip,
 #dnd-tooltip,
 #back-tooltip,
 #reload-tooltip,
 #setting-tooltip {
    font-family: sans-serif;
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    margin-left: 48px;
    padding: 6px 8px;
    position: absolute;
    margin-top: 0px;
    z-index: 1000;
-    color: rgba(255, 255, 255, 1.000);
+    color: white;
    border-radius: 4px;
    text-align: center;
    width: 55px;
    font-size: 14px;
 }

-#loading-tooltip::after,
-#dnd-tooltip::after,
-#back-tooltip::after,
-#reload-tooltip::after,
-#setting-tooltip::after {
+#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 rgba(34, 44, 49, 1.000);
+    border-right: 8px solid #222c31;
    position: absolute;
    top: 7px;
    right: 68px;
@@ -376,25 +354,25 @@ webview.focus {
 #add-server-tooltip,
 .server-tooltip {
    font-family: 'arial';
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    left: 56px;
    padding: 10px 20px;
    position: fixed;
-    margin-top: 11px;
+    margin-top: 8px;
    z-index: 5000 !important;
-    color: rgba(255, 255, 255, 1.000);
+    color: #fff;
    border-radius: 4px;
    text-align: center;
    width: max-content;
    font-size: 14px;
 }

-#add-server-tooltip::after,
-.server-tooltip::after {
+#add-server-tooltip:after,
+.server-tooltip:after {
    content: " ";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
+    border-right: 8px solid #222c31;
    position: absolute;
    top: 10px;
    left: -5px;
@@ -406,14 +384,14 @@ webview.focus {
    position: absolute;
    width: 24px;
    height: 24px;
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    border-radius: 20px;
    cursor: pointer;
-    box-shadow: rgba(153, 153, 153, 1.000) 1px 1px;
+    box-shadow: #999 1px 1px;
 }

 #collapse-button i {
-    color: rgba(239, 239, 239, 1.000);
+    color: #efefef;
 }

 #main-container {
@@ -434,8 +412,8 @@ webview.focus {

 .popup .popuptext {
    visibility: hidden;
-    background-color: rgba(85, 85, 85, 1.000);
-    color: rgba(255, 255, 255, 1.000);
+    background-color: #555;
+    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 9px 0;
@@ -467,24 +445,24 @@ webview.focus {
 }

 send-feedback {
-    width: 60%;
-    height: 85%;
+  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;
+  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;
+  display: flex;
 }
--- a/app/renderer/css/network.css
+++ b/app/renderer/css/network.css
@@ -1,11 +1,10 @@
-html,
-body {
+html, body {
    margin: 0;
    cursor: default;
    font-size: 14px;
-    color: rgba(51, 51, 51, 1.000);
-    background: rgba(255, 255, 255, 1.000);
-    user-select: none;
+    color: #333;
+    background: #fff;
+    user-select:none;
 }

 #content {
@@ -17,43 +16,27 @@ body {
 }

 #title {
-    text-align: left;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
 }

-#subtitle {
-    font-size: 20px;
-    text-align: left;
-    margin: 12px 0;
-}
-
 #description {
-    text-align: left;
    font-size: 16px;
-    list-style-position: inside;
 }

 #reconnect {
-    float: left;
-}
-
-#settings {
-    margin-left: 116px;
-}
-
-.button {
    font-size: 16px;
-    background: rgba(0, 150, 136, 1.000);
-    color: rgba(255, 255, 255, 1.000);
-    width: 96px;
+    background: #009688;
+    color: #fff;
+    width: 84px;
    height: 32px;
    border-radius: 5px;
    line-height: 32px;
+    margin: 20px auto 0;
    cursor: pointer;
 }

-.button:hover {
+#reconnect:hover {
    opacity: 0.8;
 }
--- a/app/renderer/css/preference.css
+++ b/app/renderer/css/preference.css
@@ -7,25 +7,23 @@ body {
    font-family: menu, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
-    background: rgba(239, 239, 239, 1.000);
-    letter-spacing: -.08px;
-    line-height: 18px;
-    color: rgba(139, 142, 143, 1.000);
+    color: #333;
+    background: #efefef;
 }

 kbd {
    display: inline-block;
-    border: 1px solid rgba(204, 204, 204, 1.000);
-    border-radius: 4px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
    font-size: 15px;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    white-space: nowrap;
-    background-color: rgba(247, 247, 247, 1.000);
-    color: rgba(51, 51, 51, 1.000);
+    background-color: #f7f7f7;
+    color: #333;
    margin: 0 0.1em;
    padding: 0.3em 0.8em;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 1.000);
+    text-shadow: 0 1px 0 #fff;
    line-height: 1.4;
 }

@@ -33,7 +31,7 @@ table,
 th,
 td {
    border-collapse: collapse;
-    color: rgba(56, 52, 48, 1.000);
+    color: #383430;
 }

 table {
@@ -43,11 +41,11 @@ table {
 }

 table tr:nth-child(even) {
-    background-color: rgba(250, 250, 250, 1.000);
+    background-color: #fafafa;
 }

 table tr:nth-child(odd) {
-    background-color: rgba(255, 255, 255, 1.000);
+    background-color: #fff;
 }

 td {
@@ -103,7 +101,7 @@ td:nth-child(odd) {
    display: flex;
    flex-direction: column;
    font-size: 16px;
-    background: rgba(242, 242, 242, 1.000);
+    background: #f2f2f2;
 }

 #nav-container {
@@ -111,19 +109,19 @@ td:nth-child(odd) {
 }

 .nav {
-    padding: 7px 0;
-    color: rgba(153, 153, 153, 1.000);
+    padding: 5px 0;
+    color: #999;
    cursor: pointer;
 }

 .nav.active {
-    color: rgba(78, 191, 172, 1.000);
+    color: #4ebfac;
    cursor: default;
    position: relative;
 }

 .nav.active::before {
-    background: rgba(70, 78, 90, 1.000);
+    background: #464e5a;
    width: 3px;
    height: 18px;
    position: absolute;
@@ -131,6 +129,7 @@ td:nth-child(odd) {
    content: '';
 }

+
 /* We don't want to show this in nav item since we have the + button for adding an Organization */

 #nav-AddServer {
@@ -139,7 +138,7 @@ td:nth-child(odd) {

 #settings-header {
    font-size: 22px;
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
    font-weight: bold;
    text-transform: uppercase;
 }
@@ -159,11 +158,11 @@ td:nth-child(odd) {

 .title {
    font-weight: 500;
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
 }

 .page-title {
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
    font-size: 15px;
    font-weight: bold;
    padding: 4px 0 6px 0;
@@ -182,13 +181,13 @@ td:nth-child(odd) {
 .sub-title {
    padding: 4px 0 6px 0;
    font-weight: bold;
-    color: rgba(97, 97, 97, 1.000);
+    color: #616161;
 }

 img.server-info-icon {
    width: 36px;
    height: 36px;
-    padding: 4px 4px 4px 10px;
+    padding: 4px;
    cursor: pointer;
    vertical-align: middle;
 }
@@ -247,20 +246,16 @@ img.server-info-icon {
 .setting-input-value {
    flex-grow: 1;
    font-size: 14px;
-    border-radius: 4px;
+    border-radius: 3px;
    padding: 13px;
-    border: rgba(237, 237, 237, 1.000) 2px solid;
+    border: #ededed 2px solid;
    outline-width: 0;
    background: transparent;
    max-width: 450px;
 }

 .setting-input-value:focus {
-    border: rgba(78, 191, 172, 1.000) 2px solid;
-}
-
-.invalid-input-value:focus {
-    border: rgba(239, 83, 80, 1) 2px solid;
+    border: #4EBFAC 2px solid;
 }

 .manual-proxy-block {
@@ -270,7 +265,7 @@ img.server-info-icon {
 .actions-container {
    display: flex;
    font-size: 14px;
-    color: rgba(35, 93, 58, 1.000);
+    color: #235d3a;
    vertical-align: middle;
    margin: 10px 0;
    flex-wrap: wrap;
@@ -291,7 +286,6 @@ img.server-info-icon {

 .settings-pane {
    flex-grow: 1;
-    min-width: 550px;
 }

 .action:hover {
@@ -303,7 +297,7 @@ img.server-info-icon {
 }

 .action.disabled {
-    color: rgba(153, 153, 153, 1.000);
+    color: #999;
 }

 .settings-card {
@@ -311,8 +305,8 @@ img.server-info-icon {
    flex-wrap: wrap;
    padding: 12px 30px;
    margin: 10px 0 20px 0;
-    background: rgba(255, 255, 255, 1.000);
-    width: 80%;
+    background: #fff;
+    width: 70%;
    transition: all 0.2s;
 }

@@ -326,59 +320,29 @@ img.server-info-icon {
 }

 .red {
-    color: rgb(240, 148, 148);
-    background: rgba(255, 255, 255, 1.000);
-    border-radius: 4px;
-    display: inline-block;
-    border: 2px solid rgb(240, 148, 148);
-    padding: 10px;
-    width: 100px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    transition: background-color 0.2s ease;
-    text-decoration: none;
-    text-align: center;
+    color: #ef5350;
+    padding: 8px;
+    border: rgba(239, 83, 80, 0.5) solid 1px;
 }

 .red:hover {
-    background-color: rgb(240, 148, 148);
-    color: rgba(255, 255, 255, 1.000);
+    color: #e63431;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
 }

-.green {
-    color: rgba(255, 255, 255, 1.000);
-    background: rgba(78, 191, 172, 1.000);
-    border-radius: 4px;
-    display: inline-block;
-    border: none;
-    padding: 10px;
-    width: 100px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    transition: background-color 0.2s ease;
-    text-decoration: none;
-    text-align: center;
-}
-
-.green:hover {
-    background-color: rgba(60, 159, 141, 1.000);
-    color: rgba(255, 255, 255, 1.000);
-}
-
-.w-150 {
-    width: 150px;
-}
-
-.w-250 {
-    width: 250px;
+.blue {
+    color: #ffffff;
+    background: #4EBFAC;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
 }

 .grey {
-    color: rgba(158, 158, 158, 1.000);
-    background: rgba(250, 250, 250, 1.000);
-    border: 1px solid rgba(158, 158, 158, 1.000);
+    color: #9E9E9E;
+    background: #FAFAFA;
+    border: 1px solid #9E9E9E;
 }

 .setting-row {
@@ -394,27 +358,36 @@ img.server-info-icon {
 }

 i.open-tab-button {
-    padding-left: 5px;
+    padding-left: 2px;
    font-size: 19px;
    cursor: pointer;
 }

-#css-delete-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
+.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;
+}

-    /*
-        .action class will add extra margin to right which
-        we don't want for a button; the extra margin is intended for radio buttons
-    */
-    margin-right: 0px;
+.css-delete-action {
+    margin-bottom: 10px;
+}
+
+.reset-data-button:hover {
+    background-color: #3c9f8d;
+    color: #fff;
 }

 .selected-css-path,
 .download-folder-path {
-    background: rgba(238, 238, 238, 1.000);
+    background: #eeeeee;
    padding: 5px 10px;
    margin-right: 10px;
    display: flex;
@@ -427,11 +400,7 @@ i.open-tab-button {
 }

 #server-info-container {
-    /* min-height: calc(100% - 260px); */
-}
-
-#new-org-button {
-    margin: 30px 0px 30px 0px;
+    min-height: calc(100% - 260px);
 }

 #create-organization-container {
@@ -454,7 +423,7 @@ i.open-tab-button {
    visibility: hidden;
 }

-.toggle + label {
+.toggle+label {
    display: block;
    position: relative;
    cursor: pointer;
@@ -462,21 +431,16 @@ i.open-tab-button {
    user-select: none;
 }

-.disallowed:hover {
-    background-color: rgba(241, 241, 241, 1.000);
-    cursor: not-allowed;
-}
-
-input.toggle-round + label {
+input.toggle-round+label {
    padding: 2px;
    width: 50px;
    height: 25px;
-    background-color: rgba(221, 221, 221, 1.000);
+    background-color: #dddddd;
    border-radius: 25px;
 }

-input.toggle-round + label::before,
-input.toggle-round + label::after {
+input.toggle-round+label:before,
+input.toggle-round+label:after {
    display: block;
    position: absolute;
    top: 2px;
@@ -485,34 +449,28 @@ input.toggle-round + label::after {
    content: "";
 }

-input.toggle-round + label::before {
-    background-color: rgba(241, 241, 241, 1.000);
+input.toggle-round+label:before {
+    right: 2px;
+    background-color: #f1f1f1;
    border-radius: 25px;
-    top: 0;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
 }

-input.toggle-round + label::after {
+input.toggle-round+label:after {
    width: 25px;
    height: 25px;
-    background-color: rgba(255, 255, 255, 1.000);
+    background-color: #fff;
    border-radius: 100%;
 }

-input.toggle-round:checked + label::before {
-    background-color: rgba(78, 191, 172, 1.000);
-    top: 0;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
+input.toggle-round:checked+label:before {
+    background-color: #4EBFAC;
 }

-input.toggle-round:checked + label::after {
+input.toggle-round:checked+label:after {
    margin-left: 25px;
 }

+
 /*  Add new server modal */

 .add-server-modal {
@@ -526,17 +484,18 @@ input.toggle-round:checked + label::after {
    width: 100%;
    height: 100%;
    /* background: rgba(61, 64, 67, 15); */
-    background: linear-gradient(35deg, rgba(0, 59, 82, 1.000), rgba(69, 181, 155, 1.000));
+    background: linear-gradient(35deg, #003b52, #45b59b);
    overflow: auto;
 }

+
 /* Modal Content */

 .modal-container {
-    background-color: rgba(244, 247, 248, 1.000);
+    background-color: #f4f7f8;
    margin: auto;
    padding: 57px;
-    border: rgba(218, 225, 227, 1.000) 1px solid;
+    border: #dae1e3 1px solid;
    width: 550px;
    height: 370px;
    border-radius: 4px;
@@ -550,7 +509,7 @@ input.toggle-round:checked + label::after {
 .divider {
    margin-bottom: 30px;
    margin-top: 30px;
-    color: rgba(125, 135, 138, 1.000);
+    color: #7d878a;
 }

 .divider hr {
@@ -581,54 +540,53 @@ input.toggle-round:checked + label::after {
    margin: auto;
    align-items: center;
    text-align: center;
-    color: rgba(255, 255, 255, 1.000);
-    background: rgba(78, 191, 172, 1.000);
+    color: #fff;
+    background: #4EBFAC;
    border-color: none;
    border: none;
    width: 98%;
    height: 46px;
-    border-radius: 4px;
+    border-radius: 3px;
    cursor: pointer;
 }

 .server-center button:hover {
-    background: rgba(50, 149, 136, 1.000);
+    background: #329588;
 }

 .server-center button:focus {
-    background: rgba(50, 149, 136, 1.000);
+    background: #329588;
 }

 .certificates-card {
-    width: 80%;
+     width:70%
 }

 .certificate-input {
-    width: 100%;
-    margin-top: 10px;
-    display: inline-flex;
+     width:100%;
+     margin-top: 10px;
+     display:inline-flex;
 }

 .certificate-input div {
-    align-self: center;
+    align-self:center;
 }

 .certificate-input .setting-input-value {
-    margin-left: 10px;
+    margin-left:10px;
    max-width: 100%;
 }

 #add-certificate-button {
-    margin: 10px 10px 10px 37px;
+    width:20%;
+    margin-right:0px;
+    height: 35px;
 }

 .tip {
-    background: none;
-    padding: 0;
-}
-
-.tip:hover {
-    box-shadow: none;
+    background-color: hsl(46,63%,95%);
+    border: 1px solid hsl(46,63%,84%);
+    border-radius: 4px;
 }

 .md-14 {
@@ -642,31 +600,11 @@ input.toggle-round:checked + label::after {
    cursor: pointer;
 }

-.server-network-option {
-    font-weight: bold;
-    font-size: 1.1rem;
-    margin-top: 10px;
-    padding-top: 15px;
-    align-items: center;
-    text-align: center;
-    color: rgb(78, 191, 172);
-    width: 98%;
-    height: 46px;
-    cursor: pointer;
-}
-
-i.open-network-button {
-    font-size: 16px;
-    cursor: pointer;
-    padding-left: 5px;
-    position: absolute;
-}
-
 /* responsive grid */

@media (max-width: 650px) {
    .selected-css-path,
-    .download-folder-path {
+    .download-folder-path  {
        margin-right: 15px;
    }
    #css-delete-action {
@@ -716,21 +654,13 @@ i.open-network-button {
        flex-direction: column;
        align-items: center;
    }
+
    .server-info-right {
        flex-direction: column;
        align-items: center;
    }
+
    .action {
        margin-top: 10px;
    }
 }
-
-.lang-menu {
-    font-size: 13px;
-    font-weight: bold;
-    background: rgba(78, 191, 172, 1.000);
-    width: 100px;
-    height: 38px;
-    color: rgba(255, 255, 255, 1.000);
-    border-color: rgba(0, 0, 0, 0);
-}
--- a/app/renderer/css/preload.css
+++ b/app/renderer/css/preload.css
@@ -1,9 +1,9 @@
 /* Override css rules */

-.portico-wrap > .header {
+.portico-wrap>.header {
    display: none;
 }

-.portico-container > .footer {
+.portico-container>.footer {
    display: none;
 }
--- a/app/renderer/js/components/base.js
+++ b/app/renderer/js/components/base.js
@@ -1,7 +1,11 @@
-export default class BaseComponent {
-	generateNodeFromTemplate(template: string): Element | null {
+'use strict';
+
+class BaseComponent {
+	generateNodeFromTemplate(template) {
 		const wrapper = document.createElement('div');
 		wrapper.innerHTML = template;
 		return wrapper.firstElementChild;
 	}
 }
+
+module.exports = BaseComponent;
--- a/app/renderer/js/components/functional-tab.js
+++ b/app/renderer/js/components/functional-tab.js
@@ -1,8 +1,9 @@
-import Tab, { TabProps } from './tab';
+'use strict';

-export default class FunctionalTab extends Tab {
-	$closeButton: Element;
-	template(): string {
+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>
@@ -13,21 +14,16 @@ export default class FunctionalTab extends Tab {
 				</div>`;
 	}

-	constructor(props: TabProps) {
-		super(props);
-		this.init();
-	}
-
-	init(): void {
+	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		if (this.props.name !== 'Settings') {
-			this.props.$root.append(this.$el);
-			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
+			this.props.$root.appendChild(this.$el);
+			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
 			this.registerListeners();
 		}
 	}

-	registerListeners(): void {
+	registerListeners() {
 		super.registerListeners();

 		this.$el.addEventListener('mouseover', () => {
@@ -38,9 +34,11 @@ export default class FunctionalTab extends Tab {
 			this.$closeButton.classList.remove('active');
 		});

-		this.$closeButton.addEventListener('click', (event: Event) => {
+		this.$closeButton.addEventListener('click', e => {
 			this.props.onDestroy();
-			event.stopPropagation();
+			e.stopPropagation();
 		});
 	}
 }
+
+module.exports = FunctionalTab;
--- a/app/renderer/js/components/handle-external-link.js
+++ b/app/renderer/js/components/handle-external-link.js
@@ -0,0 +1,78 @@
+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')}`);
+	const shouldShowInFolder = ConfigUtil.getConfigItem('showDownloadFolder', false);
+
+	// Whitelist URLs which are allowed to be opened in the app
+	const {
+		isInternalUrl: isWhiteListURL,
+		isUploadsUrl: isUploadsURL
+	} = LinkUtil.isInternal(domainPrefix, url);
+
+	if (isWhiteListURL) {
+		event.preventDefault();
+
+		// Show pdf attachments in a new window
+
+		if (LinkUtil.isPDF(url) && isUploadsURL) {
+			ipcRenderer.send('pdf-view', url);
+			return;
+		}
+
+		// download txt, 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) && !LinkUtil.isPDF(url) && isUploadsURL) {
+			ipcRenderer.send('downloadFile', url, downloadPath);
+			ipcRenderer.once('downloadFileCompleted', (event, filePath, fileName) => {
+				const downloadNotification = new Notification('Download Complete', {
+					body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `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 = () => {
+					if (shouldShowInFolder) {
+						// Reveal file in download folder
+						shell.showItemInFolder(filePath);
+					} else {
+						// Open file in the default native app
+						shell.openItem(filePath);
+					}
+				};
+				ipcRenderer.removeAllListeners('downloadFileFailed');
+			});
+
+			ipcRenderer.once('downloadFileFailed', () => {
+				// Automatic download failed, so show save dialog prompt and download
+				// through webview
+				this.$el.downloadURL(url);
+				ipcRenderer.removeAllListeners('downloadFileCompleted');
+			});
+			return;
+		}
+
+		// open internal urls inside the current webview.
+		this.$el.loadURL(url);
+	} else {
+		event.preventDefault();
+		shell.openExternal(url);
+	}
+}
+
+module.exports = handleExternalLink;
--- a/app/renderer/js/components/handle-external-link.ts
+++ b/app/renderer/js/components/handle-external-link.ts
@@ -1,56 +0,0 @@
-import { ipcRenderer, remote } from 'electron';
-
-import * as LinkUtil from '../utils/link-util';
-import * as ConfigUtil from '../utils/config-util';
-import type WebView from './webview';
-
-const { shell, app } = remote;
-
-const dingSound = new Audio('../resources/sounds/ding.ogg');
-
-export default function handleExternalLink(this: WebView, event: Electron.NewWindowEvent): void {
-	event.preventDefault();
-
-	const url = new URL(event.url);
-	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
-
-	if (LinkUtil.isUploadsUrl(this.props.url, url)) {
-		ipcRenderer.send('downloadFile', url.href, downloadPath);
-		ipcRenderer.once('downloadFileCompleted', (_event: Event, filePath: string, fileName: string) => {
-			const downloadNotification = new Notification('Download Complete', {
-				body: `Click to show ${fileName} in folder`,
-				silent: true // We'll play our own sound - ding.ogg
-			});
-
-			// Play sound to indicate download complete
-			if (!ConfigUtil.getConfigItem('silent')) {
-				dingSound.play();
-			}
-
-			downloadNotification.addEventListener('click', () => {
-				// Reveal file in download folder
-				shell.showItemInFolder(filePath);
-			});
-			ipcRenderer.removeAllListeners('downloadFileFailed');
-		});
-
-		ipcRenderer.once('downloadFileFailed', () => {
-			// Automatic download failed, so show save dialog prompt and download
-			// through webview
-			// Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
-			// prompts right after each other)
-			if (ConfigUtil.getConfigItem('promptDownload', false)) {
-				// We need to create a "new Notification" to display it, but just `Notification(...)` on its own
-				// doesn't work
-				new Notification('Download Complete', { // eslint-disable-line no-new
-					body: 'Download failed'
-				});
-			} else {
-				this.$el.downloadURL(url.href);
-			}
-			ipcRenderer.removeAllListeners('downloadFileCompleted');
-		});
-	} else {
-		LinkUtil.openBrowser(url);
-	}
-}
--- a/app/renderer/js/components/server-tab.js
+++ b/app/renderer/js/components/server-tab.js
@@ -1,14 +1,14 @@
-import { ipcRenderer } from 'electron';
+'use strict';

-import Tab, { TabProps } from './tab';
-import * as SystemUtil from '../utils/system-util';
+const Tab = require(__dirname + '/../components/tab.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');

-export default class ServerTab extends Tab {
-	$badge: Element;
+const {ipcRenderer} = require('electron');

-	template(): string {
+class ServerTab extends Tab {
+	template() {
 		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tooltip" style="display:none">${this.props.name}</div>
+					<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}'/>
@@ -17,21 +17,16 @@ export default class ServerTab extends Tab {
 				</div>`;
 	}

-	constructor(props: TabProps) {
-		super(props);
-		this.init();
+	init() {
+		super.init();
+
+		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
 	}

-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
-	}
-
-	updateBadge(count: number): void {
+	updateBadge(count) {
 		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count.toString();
+			const formattedCount = count > 999 ? '1K+' : count;
+
 			this.$badge.innerHTML = formattedCount;
 			this.$badge.classList.add('active');
 		} else {
@@ -39,7 +34,7 @@ export default class ServerTab extends Tab {
 		}
 	}

-	generateShortcutText(): string {
+	generateShortcutText() {
 		// Only provide shortcuts for server [0..10]
 		if (this.props.index >= 10) {
 			return '';
@@ -61,3 +56,5 @@ export default class ServerTab extends Tab {
 		return shortcutText;
 	}
 }
+
+module.exports = ServerTab;
--- a/app/renderer/js/components/tab.js
+++ b/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;
--- a/app/renderer/js/components/tab.ts
+++ b/app/renderer/js/components/tab.ts
@@ -1,54 +0,0 @@
-import WebView from './webview';
-import BaseComponent from './base';
-
-export interface TabProps {
-	role: string;
-	icon?: string;
-	name: string;
-	$root: Element;
-	onClick: () => void;
-	index: number;
-	tabIndex: number;
-	onHover?: () => void;
-	onHoverOut?: () => void;
-	webview: WebView;
-	materialIcon?: string;
-	onDestroy?: () => void;
-}
-
-export default class Tab extends BaseComponent {
-	props: TabProps;
-	webview: WebView;
-	$el: Element;
-	constructor(props: TabProps) {
-		super();
-
-		this.props = props;
-		this.webview = this.props.webview;
-	}
-
-	registerListeners(): void {
-		this.$el.addEventListener('click', this.props.onClick);
-		this.$el.addEventListener('mouseover', this.props.onHover);
-		this.$el.addEventListener('mouseout', this.props.onHoverOut);
-	}
-
-	showNetworkError(): void {
-		this.webview.forceLoad();
-	}
-
-	activate(): void {
-		this.$el.classList.add('active');
-		this.webview.load();
-	}
-
-	deactivate(): void {
-		this.$el.classList.remove('active');
-		this.webview.hide();
-	}
-
-	destroy(): void {
-		this.$el.parentNode.removeChild(this.$el);
-		this.webview.$el.parentNode.removeChild(this.webview.$el);
-	}
-}
--- a/app/renderer/js/components/webview.js
+++ b/app/renderer/js/components/webview.js
@@ -1,81 +1,50 @@
-import { ipcRenderer, remote } from 'electron';
+'use strict';

-import path from 'path';
-import fs from 'fs';
-import * as ConfigUtil from '../utils/config-util';
-import * as SystemUtil from '../utils/system-util';
-import BaseComponent from './base';
-import handleExternalLink from './handle-external-link';
+const path = require('path');
+const fs = require('fs');

-const { app, dialog } = remote;
+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');
-
-interface WebViewProps {
-	$root: Element;
-	index: number;
-	tabIndex: number;
-	url: any;
-	role: string;
-	name: string;
-	isActive: () => boolean;
-	switchLoading: (loading: any, url: string) => void;
-	onNetworkError: (index: number) => void;
-	nodeIntegration: boolean;
-	preload: boolean;
-	onTitleChange: any;
-	hasPermission?: (origin: string, permission: string) => boolean;
-}
-
-export default class WebView extends BaseComponent {
-	props: WebViewProps;
-	zoomFactor: number;
-	badgeCount: number;
-	loading: boolean;
-	customCSS: string;
-	$webviewsContainer: DOMTokenList;
-	$el: Electron.WebviewTag;
-	domReady?: Promise<void>;
-
-	// This is required because in main.js we access WebView.method as
-	// webview[method].
-	[key: string]: any;
-
-	constructor(props: WebViewProps) {
+class WebView extends BaseComponent {
+	constructor(props) {
 		super();

 		this.props = props;
-		this.zoomFactor = 1;
+
+		this.zoomFactor = 1.0;
 		this.loading = true;
 		this.badgeCount = 0;
 		this.customCSS = ConfigUtil.getConfigItem('customCSS');
 		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}

-	template(): string {
+	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"
-					name="${this.props.name}"
-					webpreferences="${this.props.nodeIntegration ? '' : 'contextIsolation, '}javascript=yes">
+					webpreferences="allowRunningInsecureContent, javascript=yes">
 				</webview>`;
 	}

-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
-		this.domReady = new Promise(resolve => {
-			this.$el.addEventListener('dom-ready', () => resolve(), true);
-		});
-		this.props.$root.append(this.$el);
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);

 		this.registerListeners();
 	}

-	registerListeners(): void {
+	registerListeners() {
 		this.$el.addEventListener('new-window', event => {
 			handleExternalLink.call(this, event);
 		});
@@ -124,48 +93,34 @@ export default class WebView extends BaseComponent {
 				this.$el.classList.add('onload');
 			}
 			this.loading = false;
-			this.props.switchLoading(false, this.props.url);
 			this.show();
-
-			// Refocus text boxes after reload
-			// Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
-			this.$el.blur();
-			this.$el.focus();
 		});

 		this.$el.addEventListener('did-fail-load', event => {
 			const { errorDescription } = event;
-			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
+			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
-				if (!this.props.url.includes('network.html')) {
-					this.props.onNetworkError(this.props.index);
-				}
+				this.props.onNetworkError();
 			}
 		});

 		this.$el.addEventListener('did-start-loading', () => {
-			const isSettingPage = this.props.url.includes('renderer/preference.html');
-			if (!isSettingPage) {
-				this.props.switchLoading(true, this.props.url);
+			let userAgent = SystemUtil.getUserAgent();
+			if (!userAgent) {
+				SystemUtil.setUserAgent(this.$el.getUserAgent());
+				userAgent = SystemUtil.getUserAgent();
 			}
-		});
-
-		this.$el.addEventListener('did-stop-loading', () => {
-			this.props.switchLoading(false, this.props.url);
+			this.$el.setUserAgent(userAgent);
 		});
 	}

-	getBadgeCount(title: string): number {
-		const messageCountInTitle = (/\((\d+)\)/).exec(title);
+	getBadgeCount(title) {
+		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
 		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
 	}

-	showNotificationSettings(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-notification-settings');
-	}
-
-	show(): void {
+	show() {
 		// Do not show WebView if another tab was selected and this tab should be in background.
 		if (!this.props.isActive()) {
 			return;
@@ -197,8 +152,8 @@ export default class WebView extends BaseComponent {
 				this.customCSS = null;
 				ConfigUtil.setConfigItem('customCSS', null);

-				const errorMessage = 'The custom css previously set is deleted!';
-				dialog.showErrorBox('custom css file deleted!', errorMessage);
+				const errMsg = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errMsg);
 				return;
 			}

@@ -206,27 +161,21 @@ export default class WebView extends BaseComponent {
 		}
 	}

-	focus(): void {
+	focus() {
 		// focus Webview and it's contents when Window regain focus.
 		const webContents = this.$el.getWebContents();
-		// HACK: webContents.isFocused() seems to be true even without the element
-		// being in focus. So, we check against `document.activeElement`.
-		if (webContents && this.$el !== document.activeElement) {
-			// HACK: Looks like blur needs to be called on the previously focused
-			// element to transfer focus correctly, in Electron v3.0.10
-			// See https://github.com/electron/electron/issues/15718
-			(document.activeElement as HTMLElement).blur();
+		if (webContents && !webContents.isFocused()) {
 			this.$el.focus();
 			webContents.focus();
 		}
 	}

-	hide(): void {
+	hide() {
 		this.$el.classList.add('disabled');
 		this.$el.classList.remove('active');
 	}

-	load(): void {
+	load() {
 		if (this.$el) {
 			this.show();
 		} else {
@@ -234,41 +183,40 @@ export default class WebView extends BaseComponent {
 		}
 	}

-	zoomIn(): void {
+	zoomIn() {
 		this.zoomFactor += 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	zoomOut(): void {
+	zoomOut() {
 		this.zoomFactor -= 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	zoomActualSize(): void {
-		this.zoomFactor = 1;
+	zoomActualSize() {
+		this.zoomFactor = 1.0;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	logOut(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'logout');
+	logOut() {
+		this.$el.executeJavaScript('logout()');
 	}

-	showShortcut(): void {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'shortcut');
+	showShortcut() {
+		this.$el.executeJavaScript('shortcut()');
 	}

-	openDevTools(): void {
+	openDevTools() {
 		this.$el.openDevTools();
 	}

-	back(): void {
+	back() {
 		if (this.$el.canGoBack()) {
 			this.$el.goBack();
-			this.focus();
 		}
 	}

-	canGoBackButton(): void {
+	canGoBackButton() {
 		const $backButton = document.querySelector('#actions-container #back-action');
 		if (this.$el.canGoBack()) {
 			$backButton.classList.remove('disable');
@@ -277,27 +225,23 @@ export default class WebView extends BaseComponent {
 		}
 	}

-	forward(): void {
+	forward() {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
 		}
 	}

-	reload(): void {
+	reload() {
 		this.hide();
 		// Shows the loading indicator till the webview is reloaded
 		this.$webviewsContainer.remove('loaded');
 		this.loading = true;
-		this.props.switchLoading(true, this.props.url);
 		this.$el.reload();
 	}

-	forceLoad(): void {
-		this.init();
-	}
-
-	async send(channel: string, ...parameters: any[]): Promise<void> {
-		await this.domReady;
-		this.$el.send(channel, ...parameters);
+	send(...param) {
+		this.$el.send(...param);
 	}
 }
+
+module.exports = WebView;
--- a/app/renderer/js/electron-bridge.js
+++ b/app/renderer/js/electron-bridge.js
@@ -0,0 +1,39 @@
+const events = require('events');
+const { ipcRenderer } = require('electron');
+
+// we have and will have some non camelcase stuff
+// while working with zulip so just turning the rule off
+// for the whole file.
+/* eslint-disable camelcase */
+class ElectronBridge extends events {
+	send_event(...args) {
+		this.emit(...args);
+	}
+
+	on_event(...args) {
+		this.on(...args);
+	}
+}
+
+const electron_bridge = new ElectronBridge();
+
+electron_bridge.on('total_unread_count', (...args) => {
+	ipcRenderer.send('unread-count', ...args);
+});
+
+electron_bridge.on('realm_name', (...args) => {
+	ipcRenderer.send('realm-name-changed', ...args);
+});
+
+electron_bridge.on('realm_icon_url', iconURL => {
+	const serverURL = location.origin;
+	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
+	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
+});
+
+// this follows node's idiomatic implementation of event
+// emitters to make event handling more simpler instead of using
+// functions zulip side will emit event using ElectronBrigde.send_event
+// which is alias of .emit and on this side we can handle the data by adding
+// a listener for the event.
+module.exports = electron_bridge;
--- a/app/renderer/js/electron-bridge.ts
+++ b/app/renderer/js/electron-bridge.ts
@@ -1,73 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import { EventEmitter } from 'events';
-
-import { NotificationData, newNotification } from './notification';
-
-type ListenerType = ((...args: any[]) => void);
-
-class ElectronBridge extends EventEmitter {
-	send_notification_reply_message_supported: boolean;
-	idle_on_system: boolean;
-	last_active_on_system: number;
-
-	constructor() {
-		super();
-		this.send_notification_reply_message_supported = false;
-		// Indicates if the user is idle or not
-		this.idle_on_system = false;
-
-		// Indicates the time at which user was last active
-		this.last_active_on_system = Date.now();
-	}
-
-	send_event = (eventName: string | symbol, ...args: any[]): void => {
-		this.emit(eventName, ...args);
-	};
-
-	on_event = (eventName: string, listener: ListenerType): void => {
-		this.on(eventName, listener);
-	};
-
-	new_notification = (
-		title: string,
-		options: NotificationOptions | undefined,
-		dispatch: (type: string, eventInit: EventInit) => boolean
-	): NotificationData =>
-		newNotification(title, options, dispatch);
-
-	get_idle_on_system = (): boolean => this.idle_on_system;
-
-	get_last_active_on_system = (): number => this.last_active_on_system;
-
-	get_send_notification_reply_message_supported = (): boolean =>
-		this.send_notification_reply_message_supported;
-
-	set_send_notification_reply_message_supported = (value: boolean): void => {
-		this.send_notification_reply_message_supported = value;
-	};
-}
-
-const electron_bridge = new ElectronBridge();
-
-electron_bridge.on('total_unread_count', (...args) => {
-	ipcRenderer.send('unread-count', ...args);
-});
-
-electron_bridge.on('realm_name', realmName => {
-	const serverURL = location.origin;
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
-});
-
-electron_bridge.on('realm_icon_url', iconURL => {
-	const serverURL = location.origin;
-	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
-	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
-});
-
-// this follows node's idiomatic implementation of event
-// emitters to make event handling more simpler instead of using
-// functions zulip side will emit event using ElectronBrigde.send_event
-// which is alias of .emit and on this side we can handle the data by adding
-// a listener for the event.
-export default electron_bridge;
--- a/app/renderer/js/feedback.js
+++ b/app/renderer/js/feedback.js
@@ -1,16 +1,7 @@
-import { remote } from 'electron';
-import SendFeedback from '@electron-elements/send-feedback';
-
-import path from 'path';
-import fs from 'fs';
-
-const { app } = remote;
-
-interface SendFeedback extends HTMLElement {
-	[key: string]: any;
-}
-
-type SendFeedbackType = SendFeedback;
+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 = `
@@ -31,29 +22,15 @@ button {
 `;

 customElements.define('send-feedback', SendFeedback);
-export const sendFeedback: SendFeedbackType = document.querySelector('send-feedback');
-export const feedbackHolder = sendFeedback.parentElement;
-
-/* eslint-disable no-multi-str */
+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...\n\n\
---\n\
-<!-- Please Include: -->\n\
- **Operating System**:\n\
-  - [ ] Windows\n\
-  - [ ] Linux/Ubuntu\n\
-  - [ ] macOS\n\
- **Clear steps to reproduce the issue**:\n\
- **Relevant error messages and/or screenshots**:\n\
-';
-
-/* eslint-enable no-multi-str */
-
+sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
 sendFeedback.buttonLabel = 'Report Issue';
 sendFeedback.loaderSuccessText = '';

@@ -61,10 +38,10 @@ sendFeedback.useReporter('emailReporter', {
 	email: 'akash@zulipchat.com'
 });

-feedbackHolder.addEventListener('click', (event: Event) => {
-	// only remove the class if the grey out faded
-	// part is clicked and not the feedback element itself
-	if (event.target === event.currentTarget) {
+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');
 	}
 });
@@ -78,3 +55,8 @@ sendFeedback.addEventListener('feedback-submitted', () => {
 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
+};
--- a/app/renderer/js/injected.ts
+++ b/app/renderer/js/injected.ts
@@ -1,122 +0,0 @@
-'use strict';
-
-(() => {
-	const zulipWindow = window as typeof window & {
-		electron_bridge: any;
-		narrow: any;
-		page_params: any;
-		raw_electron_bridge: any;
-	};
-
-	const electron_bridge = {
-		...zulipWindow.raw_electron_bridge,
-
-		get idle_on_system() {
-			return this.get_idle_on_system();
-		},
-
-		get last_active_on_system() {
-			return this.get_last_active_on_system();
-		},
-
-		get send_notification_reply_message_supported() {
-			return this.get_send_notification_reply_message_supported();
-		},
-
-		set send_notification_reply_message_supported(value: boolean) {
-			this.set_send_notification_reply_message_supported(value);
-		}
-	};
-
-	zulipWindow.electron_bridge = electron_bridge;
-
-	(async () => {
-		if (document.readyState === 'loading') {
-			await new Promise(resolve => {
-				document.addEventListener('DOMContentLoaded', () => {
-					resolve();
-				});
-			});
-		}
-
-		const { page_params } = zulipWindow;
-		if (page_params) {
-			electron_bridge.send_event('zulip-loaded', {
-				serverLanguage: page_params.default_language
-			});
-		}
-	})();
-
-	electron_bridge.on_event('narrow-by-topic', (id: string) => {
-		const { narrow } = zulipWindow;
-		const narrowByTopic = narrow.by_topic || narrow.by_subject;
-		narrowByTopic(id, { trigger: 'notification' });
-	});
-
-	function attributeListener<T extends EventTarget>(type: string): PropertyDescriptor {
-		const symbol = Symbol('on' + type);
-
-		function listener(this: T, ev: Event): void {
-			if ((this as any)[symbol].call(this, ev) === false) {
-				ev.preventDefault();
-			}
-		}
-
-		return {
-			configurable: true,
-			enumerable: true,
-			get(this: T) {
-				return (this as any)[symbol];
-			},
-			set(this: T, value: unknown) {
-				if (typeof value === 'function') {
-					if (!(symbol in this)) {
-						this.addEventListener(type, listener);
-					}
-					(this as any)[symbol] = value;
-				} else if (symbol in this) {
-					this.removeEventListener(type, listener);
-					delete (this as any)[symbol];
-				}
-			}
-		};
-	}
-
-	const NativeNotification = Notification;
-
-	class InjectedNotification extends EventTarget {
-		constructor(title: string, options?: NotificationOptions) {
-			super();
-			Object.assign(
-				this,
-				electron_bridge.new_notification(title, options, (type: string, eventInit: EventInit) =>
-					this.dispatchEvent(new Event(type, eventInit))
-				)
-			);
-		}
-
-		static get maxActions(): number {
-			return NativeNotification.maxActions;
-		}
-
-		static get permission(): NotificationPermission {
-			return NativeNotification.permission;
-		}
-
-		static async requestPermission(callback?: NotificationPermissionCallback): Promise<NotificationPermission> {
-			if (callback) {
-				callback(await Promise.resolve(NativeNotification.permission));
-			}
-			return NativeNotification.permission;
-		}
-	}
-
-	Object.defineProperties(InjectedNotification.prototype, {
-		onclick: attributeListener('click'),
-		onclose: attributeListener('close'),
-		onerror: attributeListener('error'),
-		onshow: attributeListener('show')
-	});
-
-	window.Notification = InjectedNotification as any;
-})();
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -0,0 +1,625 @@
+'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 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')}`,
+			showDownloadFolder: false
+		};
+
+		// 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 = 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);
+		});
+
+		ipcRenderer.on('update-realm-icon', (event, serverURL, iconURL) => {
+			DomainUtil.getDomains().forEach((domain, index) => {
+				if (domain.url.includes(serverURL)) {
+					DomainUtil.saveServerIcon(iconURL).then(localIconUrl => {
+						const serverImgsSelector = `.tab .server-icons`;
+						const serverImgs = document.querySelectorAll(serverImgsSelector);
+						serverImgs[index].src = localIconUrl;
+
+						domain.icon = localIconUrl;
+						DomainUtil.db.push(`/domains[${index}]`, domain, true);
+						DomainUtil.reloadDB();
+					});
+				}
+			});
+		});
+	}
+
+	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();
+	}
+};
--- a/app/renderer/js/main.ts
+++ b/app/renderer/js/main.ts
--- a/app/renderer/js/notification/darwin-notifications.js
+++ b/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;
--- a/app/renderer/js/notification/darwin-notifications.ts
+++ b/app/renderer/js/notification/darwin-notifications.ts
@@ -1,111 +0,0 @@
-import { ipcRenderer } from 'electron';
-import {
-	appId, customReply, focusCurrentServer, parseReply
-} from './helpers';
-
-import MacNotifier from 'node-mac-notifier';
-import * as ConfigUtil from '../utils/config-util';
-import electron_bridge from '../electron-bridge';
-
-type ReplyHandler = (response: string) => void;
-type ClickHandler = () => void;
-let replyHandler: ReplyHandler;
-let clickHandler: ClickHandler;
-
-interface NotificationHandlerArgs {
-	response: string;
-}
-
-class DarwinNotification {
-	tag: string;
-
-	constructor(title: string, options: NotificationOptions) {
-		const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
-		const { icon } = options;
-		const profilePic = new URL(icon, location.href).href;
-
-		this.tag = options.tag;
-		const notification = new MacNotifier(title, Object.assign(options, {
-			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(): void {
-		return; // eslint-disable-line no-useless-return
-	}
-
-	// Override default Notification permission
-	static get permission(): NotificationPermission {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
-	}
-
-	get onreply(): ReplyHandler {
-		return replyHandler;
-	}
-
-	set onreply(handler: ReplyHandler) {
-		replyHandler = handler;
-	}
-
-	get onclick(): ClickHandler {
-		return clickHandler;
-	}
-
-	set onclick(handler: ClickHandler) {
-		clickHandler = handler;
-	}
-
-	// not something that is common or
-	// used by zulip server but added to be
-	// future proff.
-	addEventListener(event: string, handler: ClickHandler | ReplyHandler): void {
-		if (event === 'click') {
-			clickHandler = handler as ClickHandler;
-		}
-
-		if (event === 'reply') {
-			replyHandler = handler as ReplyHandler;
-		}
-	}
-
-	async notificationHandler({ response }: NotificationHandlerArgs): Promise<void> {
-		response = await parseReply(response);
-		focusCurrentServer();
-		if (electron_bridge.send_notification_reply_message_supported) {
-			electron_bridge.send_event('send_notification_reply_message', this.tag, response);
-			return;
-		}
-
-		electron_bridge.emit('narrow-by-topic', this.tag);
-		if (replyHandler) {
-			replyHandler(response);
-			return;
-		}
-
-		customReply(response);
-	}
-
-	// method specific to notification api
-	// used by zulip
-	close(): void {
-		return; // eslint-disable-line no-useless-return
-	}
-}
-
-module.exports = DarwinNotification;
--- a/app/renderer/js/notification/default-notification.js
+++ b/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;
--- a/app/renderer/js/notification/default-notification.ts
+++ b/app/renderer/js/notification/default-notification.ts
@@ -1,28 +0,0 @@
-import { ipcRenderer } from 'electron';
-import { focusCurrentServer } from './helpers';
-
-import * as ConfigUtil from '../utils/config-util';
-
-const NativeNotification = window.Notification;
-export default class BaseNotification extends NativeNotification {
-	constructor(title: string, options: NotificationOptions) {
-		options.silent = true;
-		super(title, options);
-
-		this.addEventListener('click', () => {
-			// focus to the server who sent the
-			// notification if not focused already
-			focusCurrentServer();
-			ipcRenderer.send('focus-app');
-		});
-	}
-
-	static async requestPermission(): Promise<NotificationPermission> {
-		return this.permission;
-	}
-
-	// Override default Notification permission
-	static get permission(): NotificationPermission {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
-	}
-}
--- a/app/renderer/js/notification/helpers.js
+++ b/app/renderer/js/notification/helpers.js
@@ -1,6 +1,5 @@
-import { remote } from 'electron';
-
-import Logger from '../utils/logger-util';
+const { remote } = require('electron');
+const Logger = require('../utils/logger-util.js');

 const logger = new Logger({
 	file: 'errors.log',
@@ -8,34 +7,42 @@ const logger = new Logger({
 });

 // Do not change this
-export const appId = 'org.zulip.zulip-electron';
+const appId = 'org.zulip.zulip-electron';

-export type BotListItem = [string, string];
-const botsList: BotListItem[] = [];
+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
-export async function loadBots(): Promise<void> {
+function loadBots(sync = false) {
+	const { $ } = window;
 	botsList.length = 0;
-	const response = await fetch('/json/users');
-	if (response.ok) {
-		const { members } = await response.json();
-		members.forEach((membersRow: any) => {
-			if (membersRow.is_bot) {
-				const bot = `@${membersRow.full_name}`;
-				const mention = `@**${bot.replace(/^@/, '')}**`;
-				botsList.push([bot, mention]);
-			}
+	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);
 		});
-		botsListLoaded = true;
-	} else {
-		logger.log('Load bots request failed: ', await response.text());
-		logger.log('Load bots request status: ', response.status);
+	if (sync) {
+		$.ajaxSetup({async: true});
 	}
 }

-export function checkElements(...elements: any[]): boolean {
+function checkElements(...elements) {
 	let status = true;
 	elements.forEach(element => {
 		if (element === null || element === undefined) {
@@ -45,13 +52,13 @@ export function checkElements(...elements: any[]): boolean {
 	return status;
 }

-export function customReply(reply: string): void {
+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: HTMLInputElement = document.querySelector('#compose-textarea');
-	const messagebox: HTMLButtonElement = document.querySelector(messageboxSelector);
-	const sendButton: HTMLButtonElement = document.querySelector(buttonSelector);
+	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);
@@ -70,22 +77,19 @@ const webContentsId = webContents.id;

 // this function will focus the server that sent
 // the notification. Main function implemented in main.js
-export function focusCurrentServer(): void {
-	currentWindow.webContents.send('focus-webview-with-id', webContentsId);
+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
-export async function parseReply(reply: string): Promise<string> {
+function parseReply(reply) {
 	const usersDiv = document.querySelectorAll('#user_presences li');
 	const streamHolder = document.querySelectorAll('#stream_filters li');
-
-	type UsersItem = BotListItem;
-	type StreamsItem = BotListItem;
-	const users: UsersItem[] = [];
-	const streams: StreamsItem[] = [];
+	const users = [];
+	const streams = [];

 	usersDiv.forEach(userRow => {
 		const anchor = userRow.querySelector('span a');
@@ -117,9 +121,9 @@ export async function parseReply(reply: string): Promise<string> {
 		reply = reply.replace(regex, streamMention);
 	});

-	// If botsList isn't completely loaded yet, make a request for list
-	if (!botsListLoaded) {
-		await loadBots();
+	// 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
@@ -134,3 +138,18 @@ export async function parseReply(reply: string): Promise<string> {
 	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
+};
--- a/app/renderer/js/notification/index.js
+++ b/app/renderer/js/notification/index.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const {
+  remote: { app }
+} = require('electron');
+
+const params = require('../utils/params-util.js');
+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', () => {
+	// eslint-disable-next-line no-undef, camelcase
+	if (params.isPageParams() && page_params.realm_uri) {
+		loadBots();
+	}
+});
--- a/app/renderer/js/notification/index.ts
+++ b/app/renderer/js/notification/index.ts
@@ -1,72 +0,0 @@
-import { remote } from 'electron';
-import electron_bridge from '../electron-bridge';
-import { appId, loadBots } from './helpers';
-
-import DefaultNotification from './default-notification';
-const { app } = remote;
-
-// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
-// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
-app.setAppUserModelId(appId);
-
-let Notification = DefaultNotification;
-
-if (process.platform === 'darwin') {
-	Notification = require('./darwin-notifications');
-}
-
-export interface NotificationData {
-	close(): void;
-	title: string;
-	dir: NotificationDirection;
-	lang: string;
-	body: string;
-	tag: string;
-	image: string;
-	icon: string;
-	badge: string;
-	vibrate: readonly number[];
-	timestamp: number;
-	renotify: boolean;
-	silent: boolean;
-	requireInteraction: boolean;
-	data: unknown;
-	actions: readonly NotificationAction[];
-}
-
-export function newNotification(
-	title: string,
-	options: NotificationOptions | undefined,
-	dispatch: (type: string, eventInit: EventInit) => boolean
-): NotificationData {
-	const notification = new Notification(title, options);
-	for (const type of ['click', 'close', 'error', 'show']) {
-		notification.addEventListener(type, (ev: Event) => {
-			if (!dispatch(type, ev)) {
-				ev.preventDefault();
-			}
-		});
-	}
-	return {
-		close: () => notification.close(),
-		title: notification.title,
-		dir: notification.dir,
-		lang: notification.lang,
-		body: notification.body,
-		tag: notification.tag,
-		image: notification.image,
-		icon: notification.icon,
-		badge: notification.badge,
-		vibrate: notification.vibrate,
-		timestamp: notification.timestamp,
-		renotify: notification.renotify,
-		silent: notification.silent,
-		requireInteraction: notification.requireInteraction,
-		data: notification.data,
-		actions: notification.actions
-	};
-}
-
-electron_bridge.once('zulip-loaded', () => {
-	loadBots();
-});
--- a/app/renderer/js/pages/network.js
+++ b/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();
+};
--- a/app/renderer/js/pages/network.ts
+++ b/app/renderer/js/pages/network.ts
@@ -1,10 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-export function init($reconnectButton: Element, $settingsButton: Element): void {
-	$reconnectButton.addEventListener('click', () => {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	});
-	$settingsButton.addEventListener('click', () => {
-		ipcRenderer.send('forward-message', 'open-settings');
-	});
-}
--- a/app/renderer/js/pages/preference/add-certificate.js
+++ b/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;
--- a/app/renderer/js/pages/preference/add-certificate.ts
+++ b/app/renderer/js/pages/preference/add-certificate.ts
@@ -1,98 +0,0 @@
-'use-strict';
-
-import { remote, OpenDialogOptions } from 'electron';
-
-import path from 'path';
-import BaseComponent from '../../components/base';
-import * as CertificateUtil from '../../utils/certificate-util';
-import * as DomainUtil from '../../utils/domain-util';
-import * as t from '../../utils/translation-util';
-
-interface AddCertificateProps {
-	$root: Element;
-}
-
-const { dialog } = remote;
-
-export default class AddCertificate extends BaseComponent {
-	props: AddCertificateProps;
-	_certFile: string;
-	$addCertificate: Element | null;
-	addCertificateButton: Element | null;
-	serverUrl: HTMLInputElement | null;
-	constructor(props: AddCertificateProps) {
-		super();
-		this.props = props;
-		this._certFile = '';
-	}
-
-	template(): string {
-		return `
-			<div class="settings-card certificates-card">
-				<div class="certificate-input">
-					<div>${t.__('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>${t.__('Certificate file')}</div>
-					<button class="green" id="add-certificate-button">${t.__('Upload')}</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$addCertificate = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$addCertificate);
-		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
-		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	validateAndAdd(): void {
-		const certificate = this._certFile;
-		const serverUrl = this.serverUrl.value;
-		if (certificate !== '' && serverUrl !== '') {
-			const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
-			const fileName = path.basename(certificate);
-			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'}`);
-		}
-	}
-
-	async addHandler(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
-			title: 'Select file',
-			properties: ['openFile'],
-			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
-		};
-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			this._certFile = filePaths[0] || '';
-			this.validateAndAdd();
-		}
-	}
-
-	initListeners(): void {
-		this.addCertificateButton.addEventListener('click', () => {
-			this.addHandler();
-		});
-
-		this.serverUrl.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
-				this.addHandler();
-			}
-		});
-	}
-}
--- a/app/renderer/js/pages/preference/badge-settings.js
+++ b/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();
--- a/app/renderer/js/pages/preference/badge-settings.ts
+++ b/app/renderer/js/pages/preference/badge-settings.ts
@@ -1,43 +0,0 @@
-import electron, { app } from 'electron';
-
-import * as ConfigUtil from '../../utils/config-util';
-
-function showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
-	if (process.platform === 'win32') {
-		updateOverlayIcon(messageCount, mainWindow);
-	} else {
-		app.badgeCount = messageCount;
-	}
-}
-
-function hideBadgeCount(mainWindow: electron.BrowserWindow): void {
-	if (process.platform === 'win32') {
-		mainWindow.setOverlayIcon(null, '');
-	} else {
-		app.badgeCount = 0;
-	}
-}
-
-export function updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
-	if (ConfigUtil.getConfigItem('badgeOption', true)) {
-		showBadgeCount(badgeCount, mainWindow);
-	} else {
-		hideBadgeCount(mainWindow);
-	}
-}
-
-function updateOverlayIcon(messageCount: number, mainWindow: electron.BrowserWindow): void {
-	if (!mainWindow.isFocused()) {
-		mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
-	}
-	if (messageCount === 0) {
-		mainWindow.setOverlayIcon(null, '');
-	} else {
-		mainWindow.webContents.send('render-taskbar-icon', messageCount);
-	}
-}
-
-export function updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
-	const img = electron.nativeImage.createFromDataURL(data);
-	mainWindow.setOverlayIcon(img, text);
-}
--- a/app/renderer/js/pages/preference/base-section.js
+++ b/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;
--- a/app/renderer/js/pages/preference/base-section.ts
+++ b/app/renderer/js/pages/preference/base-section.ts
@@ -1,65 +0,0 @@
-import { ipcRenderer } from 'electron';
-import escape from 'escape-html';
-
-import BaseComponent from '../../components/base';
-
-interface BaseSectionProps {
-	$element: HTMLElement;
-	disabled?: boolean;
-	value: boolean;
-	clickHandler: () => void;
-}
-
-export default class BaseSection extends BaseComponent {
-	generateSettingOption(props: BaseSectionProps): void {
-		const {$element, disabled, value, clickHandler} = props;
-
-		$element.innerHTML = '';
-
-		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled));
-		$element.append($optionControl);
-
-		if (!disabled) {
-			$optionControl.addEventListener('click', clickHandler);
-		}
-	}
-
-	generateOptionTemplate(settingOption: boolean, disabled?: boolean): string {
-		const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>';
-		if (settingOption) {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox" checked disabled>
-					  ${label}
-					</div>
-				</div>
-			`;
-		} else {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox">
-					  ${label}
-					</div>
-				</div>
-			`;
-		}
-	}
-
-	/* a method that in future can be used to create dropdown menus using <select> <option> tags.
-		it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
-	*/
-	generateSelectTemplate(options: {[key: string]: string}, className?: string, idName?: string): string {
-		let select = `<select class="${escape(className)}" id="${escape(idName)}">\n`;
-		Object.keys(options).forEach(key => {
-			select += `<option name="${escape(key)}" value="${escape(key)}">${escape(options[key])}</option>\n`;
-		});
-		select += '</select>';
-		return select;
-	}
-
-	reloadApp(): void {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	}
-}
--- a/app/renderer/js/pages/preference/connected-org-section.js
+++ b/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;
--- a/app/renderer/js/pages/preference/connected-org-section.ts
+++ b/app/renderer/js/pages/preference/connected-org-section.ts
@@ -1,89 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import BaseSection from './base-section';
-import * as DomainUtil from '../../utils/domain-util';
-import ServerInfoForm from './server-info-form';
-import AddCertificate from './add-certificate';
-import FindAccounts from './find-accounts';
-import * as t from '../../utils/translation-util';
-
-interface ConnectedOrgSectionProps {
-	$root: Element;
-}
-
-export default class ConnectedOrgSection extends BaseSection {
-	props: ConnectedOrgSectionProps;
-	$serverInfoContainer: Element | null;
-	$existingServers: Element | null;
-	$newOrgButton: HTMLButtonElement | null;
-	$addCertificateContainer: Element | null;
-	$findAccountsContainer: Element | null;
-	constructor(props: ConnectedOrgSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">${t.__('Connected organizations')}</div>
-				<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
-				<div id="server-info-container"></div>
-				<div id="new-org-button"><button class="green sea w-250">${t.__('Connect to another organization')}</button></div>
-				<div class="page-title">${t.__('Add Custom Certificates')}</div>
-				<div id="add-certificate-container"></div>
-				<div class="page-title">${t.__('Find accounts by email')}</div>
-				<div id="find-accounts-container"></div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.innerHTML = '';
-
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
-
-		this.$serverInfoContainer = document.querySelector('#server-info-container');
-		this.$existingServers = document.querySelector('#existing-servers');
-		this.$newOrgButton = document.querySelector('#new-org-button');
-		this.$addCertificateContainer = document.querySelector('#add-certificate-container');
-		this.$findAccountsContainer = document.querySelector('#find-accounts-container');
-
-		const noServerText = t.__('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 (const [i, server] of servers.entries()) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server,
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-
-		this.$newOrgButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'open-org-tab');
-		});
-
-		this.initAddCertificate();
-		this.initFindAccounts();
-	}
-
-	initAddCertificate(): void {
-		new AddCertificate({
-			$root: this.$addCertificateContainer
-		}).init();
-	}
-
-	initFindAccounts(): void {
-		new FindAccounts({
-			$root: this.$findAccountsContainer
-		}).init();
-	}
-}
--- a/app/renderer/js/pages/preference/find-accounts.ts
+++ b/app/renderer/js/pages/preference/find-accounts.ts
@@ -1,78 +0,0 @@
-'use-strict';
-
-import BaseComponent from '../../components/base';
-import * as LinkUtil from '../../utils/link-util';
-import * as t from '../../utils/translation-util';
-
-interface FindAccountsProps {
-	$root: Element;
-}
-
-export default class FindAccounts extends BaseComponent {
-	props: FindAccountsProps;
-	$findAccounts: Element | null;
-	$findAccountsButton: Element | null;
-	$serverUrlField: HTMLInputElement | null;
-	constructor(props: FindAccountsProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="settings-card certificate-card">
-				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
-					<input class="setting-input-value" value="zulipchat.com"/>
-				</div>
-				<div class="certificate-input">
-					<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$findAccounts = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$findAccounts);
-		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
-		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	findAccounts(url: string): void {
-		if (!url) {
-			return;
-		}
-		if (!url.startsWith('http')) {
-			url = 'https://' + url;
-		}
-		LinkUtil.openBrowser(new URL('/accounts/find', url));
-	}
-
-	initListeners(): void {
-		this.$findAccountsButton.addEventListener('click', () => {
-			this.findAccounts(this.$serverUrlField.value);
-		});
-
-		this.$serverUrlField.addEventListener('click', () => {
-			if (this.$serverUrlField.value === 'zulipchat.com') {
-				this.$serverUrlField.setSelectionRange(0, 0);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
-				this.findAccounts(this.$serverUrlField.value);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('input', () => {
-			if (this.$serverUrlField.value) {
-				this.$serverUrlField.classList.remove('invalid-input-value');
-			} else {
-				this.$serverUrlField.classList.add('invalid-input-value');
-			}
-		});
-	}
-}
--- a/app/renderer/js/pages/preference/general-section.js
+++ b/app/renderer/js/pages/preference/general-section.js
@@ -1,117 +1,89 @@
-import { ipcRenderer, remote, OpenDialogOptions } from 'electron';
-
-import path from 'path';
-import fs from 'fs-extra';
+'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');

-import BaseSection from './base-section';
-import * as ConfigUtil from '../../utils/config-util';
-import * as EnterpriseUtil from '../../utils/enterprise-util';
-import * as t from '../../utils/translation-util';
-import supportedLocales from '../../../../translations/supported-locales.json';
-
-interface GeneralSectionProps {
-	$root: Element;
-}
-
-export default class GeneralSection extends BaseSection {
-	props: GeneralSectionProps;
-	constructor(props: GeneralSectionProps) {
+class GeneralSection extends BaseSection {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
            <div class="settings-pane">
-                <div class="title">${t.__('Appearance')}</div>
+                <div class="title">Appearance</div>
                <div id="appearance-option-settings" class="settings-card">
 					<div class="setting-row" id="tray-option">
-						<div class="setting-description">${t.__('Show app icon in system tray')}</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="menubar-option" style= "display:${process.platform === 'darwin' ? 'none' : ''}">
-						<div class="setting-description">${t.__('Auto hide menu bar (Press Alt key to display)')}</div>
+						<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">${t.__('Show sidebar')} (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
+						<div class="setting-description">Show sidebar (<span class="code">Cmd Or Ctrl+Shift+S</span>)</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="badge-option">
-						<div class="setting-description">${t.__('Show app unread badge')}</div>
+						<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">${t.__('Bounce dock on new private message')}</div>
+						<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">${t.__('Flash taskbar on new message')}</div>
+						<div class="setting-description">Flash taskbar on new message</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Desktop Notifications')}</div>
+				<div class="title">Desktop Notification</div>
 				<div class="settings-card">
 					<div class="setting-row" id="show-notification-option">
-						<div class="setting-description">${t.__('Show desktop notifications')}</div>
+						<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">${t.__('Mute all sounds from Zulip')}</div>
+						<div class="setting-description">Mute all sounds from Zulip</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('App Updates')}</div>
+				<div class="title">App Updates</div>
 				<div class="settings-card">
 				<div class="setting-row" id="autoupdate-option">
-						<div class="setting-description">${t.__('Enable auto updates')}</div>
+						<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">${t.__('Get beta updates')}</div>
+						<div class="setting-description">Get beta updates</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Functionality')}</div>
+				<div class="title">Functionality</div>
                <div class="settings-card">
 					<div class="setting-row" id="startAtLogin-option">
-						<div class="setting-description">${t.__('Start app at login')}</div>
+						<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">${t.__('Always start minimized')}</div>
-						<div class="setting-control"></div>
-					</div>
-					<div class="setting-row" id="quitOnClose-option">
-						<div class="setting-description">${t.__('Quit when the window is closed')}</div>
+						<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">${t.__('Enable spellchecker (requires restart)')}</div>
+						<div class="setting-description">Enable Spellchecker (requires restart)</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">${t.__('Advanced')}</div>
+				<div class="title">Add custom CSS</div>
 				<div class="settings-card">
-
-					<div class="setting-row" id="enable-error-reporting">
-						<div class="setting-description">${t.__('Enable error reporting (requires restart)')}</div>
-						<div class="setting-control"></div>
-					</div>
-					
-					<div class="setting-row" id="app-language">
-						<div class="setting-description">${t.__('App language (requires restart)')}</div>
-						<div  id="lang-div" class="lang-div"></div>
-					</div>
-
 					<div class="setting-row" id="add-custom-css">
 						<div class="setting-description">
-							${t.__('Add custom CSS')}
+							This will inject the selected css stylesheet in all the added accounts
 						</div>
-						<button class="custom-css-button green">${t.__('Upload')}</button>
+						<button class="custom-css-button blue">Add</button>
 					</div>
 					<div class="setting-row" id="remove-custom-css">
 						<div class="setting-description">
@@ -119,38 +91,42 @@ export default class GeneralSection extends BaseSection {
 						</div>
 						<div class="action red" id="css-delete-action">
 							<i class="material-icons">indeterminate_check_box</i>
-							<span>${t.__('Delete')}</span>
+							<span>Delete</span>
 						</div>
 					</div>
+				</div>
+				<div class="title">Advanced</div>
+				<div class="settings-card">
+				<div class="setting-row" id="show-download-folder">
+					<div class="setting-description">Show downloaded file in the file manager</div>
+					<div class="setting-control"></div>
+				</div>
 					<div class="setting-row" id="download-folder">
 						<div class="setting-description">
-							${t.__('Default download location')}
+							Default download location
 						</div>
-						<button class="download-folder-button green">${t.__('Change')}</button>
+						<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', `${app.getPath('downloads')}`)}</div>
 						</div>
 					</div>
-					<div class="setting-row" id="prompt-download">
-						<div class="setting-description">${t.__('Ask where to save files before downloading')}</div>
-						<div class="setting-control"></div>
-					</div>
+
 				</div>
-				<div class="title">${t.__('Reset Application Data')}</div>
+				<div class="title">Reset Application Data</div>
                <div class="settings-card">
 					<div class="setting-row" id="resetdata-option">
-						<div class="setting-description">${t.__('This will delete all application data including all added accounts and preferences')}
+						<div class="setting-description">This will delete all application data including all added accounts and preferences
 						</div>
-						<button class="reset-data-button red w-150">${t.__('Reset App Data')}</button>
+						<button class="reset-data-button blue">Reset App Data</button>
 					</div>
 				</div>
-			</div>
+            </div>
 		`;
 	}

-	init(): void {
+	init() {
 		this.props.$root.innerHTML = this.template();
 		this.updateTrayOption();
 		this.updateBadgeOption();
@@ -167,10 +143,7 @@ export default class GeneralSection extends BaseSection {
 		this.showCustomCSSPath();
 		this.removeCustomCSS();
 		this.downloadFolder();
-		this.updateQuitOnCloseOption();
-		this.updatePromptDownloadOption();
-		this.enableErrorReporting();
-		this.setLocale();
+		this.showDownloadFolder();

 		// Platform specific settings

@@ -182,14 +155,9 @@ export default class GeneralSection extends BaseSection {
 		if (process.platform === 'darwin') {
 			this.updateDockBouncing();
 		}
-
-		// Auto hide menubar on Windows and Linux
-		if (process.platform !== 'darwin') {
-			this.updateMenubarOption();
-		}
 	}

-	updateTrayOption(): void {
+	updateTrayOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#tray-option .setting-control'),
 			value: ConfigUtil.getConfigItem('trayIcon', true),
@@ -202,20 +170,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateMenubarOption(): void {
-		this.generateSettingOption({
-			$element: document.querySelector('#menubar-option .setting-control'),
-			value: ConfigUtil.getConfigItem('autoHideMenubar', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
-				ipcRenderer.send('toggle-menubar', newValue);
-				this.updateMenubarOption();
-			}
-		});
-	}
-
-	updateBadgeOption(): void {
+	updateBadgeOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#badge-option .setting-control'),
 			value: ConfigUtil.getConfigItem('badgeOption', true),
@@ -228,7 +183,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateDockBouncing(): void {
+	updateDockBouncing() {
 		this.generateSettingOption({
 			$element: document.querySelector('#dock-bounce-option .setting-control'),
 			value: ConfigUtil.getConfigItem('dockBouncing', true),
@@ -240,7 +195,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateFlashTaskbar(): void {
+	updateFlashTaskbar() {
 		this.generateSettingOption({
 			$element: document.querySelector('#flash-taskbar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
@@ -252,38 +207,31 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	autoUpdateOption(): void {
+	autoUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#autoupdate-option .setting-control'),
-			disabled: EnterpriseUtil.configItemExists('autoUpdate'),
 			value: ConfigUtil.getConfigItem('autoUpdate', true),
 			clickHandler: () => {
 				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
 				ConfigUtil.setConfigItem('autoUpdate', newValue);
-				if (!newValue) {
-					ConfigUtil.setConfigItem('betaUpdate', false);
-					this.betaUpdateOption();
-				}
 				this.autoUpdateOption();
 			}
 		});
 	}

-	betaUpdateOption(): void {
+	betaUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#betaupdate-option .setting-control'),
 			value: ConfigUtil.getConfigItem('betaUpdate', false),
 			clickHandler: () => {
 				const newValue = !ConfigUtil.getConfigItem('betaUpdate');
-				if (ConfigUtil.getConfigItem('autoUpdate')) {
-					ConfigUtil.setConfigItem('betaUpdate', newValue);
-					this.betaUpdateOption();
-				}
+				ConfigUtil.setConfigItem('betaUpdate', newValue);
+				this.betaUpdateOption();
 			}
 		});
 	}

-	updateSilentOption(): void {
+	updateSilentOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#silent-option .setting-control'),
 			value: ConfigUtil.getConfigItem('silent', false),
@@ -291,12 +239,12 @@ export default class GeneralSection extends BaseSection {
 				const newValue = !ConfigUtil.getConfigItem('silent', true);
 				ConfigUtil.setConfigItem('silent', newValue);
 				this.updateSilentOption();
-				currentBrowserWindow.webContents.send('toggle-silent', newValue);
+				currentBrowserWindow.send('toggle-silent', newValue);
 			}
 		});
 	}

-	showDesktopNotification(): void {
+	showDesktopNotification() {
 		this.generateSettingOption({
 			$element: document.querySelector('#show-notification-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showNotification', true),
@@ -308,7 +256,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateSidebarOption(): void {
+	updateSidebarOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#sidebar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showSidebar', true),
@@ -321,7 +269,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateStartAtLoginOption(): void {
+	updateStartAtLoginOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#startAtLogin-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startAtLogin', false),
@@ -334,19 +282,7 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	updateQuitOnCloseOption(): void {
-		this.generateSettingOption({
-			$element: document.querySelector('#quitOnClose-option .setting-control'),
-			value: ConfigUtil.getConfigItem('quitOnClose', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('quitOnClose');
-				ConfigUtil.setConfigItem('quitOnClose', newValue);
-				this.updateQuitOnCloseOption();
-			}
-		});
-	}
-
-	enableSpellchecker(): void {
+	enableSpellchecker() {
 		this.generateSettingOption({
 			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
 			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
@@ -358,75 +294,48 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	enableErrorReporting(): void {
-		this.generateSettingOption({
-			$element: document.querySelector('#enable-error-reporting .setting-control'),
-			value: ConfigUtil.getConfigItem('errorReporting', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('errorReporting');
-				ConfigUtil.setConfigItem('errorReporting', newValue);
-				this.enableErrorReporting();
-			}
-		});
-	}
-
-	async clearAppDataDialog(): Promise<void> {
+	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.name);
+		const getAppPath = path.join(app.getPath('appData'), app.getName());

-		const { response } = await dialog.showMessageBox({
+		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);
+			}
 		});
-		if (response === 0) {
-			fs.remove(getAppPath);
-			setTimeout(() => ipcRenderer.send('forward-message', 'hard-reload'), 1000);
-		}
 	}

-	async customCssDialog(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
+	customCssDialog() {
+		const showDialogOptions = {
 			title: 'Select file',
+			defaultId: 1,
 			properties: ['openFile'],
 			filters: [{ name: 'CSS file', extensions: ['css'] }]
 		};

-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			ConfigUtil.setConfigItem('customCSS', filePaths[0]);
-			ipcRenderer.send('forward-message', 'hard-reload');
-		}
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+				ipcRenderer.send('forward-message', 'hard-reload');
+			}
+		});
 	}

-	updateResetDataOption(): void {
+	updateResetDataOption() {
 		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
 		resetDataButton.addEventListener('click', () => {
 			this.clearAppDataDialog();
 		});
 	}

-	setLocale(): void {
-		const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
-		// This path is for the JSON file that stores key: value pairs for supported locales
-		const langList = this.generateSelectTemplate(supportedLocales, 'lang-menu');
-		langDiv.innerHTML += langList;
-		// langMenu is the select-option dropdown menu formed after executing the previous command
-		const langMenu: HTMLSelectElement = document.querySelector('.lang-menu');
-
-		// The next three lines set the selected language visible on the dropdown button
-		let language = ConfigUtil.getConfigItem('appLanguage');
-		language = language && langMenu.options.namedItem(language) ? language : 'en-US';
-		langMenu.options.namedItem(language).selected = true;
-
-		langMenu.addEventListener('change', (event: Event) => {
-			ConfigUtil.setConfigItem('appLanguage', (event.target as HTMLSelectElement).value);
-		});
-	}
-
-	minimizeOnStart(): void {
+	minimizeOnStart() {
 		this.generateSettingOption({
 			$element: document.querySelector('#start-minimize-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startMinimized', false),
@@ -438,58 +347,62 @@ export default class GeneralSection extends BaseSection {
 		});
 	}

-	addCustomCSS(): void {
+	addCustomCSS() {
 		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
 		customCSSButton.addEventListener('click', () => {
 			this.customCssDialog();
 		});
 	}

-	showCustomCSSPath(): void {
+	showCustomCSSPath() {
 		if (!ConfigUtil.getConfigItem('customCSS')) {
-			const cssPATH: HTMLElement = document.querySelector('#remove-custom-css');
+			const cssPATH = document.getElementById('remove-custom-css');
 			cssPATH.style.display = 'none';
 		}
 	}

-	removeCustomCSS(): void {
-		const removeCSSButton = document.querySelector('#css-delete-action');
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
 		removeCSSButton.addEventListener('click', () => {
-			ConfigUtil.setConfigItem('customCSS', '');
+			ConfigUtil.setConfigItem('customCSS');
 			ipcRenderer.send('forward-message', 'hard-reload');
 		});
 	}

-	async downloadFolderDialog(): Promise<void> {
-		const showDialogOptions: OpenDialogOptions = {
+	downloadFolderDialog() {
+		const showDialogOptions = {
 			title: 'Select Download Location',
+			defaultId: 1,
 			properties: ['openDirectory']
 		};

-		const { filePaths, canceled } = await dialog.showOpenDialog(showDialogOptions);
-		if (!canceled) {
-			ConfigUtil.setConfigItem('downloadsPath', filePaths[0]);
-			const downloadFolderPath: HTMLElement = document.querySelector('.download-folder-path');
-			downloadFolderPath.textContent = filePaths[0];
-		}
+		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
+			if (selectedFolder) {
+				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
+				const downloadFolderPath = document.querySelector('.download-folder-path');
+				downloadFolderPath.innerText = selectedFolder[0];
+			}
+		});
 	}
-
-	downloadFolder(): void {
+	downloadFolder() {
 		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
 		downloadFolder.addEventListener('click', () => {
 			this.downloadFolderDialog();
 		});
 	}

-	updatePromptDownloadOption(): void {
+	showDownloadFolder() {
 		this.generateSettingOption({
-			$element: document.querySelector('#prompt-download .setting-control'),
-			value: ConfigUtil.getConfigItem('promptDownload', false),
+			$element: document.querySelector('#show-download-folder .setting-control'),
+			value: ConfigUtil.getConfigItem('showDownloadFolder', false),
 			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('promptDownload');
-				ConfigUtil.setConfigItem('promptDownload', newValue);
-				this.updatePromptDownloadOption();
+				const newValue = !ConfigUtil.getConfigItem('showDownloadFolder');
+				ConfigUtil.setConfigItem('showDownloadFolder', newValue);
+				this.showDownloadFolder();
 			}
 		});
 	}
+
 }
+
+module.exports = GeneralSection;
--- a/app/renderer/js/pages/preference/nav.js
+++ b/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;
--- a/app/renderer/js/pages/preference/nav.ts
+++ b/app/renderer/js/pages/preference/nav.ts
@@ -1,68 +0,0 @@
-import BaseComponent from '../../components/base';
-import * as t from '../../utils/translation-util';
-
-interface PreferenceNavProps {
-	$root: Element;
-	onItemSelected: (navItem: string) => void;
-}
-
-export default class PreferenceNav extends BaseComponent {
-	props: PreferenceNavProps;
-	navItems: string[];
-	$el: Element;
-	constructor(props: PreferenceNavProps) {
-		super();
-		this.props = props;
-		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
-		this.init();
-	}
-
-	template(): string {
-		let navItemsTemplate = '';
-		for (const navItem of this.navItems) {
-			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
-		}
-
-		return `
-			<div>
-				<div id="settings-header">${t.__('Settings')}</div>
-				<div id="nav-container">${navItemsTemplate}</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-	}
-
-	registerListeners(): void {
-		for (const navItem of this.navItems) {
-			const $item = document.querySelector(`#nav-${navItem}`);
-			$item.addEventListener('click', () => {
-				this.props.onItemSelected(navItem);
-			});
-		}
-	}
-
-	select(navItemToSelect: string): void {
-		for (const navItem of this.navItems) {
-			if (navItem === navItemToSelect) {
-				this.activate(navItem);
-			} else {
-				this.deactivate(navItem);
-			}
-		}
-	}
-
-	activate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
-		$item.classList.add('active');
-	}
-
-	deactivate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
-		$item.classList.remove('active');
-	}
-}
--- a/app/renderer/js/pages/preference/network-section.js
+++ b/app/renderer/js/pages/preference/network-section.js
@@ -1,54 +1,46 @@
-import { ipcRenderer } from 'electron';
+'use strict';

-import BaseSection from './base-section';
-import * as ConfigUtil from '../../utils/config-util';
-import * as t from '../../utils/translation-util';
+const {ipcRenderer} = require('electron');

-interface NetworkSectionProps {
-	$root: Element;
-}
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');

-export default class NetworkSection extends BaseSection {
-	props: NetworkSectionProps;
-	$proxyPAC: HTMLInputElement;
-	$proxyRules: HTMLInputElement;
-	$proxyBypass: HTMLInputElement;
-	$proxySaveAction: Element;
-	$manualProxyBlock: Element;
-	constructor(props: NetworkSectionProps) {
+class NetworkSection extends BaseSection {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
            <div class="settings-pane">
-                <div class="title">${t.__('Proxy')}</div>
+                <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">${t.__('Use system proxy settings (requires restart)')}</div>
+						<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">${t.__('Manual proxy configuration')}</div>
+						<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 ${t.__('script')}</span>
+							<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">${t.__('Proxy rules')}</span>
+							<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">${t.__('Proxy bypass rules')}</span>
+							<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 green" id="proxy-save-action">
-								<span>${t.__('Save')}</span>
+							<div class="action blue" id="proxy-save-action">
+								<i class="material-icons">check_box</i>
+								<span>Save</span>
 							</div>
 						</div>
 					</div>
@@ -57,12 +49,12 @@ export default class NetworkSection extends BaseSection {
 		`;
 	}

-	init(): void {
+	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.querySelector('#proxy-save-action');
+		this.$proxySaveAction = document.getElementById('proxy-save-action');
 		this.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-block');
 		this.initProxyOption();

@@ -79,14 +71,14 @@ export default class NetworkSection extends BaseSection {
 		});
 	}

-	initProxyOption(): void {
+	initProxyOption() {
 		const manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
 		this.toggleManualProxySettings(manualProxyEnabled);

 		this.updateProxyOption();
 	}

-	toggleManualProxySettings(option: boolean): void {
+	toggleManualProxySettings(option) {
 		if (option) {
 			this.$manualProxyBlock.classList.remove('hidden');
 		} else {
@@ -94,7 +86,7 @@ export default class NetworkSection extends BaseSection {
 		}
 	}

-	updateProxyOption(): void {
+	updateProxyOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#use-system-settings .setting-control'),
 			value: ConfigUtil.getConfigItem('useSystemProxy', false),
@@ -105,10 +97,10 @@ export default class NetworkSection extends BaseSection {
 					ConfigUtil.setConfigItem('useManualProxy', !manualProxyValue);
 					this.toggleManualProxySettings(!manualProxyValue);
 				}
-				if (!newValue) {
+				if (newValue === false) {
 					// Remove proxy system proxy settings
 					ConfigUtil.setConfigItem('proxyRules', '');
-					ipcRenderer.send('forward-message', 'reload-proxy', false);
+					ipcRenderer.send('forward-message', 'reload-proxy', true);
 				}
 				ConfigUtil.setConfigItem('useSystemProxy', newValue);
 				this.updateProxyOption();
@@ -133,3 +125,5 @@ export default class NetworkSection extends BaseSection {
 		});
 	}
 }
+
+module.exports = NetworkSection;
--- a/app/renderer/js/pages/preference/new-server-form.js
+++ b/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;
--- a/app/renderer/js/pages/preference/new-server-form.ts
+++ b/app/renderer/js/pages/preference/new-server-form.ts
@@ -1,104 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import BaseComponent from '../../components/base';
-import * as DomainUtil from '../../utils/domain-util';
-import * as LinkUtil from '../../utils/link-util';
-import * as t from '../../utils/translation-util';
-
-interface NewServerFormProps {
-	$root: Element;
-	onChange: () => void;
-}
-
-export default class NewServerForm extends BaseComponent {
-	props: NewServerFormProps;
-	$newServerForm: Element;
-	$saveServerButton: HTMLButtonElement;
-	$newServerUrl: HTMLInputElement;
-	constructor(props: NewServerFormProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="server-input-container">
-				<div class="title">${t.__('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">
-					<button id="connect">${t.__('Connect')}</button>
-				</div>
-				<div class="server-center">
-					<div class="divider">
-						<hr class="left"/>${t.__('OR')}<hr class="right" />
-					</div>
-				</div>
-				<div class="server-center">
-					<button id="open-create-org-link">${t.__('Create a new organization')}</button>
-				</div>
-				<div class="server-center">
-					<div class="server-network-option">
-						<span id="open-network-settings">${t.__('Network and Proxy Settings')}</span>
-						<i class="material-icons open-network-button">open_in_new</i>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm(): void {
-		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		this.$saveServerButton = this.$newServerForm.querySelector('#connect');
-		this.props.$root.innerHTML = '';
-		this.props.$root.append(this.$newServerForm);
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-	}
-
-	async submitFormHandler(): Promise<void> {
-		this.$saveServerButton.innerHTML = 'Connecting...';
-		let serverConf;
-		try {
-			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value);
-		} catch (errorMessage) {
-			this.$saveServerButton.innerHTML = 'Connect';
-			alert(errorMessage);
-			return;
-		}
-		await DomainUtil.addDomain(serverConf);
-		this.props.onChange();
-	}
-
-	openCreateNewOrgExternalLink(): void {
-		const link = 'https://zulipchat.com/new/';
-		const externalCreateNewOrgElement = document.querySelector('#open-create-org-link');
-		externalCreateNewOrgElement.addEventListener('click', () => {
-			LinkUtil.openBrowser(new URL(link));
-		});
-	}
-
-	networkSettingsLink(): void {
-		const networkSettingsId = document.querySelectorAll('.server-network-option')[0];
-		networkSettingsId.addEventListener('click', () => ipcRenderer.send('forward-message', 'open-network-settings'));
-	}
-
-	initActions(): void {
-		this.$saveServerButton.addEventListener('click', () => {
-			this.submitFormHandler();
-		});
-		this.$newServerUrl.addEventListener('keypress', event => {
-			if (event.key === 'Enter') {
-				this.submitFormHandler();
-			}
-		});
-		// open create new org link in default browser
-		this.openCreateNewOrgExternalLink();
-		this.networkSettingsLink();
-	}
-}
--- a/app/renderer/js/pages/preference/preference.js
+++ b/app/renderer/js/pages/preference/preference.js
@@ -1,27 +1,24 @@
-import { ipcRenderer } from 'electron';
+'use strict';

-import BaseComponent from '../../components/base';
-import Nav from './nav';
-import ServersSection from './servers-section';
-import GeneralSection from './general-section';
-import NetworkSection from './network-section';
-import ConnectedOrgSection from './connected-org-section';
-import ShortcutsSection from './shortcuts-section';
+const BaseComponent = require(__dirname + '/js/components/base.js');
+const { ipcRenderer } = require('electron');

-type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
+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');

-export default class PreferenceView extends BaseComponent {
-	$sidebarContainer: Element;
-	$settingsContainer: Element;
-	nav: Nav;
-	section: Section;
+class PreferenceView extends BaseComponent {
 	constructor() {
 		super();
-		this.$sidebarContainer = document.querySelector('#sidebar');
-		this.$settingsContainer = document.querySelector('#settings-container');
+
+		this.$sidebarContainer = document.getElementById('sidebar');
+		this.$settingsContainer = document.getElementById('settings-container');
 	}

-	init(): void {
+	init() {
 		this.nav = new Nav({
 			$root: this.$sidebarContainer,
 			onItemSelected: this.handleNavigation.bind(this)
@@ -31,16 +28,16 @@ export default class PreferenceView extends BaseComponent {
 		this.registerIpcs();
 	}

-	setDefaultView(): void {
+	setDefaultView() {
 		let nav = 'General';
 		const hasTag = window.location.hash;
 		if (hasTag) {
-			nav = hasTag.slice(1);
+			nav = hasTag.substring(1);
 		}
 		this.handleNavigation(nav);
 	}

-	handleNavigation(navItem: string): void {
+	handleNavigation(navItem) {
 		this.nav.select(navItem);
 		switch (navItem) {
 			case 'AddServer': {
@@ -80,32 +77,28 @@ export default class PreferenceView extends BaseComponent {
 	}

 	// Handle toggling and reflect changes in preference page
-	handleToggle(elementName: string, state: boolean): void {
+	handleToggle(elementName, state) {
 		const inputSelector = `#${elementName} .action .switch input`;
-		const input: HTMLInputElement = document.querySelector(inputSelector);
+		const input = document.querySelector(inputSelector);
 		if (input) {
 			input.checked = state;
 		}
 	}

-	registerIpcs(): void {
-		ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
+	registerIpcs() {
+		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
 			this.handleNavigation(navItem);
 		});

-		ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
 			this.handleToggle('sidebar-option', state);
 		});

-		ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
-			this.handleToggle('menubar-option', state);
-		});
-
-		ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
+		ipcRenderer.on('toggletray', (event, state) => {
 			this.handleToggle('tray-option', state);
 		});

-		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: any) => {
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
 			this.handleToggle('show-notification-option', newSettings.showNotification);
 			this.handleToggle('silent-option', newSettings.silent);

@@ -116,7 +109,7 @@ export default class PreferenceView extends BaseComponent {
 	}
 }

-window.addEventListener('load', () => {
+window.onload = () => {
 	const preferenceView = new PreferenceView();
 	preferenceView.init();
-});
+};
--- a/app/renderer/js/pages/preference/server-info-form.js
+++ b/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;
--- a/app/renderer/js/pages/preference/server-info-form.ts
+++ b/app/renderer/js/pages/preference/server-info-form.ts
@@ -1,97 +0,0 @@
-import { remote, ipcRenderer } from 'electron';
-
-import BaseComponent from '../../components/base';
-import * as DomainUtil from '../../utils/domain-util';
-import * as Messages from '../../../../resources/messages';
-import * as t from '../../utils/translation-util';
-
-const { dialog } = remote;
-
-interface ServerInfoFormProps {
-	$root: Element;
-	server: DomainUtil.ServerConf;
-	index: number;
-	onChange: () => void;
-}
-
-export default class ServerInfoForm extends BaseComponent {
-	props: ServerInfoFormProps;
-	$serverInfoForm: Element;
-	$serverInfoAlias: Element;
-	$serverIcon: Element;
-	$deleteServerButton: Element;
-	$openServerButton: Element;
-	constructor(props: ServerInfoFormProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		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>${t.__('Disconnect')}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm(): void {
-		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
-		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
-		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
-		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
-		this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
-		this.props.$root.append(this.$serverInfoForm);
-	}
-
-	initActions(): void {
-		this.$deleteServerButton.addEventListener('click', async () => {
-			const { response } = await dialog.showMessageBox({
-				type: 'warning',
-				buttons: [t.__('YES'), t.__('NO')],
-				defaultId: 0,
-				message: t.__('Are you sure you want to disconnect this organization?')
-			});
-			if (response === 0) {
-				if (DomainUtil.removeDomain(this.props.index)) {
-					ipcRenderer.send('reload-full-app');
-				} else {
-					const { title, content } = Messages.orgRemovalError(DomainUtil.getDomain(this.props.index).url);
-					dialog.showErrorBox(title, content);
-				}
-			}
-		});
-
-		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);
-		});
-	}
-}
--- a/app/renderer/js/pages/preference/servers-section.js
+++ b/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;
--- a/app/renderer/js/pages/preference/servers-section.ts
+++ b/app/renderer/js/pages/preference/servers-section.ts
@@ -1,49 +0,0 @@
-import BaseSection from './base-section';
-import NewServerForm from './new-server-form';
-import * as t from '../../utils/translation-util';
-
-interface ServersSectionProps {
-	$root: Element;
-}
-
-export default class ServersSection extends BaseSection {
-	props: ServersSectionProps;
-	$newServerContainer: Element;
-	constructor(props: ServersSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-		<div class="add-server-modal">
-			<div class="modal-container">
-				<div class="settings-pane" id="server-settings-pane">
-					<div class="page-title">${t.__('Add a Zulip organization')}</div>
-					<div id="new-server-container"></div>
-				</div>
-			</div>
-		</div>
-		`;
-	}
-
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.innerHTML = '';
-
-		this.props.$root.innerHTML = this.template();
-		this.$newServerContainer = document.querySelector('#new-server-container');
-
-		this.initNewServerForm();
-	}
-
-	initNewServerForm(): void {
-		new NewServerForm({
-			$root: this.$newServerContainer,
-			onChange: this.reloadApp
-		}).init();
-	}
-}
--- a/app/renderer/js/pages/preference/shortcuts-section.js
+++ b/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;
--- a/app/renderer/js/pages/preference/shortcuts-section.ts
+++ b/app/renderer/js/pages/preference/shortcuts-section.ts
@@ -1,345 +0,0 @@
-import BaseSection from './base-section';
-import * as LinkUtil from '../../utils/link-util';
-import * as t from '../../utils/translation-util';
-
-interface ShortcutsSectionProps {
-	$root: Element;
-}
-
-export default class ShortcutsSection extends BaseSection {
-	props: ShortcutsSectionProps;
-	constructor(props: ShortcutsSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	// TODO - Deduplicate templateMac and templateWinLin functions. In theory
-	// they both should be the same the only thing different should be the userOSKey
-	// variable but there seems to be inconsistences between both function, one has more
-	// lines though one may just be using more new lines and other thing is the use of +.
-	templateMac(): string {
-		const userOSKey = '⌘';
-
-		return `
-						<div class="settings-pane">
-						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
-							<div class="title">${t.__('Application Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
-										<td>${t.__('Settings')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
-										<td>${t.__('Keyboard Shortcuts')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-										<td>${t.__('Toggle Do Not Disturb')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
-										<td>${t.__('Reset App Settings')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
-										<td>${t.__('Log Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>${t.__('Hide Zulip')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>${t.__('Hide Others')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
-										<td>${t.__('Quit Zulip')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('Edit Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-										<td>${t.__('Undo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-										<td>${t.__('Redo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
-										<td>${t.__('Cut')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
-										<td>${t.__('Copy')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-										<td>${t.__('Paste')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-										<td>${t.__('Paste and Match Style')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
-										<td>${t.__('Select All')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
-										<td>${t.__('Emoji & Symbols')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('View Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-										<td>${t.__('Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-										<td>${t.__('Hard Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
-										<td>${t.__('Enter Full Screen')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
-										<td>${t.__('Zoom In')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
-										<td>${t.__('Zoom Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
-										<td>${t.__('Actual Size')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>${t.__('Toggle Sidebar')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
-										<td>${t.__('Toggle DevTools for Zulip App')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
-										<td>${t.__('Toggle DevTools for Active Tab')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Next Organization')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Previous Organization')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('History Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
-										<td>${t.__('Back')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
-										<td>${t.__('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>${t.__('Minimize')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
-										<td>${t.__('Close')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-						</div>
-		`;
-	}
-
-	templateWinLin(): string {
-		const userOSKey = 'Ctrl';
-
-		return `
-						<div class="settings-pane">
-						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
-							<div class="title">${t.__('Application Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
-										<td>${t.__('Settings')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
-										<td>${t.__('Keyboard Shortcuts')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-										<td>${t.__('Toggle Do Not Disturb')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
-										<td>${t.__('Log Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
-										<td>${t.__('Quit Zulip')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('Edit Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
-										<td>${t.__('Undo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
-										<td>${t.__('Redo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
-										<td>${t.__('Cut')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
-										<td>${t.__('Copy')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
-										<td>${t.__('Paste')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
-										<td>${t.__('Paste and Match Style')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
-										<td>${t.__('Select All')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('View Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
-										<td>${t.__('Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
-										<td>${t.__('Hard Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>F11</kbd></td>
-										<td>${t.__('Toggle Full Screen')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
-										<td>${t.__('Zoom In')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
-										<td>${t.__('Zoom Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
-										<td>${t.__('Actual Size')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>${t.__('Toggle Sidebar')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
-										<td>${t.__('Toggle DevTools for Zulip App')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
-										<td>${t.__('Toggle DevTools for Active Tab')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Next Organization')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Previous Organization')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('History Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>Alt</kbd> + <kbd>←</kbd></td>
-										<td>${t.__('Back')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Alt</kbd> + <kbd>→</kbd></td>
-										<td>${t.__('Forward')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('Window Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
-										<td>${t.__('Minimize')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
-										<td>${t.__('Close')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-						</div>
-		`;
-	}
-
-	openHotkeysExternalLink(): void {
-		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
-		const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
-		externalCreateNewOrgElement.addEventListener('click', () => {
-			LinkUtil.openBrowser(new URL(link));
-		});
-	}
-
-	init(): void {
-		this.props.$root.innerHTML = (process.platform === 'darwin') ?
-			this.templateMac() : this.templateWinLin();
-		this.openHotkeysExternalLink();
-	}
-}
--- a/app/renderer/js/preload.js
+++ b/app/renderer/js/preload.js
@@ -0,0 +1,98 @@
+'use strict';
+
+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');
+const params = require(__dirname + '/utils/params-util.js');
+
+// eslint-disable-next-line import/no-unassigned-import
+require('./notification');
+
+// Prevent drag and drop event in main process which prevents remote code executaion
+require(__dirname + '/shared/preventdrag.js');
+
+// eslint-disable-next-line camelcase
+window.electron_bridge = require('./electron-bridge');
+
+const logout = () => {
+	// Create the menu for the below
+	document.querySelector('.dropdown-toggle').click();
+
+	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
+	nodes[nodes.length - 1].click();
+};
+
+const shortcut = () => {
+	// Create the menu for the below
+	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
+	// Additional check
+	if (node.text.trim().toLowerCase() === 'keyboard shortcuts (?)') {
+		node.click();
+	} else {
+		// Atleast click the dropdown
+		document.querySelector('.dropdown-toggle').click();
+	}
+};
+
+process.once('loaded', () => {
+	global.logout = logout;
+	global.shortcut = shortcut;
+});
+
+// To prevent failing this script on linux we need to load it after the document loaded
+document.addEventListener('DOMContentLoaded', () => {
+	if (params.isPageParams()) {
+	// 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');
+	}
+});
--- a/app/renderer/js/preload.ts
+++ b/app/renderer/js/preload.ts
@@ -1,122 +0,0 @@
-import { contextBridge, ipcRenderer, webFrame } from 'electron';
-import fs from 'fs';
-import * as SetupSpellChecker from './spellchecker';
-
-import isDev from 'electron-is-dev';
-
-import * as NetworkError from './pages/network';
-
-// eslint-disable-next-line import/no-unassigned-import
-import './notification';
-
-// Prevent drag and drop event in main process which prevents remote code executaion
-// eslint-disable-next-line import/no-unassigned-import
-import './shared/preventdrag';
-
-import electron_bridge from './electron-bridge';
-contextBridge.exposeInMainWorld('raw_electron_bridge', electron_bridge);
-
-ipcRenderer.on('logout', () => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-});
-
-ipcRenderer.on('shortcut', () => {
-	// Create the menu for the below
-	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
-	// Additional check
-	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
-		node.click();
-	} else {
-		// Atleast click the dropdown
-		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-		dropdown.click();
-	}
-});
-
-ipcRenderer.on('show-notification-settings', () => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
-	nodes[2].click();
-
-	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
-
-	// wait until the notification dom element shows up
-	setTimeout(() => {
-		notificationItem[2].click();
-	}, 100);
-});
-
-electron_bridge.once('zulip-loaded', ({ serverLanguage }) => {
-	// Get the default language of the server
-	if (serverLanguage) {
-		// Init spellchecker
-		SetupSpellChecker.init(serverLanguage);
-	}
-	// redirect users to network troubleshooting page
-	const getRestartButton = document.querySelector('.restart_get_events_button');
-	if (getRestartButton) {
-		getRestartButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'reload-viewer');
-		});
-	}
-});
-
-// Clean up spellchecker events after you navigate away from this page;
-// otherwise, you may experience errors
-window.addEventListener('beforeunload', (): void => {
-	SetupSpellChecker.unsubscribeSpellChecker();
-});
-
-window.addEventListener('load', (event: any): void => {
-	if (!event.target.URL.includes('app/renderer/network.html')) {
-		return;
-	}
-	const $reconnectButton = document.querySelector('#reconnect');
-	const $settingsButton = document.querySelector('#settings');
-	NetworkError.init($reconnectButton, $settingsButton);
-});
-
-// electron's globalShortcut can cause unexpected results
-// so adding the reload shortcut in the old-school way
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
-document.addEventListener('keydown', event => {
-	const cmdOrCtrl = event.ctrlKey || event.metaKey;
-	if (event.code === 'F5') {
-		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (cmdOrCtrl && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
-	}
-});
-
-// Set user as active and update the time of last activity
-ipcRenderer.on('set-active', () => {
-	if (isDev) {
-		console.log('active');
-	}
-	electron_bridge.idle_on_system = false;
-	electron_bridge.last_active_on_system = Date.now();
-});
-
-// Set user as idle and time of last activity is left unchanged
-ipcRenderer.on('set-idle', () => {
-	if (isDev) {
-		console.log('idle');
-	}
-	electron_bridge.idle_on_system = true;
-});
-
-webFrame.executeJavaScript(
-	fs.readFileSync(require.resolve('./injected'), 'utf8')
-);
--- a/app/renderer/js/shared/preventdrag.js
+++ b/app/renderer/js/shared/preventdrag.js
@@ -1,9 +1,11 @@
+'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 = (): void => {
+const preventDragAndDrop = () => {
 	const preventEvents = ['dragover', 'drop'];
 	preventEvents.forEach(dragEvents => {
 		document.addEventListener(dragEvents, event => {
@@ -13,5 +15,3 @@ const preventDragAndDrop = (): void => {
 };

 preventDragAndDrop();
-
-export {};
--- a/app/renderer/js/spellchecker.js
+++ b/app/renderer/js/spellchecker.js
@@ -0,0 +1,62 @@
+'use strict';
+
+const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const Logger = require(__dirname + '/utils/logger-util.js');
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+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 = new SetupSpellChecker();
--- a/app/renderer/js/spellchecker.ts
+++ b/app/renderer/js/spellchecker.ts
@@ -1,59 +0,0 @@
-import type { Subject } from 'rxjs';
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
-import * as ConfigUtil from './utils/config-util';
-import Logger from './utils/logger-util';
-
-declare module 'electron-spellchecker' {
-	interface SpellCheckHandler {
-		currentSpellcheckerChanged: Subject<true>;
-		currentSpellcheckerLanguage: string;
-	}
-}
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-let spellCheckHandler: SpellCheckHandler;
-let contextMenuListener: ContextMenuListener;
-
-export function init(serverLanguage: string): void {
-	if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-		enableSpellChecker();
-	}
-	enableContextMenu(serverLanguage);
-}
-
-function enableSpellChecker(): void {
-	try {
-		spellCheckHandler = new SpellCheckHandler();
-	} catch (err) {
-		logger.error(err);
-	}
-}
-
-function enableContextMenu(serverLanguage: string): void {
-	if (spellCheckHandler) {
-		spellCheckHandler.attachToInput();
-		spellCheckHandler.switchLanguage(serverLanguage);
-		spellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
-			spellCheckHandler.switchLanguage(spellCheckHandler.currentSpellcheckerLanguage);
-		});
-	}
-
-	const contextMenuBuilder = new ContextMenuBuilder(spellCheckHandler);
-	contextMenuListener = new ContextMenuListener(info => {
-		contextMenuBuilder.showPopupMenu(info);
-	});
-}
-
-export function unsubscribeSpellChecker(): void {
-	if (spellCheckHandler) {
-		spellCheckHandler.unsubscribe();
-	}
-	if (contextMenuListener) {
-		contextMenuListener.unsubscribe();
-	}
-}
--- a/app/renderer/js/tray.js
+++ b/app/renderer/js/tray.js
@@ -0,0 +1,229 @@
+'use strict';
+const path = require('path');
+
+const electron = require('electron');
+
+const {ipcRenderer, remote} = electron;
+
+const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+
+const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+
+const iconPath = () => {
+	if (process.platform === 'linux') {
+		return APP_ICON + 'linux.png';
+	}
+	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
+};
+
+let unread = 0;
+
+const trayIconSize = () => {
+	switch (process.platform) {
+		case 'darwin':
+			return 20;
+		case 'win32':
+			return 100;
+		case 'linux':
+			return 100;
+		default: return 80;
+	}
+};
+
+//  Default config for Icon we might make it OS specific if needed like the size
+const config = {
+	pixelRatio: window.devicePixelRatio,
+	unreadCount: 0,
+	showUnreadCount: true,
+	unreadColor: '#000000',
+	readColor: '#000000',
+	unreadBackgroundColor: '#B9FEEA',
+	readBackgroundColor: '#B9FEEA',
+	size: trayIconSize(),
+	thick: process.platform === 'win32'
+};
+
+const renderCanvas = function (arg) {
+	config.unreadCount = arg;
+
+	return new Promise(resolve => {
+		const SIZE = config.size * config.pixelRatio;
+		const PADDING = SIZE * 0.05;
+		const CENTER = SIZE / 2;
+		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
+		const color = config.unreadCount ? config.unreadColor : config.readColor;
+		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+
+		const canvas = document.createElement('canvas');
+		canvas.width = SIZE;
+		canvas.height = SIZE;
+		const ctx = canvas.getContext('2d');
+
+		// Circle
+		// If (!config.thick || config.thick && HAS_COUNT) {
+		ctx.beginPath();
+		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
+		ctx.fillStyle = backgroundColor;
+		ctx.fill();
+		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
+		ctx.strokeStyle = backgroundColor;
+		ctx.stroke();
+		// Count or Icon
+		if (HAS_COUNT) {
+			ctx.fillStyle = color;
+			ctx.textAlign = 'center';
+			if (config.unreadCount > 99) {
+				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
+				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
+			} else if (config.unreadCount < 10) {
+				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
+			} else {
+				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
+			}
+
+			resolve(canvas);
+		}
+	});
+};
+/**
+ * Renders the tray icon as a native image
+ * @param arg: Unread count
+ * @return the native image
+ */
+const renderNativeImage = function (arg) {
+	return Promise.resolve()
+		.then(() => renderCanvas(arg))
+		.then(canvas => {
+			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
+			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
+		});
+};
+
+function sendAction(action) {
+	const win = BrowserWindow.getAllWindows()[0];
+
+	if (process.platform === 'darwin') {
+		win.restore();
+	}
+
+	win.webContents.send(action);
+}
+
+const createTray = function () {
+	window.tray = new Tray(iconPath());
+	const contextMenu = Menu.buildFromTemplate([{
+		label: 'About',
+		click() {
+			// We need to focus the main window first
+			ipcRenderer.send('focus-app');
+			sendAction('open-about');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Focus',
+		click() {
+			ipcRenderer.send('focus-app');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Settings',
+		click() {
+			ipcRenderer.send('focus-app');
+			sendAction('open-settings');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Quit',
+		click() {
+			ipcRenderer.send('quit-app');
+		}
+	}
+	]);
+	window.tray.setContextMenu(contextMenu);
+	window.tray.on('click', () => {
+		// Click event only works on Windows
+		if (process.platform === 'win32') {
+			ipcRenderer.send('toggle-app');
+		}
+	});
+};
+
+ipcRenderer.on('destroytray', event => {
+	if (!window.tray) {
+		return;
+	}
+
+	window.tray.destroy();
+	if (window.tray.isDestroyed()) {
+		window.tray = null;
+	} else {
+		throw new Error('Tray icon not properly destroyed.');
+	}
+
+	return event;
+});
+
+ipcRenderer.on('tray', (event, arg) => {
+	if (!window.tray) {
+		return;
+	}
+	// We don't want to create tray from unread messages on macOS since it already has dock badges.
+	if (process.platform === 'linux' || process.platform === 'win32') {
+		if (arg === 0) {
+			unread = arg;
+			window.tray.setImage(iconPath());
+			window.tray.setToolTip('No unread messages');
+		} else {
+			unread = arg;
+			renderNativeImage(arg).then(image => {
+				window.tray.setImage(image);
+				window.tray.setToolTip(arg + ' unread messages');
+			});
+		}
+	}
+});
+
+function toggleTray() {
+	let state;
+	if (window.tray) {
+		state = false;
+		window.tray.destroy();
+		if (window.tray.isDestroyed()) {
+			window.tray = null;
+		}
+		ConfigUtil.setConfigItem('trayIcon', false);
+	} else {
+		state = true;
+		createTray();
+		if (process.platform === 'linux' || process.platform === 'win32') {
+			renderNativeImage(unread).then(image => {
+				window.tray.setImage(image);
+				window.tray.setToolTip(unread + ' unread messages');
+			});
+		}
+		ConfigUtil.setConfigItem('trayIcon', true);
+	}
+	const selector = 'webview:not([class*=disabled])';
+	const webview = document.querySelector(selector);
+	const webContents = webview.getWebContents();
+	webContents.send('toggletray', state);
+}
+
+ipcRenderer.on('toggletray', toggleTray);
+
+if (ConfigUtil.getConfigItem('trayIcon', true)) {
+	createTray();
+}
--- a/app/renderer/js/tray.ts
+++ b/app/renderer/js/tray.ts
@@ -1,217 +0,0 @@
-import { ipcRenderer, remote, WebviewTag, NativeImage } from 'electron';
-
-import path from 'path';
-import * as ConfigUtil from './utils/config-util';
-
-const { Tray, Menu, nativeImage, BrowserWindow, nativeTheme } = remote;
-
-let tray: Electron.Tray;
-
-// get the theme on macOS
-const theme = nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
-
-const ICON_DIR = process.platform === 'darwin' ? `../../resources/tray/${theme}` : '../../resources/tray';
-
-const TRAY_SUFFIX = 'tray';
-
-const APP_ICON = path.join(__dirname, ICON_DIR, TRAY_SUFFIX);
-
-const iconPath = (): string => {
-	if (process.platform === 'linux') {
-		return APP_ICON + 'linux.png';
-	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
-};
-
-let unread = 0;
-
-const trayIconSize = (): number => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
-};
-
-//  Default config for Icon we might make it OS specific if needed like the size
-const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
-};
-
-const renderCanvas = function (arg: number): HTMLCanvasElement {
-	config.unreadCount = arg;
-
-	const SIZE = config.size * config.pixelRatio;
-	const PADDING = SIZE * 0.05;
-	const CENTER = SIZE / 2;
-	const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-	const color = config.unreadCount ? config.unreadColor : config.readColor;
-	const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
-
-	const canvas = document.createElement('canvas');
-	canvas.width = SIZE;
-	canvas.height = SIZE;
-	const ctx = canvas.getContext('2d');
-
-	// Circle
-	// If (!config.thick || config.thick && HAS_COUNT) {
-	ctx.beginPath();
-	ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-	ctx.fillStyle = backgroundColor;
-	ctx.fill();
-	ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-	ctx.strokeStyle = backgroundColor;
-	ctx.stroke();
-	// Count or Icon
-	if (HAS_COUNT) {
-		ctx.fillStyle = color;
-		ctx.textAlign = 'center';
-		if (config.unreadCount > 99) {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-			ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-		} else if (config.unreadCount < 10) {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.2));
-		} else {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
-		}
-	}
-
-	return canvas;
-};
-/**
- * Renders the tray icon as a native image
- * @param arg: Unread count
- * @return the native image
- */
-const renderNativeImage = function (arg: number): NativeImage {
-	const canvas = renderCanvas(arg);
-	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
-	return nativeImage.createFromBuffer(pngData, {
-		scaleFactor: config.pixelRatio
-	});
-};
-
-function sendAction(action: string): void {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action);
-}
-
-const createTray = function (): void {
-	const contextMenu = Menu.buildFromTemplate([
-		{
-			label: 'Zulip',
-			click() {
-				ipcRenderer.send('focus-app');
-			}
-		},
-		{
-			label: 'Settings',
-			click() {
-				ipcRenderer.send('focus-app');
-				sendAction('open-settings');
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Quit',
-			click() {
-				ipcRenderer.send('quit-app');
-			}
-		}
-	]);
-	tray = new Tray(iconPath());
-	tray.setContextMenu(contextMenu);
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		tray.on('click', () => {
-			ipcRenderer.send('toggle-app');
-		});
-	}
-};
-
-ipcRenderer.on('destroytray', (event: Event): Event => {
-	if (!tray) {
-		return undefined;
-	}
-
-	tray.destroy();
-	if (tray.isDestroyed()) {
-		tray = null;
-	} else {
-		throw new Error('Tray icon not properly destroyed.');
-	}
-
-	return event;
-});
-
-ipcRenderer.on('tray', (_event: Event, arg: number): void => {
-	if (!tray) {
-		return;
-	}
-	// We don't want to create tray from unread messages on macOS since it already has dock badges.
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		if (arg === 0) {
-			unread = arg;
-			tray.setImage(iconPath());
-			tray.setToolTip('No unread messages');
-		} else {
-			unread = arg;
-			const image = renderNativeImage(arg);
-			tray.setImage(image);
-			tray.setToolTip(arg + ' unread messages');
-		}
-	}
-});
-
-function toggleTray(): void {
-	let state;
-	if (tray) {
-		state = false;
-		tray.destroy();
-		if (tray.isDestroyed()) {
-			tray = null;
-		}
-		ConfigUtil.setConfigItem('trayIcon', false);
-	} else {
-		state = true;
-		createTray();
-		if (process.platform === 'linux' || process.platform === 'win32') {
-			const image = renderNativeImage(unread);
-			tray.setImage(image);
-			tray.setToolTip(unread + ' unread messages');
-		}
-		ConfigUtil.setConfigItem('trayIcon', true);
-	}
-	const selector = 'webview:not([class*=disabled])';
-	const webview: WebviewTag = document.querySelector(selector);
-	const webContents = webview.getWebContents();
-	webContents.send('toggletray', state);
-}
-
-ipcRenderer.on('toggletray', toggleTray);
-
-if (ConfigUtil.getConfigItem('trayIcon', true)) {
-	createTray();
-}
-
-export {};
--- a/app/renderer/js/utils/certificate-util.js
+++ b/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();
--- a/app/renderer/js/utils/certificate-util.ts
+++ b/app/renderer/js/utils/certificate-util.ts
@@ -1,80 +0,0 @@
-import { remote } from 'electron';
-import { JsonDB } from 'node-json-db';
-import { initSetUp } from './default-util';
-
-import fs from 'fs';
-import path from 'path';
-import Logger from './logger-util';
-
-const { app, dialog } = remote;
-
-initSetUp();
-
-const logger = new Logger({
-	file: 'certificate-util.log',
-	timestamp: true
-});
-
-const certificatesDir = `${app.getPath('userData')}/certificates`;
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getCertificate(server: string, defaultValue: any = null): any {
-	reloadDB();
-	const value = db.getData('/')[server];
-	if (value === undefined) {
-		return defaultValue;
-	} else {
-		return value;
-	}
-}
-
-// Function to copy the certificate to userData folder
-export function copyCertificate(_server: string, location: string, fileName: string): boolean {
-	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;
-}
-
-export function setCertificate(server: string, fileName: string): void {
-	const filePath = `${fileName}`;
-	db.push(`/${server}`, filePath, true);
-	reloadDB();
-}
-
-export function removeCertificate(server: string): void {
-	db.delete(`/${server}`);
-	reloadDB();
-}
-
-function reloadDB(): void {
-	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);
-		}
-	}
-	db = new JsonDB(settingsJsonPath, true, true);
-}
--- a/app/renderer/js/utils/common-util.ts
+++ b/app/renderer/js/utils/common-util.ts
@@ -1,8 +0,0 @@
-// unescape already encoded/escaped strings
-export function decodeString(stringInput: string): string {
-	const parser = new DOMParser();
-	const dom = parser.parseFromString(
-		'<!doctype html><body>' + stringInput,
-		'text/html');
-	return dom.body.textContent;
-}
--- a/app/renderer/js/utils/config-util.js
+++ b/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();
--- a/app/renderer/js/utils/config-util.ts
+++ b/app/renderer/js/utils/config-util.ts
@@ -1,91 +0,0 @@
-import { JsonDB } from 'node-json-db';
-
-import fs from 'fs';
-import path from 'path';
-import electron from 'electron';
-import Logger from './logger-util';
-import * as EnterpriseUtil from './enterprise-util';
-
-const logger = new Logger({
-	file: 'config-util.log',
-	timestamp: true
-});
-
-let dialog: Electron.Dialog = null;
-let app: Electron.App = null;
-
-/* To make the util runnable in both main and renderer process */
-if (process.type === 'renderer') {
-	const { remote } = electron;
-	dialog = remote.dialog;
-	app = remote.app;
-} else {
-	dialog = electron.dialog;
-	app = electron.app;
-}
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getConfigItem(key: string, defaultValue: any = null): any {
-	try {
-		db.reload();
-	} catch (err) {
-		logger.error('Error while reloading settings.json: ');
-		logger.error(err);
-	}
-	const value = db.getData('/')[key];
-	if (value === undefined) {
-		setConfigItem(key, defaultValue);
-		return defaultValue;
-	} else {
-		return value;
-	}
-}
-
-// This function returns whether a key exists in the configuration file (settings.json)
-export function isConfigItemExists(key: string): boolean {
-	try {
-		db.reload();
-	} catch (err) {
-		logger.error('Error while reloading settings.json: ');
-		logger.error(err);
-	}
-	const value = db.getData('/')[key];
-	return (value !== undefined);
-}
-
-export function setConfigItem(key: string, value: any, override? : boolean): void {
-	if (EnterpriseUtil.configItemExists(key) && !override) {
-		// if item is in global config and we're not trying to override
-		return;
-	}
-	db.push(`/${key}`, value, true);
-	db.save();
-}
-
-export function removeConfigItem(key: string): void {
-	db.delete(`/${key}`);
-	db.save();
-}
-
-function reloadDB(): void {
-	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);
-		}
-	}
-	db = new JsonDB(settingsJsonPath, true, true);
-}
--- a/app/renderer/js/utils/default-util.js
+++ b/app/renderer/js/utils/default-util.js
@@ -1,19 +1,18 @@
-import electron from 'electron';
-import fs from 'fs';
+const fs = require('fs');

-let app: Electron.App = null;
+let app = null;
 let setupCompleted = false;
 if (process.type === 'renderer') {
-	app = electron.remote.app;
+	app = require('electron').remote.app;
 } else {
-	app = electron.app;
+	app = require('electron').app;
 }

 const zulipDir = app.getPath('userData');
 const logDir = `${zulipDir}/Logs/`;
 const certificatesDir = `${zulipDir}/certificates/`;
 const configDir = `${zulipDir}/config/`;
-export const initSetUp = (): void => {
+const initSetUp = () => {
 	// if it is the first time the app is running
 	// create zulip dir in userData folder to
 	// avoid errors
@@ -42,19 +41,19 @@ export const initSetUp = (): void => {
 			const configData = [
 				{
 					path: domainJson,
-					fileName: 'domain.json'
+					fileName: `domain.json`
 				},
 				{
 					path: certificatesJson,
-					fileName: 'certificates.json'
+					fileName: `certificates.json`
 				},
 				{
 					path: settingsJson,
-					fileName: 'settings.json'
+					fileName: `settings.json`
 				},
 				{
 					path: updatesJson,
-					fileName: 'updates.json'
+					fileName: `updates.json`
 				}
 			];
 			configData.forEach(data => {
@@ -73,3 +72,7 @@ export const initSetUp = (): void => {
 		setupCompleted = true;
 	}
 };
+
+module.exports = {
+	initSetUp
+};
--- a/app/renderer/js/utils/dnd-util.js
+++ b/app/renderer/js/utils/dnd-util.js
@@ -1,28 +1,17 @@
-import * as ConfigUtil from './config-util';
+'use strict';

-// TODO: TypeScript - add to Setting interface
-// the list of settings since we have fixed amount of them
-// We want to do this by creating a new module that exports
-// this interface
-interface Setting {
-	[key: string]: boolean;
-}
+const ConfigUtil = require(__dirname + '/config-util.js');

-interface Toggle {
-	dnd: boolean;
-	newSettings: Setting;
-}
-
-export function toggle(): Toggle {
+function toggle() {
 	const dnd = !ConfigUtil.getConfigItem('dnd', false);
 	const dndSettingList = ['showNotification', 'silent'];
 	if (process.platform === 'win32') {
 		dndSettingList.push('flashTaskbarOnMessage');
 	}

-	let newSettings: Setting;
+	let newSettings;
 	if (dnd) {
-		const oldSettings: Setting = {};
+		const oldSettings = {};
 		newSettings = {};

 		// Iterate through the dndSettingList.
@@ -46,3 +35,7 @@ export function toggle(): Toggle {
 	ConfigUtil.setConfigItem('dnd', dnd);
 	return {dnd, newSettings};
 }
+
+module.exports = {
+	toggle
+};
--- a/app/renderer/js/utils/domain-util.js
+++ b/app/renderer/js/utils/domain-util.js
@@ -0,0 +1,328 @@
+'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 ProxyUtil = require(__dirname + '/proxy-util.js');
+const ConfigUtil = require(__dirname + '/config-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);
+			}
+		}
+
+		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+
+		// 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
+		// Add proxy as a parameter if it sbeing used.
+		const checkDomain = {
+			url: domain + '/static/audio/zulip.ogg',
+			ca: (certificateLocation) ? certificateLocation : '',
+			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : ''
+		};
+
+		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 proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+		const serverSettingsOptions = {
+			url: domain + '/api/v1/server_settings',
+			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : ''
+		};
+		return new Promise((resolve, reject) => {
+			request(serverSettingsOptions, (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) {
+		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+		const serverIconOptions = {
+			url,
+			proxy: proxyEnabled ? ProxyUtil.getProxy(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(serverIconOptions).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();
--- a/app/renderer/js/utils/domain-util.ts
+++ b/app/renderer/js/utils/domain-util.ts
@@ -1,309 +0,0 @@
-import { JsonDB } from 'node-json-db';
-
-import escape from 'escape-html';
-import request from 'request';
-import fs from 'fs';
-import path from 'path';
-import Logger from './logger-util';
-import { remote } from 'electron';
-
-import * as RequestUtil from './request-util';
-import * as EnterpriseUtil from './enterprise-util';
-import * as Messages from '../../../resources/messages';
-
-const { app, dialog } = remote;
-
-export interface ServerConf {
-	url: string;
-	alias?: string;
-	icon?: string;
-	ignoreCerts?: boolean;
-}
-
-const logger = new Logger({
-	file: 'domain-util.log',
-	timestamp: true
-});
-
-const defaultIconUrl = '../renderer/img/icon.png';
-
-export let db: JsonDB;
-
-reloadDB();
-// Migrate from old schema
-if (db.getData('/').domain) {
-	addDomain({
-		alias: 'Zulip',
-		url: db.getData('/domain')
-	});
-	db.delete('/domain');
-}
-
-export function getDomains(): ServerConf[] {
-	reloadDB();
-	if (db.getData('/').domains === undefined) {
-		return [];
-	} else {
-		return db.getData('/domains');
-	}
-}
-
-export function getDomain(index: number): ServerConf {
-	reloadDB();
-	return db.getData(`/domains[${index}]`);
-}
-
-export function shouldIgnoreCerts(url: string): boolean {
-	const domains = getDomains();
-	for (const domain of domains) {
-		if (domain.url === url) {
-			return domain.ignoreCerts;
-		}
-	}
-	return null;
-}
-
-function updateDomain(index: number, server: ServerConf): void {
-	reloadDB();
-	db.push(`/domains[${index}]`, server, true);
-}
-
-export async function addDomain(server: ServerConf): Promise<void> {
-	const { ignoreCerts } = server;
-	if (server.icon) {
-		const localIconUrl = await saveServerIcon(server, ignoreCerts);
-		server.icon = localIconUrl;
-		db.push('/domains[]', server, true);
-		reloadDB();
-	} else {
-		server.icon = defaultIconUrl;
-		db.push('/domains[]', server, true);
-		reloadDB();
-	}
-}
-
-export function removeDomains(): void {
-	db.delete('/domains');
-	reloadDB();
-}
-
-export function removeDomain(index: number): boolean {
-	if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
-		return false;
-	}
-	db.delete(`/domains[${index}]`);
-	reloadDB();
-	return true;
-}
-
-// Check if domain is already added
-export function duplicateDomain(domain: string): boolean {
-	domain = formatUrl(domain);
-	return getDomains().some(server => server.url === domain);
-}
-
-async function checkCertError(domain: string, serverConf: ServerConf, error: string, silent: boolean): Promise<ServerConf> {
-	if (silent) {
-		// since getting server settings has already failed
-		return serverConf;
-	} else {
-		// Report error to sentry to get idea of possible certificate errors
-		// users get when adding the servers
-		logger.reportSentry(new Error(error).toString());
-		const certErrorMessage = Messages.certErrorMessage(domain, error);
-		const certErrorDetail = Messages.certErrorDetail();
-
-		const { response } = await dialog.showMessageBox({
-			type: 'warning',
-			buttons: ['Yes', 'No'],
-			defaultId: 1,
-			message: certErrorMessage,
-			detail: certErrorDetail
-		});
-		if (response === 0) {
-			// set ignoreCerts parameter to true in case user responds with yes
-			serverConf.ignoreCerts = true;
-			try {
-				return await getServerSettings(domain, serverConf.ignoreCerts);
-			} catch (_) {
-				if (error === Messages.noOrgsError(domain)) {
-					throw new Error(error);
-				}
-				return serverConf;
-			}
-		} else {
-			throw new Error('Untrusted certificate.');
-		}
-	}
-}
-
-// ignoreCerts parameter helps in fetching server icon and
-// other server details when user chooses to ignore certificate warnings
-export async function checkDomain(domain: string, ignoreCerts = false, silent = false): Promise<ServerConf> {
-	if (!silent && duplicateDomain(domain)) {
-		// Do not check duplicate in silent mode
-		throw new Error('This server has been added.');
-	}
-
-	domain = formatUrl(domain);
-
-	const serverConf = {
-		icon: defaultIconUrl,
-		url: domain,
-		alias: domain,
-		ignoreCerts
-	};
-
-	try {
-		return await getServerSettings(domain, serverConf.ignoreCerts);
-	} catch (err) {
-		// Make sure that error is an error or string not undefined
-		// so validation does not throw error.
-		const error = err || '';
-
-		const certsError = error.toString().includes('certificate');
-		if (certsError) {
-			const result = await checkCertError(domain, serverConf, error, silent);
-			return result;
-		} else {
-			throw new Error(Messages.invalidZulipServerError(domain));
-		}
-	}
-}
-
-async function getServerSettings(domain: string, ignoreCerts = false): Promise<ServerConf> {
-	const serverSettingsOptions = {
-		url: domain + '/api/v1/server_settings',
-		...RequestUtil.requestOptions(domain, ignoreCerts)
-	};
-
-	return new Promise((resolve, reject) => {
-		request(serverSettingsOptions, (error: string, response: any) => {
-			if (!error && response.statusCode === 200) {
-				const data = JSON.parse(response.body);
-				if (Object.prototype.hasOwnProperty.call(data, '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),
-						ignoreCerts
-					});
-				} else {
-					reject(Messages.noOrgsError(domain));
-				}
-			} else {
-				reject(response);
-			}
-		});
-	});
-}
-
-export async function saveServerIcon(server: ServerConf, ignoreCerts = false): Promise<string> {
-	const url = server.icon;
-	const domain = server.url;
-
-	const serverIconOptions = {
-		url,
-		...RequestUtil.requestOptions(domain, ignoreCerts)
-	};
-
-	// The save will always succeed. If url is invalid, downgrade to default icon.
-	return new Promise(resolve => {
-		const filePath = generateFilePath(url);
-		const file = fs.createWriteStream(filePath);
-		try {
-			request(serverIconOptions).on('response', (response: any) => {
-				response.on('error', (err: string) => {
-					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: string) => {
-				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);
-		}
-	});
-}
-
-export async function updateSavedServer(url: string, index: number): Promise<void> {
-	// Does not promise successful update
-	const oldIcon = getDomain(index).icon;
-	const { ignoreCerts } = getDomain(index);
-	try {
-		const newServerConf = await checkDomain(url, ignoreCerts, true);
-		const localIconUrl = await saveServerIcon(newServerConf, ignoreCerts);
-		if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
-			newServerConf.icon = localIconUrl;
-			updateDomain(index, newServerConf);
-			reloadDB();
-		}
-	} catch (err) {
-		logger.log('Could not update server icon.');
-		logger.log(err);
-		logger.reportSentry(err);
-	}
-}
-
-export function reloadDB(): void {
-	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);
-		}
-	}
-	db = new JsonDB(domainJsonPath, true, true);
-}
-
-function generateFilePath(url: string): string {
-	const dir = `${app.getPath('userData')}/server-icons`;
-	const extension = path.extname(url).split('?')[0];
-
-	let hash = 5381;
-	let { length } = url;
-
-	while (length) {
-		hash = (hash * 33) ^ url.charCodeAt(--length);
-	}
-
-	// Create 'server-icons' directory if not existed
-	if (!fs.existsSync(dir)) {
-		fs.mkdirSync(dir);
-	}
-
-	return `${dir}/${hash >>> 0}${extension}`;
-}
-
-export function formatUrl(domain: string): string {
-	if (domain.startsWith('http://') || domain.startsWith('https://')) {
-		return domain;
-	}
-	if (domain.startsWith('localhost:')) {
-		return `http://${domain}`;
-	}
-	return `https://${domain}`;
-}
--- a/app/renderer/js/utils/enterprise-util.ts
+++ b/app/renderer/js/utils/enterprise-util.ts
@@ -1,68 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import Logger from './logger-util';
-
-const logger = new Logger({
-	file: 'enterprise-util.log',
-	timestamp: true
-});
-
-// todo: replace enterpriseSettings type with an interface once settings are final
-export let enterpriseSettings: any;
-export let configFile: boolean;
-
-reloadDB();
-
-function reloadDB(): void {
-	let enterpriseFile = '/etc/zulip-desktop-config/global_config.json';
-	if (process.platform === 'win32') {
-		enterpriseFile = 'C:\\Program Files\\Zulip-Desktop-Config\\global_config.json';
-	}
-
-	enterpriseFile = path.resolve(enterpriseFile);
-	if (fs.existsSync(enterpriseFile)) {
-		configFile = true;
-		try {
-			const file = fs.readFileSync(enterpriseFile, 'utf8');
-			enterpriseSettings = JSON.parse(file);
-		} catch (err) {
-			logger.log('Error while JSON parsing global_config.json: ');
-			logger.log(err);
-		}
-	} else {
-		configFile = false;
-	}
-}
-
-export function getConfigItem(key: string, defaultValue?: any): any {
-	reloadDB();
-	if (!configFile) {
-		return defaultValue;
-	}
-	if (defaultValue === undefined) {
-		defaultValue = null;
-	}
-	return configItemExists(key) ? enterpriseSettings[key] : defaultValue;
-}
-
-export function configItemExists(key: string): boolean {
-	reloadDB();
-	if (!configFile) {
-		return false;
-	}
-	return (enterpriseSettings[key] !== undefined);
-}
-
-export function isPresetOrg(url: string): boolean {
-	if (!configFile || !configItemExists('presetOrganizations')) {
-		return false;
-	}
-	const presetOrgs = enterpriseSettings.presetOrganizations;
-	for (const org of presetOrgs) {
-		if (url.includes(org)) {
-			return true;
-		}
-	}
-	return false;
-}
--- a/app/renderer/js/utils/link-util.js
+++ b/app/renderer/js/utils/link-util.js
@@ -0,0 +1,45 @@
+'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);
+	}
+
+	isPDF(url) {
+		// test for pdf extension
+		const isPDFUrl = /\.(pdf)\?*.*$/i;
+		return isPDFUrl.test(url);
+	}
+}
+
+module.exports = new LinkUtil();
--- a/app/renderer/js/utils/link-util.ts
+++ b/app/renderer/js/utils/link-util.ts
@@ -1,45 +0,0 @@
-import { shell } from 'electron';
-import escape from 'escape-html';
-import fs from 'fs';
-import os from 'os';
-import path from 'path';
-
-export function isUploadsUrl(server: string, url: URL): boolean {
-	return url.origin === server && url.pathname.startsWith('/user_uploads/');
-}
-
-export function openBrowser(url: URL): void {
-	if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
-		shell.openExternal(url.href);
-	} else {
-		// For security, indirect links to non-whitelisted protocols
-		// through a real web browser via a local HTML file.
-		const dir = fs.mkdtempSync(
-			path.join(os.tmpdir(), 'zulip-redirect-')
-		);
-		const file = path.join(dir, 'redirect.html');
-		fs.writeFileSync(file, `\
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="Refresh" content="0; url=${escape(url.href)}" />
-        <title>Redirecting</title>
-        <style>
-            html {
-                font-family: menu, "Helvetica Neue", sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <p>Opening <a href="${escape(url.href)}">${escape(url.href)}</a>…</p>
-    </body>
-</html>
-`);
-		shell.openItem(file);
-		setTimeout(() => {
-			fs.unlinkSync(file);
-			fs.rmdirSync(dir);
-		}, 15000);
-	}
-}
--- a/app/renderer/js/utils/linux-update-util.js
+++ b/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();
--- a/app/renderer/js/utils/linux-update-util.ts
+++ b/app/renderer/js/utils/linux-update-util.ts
@@ -1,61 +0,0 @@
-import { JsonDB } from 'node-json-db';
-
-import fs from 'fs';
-import path from 'path';
-import electron from 'electron';
-import Logger from './logger-util';
-
-const remote =
-	process.type === 'renderer' ? electron.remote : electron;
-
-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 db: JsonDB;
-
-reloadDB();
-
-export function getUpdateItem(key: string, defaultValue: any = null): any {
-	reloadDB();
-	const value = db.getData('/')[key];
-	if (value === undefined) {
-		setUpdateItem(key, defaultValue);
-		return defaultValue;
-	} else {
-		return value;
-	}
-}
-
-export function setUpdateItem(key: string, value: any): void {
-	db.push(`/${key}`, value, true);
-	reloadDB();
-}
-
-export function removeUpdateItem(key: string): void {
-	db.delete(`/${key}`);
-	reloadDB();
-}
-
-function reloadDB(): void {
-	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);
-		}
-	}
-	db = new JsonDB(linuxUpdateJsonPath, true, true);
-}
--- a/app/renderer/js/utils/logger-util.js
+++ b/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;
--- a/app/renderer/js/utils/logger-util.ts
+++ b/app/renderer/js/utils/logger-util.ts
@@ -1,153 +0,0 @@
-import { Console as NodeConsole } from 'console'; // eslint-disable-line node/prefer-global/console
-import { initSetUp } from './default-util';
-import { sentryInit, captureException } from './sentry-util';
-
-import fs from 'fs';
-import os from 'os';
-import isDev from 'electron-is-dev';
-import electron from 'electron';
-// this interface adds [key: string]: any so
-// we can do console[type] later on in the code
-interface PatchedConsole extends Console {
-	[key: string]: any;
-}
-
-interface LoggerOptions {
-	timestamp?: true | (() => string);
-	file?: string;
-	level?: boolean;
-	logInDevMode?: boolean;
-}
-
-initSetUp();
-
-let app: Electron.App = null;
-let reportErrors = true;
-if (process.type === 'renderer') {
-	app = electron.remote.app;
-
-	// Report Errors to Sentry only if it is enabled in settings
-	// Gets the value of reportErrors from config-util for renderer process
-	// For main process, sentryInit() is handled in index.js
-	const { ipcRenderer } = electron;
-	ipcRenderer.send('error-reporting');
-	ipcRenderer.on('error-reporting-val', (_event: any, errorReporting: boolean) => {
-		reportErrors = errorReporting;
-		if (reportErrors) {
-			sentryInit();
-		}
-	});
-} else {
-	app = electron.app;
-}
-
-const browserConsole: PatchedConsole = console;
-const logDir = `${app.getPath('userData')}/Logs`;
-
-export default class Logger {
-	nodeConsole: PatchedConsole;
-	timestamp?: () => string;
-	level: boolean;
-	logInDevMode: boolean;
-	[key: string]: any;
-
-	constructor(options: LoggerOptions = {}) {
-		let {
-			timestamp = true,
-			file = 'console.log',
-			level = true,
-			logInDevMode = false
-		} = options;
-
-		file = `${logDir}/${file}`;
-		if (timestamp === true) {
-			timestamp = this.getTimestamp;
-		}
-
-		// Trim log according to type of process
-		if (process.type === 'renderer') {
-			requestIdleCallback(() => this.trimLog(file));
-		} else {
-			process.nextTick(() => this.trimLog(file));
-		}
-
-		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: string, ...args: any[]): void {
-		const {
-			nodeConsole, timestamp, level, logInDevMode
-		} = this;
-		let nodeConsoleLog;
-
-		/* eslint-disable no-fallthrough */
-		switch (true) {
-			case typeof timestamp === 'function':
-				args.unshift(timestamp() + ' |\t');
-
-			case (level):
-				args.unshift(type.toUpperCase() + ' |');
-
-			case isDev || logInDevMode:
-				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
-				nodeConsoleLog.apply(null, args); // eslint-disable-line prefer-spread
-
-			default: break;
-		}
-		/* eslint-enable no-fallthrough */
-
-		browserConsole[type].apply(null, args);
-	}
-
-	setUpConsole(): void {
-		for (const type of Object.keys(browserConsole)) {
-			this.setupConsoleMethod(type);
-		}
-	}
-
-	setupConsoleMethod(type: string): void {
-		this[type] = (...args: any[]) => {
-			const log = this._log.bind(this, type, ...args);
-			log();
-		};
-	}
-
-	getTimestamp(): string {
-		const date = new Date();
-		const timestamp =
-			`${date.getMonth()}/${date.getDate()} ` +
-			`${date.getMinutes()}:${date.getSeconds()}`;
-		return timestamp;
-	}
-
-	reportSentry(err: string): void {
-		if (reportErrors) {
-			captureException(err);
-		}
-	}
-
-	trimLog(file: string): void{
-		fs.readFile(file, 'utf8', (err, data) => {
-			if (err) {
-				throw err;
-			}
-			const MAX_LOG_FILE_LINES = 500;
-			const logs = data.split(os.EOL);
-			const logLength = logs.length - 1;
-
-			// Keep bottom MAX_LOG_FILE_LINES of each log instance
-			if (logLength > MAX_LOG_FILE_LINES) {
-				const trimmedLogs = logs.slice(logLength - MAX_LOG_FILE_LINES);
-				const toWrite = trimmedLogs.join(os.EOL);
-				fs.writeFileSync(file, toWrite);
-			}
-		});
-	}
-}
--- a/app/renderer/js/utils/params-util.js
+++ b/app/renderer/js/utils/params-util.js
@@ -0,0 +1,15 @@
+// This util function returns the page params if they're present else returns null
+function isPageParams() {
+	let webpageParams = null;
+	try {
+		// eslint-disable-next-line no-undef, camelcase
+		webpageParams = page_params;
+	} catch (err) {
+		webpageParams = null;
+	}
+	return webpageParams;
+}
+
+module.exports = {
+	isPageParams
+};
--- a/app/renderer/js/utils/proxy-util.js
+++ b/app/renderer/js/utils/proxy-util.js
@@ -0,0 +1,130 @@
+'use strict';
+
+const url = require('url');
+const ConfigUtil = require('./config-util.js');
+
+let instance = null;
+
+class ProxyUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		return instance;
+	}
+
+	// Return proxy to be used for a particular uri, to be used for request
+	getProxy(uri) {
+		uri = url.parse(uri);
+		const proxyRules = ConfigUtil.getConfigItem('proxyRules', '').split(';');
+		// If SPS is on and system uses no proxy then request should not try to use proxy from
+		// environment. NO_PROXY = '*' makes request ignore all environment proxy variables.
+		if (proxyRules[0] === '') {
+			process.env.NO_PROXY = '*';
+			return;
+		}
+
+		const proxyRule = {};
+		if (uri.protocol === 'http:') {
+			proxyRules.forEach(proxy => {
+				if (proxy.includes('http=')) {
+					proxyRule.hostname = proxy.split('http=')[1].trim().split(':')[0];
+					proxyRule.port = proxy.split('http=')[1].trim().split(':')[1];
+				}
+			});
+			return proxyRule;
+		}
+
+		if (uri.protocol === 'https:') {
+			proxyRules.forEach(proxy => {
+				if (proxy.includes('https=')) {
+					proxyRule.hostname = proxy.split('https=')[1].trim().split(':')[0];
+					proxyRule.port = proxy.split('https=')[1].trim().split(':')[1];
+				}
+			});
+			return proxyRule;
+		}
+	}
+
+	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();
--- a/app/renderer/js/utils/proxy-util.ts
+++ b/app/renderer/js/utils/proxy-util.ts
@@ -1,118 +0,0 @@
-import * as ConfigUtil from './config-util';
-
-export interface ProxyRule {
-	hostname?: string;
-	port?: number;
-}
-
-// Return proxy to be used for a particular uri, to be used for request
-export function getProxy(_uri: string): ProxyRule | void {
-	let uri;
-	try {
-		uri = new URL(_uri);
-	} catch (err) {
-		return;
-	}
-
-	const proxyRules = ConfigUtil.getConfigItem('proxyRules', '').split(';');
-	// If SPS is on and system uses no proxy then request should not try to use proxy from
-	// environment. NO_PROXY = '*' makes request ignore all environment proxy variables.
-	if (proxyRules[0] === '') {
-		process.env.NO_PROXY = '*';
-		return;
-	}
-
-	const proxyRule: any = {};
-	if (uri.protocol === 'http:') {
-		proxyRules.forEach((proxy: string) => {
-			if (proxy.includes('http=')) {
-				proxyRule.hostname = proxy.split('http=')[1].trim().split(':')[0];
-				proxyRule.port = proxy.split('http=')[1].trim().split(':')[1];
-			}
-		});
-		return proxyRule;
-	}
-
-	if (uri.protocol === 'https:') {
-		proxyRules.forEach((proxy: string) => {
-			if (proxy.includes('https=')) {
-				proxyRule.hostname = proxy.split('https=')[1].trim().split(':')[0];
-				proxyRule.port = proxy.split('https=')[1].trim().split(':')[1];
-			}
-		});
-		return proxyRule;
-	}
-}
-
-// TODO: Refactor to async function
-export async function resolveSystemProxy(mainWindow: Electron.BrowserWindow): Promise<void> {
-	const page = mainWindow.webContents;
-	const ses = page.session;
-	const resolveProxyUrl = 'www.example.com';
-
-	// Check HTTP Proxy
-	const httpProxy = (async () => {
-		const proxy = await ses.resolveProxy('http://' + resolveProxyUrl);
-		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] + ';';
-			}
-		}
-		return httpString;
-	})();
-	// Check HTTPS Proxy
-	const httpsProxy = (async () => {
-		const proxy = await ses.resolveProxy('https://' + resolveProxyUrl);
-		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] + ';';
-			}
-		}
-		return httpsString;
-	})();
-
-	// Check FTP Proxy
-	const ftpProxy = (async () => {
-		const proxy = await ses.resolveProxy('ftp://' + resolveProxyUrl);
-		let ftpString = '';
-		if (proxy !== 'DIRECT') {
-			if (proxy.includes('PROXY')) {
-				ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-		return ftpString;
-	})();
-
-	// Check SOCKS Proxy
-	const socksProxy = (async () => {
-		const proxy = await ses.resolveProxy('socks4://' + resolveProxyUrl);
-		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] + ';';
-			}
-		}
-		return socksString;
-	})();
-
-	const values = await Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]);
-	let proxyString = '';
-	values.forEach(proxy => {
-		proxyString += proxy;
-	});
-	ConfigUtil.setConfigItem('systemProxyRules', proxyString);
-	const useSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-	if (useSystemProxy) {
-		ConfigUtil.setConfigItem('proxyRules', proxyString);
-	}
-}
--- a/app/renderer/js/utils/reconnect-util.js
+++ b/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;
--- a/app/renderer/js/utils/reconnect-util.ts
+++ b/app/renderer/js/utils/reconnect-util.ts
@@ -1,88 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-import type WebView from '../components/webview';
-import backoff from 'backoff';
-import request from 'request';
-import Logger from './logger-util';
-import * as RequestUtil from './request-util';
-import * as DomainUtil from './domain-util';
-
-const logger = new Logger({
-	file: 'domain-util.log',
-	timestamp: true
-});
-
-export default class ReconnectUtil {
-	webview: WebView;
-	url: string;
-	alreadyReloaded: boolean;
-	fibonacciBackoff: backoff.Backoff;
-
-	constructor(webview: WebView) {
-		this.webview = webview;
-		this.url = webview.props.url;
-		this.alreadyReloaded = false;
-		this.clearState();
-	}
-
-	clearState(): void {
-		this.fibonacciBackoff = backoff.fibonacci({
-			initialDelay: 5000,
-			maxDelay: 300000
-		});
-	}
-
-	async isOnline(): Promise<boolean> {
-		return new Promise(resolve => {
-			try {
-				const ignoreCerts = DomainUtil.shouldIgnoreCerts(this.url);
-				if (ignoreCerts === null) {
-					return;
-				}
-				request(
-					{
-						url: `${this.url}/static/favicon.ico`,
-						...RequestUtil.requestOptions(this.url, ignoreCerts)
-					},
-					(error: Error, response: any) => {
-						const isValidResponse =
-							!error && response.statusCode >= 200 && response.statusCode < 400;
-						resolve(isValidResponse);
-					}
-				);
-			} catch (err) {
-				logger.log(err);
-			}
-		});
-	}
-
-	pollInternetAndReload(): void {
-		this.fibonacciBackoff.backoff();
-		this.fibonacciBackoff.on('ready', async () => {
-			if (await this._checkAndReload()) {
-				this.fibonacciBackoff.reset();
-			} else {
-				this.fibonacciBackoff.backoff();
-			}
-		});
-	}
-
-	async _checkAndReload(): Promise<boolean> {
-		if (this.alreadyReloaded) {
-			return true;
-		}
-		if (await this.isOnline()) {
-			ipcRenderer.send('forward-message', 'reload-viewer');
-			logger.log('You\'re back online.');
-			return true;
-		}
-		logger.log('There is no internet connection, try checking network cables, modem and router.');
-		const errorMessageHolder = document.querySelector('#description');
-		if (errorMessageHolder) {
-			errorMessageHolder.innerHTML = `
-						<div>Your internet connection doesn't seem to work properly!</div>
-						<div>Verify that it works and then click try again.</div>`;
-		}
-		return false;
-	}
-}
--- a/app/renderer/js/utils/request-util.ts
+++ b/app/renderer/js/utils/request-util.ts
@@ -1,70 +0,0 @@
-import { remote } from 'electron';
-
-import fs from 'fs';
-import path from 'path';
-import * as ConfigUtil from './config-util';
-import Logger from './logger-util';
-import * as ProxyUtil from './proxy-util';
-import * as CertificateUtil from './certificate-util';
-import * as SystemUtil from './system-util';
-
-const { app } = remote;
-
-const logger = new Logger({
-	file: 'request-util.log',
-	timestamp: true
-});
-
-interface RequestUtilResponse {
-	ca: string;
-	proxy: string | void | ProxyUtil.ProxyRule;
-	ecdhCurve: 'auto';
-	headers: { 'User-Agent': string };
-	rejectUnauthorized: boolean;
-}
-
-// ignoreCerts parameter helps in fetching server icon and
-// other server details when user chooses to ignore certificate warnings
-export function requestOptions(domain: string, ignoreCerts: boolean): RequestUtilResponse {
-	domain = formatUrl(domain);
-	const certificate = CertificateUtil.getCertificate(
-		encodeURIComponent(domain)
-	);
-
-	let certificateFile = null;
-	if (certificate?.includes('/')) {
-		// certificate saved using old app version
-		certificateFile = certificate;
-	} else if (certificate) {
-		certificateFile = path.join(`${app.getPath('userData')}/certificates`, certificate);
-	}
-
-	let certificateLocation = '';
-	if (certificate) {
-		// To handle case where certificate has been moved from the location in certificates.json
-		try {
-			certificateLocation = fs.readFileSync(certificateFile, 'utf8');
-		} catch (err) {
-			logger.warn(`Error while trying to get certificate: ${err}`);
-		}
-	}
-	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-	// 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
-	// Add proxy as a parameter if it is being used.
-	return {
-		ca: certificateLocation ? certificateLocation : '',
-		proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : '',
-		ecdhCurve: 'auto',
-		headers: { 'User-Agent': SystemUtil.getUserAgent() },
-		rejectUnauthorized: !ignoreCerts
-	};
-}
-
-function formatUrl(domain: string): string {
-	const hasPrefix = domain.startsWith('http', 0);
-	if (hasPrefix) {
-		return domain;
-	} else {
-		return domain.includes('localhost:') ? `http://${domain}` : `https://${domain}`;
-	}
-}
--- a/app/renderer/js/utils/sentry-util.js
+++ b/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
+};
--- a/Show More
+++ b/Show More