release: New release v5.9.5.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.editorconfig

@@ -1,15 +1,11 @@
 root = true
 
 [*]
-indent_style = tab
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{package.json,*.yml}]
+[{*.css,*.html,*.js,*.json,*.ts}]
 indent_style = space
 indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false

.gitattributes

@@ -1 +1,14 @@
-* text=auto
+* text=auto eol=lf
+
+*.gif binary
+*.jpg binary
+*.jpeg binary
+*.eot binary
+*.woff binary
+*.woff2 binary
+*.svg binary
+*.ttf binary
+*.png binary
+*.otf binary
+*.tif binary
+*.ogg binary

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+github: zulip
+patreon: zulip
+open_collective: zulip

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve
+---
+
+**Describe the bug**
+
+<!-- A clear and concise description of what the bug is. -->
+
+**To Reproduce**
+
+<!-- Clear steps to reproduce the issue. -->
+
+**Expected behavior**
+
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Screenshots**
+
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Desktop (please complete the following information):**
+
+- Operating System:
+<!-- (Platform and Version) e.g. macOS 10.13.6 / Windows 10 (1803) / Ubuntu 18.04 x64 -->
+- Zulip Desktop Version:
+<!-- e.g. 5.2.0 -->
+
+**Additional context**
+
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,4 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+---
+
+**Problem Description**
+
+<!-- Please add a clear and concise description of what the problem is. -->
+
+**Proposed Solution**
+
+<!-- Describe the solution you'd like in a clear and concise manner -->
+
+**Describe alternatives you've considered**
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+**Additional context**
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+---
+
+<!--
+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

.github/workflows/node.js.yml

@@ -0,0 +1,15 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -1,8 +1,42 @@
-node_modules
-npm-debug.log
-domain.json
+# Dependency directory
+/node_modules/
 
+# npm cache directory
+.npm
+
+# transifexrc - if user prefers it to be in working tree
+.transifexrc
+
+# Compiled binary build directory
+/dist/
+/dist-electron/
+
+#snap generated files
+snap/parts
+snap/prime
+snap/snap
+snap/stage
+snap/*.snap
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 // osx garbage
 *.DS_Store
 .DS_Store
+
+# dotenv environment variables file
+.env
+
+# miscellaneous
+.idea
+config.gypi
+
+# Test generated files
+# tests/package.json
+
+.python-version

.htmlhintrc

@@ -0,0 +1,19 @@
+{
+  "attr-value-not-empty": false,
+  "attr-no-duplication": true,
+  "doctype-first": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "title-require": true,
+  "alt-require": false,
+  "doctype-html5": true,
+  "id-class-value": "dash",
+  "style-disabled": false,
+  "inline-style-disabled": false,
+  "inline-script-disabled": false,
+  "id-class-ad-disabled": false,
+  "href-abs-or-rel": false,
+  "attr-unsafe-chars": true,
+  "head-script-disabled": true
+}

.mailmap

@@ -0,0 +1,5 @@
+Anders Kaseorg <anders@zulip.com> <anders@zulipchat.com>
+Rishi Gupta <rishig@zulip.com> <rishig@zulipchat.com>
+Rishi Gupta <rishig@zulip.com> <rishig@users.noreply.github.com>
+Tim Abbott <tabbott@zulip.com> <tabbott@zulipchat.com>
+Tim Abbott <tabbott@zulip.com> <tabbott@mit.edu>

.prettierignore

@@ -0,0 +1,3 @@
+/dist
+/dist-electron
+/public/translations/*.json

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "color-named": "never",
+    "color-no-hex": true,
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {"ignoreFontFamilies": ["Material Icons"]}
+    ],
+    "selector-type-no-unknown": [true, {"ignoreTypes": ["webview"]}]
+  }
+}

.travis.yml

@@ -1,3 +0,0 @@
-language: node_js
-node_js:
-  - 'node'

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[zulip.desktopjson]
+file_filter = public/translations/<lang>.json
+minimum_perc = 0
+source_file = public/translations/en.json
+source_lang = en
+type = KEYVALUEJSON

CONTRIBUTING.md

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

ISSUE_TEMPLATE.md

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

README.md

@@ -1,63 +1,41 @@
 # Zulip Desktop Client
 
-This is an experimental replacement for the [Zulip Desktop
-app](https://github.com/zulip/zulip-desktop) implemented in
-[Electron](http://electron.atom.io/).
+[![Build Status](https://travis-ci.com/zulip/zulip-desktop.svg?branch=main)](https://travis-ci.com/github/zulip/zulip-desktop)
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=main&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/main)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
+[![project chat](https://img.shields.io/badge/zulip-join_chat-brightgreen.svg)](https://chat.zulip.org)
 
-The goal is to achieve feature-compatibility with the old desktop app
-and then start adding cool features like easy support for
-multi-account, auto-updates etc.
+Desktop client for Zulip. Available for Mac, Linux, and Windows.
 
-## Installation
+![screenshot](https://i.imgur.com/s1o6TRA.png)
+![screenshot](https://i.imgur.com/vekKnW4.png)
 
-Clone the source locally:
+# Download
 
-```sh
-$ git clone https://github.com/zulip/zulip-electron
-$ cd zulip-electron
-```
-If you're on Debian or Ubuntu, you'll also need to install
-`nodejs-legacy`:
+Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
 
-Use your package manager to install `npm`.
+# Features
 
-```sh
-$ sudo apt-get install npm nodejs-legacy
-```
+- Sign in to multiple organizations
+- Desktop notifications with inline reply
+- Tray/dock integration
+- Multi-language spell checker
+- Automatic updates
 
-Install project dependencies:
+# Reporting issues
 
-```sh
-$ npm install
-```
-Start the app:
+This desktop client shares most of its code with the Zulip webapp.
+Issues in an individual organization's Zulip window should be reported
+in the [Zulip server and webapp
+project](https://github.com/zulip/zulip/issues/new). Other
+issues in the desktop app and its settings should be reported [in this
+project](https://github.com/zulip/zulip-desktop/issues/new).
 
-```sh
-$ npm start
-```
+# Contribute
 
-Start and watch changes  
+First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html)!
+Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
 
-```sh
-$ npm run dev
-```
+# License
 
-## Features
-
-- [x] Native Notifications
-- [x] Spell Checker
-- [x] Keyboard Shortcuts
-- Default shortcuts - <kbd>cmdOrctrl + k </kbd>
-- Change Zulip Server: <kbd>cmdOrctrl + ,</kbd>
-- Back: <kbd>cmdOrctrl + [</kbd>
-- Forward: <kbd>cmdOrctrl + ]</kbd>
-- [ ] OSX/Win/Linux installer
-- [ ] Launch on OS startup
-- [ ] Automatic Updates
-
-## Contribute
-
-If you want to contribute please make sure to read [our documentation about contributing](./CONTRIBUTING.md) first.
-
-* [Issue Tracker](https://github.com/zulip/zulip-electron/issues)
-* [Source Code](https://github.com/zulip/zulip-electron/)
+Released under the [Apache-2.0](./LICENSE) license.

app/common/config-schemata.ts

@@ -0,0 +1,44 @@
+import * as z from "zod";
+
+export const dndSettingsSchemata = {
+  showNotification: z.boolean(),
+  silent: z.boolean(),
+  flashTaskbarOnMessage: z.boolean(),
+};
+
+export const configSchemata = {
+  ...dndSettingsSchemata,
+  appLanguage: z.string().nullable(),
+  autoHideMenubar: z.boolean(),
+  autoUpdate: z.boolean(),
+  badgeOption: z.boolean(),
+  betaUpdate: z.boolean(),
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  customCSS: z.string().or(z.literal(false)).nullable(),
+  dnd: z.boolean(),
+  dndPreviousSettings: z.object(dndSettingsSchemata).partial(),
+  dockBouncing: z.boolean(),
+  downloadsPath: z.string(),
+  enableSpellchecker: z.boolean(),
+  errorReporting: z.boolean(),
+  lastActiveTab: z.number(),
+  promptDownload: z.boolean(),
+  proxyBypass: z.string(),
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  proxyPAC: z.string(),
+  proxyRules: z.string(),
+  quitOnClose: z.boolean(),
+  showSidebar: z.boolean(),
+  spellcheckerLanguages: z.string().array().nullable(),
+  startAtLogin: z.boolean(),
+  startMinimized: z.boolean(),
+  trayIcon: z.boolean(),
+  useManualProxy: z.boolean(),
+  useProxy: z.boolean(),
+  useSystemProxy: z.boolean(),
+};
+
+export const enterpriseConfigSchemata = {
+  ...configSchemata,
+  presetOrganizations: z.string().array(),
+};

app/common/config-util.ts

@@ -0,0 +1,100 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import * as Sentry from "@sentry/electron";
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+import type * as z from "zod";
+import {app, dialog} from "zulip:remote";
+
+import {configSchemata} from "./config-schemata.js";
+import * as EnterpriseUtil from "./enterprise-util.js";
+import Logger from "./logger-util.js";
+
+export type Config = {
+  [Key in keyof typeof configSchemata]: z.output<(typeof configSchemata)[Key]>;
+};
+
+const logger = new Logger({
+  file: "config-util.log",
+});
+
+let db: JsonDB;
+
+reloadDb();
+
+export function getConfigItem<Key extends keyof Config>(
+  key: Key,
+  defaultValue: Config[Key],
+): z.output<(typeof configSchemata)[Key]> {
+  try {
+    db.reload();
+  } catch (error: unknown) {
+    logger.error("Error while reloading settings.json: ");
+    logger.error(error);
+  }
+
+  try {
+    return configSchemata[key].parse(db.getObject<unknown>(`/${key}`));
+  } catch (error: unknown) {
+    if (!(error instanceof DataError)) throw error;
+    setConfigItem(key, defaultValue);
+    return defaultValue;
+  }
+}
+
+// This function returns whether a key exists in the configuration file (settings.json)
+export function isConfigItemExists(key: string): boolean {
+  try {
+    db.reload();
+  } catch (error: unknown) {
+    logger.error("Error while reloading settings.json: ");
+    logger.error(error);
+  }
+
+  return db.exists(`/${key}`);
+}
+
+export function setConfigItem<Key extends keyof Config>(
+  key: Key,
+  value: Config[Key],
+  override?: boolean,
+): void {
+  if (EnterpriseUtil.configItemExists(key) && !override) {
+    // If item is in global config and we're not trying to override
+    return;
+  }
+
+  configSchemata[key].parse(value);
+  db.push(`/${key}`, value, true);
+  db.save();
+}
+
+export function removeConfigItem(key: string): void {
+  db.delete(`/${key}`);
+  db.save();
+}
+
+function reloadDb(): void {
+  const settingsJsonPath = path.join(
+    app.getPath("userData"),
+    "/config/settings.json",
+  );
+  try {
+    const file = fs.readFileSync(settingsJsonPath, "utf8");
+    JSON.parse(file);
+  } catch (error: unknown) {
+    if (fs.existsSync(settingsJsonPath)) {
+      fs.unlinkSync(settingsJsonPath);
+      dialog.showErrorBox(
+        "Error saving settings",
+        "We encountered an error while saving the settings.",
+      );
+      logger.error("Error while JSON parsing settings.json: ");
+      logger.error(error);
+      Sentry.captureException(error);
+    }
+  }
+
+  db = new JsonDB(settingsJsonPath, true, true);
+}

app/common/default-util.ts

@@ -0,0 +1,61 @@
+import fs from "node:fs";
+
+import {app} from "zulip:remote";
+
+let setupCompleted = false;
+
+const zulipDir = app.getPath("userData");
+const logDir = `${zulipDir}/Logs/`;
+const configDir = `${zulipDir}/config/`;
+export const initSetUp = (): void => {
+  // 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);
+    }
+
+    // Migrate config files from app data folder to config folder inside app
+    // data folder. This will be done once when a user updates to the new version.
+    if (!fs.existsSync(configDir)) {
+      fs.mkdirSync(configDir);
+      const domainJson = `${zulipDir}/domain.json`;
+      const settingsJson = `${zulipDir}/settings.json`;
+      const updatesJson = `${zulipDir}/updates.json`;
+      const windowStateJson = `${zulipDir}/window-state.json`;
+      const configData = [
+        {
+          path: domainJson,
+          fileName: "domain.json",
+        },
+        {
+          path: settingsJson,
+          fileName: "settings.json",
+        },
+        {
+          path: updatesJson,
+          fileName: "updates.json",
+        },
+      ];
+      for (const data of configData) {
+        if (fs.existsSync(data.path)) {
+          fs.copyFileSync(data.path, configDir + data.fileName);
+          fs.unlinkSync(data.path);
+        }
+      }
+
+      // `window-state.json` is only deleted not moved, as the electron-window-state
+      // package will recreate the file in the config folder.
+      if (fs.existsSync(windowStateJson)) {
+        fs.unlinkSync(windowStateJson);
+      }
+    }
+
+    setupCompleted = true;
+  }
+};

app/common/dnd-util.ts

@@ -0,0 +1,60 @@
+import process from "node:process";
+
+import type * as z from "zod";
+
+import type {dndSettingsSchemata} from "./config-schemata.js";
+import * as ConfigUtil from "./config-util.js";
+
+export type DndSettings = {
+  [Key in keyof typeof dndSettingsSchemata]: z.output<
+    (typeof dndSettingsSchemata)[Key]
+  >;
+};
+
+type SettingName = keyof DndSettings;
+
+type Toggle = {
+  dnd: boolean;
+  newSettings: Partial<DndSettings>;
+};
+
+export function toggle(): Toggle {
+  const dnd = !ConfigUtil.getConfigItem("dnd", false);
+  const dndSettingList: SettingName[] = ["showNotification", "silent"];
+  if (process.platform === "win32") {
+    dndSettingList.push("flashTaskbarOnMessage");
+  }
+
+  let newSettings: Partial<DndSettings>;
+  if (dnd) {
+    const oldSettings: Partial<DndSettings> = {};
+    newSettings = {};
+
+    // Iterate through the dndSettingList.
+    for (const settingName of dndSettingList) {
+      // Store the current value of setting.
+      oldSettings[settingName] = ConfigUtil.getConfigItem(
+        settingName,
+        settingName !== "silent",
+      );
+      // New value of setting.
+      newSettings[settingName] = settingName === "silent";
+    }
+
+    // Store old value in oldSettings.
+    ConfigUtil.setConfigItem("dndPreviousSettings", oldSettings);
+  } else {
+    newSettings = ConfigUtil.getConfigItem("dndPreviousSettings", {
+      showNotification: true,
+      silent: false,
+      ...(process.platform === "win32" && {flashTaskbarOnMessage: true}),
+    });
+  }
+
+  for (const settingName of dndSettingList) {
+    ConfigUtil.setConfigItem(settingName, newSettings[settingName]!);
+  }
+
+  ConfigUtil.setConfigItem("dnd", dnd);
+  return {dnd, newSettings};
+}

app/common/enterprise-util.ts

@@ -0,0 +1,94 @@
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+import * as z from "zod";
+
+import {enterpriseConfigSchemata} from "./config-schemata.js";
+import Logger from "./logger-util.js";
+
+type EnterpriseConfig = {
+  [Key in keyof typeof enterpriseConfigSchemata]: z.output<
+    (typeof enterpriseConfigSchemata)[Key]
+  >;
+};
+
+const logger = new Logger({
+  file: "enterprise-util.log",
+});
+
+let enterpriseSettings: Partial<EnterpriseConfig>;
+let configFile: boolean;
+
+reloadDb();
+
+function reloadDb(): void {
+  let enterpriseFile = "/etc/zulip-desktop-config/global_config.json";
+  if (process.platform === "win32") {
+    enterpriseFile =
+      "C:\\Program Files\\Zulip-Desktop-Config\\global_config.json";
+  }
+
+  enterpriseFile = path.resolve(enterpriseFile);
+  if (fs.existsSync(enterpriseFile)) {
+    configFile = true;
+    try {
+      const file = fs.readFileSync(enterpriseFile, "utf8");
+      const data: unknown = JSON.parse(file);
+      enterpriseSettings = z
+        .object(enterpriseConfigSchemata)
+        .partial()
+        .parse(data);
+    } catch (error: unknown) {
+      logger.log("Error while JSON parsing global_config.json: ");
+      logger.log(error);
+    }
+  } else {
+    configFile = false;
+  }
+}
+
+export function hasConfigFile(): boolean {
+  return configFile;
+}
+
+export function getConfigItem<Key extends keyof EnterpriseConfig>(
+  key: Key,
+  defaultValue: EnterpriseConfig[Key],
+): EnterpriseConfig[Key] {
+  reloadDb();
+  if (!configFile) {
+    return defaultValue;
+  }
+
+  const value = enterpriseSettings[key];
+  return value === undefined ? defaultValue : (value as EnterpriseConfig[Key]);
+}
+
+export function configItemExists(key: keyof EnterpriseConfig): boolean {
+  reloadDb();
+  if (!configFile) {
+    return false;
+  }
+
+  return enterpriseSettings[key] !== undefined;
+}
+
+export function isPresetOrg(url: string): boolean {
+  if (!configFile || !configItemExists("presetOrganizations")) {
+    return false;
+  }
+
+  const presetOrgs = enterpriseSettings.presetOrganizations;
+  if (!Array.isArray(presetOrgs)) {
+    throw new TypeError("Expected array for presetOrgs");
+  }
+
+  for (const org of presetOrgs) {
+    if (url.includes(org)) {
+      return true;
+    }
+  }
+
+  return false;
+}

app/common/html.ts

@@ -0,0 +1,26 @@
+import {htmlEscape} from "escape-goat";
+
+export class Html {
+  html: string;
+
+  constructor({html}: {html: string}) {
+    this.html = html;
+  }
+
+  join(htmls: readonly Html[]): Html {
+    return new Html({html: htmls.map((html) => html.html).join(this.html)});
+  }
+}
+
+export function html(
+  template: TemplateStringsArray,
+  ...values: unknown[]
+): Html {
+  let html = template[0];
+  for (const [index, value] of values.entries()) {
+    html += value instanceof Html ? value.html : htmlEscape(String(value));
+    html += template[index + 1];
+  }
+
+  return new Html({html});
+}

app/common/link-util.ts

@@ -0,0 +1,43 @@
+import {shell} from "electron/common";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+import {html} from "./html.js";
+
+export async function openBrowser(url: URL): Promise<void> {
+  if (["http:", "https:", "mailto:"].includes(url.protocol)) {
+    await shell.openExternal(url.href);
+  } else {
+    // For security, indirect links to non-whitelisted protocols
+    // through a real web browser via a local HTML file.
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
+    const file = path.join(dir, "redirect.html");
+    fs.writeFileSync(
+      file,
+      html`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="UTF-8" />
+            <meta http-equiv="Refresh" content="0; url=${url.href}" />
+            <title>Redirecting</title>
+            <style>
+              html {
+                font-family: menu, "Helvetica Neue", sans-serif;
+              }
+            </style>
+          </head>
+          <body>
+            <p>Opening <a href="${url.href}">${url.href}</a>…</p>
+          </body>
+        </html>
+      `.html,
+    );
+    await shell.openPath(file);
+    setTimeout(() => {
+      fs.unlinkSync(file);
+      fs.rmdirSync(dir);
+    }, 15_000);
+  }
+}

app/common/logger-util.ts

@@ -0,0 +1,90 @@
+import {Console} from "node:console"; // eslint-disable-line n/prefer-global/console
+import fs from "node:fs";
+import os from "node:os";
+import process from "node:process";
+
+import {app} from "zulip:remote";
+
+import {initSetUp} from "./default-util.js";
+
+type LoggerOptions = {
+  file?: string;
+};
+
+initSetUp();
+
+const logDir = `${app.getPath("userData")}/Logs`;
+
+type Level = "log" | "debug" | "info" | "warn" | "error";
+
+export default class Logger {
+  nodeConsole: Console;
+
+  constructor(options: LoggerOptions = {}) {
+    let {file = "console.log"} = options;
+
+    file = `${logDir}/${file}`;
+
+    // Trim log according to type of process
+    if (process.type === "renderer") {
+      requestIdleCallback(async () => this.trimLog(file));
+    } else {
+      process.nextTick(async () => this.trimLog(file));
+    }
+
+    const fileStream = fs.createWriteStream(file, {flags: "a"});
+    const nodeConsole = new Console(fileStream);
+
+    this.nodeConsole = nodeConsole;
+  }
+
+  _log(type: Level, ...args: unknown[]): void {
+    args.unshift(this.getTimestamp() + " |\t");
+    args.unshift(type.toUpperCase() + " |");
+    this.nodeConsole[type](...args);
+    console[type](...args);
+  }
+
+  log(...args: unknown[]): void {
+    this._log("log", ...args);
+  }
+
+  debug(...args: unknown[]): void {
+    this._log("debug", ...args);
+  }
+
+  info(...args: unknown[]): void {
+    this._log("info", ...args);
+  }
+
+  warn(...args: unknown[]): void {
+    this._log("warn", ...args);
+  }
+
+  error(...args: unknown[]): void {
+    this._log("error", ...args);
+  }
+
+  getTimestamp(): string {
+    const date = new Date();
+    const timestamp =
+      `${date.getMonth()}/${date.getDate()} ` +
+      `${date.getMinutes()}:${date.getSeconds()}`;
+    return timestamp;
+  }
+
+  async trimLog(file: string): Promise<void> {
+    const data = await fs.promises.readFile(file, "utf8");
+
+    const maxLogFileLines = 500;
+    const logs = data.split(os.EOL);
+    const logLength = logs.length - 1;
+
+    // Keep bottom maxLogFileLines of each log instance
+    if (logLength > maxLogFileLines) {
+      const trimmedLogs = logs.slice(logLength - maxLogFileLines);
+      const toWrite = trimmedLogs.join(os.EOL);
+      await fs.promises.writeFile(file, toWrite);
+    }
+  }
+}

app/common/messages.ts

@@ -0,0 +1,38 @@
+type DialogBoxError = {
+  title: string;
+  content: string;
+};
+
+export function invalidZulipServerError(domain: string): string {
+  return `${domain} does not appear to be a valid Zulip server. Make sure that
+ • You can connect to that URL in a web browser.
+ • If you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings.
+ • It's a Zulip server. (The oldest supported version is 1.6).
+ • The server has a valid certificate.
+ • The SSL is correctly configured for the certificate. Check out the SSL troubleshooting guide -
+ https://zulip.readthedocs.io/en/stable/production/ssl-certificates.html`;
+}
+
+export function enterpriseOrgError(
+  length: number,
+  domains: string[],
+): DialogBoxError {
+  let domainList = "";
+  for (const domain of domains) {
+    domainList += `• ${domain}\n`;
+  }
+
+  return {
+    title: `Could not add the following ${
+      length === 1 ? "organization" : "organizations"
+    }`,
+    content: `${domainList}\nPlease contact your system administrator.`,
+  };
+}
+
+export function orgRemovalError(url: string): DialogBoxError {
+  return {
+    title: `Removing ${url} is a restricted operation.`,
+    content: "Please contact your system administrator.",
+  };
+}

app/common/paths.ts

@@ -0,0 +1,15 @@
+import path from "node:path";
+import process from "node:process";
+import url from "node:url";
+
+export const bundlePath = __dirname;
+
+export const publicPath = import.meta.env.DEV
+  ? path.join(bundlePath, "../public")
+  : bundlePath;
+
+export const bundleUrl = import.meta.env.DEV
+  ? process.env.VITE_DEV_SERVER_URL
+  : url.pathToFileURL(__dirname).href + "/";
+
+export const publicUrl = bundleUrl;

app/common/translation-util.ts

@@ -0,0 +1,19 @@
+import path from "node:path";
+
+import i18n from "i18n";
+
+import * as ConfigUtil from "./config-util.js";
+import {publicPath} from "./paths.js";
+
+i18n.configure({
+  directory: path.join(publicPath, "translations/"),
+  updateFiles: false,
+});
+
+/* Fetches the current appLocale from settings.json */
+const appLocale = ConfigUtil.getConfigItem("appLanguage", "en");
+
+/* If no locale present in the json, en is set default */
+export function __(phrase: string): string {
+  return i18n.__({phrase, locale: appLocale ?? "en"});
+}

app/common/typed-ipc.ts

@@ -0,0 +1,85 @@
+import type {DndSettings} from "./dnd-util.js";
+import type {MenuProps, ServerConf} from "./types.js";
+
+export type MainMessage = {
+  "clear-app-settings": () => void;
+  "configure-spell-checker": () => void;
+  "fetch-user-agent": () => string;
+  "focus-app": () => void;
+  "focus-this-webview": () => void;
+  "get-injected-js": () => string;
+  "new-clipboard-key": () => {key: Uint8Array; sig: Uint8Array};
+  "permission-callback": (permissionCallbackId: number, grant: boolean) => void;
+  "quit-app": () => void;
+  "realm-icon-changed": (serverURL: string, iconURL: string) => void;
+  "realm-name-changed": (serverURL: string, realmName: string) => void;
+  "reload-full-app": () => void;
+  "save-last-tab": (index: number) => void;
+  "switch-server-tab": (index: number) => void;
+  "toggle-app": () => void;
+  "toggle-badge-option": (newValue: boolean) => void;
+  "toggle-menubar": (showMenubar: boolean) => void;
+  toggleAutoLauncher: (AutoLaunchValue: boolean) => void;
+  "unread-count": (unreadCount: number) => void;
+  "update-badge": (messageCount: number) => void;
+  "update-menu": (props: MenuProps) => void;
+  "update-taskbar-icon": (data: string, text: string) => void;
+};
+
+export type MainCall = {
+  "get-server-settings": (domain: string) => ServerConf;
+  "is-online": (url: string) => boolean;
+  "poll-clipboard": (key: Uint8Array, sig: Uint8Array) => string | undefined;
+  "save-server-icon": (iconURL: string) => string;
+};
+
+export type RendererMessage = {
+  back: () => void;
+  "copy-zulip-url": () => void;
+  destroytray: () => void;
+  "enter-fullscreen": () => void;
+  focus: () => void;
+  "focus-webview-with-id": (webviewId: number) => void;
+  forward: () => void;
+  "hard-reload": () => void;
+  "leave-fullscreen": () => void;
+  "log-out": () => void;
+  logout: () => void;
+  "new-server": () => void;
+  "open-about": () => void;
+  "open-help": () => void;
+  "open-network-settings": () => void;
+  "open-org-tab": () => void;
+  "open-settings": () => void;
+  "permission-request": (
+    options: {webContentsId: number | null; origin: string; permission: string},
+    rendererCallbackId: number,
+  ) => void;
+  "play-ding-sound": () => void;
+  "reload-current-viewer": () => void;
+  "reload-proxy": (showAlert: boolean) => void;
+  "reload-viewer": () => void;
+  "render-taskbar-icon": (messageCount: number) => void;
+  "set-active": () => void;
+  "set-idle": () => void;
+  "show-keyboard-shortcuts": () => void;
+  "show-notification-settings": () => void;
+  "switch-server-tab": (index: number) => void;
+  "tab-devtools": () => void;
+  "toggle-autohide-menubar": (
+    autoHideMenubar: boolean,
+    updateMenu: boolean,
+  ) => void;
+  "toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
+  "toggle-sidebar": (show: boolean) => void;
+  "toggle-silent": (state: boolean) => void;
+  "toggle-tray": (state: boolean) => void;
+  toggletray: () => void;
+  tray: (arg: number) => void;
+  "update-realm-icon": (serverURL: string, iconURL: string) => void;
+  "update-realm-name": (serveRURL: string, realmName: string) => void;
+  "webview-reload": () => void;
+  zoomActualSize: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+};

