windows: Update deprecated electron api (toPng -> toPNG).

Fixes: #474.

.github/ISSUE_TEMPLATE.md

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

.github/PULL_REQUEST_TEMPLATE.md

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

.gitignore

@@ -7,6 +7,13 @@ node_modules/
 # Compiled binary build directory
 dist/
 
+#snap generated files
+snap/parts
+snap/prime
+snap/snap
+snap/stage
+snap/*.snap
+
 # Logs
 logs
 *.log
@@ -23,4 +30,9 @@ yarn-error.log*
 
 # miscellaneous
 .idea
-config.gypi
+config.gypi
+
+# Test generated files
+tests/package.json
+
+.python-version

.python-version

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

.travis.yml

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

ISSUE_TEMPLATE.md

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

README.md

@@ -8,23 +8,16 @@ Desktop client for Zulip. Available for Mac, Linux and Windows.
 <img src="http://i.imgur.com/ChzTq4F.png"/>
 
 # Download
-Please see [installation guide](./how-to-install.md).
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
 
 # Features
 * Sign in to multiple teams
-* Native desktop Notifications
-* SpellChecker
+* Desktop Notifications with inline reply support
+* Multilanguage SpellChecker
 * OSX/Win/Linux installers
-* Automatic Updates (macOS/Windows)
+* Automatic Updates (macOS/Windows/Linux)
 * Keyboard shortcuts
 
-Description            | Keys
------------------------| -----------------------
-Default shortcuts      | <kbd>Cmd/Ctrl</kbd> <kbd>k</kbd>
-Manage Zulip Servers    | <kbd>Cmd/Ctrl</kbd> <kbd>,</kbd>
-Back                   | <kbd>Cmd/Ctrl</kbd> <kbd>[</kbd>
-Forward                | <kbd>Cmd/Ctrl</kbd> <kbd>]</kbd>
-
 # Development
 Please see our [development guide](./development.md) to get started and run app locally.
 

app/main/autoupdater.js

@@ -1,5 +1,4 @@
 'use strict';
-const fs = require('fs');
 const { app, dialog } = require('electron');
 const { autoUpdater } = require('electron-updater');
 const isDev = require('electron-is-dev');
@@ -7,19 +6,20 @@ const isDev = require('electron-is-dev');
 const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
 function appUpdater() {
-	// Don't initiate auto-updates in development and on Linux system
-	// since autoUpdater doesn't work on Linux
-	if (isDev || process.platform === 'linux') {
+	// Don't initiate auto-updates in development
+	if (isDev) {
+		return;
+	}
+
+	if (process.platform === 'linux' && !process.env.APPIMAGE) {
+		const { linuxUpdateNotification } = require('./linuxupdater');
+		linuxUpdateNotification();
 		return;
 	}
 
 	// Create Logs directory
 	const LogsDir = `${app.getPath('userData')}/Logs`;
 
-	if (!fs.existsSync(LogsDir)) {
-		fs.mkdirSync(LogsDir);
-	}
-
 	// Log whats happening
 	const log = require('electron-log');
 

app/main/crash-reporter.js

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

app/main/index.js

@@ -1,18 +1,24 @@
 'use strict';
 const path = require('path');
 const electron = require('electron');
-const electronLocalshortcut = require('electron-localshortcut');
 const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
 const appMenu = require('./menu');
 const { appUpdater } = require('./autoupdater');
+const { crashHandler } = require('./crash-reporter');
+
 const { setAutoLaunch } = require('./startup');
 
 const { app, ipcMain } = electron;
 
 const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
 
 // Adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
+// in development mode
+if (isDev) {
+	require('electron-debug')();
+}
 
 // Prevent window being garbage collected
 let mainWindow;
@@ -46,9 +52,13 @@ const iconPath = () => {
 function createMainWindow() {
 	// Load the previous state with fallback to defaults
 	const mainWindowState = windowStateKeeper({
-		defaultWidth: 1000,
-		defaultHeight: 600
+		defaultWidth: 1100,
+		defaultHeight: 720
 	});
+
+	// 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',
@@ -57,11 +67,10 @@ function createMainWindow() {
 		y: mainWindowState.y,
 		width: mainWindowState.width,
 		height: mainWindowState.height,
-		minWidth: 600,
-		minHeight: 500,
+		minWidth: 300,
+		minHeight: 400,
 		webPreferences: {
 			plugins: true,
-			allowDisplayingInsecureContent: true,
 			nodeIntegration: true
 		},
 		show: false
@@ -72,7 +81,11 @@ function createMainWindow() {
 	});
 
 	win.once('ready-to-show', () => {
-		win.show();
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
 	});
 
 	win.loadURL(mainURL);
@@ -88,9 +101,6 @@ function createMainWindow() {
 				win.hide();
 			}
 		}
-
-		// Unregister all the shortcuts so that they don't interfare with other apps
-		electronLocalshortcut.unregisterAll(mainWindow);
 	});
 
 	win.setTitle('Zulip');
@@ -118,21 +128,8 @@ function createMainWindow() {
 	return win;
 }
 
-function registerLocalShortcuts(page) {
-	// Somehow, reload action cannot be overwritten by the menu item
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		page.send('reload-viewer');
-	});
-
-	// Also adding these shortcuts because some users might want to use it instead of CMD/Left-Right
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		page.send('back');
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		page.send('forward');
-	});
-}
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
 
 // eslint-disable-next-line max-params
 app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
@@ -140,11 +137,6 @@ app.on('certificate-error', (event, webContents, url, error, certificate, callba
 	callback(true);
 });
 
-app.on('window-all-closed', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
 app.on('activate', () => {
 	if (!mainWindow) {
 		mainWindow = createMainWindow();
@@ -159,20 +151,25 @@ app.on('ready', () => {
 
 	const page = mainWindow.webContents;
 
-	registerLocalShortcuts(page);
-
 	page.on('dom-ready', () => {
-		mainWindow.show();
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
+		}
 	});
 
 	page.once('did-frame-finish-load', () => {
 		// Initate auto-updates on MacOS and Windows
 		appUpdater();
+		crashHandler();
 	});
 
-	electron.powerMonitor.on('resume', () => {
-		page.send('reload-viewer');
-	});
+	// Temporarily remove this event
+	// electron.powerMonitor.on('resume', () => {
+	// 	mainWindow.reload();
+	// 	page.send('destroytray');
+	// });
 
 	ipcMain.on('focus-app', () => {
 		mainWindow.show();
@@ -188,6 +185,12 @@ app.on('ready', () => {
 		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();
@@ -218,31 +221,11 @@ app.on('ready', () => {
 		appMenu.setMenu(props);
 	});
 
-	ipcMain.on('register-server-tab-shortcut', (event, index) => {
-		electronLocalshortcut.register(mainWindow, `CommandOrControl+${index}`, () => {
-			// Array index == Shown index - 1
-			page.send('switch-server-tab', index - 1);
-		});
-	});
-
-	ipcMain.on('local-shortcuts', (event, enable) => {
-		if (enable) {
-			registerLocalShortcuts(page);
-		} else {
-			electronLocalshortcut.unregisterAll(mainWindow);
-		}
-	});
-
 	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
 		setAutoLaunch(AutoLaunchValue);
 	});
 });
 
-app.on('will-quit', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
 app.on('before-quit', () => {
 	isQuitting = true;
 });

app/main/linuxupdater.js

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

app/main/menu.js

@@ -1,8 +1,12 @@
 'use strict';
-const os = require('os');
-const {dialog, app, shell, BrowserWindow, Menu} = require('electron');
+const path = require('path');
+
+const { app, shell, BrowserWindow, Menu, dialog } = require('electron');
+
+const fs = require('fs-extra');
 
 const ConfigUtil = require(__dirname + '/../renderer/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/../renderer/js/utils/dnd-util.js');
 
 const appName = app.getName();
 
@@ -33,7 +37,7 @@ class AppMenu {
 			accelerator: 'CommandOrControl+R',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
-					AppMenu.sendAction('reload-viewer');
+					AppMenu.sendAction('reload-current-viewer');
 				}
 			}
 		}, {
@@ -50,7 +54,7 @@ class AppMenu {
 			role: 'togglefullscreen'
 		}, {
 			label: 'Zoom In',
-			accelerator: 'CommandOrControl+=',
+			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
 					AppMenu.sendAction('zoomIn');
@@ -83,7 +87,7 @@ class AppMenu {
 			}
 		}, {
 			label: 'Toggle Sidebar',
-			accelerator: 'CommandOrControl+S',
+			accelerator: 'CommandOrControl+Shift+S',
 			click(item, focusedWindow) {
 				if (focusedWindow) {
 					const newValue = !ConfigUtil.getConfigItem('showSidebar');
@@ -111,26 +115,37 @@ class AppMenu {
 	}
 
 	getHelpSubmenu() {
-		return [{
-			label: `${appName} Website`,
-			click() {
-				shell.openExternal('https://zulipchat.com/help/');
-			}
-		}, {
-			label: `${appName + 'Desktop'} - ${app.getVersion()}`,
-			enabled: false
-		}, {
-			label: 'Report an Issue...',
-			click() {
-				const body = `
-					<!-- Please succinctly describe your issue and steps to reproduce it. -->
-					-
-					${app.getName()} ${app.getVersion()}
-					Electron ${process.versions.electron}
-					${process.platform} ${process.arch} ${os.release()}`;
-				shell.openExternal(`https://github.com/zulip/zulip-electron/issues/new?body=${encodeURIComponent(body)}`);
-			}
-		}];
+		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() {
+					shell.openItem(app.getPath('userData'));
+				}
+			}, {
+				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) {
@@ -146,6 +161,11 @@ class AppMenu {
 				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}`,
@@ -155,7 +175,7 @@ class AppMenu {
 							AppMenu.sendAction('switch-server-tab', tabs[i].props.index);
 						}
 					},
-					type: 'radio'
+					type: 'checkbox'
 				});
 			}
 		}
@@ -164,12 +184,12 @@ class AppMenu {
 	}
 
 	getDarwinTpl(props) {
-		const {tabs, activeTabIndex} = props;
+		const { tabs, activeTabIndex } = props;
 
 		return [{
 			label: `${app.getName()}`,
 			submenu: [{
-				label: 'Zulip Desktop',
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('open-about');
@@ -178,7 +198,7 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Settings',
+				label: 'Desktop App Settings',
 				accelerator: 'Cmd+,',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
@@ -187,7 +207,7 @@ class AppMenu {
 				}
 			}, {
 				label: 'Keyboard Shortcuts',
-				accelerator: 'Cmd+K',
+				accelerator: 'Cmd+Shift+K',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('shortcut');
@@ -196,9 +216,17 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Clear Cache',
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Command+Shift+M',
 				click() {
-					AppMenu.clearCache();
+					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',
@@ -263,12 +291,12 @@ class AppMenu {
 	}
 
 	getOtherTpl(props) {
-		const {tabs, activeTabIndex} = props;
+		const { tabs, activeTabIndex } = props;
 
 		return [{
 			label: 'File',
 			submenu: [{
-				label: 'Zulip Desktop',
+				label: 'About Zulip',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('open-about');
@@ -277,7 +305,7 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Settings',
+				label: 'Desktop App Settings',
 				accelerator: 'Ctrl+,',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
@@ -288,7 +316,7 @@ class AppMenu {
 				type: 'separator'
 			}, {
 				label: 'Keyboard Shortcuts',
-				accelerator: 'Ctrl+K',
+				accelerator: 'Ctrl+Shift+K',
 				click(item, focusedWindow) {
 					if (focusedWindow) {
 						AppMenu.sendAction('shortcut');
@@ -297,9 +325,17 @@ class AppMenu {
 			}, {
 				type: 'separator'
 			}, {
-				label: 'Clear Cache',
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Ctrl+Shift+M',
 				click() {
-					AppMenu.clearCache();
+					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',
@@ -363,11 +399,33 @@ class AppMenu {
 		win.webContents.send(action, ...params);
 	}
 
-	static clearCache() {
-		const win = BrowserWindow.getAllWindows()[0];
-		const ses = win.webContents.session;
-		ses.clearCache(() => {
-			dialog.showMessageBox({type: 'info', buttons: [], message: 'Cache cleared!'});
+	static resetAppSettings() {
+		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 = ['window-state.json', 'domain.json', 'settings.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) {
+							console.log(error);
+						} else {
+							fs.unlink(getSettingFilesPath, () => {
+								AppMenu.sendAction('clear-app-data');
+							});
+						}
+					});
+				});
+			}
 		});
 	}
 

app/package.json

@@ -1,14 +1,13 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "1.4.0",
+  "version": "2.2.0-beta",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
-  "email": "<svnitakash@gmail.com>",
-  "copyright": "©2017 Kandra Labs, Inc.",
+  "copyright": "Kandra Labs, Inc.",
   "author": {
     "name": "Kandra Labs, Inc.",
-    "email": "svnitakash@gmail.com"
+    "email": "support@zulipchat.com"
   },
   "repository": {
     "type": "git",
@@ -27,16 +26,20 @@
     "InstantMessaging"
   ],
   "dependencies": {
-    "electron-debug": "1.4.0",
+    "@electron-elements/send-feedback": "1.0.7",
+    "auto-launch": "5.0.5",
     "electron-is-dev": "0.3.0",
-    "electron-localshortcut": "2.0.2",
-    "electron-log": "2.2.7",
-    "electron-spellchecker": "1.2.0",
-    "electron-updater": "2.8.9",
-    "node-json-db": "0.7.3",
-    "request": "2.81.0",
-    "wurl": "2.5.0",
+    "electron-log": "2.2.14",
+    "electron-spellchecker": "1.1.2",
+    "electron-updater": "2.21.10",
     "electron-window-state": "4.1.1",
-    "auto-launch": "5.0.1"
+    "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"
   }
 }

app/renderer/about.html

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

app/renderer/css/about.css

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

app/renderer/css/main.css

@@ -13,12 +13,9 @@ body {
 #content {
     display: flex;
     height: 100%;
-    background: #eee url(../img/ic_loading.gif) no-repeat;
-    background-size: 60px 60px;
-    background-position: center;
 }
 
-#sidebar {
+.toggle-sidebar {
     background: #222c31;
     width: 54px;
     padding: 27px 0 20px 0;
@@ -27,6 +24,44 @@ body {
     flex-direction: column;
     -webkit-app-region: drag;
     overflow: hidden;
+    transition: all 0.5s ease;
+    z-index: 2;
+}
+
+.toggle-sidebar div {
+    transition: all 0.5s ease-out;
+}
+
+.sidebar-hide {
+    width: 0;
+    transition: all 0.8s ease;
+}
+
+.sidebar-hide div {
+    transform: translateX(-100%);
+    transition: all 0.6s ease-out;
+}
+
+#view-controls-container {
+	height: calc(100% - 208px);
+	overflow-y: hidden;
+}
+
+#view-controls-container:hover {
+	overflow-y: overlay;
+}
+
+#view-controls-container::-webkit-scrollbar {
+	width: 4px;
+}
+
+#view-controls-container::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+#view-controls-container::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
 }
 
 @font-face {
@@ -38,8 +73,8 @@ body {
 
 
 /*******************
- *   Left Sidebar  *
- *******************/
+  *   Left Sidebar  *
+  *******************/
 
 #tabs-container {
     display: flex;