app/common/types.ts

@@ -0,0 +1,26 @@
+export type MenuProps = {
+  tabs: TabData[];
+  activeTabIndex?: number;
+  enableMenu?: boolean;
+};
+
+export type NavItem =
+  | "General"
+  | "Network"
+  | "AddServer"
+  | "Organizations"
+  | "Shortcuts";
+
+export type ServerConf = {
+  url: string;
+  alias: string;
+  icon: string;
+};
+
+export type TabRole = "server" | "function";
+
+export type TabData = {
+  role: TabRole;
+  name: string;
+  index: number;
+};

app/main/autoupdater.ts

@@ -0,0 +1,119 @@
+import {shell} from "electron/common";
+import {app, dialog, session} from "electron/main";
+import process from "node:process";
+
+import log from "electron-log";
+import type {UpdateDownloadedEvent, UpdateInfo} from "electron-updater";
+import {autoUpdater} from "electron-updater";
+
+import * as ConfigUtil from "../common/config-util.js";
+
+import {linuxUpdateNotification} from "./linuxupdater.js"; // Required only in case of linux
+
+let quitting = false;
+
+export function shouldQuitForUpdate(): boolean {
+  return quitting;
+}
+
+export async function appUpdater(updateFromMenu = false): Promise<void> {
+  // Don't initiate auto-updates in development
+  if (!app.isPackaged) {
+    return;
+  }
+
+  if (process.platform === "linux" && !process.env.APPIMAGE) {
+    const ses = session.fromPartition("persist:webviewsession");
+    await linuxUpdateNotification(ses);
+    return;
+  }
+
+  let updateAvailable = false;
+
+  // Log whats happening
+  log.transports.file.fileName = "updates.log";
+  log.transports.file.level = "info";
+  autoUpdater.logger = log;
+
+  // Handle auto updates for beta/pre releases
+  const isBetaUpdate = ConfigUtil.getConfigItem("betaUpdate", false);
+
+  autoUpdater.allowPrerelease = isBetaUpdate;
+
+  const eventsListenerRemove = [
+    "update-available",
+    "update-not-available",
+  ] as const;
+  autoUpdater.on("update-available", async (info: UpdateInfo) => {
+    if (updateFromMenu) {
+      updateAvailable = true;
+
+      // This is to prevent removal of 'update-downloaded' and 'error' event listener.
+      for (const event of eventsListenerRemove) {
+        autoUpdater.removeAllListeners(event);
+      }
+
+      await dialog.showMessageBox({
+        message: `A new version ${info.version}, of Zulip Desktop is available`,
+        detail:
+          "The update will be downloaded in the background. You will be notified when it is ready to be installed.",
+      });
+    }
+  });
+
+  autoUpdater.on("update-not-available", async () => {
+    if (updateFromMenu) {
+      // Remove all autoUpdator listeners so that next time autoUpdator is manually called these
+      // listeners don't trigger multiple times.
+      autoUpdater.removeAllListeners();
+
+      await dialog.showMessageBox({
+        message: "No updates available",
+        detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`,
+      });
+    }
+  });
+
+  autoUpdater.on("error", async (error: Error) => {
+    if (updateFromMenu) {
+      // Remove all autoUpdator listeners so that next time autoUpdator is manually called these
+      // listeners don't trigger multiple times.
+      autoUpdater.removeAllListeners();
+
+      const messageText = updateAvailable
+        ? "Unable to download the updates"
+        : "Unable to check for updates";
+      const {response} = await dialog.showMessageBox({
+        type: "error",
+        buttons: ["Manual Download", "Cancel"],
+        message: messageText,
+        detail: `Error: ${error.message}
+
+The latest version of Zulip Desktop is available at -
+https://zulip.com/apps/.
+Current Version: ${app.getVersion()}`,
+      });
+      if (response === 0) {
+        await shell.openExternal("https://zulip.com/apps/");
+      }
+    }
+  });
+
+  // Ask the user if update is available
+  autoUpdater.on("update-downloaded", async (event: UpdateDownloadedEvent) => {
+    // Ask user to update the app
+    const {response} = await dialog.showMessageBox({
+      type: "question",
+      buttons: ["Install and Relaunch", "Install Later"],
+      defaultId: 0,
+      message: `A new update ${event.version} has been downloaded`,
+      detail: "It will be installed the next time you restart the application",
+    });
+    if (response === 0) {
+      quitting = true;
+      autoUpdater.quitAndInstall();
+    }
+  });
+  // Init for updates
+  await autoUpdater.checkForUpdates();
+}

app/main/badge-settings.ts

@@ -0,0 +1,61 @@
+import {nativeImage} from "electron/common";
+import type {BrowserWindow} from "electron/main";
+import {app} from "electron/main";
+import process from "node:process";
+
+import * as ConfigUtil from "../common/config-util.js";
+
+import {send} from "./typed-ipc-main.js";
+
+function showBadgeCount(messageCount: number, mainWindow: BrowserWindow): void {
+  if (process.platform === "win32") {
+    updateOverlayIcon(messageCount, mainWindow);
+  } else {
+    app.badgeCount = messageCount;
+  }
+}
+
+function hideBadgeCount(mainWindow: BrowserWindow): void {
+  if (process.platform === "win32") {
+    mainWindow.setOverlayIcon(null, "");
+  } else {
+    app.badgeCount = 0;
+  }
+}
+
+export function updateBadge(
+  badgeCount: number,
+  mainWindow: BrowserWindow,
+): void {
+  if (ConfigUtil.getConfigItem("badgeOption", true)) {
+    showBadgeCount(badgeCount, mainWindow);
+  } else {
+    hideBadgeCount(mainWindow);
+  }
+}
+
+function updateOverlayIcon(
+  messageCount: number,
+  mainWindow: BrowserWindow,
+): void {
+  if (!mainWindow.isFocused()) {
+    mainWindow.flashFrame(
+      ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
+    );
+  }
+
+  if (messageCount === 0) {
+    mainWindow.setOverlayIcon(null, "");
+  } else {
+    send(mainWindow.webContents, "render-taskbar-icon", messageCount);
+  }
+}
+
+export function updateTaskbarIcon(
+  data: string,
+  text: string,
+  mainWindow: BrowserWindow,
+): void {
+  const img = nativeImage.createFromDataURL(data);
+  mainWindow.setOverlayIcon(img, text);
+}

app/main/handle-external-link.ts

@@ -0,0 +1,163 @@
+import {shell} from "electron/common";
+import type {
+  HandlerDetails,
+  SaveDialogOptions,
+  WebContents,
+} from "electron/main";
+import {Notification, app} from "electron/main";
+import fs from "node:fs";
+import path from "node:path";
+
+import * as ConfigUtil from "../common/config-util.js";
+import * as LinkUtil from "../common/link-util.js";
+
+import {send} from "./typed-ipc-main.js";
+
+function isUploadsUrl(server: string, url: URL): boolean {
+  return url.origin === server && url.pathname.startsWith("/user_uploads/");
+}
+
+function downloadFile({
+  contents,
+  url,
+  downloadPath,
+  completed,
+  failed,
+}: {
+  contents: WebContents;
+  url: string;
+  downloadPath: string;
+  completed(filePath: string, fileName: string): Promise<void>;
+  failed(state: string): void;
+}) {
+  contents.downloadURL(url);
+  contents.session.once("will-download", async (_event: Event, item) => {
+    if (ConfigUtil.getConfigItem("promptDownload", false)) {
+      const showDialogOptions: SaveDialogOptions = {
+        defaultPath: path.join(downloadPath, item.getFilename()),
+      };
+      item.setSaveDialogOptions(showDialogOptions);
+    } else {
+      const getTimeStamp = (): number => {
+        const date = new Date();
+        return date.getTime();
+      };
+
+      const formatFile = (filePath: string): string => {
+        const fileExtension = path.extname(filePath);
+        const baseName = path.basename(filePath, fileExtension);
+        return `${baseName}-${getTimeStamp()}${fileExtension}`;
+      };
+
+      const filePath = path.join(downloadPath, item.getFilename());
+
+      // Update the name and path of the file if it already exists
+      const updatedFilePath = path.join(downloadPath, formatFile(filePath));
+      const setFilePath: string = fs.existsSync(filePath)
+        ? updatedFilePath
+        : filePath;
+      item.setSavePath(setFilePath);
+    }
+
+    const updatedListener = (_event: Event, state: string): void => {
+      switch (state) {
+        case "interrupted": {
+          // Can interrupted to due to network error, cancel download then
+          console.log(
+            "Download interrupted, cancelling and fallback to dialog download.",
+          );
+          item.cancel();
+          break;
+        }
+
+        case "progressing": {
+          if (item.isPaused()) {
+            item.cancel();
+          }
+
+          // This event can also be used to show progress in percentage in future.
+          break;
+        }
+
+        default: {
+          console.info("Unknown updated state of download item");
+        }
+      }
+    };
+
+    item.on("updated", updatedListener);
+    item.once("done", async (_event: Event, state) => {
+      if (state === "completed") {
+        await completed(item.getSavePath(), path.basename(item.getSavePath()));
+      } else {
+        console.log("Download failed state:", state);
+        failed(state);
+      }
+
+      // To stop item for listening to updated events of this file
+      item.removeListener("updated", updatedListener);
+    });
+  });
+}
+
+export default function handleExternalLink(
+  contents: WebContents,
+  details: HandlerDetails,
+  mainContents: WebContents,
+): void {
+  let url: URL;
+  try {
+    url = new URL(details.url);
+  } catch {
+    return;
+  }
+
+  const downloadPath = ConfigUtil.getConfigItem(
+    "downloadsPath",
+    `${app.getPath("downloads")}`,
+  );
+
+  if (isUploadsUrl(new URL(contents.getURL()).origin, url)) {
+    downloadFile({
+      contents,
+      url: url.href,
+      downloadPath,
+      async completed(filePath: string, fileName: string) {
+        const downloadNotification = new Notification({
+          title: "Download Complete",
+          body: `Click to show ${fileName} in folder`,
+          silent: true, // We'll play our own sound - ding.ogg
+        });
+        downloadNotification.on("click", () => {
+          // Reveal file in download folder
+          shell.showItemInFolder(filePath);
+        });
+        downloadNotification.show();
+
+        // Play sound to indicate download complete
+        if (!ConfigUtil.getConfigItem("silent", false)) {
+          send(mainContents, "play-ding-sound");
+        }
+      },
+      failed(state: string) {
+        // Automatic download failed, so show save dialog prompt and download
+        // through webview
+        // Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
+        // prompts right after each other)
+        // Check that the download is not cancelled by user
+        if (state !== "cancelled") {
+          if (ConfigUtil.getConfigItem("promptDownload", false)) {
+            new Notification({
+              title: "Download Complete",
+              body: "Download failed",
+            }).show();
+          } else {
+            contents.downloadURL(url.href);
+          }
+        }
+      },
+    });
+  } else {
+    (async () => LinkUtil.openBrowser(url))();
+  }
+}

app/main/index.js

@@ -1,215 +0,0 @@
-'use strict';
-const path = require('path');
-const electron = require('electron');
-const {app} = require('electron');
-const electronLocalshortcut = require('electron-localshortcut');
-const ipc = require('electron').ipcMain;
-const Configstore = require('configstore');
-const JsonDB = require('node-json-db');
-const SpellChecker = require('simple-spellchecker');
-const tray = require('./tray');
-const appMenu = require('./menu');
-const link = require('./link-helper');
-
-const {linkIsInternal} = link;
-
-const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-const data = db.getData('/');
-
-// adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
-require('electron-context-menu')();
-
-const conf = new Configstore('Zulip-Desktop');
-
-// spellchecker enabled
-let myDictionary = null;
-
-// prevent window being garbage collected
-let mainWindow;
-let targetLink;
-
-// Load this url in main window
-const targetUrl = 'file://' + path.join(__dirname, '../renderer', 'index.html');
-
-function checkWindowURL() {
-	if (data.domain !== undefined) {
-		return data.domain;
-	}
-	return targetLink;
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const spellDict = path.join(__dirname, '../../node_modules/simple-spellchecker/dict');
-
-const iconPath = () => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-function onClosed() {
-	// dereference the window
-	// for multiple windows store them in an array
-	mainWindow = null;
-}
-
-function updateDockBadge(title) {
-	if (title.indexOf('Zulip') === -1) {
-		return;
-	}
-
-	let messageCount = (/\(([0-9]+)\)/).exec(title);
-	messageCount = messageCount ? Number(messageCount[1]) : 0;
-
-	if (process.platform === 'darwin') {
-		app.setBadgeCount(messageCount);
-	}
-}
-
-function createMainWindow() {
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		width: conf.get('width') || 1000,
-		height: conf.get('height') || 600,
-		icon: iconPath(),
-		minWidth: 600,
-		minHeight: 400,
-		webPreferences: {
-			preload: path.join(__dirname, 'preload.js'),
-			nodeIntegration: true,
-			plugins: true
-		}
-	});
-
-	win.loadURL(targetUrl);
-	win.on('closed', onClosed);
-	win.setTitle('Zulip');
-
-	// Let's save browser window position
-	if (conf.get('x') || conf.get('y')) {
-		win.setPosition(conf.get('x'), conf.get('y'));
-	}
-
-	if (conf.get('maximize')) {
-		win.maximize();
-	}
-
-	// Handle sizing events so we can persist them.
-	win.on('maximize', () => {
-		conf.set('maximize', true);
-	});
-
-	win.on('unmaximize', () => {
-		conf.set('maximize', false);
-	});
-
-	win.on('resize', function () {
-		const size = this.getSize();
-		conf.set({
-			width: size[0],
-			height: size[1]
-		});
-	});
-
-	// on osx it's 'moved'
-	win.on('move', function () {
-		const pos = this.getPosition();
-		conf.set({
-			x: pos[0],
-			y: pos[1]
-		});
-	});
-
-	// stop page to update it's title
-	win.on('page-title-updated', (e, title) => {
-		e.preventDefault();
-		updateDockBadge(title);
-	});
-
-	return win;
-}
-
-// TODO - fix certificate errors
-app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
-
-app.on('window-all-closed', () => {
-	if (process.platform !== 'darwin') {
-		app.quit();
-	}
-});
-
-app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-	}
-});
-
-app.on('ready', () => {
-	electron.Menu.setApplicationMenu(appMenu);
-	mainWindow = createMainWindow();
-	tray.create(mainWindow);
-
-	const page = mainWindow.webContents;
-
-	// Add spellcheck dictionary
-	SpellChecker.getDictionary('en-US', spellDict, (err, result) => {
-		if (!err) {
-			myDictionary = result;
-		}
-	});
-
-	// Define function for consult the dictionary.
-	ipc.on('checkspell', (event, word) => {
-		if (myDictionary !== null && word !== null) {
-			event.returnValue = myDictionary.spellCheck(word);
-		}
-	});
-
-	// TODO - use global shortcut instead
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		mainWindow.reload();
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		if (page.canGoBack()) {
-			page.goBack();
-		}
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		if (page.canGoForward()) {
-			page.goForward();
-		}
-	});
-
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+=', () => {
-	// 	page.send('zoomIn');
-	// });
-
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+-', () => {
-	// 	page.send('zoomOut');
-	// });
-
-	// electronLocalshortcut.register(mainWindow, 'CommandOrControl+0', () => {
-	// 	page.send('zoomActualSize');
-	// });
-
-	page.on('new-window', (event, url) => {
-		if (mainWindow.useDefaultWindowBehaviour) {
-			mainWindow.useDefaultWindowBehaviour = false;
-			return;
-		}
-		if (linkIsInternal(checkWindowURL(), url)) {
-			event.preventDefault();
-			return mainWindow.loadURL(url);
-		}
-		event.preventDefault();
-		electron.shell.openExternal(url);
-	});
-});
-
-ipc.on('new-domain', (e, domain) => {
-	mainWindow.loadURL(domain);
-	targetLink = domain;
-});

app/main/index.ts

@@ -0,0 +1,462 @@
+import {clipboard} from "electron/common";
+import type {IpcMainEvent, WebContents} from "electron/main";
+import {BrowserWindow, app, dialog, powerMonitor, session} from "electron/main";
+import {Buffer} from "node:buffer";
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+import * as remoteMain from "@electron/remote/main";
+import windowStateKeeper from "electron-window-state";
+
+import * as ConfigUtil from "../common/config-util.js";
+import {bundlePath, bundleUrl, publicPath} from "../common/paths.js";
+import type {RendererMessage} from "../common/typed-ipc.js";
+import type {MenuProps} from "../common/types.js";
+
+import {appUpdater, shouldQuitForUpdate} from "./autoupdater.js";
+import * as BadgeSettings from "./badge-settings.js";
+import handleExternalLink from "./handle-external-link.js";
+import * as AppMenu from "./menu.js";
+import {_getServerSettings, _isOnline, _saveServerIcon} from "./request.js";
+import {sentryInit} from "./sentry.js";
+import {setAutoLaunch} from "./startup.js";
+import {ipcMain, send} from "./typed-ipc-main.js";
+
+import "gatemaker/electron-setup"; // eslint-disable-line import/no-unassigned-import
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const {GDK_BACKEND} = process.env;
+
+// Initialize sentry for main process
+sentryInit();
+
+let mainWindowState: windowStateKeeper.State;
+
+// Prevent window being garbage collected
+let mainWindow: BrowserWindow;
+let badgeCount: number;
+
+let isQuitting = false;
+
+// Load this file in main window
+const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
+
+const permissionCallbacks = new Map<number, (grant: boolean) => void>();
+let nextPermissionCallbackId = 0;
+
+const appIcon = path.join(publicPath, "resources/Icon");
+
+const iconPath = (): string =>
+  appIcon + (process.platform === "win32" ? ".ico" : ".png");
+
+// Toggle the app window
+const toggleApp = (): void => {
+  if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+    mainWindow.show();
+  } else {
+    mainWindow.hide();
+  }
+};
+
+function createMainWindow(): BrowserWindow {
+  // Load the previous state with fallback to defaults
+  mainWindowState = windowStateKeeper({
+    defaultWidth: 1100,
+    defaultHeight: 720,
+    path: `${app.getPath("userData")}/config`,
+  });
+
+  const win = new BrowserWindow({
+    // This settings needs to be saved in config
+    title: "Zulip",
+    icon: iconPath(),
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    minWidth: 500,
+    minHeight: 400,
+    webPreferences: {
+      preload: path.join(bundlePath, "renderer.js"),
+      sandbox: false,
+      webviewTag: true,
+    },
+    show: false,
+  });
+  remoteMain.enable(win.webContents);
+
+  win.on("focus", () => {
+    send(win.webContents, "focus");
+  });
+
+  (async () => win.loadURL(mainUrl))();
+
+  // Keep the app running in background on close event
+  win.on("close", (event) => {
+    if (ConfigUtil.getConfigItem("quitOnClose", false)) {
+      app.quit();
+    }
+
+    if (!isQuitting && !shouldQuitForUpdate()) {
+      event.preventDefault();
+
+      if (process.platform === "darwin") {
+        app.hide();
+      } else {
+        win.hide();
+      }
+    }
+  });
+
+  win.setTitle("Zulip");
+
+  win.on("enter-full-screen", () => {
+    send(win.webContents, "enter-fullscreen");
+  });
+
+  win.on("leave-full-screen", () => {
+    send(win.webContents, "leave-fullscreen");
+  });
+
+  //  To destroy tray icon when navigate to a new URL
+  win.webContents.on("will-navigate", (event) => {
+    if (event) {
+      send(win.webContents, "destroytray");
+    }
+  });
+
+  // Let us register listeners on the window, so we can update the state
+  // automatically (the listeners will be removed when the window is closed)
+  // and restore the maximized or full screen state
+  mainWindowState.manage(win);
+
+  return win;
+}
+
+(async () => {
+  if (!app.requestSingleInstanceLock()) {
+    app.quit();
+    return;
+  }
+
+  await app.whenReady();
+
+  if (process.env.GDK_BACKEND !== GDK_BACKEND) {
+    console.warn(
+      "Reverting GDK_BACKEND to work around https://github.com/electron/electron/issues/28436",
+    );
+    if (GDK_BACKEND === undefined) {
+      delete process.env.GDK_BACKEND;
+    } else {
+      process.env.GDK_BACKEND = GDK_BACKEND;
+    }
+  }
+
+  // Used for notifications on Windows
+  app.setAppUserModelId("org.zulip.zulip-electron");
+
+  remoteMain.initialize();
+
+  app.on("second-instance", () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) {
+        mainWindow.restore();
+      }
+
+      mainWindow.show();
+    }
+  });
+
+  ipcMain.on(
+    "permission-callback",
+    (event: Event, permissionCallbackId: number, grant: boolean) => {
+      permissionCallbacks.get(permissionCallbackId)?.(grant);
+      permissionCallbacks.delete(permissionCallbackId);
+    },
+  );
+
+  // This event is only available on macOS. Triggers when you click on the dock icon.
+  app.on("activate", () => {
+    mainWindow.show();
+  });
+
+  app.on("web-contents-created", (_event: Event, contents: WebContents) => {
+    contents.setWindowOpenHandler((details) => {
+      handleExternalLink(contents, details, page);
+      return {action: "deny"};
+    });
+  });
+
+  const ses = session.fromPartition("persist:webviewsession");
+  ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
+
+  function configureSpellChecker() {
+    const enable = ConfigUtil.getConfigItem("enableSpellchecker", true);
+    if (enable && process.platform !== "darwin") {
+      ses.setSpellCheckerLanguages(
+        ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
+      );
+    }
+
+    ses.setSpellCheckerEnabled(enable);
+  }
+
+  configureSpellChecker();
+  ipcMain.on("configure-spell-checker", configureSpellChecker);
+
+  ipcMain.on("get-injected-js", (event) => {
+    event.returnValue = fs.readFileSync(
+      path.join(bundlePath, "injected.js"),
+      "utf8",
+    );
+  });
+
+  const clipboardSigKey = crypto.randomBytes(32);
+
+  ipcMain.on("new-clipboard-key", (event) => {
+    const key = crypto.randomBytes(32);
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    event.returnValue = {key, sig: hmac.digest()};
+  });
+
+  ipcMain.handle("poll-clipboard", (event, key, sig) => {
+    // Check that the key was generated here.
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    if (!crypto.timingSafeEqual(sig, hmac.digest())) return;
+
+    try {
+      // Check that the data on the clipboard was encrypted to the key.
+      const data = Buffer.from(clipboard.readText(), "hex");
+      const iv = data.slice(0, 12);
+      const ciphertext = data.slice(12, -16);
+      const authTag = data.slice(-16);
+      const decipher = crypto.createDecipheriv("aes-256-gcm", key, iv, {
+        authTagLength: 16,
+      });
+      decipher.setAuthTag(authTag);
+      return (
+        decipher.update(ciphertext, undefined, "utf8") + decipher.final("utf8")
+      );
+    } catch {
+      // If the parsing or decryption failed in any way,
+      // the correct token hasn’t been copied yet; try
+      // again next time.
+      return undefined;
+    }
+  });
+
+  AppMenu.setMenu({
+    tabs: [],
+  });
+  mainWindow = createMainWindow();
+
+  // Auto-hide menu bar on Windows + Linux
+  if (process.platform !== "darwin") {
+    const shouldHideMenu = ConfigUtil.getConfigItem("autoHideMenubar", false);
+    mainWindow.autoHideMenuBar = shouldHideMenu;
+    mainWindow.setMenuBarVisibility(!shouldHideMenu);
+  }
+
+  const page = mainWindow.webContents;
+
+  page.on("dom-ready", () => {
+    if (ConfigUtil.getConfigItem("startMinimized", false)) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+    }
+  });
+
+  ipcMain.on("fetch-user-agent", (event) => {
+    event.returnValue = session
+      .fromPartition("persist:webviewsession")
+      .getUserAgent();
+  });
+
+  ipcMain.handle("get-server-settings", async (event, domain: string) =>
+    _getServerSettings(domain, ses),
+  );
+
+  ipcMain.handle("save-server-icon", async (event, url: string) =>
+    _saveServerIcon(url, ses),
+  );
+
+  ipcMain.handle("is-online", async (event, url: string) =>
+    _isOnline(url, ses),
+  );
+
+  page.once("did-frame-finish-load", async () => {
+    // Initiate auto-updates on MacOS and Windows
+    if (ConfigUtil.getConfigItem("autoUpdate", true)) {
+      await appUpdater();
+    }
+  });
+
+  app.on(
+    "certificate-error",
+    (
+      event: Event,
+      webContents: WebContents,
+      urlString: string,
+      error: string,
+    ) => {
+      const url = new URL(urlString);
+      dialog.showErrorBox(
+        "Certificate error",
+        `The server presented an invalid certificate for ${url.origin}:
+
+${error}`,
+      );
+    },
+  );
+
+  ses.setPermissionRequestHandler(
+    (webContents, permission, callback, details) => {
+      const {origin} = new URL(details.requestingUrl);
+      const permissionCallbackId = nextPermissionCallbackId++;
+      permissionCallbacks.set(permissionCallbackId, callback);
+      send(
+        page,
+        "permission-request",
+        {
+          webContentsId:
+            webContents.id === mainWindow.webContents.id
+              ? null
+              : webContents.id,
+          origin,
+          permission,
+        },
+        permissionCallbackId,
+      );
+    },
+  );
+
+  // Temporarily remove this event
+  // powerMonitor.on('resume', () => {
+  // 	mainWindow.reload();
+  // 	send(page, 'destroytray');
+  // });
+
+  ipcMain.on("focus-app", () => {
+    mainWindow.show();
+  });
+
+  ipcMain.on("quit-app", () => {
+    app.quit();
+  });
+
+  // Reload full app not just webview, useful in debugging
+  ipcMain.on("reload-full-app", () => {
+    mainWindow.reload();
+    send(page, "destroytray");
+  });
+
+  ipcMain.on("clear-app-settings", () => {
+    mainWindowState.unmanage();
+    app.relaunch();
+    app.exit();
+  });
+
+  ipcMain.on("toggle-app", () => {
+    toggleApp();
+  });
+
+  ipcMain.on("toggle-badge-option", () => {
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+  });
+
+  ipcMain.on("toggle-menubar", (_event: IpcMainEvent, showMenubar: boolean) => {
+    mainWindow.autoHideMenuBar = showMenubar;
+    mainWindow.setMenuBarVisibility(!showMenubar);
+    send(page, "toggle-autohide-menubar", showMenubar, true);
+  });
+
+  ipcMain.on("update-badge", (_event: IpcMainEvent, messageCount: number) => {
+    badgeCount = messageCount;
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+    send(page, "tray", messageCount);
+  });
+
+  ipcMain.on(
+    "update-taskbar-icon",
+    (_event: IpcMainEvent, data: string, text: string) => {
+      BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+    },
+  );
+
+  ipcMain.on(
+    "forward-message",
+    <Channel extends keyof RendererMessage>(
+      _event: IpcMainEvent,
+      listener: Channel,
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      send(page, listener, ...parameters);
+    },
+  );
+
+  ipcMain.on("update-menu", (_event: IpcMainEvent, props: MenuProps) => {
+    AppMenu.setMenu(props);
+    if (props.activeTabIndex !== undefined) {
+      const activeTab = props.tabs[props.activeTabIndex];
+      mainWindow.setTitle(`Zulip - ${activeTab.name}`);
+    }
+  });
+
+  ipcMain.on(
+    "toggleAutoLauncher",
+    async (_event: IpcMainEvent, AutoLaunchValue: boolean) => {
+      await setAutoLaunch(AutoLaunchValue);
+    },
+  );
+
+  ipcMain.on(
+    "realm-name-changed",
+    (_event: IpcMainEvent, serverURL: string, realmName: string) => {
+      send(page, "update-realm-name", serverURL, realmName);
+    },
+  );
+
+  ipcMain.on(
+    "realm-icon-changed",
+    (_event: IpcMainEvent, serverURL: string, iconURL: string) => {
+      send(page, "update-realm-icon", serverURL, iconURL);
+    },
+  );
+
+  ipcMain.on("save-last-tab", (_event: IpcMainEvent, index: number) => {
+    ConfigUtil.setConfigItem("lastActiveTab", index);
+  });
+
+  ipcMain.on("focus-this-webview", (event: IpcMainEvent) => {
+    send(page, "focus-webview-with-id", event.sender.id);
+    mainWindow.show();
+  });
+
+  // Update user idle status for each realm after every 15s
+  const idleCheckInterval = 15 * 1000; // 15 seconds
+  setInterval(() => {
+    // Set user idle if no activity in 1 second (idleThresholdSeconds)
+    const idleThresholdSeconds = 1; // 1 second
+    const idleState = powerMonitor.getSystemIdleState(idleThresholdSeconds);
+    if (idleState === "active") {
+      send(page, "set-active");
+    } else {
+      send(page, "set-idle");
+    }
+  }, idleCheckInterval);
+})();
+
+app.on("before-quit", () => {
+  isQuitting = true;
+});
+
+// Send crash reports
+process.on("uncaughtException", (error) => {
+  console.error(error);
+  console.error(error.stack);
+});

app/main/link-helper.js

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

app/main/linux-update-util.ts

@@ -0,0 +1,69 @@
+import {app, dialog} from "electron/main";
+import fs from "node:fs";
+import path from "node:path";
+
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+
+import Logger from "../common/logger-util.js";
+
+const logger = new Logger({
+  file: "linux-update-util.log",
+});
+
+let db: JsonDB;
+
+reloadDb();
+
+export function getUpdateItem(
+  key: string,
+  defaultValue: true | null = null,
+): true | null {
+  reloadDb();
+  let value: unknown;
+  try {
+    value = db.getObject<unknown>(`/${key}`);
+  } catch (error: unknown) {
+    if (!(error instanceof DataError)) throw error;
+  }
+
+  if (value !== true && value !== null) {
+    setUpdateItem(key, defaultValue);
+    return defaultValue;
+  }
+
+  return value;
+}
+
+export function setUpdateItem(key: string, value: true | null): void {
+  db.push(`/${key}`, value, true);
+  reloadDb();
+}
+
+export function removeUpdateItem(key: string): void {
+  db.delete(`/${key}`);
+  reloadDb();
+}
+
+function reloadDb(): void {
+  const linuxUpdateJsonPath = path.join(
+    app.getPath("userData"),
+    "/config/updates.json",
+  );
+  try {
+    const file = fs.readFileSync(linuxUpdateJsonPath, "utf8");
+    JSON.parse(file);
+  } catch (error: unknown) {
+    if (fs.existsSync(linuxUpdateJsonPath)) {
+      fs.unlinkSync(linuxUpdateJsonPath);
+      dialog.showErrorBox(
+        "Error saving update notifications.",
+        "We encountered an error while saving the update notifications.",
+      );
+      logger.error("Error while JSON parsing updates.json: ");
+      logger.error(error);
+    }
+  }
+
+  db = new JsonDB(linuxUpdateJsonPath, true, true);
+}

app/main/linuxupdater.ts

@@ -0,0 +1,50 @@
+import type {Session} from "electron/main";
+import {Notification, app, net} from "electron/main";
+
+import getStream from "get-stream";
+import * as semver from "semver";
+import * as z from "zod";
+
+import * as ConfigUtil from "../common/config-util.js";
+import Logger from "../common/logger-util.js";
+
+import * as LinuxUpdateUtil from "./linux-update-util.js";
+import {fetchResponse} from "./request.js";
+
+const logger = new Logger({
+  file: "linux-update-util.log",
+});
+
+export async function linuxUpdateNotification(session: Session): Promise<void> {
+  let url = "https://api.github.com/repos/zulip/zulip-desktop/releases";
+  url = ConfigUtil.getConfigItem("betaUpdate", false) ? url : url + "/latest";
+
+  try {
+    const response = await fetchResponse(net.request({url, session}));
+    if (response.statusCode !== 200) {
+      logger.log("Linux update response status: ", response.statusCode);
+      return;
+    }
+
+    const data: unknown = JSON.parse(await getStream(response));
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const latestVersion = ConfigUtil.getConfigItem("betaUpdate", false)
+      ? z.array(z.object({tag_name: z.string()})).parse(data)[0].tag_name
+      : z.object({tag_name: z.string()}).parse(data).tag_name;
+    /* eslint-enable @typescript-eslint/naming-convention */
+
+    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);
+      }
+    }
+  } catch (error: unknown) {
+    logger.error("Linux update error.");
+    logger.error(error);
+  }
+}

app/main/menu.js

@@ -1,335 +0,0 @@
-'use strict';
-const os = require('os');
-const electron = require('electron');
-
-const app = electron.app;
-const BrowserWindow = electron.BrowserWindow;
-const shell = electron.shell;
-const appName = app.getName();
-
-const {addDomain, about} = require('./windowmanager');
-
-function sendAction(action) {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action);
-}
-
-const viewSubmenu = [
-	{
-		label: 'Reload',
-		accelerator: 'CmdOrCtrl+R',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.reload();
-			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		role: 'togglefullscreen'
-	},
-	{
-		label: 'Zoom In',
-		accelerator: 'CommandOrControl+=',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomIn');
-			}
-		}
-	},
-	{
-		label: 'Zoom Out',
-		accelerator: 'CommandOrControl+-',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomOut');
-			}
-		}
-	},
-	{
-		label: 'Actual Size',
-		accelerator: 'CommandOrControl+0',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				sendAction('zoomActualSize');
-			}
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Toggle Developer Tools',
-		accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-		click(item, focusedWindow) {
-			if (focusedWindow) {
-				focusedWindow.webContents.toggleDevTools();
-			}
-		}
-	}
-];
-
-const helpSubmenu = [
-	{
-		label: `${appName} Website`,
-		click() {
-			shell.openExternal('https://zulip.org');
-		}
-	},
-	{
-		label: `${appName + 'Desktop'} - ${app.getVersion()}`,
-		enabled: false
-	},
-	{
-		label: 'Report an Issue...',
-		click() {
-			const body = `
-<!-- Please succinctly describe your issue and steps to reproduce it. -->
--
-${app.getName()} ${app.getVersion()}
-Electron ${process.versions.electron}
-${process.platform} ${process.arch} ${os.release()}`;
-
-			shell.openExternal(`https://github.com/zulip/zulip-electron/issues/new?body=${encodeURIComponent(body)}`);
-		}
-	}
-];
-
-const darwinTpl = [
-
-	{
-		label: `${app.getName()}`,
-		submenu: [
-			{
-				label: 'Zulip desktop',
-				click() {
-					about();
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Change Zulip Server',
-				accelerator: 'Cmd+,',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						addDomain();
-					}
-				}
-			},
-			{
-				label: 'Keyboard shortcuts',
-				accelerator: 'Cmd+K',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						sendAction('shortcut');
-					}
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Log Out',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						sendAction('log-out');
-					}
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'services',
-				submenu: []
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'hide'
-			},
-			{
-				role: 'hideothers'
-			},
-			{
-				role: 'unhide'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'quit'
-			}
-		]
-	},
-	{
-		label: 'Edit',
-		submenu: [
-			{
-				role: 'undo'
-			},
-			{
-				role: 'redo'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'cut'
-			},
-			{
-				role: 'copy'
-			},
-			{
-				role: 'paste'
-			},
-			{
-				role: 'pasteandmatchstyle'
-			},
-			{
-				role: 'delete'
-			},
-			{
-				role: 'selectall'
-			}
-		]
-	},
-	{
-		label: 'View',
-		submenu: viewSubmenu
-	},
-	{
-		role: 'window',
-		submenu: [
-			{
-				role: 'minimize'
-			},
-			{
-				role: 'close'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'front'
-			}
-		]
-	},
-	{
-		role: 'help',
-		submenu: helpSubmenu
-	}
-];
-
-const otherTpl = [
-	{
-		label: 'File',
-		submenu: [
-			{
-				label: 'Zulip desktop',
-				click() {
-					about();
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Change Zulip Server',
-				accelerator: 'Ctrl+,',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						addDomain();
-					}
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Keyboard shortcuts',
-				accelerator: 'Ctrl+K',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						sendAction('shortcut');
-					}
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				label: 'Log Out',
-				click(item, focusedWindow) {
-					if (focusedWindow) {
-						sendAction('log-out');
-					}
-				}
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'quit'
-			}
-		]
-	},
-	{
-		label: 'Edit',
-		submenu: [
-			{
-				role: 'undo'
-			},
-			{
-				role: 'redo'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'cut'
-			},
-			{
-				role: 'copy'
-			},
-			{
-				role: 'paste'
-			},
-			{
-				role: 'pasteandmatchstyle'
-			},
-			{
-				role: 'delete'
-			},
-			{
-				type: 'separator'
-			},
-			{
-				role: 'selectall'
-			}
-
-		]
-	},
-	{
-		label: 'View',
-		submenu: viewSubmenu
-	},
-	{
-		role: 'help',
-		submenu: helpSubmenu
-	}
-];
-
-const tpl = process.platform === 'darwin' ? darwinTpl : otherTpl;
-
-module.exports = electron.Menu.buildFromTemplate(tpl);

app/main/menu.ts

@@ -0,0 +1,722 @@
+import {shell} from "electron/common";
+import type {MenuItemConstructorOptions} from "electron/main";
+import {BrowserWindow, Menu, app} from "electron/main";
+import process from "node:process";
+
+import AdmZip from "adm-zip";
+
+import * as ConfigUtil from "../common/config-util.js";
+import * as DNDUtil from "../common/dnd-util.js";
+import * as t from "../common/translation-util.js";
+import type {RendererMessage} from "../common/typed-ipc.js";
+import type {MenuProps, TabData} from "../common/types.js";
+
+import {appUpdater} from "./autoupdater.js";
+import {send} from "./typed-ipc-main.js";
+
+const appName = app.name;
+
+function getHistorySubmenu(enableMenu: boolean): MenuItemConstructorOptions[] {
+  return [
+    {
+      label: t.__("Back"),
+      accelerator: process.platform === "darwin" ? "Command+Left" : "Alt+Left",
+      enabled: enableMenu,
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("back");
+        }
+      },
+    },
+    {
+      label: t.__("Forward"),
+      accelerator:
+        process.platform === "darwin" ? "Command+Right" : "Alt+Right",
+      enabled: enableMenu,
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("forward");
+        }
+      },
+    },
+  ];
+}
+
+function getToolsSubmenu(): MenuItemConstructorOptions[] {
+  return [
+    {
+      label: t.__("Check for Updates"),
+      async click() {
+        await checkForUpdate();
+      },
+    },
+    {
+      label: t.__("Release Notes"),
+      async click() {
+        await shell.openExternal(
+          `https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`,
+        );
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: t.__("Download App Logs"),
+      click() {
+        const zip = new AdmZip();
+        const date = new Date();
+        const dateString = date.toLocaleDateString().replace(/\//g, "-");
+
+        // Create a zip file of all the logs and config data
+        zip.addLocalFolder(`${app.getPath("appData")}/${appName}/Logs`);
+        zip.addLocalFolder(`${app.getPath("appData")}/${appName}/config`);
+
+        // Put the log file in downloads folder
+        const logFilePath = `${app.getPath(
+          "downloads",
+        )}/Zulip-logs-${dateString}.zip`;
+        zip.writeZip(logFilePath);
+
+        // Open and select the log file
+        shell.showItemInFolder(logFilePath);
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: t.__("Toggle DevTools for Zulip App"),
+      accelerator:
+        process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          focusedWindow.webContents.openDevTools({mode: "undocked"});
+        }
+      },
+    },
+    {
+      label: t.__("Toggle DevTools for Active Tab"),
+      accelerator:
+        process.platform === "darwin" ? "Alt+Command+U" : "Ctrl+Shift+U",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("tab-devtools");
+        }
+      },
+    },
+  ];
+}
+
+function getViewSubmenu(): MenuItemConstructorOptions[] {
+  return [
+    {
+      label: t.__("Reload"),
+      accelerator: "CommandOrControl+R",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("reload-current-viewer");
+        }
+      },
+    },
+    {
+      label: t.__("Hard Reload"),
+      accelerator: "CommandOrControl+Shift+R",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("hard-reload");
+        }
+      },
+    },
+    {
+      label: t.__("Hard Reload"),
+      visible: false,
+      accelerator: "F5",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("hard-reload");
+        }
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: t.__("Toggle Full Screen"),
+      role: "togglefullscreen",
+    },
+    {
+      label: t.__("Zoom In"),
+      accelerator: "CommandOrControl+=",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomIn");
+        }
+      },
+    },
+    {
+      label: t.__("Zoom In"),
+      visible: false,
+      accelerator: "CommandOrControl+Plus",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomIn");
+        }
+      },
+    },
+    {
+      label: t.__("Zoom In"),
+      visible: false,
+      accelerator: "CommandOrControl+numadd",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomIn");
+        }
+      },
+    },
+    {
+      label: t.__("Zoom Out"),
+      accelerator: "CommandOrControl+-",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomOut");
+        }
+      },
+    },
+    {
+      label: t.__("Zoom Out"),
+      visible: false,
+      accelerator: "CommandOrControl+numsub",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomOut");
+        }
+      },
+    },
+    {
+      label: t.__("Actual Size"),
+      accelerator: "CommandOrControl+0",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomActualSize");
+        }
+      },
+    },
+    {
+      label: t.__("Actual Size"),
+      visible: false,
+      accelerator: "CommandOrControl+num0",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("zoomActualSize");
+        }
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: t.__("Toggle Tray Icon"),
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          send(focusedWindow.webContents, "toggletray");
+        }
+      },
+    },
+    {
+      label: t.__("Toggle Sidebar"),
+      accelerator: "CommandOrControl+Shift+S",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
+          send(focusedWindow.webContents, "toggle-sidebar", newValue);
+          ConfigUtil.setConfigItem("showSidebar", newValue);
+        }
+      },
+    },
+    {
+      label: t.__("Auto hide Menu bar"),
+      checked: ConfigUtil.getConfigItem("autoHideMenubar", false),
+      visible: process.platform !== "darwin",
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
+          focusedWindow.autoHideMenuBar = newValue;
+          focusedWindow.setMenuBarVisibility(!newValue);
+          send(
+            focusedWindow.webContents,
+            "toggle-autohide-menubar",
+            newValue,
+            false,
+          );
+          ConfigUtil.setConfigItem("autoHideMenubar", newValue);
+        }
+      },
+      type: "checkbox",
+    },
+  ];
+}
+
+function getHelpSubmenu(): MenuItemConstructorOptions[] {
+  return [
+    {
+      label: `${appName + " Desktop"} v${app.getVersion()}`,
+      enabled: false,
+    },
+    {
+      label: t.__("About Zulip"),
+      click(_item, focusedWindow) {
+        if (focusedWindow) {
+          sendAction("open-about");
+        }
+      },
+    },
+    {
+      label: t.__("Help Center"),
+      click(focusedWindow) {
+        if (focusedWindow) {
+          sendAction("open-help");
+        }
+      },
+    },
+    {
+      label: t.__("Report an Issue"),
+      async click() {
+        await shell.openExternal("https://zulip.com/help/contact-support");
+      },
+    },
+  ];
+}
+
+function getWindowSubmenu(
+  tabs: TabData[],
+  activeTabIndex?: number,
+): MenuItemConstructorOptions[] {
+  const initialSubmenu: MenuItemConstructorOptions[] = [
+    {
+      label: t.__("Minimize"),
+      role: "minimize",
+    },
+    {
+      label: t.__("Close"),
+      role: "close",
+    },
+  ];
+
+  if (tabs.length > 0) {
+    const shortcutKey = process.platform === "darwin" ? "Cmd" : "Ctrl";
+    initialSubmenu.push({
+      type: "separator",
+    });
+    for (const tab of tabs) {
+      // Skip missing elements left by `delete this.tabs[index]` in
+      // ServerManagerView.
+      if (tab === undefined) continue;
+
+      // Do not add functional tab settings to list of windows in menu bar
+      if (tab.role === "function" && tab.name === "Settings") {
+        continue;
+      }
+
+      initialSubmenu.push({
+        label: tab.name,
+        accelerator:
+          tab.role === "function" ? "" : `${shortcutKey} + ${tab.index + 1}`,
+        checked: tab.index === activeTabIndex,
+        click(_item, focusedWindow) {
+          if (focusedWindow) {
+            sendAction("switch-server-tab", tab.index);
+          }
+        },
+        type: "checkbox",
+      });
+    }
+
+    initialSubmenu.push(
+      {
+        type: "separator",
+      },
+      {
+        label: t.__("Switch to Next Organization"),
+        accelerator: "Ctrl+Tab",
+        enabled: tabs.length > 1,
+        click(_item, focusedWindow) {
+          if (focusedWindow) {
+            sendAction(
+              "switch-server-tab",
+              getNextServer(tabs, activeTabIndex!),
+            );
+          }
+        },
+      },
+      {
+        label: t.__("Switch to Previous Organization"),
+        accelerator: "Ctrl+Shift+Tab",
+        enabled: tabs.length > 1,
+        click(_item, focusedWindow) {
+          if (focusedWindow) {
+            sendAction(
+              "switch-server-tab",
+              getPreviousServer(tabs, activeTabIndex!),
+            );
+          }
+        },
+      },
+    );
+  }
+
+  return initialSubmenu;
+}
+
+function getDarwinTpl(props: MenuProps): MenuItemConstructorOptions[] {
+  const {tabs, activeTabIndex, enableMenu = false} = props;
+
+  return [
+    {
+      label: app.name,
+      submenu: [
+        {
+          label: t.__("Add Organization"),
+          accelerator: "Cmd+Shift+N",
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("new-server");
+            }
+          },
+        },
+        {
+          label: t.__("Toggle Do Not Disturb"),
+          accelerator: "Cmd+Shift+M",
+          click() {
+            const dndUtil = DNDUtil.toggle();
+            sendAction("toggle-dnd", dndUtil.dnd, dndUtil.newSettings);
+          },
+        },
+        {
+          label: t.__("Desktop Settings"),
+          accelerator: "Cmd+,",
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("open-settings");
+            }
+          },
+        },
+        {
+          label: t.__("Keyboard Shortcuts"),
+          accelerator: "Cmd+Shift+K",
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("show-keyboard-shortcuts");
+            }
+          },
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Copy Zulip URL"),
+          accelerator: "Cmd+Shift+C",
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("copy-zulip-url");
+            }
+          },
+        },
+        {
+          label: t.__("Log Out of Organization"),
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("log-out");
+            }
+          },
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Services"),
+          role: "services",
+          submenu: [],
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Hide"),
+          role: "hide",
+        },
+        {
+          label: t.__("Hide Others"),
+          role: "hideOthers",
+        },
+        {
+          label: t.__("Unhide"),
+          role: "unhide",
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Minimize"),
+          role: "minimize",
+        },
+        {
+          label: t.__("Close"),
+          role: "close",
+        },
+        {
+          label: t.__("Quit"),
+          role: "quit",
+        },
+      ],
+    },
+    {
+      label: t.__("Edit"),
+      submenu: [
+        {
+          label: t.__("Undo"),
+          role: "undo",
+        },
+        {
+          label: t.__("Redo"),
+          role: "redo",
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Cut"),
+          role: "cut",
+        },
+        {
+          label: t.__("Copy"),
+          role: "copy",
+        },
+        {
+          label: t.__("Paste"),
+          role: "paste",
+        },
+        {
+          label: t.__("Paste and Match Style"),
+          role: "pasteAndMatchStyle",
+        },
+        {
+          label: t.__("Select All"),
+          role: "selectAll",
+        },
+      ],
+    },
+    {
+      label: t.__("View"),
+      submenu: getViewSubmenu(),
+    },
+    {
+      label: t.__("History"),
+      submenu: getHistorySubmenu(enableMenu),
+    },
+    {
+      label: t.__("Window"),
+      submenu: getWindowSubmenu(tabs, activeTabIndex),
+    },
+    {
+      label: t.__("Tools"),
+      submenu: getToolsSubmenu(),
+    },
+    {
+      label: t.__("Help"),
+      role: "help",
+      submenu: getHelpSubmenu(),
+    },
+  ];
+}
+
+function getOtherTpl(props: MenuProps): MenuItemConstructorOptions[] {
+  const {tabs, activeTabIndex, enableMenu = false} = props;
+  return [
+    {
+      label: t.__("File"),
+      submenu: [
+        {
+          label: t.__("Add Organization"),
+          accelerator: "Ctrl+Shift+N",
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("new-server");
+            }
+          },
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Toggle Do Not Disturb"),
+          accelerator: "Ctrl+Shift+M",
+          click() {
+            const dndUtil = DNDUtil.toggle();
+            sendAction("toggle-dnd", dndUtil.dnd, dndUtil.newSettings);
+          },
+        },
+        {
+          label: t.__("Desktop Settings"),
+          accelerator: "Ctrl+,",
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("open-settings");
+            }
+          },
+        },
+        {
+          label: t.__("Keyboard Shortcuts"),
+          accelerator: "Ctrl+Shift+K",
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("show-keyboard-shortcuts");
+            }
+          },
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Copy Zulip URL"),
+          accelerator: "Ctrl+Shift+C",
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("copy-zulip-url");
+            }
+          },
+        },
+        {
+          label: t.__("Log Out of Organization"),
+          enabled: enableMenu,
+          click(_item, focusedWindow) {
+            if (focusedWindow) {
+              sendAction("log-out");
+            }
+          },
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Minimize"),
+          role: "minimize",
+        },
+        {
+          label: t.__("Close"),
+          role: "close",
+        },
+        {
+          label: t.__("Quit"),
+          role: "quit",
+          accelerator: "Ctrl+Q",
+        },
+      ],
+    },
+    {
+      label: t.__("Edit"),
+      submenu: [
+        {
+          label: t.__("Undo"),
+          role: "undo",
+        },
+        {
+          label: t.__("Redo"),
+          role: "redo",
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Cut"),
+          role: "cut",
+        },
+        {
+          label: t.__("Copy"),
+          role: "copy",
+        },
+        {
+          label: t.__("Paste"),
+          role: "paste",
+        },
+        {
+          label: t.__("Paste and Match Style"),
+          role: "pasteAndMatchStyle",
+        },
+        {
+          type: "separator",
+        },
+        {
+          label: t.__("Select All"),
+          role: "selectAll",
+        },
+      ],
+    },
+    {
+      label: t.__("View"),
+      submenu: getViewSubmenu(),
+    },
+    {
+      label: t.__("History"),
+      submenu: getHistorySubmenu(enableMenu),
+    },
+    {
+      label: t.__("Window"),
+      submenu: getWindowSubmenu(tabs, activeTabIndex),
+    },
+    {
+      label: t.__("Tools"),
+      submenu: getToolsSubmenu(),
+    },
+    {
+      label: t.__("Help"),
+      role: "help",
+      submenu: getHelpSubmenu(),
+    },
+  ];
+}
+
+function sendAction<Channel extends keyof RendererMessage>(
+  channel: Channel,
+  ...args: Parameters<RendererMessage[Channel]>
+): void {
+  const win = BrowserWindow.getAllWindows()[0];
+
+  if (process.platform === "darwin") {
+    win.restore();
+  }
+
+  send(win.webContents, channel, ...args);
+}
+
+async function checkForUpdate(): Promise<void> {
+  await appUpdater(true);
+}
+
+function getNextServer(tabs: TabData[], activeTabIndex: number): number {
+  do {
+    activeTabIndex = (activeTabIndex + 1) % tabs.length;
+  } while (tabs[activeTabIndex]?.role !== "server");
+
+  return activeTabIndex;
+}
+
+function getPreviousServer(tabs: TabData[], activeTabIndex: number): number {
+  do {
+    activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
+  } while (tabs[activeTabIndex]?.role !== "server");
+
+  return activeTabIndex;
+}
+
+export function setMenu(props: MenuProps): void {
+  const tpl =
+    process.platform === "darwin" ? getDarwinTpl(props) : getOtherTpl(props);
+  const menu = Menu.buildFromTemplate(tpl);
+  Menu.setApplicationMenu(menu);
+}

app/main/preload.js

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

app/main/request.ts