@@ -66,11 +101,17 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+#actions-container {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    bottom: 0;
+}
+
 .action-button {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    padding: 10px;
+    padding: 12px;
 }
 
 .action-button:hover {
@@ -86,6 +127,29 @@ body {
     color: #98a9b3;
 }
 
+.action-button.disable {
+    opacity: 0.6;
+}
+
+.action-button.disable:hover {
+    cursor: not-allowed;
+}
+
+.action-button.disable:hover i {
+    color: #6c8592;
+}
+
+.action-button.active {
+    /* background-color: rgba(255, 255, 255, 0.25); */
+    background-color: #efefef;
+    opacity: 0.9;
+    padding-right: 14px;
+}
+
+.action-button.active i {
+    color: #1c262b;
+}
+
 .tab:first-child {
     margin-top: 8px;
 }
@@ -197,8 +261,8 @@ body {
 
 
 /*******************
- *   Webview Area  *
- *******************/
+  *   Webview Area  *
+  *******************/
 
 #webviews-container {
     display: flex;
@@ -206,36 +270,63 @@ body {
     width: 100%;
 }
 
+/*Pseudo element for loading indicator*/
+#webviews-container::before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    background: #fff url(../img/ic_loading.gif) no-repeat;
+    background-size: 60px 60px;
+    background-position: center;
+    width: 100%;
+    height: 100%;
+}
+
+/*When the active webview is loaded*/
+#webviews-container.loaded::before {
+    opacity: 0;
+    z-index: -1;
+    visibility: hidden;
+}
+
 webview {
-    opacity: 1;
-    transition: opacity 0.3s ease-in;
+    /* transition: opacity 0.3s ease-in; */
     flex-grow: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 webview.onload {
     transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
 
-webview.disabled {
-    flex: 0 1;
-    height: 0;
-    width: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease-out;
+webview.active {
+    opacity: 1;
+    z-index: 1;
+    visibility: visible;
 }
 
-webview:focus {
+webview.disabled {
+    opacity: 0;
+}
+
+webview.focus {
     outline: 0px solid transparent;
 }
 
-
 /* Tooltip styling */
 
+#dnd-tooltip,
+#back-tooltip,
 #reload-tooltip,
 #setting-tooltip {
     font-family: sans-serif;
     background: #222c31;
-    margin-left: 68px;
+    margin-left: 48px;
     padding: 6px 8px;
     position: absolute;
     margin-top: 0px;
@@ -247,6 +338,8 @@ webview:focus {
     font-size: 14px;
 }
 
+#dnd-tooltip:after,
+#back-tooltip:after,
 #reload-tooltip:after,
 #setting-tooltip:after {
     content: " ";
@@ -258,6 +351,33 @@ webview:focus {
     right: 68px;
 }
 
+#add-server-tooltip,
+.server-tooltip {
+    font-family: 'arial';
+    background: #222c31;
+    left: 56px;
+    padding: 10px 20px;
+    position: fixed;
+    margin-top: 8px;
+    z-index: 5000 !important;
+    color: #fff;
+    border-radius: 4px;
+    text-align: center;
+    width: max-content;
+    font-size: 14px;
+}
+
+#add-server-tooltip:after,
+.server-tooltip:after {
+    content: " ";
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid #222c31;
+    position: absolute;
+    top: 10px;
+    left: -5px;
+}
+
 #collapse-button {
     bottom: 30px;
     left: 20px;
@@ -279,13 +399,17 @@ webview:focus {
     height: 100%;
     width: 100%;
     position: relative;
+    flex-grow: 1;
+    flex-basis: 0px;
 }
 
 .hidden {
     display: none !important;
 }
 
+
 /* Full screen Popup container  */
+
 .popup .popuptext {
     visibility: hidden;
     background-color: #555;
@@ -319,3 +443,26 @@ webview:focus {
         opacity: 1;
     }
 }
+
+send-feedback {
+  width: 60%;
+  height: 85%;
+}
+
+#feedback-modal {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(68, 67, 67, 0.81);
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: all 1s ease-out;
+}
+
+#feedback-modal.show {
+  display: flex;
+}

app/renderer/css/preference.css

@@ -4,51 +4,104 @@ body {
     margin: 0;
     cursor: default;
     user-select: none;
+    font-family: menu, "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
     font-size: 14px;
     color: #333;
     background: #efefef;
 }
 
+kbd {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 15px;
+    font-family: Courier New, Courier, monospace;
+    font-weight: bold;
+    white-space: nowrap;
+    background-color: #f7f7f7;
+    color: #333;
+    margin: 0 0.1em;
+    padding: 0.3em 0.8em;
+    text-shadow: 0 1px 0 #fff;
+    line-height: 1.4;
+}
+
+table,
+th,
+td {
+    border-collapse: collapse;
+    color: #383430;
+}
+
+table {
+    width: 100%;
+    margin-top: 18px;
+    margin-bottom: 18px;
+}
+
+table tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+table tr:nth-child(odd) {
+    background-color: #fff;
+}
+
+td {
+    padding: 5px;
+}
+
+td:nth-child(odd) {
+    text-align: right;
+    width: 50%;
+}
+
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url(../fonts/Montserrat-Regular.ttf) format('truetype');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  /* Preferred icon size */
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    /* Preferred icon size */
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
 }
 
 #content {
     display: flex;
     height: 100%;
-    font-family: sans-serif;
+    font-family: 'Montserrat';
 }
 
 #sidebar {
-    width: 80px;
-    padding: 30px;
+    width: 150px;
+    min-width: 100px;
+    padding: 30px 30px 30px 35px;
     display: flex;
     flex-direction: column;
     font-size: 16px;
+    background: #f2f2f2;
 }
 
 #nav-container {
@@ -62,7 +115,7 @@ body {
 }
 
 .nav.active {
-    color: #464e5a;
+    color: #4ebfac;
     cursor: default;
     position: relative;
 }
@@ -70,15 +123,24 @@ body {
 .nav.active::before {
     background: #464e5a;
     width: 3px;
-    height: 16px;
+    height: 18px;
     position: absolute;
     left: -8px;
     content: '';
 }
 
+
+/* We don't want to show this in nav item since we have the + button for adding an Organization */
+
+#nav-AddServer {
+    display: none;
+}
+
 #settings-header {
     font-size: 22px;
-    color: #5c6166;
+    color: #222c31;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
 #settings-container {
@@ -89,14 +151,31 @@ body {
 }
 
 #new-server-container {