@@ -0,0 +1,137 @@
+import type {ClientRequest, IncomingMessage, Session} from "electron/main";
+import {app, net} from "electron/main";
+import fs from "node:fs";
+import path from "node:path";
+import stream from "node:stream";
+import util from "node:util";
+
+import * as Sentry from "@sentry/electron";
+import getStream from "get-stream";
+import * as z from "zod";
+
+import Logger from "../common/logger-util.js";
+import * as Messages from "../common/messages.js";
+import type {ServerConf} from "../common/types.js";
+
+export async function fetchResponse(
+  request: ClientRequest,
+): Promise<IncomingMessage> {
+  return new Promise((resolve, reject) => {
+    request.on("response", resolve);
+    request.on("abort", () => {
+      reject(new Error("Request aborted"));
+    });
+    request.on("error", reject);
+    request.end();
+  });
+}
+
+const pipeline = util.promisify(stream.pipeline);
+
+/* Request: domain-util */
+
+const defaultIconUrl = "../renderer/img/icon.png";
+
+const logger = new Logger({
+  file: "domain-util.log",
+});
+
+const generateFilePath = (url: string): string => {
+  const dir = `${app.getPath("userData")}/server-icons`;
+  const extension = path.extname(url).split("?")[0];
+
+  let hash = 5381;
+  let {length} = url;
+
+  while (length) {
+    // eslint-disable-next-line no-bitwise, unicorn/prefer-code-point
+    hash = (hash * 33) ^ url.charCodeAt(--length);
+  }
+
+  // Create 'server-icons' directory if not existed
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+
+  // eslint-disable-next-line no-bitwise
+  return `${dir}/${hash >>> 0}${extension}`;
+};
+
+export const _getServerSettings = async (
+  domain: string,
+  session: Session,
+): Promise<ServerConf> => {
+  const response = await fetchResponse(
+    net.request({
+      url: domain + "/api/v1/server_settings",
+      session,
+    }),
+  );
+  if (response.statusCode !== 200) {
+    throw new Error(Messages.invalidZulipServerError(domain));
+  }
+
+  const data: unknown = JSON.parse(await getStream(response));
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const {realm_name, realm_uri, realm_icon} = z
+    .object({
+      realm_name: z.string(),
+      realm_uri: z.string(),
+      realm_icon: z.string(),
+    })
+    .parse(data);
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  return {
+    // Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+    // Following check handles both the cases
+    icon: realm_icon.startsWith("/") ? realm_uri + realm_icon : realm_icon,
+    url: realm_uri,
+    alias: realm_name,
+  };
+};
+
+export const _saveServerIcon = async (
+  url: string,
+  session: Session,
+): Promise<string> => {
+  try {
+    const response = await fetchResponse(net.request({url, session}));
+    if (response.statusCode !== 200) {
+      logger.log("Could not get server icon.");
+      return defaultIconUrl;
+    }
+
+    const filePath = generateFilePath(url);
+    await pipeline(response, fs.createWriteStream(filePath));
+    return filePath;
+  } catch (error: unknown) {
+    logger.log("Could not get server icon.");
+    logger.log(error);
+    Sentry.captureException(error);
+    return defaultIconUrl;
+  }
+};
+
+/* Request: reconnect-util */
+
+export const _isOnline = async (
+  url: string,
+  session: Session,
+): Promise<boolean> => {
+  try {
+    const response = await fetchResponse(
+      net.request({
+        method: "HEAD",
+        url: `${url}/api/v1/server_settings`,
+        session,
+      }),
+    );
+    const isValidResponse =
+      response.statusCode >= 200 && response.statusCode < 400;
+    return isValidResponse;
+  } catch (error: unknown) {
+    logger.log(error);
+    return false;
+  }
+};

app/main/sentry.ts

@@ -0,0 +1,22 @@
+import {app} from "electron/main";
+
+import * as Sentry from "@sentry/electron/main"; // eslint-disable-line n/file-extension-in-import
+
+import {getConfigItem} from "../common/config-util.js";
+
+export const sentryInit = (): void => {
+  Sentry.init({
+    dsn: "https://628dc2f2864243a08ead72e63f94c7b1@o48127.ingest.sentry.io/204668",
+
+    // Don't report errors in development or if disabled by the user.
+    beforeSend: (event) =>
+      app.isPackaged && getConfigItem("errorReporting", true) ? event : null,
+
+    // We should ignore this error since it's harmless and we know the reason behind this
+    // This error mainly comes from the console logs.
+    // This is a temp solution until Sentry supports disabling the console logs
+    ignoreErrors: ["does not appear to be a valid Zulip server"],
+
+    /// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
+  });
+};

app/main/startup.ts

@@ -0,0 +1,36 @@
+import {app} from "electron/main";
+import process from "node:process";
+
+import AutoLaunch from "auto-launch";
+
+import * as ConfigUtil from "../common/config-util.js";
+
+export const setAutoLaunch = async (
+  AutoLaunchValue: boolean,
+): Promise<void> => {
+  // Don't run this in development
+  if (!app.isPackaged) {
+    return;
+  }
+
+  const autoLaunchOption = ConfigUtil.getConfigItem(
+    "startAtLogin",
+    AutoLaunchValue,
+  );
+
+  // `setLoginItemSettings` doesn't support linux
+  if (process.platform === "linux") {
+    const zulipAutoLauncher = new AutoLaunch({
+      name: "Zulip",
+      isHidden: false,
+    });
+    await (autoLaunchOption
+      ? zulipAutoLauncher.enable()
+      : zulipAutoLauncher.disable());
+  } else {
+    app.setLoginItemSettings({
+      openAtLogin: autoLaunchOption,
+      openAsHidden: false,
+    });
+  }
+};

app/main/tray.js

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

app/main/typed-ipc-main.ts

@@ -0,0 +1,75 @@
+import type {
+  IpcMainEvent,
+  IpcMainInvokeEvent,
+  WebContents,
+} from "electron/main";
+import {
+  ipcMain as untypedIpcMain, // eslint-disable-line no-restricted-imports
+} from "electron/main";
+
+import type {
+  MainCall,
+  MainMessage,
+  RendererMessage,
+} from "../common/typed-ipc.js";
+
+type MainListener<Channel extends keyof MainMessage> =
+  MainMessage[Channel] extends (...args: infer Args) => infer Return
+    ? (event: IpcMainEvent & {returnValue: Return}, ...args: Args) => void
+    : never;
+
+type MainHandler<Channel extends keyof MainCall> = MainCall[Channel] extends (
+  ...args: infer Args
+) => infer Return
+  ? (event: IpcMainInvokeEvent, ...args: Args) => Return | Promise<Return>
+  : never;
+
+export const ipcMain: {
+  on(
+    channel: "forward-message",
+    listener: <Channel extends keyof RendererMessage>(
+      event: IpcMainEvent,
+      channel: Channel,
+      ...args: Parameters<RendererMessage[Channel]>
+    ) => void,
+  ): void;
+  on<Channel extends keyof MainMessage>(
+    channel: Channel,
+    listener: MainListener<Channel>,
+  ): void;
+  once<Channel extends keyof MainMessage>(
+    channel: Channel,
+    listener: MainListener<Channel>,
+  ): void;
+  removeListener<Channel extends keyof MainMessage>(
+    channel: Channel,
+    listener: MainListener<Channel>,
+  ): void;
+  removeAllListeners(channel?: keyof MainMessage): void;
+  handle<Channel extends keyof MainCall>(
+    channel: Channel,
+    handler: MainHandler<Channel>,
+  ): void;
+  handleOnce<Channel extends keyof MainCall>(
+    channel: Channel,
+    handler: MainHandler<Channel>,
+  ): void;
+  removeHandler(channel: keyof MainCall): void;
+} = untypedIpcMain;
+
+export function send<Channel extends keyof RendererMessage>(
+  contents: WebContents,
+  channel: Channel,
+  ...args: Parameters<RendererMessage[Channel]>
+): void {
+  contents.send(channel, ...args);
+}
+
+export function sendToFrame<Channel extends keyof RendererMessage>(
+  contents: WebContents,
+  frameId: number | [number, number],
+  channel: Channel,
+  ...args: Parameters<RendererMessage[Channel]>
+): void {
+  contents.sendToFrame(frameId, channel, ...args);
+}

app/main/windowmanager.js

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

app/renderer/about.html

@@ -1,27 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/about.css">
-	</head>
-	<body>
-	<div class="about">
-		<center><img src="../resources/zulip.png"></center>
-		<center><p class="detail"> Version : 0.0.1 </p>
-		<center><p class="detail"> License : Apache </p>
-		<center><p class="detail"> Maintainer : Zulip </p>
-		<p class="left"><a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a></p>
-	</div>
-	<script>
+<meta charset="UTF-8" />
+<link rel="stylesheet" href="css/about.css" />
 
-	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);
-	}
-	</script>
-	</body>
-</html>
+<!-- Initially hidden to prevent FOUC -->
+<div class="about" hidden>
+  <img class="logo" src="../resources/zulip.png" />
+  <p class="detail" id="version"></p>
+  <div class="maintenance-info">
+    <p class="detail maintainer">
+      Maintained by
+      <a href="https://zulip.com" target="_blank" rel="noopener noreferrer"
+        >Zulip</a
+      >
+    </p>
+    <p class="detail license">
+      Available under the
+      <a
+        href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
+        target="_blank"
+        rel="noopener noreferrer"
+        >Apache 2.0 License</a
+      >
+    </p>
+  </div>
+</div>

app/renderer/css/about.css

@@ -1,27 +1,69 @@
-body {
-	background: #6BB6C7;
+:host {
+  contain: strict;
+  display: flow-root;
+  background: rgb(250 250 250 / 100%);
+  font-family: menu, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.logo {
+  display: block;
+  margin: -40px auto;
+}
+
+#version {
+  color: rgb(68 67 67 / 100%);
+  font-size: 1.3em;
+  padding-top: 40px;
 }
 
 .about {
-	margin-top: 50px;
-}
-
-.left {
-	position: absolute;
-	top:89%;
-	left:76%;
+  display: block !important;
+  margin: 25vh auto;
+  height: 25vh;
+  text-align: center;
 }
 
 .about p {
-	font-size: 20px;
-	color: rgba(0, 0, 0, 0.62);
+  font-size: 20px;
+  color: rgb(0 0 0 / 62%);
 }
 
 .about img {
-	width:160px;
+  width: 150px;
 }
 
 .detail {
-	text-align: left;
-	margin-left: 35%;
-}
+  text-align: center;
+}
+
+.detail.maintainer {
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.detail.license {
+  font-size: 0.8em;
+}
+
+.maintenance-info {
+  cursor: pointer;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  color: rgb(68 68 68 / 100%);
+}
+
+.maintenance-info p {
+  margin: 0;
+  font-size: 1em;
+  width: 100%;
+}
+
+p.detail a {
+  color: rgb(53 95 76 / 100%);
+}
+
+p.detail a:hover {
+  text-decoration: underline;
+}

app/renderer/css/feedback.css

@@ -0,0 +1,19 @@
+:host {
+  --button-color: rgb(69 166 149);
+}
+
+button {
+  background-color: var(--button-color);
+  border-color: var(--button-color);
+}
+
+button:hover,
+button:focus {
+  border-color: var(--button-color);
+  color: var(--button-color);
+}
+
+button:active {
+  background-color: rgb(241 241 241);
+  color: var(--button-color);
+}

app/renderer/css/fonts.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+    url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: Montserrat;
+  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
+}

app/renderer/css/main.css

@@ -1,375 +1,451 @@
-@charset "UTF-8";
-header,
-section {
-    display: block
-}
-html {
-    font-size: 100%;
-    overflow-y: scroll;
-    -webkit-text-size-adjust: 100%;
-}
-html,
-button,
-input {
-    font-family: "Helvetica Neue", Arial, sans-serif
-}
+/*******************
+ *  General rules  *
+ *******************/
+
 html,
 body {
-    height: 100%;
-    margin: 0
-}
-img {
-    border: 0;
-    -ms-interpolation-mode: bicubic
-}
-img {
-    vertical-align: middle
-}
-form {
-    margin: 0
-}
-fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0
-}
-button,
-input {
-    font-size: 100%;
-    margin: 0;
-    vertical-align: baseline;
-    box-sizing: content-box;
-    -webkit-box-sizing: content-box
-}
-button,
-input {
-    line-height: normal
-}
-button {
-    cursor: pointer;
-    -webkit-appearance: button;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0
-}
-hr {
-    display: none
-}
-img {
-    max-width: 100%
-}
-h1 {
-    color: #111;
-    line-height: 1em;
-    font-weight: 400;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    text-rendering: optimizelegibility;
-    -webkit-text-stroke: none
-}
-h1 {
-    margin: 0 0 35px
+  height: 100%;
+  margin: 0;
+  cursor: default;
+  user-select: none;
 }
 
-body.container-layout header #logo {
-    position: relative;
-    display: inline-block;
-    vertical-align: top
-}
-body.container-layout header #logo {
-    width: 50px;
-    height: 50px;
-    background-position: -790px 0
-}
-button[type=submit] {
-    text-decoration: none;
-    display: inline-block;
-    vertical-align: top;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    position: relative;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-size-adjust: auto;
-    vertical-align: bottom;
-    background-color: #e6eaef;
-    border: 2px solid #e6eaef;
-    color: #96a0ac;
-    font-size: 20px;
-    line-height: 26px;
-    padding: 6px 17px
-}
-.desktop button[type=submit] {
-    -webkit-transition: all .2s ease-in-out;
-    transition: all .2s ease-in-out
-}
-.desktop button[type=submit]:hover {
-    background-color: #eff2f5;
-    border: 2px solid #eff2f5;
-    color: #96a0ac
-}
-button[type=submit]:focus {
-    outline: 0
-}
-button[type=submit].btn-primary {
-    background-color: #20b36c;
-    border: 2px solid #20b36c;
-    color: #fff
-}
-.desktop button[type=submit].btn-primary:hover {
-    background-color: #39ca83;
-    border: 2px solid #39ca83;
-    color: #fff
-}
-button[type=submit].btn-primary:focus {
-    outline: 0
-}
-button[type=submit].btn-large {
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-size: 20px;
-    line-height: 26px;
-    padding: 12px 30px
-}
-input[type=text] {
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    font-weight: 200;
-    display: inline-block;
-    vertical-align: top;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background-color: #fff;
-    border: 1px solid #cad0d7;
-    color: #000;
-    font-size: 18px;
-    line-height: 26px;
-    height: 42px;
-    padding: 10px 10px
-}
-.desktop input[type=text]:hover {
-    background-color: #fff;
-    border-color: #bbc3cc;
-    color: #111
-}
-input[type=text]:focus {
-    background-color: #fff;
-    border-color: #20b36c!important;
-    color: #000;
-    outline: 0
-}
-input[type=text]::-webkit-input-placeholder {
-    color: #8e959e
-}
-input[type=text]::-moz-placeholder {
-    color: #8e959e
-}
-input[type=text]:-ms-input-placeholder {
-    color: #8e959e
-}
-.form-large input[type=text] {
-    font-size: 18px;
-    line-height: 26px;
-    height: 54px;
-    padding: 12px 15px
-}
-.control-group {
-    margin-top: 40px
-}
-h1 {
-    white-space: normal;
-    word-break: break-all;
-    word-break: break-word;
-    -webkit-hyphens: auto;
-    -moz-hyphens: auto;
-    hyphens: auto
-}
-.section-main {
-    position: relative
-}
-body {
-    color: #111;
-    font-size: 18px;
-    line-height: 24px;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    background: #edf1f3;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box
-}
-.desktop body {
-    padding-top: 116px
-}
-body.container-layout {
-    padding: 0!important;
-    background-color: #E6EAEF
-}
-header {
-    z-index: 800;
-    border-bottom: 1px solid #dae0e7;
-    background: rgba(255, 255, 255, .97);
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%
-}
-header .container {
-    position: relative
-}
-.desktop header {
-    position: fixed
-}
- header .container {
-    position: relative;
-    height: 75px
-}
-.container-layout header {
-    position: relative;
-    border: 0;
-    background: 0 0;
-    padding: 30px 0
-}
-.container-layout header .container {
-    height: auto
-}
-header #logo {
-    display: block;
-    text-indent: -9999px
+#content {
+  display: flex;
+  height: 100%;
 }
 
- header #logo {
-    position: absolute!important;
-    top: 50%;
-    left: 10px;
-    -webkit-transform: translate(0, -50%);
-    transform: translate(0, -50%)
+.toggle-sidebar {
+  background: rgb(34 44 49 / 100%);
+  width: 54px;
+  padding: 27px 0 20px;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  -webkit-app-region: drag;
+  overflow: hidden;
+  transition: all 0.5s ease;
+  z-index: 2;
 }
-body.container-layout header #logo {
-    position: relative!important;
-    top: 0;
-    left: 0;
-    -webkit-transform: translate(0, 0);
-    transform: translate(0, 0);
-    margin: 0 auto;
-    display: block
+
+.toggle-sidebar div {
+  transition: all 0.5s ease-out;
 }
-.content {
-    padding-bottom: 40px;
-    overflow: hidden
+
+.sidebar-hide {
+  width: 0;
+  transition: all 0.8s ease;
 }
-.container-layout .content {
-    max-width: 660px;
-    margin: 0 auto
+
+.sidebar-hide div {
+  transform: translateX(-100%);
+  transition: all 0.6s ease-out;
 }
-.content .server {
-    position: relative;
-    margin: 0 10px
+
+#view-controls-container {
+  height: calc(100% - 208px);
+  overflow-y: hidden;
 }
-.content .server .container {
-    background: #fff;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 50px 0 0;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    position: relative;
-    z-index: 10;
-    max-width: 580px
+
+#view-controls-container::-webkit-scrollbar {
+  width: 4px;
 }
-.content .server h1 {
-    text-align: center;
-    padding: 0 10%
+
+#view-controls-container::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
 }
-.content .server h1 {
-    font-size: 2.4em;
-    line-height: 1.2em;
-    margin-bottom: 10px
+
+#view-controls-container::-webkit-scrollbar-thumb {
+  background-color: rgb(169 169 169 / 100%);
+  outline: 1px solid rgb(169 169 169 / 100%);
 }
-.content .server fieldset {
-    padding: 25px 10% 80px 39px;
-    position: relative
+
+#view-controls-container:hover {
+  overflow-y: overlay;
 }
-.content .server fieldset .control-group .control-field input {
-    width: 100%
+
+/*******************
+  *   Left Sidebar  *
+  *******************/
+
+#tabs-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
-.content .server button {
-    width: 100%
+
+.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;
 }
-@media screen and (min-width: 749px) {
-    input[type=text] {
-        width: 60%
-    }
+
+#actions-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
 }
-@media screen and (min-width: 1071px) {
-    h1 {
-        font-size: 3.2em;
-        line-height: 1.3em
-    }
+
+.action-button {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
 }
-.container {
-    width: 1070px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 10px;
-    padding-right: 10px;
+
+.action-button:hover {
+  cursor: pointer;
 }
-.container:before,
-.container:after {
-    content: "";
-    display: table
+
+.action-button i {
+  color: rgb(108 133 146 / 100%);
+  font-size: 28px;
 }
-.container:after {
-    clear: both
+
+.action-button:hover i {
+  color: rgb(152 169 179 / 100%);
 }
-.responsive .container {
-    max-width: 1070px;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 10px;
-    padding-right: 10px;
+
+.action-button.active {
+  /* background-color: rgba(255, 255, 255, 0.25); */
+  background-color: rgb(239 239 239 / 100%);
+  opacity: 0.9;
+  padding-right: 14px;
 }
-.responsive .container:before,
-.responsive .container:after {
-    content: "";
-    display: table
+
+.action-button.active i {
+  color: rgb(28 38 43 / 100%);
 }
-.responsive .container:after {
-    clear: both
+
+.action-button.disable {
+  opacity: 0.6;
 }
-@media screen and (max-width: 480px) {
-    .responsive h1 {
-        font-size: 1.7em;
-        line-height: 1.3em
-    }
+
+.action-button.disable:hover {
+  cursor: not-allowed;
 }
-@media screen and (min-width: 481px) and (max-width: 640px) {
-    .responsive h1 {
-        font-size: 1.9em;
-        line-height: 1.3em
-    }
+
+.action-button.disable:hover i {
+  color: rgb(108 133 146 / 100%);
 }
-@media screen and (min-width: 641px) and (max-width: 748px) {
-    .responsive h1 {
-        font-size: 2.2em;
-        line-height: 1.3em
-    }
+
+.tab {
+  position: relative;
+  margin: 2px 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
-@media screen and (max-width: 748px) {
-    .responsive input[type=text] {
-        width: 100%
-    }
+
+.tab:first-child {
+  margin-top: 9px;
 }
-@media screen and (min-width: 749px) and (max-width: 1070px) {
-    .responsive h1 {
-        font-size: 2.6em;
-        line-height: 1.3em
-    }
+
+.tab .server-icons {
+  width: 35px;
+  vertical-align: top;
+  border-radius: 4px;
 }
-#server-status {
-    text-align: center;
-    color: #c71212;
+
+.tab .server-tab {
+  width: 100%;
+  height: 35px;
+  position: relative;
+  margin-top: 5px;
+  z-index: 11;
+  line-height: 31px;
+  color: rgb(238 238 238 / 100%);
+  text-align: center;
+  overflow: hidden;
+  opacity: 0.6;
+  padding: 6px 0;
+}
+
+.server-tab .alt-icon {
+  font-family: Verdana, sans-serif;
+  font-weight: 600;
+  font-size: 22px;
+  border: 2px solid rgb(34 44 49 / 100%);
+  margin-left: 17%;
+  width: 35px;
+  border-radius: 4px;
+}
+
+.tab .server-tab:hover {
+  opacity: 0.8;
+}
+
+.tab.active .server-tab {
+  opacity: 1;
+  background-color: rgb(100 132 120 / 100%);
+}
+
+.tab.functional-tab {
+  height: 46px;
+  padding: 0;
+}
+
+.tab.functional-tab.active .server-tab {
+  padding: 2px 0;
+  height: 40px;
+  background-color: rgb(255 255 255 / 25%);
+}
+
+.tab.functional-tab .server-tab i {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+.tab .server-tab-badge.active {
+  border-radius: 9px;
+  min-width: 11px;
+  padding: 0 3px;
+  height: 17px;
+  background-color: rgb(244 67 54 / 100%);
+  font-size: 10px;
+  font-family: sans-serif;
+  position: absolute;
+  z-index: 15;
+  top: 6px;
+  float: right;
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  line-height: 17px;
+  display: block;
+  right: 0;
+}
+
+.tab .server-tab-badge {
+  display: none;
+}
+
+.tab .server-tab-badge.close-button {
+  width: 16px;
+  padding: 0;
+}
+
+.tab .server-tab-badge.close-button i {
+  font-size: 13px;
+  line-height: 17px;
+}
+
+#add-tab {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab .server-tab-shortcut {
+  color: rgb(100 132 120 / 100%);
+  font-size: 12px;
+  text-align: center;
+  font-family: sans-serif;
+  margin-bottom: 5px;
+}
+
+.refresh {
+  animation: rotate-loader 1s linear infinite;
+}
+
+@keyframes rotate-loader {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+/*******************
+  *   Webview Area  *
+  *******************/
+
+#webviews-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+/* Pseudo element for loading indicator */
+#webviews-container::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  background: rgb(255 255 255 / 100%) 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 {
+  z-index: -1;
+  visibility: hidden;
+}
+
+webview,
+.functional-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  visibility: hidden;
+}
+
+webview.active,
+.functional-view.active {
+  z-index: 1;
+  visibility: visible;
+}
+
+webview.focus {
+  outline: 0 solid transparent;
+}
+
+/* Tooltip styling */
+
+#loading-tooltip,
+#dnd-tooltip,
+#back-tooltip,
+#reload-tooltip,
+#setting-tooltip {
+  font-family: sans-serif;
+  background: rgb(34 44 49 / 100%);
+  margin-left: 48px;
+  padding: 6px 8px;
+  position: absolute;
+  margin-top: 0;
+  z-index: 1000;
+  color: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  text-align: center;
+  width: 55px;
+  font-size: 14px;
+}
+
+#loading-tooltip::after,
+#dnd-tooltip::after,
+#back-tooltip::after,
+#reload-tooltip::after,
+#setting-tooltip::after {
+  content: " ";
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 7px;
+  right: 68px;
+}
+
+#add-server-tooltip,
+.server-tooltip {
+  font-family: arial, sans-serif;
+  background: rgb(34 44 49 / 100%);
+  left: 56px;
+  padding: 10px 20px;
+  position: fixed;
+  margin-top: 11px;
+  z-index: 5000 !important;
+  color: rgb(255 255 255 / 100%);
+  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 rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 10px;
+  left: -5px;
+}
+
+#collapse-button {
+  bottom: 30px;
+  left: 20px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: rgb(34 44 49 / 100%);
+  border-radius: 20px;
+  cursor: pointer;
+  box-shadow: rgb(153 153 153 / 100%) 1px 1px;
+}
+
+#collapse-button i {
+  color: rgb(239 239 239 / 100%);
+}
+
+#main-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Full screen Popup container  */
+
+.popup .popuptext {
+  visibility: hidden;
+  background-color: rgb(85 85 85 / 100%);
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  border-radius: 6px;
+  padding: 9px 0;
+  position: absolute;
+  z-index: 1000;
+  font-family: arial, sans-serif;
+  width: 240px;
+  top: 15px;
+  height: 20px;
+  left: 43%;
+}
+
+.popup .show {
+  visibility: visible;
+  animation: full-screen-popup 0s ease-in 1s forwards;
+  animation-fill-mode: forwards;
+}
+
+@keyframes full-screen-popup {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 1;
+  }
 }

app/renderer/css/network.css

@@ -0,0 +1,59 @@
+html,
+body {
+  margin: 0;
+  cursor: default;
+  font-size: 14px;
+  color: rgb(51 51 51 / 100%);
+  background: rgb(255 255 255 / 100%);
+  user-select: none;
+}
+
+#content {
+  display: flex;
+  flex-direction: column;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  margin: 100px 200px;
+  text-align: center;
+}
+
+#title {
+  text-align: left;
+  font-size: 24px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+#subtitle {
+  font-size: 20px;
+  text-align: left;
+  margin: 12px 0;
+}
+
+#description {
+  text-align: left;
+  font-size: 16px;
+  list-style-position: inside;
+}
+
+#reconnect {
+  float: left;
+}
+
+#settings {
+  margin-left: 116px;
+}
+
+.button {
+  font-size: 16px;
+  background: rgb(0 150 136 / 100%);
+  color: rgb(255 255 255 / 100%);
+  width: 96px;
+  height: 32px;
+  border-radius: 5px;
+  line-height: 32px;
+  cursor: pointer;
+}
+
+.button:hover {
+  opacity: 0.8;
+}

app/renderer/css/pref.css

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

app/renderer/css/preference.css

@@ -0,0 +1,762 @@
+:host {
+  contain: strict;
+  display: flow-root;
+  cursor: default;
+  user-select: none;
+  font-family: menu, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  background: rgb(239 239 239 / 100%);
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  color: rgb(139 142 143 / 100%);
+}
+
+kbd {
+  display: inline-block;
+  border: 1px solid rgb(204 204 204 / 100%);
+  border-radius: 4px;
+  font-size: 15px;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: bold;
+  white-space: nowrap;
+  background-color: rgb(247 247 247 / 100%);
+  color: rgb(51 51 51 / 100%);
+  margin: 0 0.1em;
+  padding: 0.3em 0.8em;
+  text-shadow: 0 1px 0 rgb(255 255 255 / 100%);
+  line-height: 1.4;
+}
+
+table,
+th,
+td {
+  border-collapse: collapse;
+  color: rgb(56 52 48 / 100%);
+}
+
+table {
+  width: 100%;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+
+td {
+  padding: 5px;
+}
+
+td:nth-child(odd) {
+  text-align: right;
+  width: 50%;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+
+  /* Preferred icon size */
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizelegibility;
+}
+
+#content {
+  display: flex !important;
+  height: 100%;
+  font-family: Montserrat, sans-serif;
+}
+
+#sidebar {
+  width: 150px;
+  min-width: 100px;
+  padding: 30px 30px 30px 35px;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  background: rgb(242 242 242 / 100%);
+}
+
+#nav-container {
+  padding: 20px 0;
+}
+
+.nav {
+  padding: 7px 0;
+  color: rgb(153 153 153 / 100%);
+  cursor: pointer;
+}
+
+.nav.active {
+  color: rgb(78 191 172 / 100%);
+  cursor: default;
+  position: relative;
+}
+
+.nav.active::before {
+  background: rgb(70 78 90 / 100%);
+  width: 3px;
+  height: 18px;
+  position: absolute;
+  left: -8px;
+  content: "";
+}
+
+/* We don't want to show this in nav item since we have the + button for adding an Organization */
+
+/* stylelint-disable-next-line selector-id-pattern */
+#nav-AddServer {
+  display: none;
+}
+
+#settings-header {
+  font-size: 22px;
+  color: rgb(34 44 49 / 100%);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+#settings-container {
+  width: 100%;
+  display: flex;
+  padding: 30px;
+  overflow-y: scroll;
+}
+
+#new-server-container {
+  padding-left: 42px;
+  padding-top: 25px;
+  margin-right: 16px;
+}
+
+.title {
+  font-weight: 500;
+  color: rgb(34 44 49 / 100%);
+}
+
+.page-title {
+  color: rgb(34 44 49 / 100%);
+  font-size: 15px;
+  font-weight: bold;
+  padding: 4px 0 6px;
+}
+
+.add-server-info-row {
+  display: flex;
+  margin: 8px 0 0;
+}
+
+.add-server-info-right {
+  flex-grow: 1;
+  margin-top: 10px;
+}
+
+.sub-title {
+  padding: 4px 0 6px;
+  font-weight: bold;
+  color: rgb(97 97 97 / 100%);
+}
+
+img.server-info-icon {
+  width: 36px;
+  height: 36px;
+  padding: 4px 4px 4px 10px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.server-info-left {
+  margin: 4px 20px 0 0;
+  min-width: 40%;
+}
+
+.server-info-right {
+  margin-top: 4px;
+  width: 55%;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+.server-info-row {
+  display: inline-block;
+  margin: 5px 0 0;
+}
+
+.server-info-left .server-info-row {
+  display: inline-flex;
+  align-items: inherit;
+  vertical-align: -2px;
+  position: relative;
+}
+
+.server-url {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.server-info-alias {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.server-url-info {
+  margin-right: 10px;
+}
+
+.setting-input-key {
+  font-size: 14px;
+  height: 27px;
+  line-height: 27px;
+  font-weight: bold;
+  background: transparent;
+  flex-wrap: nowrap;
+  margin-right: 10px;
+}
+
+.setting-input-value {
+  flex-grow: 1;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 13px;
+  border: rgb(237 237 237 / 100%) 2px solid;
+  outline-width: 0;
+  background: transparent;
+  max-width: 450px;
+}
+
+.setting-input-value:focus {
+  border: rgb(78 191 172 / 100%) 2px solid;
+}
+
+.invalid-input-value:focus {
+  border: rgb(239 83 80 / 100%) 2px solid;
+}
+
+.manual-proxy-block {
+  width: 96%;
+}
+
+.actions-container {
+  display: flex;
+  font-size: 14px;
+  color: rgb(35 93 58 / 100%);
+  vertical-align: middle;
+  margin: 10px 0;
+  flex-wrap: wrap;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  margin-right: 10px;
+}
+
+.action i {
+  margin-right: 5px;
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.settings-pane {
+  flex-grow: 1;
+  min-width: 550px;
+}
+
+.action:hover {
+  cursor: pointer;
+}
+
+.action.disabled {
+  color: rgb(153 153 153 / 100%);
+}
+
+.action.disabled:hover {
+  cursor: default;
+}
+
+.settings-card {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px 30px;
+  margin: 10px 0 20px;
+  background: rgb(255 255 255 / 100%);
+  width: 80%;
+  transition: all 0.2s;
+}
+
+.settings-card:hover {
+  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 0 0 rgb(0 0 0 / 12%);
+}
+
+.hidden {
+  display: none;
+  margin: 5px !important;
+}
+
+.red {
+  color: rgb(240 148 148);
+  background: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  display: inline-block;
+  border: 2px solid rgb(240 148 148);
+  padding: 10px;
+  width: 100px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+}
+
+.red:hover {
+  background-color: rgb(240 148 148);
+  color: rgb(255 255 255 / 100%);
+}
+
+.green {
+  color: rgb(255 255 255 / 100%);
+  background: rgb(78 191 172 / 100%);
+  border-radius: 4px;
+  display: inline-block;
+  border: none;
+  padding: 10px;
+  width: 100px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+}
+
+.green:hover {
+  background-color: rgb(60 159 141 / 100%);
+  color: rgb(255 255 255 / 100%);
+}
+
+.w-150 {
+  width: 150px;
+}
+
+.w-250 {
+  width: 250px;
+}
+
+.grey {
+  color: rgb(158 158 158 / 100%);
+  background: rgb(250 250 250 / 100%);
+  border: 1px solid rgb(158 158 158 / 100%);
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 6px;
+}
+
+#note {
+  font-size: 10px;
+}
+
+.code {
+  font-family: "Courier New", Courier, monospace;
+}
+
+i.open-tab-button {
+  padding-left: 5px;
+  font-size: 19px;
+  cursor: pointer;
+}
+
+#css-delete-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  /*
+        .action class will add extra margin to right which
+        we don't want for a button; the extra margin is intended for radio buttons
+    */
+  margin-right: 0;
+}
+
+.selected-css-path,
+.download-folder-path {
+  background: rgb(238 238 238 / 100%);
+  padding: 5px 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); */
+}
+
+#new-org-button {
+  margin: 30px 0;
+}
+
+#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;
+}
+
+.disallowed:hover {
+  background-color: rgb(241 241 241 / 100%);
+  cursor: not-allowed;
+}
+
+input.toggle-round + label {
+  padding: 2px;
+  width: 50px;
+  height: 25px;
+  background-color: rgb(221 221 221 / 100%);
+  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 {
+  background-color: rgb(241 241 241 / 100%);
+  border-radius: 25px;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+input.toggle-round + label::after {
+  width: 25px;
+  height: 25px;
+  background-color: rgb(255 255 255 / 100%);
+  border-radius: 100%;
+}
+
+input.toggle-round:checked + label::before {
+  background-color: rgb(78 191 172 / 100%);
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+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,
+    rgb(0 59 82 / 100%),
+    rgb(69 181 155 / 100%)
+  );
+  overflow: auto;
+}
+
+/* Modal Content */
+
+.modal-container {
+  background-color: rgb(244 247 248 / 100%);
+  margin: auto;
+  padding: 57px;
+  border: rgb(218 225 227 / 100%) 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: rgb(125 135 138 / 100%);
+}
+
+.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: rgb(255 255 255 / 100%);
+  background: rgb(78 191 172 / 100%);
+  border-color: none;
+  border: none;
+  width: 98%;
+  height: 46px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.server-center button:hover {
+  background: rgb(50 149 136 / 100%);
+}
+
+.server-center button:focus {
+  background: rgb(50 149 136 / 100%);
+}
+
+.certificates-card {
+  width: 80%;
+}
+
+.certificate-input {
+  width: 100%;
+  margin-top: 10px;
+  display: inline-flex;
+}
+
+.certificate-input div {
+  align-self: center;
+}
+
+.certificate-input .setting-input-value {
+  margin-left: 10px;
+  max-width: 100%;
+}
+
+.tip {
+  background: none;
+  padding: 0;
+}
+
+.tip:hover {
+  box-shadow: none;
+}
+
+.md-14 {
+  font-size: 14px;
+  vertical-align: middle;
+  padding-right: 6px;
+}
+
+#open-hotkeys-link {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.server-network-option {
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-top: 10px;
+  padding-top: 15px;
+  align-items: center;
+  text-align: center;
+  color: rgb(78 191 172);
+  width: 98%;
+  height: 46px;
+  cursor: pointer;
+}
+
+i.open-network-button {
+  font-size: 16px;
+  cursor: pointer;
+  padding-left: 5px;
+  position: absolute;
+}
+
+/* responsive grid */
+@media (min-width: 500px) and (max-width: 720px) {
+  #new-server-container {
+    padding-left: 0;
+    width: 60vw;
+    padding-right: 4vh;
+  }
+
+  .page-title {
+    width: 60vw;
+  }
+}
+
+@media (max-width: 500px) {
+  #new-server-container {
+    padding-left: 0;
+    width: 54%;
+  }
+
+  .page-title {
+    width: 54%;
+  }
+}
+
+@media (max-width: 650px) {
+  .selected-css-path,
+  .download-folder-path {
+    margin-right: 15px;
+  }
+
+  #css-delete-action {
+    margin-left: 10px;
+  }
+
+  #css-delete-action span {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .modal-container {
+    width: 60vw;
+    padding: 40px;
+    min-width: 300px;
+  }
+
+  .server-center button {
+    margin-right: -12px;
+    width: 100%;
+  }
+
+  .divider {
+    margin-right: -8px;
+  }
+
+  .divider hr {
+    margin-left: 6px;
+    margin-right: 6px;
+    width: 43%;
+  }
+}
+
+@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;
+  }
+}
+
+.lang-menu {
+  font-size: 13px;
+  font-weight: bold;
+  background: rgb(78 191 172 / 100%);
+  width: 100px;
+  height: 38px;
+  color: rgb(255 255 255 / 100%);
+  border-color: rgb(0 0 0 / 0%);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.tagify__input {
+  min-width: 130px !important;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.tagify__input::before {
+  top: 0;
+  bottom: 0;
+}

app/renderer/css/preload.css

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

app/renderer/index.html

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

app/renderer/js/clipboard-decrypter.ts

@@ -0,0 +1,67 @@
+import {ipcRenderer} from "./typed-ipc-renderer.js";
+
+// This helper is exposed via electron_bridge for use in the social
+// login flow.
+//
+// It consists of a key and a promised token.  The in-app page sends
+// the key to the server, and opens the user’s browser to a page where
+// they can log in and get a token encrypted to that key.  When the
+// user copies the encrypted token from their browser to the
+// clipboard, we decrypt it and resolve the promise.  The in-app page
+// then uses the decrypted token to log the user in within the app.
+//
+// The encryption is authenticated (AES-GCM) to guarantee that we
+// don’t leak anything from the user’s clipboard other than the token
+// intended for us.
+
+export type ClipboardDecrypter = {
+  version: number;
+  key: Uint8Array;
+  pasted: Promise<string>;
+};
+
+export class ClipboardDecrypterImpl implements ClipboardDecrypter {
+  version: number;
+  key: Uint8Array;
+  pasted: Promise<string>;
+
+  constructor(_: number) {
+    // At this time, the only version is 1.
+    this.version = 1;
+    const {key, sig} = ipcRenderer.sendSync("new-clipboard-key");
+    this.key = key;
+    this.pasted = new Promise((resolve) => {
+      let interval: NodeJS.Timeout | null = null;
+      const startPolling = () => {
+        if (interval === null) {
+          interval = setInterval(poll, 1000);
+        }
+
+        void poll();
+      };
+
+      const stopPolling = () => {
+        if (interval !== null) {
+          clearInterval(interval);
+          interval = null;
+        }
+      };
+
+      const poll = async () => {
+        const plaintext = await ipcRenderer.invoke("poll-clipboard", key, sig);
+        if (plaintext === undefined) return;
+
+        window.removeEventListener("focus", startPolling);
+        window.removeEventListener("blur", stopPolling);
+        stopPolling();
+        resolve(plaintext);
+      };
+
+      window.addEventListener("focus", startPolling);
+      window.addEventListener("blur", stopPolling);
+      if (document.hasFocus()) {
+        startPolling();
+      }
+    });
+  }
+}

app/renderer/js/components/base.ts

@@ -0,0 +1,12 @@
+import type {Html} from "../../../common/html.js";
+
+export function generateNodeFromHtml(html: Html): Element {
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html.html;
+
+  if (wrapper.firstElementChild === null) {
+    throw new Error("No element found in HTML");
+  }
+
+  return wrapper.firstElementChild;
+}

app/renderer/js/components/context-menu.ts

@@ -0,0 +1,149 @@
+import {clipboard} from "electron/common";
+import type {WebContents} from "electron/main";
+import type {
+  ContextMenuParams,
+  MenuItemConstructorOptions,
+} from "electron/renderer";
+import process from "node:process";
+
+import {Menu} from "@electron/remote";
+
+import * as t from "../../../common/translation-util.js";
+
+export const contextMenu = (
+  webContents: WebContents,
+  event: Event,
+  props: ContextMenuParams,
+) => {
+  const isText = props.selectionText !== "";
+  const isLink = props.linkURL !== "";
+  const linkUrl = isLink ? new URL(props.linkURL) : undefined;
+
+  const makeSuggestion = (suggestion: string) => ({
+    label: suggestion,
+    visible: true,
+    async click() {
+      await webContents.insertText(suggestion);
+    },
+  });
+
+  let menuTemplate: MenuItemConstructorOptions[] = [
+    {
+      label: t.__("Add to Dictionary"),
+      visible: props.isEditable && isText && props.misspelledWord.length > 0,
+      click(_item) {
+        webContents.session.addWordToSpellCheckerDictionary(
+          props.misspelledWord,
+        );
+      },
+    },
+    {
+      type: "separator",
+      visible: props.isEditable && isText && props.misspelledWord.length > 0,
+    },
+    {
+      label: `${t.__("Look Up")} "${props.selectionText}"`,
+      visible: process.platform === "darwin" && isText,
+      click(_item) {
+        webContents.showDefinitionForSelection();
+      },
+    },
+    {
+      type: "separator",
+      visible: process.platform === "darwin" && isText,
+    },
+    {
+      label: t.__("Cut"),
+      visible: isText,
+      enabled: props.isEditable,
+      accelerator: "CommandOrControl+X",
+      click(_item) {
+        webContents.cut();
+      },
+    },
+    {
+      label: t.__("Copy"),
+      accelerator: "CommandOrControl+C",
+      enabled: props.editFlags.canCopy,
+      click(_item) {
+        webContents.copy();
+      },
+    },
+    {
+      label: t.__("Paste"), // Bug: Paste replaces text
+      accelerator: "CommandOrControl+V",
+      enabled: props.isEditable,
+      click() {
+        webContents.paste();
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label:
+        linkUrl?.protocol === "mailto:"
+          ? t.__("Copy Email Address")
+          : t.__("Copy Link"),
+      visible: isLink,
+      click(_item) {
+        clipboard.write({
+          bookmark: props.linkText,
+          text:
+            linkUrl?.protocol === "mailto:" ? linkUrl.pathname : props.linkURL,
+        });
+      },
+    },
+    {
+      label: t.__("Copy Image"),
+      visible: props.mediaType === "image",
+      click(_item) {
+        webContents.copyImageAt(props.x, props.y);
+      },
+    },
+    {
+      label: t.__("Copy Image URL"),
+      visible: props.mediaType === "image",
+      click(_item) {
+        clipboard.write({
+          bookmark: props.srcURL,
+          text: props.srcURL,
+        });
+      },
+    },
+    {
+      type: "separator",
+      visible: isLink || props.mediaType === "image",
+    },
+    {
+      label: t.__("Services"),
+      visible: process.platform === "darwin",
+      role: "services",
+    },
+  ];
+
+  if (props.misspelledWord) {
+    if (props.dictionarySuggestions.length > 0) {
+      const suggestions: MenuItemConstructorOptions[] =
+        props.dictionarySuggestions.map((suggestion: string) =>
+          makeSuggestion(suggestion),
+        );
+      menuTemplate = [...suggestions, ...menuTemplate];
+    } else {
+      menuTemplate.unshift({
+        label: t.__("No Suggestion Found"),
+        enabled: false,
+      });
+    }
+  }
+  // Hide the invisible separators on Linux and Windows
+  // Electron has a bug which ignores visible: false parameter for separator menuitems. So we remove them here.
+  // https://github.com/electron/electron/issues/5869
+  // https://github.com/electron/electron/issues/6906
+
+  const filteredMenuTemplate = menuTemplate.filter(
+    (menuItem) => menuItem.visible ?? true,
+  );
+  const menu = Menu.buildFromTemplate(filteredMenuTemplate);
+  menu.popup();
+};

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

@@ -0,0 +1,73 @@
+import type {Html} from "../../../common/html.js";
+import {html} from "../../../common/html.js";
+
+import {generateNodeFromHtml} from "./base.js";
+import type {TabProps} from "./tab.js";
+import Tab from "./tab.js";
+
+export type FunctionalTabProps = {
+  $view: Element;
+} & TabProps;
+
+export default class FunctionalTab extends Tab {
+  $view: Element;
+  $el: Element;
+  $closeButton?: Element;
+
+  constructor({$view, ...props}: FunctionalTabProps) {
+    super(props);
+
+    this.$view = $view;
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    if (this.props.name !== "Settings") {
+      this.props.$root.append(this.$el);
+      this.$closeButton = this.$el.querySelector(".server-tab-badge")!;
+      this.registerListeners();
+    }
+  }
+
+  override async activate(): Promise<void> {
+    await super.activate();
+    this.$view.classList.add("active");
+  }
+
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    this.$view.classList.remove("active");
+  }
+
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    this.$view.remove();
+  }
+
+  templateHtml(): Html {
+    return html`
+      <div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
+        <div class="server-tab-badge close-button">
+          <i class="material-icons">close</i>
+        </div>
+        <div class="server-tab">
+          <i class="material-icons">${this.props.materialIcon}</i>
+        </div>
+      </div>
+    `;
+  }
+
+  override registerListeners(): void {
+    super.registerListeners();
+
+    this.$el.addEventListener("mouseover", () => {
+      this.$closeButton?.classList.add("active");
+    });
+
+    this.$el.addEventListener("mouseout", () => {
+      this.$closeButton?.classList.remove("active");
+    });
+
+    this.$closeButton?.addEventListener("click", (event: Event) => {
+      this.props.onDestroy?.();
+      event.stopPropagation();
+    });
+  }
+}

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

@@ -0,0 +1,81 @@
+import process from "node:process";
+
+import type {Html} from "../../../common/html.js";
+import {html} from "../../../common/html.js";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+import {generateNodeFromHtml} from "./base.js";
+import type {TabProps} from "./tab.js";
+import Tab from "./tab.js";
+import type WebView from "./webview.js";
+
+export type ServerTabProps = {
+  webview: Promise<WebView>;
+} & TabProps;
+
+export default class ServerTab extends Tab {
+  webview: Promise<WebView>;
+  $el: Element;
+  $badge: Element;
+
+  constructor({webview, ...props}: ServerTabProps) {
+    super(props);
+
+    this.webview = webview;
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    this.props.$root.append(this.$el);
+    this.registerListeners();
+    this.$badge = this.$el.querySelector(".server-tab-badge")!;
+  }
+
+  override async activate(): Promise<void> {
+    await super.activate();
+    (await this.webview).load();
+  }
+
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    (await this.webview).hide();
+  }
+
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    (await this.webview).$el.remove();
+  }
+
+  templateHtml(): Html {
+    return html`
+      <div class="tab" data-tab-id="${this.props.tabIndex}">
+        <div class="server-tooltip" style="display:none">
+          ${this.props.name}
+        </div>
+        <div class="server-tab-badge"></div>
+        <div class="server-tab">
+          <img class="server-icons" src="${this.props.icon}" />
+        </div>
+        <div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+      </div>
+    `;
+  }
+
+  updateBadge(count: number): void {
+    this.$badge.textContent = count > 999 ? "1K+" : count.toString();
+    this.$badge.classList.toggle("active", count > 0);
+  }
+
+  generateShortcutText(): string {
+    // Only provide shortcuts for server [0..9]
+    if (this.props.index >= 9) {
+      return "";
+    }
+
+    const shownIndex = this.props.index + 1;
+
+    // Array index == Shown index - 1
+    ipcRenderer.send("switch-server-tab", shownIndex - 1);
+
+    return process.platform === "darwin"
+      ? `⌘${shownIndex}`
+      : `Ctrl+${shownIndex}`;
+  }
+}

app/renderer/js/components/tab.ts

@@ -0,0 +1,45 @@
+import type {TabRole} from "../../../common/types.js";
+
+export type TabProps = {
+  role: TabRole;
+  icon?: string;
+  name: string;
+  $root: Element;
+  onClick: () => void;
+  index: number;
+  tabIndex: number;
+  onHover?: () => void;
+  onHoverOut?: () => void;
+  materialIcon?: string;
+  onDestroy?: () => void;
+};
+
+export default abstract class Tab {
+  abstract $el: Element;
+
+  constructor(readonly props: TabProps) {}
+
+  registerListeners(): void {
+    this.$el.addEventListener("click", this.props.onClick);
+
+    if (this.props.onHover !== undefined) {
+      this.$el.addEventListener("mouseover", this.props.onHover);
+    }
+
+    if (this.props.onHoverOut !== undefined) {
+      this.$el.addEventListener("mouseout", this.props.onHoverOut);
+    }
+  }
+
+  async activate(): Promise<void> {
+    this.$el.classList.add("active");
+  }
+
+  async deactivate(): Promise<void> {
+    this.$el.classList.remove("active");
+  }
+
+  async destroy(): Promise<void> {
+    this.$el.remove();
+  }
+}

app/renderer/js/components/webview.ts