-    opacity: 1;
-    transition: opacity 0.3s;
+    padding-left: 42px;
+    padding-top: 25px;
+    margin-right: 16px;
 }
 
 .title {
-    padding: 4px 0 6px 0;
+    font-weight: 500;
+    color: #222c31;
+}
+
+.page-title {
+    color: #222c31;
+    font-size: 15px;
     font-weight: bold;
-    color: #1e1e1e;
+    padding: 4px 0 6px 0;
+}
+
+.add-server-info-row {
+    display: flex;
+    margin: 8px 0 0 0;
+}
+
+.add-server-info-right {
+    flex-grow: 1;
+    margin-top: 10px;
 }
 
 .sub-title {
@@ -109,20 +188,40 @@ img.server-info-icon {
     width: 36px;
     height: 36px;
     padding: 4px;
+    cursor: pointer;
+    vertical-align: middle;
 }
 
 .server-info-left {
-    margin: 10px 20px 0 0;
+    margin: 4px 20px 0 0;
+    min-width: 40%;
 }
 
 .server-info-right {
+    margin-top: 4px;
+    width: 55%;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
     flex-grow: 1;
-    margin-right: 10px;
 }
 
 .server-info-row {
-    display: flex;
-    margin: 8px 0 0 0;
+    display: inline-block;
+    margin: 5px 0 0 0;
+}
+
+.server-info-left .server-info-row {
+    display: inline-flex;
+    align-items: inherit;
+    vertical-align: -2px;
+    position: relative;
+}
+
+.server-url {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .server-info-alias {
@@ -130,6 +229,10 @@ img.server-info-icon {
     cursor: pointer;
 }
 
+.server-url-info {
+    margin-right: 10px;
+}
+
 .setting-input-key {
     font-size: 14px;
     height: 27px;
@@ -143,16 +246,16 @@ img.server-info-icon {
 .setting-input-value {
     flex-grow: 1;
     font-size: 14px;
-    height: 24px;
-    border: none;
-    border-bottom: #ededed 1px solid;
+    border-radius: 3px;
+    padding: 13px;
+    border: #ededed 2px solid;
     outline-width: 0;
     background: transparent;
-    max-width: 500px;
+    max-width: 450px;
 }
 
 .setting-input-value:focus {
-    border-bottom: #7cb980 1px solid;
+    border: #4EBFAC 2px solid;
 }
 
 .setting-block {
@@ -172,14 +275,13 @@ img.server-info-icon {
     display: flex;
     align-items: center;
     padding: 0 10px;
-    border-radius: 2px;
     margin-right: 10px;
 }
 
 .action i {
     margin-right: 5px;
     font-size: 18px;
-    line-height: 27px;
+    line-height: 26px;
 }
 
 .settings-pane {
@@ -204,9 +306,12 @@ img.server-info-icon {
     padding: 12px 30px;
     margin: 10px 0 20px 0;
     background: #fff;
-    border-radius: 2px;
-    width: 540px;
-    box-shadow: 1px 2px 4px #bcbcbc;
+    width: 70%;
+    transition: all 0.2s;
+}
+
+.settings-card:hover {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12);
 }
 
 .hidden {
@@ -216,14 +321,22 @@ img.server-info-icon {
 
 .red {
     color: #ef5350;
-    background: #ffebee;
-    border: 1px solid #ef5350;
+    padding: 8px;
+    border: rgba(239, 83, 80, 0.5) solid 1px;
 }
 
-.green {
-    color: #388E3C;
-    background: #E8F5E9;
-    border: 1px solid #388E3C;
+.red:hover {
+    color: #e63431;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
+}
+
+.blue {
+    color: #ffffff;
+    background: #4EBFAC;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
 }
 
 .grey {
@@ -234,9 +347,10 @@ img.server-info-icon {
 
 .setting-row {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     width: 100%;
-    margin: 6px 0;
+    margin: 6px;
 }
 
 .code {
@@ -244,7 +358,266 @@ img.server-info-icon {
 }
 
 i.open-tab-button {
-    padding: 0 5px;
-    font-size: 18px;
+    padding-left: 2px;
+    font-size: 19px;
     cursor: pointer;
-}
+}
+
+.reset-data-button,
+.custom-css-button {
+    display: inline-block;
+    border: none;
+    padding: 10px;
+    width: 120px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background-color 0.2s ease;
+    text-decoration: none;
+}
+
+.css-delete-action {
+    margin-bottom: 10px;
+}
+
+.reset-data-button:hover {
+    background-color: #3c9f8d;
+    color: #fff;
+}
+
+.selected-css-path {
+    background: #eeeeee;
+    padding: 10px;
+    margin-top: 10px;
+    margin-right: 10px;
+    display: flex;
+    width: 90%;
+    justify-content: space-between;
+}
+
+#remove-custom-css {
+    align-items: flex-end;
+}
+
+#server-info-container {
+    min-height: calc(100% - 260px);
+}
+
+#create-organization-container {
+    font-size: 1.15em;
+}
+
+#create-organization-container i {
+    position: relative;
+    top: 3px;
+}
+
+#open-create-org-link {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.toggle {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+}
+
+.toggle+label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+}
+
+input.toggle-round+label {
+    padding: 2px;
+    width: 50px;
+    height: 25px;
+    background-color: #dddddd;
+    border-radius: 25px;
+}
+
+input.toggle-round+label:before,
+input.toggle-round+label:after {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    bottom: 2px;
+    content: "";
+}
+
+input.toggle-round+label:before {
+    right: 2px;
+    background-color: #f1f1f1;
+    border-radius: 25px;
+}
+
+input.toggle-round+label:after {
+    width: 25px;
+    height: 25px;
+    background-color: #fff;
+    border-radius: 100%;
+}
+
+input.toggle-round:checked+label:before {
+    background-color: #4EBFAC;
+}
+
+input.toggle-round:checked+label:after {
+    margin-left: 25px;
+}
+
+
+/*  Add new server modal */
+
+.add-server-modal {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    padding-top: 15vh;
+    left: 0;
+    top: 0;
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    /* background: rgba(61, 64, 67, 15); */
+    background: linear-gradient(35deg, #003b52, #45b59b);
+    overflow: auto;
+}
+
+
+/* Modal Content */
+
+.modal-container {
+    background-color: #f4f7f8;
+    margin: auto;
+    padding: 57px;
+    border: #dae1e3 1px solid;
+    width: 550px;
+    height: 370px;
+    border-radius: 4px;
+}
+
+.add-server-modal .page-title {
+    text-align: center;
+    font-size: 1.6rem;
+}
+
+.divider {
+    margin-bottom: 30px;
+    margin-top: 30px;
+    color: #7d878a;
+}
+
+.divider hr {
+    margin-left: 8px;
+    margin-right: 8px;
+    width: 44%;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.server-center {
+    width: 100%;
+    text-align: center;
+    align-items: center;
+    padding-top: 13px;
+    margin-left: -5px;
+}
+
+.server-center button {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin: auto;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    background: #4EBFAC;
+    border-color: none;
+    border: none;
+    width: 98%;
+    height: 46px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.server-center button:hover {
+    background: #329588;
+}
+
+.server-center button:focus {
+    background: #329588;
+}
+
+
+/* responsive grid */
+
+@media (max-width: 650px) {
+    .selected-css-path {
+        margin-right: 15px;
+    }
+    #css-delete-action {
+        margin-left: 10px;
+    }
+    #css-delete-action span {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    .modal-container {
+        width: 60vw;
+        padding: 40px;
+        min-width: 300px;
+    }
+    .server-center button {
+        margin-right: -12px;
+        width: 100%;
+    }
+    .divider {
+        margin-right: -8px;
+    }
+    .divider hr {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: 43%;
+    }
+    #new-server-container {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 600px) {
+    .divider {
+        margin-left: 4%;
+    }
+    .divider hr {
+        margin-left: 2px;
+        margin-right: 2px;
+        width: 40%;
+    }
+}
+
+@media (max-width: 900px) {
+    .settings-card {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .server-info-right {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .action {
+        margin-top: 10px;
+    }
+}

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

@@ -4,7 +4,7 @@ const Tab = require(__dirname + '/../components/tab.js');
 
 class FunctionalTab extends Tab {
 	template() {
-		return `<div class="tab functional-tab">
+		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tab-badge close-button">
 						<i class="material-icons">close</i>
 					</div>
@@ -16,10 +16,11 @@ class FunctionalTab extends Tab {
 
 	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
-		this.registerListeners();
+		if (this.props.name !== 'Settings') {
+			this.props.$root.appendChild(this.$el);
+			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
+			this.registerListeners();
+		}
 	}
 
 	registerListeners() {

app/renderer/js/components/handle-external-link.js

@@ -0,0 +1,35 @@
+const { shell } = require('electron').remote;
+const LinkUtil = require('../utils/link-util');
+const DomainUtil = require('../utils/domain-util');
+
+function handleExternalLink(event) {
+	const { url } = event;
+	const domainPrefix = DomainUtil.getDomain(this.props.index).url;
+
+  // Whitelist URLs which are allowed to be opened in the app
+	const {
+    isInternalUrl: isWhiteListURL,
+    isUploadsUrl: isUploadsURL
+  } = LinkUtil.isInternal(domainPrefix, url);
+
+	if (isWhiteListURL) {
+		event.preventDefault();
+
+    // download txt, pdf, mp3, mp4 etc.. by using downloadURL in the
+    // main process which allows the user to save the files to their desktop
+    // and not trigger webview reload while image in webview will
+    // do nothing and will not save it
+		if (!LinkUtil.isImage(url) && isUploadsURL) {
+			this.$el.downloadURL(url);
+			return;
+		}
+
+    // open internal urls inside the current webview.
+		this.$el.loadURL(url);
+	} else {
+		event.preventDefault();
+		shell.openExternal(url);
+	}
+}
+
+module.exports = handleExternalLink;

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

@@ -7,7 +7,8 @@ const {ipcRenderer} = require('electron');
 
 class ServerTab extends Tab {
 	template() {
-		return `<div class="tab">
+		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
+					<div class="server-tooltip" style="display:none"></div>
 					<div class="server-tab-badge"></div>
 					<div class="server-tab">
 					<img class="server-icons" src='${this.props.icon}'/>
@@ -49,7 +50,8 @@ class ServerTab extends Tab {
 			shortcutText = `Ctrl+${shownIndex}`;
 		}
 
-		ipcRenderer.send('register-server-tab-shortcut', shownIndex);
+		// Array index == Shown index - 1
+		ipcRenderer.send('switch-server-tab', shownIndex - 1);
 
 		return shortcutText;
 	}

app/renderer/js/components/tab.js

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

app/renderer/js/components/webview.js

@@ -3,13 +3,14 @@
 const path = require('path');
 const fs = require('fs');
 
-const DomainUtil = require(__dirname + '/../utils/domain-util.js');
+const ConfigUtil = require(__dirname + '/../utils/config-util.js');
 const SystemUtil = require(__dirname + '/../utils/system-util.js');
-const LinkUtil = require(__dirname + '/../utils/link-util.js');
-const {shell} = require('electron').remote;
+const { app, dialog } = require('electron').remote;
 
 const BaseComponent = require(__dirname + '/../components/base.js');
+const handleExternalLink = require(__dirname + '/../components/handle-external-link.js');
 
+const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
 class WebView extends BaseComponent {
 	constructor(props) {
 		super();
@@ -17,13 +18,16 @@ class WebView extends BaseComponent {
 		this.props = props;
 
 		this.zoomFactor = 1.0;
-		this.loading = false;
+		this.loading = true;
 		this.badgeCount = 0;
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}
 
 	template() {
 		return `<webview
 					class="disabled"
+					data-tab-id="${this.props.tabIndex}"
 					src="${this.props.url}"
 					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
 					disablewebsecurity
@@ -42,33 +46,53 @@ class WebView extends BaseComponent {
 
 	registerListeners() {
 		this.$el.addEventListener('new-window', event => {
-			const {url} = event;
-			const domainPrefix = DomainUtil.getDomain(this.props.index).url;
-
-			if (LinkUtil.isInternal(domainPrefix, url) || url === (domainPrefix + '/')) {
-				event.preventDefault();
-				this.$el.loadURL(url);
-			} else {
-				event.preventDefault();
-				shell.openExternal(url);
-			}
+			handleExternalLink.call(this, event);
 		});
 
+		if (shouldSilentWebview) {
+			this.$el.addEventListener('dom-ready', () => {
+				this.$el.setAudioMuted(true);
+			});
+		}
+
 		this.$el.addEventListener('page-title-updated', event => {
-			const {title} = event;
+			const { title } = event;
 			this.badgeCount = this.getBadgeCount(title);
 			this.props.onTitleChange();
 		});
 
+		this.$el.addEventListener('did-navigate-in-page', event => {
+			const isSettingPage = event.url.includes('renderer/preference.html');
+			if (isSettingPage) {
+				return;
+			}
+			this.canGoBackButton();
+		});
+
+		this.$el.addEventListener('did-navigate', () => {
+			this.canGoBackButton();
+		});
+
+		this.$el.addEventListener('page-favicon-updated', event => {
+			const { favicons } = event;
+			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
+			// https://chat.zulip.org/static/images/favicon/favicon-pms.png
+			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
+				// This api is only supported on macOS
+				app.dock.setBadge('●');
+			}
+		});
+
 		this.$el.addEventListener('dom-ready', () => {
 			if (this.props.role === 'server') {
 				this.$el.classList.add('onload');
 			}
+			this.loading = false;
 			this.show();
 		});
 
 		this.$el.addEventListener('did-fail-load', event => {
-			const {errorDescription} = event;
+			const { errorDescription } = event;
 			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
@@ -97,17 +121,39 @@ class WebView extends BaseComponent {
 			return;
 		}
 
+		// To show or hide the loading indicator in the the active tab
+		if (this.loading) {
+			this.$webviewsContainer.remove('loaded');
+		} else {
+			this.$webviewsContainer.add('loaded');
+		}
+
 		this.$el.classList.remove('disabled');
+		this.$el.classList.add('active');
 		setTimeout(() => {
 			if (this.props.role === 'server') {
 				this.$el.classList.remove('onload');
 			}
 		}, 1000);
 		this.focus();
-		this.loading = false;
 		this.props.onTitleChange();
 		// Injecting preload css in webview to override some css rules
 		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
+
+		// get customCSS again from config util to avoid warning user again
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		if (this.customCSS) {
+			if (!fs.existsSync(this.customCSS)) {
+				this.customCSS = null;
+				ConfigUtil.setConfigItem('customCSS', null);
+
+				const errMsg = 'The custom css previously set is deleted!';
+				dialog.showErrorBox('custom css file deleted!', errMsg);
+				return;
+			}
+
+			this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8'));
+		}
 	}
 
 	focus() {
@@ -121,6 +167,7 @@ class WebView extends BaseComponent {
 
 	hide() {
 		this.$el.classList.add('disabled');
+		this.$el.classList.remove('active');
 	}
 
 	load() {
@@ -164,6 +211,15 @@ class WebView extends BaseComponent {
 		}
 	}
 
+	canGoBackButton() {
+		const $backButton = document.querySelector('#actions-container #back-action');
+		if (this.$el.canGoBack()) {
+			$backButton.classList.remove('disable');
+		} else {
+			$backButton.classList.add('disable');
+		}
+	}
+
 	forward() {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
@@ -172,6 +228,9 @@ class WebView extends BaseComponent {
 
 	reload() {
 		this.hide();
+		// Shows the loading indicator till the webview is reloaded
+		this.$webviewsContainer.remove('loaded');
+		this.loading = true;
 		this.$el.reload();
 	}
 

app/renderer/js/feedback.js

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

app/renderer/js/main.js

@@ -1,15 +1,19 @@
 'use strict';
 
+const { ipcRenderer, remote } = require('electron');
+const isDev = require('electron-is-dev');
+
+const { session } = remote;
+
 require(__dirname + '/js/tray.js');
-const {ipcRenderer, remote} = require('electron');
-
-const {session} = remote;
-
 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 { feedbackHolder } = require(__dirname + '/js/feedback.js');
 
 class ServerManagerView {
 	constructor() {
@@ -20,9 +24,16 @@ class ServerManagerView {
 		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');
@@ -32,6 +43,7 @@ class ServerManagerView {
 		this.activeTabIndex = -1;
 		this.tabs = [];
 		this.functionalTabs = {};
+		this.tabIndex = 0;
 	}
 
 	init() {
@@ -40,6 +52,7 @@ class ServerManagerView {
 			this.initTabs();
 			this.initActions();
 			this.registerIpcs();
+			this.initDefaultSettings();
 		});
 	}
 
@@ -62,6 +75,45 @@ class ServerManagerView {
 		});
 	}
 
+	// Settings are initialized only when user clicks on General/Server/Network section settings
+	// In case, user doesn't visit these section, those values set to be null automatically
+	// This will make sure the default settings are correctly set to either true or false
+	initDefaultSettings() {
+		// Default settings which should be respected
+		const settingOptions = {
+			trayIcon: true,
+			useProxy: false,
+			showSidebar: true,
+			badgeOption: true,
+			startAtLogin: false,
+			startMinimized: false,
+			enableSpellchecker: true,
+			showNotification: true,
+			betaUpdate: false,
+			silent: false,
+			lastActiveTab: 0,
+			dnd: false,
+			dndPreviousSettings: {
+				showNotification: true,
+				silent: false
+			}
+		};
+
+		// Platform specific settings
+
+		if (process.platform === 'win32') {
+			// Only available on Windows
+			settingOptions.flashTaskbarOnMessage = true;
+			settingOptions.dndPreviousSettings.flashTaskbarOnMessage = true;
+		}
+
+		for (const i in settingOptions) {
+			if (ConfigUtil.getConfigItem(i) === null) {
+				ConfigUtil.setConfigItem(i, settingOptions[i]);
+			}
+		}
+	}
+
 	initSidebar() {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
@@ -75,24 +127,30 @@ class ServerManagerView {
 				DomainUtil.updateSavedServer(servers[i].url, i);
 				this.activateTab(i);
 			}
-			this.activateTab(0);
+			// 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('Servers');
+			this.openSettings('AddServer');
 		}
-
-		ipcRenderer.send('local-shortcuts', true);
 	}
 
 	initServer(server, index) {
+		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
 			role: 'server',
 			icon: server.icon,
 			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, index),
+			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: () => {
@@ -107,29 +165,80 @@ class ServerManagerView {
 	}
 
 	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('Servers');
+			this.openSettings('AddServer');
 		});
 		this.$settingsButton.addEventListener('click', () => {
 			this.openSettings('General');
 		});
-		this.$reloadButton.addEventListener('mouseover', () => {
-			this.$reloadTooltip.removeAttribute('style');
+		this.$backButton.addEventListener('click', () => {
+			this.tabs[this.activeTabIndex].webview.back();
 		});
-		this.$reloadButton.addEventListener('mouseout', () => {
-			this.$reloadTooltip.style.display = 'none';
+
+		const $serverImgs = document.querySelectorAll('.server-icons');
+		$serverImgs.forEach($serverImg => {
+			$serverImg.addEventListener('error', () => {
+				$serverImg.src = 'img/icon.png';
+			});
 		});
-		this.$settingsButton.addEventListener('mouseover', () => {
-			this.$settingsTooltip.removeAttribute('style');
+
+		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';
+			}
 		});
-		this.$settingsButton.addEventListener('mouseout', () => {
-			this.$settingsTooltip.style.display = 'none';
+		SidebarButton.addEventListener('mouseout', () => {
+			SidebarTooltip.style.display = 'none';
 		});
 	}
 
+	onHover(index, serverName) {
+		this.$serverIconTooltip[index].innerHTML = serverName;
+		this.$serverIconTooltip[index].removeAttribute('style');
+		// 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]);
@@ -138,16 +247,20 @@ class ServerManagerView {
 
 		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: () => {
@@ -159,7 +272,9 @@ class ServerManagerView {
 				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]);
 	}
 
@@ -169,6 +284,7 @@ class ServerManagerView {
 			materialIcon: 'settings',
 			url: `file://${__dirname}/preference.html#${nav}`
 		});
+		this.$settingsButton.classList.add('active');
 		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
 	}
 
@@ -188,8 +304,15 @@ class ServerManagerView {
 		});
 	}
 
+	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].webview.loading) {
+		if (!this.tabs[index]) {
 			return;
 		}
 
@@ -197,10 +320,19 @@ class ServerManagerView {
 			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();
 
@@ -208,6 +340,36 @@ class ServerManagerView {
 			tabs: this.tabs,
 			activeTabIndex: this.activeTabIndex
 		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-sidebar', state);
+		});
+
+		ipcRenderer.on('toggle-silent', (event, state) => {
+			const webviews = document.querySelectorAll('webview');
+			webviews.forEach(webview => {
+				try {
+					webview.setAudioMuted(state);
+				} catch (err) {
+					// webview is not ready yet
+					webview.addEventListener('dom-ready', () => {
+						webview.isAudioMuted();
+					});
+				}
+			});
+		});
+
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+			this.toggleDNDButton(state);
+			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-dnd', state, newSettings);
+		});
 	}
 
 	destroyTab(name, index) {
@@ -227,6 +389,9 @@ class ServerManagerView {
 	}
 
 	destroyView() {
+		// Show loading indicator
+		this.$webviewsContainer.classList.remove('loaded');
+
 		// Clear global variables
 		this.activeTabIndex = -1;
 		this.tabs = [];
@@ -235,16 +400,24 @@ class ServerManagerView {
 		// Clear DOM elements
 		this.$tabsContainer.innerHTML = '';
 		this.$webviewsContainer.innerHTML = '';
-
-		// Destroy shortcuts
-		ipcRenderer.send('local-shortcuts', false);
 	}
 
 	reloadView() {
+		// Save and remember the index of last active tab so that we can use it later
+		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
+		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
+
+		// Destroy the current view and re-initiate it
 		this.destroyView();
 		this.initTabs();
 	}
 
+	// This will trigger when pressed CTRL/CMD + R [WIP]
+	// It won't reload the current view properly when you add/delete a server.
+	reloadCurrentView() {
+		this.$reloadButton.click();
+	}
+
 	updateBadge() {
 		let messageCountAll = 0;
 		for (let i = 0; i < this.tabs.length; i++) {
@@ -260,12 +433,18 @@ class ServerManagerView {
 
 	toggleSidebar(show) {
 		if (show) {
-			this.$sidebar.classList.remove('hidden');
+			this.$sidebar.classList.remove('sidebar-hide');
 		} else {
-			this.$sidebar.classList.add('hidden');
+			this.$sidebar.classList.add('sidebar-hide');
 		}
 	}
 
+	// 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',
@@ -295,14 +474,20 @@ class ServerManagerView {
 
 		ipcRenderer.on('open-about', this.openAbout.bind(this));
 
-		ipcRenderer.on('reload-viewer', this.reloadView.bind(this));
+		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));
+
+		ipcRenderer.on('reload-current-viewer', this.reloadCurrentView.bind(this));
 
 		ipcRenderer.on('hard-reload', () => {
 			ipcRenderer.send('reload-full-app');
 		});
 
+		ipcRenderer.on('clear-app-data', () => {
+			ipcRenderer.send('clear-app-settings');
+		});
+
 		ipcRenderer.on('switch-server-tab', (event, index) => {
-			this.activateTab(index);
+			this.activateLastTab(index);
 		});
 
 		ipcRenderer.on('reload-proxy', (event, showAlert) => {
@@ -326,6 +511,18 @@ class ServerManagerView {
 			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) {
@@ -354,14 +551,33 @@ class ServerManagerView {
 			}
 			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', () => {
-		serverManagerView.reloadView();
+		reconnectUtil.pollInternetAndReload();
 	});
+
+	window.addEventListener('offline', () => {
+		reconnectUtil.clearState();
+		console.log('No internet connection, you are offline.');
+	});
+
+	// only start electron-connect (auto reload on change) when its ran
+	// from `npm run dev` or `gulp dev` and not from `npm start` when
+	// app is started `npm start` main process's proces.argv will have
+	// `--no-electron-connect`
+	const mainProcessArgv = remote.getGlobal('process').argv;
+	if (isDev && !mainProcessArgv.includes('--no-electron-connect')) {
+		const electronConnect = require('electron-connect');
+		electronConnect.client.create();
+	}
 };

app/renderer/js/notification.js

@@ -1,22 +0,0 @@
-'use strict';
-
-const {remote} = require('electron');
-
-const ConfigUtil = require(__dirname + '/utils/config-util.js');
-
-const app = remote.app;
-
-// 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('org.zulip.zulip-electron');
-
-const NativeNotification = window.Notification;
-
-class SilentNotification extends NativeNotification {
-	constructor(title, opts) {
-		opts.silent = ConfigUtil.getConfigItem('silent') || false;
-		super(title, opts);
-	}
-}
-
-window.Notification = SilentNotification;

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

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

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

@@ -0,0 +1,31 @@
+'use strict';
+
+const { ipcRenderer } = require('electron');
+const ConfigUtil = require('../utils/config-util');
+const { focusCurrentServer } = require('./helpers');
+
+const NativeNotification = window.Notification;
+class BaseNotification extends NativeNotification {
+	constructor(title, opts) {
+		opts.silent = true;
+		super(title, opts);
+
+		this.addEventListener('click', () => {
+			// focus to the server who sent the
+			// notification if not focused already
+			focusCurrentServer();
+			ipcRenderer.send('focus-app');
+		});
+	}
+
+	static requestPermission() {
+		return; // eslint-disable-line no-useless-return
+	}
+
+	// Override default Notification permission
+	static get permission() {
+		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
+	}
+}
+
+module.exports = BaseNotification;

app/renderer/js/notification/helpers.js

@@ -0,0 +1,149 @@
+const { remote } = require('electron');
+
+// Do not change this
+const appId = 'org.zulip.zulip-electron';
+
+const botsList = [];
+let botsListLoaded = false;
+
+// this function load list of bots from the server
+// sync=True for a synchronous getJSON request
+// in case botsList isn't already completely loaded when required in parseRely
+function loadBots(sync = false) {
+	const { $ } = window;
+	botsList.length = 0;
+	if (sync) {
+		$.ajaxSetup({async: false});
+	}
+	$.getJSON('/json/users')
+		.done(data => {
+			const members = data.members;
+			members.forEach(membersRow => {
+				if (membersRow.is_bot) {
+					const bot = `@${membersRow.full_name}`;
+					const mention = `@**${bot.replace(/^@/, '')}**`;
+					botsList.push([bot, mention]);
+				}
+			});
+			botsListLoaded = true;
+		})
+		.fail(error => {
+			console.log('Request failed: ', error.responseText);
+			console.log('Request status: ', error.statusText);
+		});
+	if (sync) {
+		$.ajaxSetup({async: true});
+	}
+}
+
+function checkElements(...elements) {
+	let status = true;
+	elements.forEach(element => {
+		if (element === null || element === undefined) {
+			status = false;
+		}
+	});
+	return status;
+}
+
+function customReply(reply) {
+	// server does not support notification reply yet.
+	const buttonSelector = '.messagebox #send_controls button[type=submit]';
+	const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
+	const textarea = document.querySelector('#compose-textarea');
+	const messagebox = document.querySelector(messageboxSelector);
+	const sendButton = document.querySelector(buttonSelector);
+
+	// sanity check for old server versions
+	const elementsExists = checkElements(textarea, messagebox, sendButton);
+	if (!elementsExists) {
+		return;
+	}
+
+	textarea.value = reply;
+	messagebox.click();
+	sendButton.click();
+}
+
+const currentWindow = remote.getCurrentWindow();
+const webContents = remote.getCurrentWebContents();
+const webContentsId = webContents.id;
+
+// this function will focus the server that sent
+// the notification. Main function implemented in main.js
+function focusCurrentServer() {
+	currentWindow.send('focus-webview-with-id', webContentsId);
+}
+// this function parses the reply from to notification
+// making it easier to reply from notification eg
+// @username in reply will be converted to @**username**
+// #stream in reply will be converted to #**stream**
+// bot mentions are not yet supported
+function parseReply(reply) {
+	const usersDiv = document.querySelectorAll('#user_presences li');
+	const streamHolder = document.querySelectorAll('#stream_filters li');
+	const users = [];
+	const streams = [];
+
+	usersDiv.forEach(userRow => {
+		const anchor = userRow.querySelector('span a');
+		if (anchor !== null) {
+			const user = `@${anchor.textContent.trim()}`;
+			const mention = `@**${user.replace(/^@/, '')}**`;
+			users.push([user, mention]);
+		}
+	});
+
+	streamHolder.forEach(stream => {
+		const streamAnchor = stream.querySelector('div a');
+		if (streamAnchor !== null) {
+			const streamName = `#${streamAnchor.textContent.trim()}`;
+			const streamMention = `#**${streamName.replace(/^#/, '')}**`;
+			streams.push([streamName, streamMention]);
+		}
+	});
+
+	users.forEach(([user, mention]) => {
+		if (reply.includes(user)) {
+			const regex = new RegExp(user, 'g');
+			reply = reply.replace(regex, mention);
+		}
+	});
+
+	streams.forEach(([stream, streamMention]) => {
+		const regex = new RegExp(stream, 'g');
+		reply = reply.replace(regex, streamMention);
+	});
+
+	// If botsList isn't completely loaded yet, make a synchronous getJSON request for list
+	if (botsListLoaded === false) {
+		loadBots(true);
+	}
+
+	// Iterate for every bot name and replace in reply
+	// @botname with @**botname**
+	botsList.forEach(([bot, mention]) => {
+		if (reply.includes(bot)) {
+			const regex = new RegExp(bot, 'g');
+			reply = reply.replace(regex, mention);
+		}
+	});
+
+	reply = reply.replace(/\\n/, '\n');
+	return reply;
+}
+
+function setupReply(id) {
+	const { narrow } = window;
+	narrow.by_subject(id, { trigger: 'notification' });
+}
+
+module.exports = {
+	appId,
+	checkElements,
+	customReply,
+	parseReply,
+	setupReply,
+	focusCurrentServer,
+	loadBots
+};

app/renderer/js/notification/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const {
+  remote: { app }
+} = require('electron');
+
+const DefaultNotification = require('./default-notification');
+const { appId, loadBots } = require('./helpers');
+
+// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
+// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
+app.setAppUserModelId(appId);
+
+window.Notification = DefaultNotification;
+
+if (process.platform === 'darwin') {
+	const DarwinNotification = require('./darwin-notifications');
+	window.Notification = DarwinNotification;
+}
+
+window.addEventListener('load', () => {
+	// Call this function only when user is logged in
+	// eslint-disable-next-line no-undef, camelcase
+	if (page_params.realm_uri) {
+		loadBots();
+	}
+});

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

@@ -45,7 +45,7 @@ class BadgeSettings {
 
 	updateOverlayIcon(messageCount, mainWindow) {
 		if (!mainWindow.isFocused()) {
-			mainWindow.flashFrame(true);
+			mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
 		}
 		if (messageCount === 0) {
 			mainWindow.setOverlayIcon(null, '');

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

@@ -19,14 +19,20 @@ class BaseSection extends BaseComponent {
 	generateOptionTemplate(settingOption) {
 		if (settingOption) {
 			return `
-				<div class="action green">
-					<span>On</span>
+				<div class="action">
+					<div class="switch">
+					  <input class="toggle toggle-round" type="checkbox" checked>
+					  <label></label>
+					</div>
 				</div>
 			`;
 		} else {
 			return `
-				<div class="action red">
-					<span>Off</span>
+				<div class="action">
+					<div class="switch">
+					  <input class="toggle toggle-round" type="checkbox">
+					  <label></label>
+					</div>
 				</div>
 			`;
 		}

app/renderer/js/pages/preference/connected-org-section.js

@@ -0,0 +1,51 @@
+'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');
+
+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>
+		`;
+	}
+
+	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();
+		}
+	}
+
+}
+
+module.exports = ConnectedOrgSection;

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

@@ -1,6 +1,10 @@
 'use strict';
-const { ipcRenderer } = require('electron');
+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');
 
@@ -20,18 +24,26 @@ class GeneralSection extends BaseSection {
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="sidebar-option">
-						<div class="setting-description">Show sidebar (<span class="code">CmdOrCtrl+S</span>)</div>
+						<div class="setting-description">Show sidebar (<span class="code">Cmd Or Ctrl+S</span>)</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="badge-option">
-					<div class="setting-description">Show app unread badge</div>
-					<div class="setting-control"></div>
-				</div>
+						<div class="setting-description">Show app unread badge</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="flash-taskbar-option" style= "display:${process.platform === 'win32' ? '' : 'none'}">
+						<div class="setting-description">Flash taskbar on new message</div>
+						<div class="setting-control"></div>
+					</div>
 				</div>
 				<div class="title">Desktop Notification</div>
-                <div class="settings-card">
+				<div class="settings-card">
+					<div class="setting-row" id="show-notification-option">
+						<div class="setting-description">Show Desktop Notifications</div>
+						<div class="setting-control"></div>
+					</div>
 					<div class="setting-row" id="silent-option">
-						<div class="setting-description">Mute all sounds from Zulip (requires reload)</div>
+						<div class="setting-description">Mute all sounds from Zulip</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
@@ -48,6 +60,40 @@ class GeneralSection extends BaseSection {
 						<div class="setting-description">Start app at login</div>
 						<div class="setting-control"></div>
 					</div>
+					<div class="setting-row" id="start-minimize-option">
+						<div class="setting-description">Always start minimized</div>
+						<div class="setting-control"></div>
+					</div>
+					<div class="setting-row" id="enable-spellchecker-option">
+						<div class="setting-description">Enable Spellchecker (requires restart)</div>
+						<div class="setting-control"></div>
+					</div>
+				</div>
+				<div class="title">Add custom CSS</div>
+				<div class="settings-card">
+					<div class="setting-row" id="add-custom-css">
+						<div class="setting-description">
+							This will inject the selected css stylesheet in all the added accounts
+						</div>
+						<button class="custom-css-button blue">Add</button>
+					</div>
+					<div class="setting-row" id="remove-custom-css">
+						<div class="setting-description">
+							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
+						</div>
+						<div class="action red" id="css-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>Delete</span>
+						</div>
+					</div>
+				</div>
+				<div class="title">Reset Application Data</div>
+                <div class="settings-card">
+					<div class="setting-row" id="resetdata-option">
+						<div class="setting-description">This will delete all application data including all added accounts and preferences
+						</div>
+						<button class="reset-data-button blue">Reset App Data</button>
+					</div>
 				</div>
             </div>
 		`;
@@ -57,10 +103,23 @@ class GeneralSection extends BaseSection {
 		this.props.$root.innerHTML = this.template();
 		this.updateTrayOption();
 		this.updateBadgeOption();
-		this.updateUpdateOption();
 		this.updateSilentOption();
+		this.updateUpdateOption();
 		this.updateSidebarOption();
 		this.updateStartAtLoginOption();
+		this.updateResetDataOption();
+		this.showDesktopNotification();
+		this.enableSpellchecker();
+		this.minimizeOnStart();
+		this.addCustomCSS();
+		this.showCustomCSSPath();
+		this.removeCustomCSS();
+
+		// Platform specific settings
+		// Flashing taskbar on Windows
+		if (process.platform === 'win32') {
+			this.updateFlashTaskbar();
+		}
 	}
 
 	updateTrayOption() {
@@ -89,6 +148,18 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
+	updateFlashTaskbar() {
+		this.generateSettingOption({
+			$element: document.querySelector('#flash-taskbar-option .setting-control'),
+			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('flashTaskbarOnMessage');
+				ConfigUtil.setConfigItem('flashTaskbarOnMessage', newValue);
+				this.updateFlashTaskbar();
+			}
+		});
+	}
+
 	updateUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#betaupdate-option .setting-control'),
@@ -109,6 +180,19 @@ class GeneralSection extends BaseSection {
 				const newValue = !ConfigUtil.getConfigItem('silent', true);
 				ConfigUtil.setConfigItem('silent', newValue);
 				this.updateSilentOption();
+				currentBrowserWindow.send('toggle-silent', newValue);
+			}
+		});
+	}
+
+	showDesktopNotification() {
+		this.generateSettingOption({
+			$element: document.querySelector('#show-notification-option .setting-control'),
+			value: ConfigUtil.getConfigItem('showNotification', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('showNotification', true);
+				ConfigUtil.setConfigItem('showNotification', newValue);
+				this.showDesktopNotification();
 			}
 		});
 	}
@@ -139,6 +223,93 @@ class GeneralSection extends BaseSection {
 		});
 	}
 
+	enableSpellchecker() {
+		this.generateSettingOption({
+			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
+			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('enableSpellchecker');
+				ConfigUtil.setConfigItem('enableSpellchecker', newValue);
+				this.enableSpellchecker();
+			}
+		});
+	}
+
+	clearAppDataDialog() {
+		const clearAppDataMessage = 'By clicking proceed you will be removing all added accounts and preferences from Zulip. When the application restarts, it will be as if you are starting Zulip for the first time.';
+		const getAppPath = path.join(app.getPath('appData'), app.getName());
+
+		dialog.showMessageBox({
+			type: 'warning',
+			buttons: ['YES', 'NO'],
+			defaultId: 0,
+			message: 'Are you sure',
+			detail: clearAppDataMessage
+		}, response => {
+			if (response === 0) {
+				fs.remove(getAppPath);
+				setTimeout(() => ipcRenderer.send('forward-message', 'hard-reload'), 1000);
+			}
+		});
+	}
+
+	customCssDialog() {
+		const showDialogOptions = {
+			title: 'Select file',
+			defaultId: 1,
+			properties: ['openFile'],
+			filters: [{ name: 'CSS file', extensions: ['css'] }]
+		};
+
+		dialog.showOpenDialog(showDialogOptions, selectedFile => {
+			if (selectedFile) {
+				ConfigUtil.setConfigItem('customCSS', selectedFile[0]);
+				ipcRenderer.send('forward-message', 'hard-reload');
+			}
+		});
+	}
+
+	updateResetDataOption() {
+		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
+		resetDataButton.addEventListener('click', () => {
+			this.clearAppDataDialog();
+		});
+	}
+
+	minimizeOnStart() {
+		this.generateSettingOption({
+			$element: document.querySelector('#start-minimize-option .setting-control'),
+			value: ConfigUtil.getConfigItem('startMinimized', false),
+			clickHandler: () => {
+				const newValue = !ConfigUtil.getConfigItem('startMinimized');
+				ConfigUtil.setConfigItem('startMinimized', newValue);
+				this.minimizeOnStart();
+			}
+		});
+	}
+
+	addCustomCSS() {
+		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
+		customCSSButton.addEventListener('click', () => {
+			this.customCssDialog();
+		});
+	}
+
+	showCustomCSSPath() {
+		if (!ConfigUtil.getConfigItem('customCSS')) {
+			const cssPATH = document.getElementById('remove-custom-css');
+			cssPATH.style.display = 'none';
+		}
+	}
+
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
+		removeCSSButton.addEventListener('click', () => {
+			ConfigUtil.setConfigItem('customCSS');
+			ipcRenderer.send('forward-message', 'hard-reload');
+		});
+	}
+
 }
 
 module.exports = GeneralSection;

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

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

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

@@ -34,7 +34,7 @@ class NetworkSection extends BaseSection {
 							<input class="setting-input-value" placeholder="e.g. foobar.com"/>
 						</div>
 						<div class="setting-row">
-							<div class="action green" id="proxy-save-action">
+							<div class="action blue" id="proxy-save-action">
 								<i class="material-icons">check_box</i>
 								<span>Save</span>
 							</div>

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

@@ -2,6 +2,7 @@
 
 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) {
@@ -11,18 +12,26 @@ class NewServerForm extends BaseComponent {
 
 	template() {
 		return `
-			<div class="settings-card">
-				<div class="server-info-right">
-					<div class="server-info-row">
-						<input class="setting-input-value" autofocus placeholder="Entert the URL of your Zulip organization..."/>
-					</div>
-					<div class="server-info-row">
-						<div class="action green server-save-action">
-							<i class="material-icons">check_box</i>
-							<span>Save</span>
-						</div>
+			<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>
 		`;
 	}
@@ -42,15 +51,25 @@ class NewServerForm extends BaseComponent {
 	}
 
 	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();
@@ -62,6 +81,8 @@ class NewServerForm extends BaseComponent {
 				this.submitFormHandler();
 			}
 		});
+		// open create new org link in default browser
+		this.openCreateNewOrgExternalLink();
 	}
 }
 

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

@@ -1,12 +1,14 @@
 'use strict';
 
 const BaseComponent = require(__dirname + '/js/components/base.js');
-const {ipcRenderer} = require('electron');
+const { ipcRenderer } = require('electron');
 
 const Nav = require(__dirname + '/js/pages/preference/nav.js');
 const ServersSection = require(__dirname + '/js/pages/preference/servers-section.js');
 const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
 const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
+const ConnectedOrgSection = require(__dirname + '/js/pages/preference/connected-org-section.js');
+const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');
 
 class PreferenceView extends BaseComponent {
 	constructor() {
@@ -38,7 +40,7 @@ class PreferenceView extends BaseComponent {
 	handleNavigation(navItem) {
 		this.nav.select(navItem);
 		switch (navItem) {
-			case 'Servers': {
+			case 'AddServer': {
 				this.section = new ServersSection({
 					$root: this.$settingsContainer
 				});
@@ -50,22 +52,60 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
+			case 'Organizations': {
+				this.section = new ConnectedOrgSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
 			case 'Network': {
 				this.section = new NetworkSection({
 					$root: this.$settingsContainer
 				});
 				break;
 			}
+			case 'Shortcuts': {
+				this.section = new ShortcutsSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
 			default: break;
 		}
 		this.section.init();
 		window.location.hash = `#${navItem}`;
 	}
 
+	// Handle toggling and reflect changes in preference page
+	handleToggle(elementName, state) {
+		const inputSelector = `#${elementName} .action .switch input`;
+		const input = document.querySelector(inputSelector);
+		if (input) {
+			input.checked = state;
+		}
+	}
+
 	registerIpcs() {
 		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
 			this.handleNavigation(navItem);
 		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			this.handleToggle('sidebar-option', state);
+		});
+
+		ipcRenderer.on('toggletray', (event, state) => {
+			this.handleToggle('tray-option', state);
+		});
+
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+			this.handleToggle('show-notification-option', newSettings.showNotification);
+			this.handleToggle('silent-option', newSettings.silent);
+
+			if (process.platform === 'win32') {
+				this.handleToggle('flash-taskbar-option', newSettings.flashTaskbarOnMessage);
+			}
+		});
 	}
 }
 

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

@@ -1,6 +1,6 @@
 'use strict';
-const {dialog} = require('electron').remote;
-const {ipcRenderer} = require('electron');
+const { dialog } = require('electron').remote;
+const { ipcRenderer } = require('electron');
 
 const BaseComponent = require(__dirname + '/../../components/base.js');
 const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
@@ -16,19 +16,18 @@ class ServerInfoForm extends BaseComponent {
 			<div class="settings-card">
 				<div class="server-info-left">
 					<img class="server-info-icon" src="${this.props.server.icon}"/>
-				</div>
-				<div class="server-info-right">
 					<div class="server-info-row">
 						<span class="server-info-alias">${this.props.server.alias}</span>
-						<i class="material-icons open-tab-button">open_in_new</i>						
+						<i class="material-icons open-tab-button">open_in_new</i>
 					</div>
-					<div class="server-info-row">
-						<input class="setting-input-value" disabled value="${this.props.server.url}"/>
+				</div>
+				<div class="server-info-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">
-							<i class="material-icons">indeterminate_check_box</i>
-							<span>Delete</span>
+							<span>Disconnect</span>
 						</div>
 					</div>
 				</div>
@@ -44,6 +43,7 @@ class ServerInfoForm extends BaseComponent {
 	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);
@@ -55,7 +55,7 @@ class ServerInfoForm extends BaseComponent {
 				type: 'warning',
 				buttons: ['YES', 'NO'],
 				defaultId: 0,
-				message: 'Are you sure you want to delete this server?'
+				message: 'Are you sure you want to disconnect this organization?'
 			}, response => {
 				if (response === 0) {
 					DomainUtil.removeDomain(this.props.index);
@@ -71,7 +71,12 @@ class ServerInfoForm extends BaseComponent {
 		this.$serverInfoAlias.addEventListener('click', () => {
 			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
 		});
+
+		this.$serverIcon.addEventListener('click', () => {
+			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+		});
 	}
+
 }
 
 module.exports = ServerInfoForm;

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

@@ -1,8 +1,6 @@
 'use strict';
 
 const BaseSection = require(__dirname + '/base-section.js');
-const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
-const ServerInfoForm = require(__dirname + '/server-info-form.js');
 const NewServerForm = require(__dirname + '/new-server-form.js');
 
 class ServersSection extends BaseSection {
@@ -13,12 +11,14 @@ class ServersSection extends BaseSection {
 
 	template() {
 		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="title">Add Server</div>
-				<div id="new-server-container"></div>
-				<div class="title" id="existing-servers"></div>
-				<div id="server-info-container"></div>
+		<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>
 		`;
 	}
 
@@ -29,26 +29,10 @@ class ServersSection extends BaseSection {
 	initServers() {
 		this.props.$root.innerHTML = '';
 
-		const servers = DomainUtil.getDomains();
 		this.props.$root.innerHTML = this.template();
-		this.$serverInfoContainer = document.getElementById('server-info-container');
-		this.$existingServers = document.getElementById('existing-servers');
 		this.$newServerContainer = document.getElementById('new-server-container');
-		this.$newServerButton = document.getElementById('new-server-action');
 
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
-		// Show Existing servers if servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing Servers';
 		this.initNewServerForm();
-
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
 	}
 
 	initNewServerForm() {

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

@@ -0,0 +1,311 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+
+class ShortcutsSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	templateMac() {
+		const userOSKey = '⌘';
+
+		return `
+            <div class="settings-pane">
+              <div class="title">Application Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
+                    <td>Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
+                    <td>Keyboard Shortcuts</td>
+                  </tr>
+									<tr>
+                    <td><kbd>${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>
+		`;
+	}
+
+	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>
+		`;
+	}
+
+	init() {
+		this.props.$root.innerHTML = (process.platform === 'darwin') ?
+			this.templateMac() : this.templateWinLin();
+	}
+}
+
+module.exports = ShortcutsSection;

app/renderer/js/preload.js

@@ -1,10 +1,17 @@
 'use strict';
 
 const { ipcRenderer } = require('electron');
-const { spellChecker } = require('./spellchecker');
+const SetupSpellChecker = require('./spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const LinkUtil = require(__dirname + '/utils/link-util.js');
+
 // eslint-disable-next-line import/no-unassigned-import
 require('./notification');
 
+// Prevent drag and drop event in main process which prevents remote code executaion
+require(__dirname + '/shared/preventdrag.js');
+
 const logout = () => {
 	// Create the menu for the below
 	document.querySelector('.dropdown-toggle').click();
@@ -17,7 +24,7 @@ const shortcut = () => {
 	// Create the menu for the below
 	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
 	// Additional check
-	if (node.text.trim().toLowerCase() === 'keyboard shortcuts') {
+	if (node.text.trim().toLowerCase() === 'keyboard shortcuts (?)') {
 		node.click();
 	} else {
 		// Atleast click the dropdown
@@ -32,8 +39,15 @@ process.once('loaded', () => {
 
 // To prevent failing this script on linux we need to load it after the document loaded
 document.addEventListener('DOMContentLoaded', () => {
-	// Init spellchecker
-	spellChecker();
+	// Get the default language of the server
+	const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, camelcase
+
+	if (serverLanguage) {
+		// Set spellcheker language
+		ConfigUtil.setConfigItem('spellcheckerLanguage', serverLanguage);
+		// Init spellchecker
+		SetupSpellChecker.init();
+	}
 
 	// redirect users to network troubleshooting page
 	const getRestartButton = document.querySelector('.restart_get_events_button');
@@ -42,4 +56,36 @@ document.addEventListener('DOMContentLoaded', () => {
 			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();
+
+			lightbox.open($img);
+		}
+	});
+});
+
+// Clean up spellchecker events after you navigate away from this page;
+// otherwise, you may experience errors
+window.addEventListener('beforeunload', () => {
+	SetupSpellChecker.unsubscribeSpellChecker();
+});
+
+// electron's globalShortcut can cause unexpected results
+// so adding the reload shortcut in the old-school way
+document.addEventListener('keydown', event => {
+	if (event.code === 'F5') {
+		ipcRenderer.send('forward-message', 'hard-reload');
+	}
 });

app/renderer/js/shared/preventdrag.js

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

app/renderer/js/spellchecker.js

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

app/renderer/js/tray.js

@@ -98,7 +98,7 @@ const renderNativeImage = function (arg) {
 	return Promise.resolve()
 		.then(() => renderCanvas(arg))
 		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
+			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
 			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
 		});
 };
@@ -180,11 +180,10 @@ ipcRenderer.on('tray', (event, arg) => {
 	if (!window.tray) {
 		return;
 	}
-	// We don't want to create tray from unread messages on windows and macOS since these systems already have dock badges and taskbar overlay icon.
-	if (process.platform === 'linux') {
+	// We don't want to create tray from unread messages on macOS since it already has dock badges.
+	if (process.platform === 'linux' || process.platform === 'win32') {
 		if (arg === 0) {
 			unread = arg;
-			// Message Count // console.log("message count is zero.");
 			window.tray.setImage(iconPath());
 			window.tray.setToolTip('No unread messages');
 		} else {
@@ -198,15 +197,18 @@ ipcRenderer.on('tray', (event, arg) => {
 });
 
 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') {
+		if (process.platform === 'linux' || process.platform === 'win32') {
 			renderNativeImage(unread).then(image => {
 				window.tray.setImage(image);
 				window.tray.setToolTip(unread + ' unread messages');
@@ -214,6 +216,10 @@ function toggleTray() {
 		}
 		ConfigUtil.setConfigItem('trayIcon', true);
 	}
+	const selector = 'webview:not([class*=disabled])';
+	const webview = document.querySelector(selector);
+	const webContents = webview.getWebContents();
+	webContents.send('toggletray', state);
 }
 
 ipcRenderer.on('toggletray', toggleTray);

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

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

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

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

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

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

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

@@ -5,6 +5,12 @@ const fs = require('fs');
 const path = require('path');
 const JsonDB = require('node-json-db');
 const request = require('request');
+const Logger = require('./logger-util');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
 
 let instance = null;
 
@@ -93,8 +99,7 @@ class DomainUtil {
 	checkDomain(domain, silent = false) {
 		if (!silent && this.duplicateDomain(domain)) {
 			// Do not check duplicate in silent mode
-			alert('This server has been added.');
-			return;
+			return Promise.reject('This server has been added.');
 		}
 
 		domain = this.formatUrl(domain);
@@ -110,17 +115,28 @@ class DomainUtil {
 		return new Promise((resolve, reject) => {
 			request(checkDomain, (error, response) => {
 				const certsError =
-					['Error: self signed certificate',
-						'Error: unable to verify the first certificate'
+					[
+						'Error: self signed certificate',
+						'Error: unable to verify the first certificate',
+						'Error: unable to get local issuer certificate'
 					];
-				if (!error && response.statusCode !== 404) {
+
+				// If the domain contains following strings we just bypass the server
+				const whitelistDomains = [
+					'zulipdev.org'
+				];
+
+				// make sure that error is a error or string not undefined
+				// so validation does not throw error.
+				error = error || '';
+				if (!error && response.statusCode < 400) {
 					// Correct
 					this.getServerSettings(domain).then(serverSettings => {
 						resolve(serverSettings);
 					}, () => {
 						resolve(serverConf);
 					});
-				} else if (certsError.indexOf(error.toString()) >= 0) {
+				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError.indexOf(error.toString()) >= 0) {
 					if (silent) {
 						this.getServerSettings(domain).then(serverSettings => {
 							resolve(serverSettings);
@@ -152,7 +168,9 @@ class DomainUtil {
 						});
 					}
 				} else {
-					reject('Not a valid Zulip server');
+					const invalidZulipServerError = `${domain} does not appear to be a valid Zulip server. Make sure that \
+					\n(1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings \n (3) its a zulip server`;
+					reject(invalidZulipServerError);
 				}
 			});
 		});
@@ -166,7 +184,9 @@ class DomainUtil {
 					const data = JSON.parse(response.body);
 					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
 						resolve({
-							icon: data.realm_uri + data.realm_icon,
+							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+							// Following check handles both the cases
+							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
 							url: data.realm_uri,
 							alias: data.realm_name
 						});
@@ -215,7 +235,23 @@ class DomainUtil {
 	}
 
 	reloadDB() {
-		this.db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
+		const domainJsonPath = path.join(app.getPath('userData'), '/domain.json');
+		try {
+			const file = fs.readFileSync(domainJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(domainJsonPath)) {
+				fs.unlinkSync(domainJsonPath);
+				dialog.showErrorBox(
+					'Error saving new organization',
+					'There seems to be error while saving new organization, ' +
+					'you may have to re-add your previous organizations back.'
+				);
+				logger.error('Error while JSON parsing domain.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(domainJsonPath, true, true);
 	}
 
 	generateFilePath(url) {

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

@@ -19,7 +19,20 @@ class LinkUtil {
 		const currentDomain = wurl('hostname', currentUrl);
 		const newDomain = wurl('hostname', newUrl);
 
-		return (currentDomain === newDomain) && newUrl.includes('/#narrow');
+		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);
 	}
 }
 

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'), '/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 error while saving update notifications.'
+				);
+				logger.error('Error while JSON parsing updates.json: ');
+				logger.error(err);
+			}
+		}
+		this.db = new JsonDB(linuxUpdateJsonPath, true, true);
+	}
+}
+
+module.exports = new LinuxUpdateUtil();

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

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

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

@@ -0,0 +1,54 @@
+const isOnline = require('is-online');
+
+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();
+							}
+							console.log('You\'re back online.');
+							return resolve(true);
+						}
+
+						console.log('There is no internet connection, try checking network cables, modem and router.');
+						const errMsgHolder = document.querySelector('#description');
+						if (errMsgHolder) {
+							errMsgHolder.innerHTML = `
+										<div>You internet connection does't seem to work properly!</div>
+										</div>Verify that it works and then click try again.</div>`;
+						}
+						return resolve(false);
+					});
+			} else {
+				return resolve(true);
+			}
+		});
+	}
+}
+
+module.exports = ReconnectUtil;

app/renderer/main.html

@@ -13,20 +13,29 @@
     <div class="popup">
       <span class="popuptext hidden" id="fullscreen-popup"></span>
   </div>
-  <div id="sidebar">
+  <div id="sidebar" class="toggle-sidebar">
     <div id="view-controls-container">
       <div id="tabs-container"></div>
       <div id="add-tab" class="tab functional-tab">
         <div class="server-tab" id="add-action">
           <i class="material-icons">add</i>
         </div>
+        <span id="add-server-tooltip" style="display:none">Add organization</span>
       </div>
     </div>
     <div id="actions-container">
+      <div class="action-button" id="dnd-action">
+        <i class="material-icons md-48">notifications</i>
+        <span id="dnd-tooltip" style="display:none">Do Not Disturb</span>
+      </div>
       <div class="action-button" id="reload-action">
         <i class="material-icons md-48">refresh</i>
         <span id="reload-tooltip" style="display:none">Reload</span>
       </div>
+      <div class="action-button disable" id="back-action">
+        <i class="material-icons md-48">arrow_back</i>
+        <span id="back-tooltip" style="display:none">Go Back</span>
+      </div>
       <div class="action-button" id="settings-action">
         <i class="material-icons md-48">settings</i>
         <span id="setting-tooltip" style="display:none">Settings</span>
@@ -37,7 +46,11 @@
     <div id="webviews-container"></div>
   </div>
   </div>
+
+  <div id="feedback-modal">
+    <send-feedback></send-feedback>
+  </div>
 </body>
 <script src="js/main.js"></script>
-
-</html>
+<script>require('./js/shared/preventdrag.js')</script>
+</html>

app/renderer/network.html

@@ -17,5 +17,6 @@
       <div id="reconnect">Try now</div>
     </div>
   </body>
-  <script src="js/pages/network.js"></script>  
+  <script src="js/pages/network.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>

app/renderer/preference.html

@@ -12,5 +12,6 @@
       <div id="settings-container"></div>
     </div>
   </body>
-  <script src="js/pages/preference/preference.js"></script>  
+  <script src="js/pages/preference/preference.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>

app/translations/bg.json

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

app/translations/cs.json

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

app/translations/de.json

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

app/translations/en.json

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

app/translations/es.json

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

app/translations/fr.json

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

app/translations/hi.json

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

app/translations/hu.json

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

app/translations/id.json

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

app/translations/ja.json

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

app/translations/ko.json

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

app/translations/ml.json

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

app/translations/nl.json

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

app/translations/pl.json

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

app/translations/pt.json

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

app/translations/ru.json

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

app/translations/sr.json

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

app/translations/ta.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "ஜுலிப் பற்றி",
+	"Actual Size": "உண்மையான அளவு",
+	"Back": "மீண்டும்",
+	"Close": "நெருக்கமான",
+	"Copy": "நகல்",
+	"Cut": "வெட்டு",
+	"Delete": "அழி",
+	"Desktop App Settings": "டெஸ்க்டாப் பயன்பாட்டு அமைப்புகள்",
+	"Edit": "தொகு",
+	"File": "கோப்பு",
+	"Forward": "முன்னோக்கி",
+	"Hard Reload": "கடினமாக மீண்டும் ஏற்றவும்",
+	"Help": "உதவி",
+	"History": "வரலாறு",
+	"Keyboard Shortcuts": "விசைப்பலகை குறுக்குவழிகள்",
+	"Log Out": "வெளியேறு",
+	"Minimize": "குறைத்தல்",
+	"Paste": "ஒட்டு",
+	"Paste and Match Style": "உடை ஒட்டு மற்றும் பொருந்தும்",
+	"Quit": "விட்டுவிட",
+	"Redo": "மீண்டும் செய்",
+	"Reload": "ஏற்றவும்",
+	"Report an issue...": "சிக்கலைப் புகார ...",
+	"Reset App Settings": "பயன்பாட்டு அமைப்புகளை மீட்டமைக்கவும்",
+	"Select All": "அனைத்தையும் தெரிவுசெய்",
+	"Show App Logs": "பயன்பாட்டு பதிவுகள் காட்டு",
+	"Toggle DevTools for Active Tab": "செயலில் தாவலுக்கு DevTools ஐ மாற்று",
+	"Toggle DevTools for Zulip App": "Zulip பயன்பாட்டிற்கான DevTools ஐ மாற்று",
+	"Toggle Full Screen": "மாற்று முழுத்திரை",
+	"Toggle Sidebar": "பக்கப்பட்டி மாறு",
+	"Toggle Tray Icon": "ட்ரே ஐகானை மாற்று",
+	"Undo": "செயல்தவிர்",
+	"View": "காண்க",
+	"Window": "ஜன்னல்",
+	"Zoom In": "பெரிதாக்க",
+	"Zoom Out": "பெரிதாக்குக",
+	"Zulip Help": "Zulip உதவி"
+}

app/translations/tr.json

@@ -0,0 +1,39 @@
+{
+	"About Zulip": "Zulip Hakkinda",
+	"Actual Size": "Gerçek boyutu",
+	"Back": "Geri",
+	"Close": "Kapat",
+	"Copy": "kopya",
+	"Cut": "Kesmek",
+	"Delete": "silmek",
+	"Desktop App Settings": "Masaüstü Uygulama Ayarları",
+	"Edit": "Düzenle",
+	"File": "Dosya",
+	"Forward": "ileri",
+	"Hard Reload": "Sert Yeniden Yükle",
+	"Help": "yardım et",
+	"History": "Tarihçe",
+	"Keyboard Shortcuts": "Klavye kısayolları",
+	"Log Out": "Çıkış Yap",
+	"Minimize": "küçültmek",
+	"Paste": "Yapıştırmak",
+	"Paste and Match Style": "Stili Yapıştır ve Eşleştir",
+	"Quit": "çıkmak",
+	"Redo": "yeniden yapmak",
+	"Reload": "Tekrar yükle",
+	"Report an issue...": "Bir sorun bildir ...",
+	"Reset App Settings": "Uygulama Ayarlarını Sıfırla",
+	"Select All": "Hepsini seç",
+	"Show App Logs": "Uygulama Günlüğlerini Göster",
+	"Toggle DevTools for Active Tab": "Aktif Sekme İçin DevTools'a Geçiş Yap",
+	"Toggle DevTools for Zulip App": "Zulip App için DevTools'a Geçiş Yap",
+	"Toggle Full Screen": "Tam ekrana geç",
+	"Toggle Sidebar": "Kenar Çubuğunu Aç / Kapat",
+	"Toggle Tray Icon": "Tepsi Simgesini Aç / Kapat",
+	"Undo": "Geri alma",
+	"View": "Görünüm",
+	"Window": "pencere",
+	"Zoom In": "Yakınlaştır",
+	"Zoom Out": "Uzaklaştır",
+	"Zulip Help": "Zulip Yardımı"
+}

appveyor.yml

@@ -17,7 +17,8 @@ install:
   - npm install
   - npm install -g gulp
 
-build: off  
+build: off
 
 test_script:
   - npm run test
+  - npm run test-e2e

development.md

@@ -15,6 +15,7 @@ To build and run the app from source, you'll need the following:
 * [Python](https://www.python.org/downloads/release/python-2713/)
   (v2.7.x recommended)
 * A C++ compiler compatible with C++11
+* Linux users also need [Snapcraft](https://snapcraft.io/)
 * Development headers for the libXext, libXtst, and libxkbfile libraries
 
 ### Debian/Ubuntu and friends
@@ -25,7 +26,7 @@ manager (see [here][nodesource-install] for more on the first command):
 
 ```sh
 $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
-$ sudo apt install git nodejs python build-essential libxext-dev libxtst-dev libxkbfile-dev
+$ sudo apt install git nodejs python build-essential snapcraft libxext-dev libxtst-dev libxkbfile-dev libgconf-2-4
 ```
 
 [nodesource-install]: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
@@ -76,7 +77,7 @@ This command will produce distributable packages or installers for the
 operating system you're running on:
 * on Windows, a Windows installer file
 * on macOS, a `.dmg` file
-* on Linux, a plain `.zip` file as well as a `.deb` file and an
+* on Linux, a plain `.zip` file as well as a `.deb` file, `.snap` file and an
   `AppImage` file.
 To generate all three types, you will need all three operating
 systems.

docs/Windows.md

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

gulpfile.js

@@ -1,9 +1,10 @@
 'use strict';
 const gulp = require('gulp');
-const mocha = require('gulp-mocha');
 const electron = require('electron-connect').server.create({
 	verbose: true
 });
+const tape = require('gulp-tape');
+const tapColorize = require('tap-colorize');
 
 gulp.task('dev', () => {
   // Start browser process
@@ -13,7 +14,7 @@ gulp.task('dev', () => {
   // Reload renderer process
 	gulp.watch('app/renderer/css/*.css', ['reload:renderer']);
 	gulp.watch('app/renderer/*.html', ['reload:renderer']);
-	gulp.watch('app/renderer/js/*.js', ['reload:renderer']);
+	gulp.watch('app/renderer/js/**/*.js', ['reload:renderer']);
 });
 
 gulp.task('restart:browser', done => {
@@ -28,9 +29,11 @@ gulp.task('reload:renderer', done => {
 	done();
 });
 
-// Test app using mocha+spectron
-gulp.task('test', () => {
-	return gulp.src('tests/index.js').pipe(mocha());
+gulp.task('test-e2e', () => {
+	return gulp.src('tests/*.js')
+	.pipe(tape({
+		reporter: tapColorize()
+	}));
 });
 
-gulp.task('default', ['dev', 'test']);
+gulp.task('default', ['dev', 'test-e2e']);

package.json

@@ -1,15 +1,14 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "1.4.0",
+  "version": "2.2.0-beta",
   "main": "./app/main",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
-  "email": "<svnitakash@gmail.com>",
-  "copyright": "©2017 Kandra Labs, Inc.",
+  "copyright": "Kandra Labs, Inc.",
   "author": {
     "name": "Kandra Labs, Inc.",
-    "email": "svnitakash@gmail.com"
+    "email": "support@zulipchat.com"
   },
   "repository": {
     "type": "git",
@@ -18,15 +17,21 @@
   "bugs": {
     "url": "https://github.com/zulip/zulip-electron/issues"
   },
+  "engines": {
+    "node": ">=6.0.0"
+  },
   "scripts": {
-    "start": "electron app --disable-http-cache",
+    "start": "electron app --disable-http-cache --no-electron-connect",
+    "reinstall": "node ./tools/reinstall-node-modules.js",
     "postinstall": "electron-builder install-app-deps",
     "test": "xo",
-    "dev": "gulp dev",
+    "test-e2e": "gulp test-e2e",
+    "dev": "gulp dev & nodemon --watch app/main --watch app/renderer --exec 'npm test' -e html,css,js",
     "pack": "electron-builder --dir",
     "dist": "electron-builder",
     "mas": "electron-builder --mac mas",
-    "travis": "cd ./scripts && ./travis-build-test.sh"
+    "travis": "cd ./scripts && ./travis-build-test.sh",
+    "build-locales": "node tools/locale-helper"
   },
   "pre-commit": [
     "test"
@@ -41,7 +46,8 @@
     ],
     "copyright": "©2017 Kandra Labs, Inc.",
     "mac": {
-      "category": "public.app-category.productivity"
+      "category": "public.app-category.productivity",
+      "artifactName": "${productName}-${version}-${arch}.${ext}"
     },
     "linux": {
       "category": "Chat;GNOME;GTK;Network;InstantMessaging",
@@ -50,30 +56,41 @@
       "target": [
         "deb",
         "zip",
-        "AppImage"
+        "AppImage",
+        "snap"
       ],
-      "maintainer": "Akash Nimare <svnitakash@gmail.com>"
+      "maintainer": "Akash Nimare <svnitakash@gmail.com>",
+      "artifactName": "${productName}-${version}-${arch}.${ext}"
     },
     "deb": {
+      "synopsis": "Zulip Desktop App",
+      "afterInstall": "./scripts/debian-add-repo.sh",
+      "afterRemove": "./scripts/debian-uninstaller.sh"
+    },
+    "snap": {
       "synopsis": "Zulip Desktop App"
     },
     "dmg": {
       "background": "build/appdmg.png",
       "icon": "build/icon.icns",
-      "iconSize": 128,
+      "iconSize": 100,
       "contents": [
         {
           "x": 380,
-          "y": 240,
+          "y": 280,
           "type": "link",
           "path": "/Applications"
         },
         {
-          "x": 122,
-          "y": 240,
+          "x": 110,
+          "y": 280,
           "type": "file"
         }
-      ]
+      ],
+      "window": {
+          "width": 500,
+          "height": 500
+      }
     },
     "win": {
       "target": [
@@ -104,17 +121,22 @@
   ],
   "devDependencies": {
     "assert": "1.4.1",
+    "cp-file": "^5.0.0",
     "devtron": "1.4.0",
-    "electron-builder": "19.27.3",
-    "electron": "1.6.11",
+    "electron": "2.0.0",
+    "electron-builder": "20.11.1",
     "electron-connect": "0.6.2",
+    "electron-debug": "1.4.0",
+    "google-translate-api": "2.3.0",
     "gulp": "3.9.1",
-    "gulp-mocha": "4.3.1",
-    "chai-as-promised": "7.1.1",
-    "chai": "4.1.1",
-    "spectron": "3.7.2",
-    "xo": "0.18.2",
-    "pre-commit": "1.2.2"
+    "gulp-tape": "0.0.9",
+    "is-ci": "^1.0.10",
+    "nodemon": "^1.14.11",
+    "pre-commit": "1.2.2",
+    "spectron": "3.8.0",
+    "tap-colorize": "^1.2.0",
+    "tape": "^4.8.0",
+    "xo": "0.18.2"
   },
   "xo": {
     "parserOptions": {
@@ -130,7 +152,11 @@
         "rules": {
           "max-lines": [
             "warn",
-            500
+            {
+              "max": 500,
+              "skipBlankLines": true,
+              "skipComments": true
+            }
           ],
           "no-warning-comments": 0,
           "object-curly-spacing": 0,
@@ -147,7 +173,8 @@
       }
     ],
     "ignore": [
-      "tests/*.js"
+      "tests/*.js",
+      "tools/locale-helper/*.js"
     ],
     "envs": [
       "node",

scripts/debian-add-repo.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# This script runs when user install the debian package
+
+# Link to the binary
+ln -sf '/opt/${productFilename}/${executable}' '/usr/local/bin/${executable}';
+echo 'Successfully added /opt/${productFilename}/${executable} to /usr/local/bin/${executable}'
+
+# Install apt repository source list if it does not exist
+if ! grep ^ /etc/apt/sources.list /etc/apt/sources.list.d/* | grep zulip.list; then
+    sudo apt-key adv --keyserver pool.sks-keyservers.net --recv 69AD12704E71A4803DCA3A682424BE5AE9BD10D9
+    echo "deb https://dl.bintray.com/zulip/debian/ stable main" | \
+    sudo tee -a /etc/apt/sources.list.d/zulip.list;
+fi

scripts/debian-uninstaller.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# This script runs when user uninstall the debian package.
+# It will remove all the config files and anything which was added by the app.
+
+# Remove apt repository source list when user uninstalls Zulip app
+if grep ^ /etc/apt/sources.list /etc/apt/sources.list.d/* | grep zulip.list; then
+	sudo apt-key del 69AD12704E71A4803DCA3A682424BE5AE9BD10D9;
+	sudo rm /etc/apt/sources.list.d/zulip.list;
+fi
+
+# Get the root user
+if [ $SUDO_USER ];
+	then getSudoUser=$SUDO_USER;
+	else getSudoUser=`whoami`;
+fi
+
+# Get the path for Zulip's desktop entry which is created by auto-launch script
+getDesktopEntry=/home/$getSudoUser/.config/autostart/zulip.desktop;
+
+# Remove desktop entry if exists
+if [ -f $getDesktopEntry ]; then
+    sudo rm $getDesktopEntry;
+fi
+
+# App directory which contains all the config, setting files
+appDirectory=/home/$getSudoUser/.config/Zulip/;
+
+if [ -d $appDirectory ]; then
+    sudo rm -rf $appDirectory;
+fi
+
+# Delete the link to the binary
+echo 'Removing binary link'
+sudo rm -f '/usr/local/bin/${executable}';

scripts/travis-build-test.sh

@@ -1,10 +1,20 @@
 #!/usr/bin/env bash
 
+# exit script if fails
+set -e;
+
 if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
-  export {no_proxy,NO_PROXY}="127.0.0.1,localhost"
-	export DISPLAY=:99.0
-  sh -e /etc/init.d/xvfb start
-  sleep 3
+    export {no_proxy,NO_PROXY}="127.0.0.1,localhost"
+    export DISPLAY=:99.0
+    sh -e /etc/init.d/xvfb start
+    sleep 3
+
+    echo 'Travis Screen Resolution:'
+    xdpyinfo | grep dimensions
 fi
 
 npm run test
+
+if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then
+    npm run test-e2e
+fi

scripts/travis-xvfb.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
+    /sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16
+fi

snap/snapcraft.yaml

@@ -0,0 +1,37 @@
+name: zulip
+version: 2.0.0
+summary: Zulip Desktop Client for Linux
+description: Zulip combines the immediacy of Slack with an email threading model. With Zulip, you can catch up on important conversations while ignoring irrelevant ones.
+confinement: strict
+grade: stable
+icon: snap/gui/icon.png
+apps:
+  zulip:
+    command: env TMPDIR=$XDG_RUNTIME_DIR desktop-launch $SNAP/zulip
+    plugs:
+      - desktop
+      - desktop-legacy
+      - home
+      - x11
+      - unity7
+      - browser-support
+      - network
+      - gsettings
+      - pulseaudio
+      - opengl
+parts:
+  app:
+    plugin: dump
+    stage-packages:
+      - libasound2
+      - libgconf2-4
+      - libnotify4
+      - libnspr4
+      - libnss3
+      - libpcre3
+      - libpulse0
+      - libxss1
+      - libxtst6
+    source: dist/linux-unpacked
+    after:
+      - desktop-gtk2

tests/config.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+const TEST_APP_PRODUCT_NAME = 'ZulipTest'
+
+module.exports = {
+  TEST_APP_PRODUCT_NAME
+}

tests/index.js

@@ -1,81 +1,13 @@
-const assert = require('assert')
-const Application = require('spectron').Application
-const chai = require('chai')
-const { expect } = chai
-const chaiAsPromised = require('chai-as-promised')
-
-chai.should()
-chai.use(chaiAsPromised)
-
-describe('application launch', function () {
-  this.timeout(15000)
-
-  beforeEach(function () {
-    this.app = new Application({
-      path: require('electron'),
-      args: [__dirname + '/../app/renderer/main.html']
-    })
-    return this.app.start()
-  })
-
-  beforeEach(function () {
-    chaiAsPromised.transferPromiseness = this.app.transferPromiseness
-  })
-
-  afterEach(function () {
-    if (this.app && this.app.isRunning()) {
-      return this.app.stop()
-    }
-  })
-
-  it('shows an initial window', function () {
-     return this.app.client.waitUntilWindowLoaded(5000)
-      .getWindowCount().should.eventually.equal(2)
-      .browserWindow.isMinimized().should.eventually.be.false
-      .browserWindow.isDevToolsOpened().should.eventually.be.false
-      .browserWindow.isVisible().should.eventually.be.true
-      .browserWindow.isFocused().should.eventually.be.true
-      .browserWindow.getBounds().should.eventually.have.property('width').and.be.above(0)
-      .browserWindow.getBounds().should.eventually.have.property('height').and.be.above(0)
-  })
-
-	it('sets up a default organization', function () {
-		let app = this.app
-		let self = this
-		app.client.execute(() => {
-			window.confirm = function () { return true }
-		})
-
-		function createOrg (client, name, url, winIndex) {
-			return client
-				// Focus on settings webview
-				.then(switchToWebviewAtIndex.bind(null, self.app.client, winIndex))
-				.pause(1000) // wait for settings to load
-
-				// Fill settings form
-				.click('#new-server-action')
-				.setValue('input[id="server-info-name"]', name)
-				.setValue('input[id="server-info-url"]', url)
-				.click('#save-server-action')
-				.pause(500) // Need to pause while server verification takes place
-				.then(() =>  app.browserWindow.reload())
-			  .pause(1500) // Wait for webview of org to load
-		}
-
-		function switchToWebviewAtIndex(client, index) {
-			return client
-			.windowHandles()
-			.then(function (session) {
-				this.window(session.value[index])
-			})
-		}
-
-		return this.app.client.waitUntilWindowLoaded(5000)
-			.then(() => createOrg(self.app.client, 'Zulip 1', 'chat.zulip.org', 1))
-			.then(switchToWebviewAtIndex.bind(null, self.app.client, 0))
-			.click('#add-action > i').pause(500)
-			.then(switchToWebviewAtIndex.bind(null, self.app.client, 2))
-			.then(() => createOrg(self.app.client, 'Zulip 2', 'chat.zulip.org', 2))
-	})
-})
+const test = require('tape')
+const setup = require('./setup')
 
+test('app runs', function (t) {
+  t.timeoutAfter(10e3)
+  setup.resetTestDataDir()
+  const app = setup.createApp()
+  setup.waitForLoad(app, t)
+    .then(() => app.client.windowByIndex(1)) // focus on webview
+    .then(() => app.client.waitForExist('//*[@id="connect"]')) // id of the connect button
+    .then(() => setup.endTest(app, t),
+          (err) => setup.endTest(app, t, err || 'error'))
+})

tests/setup.js

@@ -0,0 +1,99 @@
+const Application = require('spectron').Application
+const cpFile = require('cp-file')
+const fs = require('fs')
+const isCI = require('is-ci')
+const mkdirp = require('mkdirp')
+const path = require('path')
+const rimraf = require('rimraf')
+
+const config = require('./config')
+
+module.exports = {
+  createApp,
+  endTest,
+  waitForLoad,
+  wait,
+  resetTestDataDir
+}
+
+// Runs Zulip Desktop.
+// Returns a promise that resolves to a Spectron Application once the app has loaded.
+// Takes a Tape test. Makes some basic assertions to verify that the app loaded correctly.
+function createApp (t) {
+  generateTestAppPackageJson()
+  return new Application({
+    path: path.join(__dirname, '..', 'node_modules', '.bin',
+      'electron' + (process.platform === 'win32' ? '.cmd' : '')),
+    args: [path.join(__dirname)], // Ensure this dir has a package.json file with a 'main' entry piont
+    env: {NODE_ENV: 'test'},
+    waitTimeout: 10e3
+  })
+}
+
+// Generates package.json for test app
+// Reads app package.json and updates the productName to config.TEST_APP_PRODUCT_NAME 
+// We do this so that the app integration doesn't doesn't share the same appDataDir as the dev application
+function generateTestAppPackageJson () {
+  let packageJson = require(path.join(__dirname, '../package.json'))
+  packageJson.productName = config.TEST_APP_PRODUCT_NAME
+  packageJson.main = '../app/main'
+
+  const testPackageJsonPath = path.join(__dirname, 'package.json')
+  fs.writeFileSync(testPackageJsonPath, JSON.stringify(packageJson, null, ' '), 'utf-8')
+}
+
+// Starts the app, waits for it to load, returns a promise
+function waitForLoad (app, t, opts) {
+  if (!opts) opts = {}
+  return app.start().then(function () {
+    return app.client.waitUntilWindowLoaded()
+  })
+  .then(function() {
+    return app.client.pause(2000);
+  })
+  .then(function () {
+    return app.webContents.getTitle()
+  }).then(function (title) {
+    t.equal(title, 'Zulip', 'html title')
+  })
+}
+
+// Returns a promise that resolves after 'ms' milliseconds. Default: 1 second
+function wait (ms) {
+  if (ms === undefined) ms = 1000 // Default: wait long enough for the UI to update
+  return new Promise(function (resolve, reject) {
+    setTimeout(resolve, ms)
+  })
+}
+
+// Quit the app, end the test, either in success (!err) or failure (err)
+function endTest (app, t, err) {
+  return app.stop().then(function () {
+    t.end(err)
+  })
+}
+
+function getAppDataDir () {
+  let base
+
+  if (process.platform === 'darwin') {
+    base = path.join(process.env.HOME, 'Library', 'Application Support')
+  } else if (process.platform === 'linux') {
+    base = process.env.XDG_CONFIG_HOME ?
+      process.env.XDG_CONFIG_HOME : path.join(process.env.HOME, '.config')
+  } else if (process.platform === 'win32') {
+    base = process.env.APPDATA
+  } else {
+    console.log('Could not detect app data dir base. Exiting...')
+    process.exit(1)
+  }
+  console.log('Detected App Data Dir base:', base)
+  return path.join(base, config.TEST_APP_PRODUCT_NAME)
+}
+
+// Resets the test directory, containing domain.json, window-state.json, etc
+function resetTestDataDir () {
+  appDataDir = getAppDataDir()
+  rimraf.sync(appDataDir)
+  rimraf.sync(path.join(__dirname, 'package.json'))
+}

tests/test-add-organization.js

@@ -0,0 +1,19 @@
+const test = require('tape')
+const setup = require('./setup')
+
+test('add-organization', function (t) {
+  t.timeoutAfter(50e3)
+  setup.resetTestDataDir()
+  const app = setup.createApp()
+  setup.waitForLoad(app, t)
+    .then(() => app.client.windowByIndex(1)) // focus on webview
+    .then(() => app.client.setValue('.setting-input-value', 'chat.zulip.org'))
+    .then(() => app.client.click('.server-save-action'))
+    .then(() => setup.wait(5000))
+    .then(() => app.client.windowByIndex(0)) // Switch focus back to main win
+    .then(() => app.client.windowByIndex(1)) // Switch focus back to org webview
+    .then(() => app.client.waitForExist('//*[@id="id_username"]'))
+    .then(() => setup.endTest(app, t),
+          (err) => setup.endTest(app, t, err || 'error'))
+})
+

tests/test-new-organization.js

@@ -0,0 +1,17 @@
+const test = require('tape')
+const setup = require('./setup')
+
+// Create new org link should open in the default browser [WIP]
+
+test('new-org-link', function (t) {
+  t.timeoutAfter(50e3)
+  setup.resetTestDataDir()
+  const app = setup.createApp()
+  setup.waitForLoad(app, t)
+    .then(() => app.client.windowByIndex(1)) // focus on webview
+    .then(() => app.client.click('#open-create-org-link')) // Click on new org link button
+    .then(() => setup.wait(5000))
+    .then(() => setup.endTest(app, t),
+          (err) => setup.endTest(app, t, err || 'error'))
+})
+

tools/fetch-pull-request

@@ -0,0 +1,16 @@
+#!/bin/bash
+set -e
+set -x
+
+if ! git diff-index --quiet HEAD; then
+    set +x
+    echo "There are uncommitted changes:"
+    git status --short
+    echo "Doing nothing to avoid losing your work."
+    exit 1
+fi
+request_id="$1"
+remote=${2:-"upstream"}
+git fetch "$remote" "pull/$request_id/head"
+git checkout -B "review-original-${request_id}"
+git reset --hard FETCH_HEAD

tools/fetch-pull-request.cmd

@@ -0,0 +1,23 @@
+@echo off
+git diff-index --quiet HEAD
+if %ERRORLEVEL% NEQ 0 (
+    echo "There are uncommitted changes:"
+    git status --short
+    echo "Doing nothing to avoid losing your work."
+    exit /B 1
+)
+
+if "%~1"=="" (
+    echo "Error you must specify the PR number"
+)
+
+if "%~2"=="" ( 
+    set remote="upstream"
+) else (
+    set remote=%2
+)
+
+set request_id="%1"
+git fetch "%remote%" "pull/%request_id%/head"
+git checkout -B "review-%request_id%"
+git reset --hard FETCH_HEAD

tools/fetch-rebase-pull-request

@@ -0,0 +1,17 @@
+#!/bin/bash
+set -e
+set -x
+
+if ! git diff-index --quiet HEAD; then
+    set +x
+    echo "There are uncommitted changes:"
+    git status --short
+    echo "Doing nothing to avoid losing your work."
+    exit 1
+fi
+request_id="$1"
+remote=${2:-"upstream"}
+git fetch "$remote" "pull/$request_id/head"
+git checkout -B "review-${request_id}" $remote/master
+git reset --hard FETCH_HEAD
+git pull --rebase

tools/fetch-rebase-pull-request.cmd

@@ -0,0 +1,24 @@
+@echo off
+git diff-index --quiet HEAD
+if %errorlevel% neq 0 (
+    echo "There are uncommitted changes:"
+    git status --short
+    echo "Doing nothing to avoid losing your work."
+    exit \B 1
+)
+
+if "%~1"=="" (
+    echo "Error you must specify the PR number"
+)
+
+if "%~2"=="" ( 
+    set remote="upstream"
+) else (
+    set remote=%2
+)
+
+set request_id="%1"
+git fetch "%remote%" "pull/%request_id%/head"
+git checkout -B "review-%request_id%" %remote%/master
+git reset --hard FETCH_HEAD
+git pull --rebase

tools/locale-helper/index.js

@@ -0,0 +1,30 @@
+const translate = require('google-translate-api');
+const path = require('path');
+const fs = require('fs');
+
+const translationDir = path.resolve(__dirname, '../../app/translations');
+
+function writeJSON(file, data) {
+    const filePath = path.resolve(translationDir, file);
+    fs.writeFileSync(filePath, `${JSON.stringify(data, null, '\t')}\n`, 'utf8');
+}
+
+const { phrases } = require('./locale-template');
+const supportedLocales = require('./supported-locales');
+
+phrases.sort();
+for (let locale in supportedLocales) {
+    console.log(`fetching translation for: ${supportedLocales[locale]} - ${locale}..`);
+    translate(phrases.join('\n'), { to: locale })
+        .then(res => {
+            const localeFile = `${locale}.json`;
+            const translatedText = res.text.split('\n');
+            const translationJSON = {};
+            phrases.forEach((phrase, index) => {
+               translationJSON[phrase] = translatedText[index];
+            });
+
+            writeJSON(localeFile, translationJSON);
+            console.log(`create: ${localeFile}`);
+        });
+}