@@ -0,0 +1,307 @@
+import type {WebContents} from "electron/main";
+import fs from "node:fs";
+import process from "node:process";
+
+import * as remote from "@electron/remote";
+import {app, dialog} from "@electron/remote";
+
+import * as ConfigUtil from "../../../common/config-util.js";
+import type {Html} from "../../../common/html.js";
+import {html} from "../../../common/html.js";
+import type {RendererMessage} from "../../../common/typed-ipc.js";
+import type {TabRole} from "../../../common/types.js";
+import preloadCss from "../../css/preload.css?raw"; // eslint-disable-line n/file-extension-in-import
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+import * as SystemUtil from "../utils/system-util.js";
+
+import {generateNodeFromHtml} from "./base.js";
+import {contextMenu} from "./context-menu.js";
+
+const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
+
+type WebViewProps = {
+  $root: Element;
+  rootWebContents: WebContents;
+  index: number;
+  tabIndex: number;
+  url: string;
+  role: TabRole;
+  isActive: () => boolean;
+  switchLoading: (loading: boolean, url: string) => void;
+  onNetworkError: (index: number) => void;
+  preload?: string;
+  onTitleChange: () => void;
+  hasPermission?: (origin: string, permission: string) => boolean;
+};
+
+export default class WebView {
+  static templateHtml(props: WebViewProps): Html {
+    return html`
+      <webview
+        data-tab-id="${props.tabIndex}"
+        src="${props.url}"
+        ${props.preload === undefined
+          ? html``
+          : html`preload="${props.preload}"`}
+        partition="persist:webviewsession"
+        allowpopups
+      >
+      </webview>
+    `;
+  }
+
+  static async create(props: WebViewProps): Promise<WebView> {
+    const $element = generateNodeFromHtml(
+      WebView.templateHtml(props),
+    ) as HTMLElement;
+    props.$root.append($element);
+
+    await new Promise<void>((resolve) => {
+      $element.addEventListener(
+        "did-attach",
+        () => {
+          resolve();
+        },
+        true,
+      );
+    });
+
+    // Work around https://github.com/electron/electron/issues/26904
+    function getWebContentsIdFunction(
+      this: undefined,
+      selector: string,
+    ): number {
+      return document
+        .querySelector<Electron.WebviewTag>(selector)!
+        .getWebContentsId();
+    }
+
+    const selector = `webview[data-tab-id="${CSS.escape(
+      `${props.tabIndex}`,
+    )}"]`;
+    const webContentsId: unknown =
+      await props.rootWebContents.executeJavaScript(
+        `(${getWebContentsIdFunction.toString()})(${JSON.stringify(selector)})`,
+      );
+    if (typeof webContentsId !== "number") {
+      throw new TypeError("Failed to get WebContents ID");
+    }
+
+    return new WebView(props, $element, webContentsId);
+  }
+
+  zoomFactor: number;
+  badgeCount: number;
+  loading: boolean;
+  customCss: string | false | null;
+  $webviewsContainer: DOMTokenList;
+  $el: HTMLElement;
+  webContentsId: number;
+
+  private constructor(
+    readonly props: WebViewProps,
+    $element: HTMLElement,
+    webContentsId: number,
+  ) {
+    this.zoomFactor = 1;
+    this.loading = true;
+    this.badgeCount = 0;
+    this.customCss = ConfigUtil.getConfigItem("customCSS", null);
+    this.$webviewsContainer = document.querySelector(
+      "#webviews-container",
+    )!.classList;
+    this.$el = $element;
+    this.webContentsId = webContentsId;
+
+    this.registerListeners();
+  }
+
+  getWebContents(): WebContents {
+    return remote.webContents.fromId(this.webContentsId);
+  }
+
+  registerListeners(): void {
+    const webContents = this.getWebContents();
+
+    if (shouldSilentWebview) {
+      webContents.setAudioMuted(true);
+    }
+
+    webContents.on("page-title-updated", (_event, title) => {
+      this.badgeCount = this.getBadgeCount(title);
+      this.props.onTitleChange();
+    });
+
+    this.$el.addEventListener("did-navigate-in-page", () => {
+      this.canGoBackButton();
+    });
+
+    this.$el.addEventListener("did-navigate", () => {
+      this.canGoBackButton();
+    });
+
+    webContents.on("page-favicon-updated", (_event, favicons) => {
+      // This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
+      // https://chat.zulip.org/static/images/favicon/favicon-pms.png
+      if (
+        favicons[0].indexOf("favicon-pms") > 0 &&
+        process.platform === "darwin"
+      ) {
+        // This api is only supported on macOS
+        app.dock.setBadge("●");
+        // Bounce the dock
+        if (ConfigUtil.getConfigItem("dockBouncing", true)) {
+          app.dock.bounce();
+        }
+      }
+    });
+
+    webContents.addListener("context-menu", (event, menuParameters) => {
+      contextMenu(webContents, event, menuParameters);
+    });
+
+    this.$el.addEventListener("dom-ready", () => {
+      this.loading = false;
+      this.props.switchLoading(false, this.props.url);
+      this.show();
+    });
+
+    webContents.on("did-fail-load", (_event, _errorCode, errorDescription) => {
+      const hasConnectivityError =
+        SystemUtil.connectivityError.includes(errorDescription);
+      if (hasConnectivityError) {
+        console.error("error", errorDescription);
+        if (!this.props.url.includes("network.html")) {
+          this.props.onNetworkError(this.props.index);
+        }
+      }
+    });
+
+    this.$el.addEventListener("did-start-loading", () => {
+      this.props.switchLoading(true, this.props.url);
+    });
+
+    this.$el.addEventListener("did-stop-loading", () => {
+      this.props.switchLoading(false, this.props.url);
+    });
+  }
+
+  getBadgeCount(title: string): number {
+    const messageCountInTitle = /^\((\d+)\)/.exec(title);
+    return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
+  }
+
+  showNotificationSettings(): void {
+    this.send("show-notification-settings");
+  }
+
+  show(): void {
+    // Do not show WebView if another tab was selected and this tab should be in background.
+    if (!this.props.isActive()) {
+      return;
+    }
+
+    // To show or hide the loading indicator in the the active tab
+    this.$webviewsContainer.toggle("loaded", !this.loading);
+
+    this.$el.classList.add("active");
+    this.focus();
+    this.props.onTitleChange();
+    // Injecting preload css in webview to override some css rules
+    (async () => this.getWebContents().insertCSS(preloadCss))();
+
+    // Get customCSS again from config util to avoid warning user again
+    const customCss = ConfigUtil.getConfigItem("customCSS", null);
+    this.customCss = customCss;
+    if (customCss) {
+      if (!fs.existsSync(customCss)) {
+        this.customCss = null;
+        ConfigUtil.setConfigItem("customCSS", null);
+
+        const errorMessage = "The custom css previously set is deleted!";
+        dialog.showErrorBox("custom css file deleted!", errorMessage);
+        return;
+      }
+
+      (async () =>
+        this.getWebContents().insertCSS(fs.readFileSync(customCss, "utf8")))();
+    }
+  }
+
+  focus(): void {
+    this.$el.focus();
+    // Work around https://github.com/electron/electron/issues/31918
+    this.$el.shadowRoot?.querySelector("iframe")?.focus();
+  }
+
+  hide(): void {
+    this.$el.classList.remove("active");
+  }
+
+  load(): void {
+    this.show();
+  }
+
+  zoomIn(): void {
+    this.zoomFactor += 0.1;
+    this.getWebContents().setZoomFactor(this.zoomFactor);
+  }
+
+  zoomOut(): void {
+    this.zoomFactor -= 0.1;
+    this.getWebContents().setZoomFactor(this.zoomFactor);
+  }
+
+  zoomActualSize(): void {
+    this.zoomFactor = 1;
+    this.getWebContents().setZoomFactor(this.zoomFactor);
+  }
+
+  logOut(): void {
+    this.send("logout");
+  }
+
+  showKeyboardShortcuts(): void {
+    this.send("show-keyboard-shortcuts");
+  }
+
+  openDevTools(): void {
+    this.getWebContents().openDevTools();
+  }
+
+  back(): void {
+    if (this.getWebContents().canGoBack()) {
+      this.getWebContents().goBack();
+      this.focus();
+    }
+  }
+
+  canGoBackButton(): void {
+    const $backButton = document.querySelector(
+      "#actions-container #back-action",
+    )!;
+    $backButton.classList.toggle("disable", !this.getWebContents().canGoBack());
+  }
+
+  forward(): void {
+    if (this.getWebContents().canGoForward()) {
+      this.getWebContents().goForward();
+    }
+  }
+
+  reload(): void {
+    this.hide();
+    // Shows the loading indicator till the webview is reloaded
+    this.$webviewsContainer.remove("loaded");
+    this.loading = true;
+    this.props.switchLoading(true, this.props.url);
+    this.getWebContents().reload();
+  }
+
+  send<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    ...args: Parameters<RendererMessage[Channel]>
+  ): void {
+    ipcRenderer.sendTo(this.webContentsId, channel, ...args);
+  }
+}

app/renderer/js/electron-bridge.ts

@@ -0,0 +1,111 @@
+import {EventEmitter} from "events"; // eslint-disable-line unicorn/prefer-node-protocol
+
+import type {ClipboardDecrypter} from "./clipboard-decrypter.js";
+import {ClipboardDecrypterImpl} from "./clipboard-decrypter.js";
+import type {NotificationData} from "./notification/index.js";
+import {newNotification} from "./notification/index.js";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
+
+type ListenerType = (...args: any[]) => void;
+
+export type ElectronBridge = {
+  send_event: (eventName: string | symbol, ...args: unknown[]) => boolean;
+  on_event: (eventName: string, listener: ListenerType) => void;
+  new_notification: (
+    title: string,
+    options: NotificationOptions,
+    dispatch: (type: string, eventInit: EventInit) => boolean,
+  ) => NotificationData;
+  get_idle_on_system: () => boolean;
+  get_last_active_on_system: () => number;
+  get_send_notification_reply_message_supported: () => boolean;
+  set_send_notification_reply_message_supported: (value: boolean) => void;
+  decrypt_clipboard: (version: number) => ClipboardDecrypter;
+};
+
+let notificationReplySupported = false;
+// Indicates if the user is idle or not
+let idle = false;
+// Indicates the time at which user was last active
+let lastActive = Date.now();
+
+export const bridgeEvents = new EventEmitter();
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const electron_bridge: ElectronBridge = {
+  send_event: (eventName: string | symbol, ...args: unknown[]): boolean =>
+    bridgeEvents.emit(eventName, ...args),
+
+  on_event(eventName: string, listener: ListenerType): void {
+    bridgeEvents.on(eventName, listener);
+  },
+
+  new_notification: (
+    title: string,
+    options: NotificationOptions,
+    dispatch: (type: string, eventInit: EventInit) => boolean,
+  ): NotificationData => newNotification(title, options, dispatch),
+
+  get_idle_on_system: (): boolean => idle,
+
+  get_last_active_on_system: (): number => lastActive,
+
+  get_send_notification_reply_message_supported: (): boolean =>
+    notificationReplySupported,
+
+  set_send_notification_reply_message_supported(value: boolean): void {
+    notificationReplySupported = value;
+  },
+
+  decrypt_clipboard: (version: number): ClipboardDecrypter =>
+    new ClipboardDecrypterImpl(version),
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
+bridgeEvents.on("total_unread_count", (unreadCount: unknown) => {
+  if (typeof unreadCount !== "number") {
+    throw new TypeError("Expected string for unreadCount");
+  }
+
+  ipcRenderer.send("unread-count", unreadCount);
+});
+
+bridgeEvents.on("realm_name", (realmName: unknown) => {
+  if (typeof realmName !== "string") {
+    throw new TypeError("Expected string for realmName");
+  }
+
+  const serverUrl = location.origin;
+  ipcRenderer.send("realm-name-changed", serverUrl, realmName);
+});
+
+bridgeEvents.on("realm_icon_url", (iconUrl: unknown) => {
+  if (typeof iconUrl !== "string") {
+    throw new TypeError("Expected string for iconUrl");
+  }
+
+  const serverUrl = location.origin;
+  ipcRenderer.send(
+    "realm-icon-changed",
+    serverUrl,
+    iconUrl.includes("http") ? iconUrl : `${serverUrl}${iconUrl}`,
+  );
+});
+
+// Set user as active and update the time of last activity
+ipcRenderer.on("set-active", () => {
+  idle = false;
+  lastActive = Date.now();
+});
+
+// Set user as idle and time of last activity is left unchanged
+ipcRenderer.on("set-idle", () => {
+  idle = true;
+});
+
+// This follows node's idiomatic implementation of event
+// emitters to make event handling more simpler instead of using
+// functions zulip side will emit event using ElectronBrigde.send_event
+// which is alias of .emit and on this side we can handle the data by adding
+// a listener for the event.
+export default electron_bridge;

app/renderer/js/injected.ts

@@ -0,0 +1,113 @@
+"use strict";
+
+type ElectronBridge = import("./electron-bridge.js").ElectronBridge;
+
+type CompatElectronBridge = {
+  readonly idle_on_system: boolean;
+  readonly last_active_on_system: number;
+  send_notification_reply_message_supported: boolean;
+} & ElectronBridge;
+
+(() => {
+  const zulipWindow = window as typeof window & {
+    electron_bridge: CompatElectronBridge;
+    raw_electron_bridge: ElectronBridge;
+  };
+
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const electron_bridge: CompatElectronBridge = {
+    ...zulipWindow.raw_electron_bridge,
+
+    get idle_on_system(): boolean {
+      return this.get_idle_on_system();
+    },
+
+    get last_active_on_system(): number {
+      return this.get_last_active_on_system();
+    },
+
+    get send_notification_reply_message_supported(): boolean {
+      return this.get_send_notification_reply_message_supported();
+    },
+
+    set send_notification_reply_message_supported(value: boolean) {
+      this.set_send_notification_reply_message_supported(value);
+    },
+  };
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  zulipWindow.electron_bridge = electron_bridge;
+
+  function attributeListener<T extends EventTarget>(
+    type: string,
+  ): PropertyDescriptor {
+    const handlers = new WeakMap<T, (event: Event) => unknown>();
+
+    function listener(this: T, event: Event): void {
+      if (handlers.get(this)!.call(this, event) === false) {
+        event.preventDefault();
+      }
+    }
+
+    return {
+      configurable: true,
+      enumerable: true,
+      get(this: T) {
+        return handlers.get(this);
+      },
+      set(this: T, value: unknown) {
+        if (typeof value === "function") {
+          if (!handlers.has(this)) {
+            this.addEventListener(type, listener);
+          }
+
+          handlers.set(this, value as (event: Event) => unknown);
+        } else if (handlers.has(this)) {
+          this.removeEventListener(type, listener);
+          handlers.delete(this);
+        }
+      },
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const NativeNotification = Notification;
+
+  class InjectedNotification extends EventTarget {
+    static get permission(): NotificationPermission {
+      return NativeNotification.permission;
+    }
+
+    static async requestPermission(
+      callback?: NotificationPermissionCallback,
+    ): Promise<NotificationPermission> {
+      if (callback) {
+        callback(await Promise.resolve(NativeNotification.permission));
+      }
+
+      return NativeNotification.permission;
+    }
+
+    constructor(title: string, options: NotificationOptions = {}) {
+      super();
+      Object.assign(
+        this,
+        electron_bridge.new_notification(
+          title,
+          options,
+          (type: string, eventInit: EventInit) =>
+            this.dispatchEvent(new Event(type, eventInit)),
+        ),
+      );
+    }
+  }
+
+  Object.defineProperties(InjectedNotification.prototype, {
+    onclick: attributeListener("click"),
+    onclose: attributeListener("close"),
+    onerror: attributeListener("error"),
+    onshow: attributeListener("show"),
+  });
+
+  window.Notification = InjectedNotification as unknown as typeof Notification;
+})();

app/renderer/js/main.js

@@ -1,30 +0,0 @@
-/* global app */
-// eslint-disable-next-line no-unused-vars
-function addDomain() {
-	const request = require('request');
-	const ipcRenderer = require('electron').ipcRenderer;
-	const JsonDB = require('node-json-db');
-
-	const db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-
-	document.getElementById('main').innerHTML = 'checking...';
-
-	let newDomain = document.getElementById('url').value;
-	newDomain = newDomain.replace(/^https?:\/\//, '');
-
-	const domain = 'https://' + newDomain;
-	const checkDomain = domain + '/static/audio/zulip.ogg';
-
-	request(checkDomain, (error, response) => {
-		if (!error && response.statusCode !== 404) {
-			document.getElementById('main').innerHTML = 'Connect';
-			db.push('/domain', domain);
-			ipcRenderer.send('new-domain', domain);
-			// window.location.href = domain;
-		} else {
-			document.getElementById('main').innerHTML = 'Connect';
-			document.getElementById('server-status').innerHTML = 'Not a vaild Zulip Server.';
-		}
-	});
-}
-

app/renderer/js/notification/index.ts

@@ -0,0 +1,41 @@
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+export type NotificationData = {
+  close: () => void;
+  title: string;
+  dir: NotificationDirection;
+  lang: string;
+  body: string;
+  tag: string;
+  icon: string;
+  data: unknown;
+};
+
+export function newNotification(
+  title: string,
+  options: NotificationOptions,
+  dispatch: (type: string, eventInit: EventInit) => boolean,
+): NotificationData {
+  const notification = new Notification(title, {...options, silent: true});
+  for (const type of ["click", "close", "error", "show"]) {
+    notification.addEventListener(type, (ev: Event) => {
+      if (type === "click") ipcRenderer.send("focus-this-webview");
+      if (!dispatch(type, ev)) {
+        ev.preventDefault();
+      }
+    });
+  }
+
+  return {
+    close() {
+      notification.close();
+    },
+    title: notification.title,
+    dir: notification.dir,
+    lang: notification.lang,
+    body: notification.body,
+    tag: notification.tag,
+    icon: notification.icon,
+    data: notification.data,
+  };
+}

app/renderer/js/pages/about.ts

@@ -0,0 +1,24 @@
+import {app} from "@electron/remote";
+
+import {bundleUrl} from "../../../common/paths.js";
+
+export class AboutView {
+  static async create(): Promise<AboutView> {
+    return new AboutView(
+      await (await fetch(new URL("app/renderer/about.html", bundleUrl))).text(),
+    );
+  }
+
+  readonly $view: HTMLElement;
+
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    const $shadow = this.$view.attachShadow({mode: "open"});
+    $shadow.innerHTML = templateHtml;
+    $shadow.querySelector("#version")!.textContent = `v${app.getVersion()}`;
+  }
+
+  destroy() {
+    // Do nothing.
+  }
+}

app/renderer/js/pages/network.ts

@@ -0,0 +1,13 @@
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+export function init(
+  $reconnectButton: Element,
+  $settingsButton: Element,
+): void {
+  $reconnectButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "reload-viewer");
+  });
+  $settingsButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-settings");
+  });
+}

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

@@ -0,0 +1,84 @@
+import type {Html} from "../../../../common/html.js";
+import {html} from "../../../../common/html.js";
+import {generateNodeFromHtml} from "../../components/base.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+
+type BaseSectionProps = {
+  $element: HTMLElement;
+  disabled?: boolean;
+  value: boolean;
+  clickHandler: () => void;
+};
+
+export function generateSettingOption(props: BaseSectionProps): void {
+  const {$element, disabled, value, clickHandler} = props;
+
+  $element.textContent = "";
+
+  const $optionControl = generateNodeFromHtml(
+    generateOptionHtml(value, disabled),
+  );
+  $element.append($optionControl);
+
+  if (!disabled) {
+    $optionControl.addEventListener("click", clickHandler);
+  }
+}
+
+export function generateOptionHtml(
+  settingOption: boolean,
+  disabled?: boolean,
+): Html {
+  const labelHtml = disabled
+    ? // eslint-disable-next-line unicorn/template-indent
+      html`<label
+        class="disallowed"
+        title="Setting locked by system administrator."
+      ></label>`
+    : html`<label></label>`;
+  if (settingOption) {
+    return html`
+      <div class="action">
+        <div class="switch">
+          <input class="toggle toggle-round" type="checkbox" checked disabled />
+          ${labelHtml}
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="action">
+      <div class="switch">
+        <input class="toggle toggle-round" type="checkbox" />
+        ${labelHtml}
+      </div>
+    </div>
+  `;
+}
+
+/* A method that in future can be used to create dropdown menus using <select> <option> tags.
+     it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
+  */
+export function generateSelectHtml(
+  options: Record<string, string>,
+  className?: string,
+  idName?: string,
+): Html {
+  const optionsHtml = html``.join(
+    Object.keys(options).map(
+      (key) => html`
+        <option name="${key}" value="${key}">${options[key]}</option>
+      `,
+    ),
+  );
+  return html`
+    <select class="${className}" id="${idName}">
+      ${optionsHtml}
+    </select>
+  `;
+}
+
+export function reloadApp(): void {
+  ipcRenderer.send("forward-message", "reload-viewer");
+}

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

@@ -0,0 +1,65 @@
+import {html} from "../../../../common/html.js";
+import * as t from "../../../../common/translation-util.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+import * as DomainUtil from "../../utils/domain-util.js";
+
+import {reloadApp} from "./base-section.js";
+import {initFindAccounts} from "./find-accounts.js";
+import {initServerInfoForm} from "./server-info-form.js";
+
+type ConnectedOrgSectionProps = {
+  $root: Element;
+};
+
+export function initConnectedOrgSection({
+  $root,
+}: ConnectedOrgSectionProps): void {
+  $root.textContent = "";
+
+  const servers = DomainUtil.getDomains();
+  $root.innerHTML = html`
+    <div class="settings-pane" id="server-settings-pane">
+      <div class="page-title">${t.__("Connected organizations")}</div>
+      <div class="title" id="existing-servers">
+        ${t.__("All the connected orgnizations will appear here.")}
+      </div>
+      <div id="server-info-container"></div>
+      <div id="new-org-button">
+        <button class="green sea w-250">
+          ${t.__("Connect to another organization")}
+        </button>
+      </div>
+      <div class="page-title">${t.__("Find accounts by email")}</div>
+      <div id="find-accounts-container"></div>
+    </div>
+  `.html;
+
+  const $serverInfoContainer = $root.querySelector("#server-info-container")!;
+  const $existingServers = $root.querySelector("#existing-servers")!;
+  const $newOrgButton: HTMLButtonElement =
+    $root.querySelector("#new-org-button")!;
+  const $findAccountsContainer = $root.querySelector(
+    "#find-accounts-container",
+  )!;
+
+  const noServerText = t.__("All the connected orgnizations will appear here");
+  // Show noServerText if no servers are there otherwise hide it
+  $existingServers.textContent = servers.length === 0 ? noServerText : "";
+
+  for (const [i, server] of servers.entries()) {
+    initServerInfoForm({
+      $root: $serverInfoContainer,
+      server,
+      index: i,
+      onChange: reloadApp,
+    });
+  }
+
+  $newOrgButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-org-tab");
+  });
+
+  initFindAccounts({
+    $root: $findAccountsContainer,
+  });
+}

app/renderer/js/pages/preference/find-accounts.ts

@@ -0,0 +1,66 @@
+import {html} from "../../../../common/html.js";
+import * as LinkUtil from "../../../../common/link-util.js";
+import * as t from "../../../../common/translation-util.js";
+import {generateNodeFromHtml} from "../../components/base.js";
+
+type FindAccountsProps = {
+  $root: Element;
+};
+
+async function findAccounts(url: string): Promise<void> {
+  if (!url) {
+    return;
+  }
+
+  if (!url.startsWith("http")) {
+    url = "https://" + url;
+  }
+
+  await LinkUtil.openBrowser(new URL("/accounts/find", url));
+}
+
+export function initFindAccounts(props: FindAccountsProps): void {
+  const $findAccounts = generateNodeFromHtml(html`
+    <div class="settings-card certificate-card">
+      <div class="certificate-input">
+        <div>${t.__("Organization URL")}</div>
+        <input class="setting-input-value" value="zulipchat.com" />
+      </div>
+      <div class="certificate-input">
+        <button class="green w-150" id="find-accounts-button">
+          ${t.__("Find accounts")}
+        </button>
+      </div>
+    </div>
+  `);
+  props.$root.append($findAccounts);
+  const $findAccountsButton = $findAccounts.querySelector(
+    "#find-accounts-button",
+  )!;
+  const $serverUrlField: HTMLInputElement = $findAccounts.querySelector(
+    "input.setting-input-value",
+  )!;
+
+  $findAccountsButton.addEventListener("click", async () => {
+    await findAccounts($serverUrlField.value);
+  });
+
+  $serverUrlField.addEventListener("click", () => {
+    if ($serverUrlField.value === "zulipchat.com") {
+      $serverUrlField.setSelectionRange(0, 0);
+    }
+  });
+
+  $serverUrlField.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+      await findAccounts($serverUrlField.value);
+    }
+  });
+
+  $serverUrlField.addEventListener("input", () => {
+    $serverUrlField.classList.toggle(
+      "invalid-input-value",
+      $serverUrlField.value === "",
+    );
+  });
+}

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

@@ -0,0 +1,691 @@
+import type {OpenDialogOptions} from "electron/renderer";
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+import * as remote from "@electron/remote";
+import {app, dialog, session} from "@electron/remote";
+import Tagify from "@yaireo/tagify";
+import ISO6391 from "iso-639-1";
+import * as z from "zod";
+
+import supportedLocales from "../../../../../public/translations/supported-locales.json";
+import * as ConfigUtil from "../../../../common/config-util.js";
+import * as EnterpriseUtil from "../../../../common/enterprise-util.js";
+import {html} from "../../../../common/html.js";
+import * as t from "../../../../common/translation-util.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+
+import {generateSelectHtml, generateSettingOption} from "./base-section.js";
+
+const currentBrowserWindow = remote.getCurrentWindow();
+
+type GeneralSectionProps = {
+  $root: Element;
+};
+
+export function initGeneralSection({$root}: GeneralSectionProps): void {
+  $root.innerHTML = html`
+    <div class="settings-pane">
+      <div class="title">${t.__("Appearance")}</div>
+      <div id="appearance-option-settings" class="settings-card">
+        <div class="setting-row" id="tray-option">
+          <div class="setting-description">
+            ${t.__("Show app icon in system tray")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div
+          class="setting-row"
+          id="menubar-option"
+          style="display:${process.platform === "darwin" ? "none" : ""}"
+        >
+          <div class="setting-description">
+            ${t.__("Auto hide menu bar (Press Alt key to display)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="sidebar-option">
+          <div class="setting-description">
+            ${t.__("Show sidebar")} (<span class="code"
+              >${process.platform === "darwin"
+                ? "Cmd+Shift+S"
+                : "Ctrl+Shift+S"}</span
+            >)
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="badge-option">
+          <div class="setting-description">
+            ${t.__("Show app unread badge")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div
+          class="setting-row"
+          id="dock-bounce-option"
+          style="display:${process.platform === "darwin" ? "" : "none"}"
+        >
+          <div class="setting-description">
+            ${t.__("Bounce dock on new private message")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div
+          class="setting-row"
+          id="flash-taskbar-option"
+          style="display:${process.platform === "win32" ? "" : "none"}"
+        >
+          <div class="setting-description">
+            ${t.__("Flash taskbar on new message")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("Desktop Notifications")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="show-notification-option">
+          <div class="setting-description">
+            ${t.__("Show desktop notifications")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="silent-option">
+          <div class="setting-description">
+            ${t.__("Mute all sounds from Zulip")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("App Updates")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="autoupdate-option">
+          <div class="setting-description">${t.__("Enable auto updates")}</div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="betaupdate-option">
+          <div class="setting-description">${t.__("Get beta updates")}</div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("Functionality")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="startAtLogin-option">
+          <div class="setting-description">${t.__("Start app at login")}</div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="start-minimize-option">
+          <div class="setting-description">
+            ${t.__("Always start minimized")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="quitOnClose-option">
+          <div class="setting-description">
+            ${t.__("Quit when the window is closed")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="enable-spellchecker-option">
+          <div class="setting-description">
+            ${t.__("Enable spellchecker (requires restart)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div
+          class="setting-row"
+          id="spellcheck-langs"
+          style="display:${process.platform === "darwin" ? "none" : ""}"
+        ></div>
+        <div class="setting-row" id="note"></div>
+      </div>
+
+      <div class="title">${t.__("Advanced")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="enable-error-reporting">
+          <div class="setting-description">
+            ${t.__("Enable error reporting (requires restart)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+
+        <div class="setting-row" id="app-language">
+          <div class="setting-description">
+            ${t.__("App language (requires restart)")}
+          </div>
+          <div id="lang-div" class="lang-div"></div>
+        </div>
+
+        <div class="setting-row" id="add-custom-css">
+          <div class="setting-description">${t.__("Add custom CSS")}</div>
+          <button class="custom-css-button green">${t.__("Upload")}</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>${t.__("Delete")}</span>
+          </div>
+        </div>
+        <div class="setting-row" id="download-folder">
+          <div class="setting-description">
+            ${t.__("Default download location")}
+          </div>
+          <button class="download-folder-button green">
+            ${t.__("Change")}
+          </button>
+        </div>
+        <div class="setting-row">
+          <div class="setting-description">
+            <div class="download-folder-path">
+              ${ConfigUtil.getConfigItem(
+                "downloadsPath",
+                app.getPath("downloads"),
+              )}
+            </div>
+          </div>
+        </div>
+        <div class="setting-row" id="prompt-download">
+          <div class="setting-description">
+            ${t.__("Ask where to save files before downloading")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("Factory Reset Data")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="factory-reset-option">
+          <div class="setting-description">
+            ${t.__(
+              "Reset the application, thus deleting all the connected organizations and accounts.",
+            )}
+          </div>
+          <button class="factory-reset-button red w-150">
+            ${t.__("Factory Reset")}
+          </button>
+        </div>
+      </div>
+    </div>
+  `.html;
+
+  updateTrayOption();
+  updateBadgeOption();
+  updateSilentOption();
+  autoUpdateOption();
+  betaUpdateOption();
+  updateSidebarOption();
+  updateStartAtLoginOption();
+  factoryReset();
+  showDesktopNotification();
+  enableSpellchecker();
+  minimizeOnStart();
+  addCustomCss();
+  showCustomCssPath();
+  removeCustomCss();
+  downloadFolder();
+  updateQuitOnCloseOption();
+  updatePromptDownloadOption();
+  enableErrorReporting();
+  setLocale();
+  initSpellChecker();
+
+  // Platform specific settings
+
+  // Flashing taskbar on Windows
+  if (process.platform === "win32") {
+    updateFlashTaskbar();
+  }
+
+  // Dock bounce on macOS
+  if (process.platform === "darwin") {
+    updateDockBouncing();
+  }
+
+  // Auto hide menubar on Windows and Linux
+  if (process.platform !== "darwin") {
+    updateMenubarOption();
+  }
+
+  function updateTrayOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#tray-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("trayIcon", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("trayIcon", true);
+        ConfigUtil.setConfigItem("trayIcon", newValue);
+        ipcRenderer.send("forward-message", "toggletray");
+        updateTrayOption();
+      },
+    });
+  }
+
+  function updateMenubarOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#menubar-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("autoHideMenubar", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
+        ConfigUtil.setConfigItem("autoHideMenubar", newValue);
+        ipcRenderer.send("toggle-menubar", newValue);
+        updateMenubarOption();
+      },
+    });
+  }
+
+  function updateBadgeOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#badge-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("badgeOption", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("badgeOption", true);
+        ConfigUtil.setConfigItem("badgeOption", newValue);
+        ipcRenderer.send("toggle-badge-option", newValue);
+        updateBadgeOption();
+      },
+    });
+  }
+
+  function updateDockBouncing(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#dock-bounce-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("dockBouncing", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("dockBouncing", true);
+        ConfigUtil.setConfigItem("dockBouncing", newValue);
+        updateDockBouncing();
+      },
+    });
+  }
+
+  function updateFlashTaskbar(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#flash-taskbar-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem(
+          "flashTaskbarOnMessage",
+          true,
+        );
+        ConfigUtil.setConfigItem("flashTaskbarOnMessage", newValue);
+        updateFlashTaskbar();
+      },
+    });
+  }
+
+  function autoUpdateOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#autoupdate-option .setting-control")!,
+      disabled: EnterpriseUtil.configItemExists("autoUpdate"),
+      value: ConfigUtil.getConfigItem("autoUpdate", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("autoUpdate", true);
+        ConfigUtil.setConfigItem("autoUpdate", newValue);
+        if (!newValue) {
+          ConfigUtil.setConfigItem("betaUpdate", false);
+          betaUpdateOption();
+        }
+
+        autoUpdateOption();
+      },
+    });
+  }
+
+  function betaUpdateOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#betaupdate-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("betaUpdate", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("betaUpdate", false);
+        if (ConfigUtil.getConfigItem("autoUpdate", true)) {
+          ConfigUtil.setConfigItem("betaUpdate", newValue);
+          betaUpdateOption();
+        }
+      },
+    });
+  }
+
+  function updateSilentOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#silent-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("silent", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("silent", true);
+        ConfigUtil.setConfigItem("silent", newValue);
+        updateSilentOption();
+        ipcRenderer.sendTo(
+          currentBrowserWindow.webContents.id,
+          "toggle-silent",
+          newValue,
+        );
+      },
+    });
+  }
+
+  function showDesktopNotification(): void {
+    generateSettingOption({
+      $element: $root.querySelector(
+        "#show-notification-option .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("showNotification", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("showNotification", true);
+        ConfigUtil.setConfigItem("showNotification", newValue);
+        showDesktopNotification();
+      },
+    });
+  }
+
+  function updateSidebarOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#sidebar-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("showSidebar", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
+        ConfigUtil.setConfigItem("showSidebar", newValue);
+        ipcRenderer.send("forward-message", "toggle-sidebar", newValue);
+        updateSidebarOption();
+      },
+    });
+  }
+
+  function updateStartAtLoginOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#startAtLogin-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("startAtLogin", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("startAtLogin", false);
+        ConfigUtil.setConfigItem("startAtLogin", newValue);
+        ipcRenderer.send("toggleAutoLauncher", newValue);
+        updateStartAtLoginOption();
+      },
+    });
+  }
+
+  function updateQuitOnCloseOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#quitOnClose-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("quitOnClose", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("quitOnClose", false);
+        ConfigUtil.setConfigItem("quitOnClose", newValue);
+        updateQuitOnCloseOption();
+      },
+    });
+  }
+
+  function enableSpellchecker(): void {
+    generateSettingOption({
+      $element: $root.querySelector(
+        "#enable-spellchecker-option .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("enableSpellchecker", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("enableSpellchecker", true);
+        ConfigUtil.setConfigItem("enableSpellchecker", newValue);
+        ipcRenderer.send("configure-spell-checker");
+        enableSpellchecker();
+        const spellcheckerLanguageInput: HTMLElement =
+          $root.querySelector("#spellcheck-langs")!;
+        const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
+        spellcheckerLanguageInput.style.display =
+          spellcheckerLanguageInput.style.display === "none" ? "" : "none";
+        spellcheckerNote.style.display =
+          spellcheckerNote.style.display === "none" ? "" : "none";
+      },
+    });
+  }
+
+  function enableErrorReporting(): void {
+    generateSettingOption({
+      $element: $root.querySelector(
+        "#enable-error-reporting .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("errorReporting", true),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("errorReporting", true);
+        ConfigUtil.setConfigItem("errorReporting", newValue);
+        enableErrorReporting();
+      },
+    });
+  }
+
+  async function customCssDialog(): Promise<void> {
+    const showDialogOptions: OpenDialogOptions = {
+      title: "Select file",
+      properties: ["openFile"],
+      filters: [{name: "CSS file", extensions: ["css"]}],
+    };
+
+    const {filePaths, canceled} = await dialog.showOpenDialog(
+      showDialogOptions,
+    );
+    if (!canceled) {
+      ConfigUtil.setConfigItem("customCSS", filePaths[0]);
+      ipcRenderer.send("forward-message", "hard-reload");
+    }
+  }
+
+  function setLocale(): void {
+    const langDiv: HTMLSelectElement = $root.querySelector(".lang-div")!;
+    const langListHtml = generateSelectHtml(supportedLocales, "lang-menu");
+    langDiv.innerHTML += langListHtml.html;
+    // `langMenu` is the select-option dropdown menu formed after executing the previous command
+    const langMenu: HTMLSelectElement = $root.querySelector(".lang-menu")!;
+
+    // The next three lines set the selected language visible on the dropdown button
+    let language = ConfigUtil.getConfigItem("appLanguage", "en");
+    language =
+      language && langMenu.options.namedItem(language) ? language : "en";
+    langMenu.options.namedItem(language)!.selected = true;
+
+    langMenu.addEventListener("change", () => {
+      ConfigUtil.setConfigItem("appLanguage", langMenu.value);
+    });
+  }
+
+  function minimizeOnStart(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#start-minimize-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("startMinimized", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("startMinimized", false);
+        ConfigUtil.setConfigItem("startMinimized", newValue);
+        minimizeOnStart();
+      },
+    });
+  }
+
+  function addCustomCss(): void {
+    const customCssButton = $root.querySelector(
+      "#add-custom-css .custom-css-button",
+    )!;
+    customCssButton.addEventListener("click", async () => {
+      await customCssDialog();
+    });
+  }
+
+  function showCustomCssPath(): void {
+    if (!ConfigUtil.getConfigItem("customCSS", null)) {
+      const cssPath: HTMLElement = $root.querySelector("#remove-custom-css")!;
+      cssPath.style.display = "none";
+    }
+  }
+
+  function removeCustomCss(): void {
+    const removeCssButton = $root.querySelector("#css-delete-action")!;
+    removeCssButton.addEventListener("click", () => {
+      ConfigUtil.setConfigItem("customCSS", "");
+      ipcRenderer.send("forward-message", "hard-reload");
+    });
+  }
+
+  async function downloadFolderDialog(): Promise<void> {
+    const showDialogOptions: OpenDialogOptions = {
+      title: "Select Download Location",
+      properties: ["openDirectory"],
+    };
+
+    const {filePaths, canceled} = await dialog.showOpenDialog(
+      showDialogOptions,
+    );
+    if (!canceled) {
+      ConfigUtil.setConfigItem("downloadsPath", filePaths[0]);
+      const downloadFolderPath: HTMLElement = $root.querySelector(
+        ".download-folder-path",
+      )!;
+      downloadFolderPath.textContent = filePaths[0];
+    }
+  }
+
+  function downloadFolder(): void {
+    const downloadFolder = $root.querySelector(
+      "#download-folder .download-folder-button",
+    )!;
+    downloadFolder.addEventListener("click", async () => {
+      await downloadFolderDialog();
+    });
+  }
+
+  function updatePromptDownloadOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#prompt-download .setting-control")!,
+      value: ConfigUtil.getConfigItem("promptDownload", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("promptDownload", false);
+        ConfigUtil.setConfigItem("promptDownload", newValue);
+        updatePromptDownloadOption();
+      },
+    });
+  }
+
+  async function factoryResetSettings(): Promise<void> {
+    const clearAppDataMessage =
+      "When the application restarts, it will be as if you have just downloaded Zulip app.";
+    const getAppPath = path.join(app.getPath("appData"), app.name);
+
+    const {response} = await dialog.showMessageBox({
+      type: "warning",
+      buttons: ["YES", "NO"],
+      defaultId: 0,
+      message: "Are you sure?",
+      detail: clearAppDataMessage,
+    });
+    if (response === 0) {
+      await fs.promises.rmdir(getAppPath, {recursive: true});
+      setTimeout(() => {
+        ipcRenderer.send("clear-app-settings");
+      }, 1000);
+    }
+  }
+
+  function factoryReset(): void {
+    const factoryResetButton = $root.querySelector(
+      "#factory-reset-option .factory-reset-button",
+    )!;
+    factoryResetButton.addEventListener("click", async () => {
+      await factoryResetSettings();
+    });
+  }
+
+  function initSpellChecker(): void {
+    // The elctron API is a no-op on macOS and macOS default spellchecker is used.
+    if (process.platform === "darwin") {
+      const note: HTMLElement = $root.querySelector("#note")!;
+      note.append(t.__("On macOS, the OS spellchecker is used."));
+      note.append(document.createElement("br"));
+      note.append(
+        t.__(
+          "Change the language from System Preferences → Keyboard → Text → Spelling.",
+        ),
+      );
+    } else {
+      const note: HTMLElement = $root.querySelector("#note")!;
+      note.append(
+        t.__("You can select a maximum of 3 languages for spellchecking."),
+      );
+      const spellDiv: HTMLElement = $root.querySelector("#spellcheck-langs")!;
+      spellDiv.innerHTML += html`
+        <div class="setting-description">${t.__("Spellchecker Languages")}</div>
+        <input name="spellcheck" placeholder="Enter Languages" />
+      `.html;
+
+      const availableLanguages = session.fromPartition(
+        "persist:webviewsession",
+      ).availableSpellCheckerLanguages;
+      let languagePairs = new Map<string, string>();
+      for (const l of availableLanguages) {
+        if (ISO6391.validate(l)) {
+          languagePairs.set(ISO6391.getName(l), l);
+        }
+      }
+
+      // Manually set names for languages not available in ISO6391
+      languagePairs.set("English (AU)", "en-AU");
+      languagePairs.set("English (CA)", "en-CA");
+      languagePairs.set("English (GB)", "en-GB");
+      languagePairs.set("English (US)", "en-US");
+      languagePairs.set("Spanish (Latin America)", "es-419");
+      languagePairs.set("Spanish (Argentina)", "es-AR");
+      languagePairs.set("Spanish (Mexico)", "es-MX");
+      languagePairs.set("Spanish (US)", "es-US");
+      languagePairs.set("Portuguese (Brazil)", "pt-BR");
+      languagePairs.set("Portuguese (Portugal)", "pt-PT");
+      languagePairs.set("Serbo-Croatian", "sh");
+
+      languagePairs = new Map(
+        [...languagePairs].sort((a, b) => (a[0] < b[0] ? -1 : 1)),
+      );
+
+      const tagField: HTMLInputElement = $root.querySelector(
+        "input[name=spellcheck]",
+      )!;
+      const tagify = new Tagify(tagField, {
+        whitelist: [...languagePairs.keys()],
+        enforceWhitelist: true,
+        maxTags: 3,
+        dropdown: {
+          enabled: 0,
+          maxItems: Number.POSITIVE_INFINITY,
+          closeOnSelect: false,
+          highlightFirst: true,
+        },
+      });
+
+      const configuredLanguages: string[] = (
+        ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? []
+      ).map(
+        (code: string) =>
+          [...languagePairs].find((pair) => pair[1] === code)![0],
+      );
+      tagify.addTags(configuredLanguages);
+
+      tagField.addEventListener("change", () => {
+        if (tagField.value.length === 0) {
+          ConfigUtil.setConfigItem("spellcheckerLanguages", []);
+          ipcRenderer.send("configure-spell-checker");
+        } else {
+          const data: unknown = JSON.parse(tagField.value);
+          const spellLangs: string[] = z
+            .array(z.object({value: z.string()}))
+            .parse(data)
+            .map((elt) => languagePairs.get(elt.value)!);
+          ConfigUtil.setConfigItem("spellcheckerLanguages", spellLangs);
+          ipcRenderer.send("configure-spell-checker");
+        }
+      });
+    }
+
+    // Do not display the spellchecker input and note if it is disabled
+    if (!ConfigUtil.getConfigItem("enableSpellchecker", true)) {
+      const spellcheckerLanguageInput: HTMLElement =
+        $root.querySelector("#spellcheck-langs")!;
+      const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
+      spellcheckerLanguageInput.style.display = "none";
+      spellcheckerNote.style.display = "none";
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+import type {Html} from "../../../../common/html.js";
+import {html} from "../../../../common/html.js";
+import * as t from "../../../../common/translation-util.js";
+import type {NavItem} from "../../../../common/types.js";
+import {generateNodeFromHtml} from "../../components/base.js";
+
+type PreferenceNavProps = {
+  $root: Element;
+  onItemSelected: (navItem: NavItem) => void;
+};
+
+export default class PreferenceNav {
+  navItems: NavItem[];
+  $el: Element;
+  constructor(private readonly props: PreferenceNavProps) {
+    this.navItems = [
+      "General",
+      "Network",
+      "AddServer",
+      "Organizations",
+      "Shortcuts",
+    ];
+
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    this.props.$root.append(this.$el);
+    this.registerListeners();
+  }
+
+  templateHtml(): Html {
+    const navItemsHtml = html``.join(
+      this.navItems.map(
+        (navItem) => html`
+          <div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>
+        `,
+      ),
+    );
+
+    return html`
+      <div>
+        <div id="settings-header">${t.__("Settings")}</div>
+        <div id="nav-container">${navItemsHtml}</div>
+      </div>
+    `;
+  }
+
+  registerListeners(): void {
+    for (const navItem of this.navItems) {
+      const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+      $item.addEventListener("click", () => {
+        this.props.onItemSelected(navItem);
+      });
+    }
+  }
+
+  select(navItemToSelect: NavItem): void {
+    for (const navItem of this.navItems) {
+      if (navItem === navItemToSelect) {
+        this.activate(navItem);
+      } else {
+        this.deactivate(navItem);
+      }
+    }
+  }
+
+  activate(navItem: NavItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+    $item.classList.add("active");
+  }
+
+  deactivate(navItem: NavItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+    $item.classList.remove("active");
+  }
+}

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

@@ -0,0 +1,136 @@
+import * as ConfigUtil from "../../../../common/config-util.js";
+import {html} from "../../../../common/html.js";
+import * as t from "../../../../common/translation-util.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+
+import {generateSettingOption} from "./base-section.js";
+
+type NetworkSectionProps = {
+  $root: Element;
+};
+
+export function initNetworkSection({$root}: NetworkSectionProps): void {
+  $root.innerHTML = html`
+    <div class="settings-pane">
+      <div class="title">${t.__("Proxy")}</div>
+      <div id="appearance-option-settings" class="settings-card">
+        <div class="setting-row" id="use-system-settings">
+          <div class="setting-description">
+            ${t.__("Use system proxy settings (requires restart)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="use-manual-settings">
+          <div class="setting-description">
+            ${t.__("Manual proxy configuration")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="manual-proxy-block">
+          <div class="setting-row" id="proxy-pac-option">
+            <span class="setting-input-key">PAC ${t.__("script")}</span>
+            <input
+              class="setting-input-value"
+              placeholder="e.g. foobar.com/pacfile.js"
+            />
+          </div>
+          <div class="setting-row" id="proxy-rules-option">
+            <span class="setting-input-key">${t.__("Proxy rules")}</span>
+            <input
+              class="setting-input-value"
+              placeholder="e.g. http=foopy:80;ftp=foopy2"
+            />
+          </div>
+          <div class="setting-row" id="proxy-bypass-option">
+            <span class="setting-input-key">${t.__("Proxy bypass rules")}</span>
+            <input class="setting-input-value" placeholder="e.g. foobar.com" />
+          </div>
+          <div class="setting-row">
+            <div class="action green" id="proxy-save-action">
+              <span>${t.__("Save")}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `.html;
+
+  const $proxyPac: HTMLInputElement = $root.querySelector(
+    "#proxy-pac-option .setting-input-value",
+  )!;
+  const $proxyRules: HTMLInputElement = $root.querySelector(
+    "#proxy-rules-option .setting-input-value",
+  )!;
+  const $proxyBypass: HTMLInputElement = $root.querySelector(
+    "#proxy-bypass-option .setting-input-value",
+  )!;
+  const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
+  const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
+
+  toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
+  updateProxyOption();
+
+  $proxyPac.value = ConfigUtil.getConfigItem("proxyPAC", "");
+  $proxyRules.value = ConfigUtil.getConfigItem("proxyRules", "");
+  $proxyBypass.value = ConfigUtil.getConfigItem("proxyBypass", "");
+
+  $proxySaveAction.addEventListener("click", () => {
+    ConfigUtil.setConfigItem("proxyPAC", $proxyPac.value);
+    ConfigUtil.setConfigItem("proxyRules", $proxyRules.value);
+    ConfigUtil.setConfigItem("proxyBypass", $proxyBypass.value);
+
+    ipcRenderer.send("forward-message", "reload-proxy", true);
+  });
+
+  function toggleManualProxySettings(option: boolean): void {
+    $manualProxyBlock.classList.toggle("hidden", !option);
+  }
+
+  function updateProxyOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#use-system-settings .setting-control")!,
+      value: ConfigUtil.getConfigItem("useSystemProxy", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
+        const manualProxyValue = ConfigUtil.getConfigItem(
+          "useManualProxy",
+          false,
+        );
+        if (manualProxyValue && newValue) {
+          ConfigUtil.setConfigItem("useManualProxy", !manualProxyValue);
+          toggleManualProxySettings(!manualProxyValue);
+        }
+
+        if (!newValue) {
+          // Remove proxy system proxy settings
+          ConfigUtil.setConfigItem("proxyRules", "");
+          ipcRenderer.send("forward-message", "reload-proxy", false);
+        }
+
+        ConfigUtil.setConfigItem("useSystemProxy", newValue);
+        updateProxyOption();
+      },
+    });
+    generateSettingOption({
+      $element: $root.querySelector("#use-manual-settings .setting-control")!,
+      value: ConfigUtil.getConfigItem("useManualProxy", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);
+        const systemProxyValue = ConfigUtil.getConfigItem(
+          "useSystemProxy",
+          false,
+        );
+        toggleManualProxySettings(newValue);
+        if (systemProxyValue && newValue) {
+          ConfigUtil.setConfigItem("useSystemProxy", !systemProxyValue);
+        }
+
+        ConfigUtil.setConfigItem("proxyRules", "");
+        ConfigUtil.setConfigItem("useManualProxy", newValue);
+        // Reload app only when turning manual proxy off, hence !newValue
+        ipcRenderer.send("forward-message", "reload-proxy", !newValue);
+        updateProxyOption();
+      },
+    });
+  }
+}

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

@@ -0,0 +1,103 @@
+import {dialog} from "@electron/remote";
+
+import {html} from "../../../../common/html.js";
+import * as LinkUtil from "../../../../common/link-util.js";
+import * as t from "../../../../common/translation-util.js";
+import {generateNodeFromHtml} from "../../components/base.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+import * as DomainUtil from "../../utils/domain-util.js";
+
+type NewServerFormProps = {
+  $root: Element;
+  onChange: () => void;
+};
+
+export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
+  const $newServerForm = generateNodeFromHtml(html`
+    <div class="server-input-container">
+      <div class="title">${t.__("Organization URL")}</div>
+      <div class="add-server-info-row">
+        <input
+          class="setting-input-value"
+          autofocus
+          placeholder="your-organization.zulipchat.com or zulip.your-organization.com"
+        />
+      </div>
+      <div class="server-center">
+        <button id="connect">${t.__("Connect")}</button>
+      </div>
+      <div class="server-center">
+        <div class="divider">
+          <hr class="left" />
+          ${t.__("OR")}
+          <hr class="right" />
+        </div>
+      </div>
+      <div class="server-center">
+        <button id="open-create-org-link">
+          ${t.__("Create a new organization")}
+        </button>
+      </div>
+      <div class="server-center">
+        <div class="server-network-option">
+          <span id="open-network-settings"
+            >${t.__("Network and Proxy Settings")}</span
+          >
+          <i class="material-icons open-network-button">open_in_new</i>
+        </div>
+      </div>
+    </div>
+  `);
+  const $saveServerButton: HTMLButtonElement =
+    $newServerForm.querySelector("#connect")!;
+  $root.textContent = "";
+  $root.append($newServerForm);
+  const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
+    "input.setting-input-value",
+  )!;
+
+  async function submitFormHandler(): Promise<void> {
+    $saveServerButton.textContent = "Connecting...";
+    let serverConf;
+    try {
+      serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim());
+    } catch (error: unknown) {
+      $saveServerButton.textContent = "Connect";
+      await dialog.showMessageBox({
+        type: "error",
+        message:
+          error instanceof Error
+            ? `${error.name}: ${error.message}`
+            : "Unknown error",
+        buttons: ["OK"],
+      });
+      return;
+    }
+
+    await DomainUtil.addDomain(serverConf);
+    onChange();
+  }
+
+  $saveServerButton.addEventListener("click", async () => {
+    await submitFormHandler();
+  });
+  $newServerUrl.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+      await submitFormHandler();
+    }
+  });
+
+  // Open create new org link in default browser
+  const link = "https://zulip.com/new/";
+  const externalCreateNewOrgElement = $root.querySelector(
+    "#open-create-org-link",
+  )!;
+  externalCreateNewOrgElement.addEventListener("click", async () => {
+    await LinkUtil.openBrowser(new URL(link));
+  });
+
+  const networkSettingsId = $root.querySelector(".server-network-option")!;
+  networkSettingsId.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-network-settings");
+  });
+}

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

@@ -0,0 +1,141 @@
+import process from "node:process";
+
+import type {DndSettings} from "../../../../common/dnd-util.js";
+import {bundleUrl} from "../../../../common/paths.js";
+import type {NavItem} from "../../../../common/types.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+
+import {initConnectedOrgSection} from "./connected-org-section.js";
+import {initGeneralSection} from "./general-section.js";
+import Nav from "./nav.js";
+import {initNetworkSection} from "./network-section.js";
+import {initServersSection} from "./servers-section.js";
+import {initShortcutsSection} from "./shortcuts-section.js";
+
+export class PreferenceView {
+  static async create(): Promise<PreferenceView> {
+    return new PreferenceView(
+      await (
+        await fetch(new URL("app/renderer/preference.html", bundleUrl))
+      ).text(),
+    );
+  }
+
+  readonly $view: HTMLElement;
+  private readonly $shadow: ShadowRoot;
+  private readonly $settingsContainer: Element;
+  private readonly nav: Nav;
+  private navItem: NavItem = "General";
+
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    this.$shadow = this.$view.attachShadow({mode: "open"});
+    this.$shadow.innerHTML = templateHtml;
+
+    const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
+    this.$settingsContainer = this.$shadow.querySelector(
+      "#settings-container",
+    )!;
+
+    this.nav = new Nav({
+      $root: $sidebarContainer,
+      onItemSelected: this.handleNavigation,
+    });
+
+    ipcRenderer.on("toggle-sidebar", this.handleToggleSidebar);
+    ipcRenderer.on("toggle-autohide-menubar", this.handleToggleMenubar);
+    ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
+
+    this.handleNavigation(this.navItem);
+  }
+
+  handleNavigation = (navItem: NavItem): void => {
+    this.navItem = navItem;
+    this.nav.select(navItem);
+    switch (navItem) {
+      case "AddServer": {
+        initServersSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "General": {
+        initGeneralSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Organizations": {
+        initConnectedOrgSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Network": {
+        initNetworkSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Shortcuts": {
+        initShortcutsSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      default: {
+        ((n: never) => n)(navItem);
+      }
+    }
+
+    window.location.hash = `#${navItem}`;
+  };
+
+  handleToggleTray(state: boolean) {
+    this.handleToggle("tray-option", state);
+  }
+
+  destroy(): void {
+    ipcRenderer.off("toggle-sidebar", this.handleToggleSidebar);
+    ipcRenderer.off("toggle-autohide-menubar", this.handleToggleMenubar);
+    ipcRenderer.off("toggle-dnd", this.handleToggleDnd);
+  }
+
+  // Handle toggling and reflect changes in preference page
+  private handleToggle(elementName: string, state = false): void {
+    const inputSelector = `#${elementName} .action .switch input`;
+    const input: HTMLInputElement = this.$shadow.querySelector(inputSelector)!;
+    if (input) {
+      input.checked = state;
+    }
+  }
+
+  private readonly handleToggleSidebar = (_event: Event, state: boolean) => {
+    this.handleToggle("sidebar-option", state);
+  };
+
+  private readonly handleToggleMenubar = (_event: Event, state: boolean) => {
+    this.handleToggle("menubar-option", state);
+  };
+
+  private readonly handleToggleDnd = (
+    _event: Event,
+    _state: boolean,
+    newSettings: Partial<DndSettings>,
+  ) => {
+    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.ts

@@ -0,0 +1,80 @@
+import {dialog} from "@electron/remote";
+
+import {html} from "../../../../common/html.js";
+import * as Messages from "../../../../common/messages.js";
+import * as t from "../../../../common/translation-util.js";
+import type {ServerConf} from "../../../../common/types.js";
+import {generateNodeFromHtml} from "../../components/base.js";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
+import * as DomainUtil from "../../utils/domain-util.js";
+
+type ServerInfoFormProps = {
+  $root: Element;
+  server: ServerConf;
+  index: number;
+  onChange: () => void;
+};
+
+export function initServerInfoForm(props: ServerInfoFormProps): void {
+  const $serverInfoForm = generateNodeFromHtml(html`
+    <div class="settings-card">
+      <div class="server-info-left">
+        <img class="server-info-icon" src="${props.server.icon}" />
+        <div class="server-info-row">
+          <span class="server-info-alias">${props.server.alias}</span>
+          <i class="material-icons open-tab-button">open_in_new</i>
+        </div>
+      </div>
+      <div class="server-info-right">
+        <div class="server-info-row server-url">
+          <span class="server-url-info" title="${props.server.url}"
+            >${props.server.url}</span
+          >
+        </div>
+        <div class="server-info-row">
+          <div class="action red server-delete-action">
+            <span>${t.__("Disconnect")}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+  const $serverInfoAlias = $serverInfoForm.querySelector(".server-info-alias")!;
+  const $serverIcon = $serverInfoForm.querySelector(".server-info-icon")!;
+  const $deleteServerButton = $serverInfoForm.querySelector(
+    ".server-delete-action",
+  )!;
+  const $openServerButton = $serverInfoForm.querySelector(".open-tab-button")!;
+  props.$root.append($serverInfoForm);
+
+  $deleteServerButton.addEventListener("click", async () => {
+    const {response} = await dialog.showMessageBox({
+      type: "warning",
+      buttons: [t.__("YES"), t.__("NO")],
+      defaultId: 0,
+      message: t.__("Are you sure you want to disconnect this organization?"),
+    });
+    if (response === 0) {
+      if (DomainUtil.removeDomain(props.index)) {
+        ipcRenderer.send("reload-full-app");
+      } else {
+        const {title, content} = Messages.orgRemovalError(
+          DomainUtil.getDomain(props.index).url,
+        );
+        dialog.showErrorBox(title, content);
+      }
+    }
+  });
+
+  $openServerButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
+  });
+
+  $serverInfoAlias.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
+  });
+
+  $serverIcon.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
+  });
+}

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

@@ -0,0 +1,28 @@
+import {html} from "../../../../common/html.js";
+import * as t from "../../../../common/translation-util.js";
+
+import {reloadApp} from "./base-section.js";
+import {initNewServerForm} from "./new-server-form.js";
+
+type ServersSectionProps = {
+  $root: Element;
+};
+
+export function initServersSection({$root}: ServersSectionProps): void {
+  $root.innerHTML = html`
+    <div class="add-server-modal">
+      <div class="modal-container">
+        <div class="settings-pane" id="server-settings-pane">
+          <div class="page-title">${t.__("Add a Zulip organization")}</div>
+          <div id="new-server-container"></div>
+        </div>
+      </div>
+    </div>
+  `.html;
+  const $newServerContainer = $root.querySelector("#new-server-container")!;
+
+  initNewServerForm({
+    $root: $newServerContainer,
+    onChange: reloadApp,
+  });
+}

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

@@ -0,0 +1,233 @@
+import process from "node:process";
+
+import {html} from "../../../../common/html.js";
+import * as LinkUtil from "../../../../common/link-util.js";
+import * as t from "../../../../common/translation-util.js";
+
+type ShortcutsSectionProps = {
+  $root: Element;
+};
+
+// eslint-disable-next-line complexity
+export function initShortcutsSection({$root}: ShortcutsSectionProps): void {
+  const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
+
+  $root.innerHTML = html`
+    <div class="settings-pane">
+      <div class="settings-card tip">
+        <p>
+          <b><i class="material-icons md-14">settings</i>${t.__("Tip")}: </b
+          >${t.__("These desktop app shortcuts extend the Zulip webapp's")}
+          <span id="open-hotkeys-link"> ${t.__("keyboard shortcuts")}</span>.
+        </p>
+      </div>
+      <div class="title">${t.__("Application Shortcuts")}</div>
+      <div class="settings-card">
+        <table>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>,</kbd></td>
+            <td>${t.__("Settings")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>K</kbd></td>
+            <td>${t.__("Keyboard Shortcuts")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+            <td>${t.__("Toggle Do Not Disturb")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>M</kbd></td>
+            <td>${t.__("Toggle Do Not Disturb")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>D</kbd></td>
+            <td>${t.__("Reset App Settings")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>L</kbd></td>
+            <td>${t.__("Log Out")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>H</kbd></td>
+            <td>${t.__("Hide Zulip")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>H</kbd></td>
+            <td>${t.__("Hide Others")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Q</kbd></td>
+            <td>${t.__("Quit Zulip")}</td>
+          </tr>
+        </table>
+        <div class="setting-control"></div>
+      </div>
+      <div class="title">${t.__("Edit Shortcuts")}</div>
+      <div class="settings-card">
+        <table>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Z</kbd></td>
+            <td>${t.__("Undo")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>Z</kbd></td>
+            <td>${t.__("Redo")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Y</kbd></td>
+            <td>${t.__("Redo")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>X</kbd></td>
+            <td>${t.__("Cut")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>C</kbd></td>
+            <td>${t.__("Copy")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>V</kbd></td>
+            <td>${t.__("Paste")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
+            <td>${t.__("Paste and Match Style")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>V</kbd></td>
+            <td>${t.__("Paste and Match Style")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>A</kbd></td>
+            <td>${t.__("Select All")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td>
+              <kbd>Control</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>Space</kbd>
+            </td>
+            <td>${t.__("Emoji & Symbols")}</td>
+          </tr>
+        </table>
+        <div class="setting-control"></div>
+      </div>
+      <div class="title">${t.__("View Shortcuts")}</div>
+      <div class="settings-card">
+        <table>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>R</kbd></td>
+            <td>${t.__("Reload")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+            <td>${t.__("Hard Reload")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>R</kbd></td>
+            <td>${t.__("Hard Reload")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>F11</kbd></td>
+            <td>${t.__("Toggle Full Screen")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Control</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>F</kbd></td>
+            <td>${t.__("Enter Full Screen")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>+</kbd></td>
+            <td>${t.__("Zoom In")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>=</kbd></td>
+            <td>${t.__("Zoom In")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>-</kbd></td>
+            <td>${t.__("Zoom Out")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>0</kbd></td>
+            <td>${t.__("Actual Size")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+            <td>${t.__("Toggle Sidebar")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>S</kbd></td>
+            <td>${t.__("Toggle Sidebar")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>I</kbd></td>
+            <td>${t.__("Toggle DevTools for Zulip App")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+            <td>${t.__("Toggle DevTools for Zulip App")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>U</kbd></td>
+            <td>${t.__("Toggle DevTools for Active Tab")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
+            <td>${t.__("Toggle DevTools for Active Tab")}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
+            <td>${t.__("Switch to Next Organization")}</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+            <td>${t.__("Switch to Previous Organization")}</td>
+          </tr>
+        </table>
+        <div class="setting-control"></div>
+      </div>
+      <div class="title">${t.__("History Shortcuts")}</div>
+      <div class="settings-card">
+        <table>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>←</kbd></td>
+            <td>${t.__("Back")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>Alt</kbd> + <kbd>←</kbd></td>
+            <td>${t.__("Back")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>→</kbd></td>
+            <td>${t.__("Forward")}</td>
+          </tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
+            <td><kbd>Alt</kbd> + <kbd>→</kbd></td>
+            <td>${t.__("Forward")}</td>
+          </tr>
+        </table>
+        <div class="setting-control"></div>
+      </div>
+      <div class="title">${t.__("Window Shortcuts")}</div>
+      <div class="settings-card">
+        <table>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>M</kbd></td>
+            <td>${t.__("Minimize")}</td>
+          </tr>
+          <tr>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>W</kbd></td>
+            <td>${t.__("Close")}</td>
+          </tr>
+        </table>
+        <div class="setting-control"></div>
+      </div>
+    </div>
+  `.html;
+
+  const link = "https://zulip.com/help/keyboard-shortcuts";
+  const externalCreateNewOrgElement =
+    $root.querySelector("#open-hotkeys-link")!;
+  externalCreateNewOrgElement.addEventListener("click", async () => {
+    await LinkUtil.openBrowser(new URL(link));
+  });
+}

app/renderer/js/pref.js

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

app/renderer/js/preload.ts

@@ -0,0 +1,78 @@
+import {contextBridge, webFrame} from "electron/renderer";
+
+import electron_bridge, {bridgeEvents} from "./electron-bridge.js";
+import * as NetworkError from "./pages/network.js";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
+
+contextBridge.exposeInMainWorld("raw_electron_bridge", electron_bridge);
+
+ipcRenderer.on("logout", () => {
+  if (bridgeEvents.emit("logout")) {
+    return;
+  }
+
+  // Create the menu for the below
+  const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
+  dropdown.click();
+
+  const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".dropdown-menu li:last-child a",
+  );
+  nodes[nodes.length - 1].click();
+});
+
+ipcRenderer.on("show-keyboard-shortcuts", () => {
+  if (bridgeEvents.emit("show-keyboard-shortcuts")) {
+    return;
+  }
+
+  // Create the menu for the below
+  const node: HTMLElement = document.querySelector(
+    "a[data-overlay-trigger=keyboard-shortcuts]",
+  )!;
+  // Additional check
+  if (node.textContent!.trim().toLowerCase() === "keyboard shortcuts (?)") {
+    node.click();
+  } else {
+    // Atleast click the dropdown
+    const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
+    dropdown.click();
+  }
+});
+
+ipcRenderer.on("show-notification-settings", () => {
+  if (bridgeEvents.emit("show-notification-settings")) {
+    return;
+  }
+
+  // Create the menu for the below
+  const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
+  dropdown.click();
+
+  const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".dropdown-menu li a",
+  );
+  nodes[2].click();
+
+  const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".normal-settings-list li div",
+  );
+
+  // Wait until the notification dom element shows up
+  setTimeout(() => {
+    notificationItem[2].click();
+  }, 100);
+});
+
+window.addEventListener("load", () => {
+  if (!location.href.includes("app/renderer/network.html")) {
+    return;
+  }
+
+  const $reconnectButton = document.querySelector("#reconnect")!;
+  const $settingsButton = document.querySelector("#settings")!;
+  NetworkError.init($reconnectButton, $settingsButton);
+});
+
+(async () =>
+  webFrame.executeJavaScript(ipcRenderer.sendSync("get-injected-js")))();

app/renderer/js/tray.ts

@@ -0,0 +1,242 @@
+import type {NativeImage} from "electron/common";
+import {nativeImage} from "electron/common";
+import type {Tray as ElectronTray} from "electron/main";
+import path from "node:path";
+import process from "node:process";
+
+import {BrowserWindow, Menu, Tray} from "@electron/remote";
+
+import * as ConfigUtil from "../../common/config-util.js";
+import {publicPath} from "../../common/paths.js";
+import type {RendererMessage} from "../../common/typed-ipc.js";
+
+import type {ServerManagerView} from "./main.js";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
+
+let tray: ElectronTray | null = null;
+
+const appIcon = path.join(publicPath, "resources/tray/tray");
+
+const iconPath = (): string => {
+  if (process.platform === "linux") {
+    return appIcon + "linux.png";
+  }
+
+  return (
+    appIcon + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
+  );
+};
+
+const winUnreadTrayIconPath = (): string => appIcon + "unread.ico";
+
+let unread = 0;
+
+const trayIconSize = (): number => {
+  switch (process.platform) {
+    case "darwin": {
+      return 20;
+    }
+
+    case "win32": {
+      return 100;
+    }
+
+    case "linux": {
+      return 100;
+    }
+
+    default: {
+      return 80;
+    }
+  }
+};
+
+//  Default config for Icon we might make it OS specific if needed like the size
+const config = {
+  pixelRatio: window.devicePixelRatio,
+  unreadCount: 0,
+  showUnreadCount: true,
+  unreadColor: "#000000",
+  readColor: "#000000",
+  unreadBackgroundColor: "#B9FEEA",
+  readBackgroundColor: "#B9FEEA",
+  size: trayIconSize(),
+  thick: process.platform === "win32",
+};
+
+const renderCanvas = function (arg: number): HTMLCanvasElement {
+  config.unreadCount = arg;
+
+  const size = config.size * config.pixelRatio;
+  const padding = size * 0.05;
+  const center = size / 2;
+  const hasCount = config.showUnreadCount && config.unreadCount;
+  const color = config.unreadCount ? config.unreadColor : config.readColor;
+  const backgroundColor = config.unreadCount
+    ? config.unreadBackgroundColor
+    : config.readBackgroundColor;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d")!;
+
+  // Circle
+  // If (!config.thick || config.thick && hasCount) {
+  ctx.beginPath();
+  ctx.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
+  ctx.fillStyle = backgroundColor;
+  ctx.fill();
+  ctx.lineWidth = size / (config.thick ? 10 : 20);
+  ctx.strokeStyle = backgroundColor;
+  ctx.stroke();
+  // Count or Icon
+  if (hasCount) {
+    ctx.fillStyle = color;
+    ctx.textAlign = "center";
+    if (config.unreadCount > 99) {
+      ctx.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
+      ctx.fillText("99+", center, center + size * 0.15);
+    } else if (config.unreadCount < 10) {
+      ctx.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      ctx.fillText(String(config.unreadCount), center, center + size * 0.2);
+    } else {
+      ctx.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      ctx.fillText(String(config.unreadCount), center, center + size * 0.15);
+    }
+  }
+
+  return canvas;
+};
+
+/**
+ * Renders the tray icon as a native image
+ * @param arg: Unread count
+ * @return the native image
+ */
+const renderNativeImage = function (arg: number): NativeImage {
+  if (process.platform === "win32") {
+    return nativeImage.createFromPath(winUnreadTrayIconPath());
+  }
+
+  const canvas = renderCanvas(arg);
+  const pngData = nativeImage
+    .createFromDataURL(canvas.toDataURL("image/png"))
+    .toPNG();
+  return nativeImage.createFromBuffer(pngData, {
+    scaleFactor: config.pixelRatio,
+  });
+};
+
+function sendAction<Channel extends keyof RendererMessage>(
+  channel: Channel,
+  ...args: Parameters<RendererMessage[Channel]>
+): void {
+  const win = BrowserWindow.getAllWindows()[0];
+
+  if (process.platform === "darwin") {
+    win.restore();
+  }
+
+  ipcRenderer.sendTo(win.webContents.id, channel, ...args);
+}
+
+const createTray = function (): void {
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "Zulip",
+      click() {
+        ipcRenderer.send("focus-app");
+      },
+    },
+    {
+      label: "Settings",
+      click() {
+        ipcRenderer.send("focus-app");
+        sendAction("open-settings");
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: "Quit",
+      click() {
+        ipcRenderer.send("quit-app");
+      },
+    },
+  ]);
+  tray = new Tray(iconPath());
+  tray.setContextMenu(contextMenu);
+  if (process.platform === "linux" || process.platform === "win32") {
+    tray.on("click", () => {
+      ipcRenderer.send("toggle-app");
+    });
+  }
+};
+
+export function initializeTray(serverManagerView: ServerManagerView) {
+  ipcRenderer.on("destroytray", (_event: Event) => {
+    if (!tray) {
+      return;
+    }
+
+    tray.destroy();
+    if (tray.isDestroyed()) {
+      tray = null;
+    } else {
+      throw new Error("Tray icon not properly destroyed.");
+    }
+  });
+
+  ipcRenderer.on("tray", (_event: Event, arg: number): void => {
+    if (!tray) {
+      return;
+    }
+
+    // We don't want to create tray from unread messages on macOS since it already has dock badges.
+    if (process.platform === "linux" || process.platform === "win32") {
+      if (arg === 0) {
+        unread = arg;
+        tray.setImage(iconPath());
+        tray.setToolTip("No unread messages");
+      } else {
+        unread = arg;
+        const image = renderNativeImage(arg);
+        tray.setImage(image);
+        tray.setToolTip(`${arg} unread messages`);
+      }
+    }
+  });
+
+  function toggleTray(): void {
+    let state;
+    if (tray) {
+      state = false;
+      tray.destroy();
+      if (tray.isDestroyed()) {
+        tray = null;
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", false);
+    } else {
+      state = true;
+      createTray();
+      if (process.platform === "linux" || process.platform === "win32") {
+        const image = renderNativeImage(unread);
+        tray!.setImage(image);
+        tray!.setToolTip(`${unread} unread messages`);
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", true);
+    }
+
+    serverManagerView.preferenceView?.handleToggleTray(state);
+  }
+
+  ipcRenderer.on("toggletray", toggleTray);
+
+  if (ConfigUtil.getConfigItem("trayIcon", true)) {
+    createTray();
+  }
+}

app/renderer/js/typed-ipc-renderer.ts

@@ -0,0 +1,68 @@
+import type {IpcRendererEvent} from "electron/renderer";
+import {
+  ipcRenderer as untypedIpcRenderer, // eslint-disable-line no-restricted-imports
+} from "electron/renderer";
+
+import type {
+  MainCall,
+  MainMessage,
+  RendererMessage,
+} from "../../common/typed-ipc.js";
+
+type RendererListener<Channel extends keyof RendererMessage> =
+  RendererMessage[Channel] extends (...args: infer Args) => void
+    ? (event: IpcRendererEvent, ...args: Args) => void
+    : never;
+
+export const ipcRenderer: {
+  on<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    listener: RendererListener<Channel>,
+  ): void;
+  once<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    listener: RendererListener<Channel>,
+  ): void;
+  off<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    listener: RendererListener<Channel>,
+  ): void;
+  removeListener<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    listener: RendererListener<Channel>,
+  ): void;
+  removeAllListeners(channel: keyof RendererMessage): void;
+  send<Channel extends keyof RendererMessage>(
+    channel: "forward-message",
+    rendererChannel: Channel,
+    ...args: Parameters<RendererMessage[Channel]>
+  ): void;
+  send<Channel extends keyof MainMessage>(
+    channel: Channel,
+    ...args: Parameters<MainMessage[Channel]>
+  ): void;
+  invoke<Channel extends keyof MainCall>(
+    channel: Channel,
+    ...args: Parameters<MainCall[Channel]>
+  ): Promise<ReturnType<MainCall[Channel]>>;
+  sendSync<Channel extends keyof MainMessage>(
+    channel: Channel,
+    ...args: Parameters<MainMessage[Channel]>
+  ): ReturnType<MainMessage[Channel]>;
+  postMessage<Channel extends keyof MainMessage>(
+    channel: Channel,
+    message: Parameters<MainMessage[Channel]> extends [infer Message]
+      ? Message
+      : never,
+    transfer?: MessagePort[],
+  ): void;
+  sendTo<Channel extends keyof RendererMessage>(
+    webContentsId: number,
+    channel: Channel,
+    ...args: Parameters<RendererMessage[Channel]>
+  ): void;
+  sendToHost<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    ...args: Parameters<RendererMessage[Channel]>
+  ): void;
+} = untypedIpcRenderer;

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

@@ -0,0 +1,191 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import {app, dialog} from "@electron/remote";
+import * as Sentry from "@sentry/electron";
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+import * as z from "zod";
+
+import * as EnterpriseUtil from "../../../common/enterprise-util.js";
+import Logger from "../../../common/logger-util.js";
+import * as Messages from "../../../common/messages.js";
+import type {ServerConf} from "../../../common/types.js";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+const logger = new Logger({
+  file: "domain-util.log",
+});
+
+const defaultIconUrl = "../renderer/img/icon.png";
+
+const serverConfSchema = z.object({
+  url: z.string(),
+  alias: z.string(),
+  icon: z.string(),
+});
+
+let db!: JsonDB;
+
+reloadDb();
+
+// Migrate from old schema
+try {
+  const oldDomain = db.getObject<unknown>("/domain");
+  if (typeof oldDomain === "string") {
+    (async () => {
+      await addDomain({
+        alias: "Zulip",
+        url: oldDomain,
+      });
+      db.delete("/domain");
+    })();
+  }
+} catch (error: unknown) {
+  if (!(error instanceof DataError)) throw error;
+}
+
+export function getDomains(): ServerConf[] {
+  reloadDb();
+  try {
+    return serverConfSchema.array().parse(db.getObject<unknown>("/domains"));
+  } catch (error: unknown) {
+    if (!(error instanceof DataError)) throw error;
+    return [];
+  }
+}
+
+export function getDomain(index: number): ServerConf {
+  reloadDb();
+  return serverConfSchema.parse(db.getObject<unknown>(`/domains[${index}]`));
+}
+
+export function updateDomain(index: number, server: ServerConf): void {
+  reloadDb();
+  serverConfSchema.parse(server);
+  db.push(`/domains[${index}]`, server, true);
+}
+
+export async function addDomain(server: {
+  url: string;
+  alias: string;
+  icon?: string;
+}): Promise<void> {
+  if (server.icon) {
+    const localIconUrl = await saveServerIcon(server.icon);
+    server.icon = localIconUrl;
+    serverConfSchema.parse(server);
+    db.push("/domains[]", server, true);
+    reloadDb();
+  } else {
+    server.icon = defaultIconUrl;
+    serverConfSchema.parse(server);
+    db.push("/domains[]", server, true);
+    reloadDb();
+  }
+}
+
+export function removeDomains(): void {
+  db.delete("/domains");
+  reloadDb();
+}
+
+export function removeDomain(index: number): boolean {
+  if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
+    return false;
+  }
+
+  db.delete(`/domains[${index}]`);
+  reloadDb();
+  return true;
+}
+
+// Check if domain is already added
+export function duplicateDomain(domain: string): boolean {
+  domain = formatUrl(domain);
+  return getDomains().some((server) => server.url === domain);
+}
+
+export async function checkDomain(
+  domain: string,
+  silent = false,
+): Promise<ServerConf> {
+  if (!silent && duplicateDomain(domain)) {
+    // Do not check duplicate in silent mode
+    throw new Error("This server has been added.");
+  }
+
+  domain = formatUrl(domain);
+
+  try {
+    return await getServerSettings(domain);
+  } catch {
+    throw new Error(Messages.invalidZulipServerError(domain));
+  }
+}
+
+async function getServerSettings(domain: string): Promise<ServerConf> {
+  return ipcRenderer.invoke("get-server-settings", domain);
+}
+
+export async function saveServerIcon(iconURL: string): Promise<string> {
+  return ipcRenderer.invoke("save-server-icon", iconURL);
+}
+
+export async function updateSavedServer(
+  url: string,
+  index: number,
+): Promise<void> {
+  // Does not promise successful update
+  const oldIcon = getDomain(index).icon;
+  try {
+    const newServerConf = await checkDomain(url, true);
+    const localIconUrl = await saveServerIcon(newServerConf.icon);
+    if (!oldIcon || localIconUrl !== "../renderer/img/icon.png") {
+      newServerConf.icon = localIconUrl;
+      updateDomain(index, newServerConf);
+      reloadDb();
+    }
+  } catch (error: unknown) {
+    logger.log("Could not update server icon.");
+    logger.log(error);
+    Sentry.captureException(error);
+  }
+}
+
+function reloadDb(): void {
+  const domainJsonPath = path.join(
+    app.getPath("userData"),
+    "config/domain.json",
+  );
+  try {
+    const file = fs.readFileSync(domainJsonPath, "utf8");
+    JSON.parse(file);
+  } catch (error: unknown) {
+    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(error);
+      Sentry.captureException(error);
+    }
+  }
+
+  db = new JsonDB(domainJsonPath, true, true);
+}
+
+export function formatUrl(domain: string): string {
+  if (domain.startsWith("http://") || domain.startsWith("https://")) {
+    return domain;
+  }
+
+  if (domain.startsWith("localhost:")) {
+    return `http://${domain}`;
+  }
+
+  return `https://${domain}`;
+}

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

@@ -0,0 +1,65 @@
+import * as backoff from "backoff";
+
+import {html} from "../../../common/html.js";
+import Logger from "../../../common/logger-util.js";
+import type WebView from "../components/webview.js";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+const logger = new Logger({
+  file: "domain-util.log",
+});
+
+export default class ReconnectUtil {
+  url: string;
+  alreadyReloaded: boolean;
+  fibonacciBackoff: backoff.Backoff;
+
+  constructor(webview: WebView) {
+    this.url = webview.props.url;
+    this.alreadyReloaded = false;
+    this.fibonacciBackoff = backoff.fibonacci({
+      initialDelay: 5000,
+      maxDelay: 300_000,
+    });
+  }
+
+  async isOnline(): Promise<boolean> {
+    return ipcRenderer.invoke("is-online", this.url);
+  }
+
+  pollInternetAndReload(): void {
+    this.fibonacciBackoff.backoff();
+    this.fibonacciBackoff.on("ready", async () => {
+      if (await this._checkAndReload()) {
+        this.fibonacciBackoff.reset();
+      } else {
+        this.fibonacciBackoff.backoff();
+      }
+    });
+  }
+
+  async _checkAndReload(): Promise<boolean> {
+    if (this.alreadyReloaded) {
+      return true;
+    }
+
+    if (await this.isOnline()) {
+      ipcRenderer.send("forward-message", "reload-viewer");
+      logger.log("You're back online.");
+      return true;
+    }
+
+    logger.log(
+      "There is no internet connection, try checking network cables, modem and router.",
+    );
+    const errorMessageHolder = document.querySelector("#description");
+    if (errorMessageHolder) {
+      errorMessageHolder.innerHTML = html`
+        <div>Your internet connection doesn't seem to work properly!</div>
+        <div>Verify that it works and then click try again.</div>
+      `.html;
+    }
+
+    return false;
+  }
+}

app/renderer/js/utils/system-util.ts

@@ -0,0 +1,16 @@
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+
+export const connectivityError: string[] = [
+  "ERR_INTERNET_DISCONNECTED",
+  "ERR_PROXY_CONNECTION_FAILED",
+  "ERR_CONNECTION_RESET",
+  "ERR_NOT_CONNECTED",
+  "ERR_NAME_NOT_RESOLVED",
+  "ERR_NETWORK_CHANGED",
+];
+
+const userAgent = ipcRenderer.sendSync("fetch-user-agent");
+
+export function getUserAgent(): string {
+  return userAgent;
+}

app/renderer/main.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" class="responsive desktop">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Zulip</title>
+    <link rel="stylesheet" href="css/fonts.css" />
+    <link rel="stylesheet" href="css/main.css" />
+  </head>
+
+  <body>
+    <div id="content">
+      <div class="popup">
+        <span class="popuptext hidden" id="fullscreen-popup"></span>
+      </div>
+      <div id="sidebar" class="toggle-sidebar">
+        <div id="view-controls-container">
+          <div id="tabs-container"></div>
+          <div id="add-tab" class="tab functional-tab">
+            <div class="server-tab" id="add-action">
+              <i class="material-icons">add</i>
+            </div>
+            <span id="add-server-tooltip" style="display: none"
+              >Add organization</span
+            >
+          </div>
+        </div>
+        <div id="actions-container">
+          <div class="action-button" id="dnd-action">
+            <i class="material-icons md-48">notifications</i>
+            <span id="dnd-tooltip" style="display: none">Do Not Disturb</span>
+          </div>
+          <div class="action-button hidden" 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="loading-action">
+            <i class="refresh material-icons md-48">loop</i>
+            <span id="loading-tooltip" style="display: none">Loading</span>
+          </div>
+          <div class="action-button disable" id="back-action">
+            <i class="material-icons md-48">arrow_back</i>
+            <span id="back-tooltip" style="display: none">Go Back</span>
+          </div>
+          <div class="action-button" id="settings-action">
+            <i class="material-icons md-48">settings</i>
+            <span id="setting-tooltip" style="display: none">Settings</span>
+          </div>
+        </div>
+      </div>
+      <div id="main-container">
+        <div id="webviews-container"></div>
+      </div>
+    </div>
+  </body>
+</html>