release: New release v5.8.0.

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

.editorconfig

@@ -1,16 +1,11 @@
 root = true
 
 [*]
-indent_style = tab
-indent_size = 4
 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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,22 +4,28 @@ 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 -->
+- Operating System:
- - Zulip Desktop Version:
+<!-- (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

@@ -2,5 +2,3 @@
 name: Custom issue template
 about: Describe this issue template's purpose here.
 ---
-
-

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,13 +4,17 @@ 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

@@ -1,4 +1,5 @@
 ---
+
 <!--
 Remove the fields that are not appropriate
 Please include:
@@ -11,6 +12,7 @@ Please include:
 **Screenshots?**
 
 **You have tested this PR on:**
-  - [ ] Windows
+
-  - [ ] Linux/Ubuntu
+- [ ] Windows
-  - [ ] macOS
+- [ ] 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

.htmlhintrc

@@ -1,12 +1,7 @@
 {
-  "tagname-lowercase": true,
-  "attr-lowercase": true,
-  "attr-value-double-quotes": true,
   "attr-value-not-empty": false,
   "attr-no-duplication": true,
   "doctype-first": true,
-  "tag-pair": true,
-  "empty-tag-not-self-closed": true,
   "spec-char-escape": true,
   "id-unique": true,
   "src-not-empty": true,
@@ -17,7 +12,6 @@
   "style-disabled": false,
   "inline-style-disabled": false,
   "inline-script-disabled": false,
-  "space-tab-mixed-disabled": "space4",
   "id-class-ad-disabled": false,
   "href-abs-or-rel": false,
   "attr-unsafe-chars": true,

.node-version

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

.prettierignore

@@ -0,0 +1,3 @@
+/app/**/*.js
+/app/translations/*.json
+/dist

.prettierignore.non-js

@@ -0,0 +1,4 @@
+*.js
+*.ts
+/app/translations/*.json
+/dist

.stylelintrc

@@ -1,67 +1,9 @@
 {
+    "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
     "rules": {
-        # Stylistic rules for CSS.
-        "function-comma-space-after": "always",
-        "function-comma-space-before": "never",
-        "function-max-empty-lines": 0,
-        "function-whitespace-after": "always",
-
-        "value-keyword-case": "lower",
-        "value-list-comma-newline-after": "always-multi-line",
-        "value-list-comma-space-after": "always-single-line",
-        "value-list-comma-space-before": "never",
-        "value-list-max-empty-lines": 0,
-
-        "unit-case": "lower",
-        "property-case": "lower",
-        "color-hex-case": "lower",
-
-        "declaration-bang-space-before": "always",
-        "declaration-colon-newline-after": "always-multi-line",
-        "declaration-colon-space-after": "always-single-line",
-        "declaration-colon-space-before": "never",
-        "declaration-block-semicolon-newline-after": "always",
-        "declaration-block-semicolon-space-before": "never",
-        "declaration-block-trailing-semicolon": "always",
-
-        "block-closing-brace-empty-line-before": "never",
-        "block-closing-brace-newline-after": "always",
-        "block-closing-brace-newline-before": "always",
-        "block-opening-brace-newline-after": "always",
-        "block-opening-brace-space-before": "always",
-
-        "selector-attribute-brackets-space-inside": "never",
-        "selector-attribute-operator-space-after": "never",
-        "selector-attribute-operator-space-before": "never",
-        "selector-combinator-space-after": "always",
-        "selector-combinator-space-before": "always",
-        "selector-descendant-combinator-no-non-space": true,
-        "selector-pseudo-class-parentheses-space-inside": "never",
-        "selector-pseudo-element-case": "lower",
-        "selector-pseudo-element-colon-notation": "double",
-        "selector-type-case": "lower",
-        "selector-list-comma-newline-after": "always",
-        "selector-list-comma-space-before": "never",
-
-        "media-feature-colon-space-after": "always",
-        "media-feature-colon-space-before": "never",
-        "media-feature-name-case": "lower",
-        "media-feature-parentheses-space-inside": "never",
-        "media-feature-range-operator-space-after": "always",
-        "media-feature-range-operator-space-before": "always",
-        "media-query-list-comma-newline-after": "always",
-        "media-query-list-comma-space-before": "never",
-
-        "at-rule-name-case": "lower",
-        "at-rule-name-space-after": "always",
-        "at-rule-semicolon-newline-after": "always",
-        "at-rule-semicolon-space-before": "never",
-
-        "comment-whitespace-inside": "always",
-        "indentation": 4,
-        
-        # Limit language features
-        "color-no-hex": true,
         "color-named": "never",
+        "color-no-hex": true,
+        "font-family-no-missing-generic-family-keyword": [true, {"ignoreFontFamilies": ["Material Icons"]}],
+        "selector-type-no-unknown": [true, {"ignoreTypes": ["send-feedback", "webview"]}],
     }
 }

.travis.yml

@@ -1,23 +0,0 @@
-os:
-- osx
-- linux
-
-addons:
-  apt:
-    packages:
-    - build-essential
-    - libxext-dev
-    - libxtst-dev
-    - libxkbfile-dev
-
-language: node_js
-node_js:
-- '10'
-- '12'
-
-cache:
-  directories:
-  - node_modules
-
-script:
-- npm run test

CONTRIBUTING.md

@@ -10,11 +10,12 @@ Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If yo
 
 ## 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).
+- The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).
 
-* If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
+- If you have any questions regarding zulip-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-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).
@@ -22,26 +23,29 @@ The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by com
 Please pay attention to the following points while opening an issue.
 
 ### Does it happen on web browsers? (especially Chrome)
+
 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 an issue.
 
 For example:
-* 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.
 
+- 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 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:
-   * The operating system on which you tested.
+   - The operating system on which you tested.
-   * The Zulip-Desktop version on which you tested.
+   - The Zulip-Desktop version on which you tested.
-   * The relevant issue number, if applicable.
+   - The relevant issue number, if applicable.

README.md

@@ -1,6 +1,7 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.com/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.com/github/zulip/zulip-desktop)
+
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=master&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
+[![Build Status](https://travis-ci.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)
 
@@ -10,14 +11,16 @@ Desktop client for Zulip. Available for Mac, Linux, and Windows.
 ![screenshot](https://i.imgur.com/vekKnW4.png)
 
 # Download
+
 Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
 
 # Features
-* Sign in to multiple organizations
+
-* Desktop notifications with inline reply
+- Sign in to multiple organizations
-* Tray/dock integration
+- Desktop notifications with inline reply
-* Multi-language spell checker
+- Tray/dock integration
-* Automatic updates
+- Multi-language spell checker
+- Automatic updates
 
 # Reporting issues
 
@@ -34,4 +37,5 @@ First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/l
 Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
 
 # License
+
 Released under the [Apache-2.0](./LICENSE) license.

app/common/config-schemata.ts

@@ -0,0 +1,43 @@
+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(),
+  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(),
+  proxyPAC: z.string(),
+  proxyRules: z.string(),
+  quitOnClose: z.boolean(),
+  showSidebar: z.boolean(),
+  spellcheckerLanguages: z.string().array().nullable(),
+  startAtLogin: z.boolean(),
+  startMinimized: z.boolean(),
+  systemProxyRules: z.string(),
+  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,102 @@
+import electron from "electron";
+import fs from "fs";
+import path from "path";
+
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+import type * as z from "zod";
+
+import {configSchemata} from "./config-schemata";
+import * as EnterpriseUtil from "./enterprise-util";
+import Logger from "./logger-util";
+
+export type Config = {
+  [Key in keyof typeof configSchemata]: z.output<typeof configSchemata[Key]>;
+};
+
+/* To make the util runnable in both main and renderer process */
+const {app, dialog} = process.type === "renderer" ? electron.remote : electron;
+
+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);
+      logger.reportSentry(error);
+    }
+  }
+
+  db = new JsonDB(settingsJsonPath, true, true);
+}

app/common/default-util.ts

@@ -0,0 +1,62 @@
+import electron from "electron";
+import fs from "fs";
+
+const {app} = process.type === "renderer" ? electron.remote : electron;
+
+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,58 @@
+import type * as z from "zod";
+
+import type {dndSettingsSchemata} from "./config-schemata";
+import * as ConfigUtil from "./config-util";
+
+export type DNDSettings = {
+  [Key in keyof typeof dndSettingsSchemata]: z.output<
+    typeof dndSettingsSchemata[Key]
+  >;
+};
+
+type SettingName = keyof DNDSettings;
+
+interface 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,93 @@
+import fs from "fs";
+import path from "path";
+
+import * as z from "zod";
+
+import {enterpriseConfigSchemata} from "./config-schemata";
+import Logger from "./logger-util";
+
+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/logger-util.ts

@@ -0,0 +1,115 @@
+import {Console} from "console"; // eslint-disable-line node/prefer-global/console
+import electron from "electron";
+import fs from "fs";
+import os from "os";
+
+import {initSetUp} from "./default-util";
+import {captureException, sentryInit} from "./sentry-util";
+
+const {app} = process.type === "renderer" ? electron.remote : electron;
+
+interface LoggerOptions {
+  file?: string;
+}
+
+initSetUp();
+
+let reportErrors = true;
+if (process.type === "renderer") {
+  // Report Errors to Sentry only if it is enabled in settings
+  // Gets the value of reportErrors from config-util for renderer process
+  // For main process, sentryInit() is handled in index.js
+  const {ipcRenderer} = electron;
+  ipcRenderer.send("error-reporting");
+  ipcRenderer.on(
+    "error-reporting-val",
+    (_event: Event, errorReporting: boolean) => {
+      reportErrors = errorReporting;
+      if (reportErrors) {
+        sentryInit();
+      }
+    },
+  );
+}
+
+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;
+  }
+
+  reportSentry(error: unknown): void {
+    if (reportErrors) {
+      captureException(error);
+    }
+  }
+
+  async trimLog(file: string): Promise<void> {
+    const data = await fs.promises.readFile(file, "utf8");
+
+    const MAX_LOG_FILE_LINES = 500;
+    const logs = data.split(os.EOL);
+    const logLength = logs.length - 1;
+
+    // Keep bottom MAX_LOG_FILE_LINES of each log instance
+    if (logLength > MAX_LOG_FILE_LINES) {
+      const trimmedLogs = logs.slice(logLength - MAX_LOG_FILE_LINES);
+      const toWrite = trimmedLogs.join(os.EOL);
+      await fs.promises.writeFile(file, toWrite);
+    }
+  }
+}

app/common/messages.ts

@@ -0,0 +1,38 @@
+interface 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/sentry-util.ts

@@ -0,0 +1,20 @@
+import electron from "electron";
+
+import {init} from "@sentry/electron";
+
+const {app} = process.type === "renderer" ? electron.remote : electron;
+
+export const sentryInit = (): void => {
+  if (app.isPackaged) {
+    init({
+      dsn: "https://628dc2f2864243a08ead72e63f94c7b1@sentry.io/204668",
+      // 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
+    });
+  }
+};
+
+export {captureException} from "@sentry/electron";

app/common/translation-util.ts

@@ -0,0 +1,18 @@
+import path from "path";
+
+import i18n from "i18n";
+
+import * as ConfigUtil from "./config-util";
+
+i18n.configure({
+  directory: path.join(__dirname, "../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 ? appLocale : "en"});
+}

app/common/typed-ipc.ts

@@ -0,0 +1,90 @@
+import type {DNDSettings} from "./dnd-util";
+import type {MenuProps, NavItem, ServerConf} from "./types";
+
+export interface MainMessage {
+  "clear-app-settings": () => void;
+  downloadFile: (url: string, downloadPath: string) => void;
+  "error-reporting": () => void;
+  "fetch-user-agent": () => string;
+  "focus-app": () => void;
+  "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;
+  "set-spellcheck-langs": () => 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 interface MainCall {
+  "get-server-settings": (domain: string) => ServerConf;
+  "is-online": (url: string) => boolean;
+  "save-server-icon": (iconURL: string) => string;
+}
+
+export interface RendererMessage {
+  back: () => void;
+  "copy-zulip-url": () => void;
+  destroytray: () => void;
+  downloadFileCompleted: (filePath: string, fileName: string) => void;
+  downloadFileFailed: (state: string) => void;
+  "enter-fullscreen": () => void;
+  "error-reporting-val": (errorReporting: boolean) => 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-feedback-modal": () => 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;
+  "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-network-error": (index: number) => void;
+  "show-notification-settings": () => void;
+  "switch-server-tab": (index: number) => void;
+  "switch-settings-nav": (navItem: NavItem) => void;
+  "tab-devtools": () => void;
+  "toggle-autohide-menubar": (
+    autoHideMenubar: boolean,
+    updateMenu: boolean,
+  ) => void;
+  "toggle-dnd": (state: boolean, newSettings: Partial<DNDSettings>) => void;
+  "toggle-menubar-setting": (state: boolean) => void;
+  "toggle-sidebar": (show: boolean) => void;
+  "toggle-sidebar-setting": (state: 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,27 @@
+export interface MenuProps {
+  tabs: TabData[];
+  activeTabIndex?: number;
+  enableMenu?: boolean;
+}
+
+export type NavItem =
+  | "General"
+  | "Network"
+  | "AddServer"
+  | "Organizations"
+  | "Shortcuts";
+
+export interface ServerConf {
+  url: string;
+  alias: string;
+  icon: string;
+}
+
+export type TabRole = "server" | "function";
+
+export interface TabData {
+  role: TabRole;
+  name: string;
+  index: number;
+  webviewName: string;
+}

app/main/autoupdater.ts

@@ -1,25 +1,24 @@
-import {app, dialog, session} from 'electron';
+import {app, dialog, session, shell} from "electron";
-import util from 'util';
+import util from "util";
 
-import isDev from 'electron-is-dev';
+import log from "electron-log";
-import log from 'electron-log';
+import type {UpdateDownloadedEvent, UpdateInfo} from "electron-updater";
-import {UpdateDownloadedEvent, UpdateInfo, autoUpdater} from 'electron-updater';
+import {autoUpdater} from "electron-updater";
 
-import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as ConfigUtil from "../common/config-util";
-import * as LinkUtil from '../renderer/js/utils/link-util';
 
-import {linuxUpdateNotification} from './linuxupdater';	// Required only in case of linux
+import {linuxUpdateNotification} from "./linuxupdater"; // Required only in case of linux
 
 const sleep = util.promisify(setTimeout);
 
 export async function appUpdater(updateFromMenu = false): Promise<void> {
   // Don't initiate auto-updates in development
-	if (isDev) {
+  if (!app.isPackaged) {
     return;
   }
 
-	if (process.platform === 'linux' && !process.env.APPIMAGE) {
+  if (process.platform === "linux" && !process.env.APPIMAGE) {
-		const ses = session.fromPartition('persist:webviewsession');
+    const ses = session.fromPartition("persist:webviewsession");
     await linuxUpdateNotification(ses);
     return;
   }
@@ -27,77 +26,83 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
   let updateAvailable = false;
 
   // Create Logs directory
-	const LogsDir = `${app.getPath('userData')}/Logs`;
+  const LogsDir = `${app.getPath("userData")}/Logs`;
 
   // Log whats happening
   log.transports.file.file = `${LogsDir}/updates.log`;
-	log.transports.file.level = 'info';
+  log.transports.file.level = "info";
   autoUpdater.logger = log;
 
   // Handle auto updates for beta/pre releases
-	const isBetaUpdate = ConfigUtil.getConfigItem('betaUpdate');
+  const isBetaUpdate = ConfigUtil.getConfigItem("betaUpdate", false);
 
-	autoUpdater.allowPrerelease = isBetaUpdate || false;
+  autoUpdater.allowPrerelease = isBetaUpdate;
 
-	const eventsListenerRemove = ['update-available', 'update-not-available'];
+  const eventsListenerRemove = ["update-available", "update-not-available"];
-	autoUpdater.on('update-available', async (info: UpdateInfo) => {
+  autoUpdater.on("update-available", async (info: UpdateInfo) => {
     if (updateFromMenu) {
       updateAvailable = true;
 
       // This is to prevent removal of 'update-downloaded' and 'error' event listener.
-			eventsListenerRemove.forEach(event => {
+      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.'
+        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 () => {
+  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',
+        message: "No updates available",
-				detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`
+        detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`,
       });
     }
   });
 
-	autoUpdater.on('error', async (error: Error) => {
+  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 messageText = updateAvailable
+        ? "Unable to download the updates"
+        : "Unable to check for updates";
       const {response} = await dialog.showMessageBox({
-				type: 'error',
+        type: "error",
-				buttons: ['Manual Download', 'Cancel'],
+        buttons: ["Manual Download", "Cancel"],
         message: messageText,
-				detail: `Error: ${error.message}\n\nThe latest version of Zulip Desktop is available at -\nhttps://zulip.com/apps/.\n
+        detail: `Error: ${error.message}
-				Current Version: ${app.getVersion()}`
+
+The latest version of Zulip Desktop is available at -
+https://zulip.com/apps/.
+Current Version: ${app.getVersion()}`,
       });
       if (response === 0) {
-				await LinkUtil.openBrowser(new URL('https://zulip.com/apps/'));
+        await shell.openExternal("https://zulip.com/apps/");
       }
     }
   });
 
   // Ask the user if update is available
-	autoUpdater.on('update-downloaded', async (event: UpdateDownloadedEvent) => {
+  autoUpdater.on("update-downloaded", async (event: UpdateDownloadedEvent) => {
     // Ask user to update the app
     const {response} = await dialog.showMessageBox({
-			type: 'question',
+      type: "question",
-			buttons: ['Install and Relaunch', 'Install Later'],
+      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'
+      detail: "It will be installed the next time you restart the application",
     });
     if (response === 0) {
       await sleep(1000);

app/main/badge-settings.ts

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

app/main/index.ts

@@ -1,19 +1,23 @@
+import electron, {app, dialog, session} from "electron";
+import fs from "fs";
+import path from "path";
 
-import electron, {app, dialog, ipcMain, session} from 'electron';
+import windowStateKeeper from "electron-window-state";
-import fs from 'fs';
-import path from 'path';
 
-import windowStateKeeper from 'electron-window-state';
+import * as ConfigUtil from "../common/config-util";
+import {sentryInit} from "../common/sentry-util";
+import type {RendererMessage} from "../common/typed-ipc";
+import type {MenuProps} from "../common/types";
 
-import * as BadgeSettings from '../renderer/js/pages/preference/badge-settings';
+import {appUpdater} from "./autoupdater";
-import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as BadgeSettings from "./badge-settings";
-import * as ProxyUtil from '../renderer/js/utils/proxy-util';
+import * as AppMenu from "./menu";
-import {sentryInit} from '../renderer/js/utils/sentry-util';
+import * as ProxyUtil from "./proxy-util";
+import {_getServerSettings, _isOnline, _saveServerIcon} from "./request";
+import {setAutoLaunch} from "./startup";
+import {ipcMain, send} from "./typed-ipc-main";
 
-import {appUpdater} from './autoupdater';
+const {GDK_BACKEND} = process.env;
-import * as AppMenu from './menu';
-import {_getServerSettings, _saveServerIcon, _isOnline} from './request';
-import {setAutoLaunch} from './startup';
 
 let mainWindowState: windowStateKeeper.State;
 
@@ -24,39 +28,15 @@ let badgeCount: number;
 let isQuitting = false;
 
 // Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
+const mainURL = "file://" + path.join(__dirname, "../renderer", "main.html");
 
-const singleInstanceLock = app.requestSingleInstanceLock();
+const permissionCallbacks = new Map<number, (grant: boolean) => void>();
-if (singleInstanceLock) {
+let nextPermissionCallbackId = 0;
-	app.on('second-instance', () => {
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) {
-				mainWindow.restore();
-			}
 
-			mainWindow.show();
+const APP_ICON = path.join(__dirname, "../resources", "Icon");
-		}
-	});
-} else {
-	app.quit();
-}
 
-const rendererCallbacks = new Map();
+const iconPath = (): string =>
-let nextRendererCallbackId = 0;
+  APP_ICON + (process.platform === "win32" ? ".ico" : ".png");
-
-ipcMain.on('renderer-callback', (event: Event, rendererCallbackId: number, ...args: any[]) => {
-	rendererCallbacks.get(rendererCallbackId)(...args);
-	rendererCallbacks.delete(rendererCallbackId);
-});
-
-function makeRendererCallback(callback: (...args: any[]) => void): number {
-	rendererCallbacks.set(nextRendererCallbackId, callback);
-	return nextRendererCallbackId++;
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = (): string => APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
 
 // Toggle the app window
 const toggleApp = (): void => {
@@ -72,12 +52,12 @@ function createMainWindow(): Electron.BrowserWindow {
   mainWindowState = windowStateKeeper({
     defaultWidth: 1100,
     defaultHeight: 720,
-		path: `${app.getPath('userData')}/config`
+    path: `${app.getPath("userData")}/config`,
   });
 
   const win = new electron.BrowserWindow({
     // This settings needs to be saved in config
-		title: 'Zulip',
+    title: "Zulip",
     icon: iconPath(),
     x: mainWindowState.x,
     y: mainWindowState.y,
@@ -89,28 +69,29 @@ function createMainWindow(): Electron.BrowserWindow {
       contextIsolation: false,
       enableRemoteModule: true,
       nodeIntegration: true,
-			partition: 'persist:webviewsession',
+      partition: "persist:webviewsession",
-			webviewTag: true
+      webviewTag: true,
+      worldSafeExecuteJavaScript: true,
     },
-		show: false
+    show: false,
   });
 
-	win.on('focus', () => {
+  win.on("focus", () => {
-		win.webContents.send('focus');
+    send(win.webContents, "focus");
   });
 
   (async () => win.loadURL(mainURL))();
 
   // Keep the app running in background on close event
-	win.on('close', event => {
+  win.on("close", (event) => {
-		if (ConfigUtil.getConfigItem('quitOnClose')) {
+    if (ConfigUtil.getConfigItem("quitOnClose", false)) {
       app.quit();
     }
 
     if (!isQuitting) {
       event.preventDefault();
 
-			if (process.platform === 'darwin') {
+      if (process.platform === "darwin") {
         app.hide();
       } else {
         win.hide();
@@ -118,20 +99,20 @@ function createMainWindow(): Electron.BrowserWindow {
     }
   });
 
-	win.setTitle('Zulip');
+  win.setTitle("Zulip");
 
-	win.on('enter-full-screen', () => {
+  win.on("enter-full-screen", () => {
-		win.webContents.send('enter-fullscreen');
+    send(win.webContents, "enter-fullscreen");
   });
 
-	win.on('leave-full-screen', () => {
+  win.on("leave-full-screen", () => {
-		win.webContents.send('leave-fullscreen');
+    send(win.webContents, "leave-fullscreen");
   });
 
   //  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', event => {
+  win.webContents.on("will-navigate", (event) => {
     if (event) {
-			win.webContents.send('destroytray');
+      send(win.webContents, "destroytray");
     }
   });
 
@@ -143,49 +124,84 @@ function createMainWindow(): Electron.BrowserWindow {
   return win;
 }
 
-// Decrease load on GPU (experimental)
+(async () => {
-app.disableHardwareAcceleration();
+  if (!app.requestSingleInstanceLock()) {
+    app.quit();
+    return;
+  }
 
-// Temporary fix for Electron render colors differently
+  await app.whenReady();
-// More info here - https://github.com/electron/electron/issues/10732
-app.commandLine.appendSwitch('force-color-profile', 'srgb');
 
-// This event is only available on macOS. Triggers when you click on the dock icon.
+  if (process.env.GDK_BACKEND !== GDK_BACKEND) {
-app.on('activate', () => {
+    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;
+    }
+  }
+
+  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", () => {
     if (mainWindow) {
       // If there is already a window show it
       mainWindow.show();
     } else {
       mainWindow = createMainWindow();
     }
-});
+  });
 
-app.on('ready', () => {
+  const ses = session.fromPartition("persist:webviewsession");
-	const ses = session.fromPartition('persist:webviewsession');
   ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
 
-	ipcMain.on('set-spellcheck-langs', () => {
+  ipcMain.on("set-spellcheck-langs", () => {
-		ses.setSpellCheckerLanguages(ConfigUtil.getConfigItem('spellcheckerLanguages'));
+    ses.setSpellCheckerLanguages(
+      process.platform === "darwin"
+        ? // Work around https://github.com/electron/electron/issues/30215.
+          mainWindow.webContents.session.getSpellCheckerLanguages()
+        : ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
+    );
   });
+
   AppMenu.setMenu({
-		tabs: []
+    tabs: [],
   });
   mainWindow = createMainWindow();
 
   // Auto-hide menu bar on Windows + Linux
-	if (process.platform !== 'darwin') {
+  if (process.platform !== "darwin") {
-		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
+    const shouldHideMenu = ConfigUtil.getConfigItem("autoHideMenubar", false);
     mainWindow.autoHideMenuBar = shouldHideMenu;
     mainWindow.setMenuBarVisibility(!shouldHideMenu);
   }
 
   // Initialize sentry for main process
-	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
+  const errorReporting = ConfigUtil.getConfigItem("errorReporting", true);
   if (errorReporting) {
     sentryInit();
   }
 
-	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+  const isSystemProxy = ConfigUtil.getConfigItem("useSystemProxy", false);
 
   if (isSystemProxy) {
     (async () => ProxyUtil.resolveSystemProxy(mainWindow))();
@@ -193,129 +209,174 @@ app.on('ready', () => {
 
   const page = mainWindow.webContents;
 
-	page.on('dom-ready', () => {
+  page.on("dom-ready", () => {
-		if (ConfigUtil.getConfigItem('startMinimized')) {
+    if (ConfigUtil.getConfigItem("startMinimized", false)) {
       mainWindow.hide();
     } else {
       mainWindow.show();
     }
   });
 
-	ipcMain.on('fetch-user-agent', event => {
+  ipcMain.on("fetch-user-agent", (event) => {
-		event.returnValue = session.fromPartition('persist:webviewsession').getUserAgent();
+    event.returnValue = session
+      .fromPartition("persist:webviewsession")
+      .getUserAgent();
   });
 
-	ipcMain.handle('get-server-settings', async (event, domain: string) => _getServerSettings(domain, ses));
+  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("save-server-icon", async (event, url: string) =>
+    _saveServerIcon(url, ses),
+  );
 
-	ipcMain.handle('is-online', async (event, url: string) => _isOnline(url, ses));
+  ipcMain.handle("is-online", async (event, url: string) =>
+    _isOnline(url, ses),
+  );
 
-	page.once('did-frame-finish-load', async () => {
+  page.once("did-frame-finish-load", async () => {
     // Initiate auto-updates on MacOS and Windows
-		if (ConfigUtil.getConfigItem('autoUpdate')) {
+    if (ConfigUtil.getConfigItem("autoUpdate", true)) {
       await appUpdater();
     }
   });
 
-	app.on('certificate-error', (
+  app.on(
+    "certificate-error",
+    (
       event: Event,
       webContents: Electron.WebContents,
       urlString: string,
-		error: string
+      error: string,
     ) => {
       const url = new URL(urlString);
       dialog.showErrorBox(
-			'Certificate error',
+        "Certificate error",
         `The server presented an invalid certificate for ${url.origin}:
 
-${error}`
+${error}`,
+      );
+    },
   );
-	});
 
-	page.session.setPermissionRequestHandler((webContents, permission, callback, details) => {
+  page.session.setPermissionRequestHandler(
+    (webContents, permission, callback, details) => {
       const {origin} = new URL(details.requestingUrl);
-		page.send('permission-request', {
+      const permissionCallbackId = nextPermissionCallbackId++;
-			webContentsId: webContents.id === mainWindow.webContents.id ?
+      permissionCallbacks.set(permissionCallbackId, callback);
-				null :
+      send(
-				webContents.id,
+        page,
+        "permission-request",
+        {
+          webContentsId:
+            webContents.id === mainWindow.webContents.id
+              ? null
+              : webContents.id,
           origin,
-			permission
+          permission,
-		}, makeRendererCallback(callback));
+        },
-	});
+        permissionCallbackId,
+      );
+    },
+  );
 
   // Temporarily remove this event
   // electron.powerMonitor.on('resume', () => {
   // 	mainWindow.reload();
-	// 	page.send('destroytray');
+  // 	send(page, 'destroytray');
   // });
 
-	ipcMain.on('focus-app', () => {
+  ipcMain.on("focus-app", () => {
     mainWindow.show();
   });
 
-	ipcMain.on('quit-app', () => {
+  ipcMain.on("quit-app", () => {
     app.quit();
   });
 
   // Reload full app not just webview, useful in debugging
-	ipcMain.on('reload-full-app', () => {
+  ipcMain.on("reload-full-app", () => {
     mainWindow.reload();
-		page.send('destroytray');
+    send(page, "destroytray");
   });
 
-	ipcMain.on('clear-app-settings', () => {
+  ipcMain.on("clear-app-settings", () => {
     mainWindowState.unmanage();
     app.relaunch();
     app.exit();
   });
 
-	ipcMain.on('toggle-app', () => {
+  ipcMain.on("toggle-app", () => {
     toggleApp();
   });
 
-	ipcMain.on('toggle-badge-option', () => {
+  ipcMain.on("toggle-badge-option", () => {
     BadgeSettings.updateBadge(badgeCount, mainWindow);
   });
 
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
+  ipcMain.on(
+    "toggle-menubar",
+    (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
       mainWindow.autoHideMenuBar = showMenubar;
       mainWindow.setMenuBarVisibility(!showMenubar);
-		page.send('toggle-autohide-menubar', showMenubar, true);
+      send(page, "toggle-autohide-menubar", showMenubar, true);
-	});
+    },
+  );
 
-	ipcMain.on('update-badge', (_event: Electron.IpcMainEvent, messageCount: number) => {
+  ipcMain.on(
+    "update-badge",
+    (_event: Electron.IpcMainEvent, messageCount: number) => {
       badgeCount = messageCount;
       BadgeSettings.updateBadge(badgeCount, mainWindow);
-		page.send('tray', messageCount);
+      send(page, "tray", messageCount);
-	});
+    },
+  );
 
-	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMainEvent, data: string, text: string) => {
+  ipcMain.on(
+    "update-taskbar-icon",
+    (_event: Electron.IpcMainEvent, data: string, text: string) => {
       BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-	});
+    },
+  );
 
-	ipcMain.on('forward-message', (_event: Electron.IpcMainEvent, listener: string, ...parameters: unknown[]) => {
+  ipcMain.on(
-		page.send(listener, ...parameters);
+    "forward-message",
-	});
+    <Channel extends keyof RendererMessage>(
+      _event: Electron.IpcMainEvent,
+      listener: Channel,
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      send(page, listener, ...parameters);
+    },
+  );
 
-	ipcMain.on('update-menu', (_event: Electron.IpcMainEvent, props: AppMenu.MenuProps) => {
+  ipcMain.on(
+    "update-menu",
+    (_event: Electron.IpcMainEvent, props: MenuProps) => {
       AppMenu.setMenu(props);
+      if (props.activeTabIndex !== undefined) {
         const activeTab = props.tabs[props.activeTabIndex];
-		if (activeTab) {
         mainWindow.setTitle(`Zulip - ${activeTab.webviewName}`);
       }
-	});
+    },
+  );
 
-	ipcMain.on('toggleAutoLauncher', async (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
+  ipcMain.on(
+    "toggleAutoLauncher",
+    async (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
       await setAutoLaunch(AutoLaunchValue);
-	});
+    },
+  );
 
-	ipcMain.on('downloadFile', (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
+  ipcMain.on(
+    "downloadFile",
+    (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
       page.downloadURL(url);
-		page.session.once('will-download', async (_event: Event, item) => {
+      page.session.once("will-download", async (_event: Event, item) => {
-			if (ConfigUtil.getConfigItem('promptDownload', false)) {
+        if (ConfigUtil.getConfigItem("promptDownload", false)) {
           const showDialogOptions: electron.SaveDialogOptions = {
-					defaultPath: path.join(downloadPath, item.getFilename())
+            defaultPath: path.join(downloadPath, item.getFilename()),
           };
           item.setSaveDialogOptions(showDialogOptions);
         } else {
@@ -334,20 +395,24 @@ ${error}`
 
           // 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;
+          const setFilePath: string = fs.existsSync(filePath)
+            ? updatedFilePath
+            : filePath;
           item.setSavePath(setFilePath);
         }
 
         const updatedListener = (_event: Event, state: string): void => {
           switch (state) {
-					case 'interrupted': {
+            case "interrupted": {
               // Can interrupted to due to network error, cancel download then
-						console.log('Download interrupted, cancelling and fallback to dialog download.');
+              console.log(
+                "Download interrupted, cancelling and fallback to dialog download.",
+              );
               item.cancel();
               break;
             }
 
-					case 'progressing': {
+            case "progressing": {
               if (item.isPaused()) {
                 item.cancel();
               }
@@ -357,64 +422,80 @@ ${error}`
             }
 
             default: {
-						console.info('Unknown updated state of download item');
+              console.info("Unknown updated state of download item");
             }
           }
         };
 
-			item.on('updated', updatedListener);
+        item.on("updated", updatedListener);
-			item.once('done', (_event: Event, state) => {
+        item.once("done", (_event: Event, state) => {
-				if (state === 'completed') {
+          if (state === "completed") {
-					page.send('downloadFileCompleted', item.getSavePath(), path.basename(item.getSavePath()));
+            send(
+              page,
+              "downloadFileCompleted",
+              item.getSavePath(),
+              path.basename(item.getSavePath()),
+            );
           } else {
-					console.log('Download failed state:', state);
+            console.log("Download failed state:", state);
-					page.send('downloadFileFailed', state);
+            send(page, "downloadFileFailed", state);
           }
 
           // To stop item for listening to updated events of this file
-				item.removeListener('updated', updatedListener);
+          item.removeListener("updated", updatedListener);
-			});
         });
       });
+    },
+  );
 
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
+  ipcMain.on(
-		page.send('update-realm-name', serverURL, realmName);
+    "realm-name-changed",
-	});
+    (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
+      send(page, "update-realm-name", serverURL, realmName);
+    },
+  );
 
-	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
+  ipcMain.on(
-		page.send('update-realm-icon', serverURL, iconURL);
+    "realm-icon-changed",
-	});
+    (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
+      send(page, "update-realm-icon", serverURL, iconURL);
+    },
+  );
 
   // Using event.sender.send instead of page.send here to
   // make sure the value of errorReporting is sent only once on load.
-	ipcMain.on('error-reporting', (event: Electron.IpcMainEvent) => {
+  ipcMain.on("error-reporting", (event: Electron.IpcMainEvent) => {
-		event.sender.send('error-reporting-val', errorReporting);
+    send(event.sender, "error-reporting-val", errorReporting);
   });
 
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMainEvent, index: number) => {
+  ipcMain.on(
-		ConfigUtil.setConfigItem('lastActiveTab', index);
+    "save-last-tab",
-	});
+    (_event: Electron.IpcMainEvent, index: number) => {
+      ConfigUtil.setConfigItem("lastActiveTab", index);
+    },
+  );
 
   // Update user idle status for each realm after every 15s
   const idleCheckInterval = 15 * 1000; // 15 seconds
   setInterval(() => {
     // Set user idle if no activity in 1 second (idleThresholdSeconds)
     const idleThresholdSeconds = 1; // 1 second
-		const idleState = electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
+    const idleState =
-		if (idleState === 'active') {
+      electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
-			page.send('set-active');
+    if (idleState === "active") {
+      send(page, "set-active");
     } else {
-			page.send('set-idle');
+      send(page, "set-idle");
     }
   }, idleCheckInterval);
-});
+})();
 
-app.on('before-quit', () => {
+app.on("before-quit", () => {
   isQuitting = true;
 });
 
 // Send crash reports
-process.on('uncaughtException', err => {
+process.on("uncaughtException", (error) => {
-	console.error(err);
+  console.error(error);
-	console.error(err.stack);
+  console.error(error.stack);
 });

app/main/linux-update-util.ts

@@ -0,0 +1,69 @@
+import {app, dialog} from "electron";
+import fs from "fs";
+import path from "path";
+
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+
+import Logger from "../common/logger-util";
+
+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

@@ -1,45 +1,49 @@
-import {app, Notification, net} from 'electron';
+import {Notification, app, net} from "electron";
 
-import getStream from 'get-stream';
+import getStream from "get-stream";
-import semver from 'semver';
+import * as semver from "semver";
+import * as z from "zod";
 
-import * as ConfigUtil from '../renderer/js/utils/config-util';
+import * as ConfigUtil from "../common/config-util";
-import * as LinuxUpdateUtil from '../renderer/js/utils/linux-update-util';
+import Logger from "../common/logger-util";
-import Logger from '../renderer/js/utils/logger-util';
 
-import {fetchResponse} from './request';
+import * as LinuxUpdateUtil from "./linux-update-util";
+import {fetchResponse} from "./request";
 
 const logger = new Logger({
-	file: 'linux-update-util.log',
+  file: "linux-update-util.log",
-	timestamp: true
 });
 
-export async function linuxUpdateNotification(session: Electron.session): Promise<void> {
+export async function linuxUpdateNotification(
-	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
+  session: Electron.session,
-	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
+): 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);
+      logger.log("Linux update response status: ", response.statusCode);
       return;
     }
 
-		const data = JSON.parse(await getStream(response));
+    const data: unknown = JSON.parse(await getStream(response));
-		const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
+    const latestVersion = ConfigUtil.getConfigItem("betaUpdate", false)
-		if (typeof latestVersion !== 'string') {
+      ? z.array(z.object({tag_name: z.string()})).parse(data)[0].tag_name
-			throw new TypeError('Expected string for tag_name');
+      : z.object({tag_name: z.string()}).parse(data).tag_name;
-		}
 
     if (semver.gt(latestVersion, app.getVersion())) {
       const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
       if (notified === null) {
-				new Notification({title: 'Zulip Update', body: `A new version ${latestVersion} is available. Please update using your package manager.`}).show();
+        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("Linux update error.");
     logger.error(error);
   }
 }

app/main/proxy-util.ts

@@ -0,0 +1,87 @@
+import * as ConfigUtil from "../common/config-util";
+
+export interface ProxyRule {
+  hostname?: string;
+  port?: number;
+}
+
+// TODO: Refactor to async function
+export async function resolveSystemProxy(
+  mainWindow: Electron.BrowserWindow,
+): Promise<void> {
+  const page = mainWindow.webContents;
+  const ses = page.session;
+  const resolveProxyUrl = "www.example.com";
+
+  // Check HTTP Proxy
+  const httpProxy = (async () => {
+    const proxy = await ses.resolveProxy("http://" + resolveProxyUrl);
+    let httpString = "";
+    if (
+      proxy !== "DIRECT" &&
+      (proxy.includes("PROXY") || proxy.includes("HTTPS"))
+    ) {
+      // In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+      // for all other HTTP or direct url:port both uses PROXY
+      httpString = "http=" + proxy.split("PROXY")[1] + ";";
+    }
+
+    return httpString;
+  })();
+  // Check HTTPS Proxy
+  const httpsProxy = (async () => {
+    const proxy = await ses.resolveProxy("https://" + resolveProxyUrl);
+    let httpsString = "";
+    if (
+      (proxy !== "DIRECT" || proxy.includes("HTTPS")) &&
+      (proxy.includes("PROXY") || proxy.includes("HTTPS"))
+    ) {
+      // In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
+      // for all other HTTP or direct url:port both uses PROXY
+      httpsString += "https=" + proxy.split("PROXY")[1] + ";";
+    }
+
+    return httpsString;
+  })();
+
+  // Check FTP Proxy
+  const ftpProxy = (async () => {
+    const proxy = await ses.resolveProxy("ftp://" + resolveProxyUrl);
+    let ftpString = "";
+    if (proxy !== "DIRECT" && proxy.includes("PROXY")) {
+      ftpString += "ftp=" + proxy.split("PROXY")[1] + ";";
+    }
+
+    return ftpString;
+  })();
+
+  // Check SOCKS Proxy
+  const socksProxy = (async () => {
+    const proxy = await ses.resolveProxy("socks4://" + resolveProxyUrl);
+    let socksString = "";
+    if (proxy !== "DIRECT") {
+      if (proxy.includes("SOCKS5")) {
+        socksString += "socks=" + proxy.split("SOCKS5")[1] + ";";
+      } else if (proxy.includes("SOCKS4")) {
+        socksString += "socks=" + proxy.split("SOCKS4")[1] + ";";
+      } else if (proxy.includes("PROXY")) {
+        socksString += "socks=" + proxy.split("PROXY")[1] + ";";
+      }
+    }
+
+    return socksString;
+  })();
+
+  const values = await Promise.all([
+    httpProxy,
+    httpsProxy,
+    ftpProxy,
+    socksProxy,
+  ]);
+  const proxyString = values.join("");
+  ConfigUtil.setConfigItem("systemProxyRules", proxyString);
+  const useSystemProxy = ConfigUtil.getConfigItem("useSystemProxy", false);
+  if (useSystemProxy) {
+    ConfigUtil.setConfigItem("proxyRules", proxyString);
+  }
+}

app/main/request.ts

@@ -1,20 +1,26 @@
-import {ClientRequest, IncomingMessage, app, net} from 'electron';
+import type {ClientRequest, IncomingMessage} from "electron";
-import fs from 'fs';
+import {app, net} from "electron";
-import path from 'path';
+import fs from "fs";
-import stream from 'stream';
+import path from "path";
-import util from 'util';
+import stream from "stream";
+import util from "util";
 
-import getStream from 'get-stream';
+import getStream from "get-stream";
+import * as z from "zod";
 
-import {ServerConf} from '../renderer/js/utils/domain-util';
+import Logger from "../common/logger-util";
-import Logger from '../renderer/js/utils/logger-util';
+import * as Messages from "../common/messages";
-import * as Messages from '../resources/messages';
+import type {ServerConf} from "../common/types";
 
-export async function fetchResponse(request: ClientRequest): Promise<IncomingMessage> {
+export async function fetchResponse(
+  request: ClientRequest,
+): Promise<IncomingMessage> {
   return new Promise((resolve, reject) => {
-		request.on('response', resolve);
+    request.on("response", resolve);
-		request.on('abort', () => reject(new Error('Request aborted')));
+    request.on("abort", () => {
-		request.on('error', reject);
+      reject(new Error("Request aborted"));
+    });
+    request.on("error", reject);
     request.end();
   });
 }
@@ -23,16 +29,15 @@ const pipeline = util.promisify(stream.pipeline);
 
 /* Request: domain-util */
 
-const defaultIconUrl = '../renderer/img/icon.png';
+const defaultIconUrl = "../renderer/img/icon.png";
 
 const logger = new Logger({
-	file: 'domain-util.log',
+  file: "domain-util.log",
-	timestamp: true
 });
 
 const generateFilePath = (url: string): string => {
-	const dir = `${app.getPath('userData')}/server-icons`;
+  const dir = `${app.getPath("userData")}/server-icons`;
-	const extension = path.extname(url).split('?')[0];
+  const extension = path.extname(url).split("?")[0];
 
   let hash = 5381;
   let {length} = url;
@@ -49,38 +54,46 @@ const generateFilePath = (url: string): string => {
   return `${dir}/${hash >>> 0}${extension}`;
 };
 
-export const _getServerSettings = async (domain: string, session: Electron.session): Promise<ServerConf> => {
+export const _getServerSettings = async (
-	const response = await fetchResponse(net.request({
+  domain: string,
-		url: domain + '/api/v1/server_settings',
+  session: Electron.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 {realm_name, realm_uri, realm_icon} = JSON.parse(await getStream(response));
+  const data: unknown = JSON.parse(await getStream(response));
-	if (
+  const {realm_name, realm_uri, realm_icon} = z
-		typeof realm_name !== 'string' ||
+    .object({
-			typeof realm_uri !== 'string' ||
+      realm_name: z.string(),
-			typeof realm_icon !== 'string'
+      realm_uri: z.string(),
-	) {
+      realm_icon: z.string(),
-		throw new TypeError(Messages.noOrgsError(domain));
+    })
-	}
+    .parse(data);
 
   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,
+    icon: realm_icon.startsWith("/") ? realm_uri + realm_icon : realm_icon,
     url: realm_uri,
-		alias: realm_name
+    alias: realm_name,
   };
 };
 
-export const _saveServerIcon = async (url: string, session: Electron.session): Promise<string> => {
+export const _saveServerIcon = async (
+  url: string,
+  session: Electron.session,
+): Promise<string> => {
   try {
     const response = await fetchResponse(net.request({url, session}));
     if (response.statusCode !== 200) {
-			logger.log('Could not get server icon.');
+      logger.log("Could not get server icon.");
       return defaultIconUrl;
     }
 
@@ -88,7 +101,7 @@ export const _saveServerIcon = async (url: string, session: Electron.session): P
     await pipeline(response, fs.createWriteStream(filePath));
     return filePath;
   } catch (error: unknown) {
-		logger.log('Could not get server icon.');
+    logger.log("Could not get server icon.");
     logger.log(error);
     logger.reportSentry(error);
     return defaultIconUrl;
@@ -97,13 +110,20 @@ export const _saveServerIcon = async (url: string, session: Electron.session): P
 
 /* Request: reconnect-util */
 
-export const _isOnline = async (url: string, session: Electron.session): Promise<boolean> => {
+export const _isOnline = async (
+  url: string,
+  session: Electron.session,
+): Promise<boolean> => {
   try {
-		const response = await fetchResponse(net.request({
+    const response = await fetchResponse(
-			url: `${url}/static/favicon.ico`,
+      net.request({
-			session
+        method: "HEAD",
-		}));
+        url: `${url}/api/v1/server_settings`,
-		const isValidResponse = response.statusCode >= 200 && response.statusCode < 400;
+        session,
+      }),
+    );
+    const isValidResponse =
+      response.statusCode >= 200 && response.statusCode < 400;
     return isValidResponse;
   } catch (error: unknown) {
     logger.log(error);

app/main/startup.ts

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

app/main/typed-ipc-main.ts

@@ -0,0 +1,67 @@
+import type {IpcMainEvent, IpcMainInvokeEvent, WebContents} from "electron";
+import {
+  ipcMain as untypedIpcMain, // eslint-disable-line no-restricted-imports
+} from "electron";
+
+import type {MainCall, MainMessage, RendererMessage} from "../common/typed-ipc";
+
+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/renderer/about.html

@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
-        <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-        <link rel="stylesheet" href="css/about.css">
+    <link rel="stylesheet" href="css/about.css" />
     <title>Zulip - About</title>
   </head>
 
@@ -14,19 +13,25 @@
       <div class="maintenance-info">
         <p class="detail maintainer">
           Maintained by
-                    <a href="https://zulip.com" target="_blank" rel="noopener noreferrer">Zulip</a>
+          <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/master/LICENSE" target="_blank" rel="noopener noreferrer">Apache 2.0 License</a>
+          <a
+            href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Apache 2.0 License</a
+          >
         </p>
       </div>
     </div>
     <script>
-
+      const {app} = require("electron").remote;
-            const { app } = require('electron').remote;
+      const version_tag = document.querySelector("#version");
-            const version_tag = document.querySelector('#version');
+      version_tag.textContent = "v" + app.getVersion();
-            version_tag.textContent = 'v' + app.getVersion();
     </script>
   </body>
 </html>

app/renderer/css/about.css

@@ -1,5 +1,5 @@
 body {
-    background: rgba(250, 250, 250, 1.000);
+  background: rgba(250, 250, 250, 1);
   font-family: menu, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -10,7 +10,7 @@ body {
 }
 
 #version {
-    color: rgba(68, 67, 67, 1.000);
+  color: rgba(68, 67, 67, 1);
   font-size: 1.3em;
   padding-top: 40px;
 }
@@ -47,8 +47,8 @@ body {
   cursor: pointer;
   position: absolute;
   width: 100%;
-    left: 0px;
+  left: 0;
-    color: rgba(68, 68, 68, 1.000);
+  color: rgba(68, 68, 68, 1);
 }
 
 .maintenance-info p {
@@ -58,7 +58,7 @@ body {
 }
 
 p.detail a {
-    color: rgba(53, 95, 76, 1.000);
+  color: rgba(53, 95, 76, 1);
 }
 
 p.detail a:hover {

app/renderer/css/feedback.css

@@ -2,6 +2,11 @@
   --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);
@@ -12,8 +17,3 @@ button:active {
   background-color: rgb(241, 241, 241);
   color: var(--button-color);
 }
-
-button {
-    background-color: var(--button-color);
-    border-color: var(--button-color);
-}

app/renderer/css/main.css

@@ -16,7 +16,7 @@ body {
 }
 
 .toggle-sidebar {
-    background: rgba(34, 44, 49, 1.000);
+  background: rgba(34, 44, 49, 1);
   width: 54px;
   padding: 27px 0 20px 0;
   justify-content: space-between;
@@ -47,10 +47,6 @@ body {
   overflow-y: hidden;
 }
 
-#view-controls-container:hover {
-    overflow-y: overlay;
-}
-
 #view-controls-container::-webkit-scrollbar {
   width: 4px;
 }
@@ -60,18 +56,22 @@ body {
 }
 
 #view-controls-container::-webkit-scrollbar-thumb {
-    background-color: rgba(169, 169, 169, 1.000);
+  background-color: rgba(169, 169, 169, 1);
-    outline: 1px solid rgba(169, 169, 169, 1.000);
+  outline: 1px solid rgba(169, 169, 169, 1);
+}
+
+#view-controls-container:hover {
+  overflow-y: overlay;
 }
 
 @font-face {
-    font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+    url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
 }
 
-
 /*******************
   *   Left Sidebar  *
   *******************/
@@ -83,9 +83,10 @@ body {
 }
 
 .material-icons {
-    font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
+
   /* Preferred icon size */
   font-size: 24px;
   display: inline-block;
@@ -95,8 +96,10 @@ body {
   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;
 }
@@ -119,12 +122,23 @@ body {
 }
 
 .action-button i {
-    color: rgba(108, 133, 146, 1.000);
+  color: rgba(108, 133, 146, 1);
   font-size: 28px;
 }
 
 .action-button:hover i {
-    color: rgba(152, 169, 179, 1.000);
+  color: rgba(152, 169, 179, 1);
+}
+
+.action-button.active {
+  /* background-color: rgba(255, 255, 255, 0.25); */
+  background-color: rgba(239, 239, 239, 1);
+  opacity: 0.9;
+  padding-right: 14px;
+}
+
+.action-button.active i {
+  color: rgba(28, 38, 43, 1);
 }
 
 .action-button.disable {
@@ -136,22 +150,7 @@ body {
 }
 
 .action-button.disable:hover i {
-    color: rgba(108, 133, 146, 1.000);
+  color: rgba(108, 133, 146, 1);
-}
-
-.action-button.active {
-    /* background-color: rgba(255, 255, 255, 0.25); */
-    background-color: rgba(239, 239, 239, 1.000);
-    opacity: 0.9;
-    padding-right: 14px;
-}
-
-.action-button.active i {
-    color: rgba(28, 38, 43, 1.000);
-}
-
-.tab:first-child {
-    margin-top: 9px;
 }
 
 .tab {
@@ -164,6 +163,10 @@ body {
   width: 100%;
 }
 
+.tab:first-child {
+  margin-top: 9px;
+}
+
 .tab .server-icons {
   width: 35px;
   vertical-align: top;
@@ -177,7 +180,7 @@ body {
   margin-top: 5px;
   z-index: 11;
   line-height: 31px;
-    color: rgba(238, 238, 238, 1.000);
+  color: rgba(238, 238, 238, 1);
   text-align: center;
   overflow: hidden;
   opacity: 0.6;
@@ -185,10 +188,10 @@ body {
 }
 
 .server-tab .alt-icon {
-    font-family: Verdana;
+  font-family: Verdana, sans-serif;
   font-weight: 600;
   font-size: 22px;
-    border: 2px solid rgba(34, 44, 49, 1.000);
+  border: 2px solid rgba(34, 44, 49, 1);
   margin-left: 17%;
   width: 35px;
   border-radius: 4px;
@@ -198,6 +201,11 @@ body {
   opacity: 0.8;
 }
 
+.tab.active .server-tab {
+  opacity: 1;
+  background-color: rgba(100, 132, 120, 1);
+}
+
 .tab.functional-tab {
   height: 46px;
   padding: 0;
@@ -214,25 +222,19 @@ body {
   line-height: 36px;
 }
 
-.tab.active .server-tab {
-    opacity: 1;
-    background-color: rgba(100, 132, 120, 1.000);
-}
-
 .tab .server-tab-badge.active {
   border-radius: 9px;
   min-width: 11px;
   padding: 0 3px;
   height: 17px;
-    background-color: rgba(244, 67, 54, 1.000);
+  background-color: rgba(244, 67, 54, 1);
   font-size: 10px;
   font-family: sans-serif;
   position: absolute;
-    right: 5px;
   z-index: 15;
   top: 6px;
   float: right;
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   text-align: center;
   line-height: 17px;
   display: block;
@@ -260,7 +262,7 @@ body {
 }
 
 .tab .server-tab-shortcut {
-    color: rgba(100, 132, 120, 1.000);
+  color: rgba(100, 132, 120, 1);
   font-size: 12px;
   text-align: center;
   font-family: sans-serif;
@@ -275,6 +277,7 @@ body {
   from {
     transform: rotate(0);
   }
+
   to {
     transform: rotate(-360deg);
   }
@@ -295,7 +298,7 @@ body {
   content: "";
   position: absolute;
   z-index: 1;
-    background: rgba(255, 255, 255, 1.000) url(../img/ic_loading.gif) no-repeat;
+  background: rgba(255, 255, 255, 1) url(../img/ic_loading.gif) no-repeat;
   background-size: 60px 60px;
   background-position: center;
   width: 100%;
@@ -311,7 +314,6 @@ body {
 
 webview {
   /* transition: opacity 0.3s ease-in; */
-    flex-grow: 1;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -335,7 +337,7 @@ webview.disabled {
 }
 
 webview.focus {
-    outline: 0px solid transparent;
+  outline: 0 solid transparent;
 }
 
 /* Tooltip styling */
@@ -346,13 +348,13 @@ webview.focus {
 #reload-tooltip,
 #setting-tooltip {
   font-family: sans-serif;
-    background: rgba(34, 44, 49, 1.000);
+  background: rgba(34, 44, 49, 1);
   margin-left: 48px;
   padding: 6px 8px;
   position: absolute;
-    margin-top: 0px;
+  margin-top: 0;
   z-index: 1000;
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   border-radius: 4px;
   text-align: center;
   width: 55px;
@@ -367,7 +369,7 @@ webview.focus {
   content: " ";
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
+  border-right: 8px solid rgba(34, 44, 49, 1);
   position: absolute;
   top: 7px;
   right: 68px;
@@ -375,14 +377,14 @@ webview.focus {
 
 #add-server-tooltip,
 .server-tooltip {
-    font-family: 'arial';
+  font-family: "arial", sans-serif;
-    background: rgba(34, 44, 49, 1.000);
+  background: rgba(34, 44, 49, 1);
   left: 56px;
   padding: 10px 20px;
   position: fixed;
   margin-top: 11px;
   z-index: 5000 !important;
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   border-radius: 4px;
   text-align: center;
   width: max-content;
@@ -394,7 +396,7 @@ webview.focus {
   content: " ";
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
+  border-right: 8px solid rgba(34, 44, 49, 1);
   position: absolute;
   top: 10px;
   left: -5px;
@@ -406,14 +408,14 @@ webview.focus {
   position: absolute;
   width: 24px;
   height: 24px;
-    background: rgba(34, 44, 49, 1.000);
+  background: rgba(34, 44, 49, 1);
   border-radius: 20px;
   cursor: pointer;
-    box-shadow: rgba(153, 153, 153, 1.000) 1px 1px;
+  box-shadow: rgba(153, 153, 153, 1) 1px 1px;
 }
 
 #collapse-button i {
-    color: rgba(239, 239, 239, 1.000);
+  color: rgba(239, 239, 239, 1);
 }
 
 #main-container {
@@ -422,26 +424,25 @@ webview.focus {
   width: 100%;
   position: relative;
   flex-grow: 1;
-    flex-basis: 0px;
+  flex-basis: 0;
 }
 
 .hidden {
   display: none !important;
 }
 
-
 /* Full screen Popup container  */
 
 .popup .popuptext {
   visibility: hidden;
-    background-color: rgba(85, 85, 85, 1.000);
+  background-color: rgba(85, 85, 85, 1);
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   text-align: center;
   border-radius: 6px;
   padding: 9px 0;
   position: absolute;
   z-index: 1000;
-    font-family: arial;
+  font-family: arial, sans-serif;
   width: 240px;
   top: 15px;
   height: 20px;
@@ -458,6 +459,7 @@ webview.focus {
   from {
     opacity: 0;
   }
+
   to {
     width: 0;
     height: 0;

app/renderer/css/network.css

@@ -3,8 +3,8 @@ body {
   margin: 0;
   cursor: default;
   font-size: 14px;
-    color: rgba(51, 51, 51, 1.000);
+  color: rgba(51, 51, 51, 1);
-    background: rgba(255, 255, 255, 1.000);
+  background: rgba(255, 255, 255, 1);
   user-select: none;
 }
 
@@ -45,8 +45,8 @@ body {
 
 .button {
   font-size: 16px;
-    background: rgba(0, 150, 136, 1.000);
+  background: rgba(0, 150, 136, 1);
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   width: 96px;
   height: 32px;
   border-radius: 5px;

app/renderer/css/preference.css

@@ -7,25 +7,25 @@ body {
   font-family: menu, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 14px;
-    background: rgba(239, 239, 239, 1.000);
+  background: rgba(239, 239, 239, 1);
-    letter-spacing: -.08px;
+  letter-spacing: -0.08px;
   line-height: 18px;
-    color: rgba(139, 142, 143, 1.000);
+  color: rgba(139, 142, 143, 1);
 }
 
 kbd {
   display: inline-block;
-    border: 1px solid rgba(204, 204, 204, 1.000);
+  border: 1px solid rgba(204, 204, 204, 1);
   border-radius: 4px;
   font-size: 15px;
   font-family: Courier New, Courier, monospace;
   font-weight: bold;
   white-space: nowrap;
-    background-color: rgba(247, 247, 247, 1.000);
+  background-color: rgba(247, 247, 247, 1);
-    color: rgba(51, 51, 51, 1.000);
+  color: rgba(51, 51, 51, 1);
   margin: 0 0.1em;
   padding: 0.3em 0.8em;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 1.000);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
   line-height: 1.4;
 }
 
@@ -33,7 +33,7 @@ table,
 th,
 td {
   border-collapse: collapse;
-    color: rgba(56, 52, 48, 1.000);
+  color: rgba(56, 52, 48, 1);
 }
 
 table {
@@ -42,14 +42,6 @@ table {
   margin-bottom: 18px;
 }
 
-table tr:nth-child(even) {
-    background-color: rgba(250, 250, 250, 1.000);
-}
-
-table tr:nth-child(odd) {
-    background-color: rgba(255, 255, 255, 1.000);
-}
-
 td {
   padding: 5px;
 }
@@ -60,21 +52,23 @@ td:nth-child(odd) {
 }
 
 @font-face {
-    font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+    url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
 }
 
 @font-face {
-    font-family: 'Montserrat';
+  font-family: "Montserrat";
-    src: url(../fonts/Montserrat-Regular.ttf) format('truetype');
+  src: url(../fonts/Montserrat-Regular.ttf) format("truetype");
 }
 
 .material-icons {
-    font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
+
   /* Preferred icon size */
   font-size: 24px;
   display: inline-block;
@@ -84,8 +78,10 @@ td:nth-child(odd) {
   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;
 }
@@ -93,7 +89,7 @@ td:nth-child(odd) {
 #content {
   display: flex;
   height: 100%;
-    font-family: 'Montserrat';
+  font-family: "Montserrat", sans-serif;
 }
 
 #sidebar {
@@ -103,7 +99,7 @@ td:nth-child(odd) {
   display: flex;
   flex-direction: column;
   font-size: 16px;
-    background: rgba(242, 242, 242, 1.000);
+  background: rgba(242, 242, 242, 1);
 }
 
 #nav-container {
@@ -112,23 +108,23 @@ td:nth-child(odd) {
 
 .nav {
   padding: 7px 0;
-    color: rgba(153, 153, 153, 1.000);
+  color: rgba(153, 153, 153, 1);
   cursor: pointer;
 }
 
 .nav.active {
-    color: rgba(78, 191, 172, 1.000);
+  color: rgba(78, 191, 172, 1);
   cursor: default;
   position: relative;
 }
 
 .nav.active::before {
-    background: rgba(70, 78, 90, 1.000);
+  background: rgba(70, 78, 90, 1);
   width: 3px;
   height: 18px;
   position: absolute;
   left: -8px;
-    content: '';
+  content: "";
 }
 
 /* We don't want to show this in nav item since we have the + button for adding an Organization */
@@ -139,7 +135,7 @@ td:nth-child(odd) {
 
 #settings-header {
   font-size: 22px;
-    color: rgba(34, 44, 49, 1.000);
+  color: rgba(34, 44, 49, 1);
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -159,11 +155,11 @@ td:nth-child(odd) {
 
 .title {
   font-weight: 500;
-    color: rgba(34, 44, 49, 1.000);
+  color: rgba(34, 44, 49, 1);
 }
 
 .page-title {
-    color: rgba(34, 44, 49, 1.000);
+  color: rgba(34, 44, 49, 1);
   font-size: 15px;
   font-weight: bold;
   padding: 4px 0 6px 0;
@@ -182,7 +178,7 @@ td:nth-child(odd) {
 .sub-title {
   padding: 4px 0 6px 0;
   font-weight: bold;
-    color: rgba(97, 97, 97, 1.000);
+  color: rgba(97, 97, 97, 1);
 }
 
 img.server-info-icon {
@@ -249,14 +245,14 @@ img.server-info-icon {
   font-size: 14px;
   border-radius: 4px;
   padding: 13px;
-    border: rgba(237, 237, 237, 1.000) 2px solid;
+  border: rgba(237, 237, 237, 1) 2px solid;
   outline-width: 0;
   background: transparent;
   max-width: 450px;
 }
 
 .setting-input-value:focus {
-    border: rgba(78, 191, 172, 1.000) 2px solid;
+  border: rgba(78, 191, 172, 1) 2px solid;
 }
 
 .invalid-input-value:focus {
@@ -270,7 +266,7 @@ img.server-info-icon {
 .actions-container {
   display: flex;
   font-size: 14px;
-    color: rgba(35, 93, 58, 1.000);
+  color: rgba(35, 93, 58, 1);
   vertical-align: middle;
   margin: 10px 0;
   flex-wrap: wrap;
@@ -298,12 +294,12 @@ img.server-info-icon {
   cursor: pointer;
 }
 
-.action.disabled:hover {
+.action.disabled {
-    cursor: default;
+  color: rgba(153, 153, 153, 1);
 }
 
-.action.disabled {
+.action.disabled:hover {
-    color: rgba(153, 153, 153, 1.000);
+  cursor: default;
 }
 
 .settings-card {
@@ -311,13 +307,13 @@ img.server-info-icon {
   flex-wrap: wrap;
   padding: 12px 30px;
   margin: 10px 0 20px 0;
-    background: rgba(255, 255, 255, 1.000);
+  background: rgba(255, 255, 255, 1);
   width: 80%;
   transition: all 0.2s;
 }
 
 .settings-card:hover {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0 0 rgba(0, 0, 0, 0.12);
 }
 
 .hidden {
@@ -327,7 +323,7 @@ img.server-info-icon {
 
 .red {
   color: rgb(240, 148, 148);
-    background: rgba(255, 255, 255, 1.000);
+  background: rgba(255, 255, 255, 1);
   border-radius: 4px;
   display: inline-block;
   border: 2px solid rgb(240, 148, 148);
@@ -343,12 +339,12 @@ img.server-info-icon {
 
 .red:hover {
   background-color: rgb(240, 148, 148);
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
 }
 
 .green {
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
-    background: rgba(78, 191, 172, 1.000);
+  background: rgba(78, 191, 172, 1);
   border-radius: 4px;
   display: inline-block;
   border: none;
@@ -363,8 +359,8 @@ img.server-info-icon {
 }
 
 .green:hover {
-    background-color: rgba(60, 159, 141, 1.000);
+  background-color: rgba(60, 159, 141, 1);
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
 }
 
 .w-150 {
@@ -376,9 +372,9 @@ img.server-info-icon {
 }
 
 .grey {
-    color: rgba(158, 158, 158, 1.000);
+  color: rgba(158, 158, 158, 1);
-    background: rgba(250, 250, 250, 1.000);
+  background: rgba(250, 250, 250, 1);
-    border: 1px solid rgba(158, 158, 158, 1.000);
+  border: 1px solid rgba(158, 158, 158, 1);
 }
 
 .setting-row {
@@ -413,12 +409,12 @@ i.open-tab-button {
         .action class will add extra margin to right which
         we don't want for a button; the extra margin is intended for radio buttons
     */
-    margin-right: 0px;
+  margin-right: 0;
 }
 
 .selected-css-path,
 .download-folder-path {
-    background: rgba(238, 238, 238, 1.000);
+  background: rgba(238, 238, 238, 1);
   padding: 5px 10px;
   margin-right: 10px;
   display: flex;
@@ -435,7 +431,7 @@ i.open-tab-button {
 }
 
 #new-org-button {
-    margin: 30px 0px 30px 0px;
+  margin: 30px 0 30px 0;
 }
 
 #create-organization-container {
@@ -467,7 +463,7 @@ i.open-tab-button {
 }
 
 .disallowed:hover {
-    background-color: rgba(241, 241, 241, 1.000);
+  background-color: rgba(241, 241, 241, 1);
   cursor: not-allowed;
 }
 
@@ -475,7 +471,7 @@ input.toggle-round + label {
   padding: 2px;
   width: 50px;
   height: 25px;
-    background-color: rgba(221, 221, 221, 1.000);
+  background-color: rgba(221, 221, 221, 1);
   border-radius: 25px;
 }
 
@@ -490,27 +486,27 @@ input.toggle-round + label::after {
 }
 
 input.toggle-round + label::before {
-    background-color: rgba(241, 241, 241, 1.000);
+  background-color: rgba(241, 241, 241, 1);
   border-radius: 25px;
   top: 0;
-    right: 0px;
+  right: 0;
-    left: 0px;
+  left: 0;
-    bottom: 0px;
+  bottom: 0;
 }
 
 input.toggle-round + label::after {
   width: 25px;
   height: 25px;
-    background-color: rgba(255, 255, 255, 1.000);
+  background-color: rgba(255, 255, 255, 1);
   border-radius: 100%;
 }
 
 input.toggle-round:checked + label::before {
-    background-color: rgba(78, 191, 172, 1.000);
+  background-color: rgba(78, 191, 172, 1);
   top: 0;
-    right: 0px;
+  right: 0;
-    left: 0px;
+  left: 0;
-    bottom: 0px;
+  bottom: 0;
 }
 
 input.toggle-round:checked + label::after {
@@ -529,18 +525,19 @@ input.toggle-round:checked + label::after {
   margin: auto;
   width: 100%;
   height: 100%;
+
   /* background: rgba(61, 64, 67, 15); */
-    background: linear-gradient(35deg, rgba(0, 59, 82, 1.000), rgba(69, 181, 155, 1.000));
+  background: linear-gradient(35deg, rgba(0, 59, 82, 1), rgba(69, 181, 155, 1));
   overflow: auto;
 }
 
 /* Modal Content */
 
 .modal-container {
-    background-color: rgba(244, 247, 248, 1.000);
+  background-color: rgba(244, 247, 248, 1);
   margin: auto;
   padding: 57px;
-    border: rgba(218, 225, 227, 1.000) 1px solid;
+  border: rgba(218, 225, 227, 1) 1px solid;
   width: 550px;
   height: 370px;
   border-radius: 4px;
@@ -554,7 +551,7 @@ input.toggle-round:checked + label::after {
 .divider {
   margin-bottom: 30px;
   margin-top: 30px;
-    color: rgba(125, 135, 138, 1.000);
+  color: rgba(125, 135, 138, 1);
 }
 
 .divider hr {
@@ -585,8 +582,8 @@ input.toggle-round:checked + label::after {
   margin: auto;
   align-items: center;
   text-align: center;
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
-    background: rgba(78, 191, 172, 1.000);
+  background: rgba(78, 191, 172, 1);
   border-color: none;
   border: none;
   width: 98%;
@@ -596,11 +593,11 @@ input.toggle-round:checked + label::after {
 }
 
 .server-center button:hover {
-    background: rgba(50, 149, 136, 1.000);
+  background: rgba(50, 149, 136, 1);
 }
 
 .server-center button:focus {
-    background: rgba(50, 149, 136, 1.000);
+  background: rgba(50, 149, 136, 1);
 }
 
 .certificates-card {
@@ -665,10 +662,11 @@ i.open-network-button {
 /* responsive grid */
 @media (min-width: 500px) and (max-width: 720px) {
   #new-server-container {
-        padding-left: 0px;
+    padding-left: 0;
     width: 60vw;
     padding-right: 4vh;
   }
+
   .page-title {
     width: 60vw;
   }
@@ -676,9 +674,10 @@ i.open-network-button {
 
 @media (max-width: 500px) {
   #new-server-container {
-        padding-left: 0px;
+    padding-left: 0;
     width: 54%;
   }
+
   .page-title {
     width: 54%;
   }
@@ -689,9 +688,11 @@ i.open-network-button {
   .download-folder-path {
     margin-right: 15px;
   }
+
   #css-delete-action {
     margin-left: 10px;
   }
+
   #css-delete-action span {
     display: none;
   }
@@ -703,13 +704,16 @@ i.open-network-button {
     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;
@@ -721,6 +725,7 @@ i.open-network-button {
   .divider {
     margin-left: 4%;
   }
+
   .divider hr {
     margin-left: 2px;
     margin-right: 2px;
@@ -733,10 +738,12 @@ i.open-network-button {
     flex-direction: column;
     align-items: center;
   }
+
   .server-info-right {
     flex-direction: column;
     align-items: center;
   }
+
   .action {
     margin-top: 10px;
   }
@@ -745,9 +752,18 @@ i.open-network-button {
 .lang-menu {
   font-size: 13px;
   font-weight: bold;
-    background: rgba(78, 191, 172, 1.000);
+  background: rgba(78, 191, 172, 1);
   width: 100px;
   height: 38px;
-    color: rgba(255, 255, 255, 1.000);
+  color: rgba(255, 255, 255, 1);
   border-color: rgba(0, 0, 0, 0);
 }
+
+.tagify__input {
+  min-width: 130px !important;
+}
+
+.tagify__input::before {
+  top: 0;
+  bottom: 0;
+}

app/renderer/js/clipboard-decrypter.ts

@@ -1,5 +1,5 @@
-import crypto from 'crypto';
+import crypto from "crypto";
-import {clipboard} from 'electron';
+import {clipboard} from "electron";
 
 // This helper is exposed via electron_bridge for use in the social
 // login flow.
@@ -24,7 +24,7 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
     // At this time, the only version is 1.
     this.version = 1;
     this.key = crypto.randomBytes(32);
-		this.pasted = new Promise(resolve => {
+    this.pasted = new Promise((resolve) => {
       let interval: NodeJS.Timeout | null = null;
       const startPolling = () => {
         if (interval === null) {
@@ -45,20 +45,20 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
         let plaintext;
 
         try {
-					const data = Buffer.from(clipboard.readText(), 'hex');
+          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',
+            "aes-256-gcm",
             this.key,
             iv,
-						{authTagLength: 16}
+            {authTagLength: 16},
           );
           decipher.setAuthTag(authTag);
           plaintext =
-						decipher.update(ciphertext, undefined, 'utf8') +
+            decipher.update(ciphertext, undefined, "utf8") +
-						decipher.final('utf8');
+            decipher.final("utf8");
         } catch {
           // If the parsing or decryption failed in any way,
           // the correct token hasn’t been copied yet; try
@@ -66,14 +66,14 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
           return;
         }
 
-				window.removeEventListener('focus', startPolling);
+        window.removeEventListener("focus", startPolling);
-				window.removeEventListener('blur', stopPolling);
+        window.removeEventListener("blur", stopPolling);
         stopPolling();
         resolve(plaintext);
       };
 
-			window.addEventListener('focus', startPolling);
+      window.addEventListener("focus", startPolling);
-			window.addEventListener('blur', stopPolling);
+      window.addEventListener("blur", stopPolling);
       if (document.hasFocus()) {
         startPolling();
       }

app/renderer/js/components/base.ts

@@ -1,7 +1,12 @@
-export default class BaseComponent {
+import type {HTML} from "../../../common/html";
-	generateNodeFromHTML(html: string): Element | null {
+
-		const wrapper = document.createElement('div');
+export function generateNodeFromHTML(html: HTML): Element {
-		wrapper.innerHTML = html;
+  const wrapper = document.createElement("div");
-		return wrapper.firstElementChild;
+  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

@@ -1,106 +1,133 @@
-import {remote, ContextMenuParams} from 'electron';
+import type {ContextMenuParams} from "electron";
+import {remote} from "electron";
 
-import * as t from '../utils/translation-util';
+import * as t from "../../../common/translation-util";
 
 const {clipboard, Menu} = remote;
 
-export const contextMenu = (webContents: Electron.WebContents, event: Event, props: ContextMenuParams) => {
+export const contextMenu = (
-	const isText = props.selectionText !== '';
+  webContents: Electron.WebContents,
-	const isLink = props.linkURL !== '';
+  event: Event,
+  props: ContextMenuParams,
+) => {
+  const isText = props.selectionText !== "";
+  const isLink = props.linkURL !== "";
   const linkURL = isLink ? new URL(props.linkURL) : undefined;
-	const isEmailAddress = isLink ? linkURL.protocol === 'mailto:' : undefined;
 
   const makeSuggestion = (suggestion: string) => ({
     label: suggestion,
     visible: true,
     async click() {
       await webContents.insertText(suggestion);
-		}
+    },
   });
 
-	let menuTemplate: Electron.MenuItemConstructorOptions[] = [{
+  let menuTemplate: Electron.MenuItemConstructorOptions[] = [
-		label: t.__('Add to Dictionary'),
+    {
-		visible: props.isEditable && isText && props.misspelledWord.length !== 0,
+      label: t.__("Add to Dictionary"),
+      visible: props.isEditable && isText && props.misspelledWord.length > 0,
       click(_item) {
-			webContents.session.addWordToSpellCheckerDictionary(props.misspelledWord);
+        webContents.session.addWordToSpellCheckerDictionary(
-		}
+          props.misspelledWord,
-	}, {
+        );
-		type: 'separator',
+      },
-		visible: props.isEditable && isText && props.misspelledWord.length !== 0
+    },
-	}, {
+    {
-		label: `${t.__('Look Up')} "${props.selectionText}"`,
+      type: "separator",
-		visible: process.platform === 'darwin' && isText,
+      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
+      type: "separator",
-	}, {
+      visible: process.platform === "darwin" && isText,
-		label: t.__('Cut'),
+    },
+    {
+      label: t.__("Cut"),
       visible: isText,
       enabled: props.isEditable,
-		accelerator: 'CommandOrControl+X',
+      accelerator: "CommandOrControl+X",
       click(_item) {
         webContents.cut();
-		}
+      },
-	}, {
+    },
-		label: t.__('Copy'),
+    {
-		accelerator: 'CommandOrControl+C',
+      label: t.__("Copy"),
+      accelerator: "CommandOrControl+C",
       enabled: props.editFlags.canCopy,
       click(_item) {
         webContents.copy();
-		}
+      },
-	}, {
+    },
-		label: t.__('Paste'), // Bug: Paste replaces text
+    {
-		accelerator: 'CommandOrControl+V',
+      label: t.__("Paste"), // Bug: Paste replaces text
+      accelerator: "CommandOrControl+V",
       enabled: props.isEditable,
       click() {
         webContents.paste();
-		}
+      },
-	}, {
+    },
-		type: 'separator'
+    {
-	}, {
+      type: "separator",
-		label: isEmailAddress ? t.__('Copy Email Address') : t.__('Copy Link'),
+    },
+    {
+      label:
+        linkURL?.protocol === "mailto:"
+          ? t.__("Copy Email Address")
+          : t.__("Copy Link"),
       visible: isLink,
       click(_item) {
         clipboard.write({
           bookmark: props.linkText,
-				text: isEmailAddress ? linkURL.pathname : props.linkURL
+          text:
+            linkURL?.protocol === "mailto:" ? linkURL.pathname : props.linkURL,
         });
-		}
+      },
-	}, {
+    },
-		label: t.__('Copy Image'),
+    {
-		visible: props.mediaType === 'image',
+      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',
+      label: t.__("Copy Image URL"),
+      visible: props.mediaType === "image",
       click(_item) {
         clipboard.write({
           bookmark: props.srcURL,
-				text: props.srcURL
+          text: props.srcURL,
         });
-		}
+      },
-	}, {
+    },
-		type: 'separator',
+    {
-		visible: isLink || props.mediaType === 'image'
+      type: "separator",
-	}, {
+      visible: isLink || props.mediaType === "image",
-		label: t.__('Services'),
+    },
-		visible: process.platform === 'darwin',
+    {
-		role: 'services'
+      label: t.__("Services"),
-	}];
+      visible: process.platform === "darwin",
+      role: "services",
+    },
+  ];
 
   if (props.misspelledWord) {
     if (props.dictionarySuggestions.length > 0) {
-			const suggestions: Electron.MenuItemConstructorOptions[] = props.dictionarySuggestions.map((suggestion: string) => makeSuggestion(suggestion));
+      const suggestions: Electron.MenuItemConstructorOptions[] =
-			menuTemplate = suggestions.concat(menuTemplate);
+        props.dictionarySuggestions.map((suggestion: string) =>
+          makeSuggestion(suggestion),
+        );
+      menuTemplate = [...suggestions, ...menuTemplate];
     } else {
       menuTemplate.unshift({
-				label: t.__('No Suggestion Found'),
+        label: t.__("No Suggestion Found"),
-				enabled: false
+        enabled: false,
       });
     }
   }
@@ -109,7 +136,9 @@ export const contextMenu = (webContents: Electron.WebContents, event: Event, pro
   // https://github.com/electron/electron/issues/5869
   // https://github.com/electron/electron/issues/6906
 
-	const filteredMenuTemplate = menuTemplate.filter(menuItem => menuItem.visible ?? true);
+  const filteredMenuTemplate = menuTemplate.filter(
+    (menuItem) => menuItem.visible ?? true,
+  );
   const menu = Menu.buildFromTemplate(filteredMenuTemplate);
   menu.popup();
 };

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

@@ -1,17 +1,27 @@
-import {htmlEscape} from 'escape-goat';
+import type {HTML} from "../../../common/html";
+import {html} from "../../../common/html";
 
-import Tab, {TabProps} from './tab';
+import {generateNodeFromHTML} from "./base";
+import type {TabProps} from "./tab";
+import Tab from "./tab";
 
 export default class FunctionalTab extends Tab {
-	$closeButton: Element;
+  $el: Element;
+  $closeButton?: Element;
 
   constructor(props: TabProps) {
     super(props);
-		this.init();
+
+    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();
+    }
   }
 
-	templateHTML(): string {
+  templateHTML(): HTML {
-		return htmlEscape`
+    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>
@@ -23,28 +33,19 @@ export default class FunctionalTab extends Tab {
     `;
   }
 
-	init(): void {
-		this.$el = this.generateNodeFromHTML(this.templateHTML());
-		if (this.props.name !== 'Settings') {
-			this.props.$root.append(this.$el);
-			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
-			this.registerListeners();
-		}
-	}
-
   registerListeners(): void {
     super.registerListeners();
 
-		this.$el.addEventListener('mouseover', () => {
+    this.$el.addEventListener("mouseover", () => {
-			this.$closeButton.classList.add('active');
+      this.$closeButton?.classList.add("active");
     });
 
-		this.$el.addEventListener('mouseout', () => {
+    this.$el.addEventListener("mouseout", () => {
-			this.$closeButton.classList.remove('active');
+      this.$closeButton?.classList.remove("active");
     });
 
-		this.$closeButton.addEventListener('click', (event: Event) => {
+    this.$closeButton?.addEventListener("click", (event: Event) => {
-			this.props.onDestroy();
+      this.props.onDestroy?.();
       event.stopPropagation();
     });
   }

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

@@ -1,59 +1,70 @@
-import {ipcRenderer, remote} from 'electron';
+import {remote} from "electron";
 
-import * as ConfigUtil from '../utils/config-util';
+import * as ConfigUtil from "../../../common/config-util";
-import * as LinkUtil from '../utils/link-util';
+import {ipcRenderer} from "../typed-ipc-renderer";
+import * as LinkUtil from "../utils/link-util";
 
-import type WebView from './webview';
+import type WebView from "./webview";
 
 const {shell, app} = remote;
 
-const dingSound = new Audio('../resources/sounds/ding.ogg');
+const dingSound = new Audio("../resources/sounds/ding.ogg");
 
-export default function handleExternalLink(this: WebView, event: Electron.NewWindowEvent): void {
+export default function handleExternalLink(
+  this: WebView,
+  event: Electron.NewWindowEvent,
+): void {
   event.preventDefault();
 
   const url = new URL(event.url);
-	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
+  const downloadPath = ConfigUtil.getConfigItem(
+    "downloadsPath",
+    `${app.getPath("downloads")}`,
+  );
 
   if (LinkUtil.isUploadsUrl(this.props.url, url)) {
-		ipcRenderer.send('downloadFile', url.href, downloadPath);
+    ipcRenderer.send("downloadFile", url.href, downloadPath);
-		ipcRenderer.once('downloadFileCompleted', async (_event: Event, filePath: string, fileName: string) => {
+    ipcRenderer.once(
-			const downloadNotification = new Notification('Download Complete', {
+      "downloadFileCompleted",
+      async (_event: Event, filePath: string, fileName: string) => {
+        const downloadNotification = new Notification("Download Complete", {
           body: `Click to show ${fileName} in folder`,
-				silent: true // We'll play our own sound - ding.ogg
+          silent: true, // We'll play our own sound - ding.ogg
         });
 
-			downloadNotification.addEventListener('click', () => {
+        downloadNotification.addEventListener("click", () => {
           // Reveal file in download folder
           shell.showItemInFolder(filePath);
         });
-			ipcRenderer.removeAllListeners('downloadFileFailed');
+        ipcRenderer.removeAllListeners("downloadFileFailed");
 
         // Play sound to indicate download complete
-			if (!ConfigUtil.getConfigItem('silent')) {
+        if (!ConfigUtil.getConfigItem("silent", false)) {
           await dingSound.play();
         }
-		});
+      },
+    );
 
-		ipcRenderer.once('downloadFileFailed', (_event: Event, state: string) => {
+    ipcRenderer.once("downloadFileFailed", (_event: Event, 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 (state !== "cancelled") {
-				if (ConfigUtil.getConfigItem('promptDownload', false)) {
+        if (ConfigUtil.getConfigItem("promptDownload", false)) {
           // We need to create a "new Notification" to display it, but just `Notification(...)` on its own
           // doesn't work
-					new Notification('Download Complete', { // eslint-disable-line no-new
+          // eslint-disable-next-line no-new
-						body: 'Download failed'
+          new Notification("Download Complete", {
+            body: "Download failed",
           });
         } else {
-					this.$el.downloadURL(url.href);
+          this.$el!.downloadURL(url.href);
         }
       }
 
-			ipcRenderer.removeAllListeners('downloadFileCompleted');
+      ipcRenderer.removeAllListeners("downloadFileCompleted");
     });
   } else {
     (async () => LinkUtil.openBrowser(url))();

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

@@ -1,63 +1,65 @@
-import {ipcRenderer} from 'electron';
+import type {HTML} from "../../../common/html";
+import {html} from "../../../common/html";
+import {ipcRenderer} from "../typed-ipc-renderer";
+import * as SystemUtil from "../utils/system-util";
 
-import {htmlEscape} from 'escape-goat';
+import {generateNodeFromHTML} from "./base";
-
+import type {TabProps} from "./tab";
-import * as SystemUtil from '../utils/system-util';
+import Tab from "./tab";
-
-import Tab, {TabProps} from './tab';
 
 export default class ServerTab extends Tab {
+  $el: Element;
   $badge: Element;
 
   constructor(props: TabProps) {
     super(props);
-		this.init();
+
+    this.$el = generateNodeFromHTML(this.templateHTML());
+    this.props.$root.append(this.$el);
+    this.registerListeners();
+    this.$badge = this.$el.querySelector(".server-tab-badge")!;
   }
 
-	templateHTML(): string {
+  templateHTML(): HTML {
-		return htmlEscape`
+    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-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}"/>
+          <img class="server-icons" src="${this.props.icon}" />
         </div>
         <div class="server-tab-shortcut">${this.generateShortcutText()}</div>
       </div>
     `;
   }
 
-	init(): void {
-		this.$el = this.generateNodeFromHTML(this.templateHTML());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
-	}
-
   updateBadge(count: number): void {
     if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count.toString();
+      const formattedCount = count > 999 ? "1K+" : count.toString();
       this.$badge.textContent = formattedCount;
-			this.$badge.classList.add('active');
+      this.$badge.classList.add("active");
     } else {
-			this.$badge.classList.remove('active');
+      this.$badge.classList.remove("active");
     }
   }
 
   generateShortcutText(): string {
-		// Only provide shortcuts for server [0..10]
+    // Only provide shortcuts for server [0..9]
-		if (this.props.index >= 10) {
+    if (this.props.index >= 9) {
-			return '';
+      return "";
     }
 
     const shownIndex = this.props.index + 1;
 
-		let shortcutText = '';
+    let shortcutText = "";
 
-		shortcutText = SystemUtil.getOS() === 'Mac' ? `⌘ ${shownIndex}` : `Ctrl+${shownIndex}`;
+    shortcutText =
+      SystemUtil.getOS() === "Mac" ? `⌘ ${shownIndex}` : `Ctrl+${shownIndex}`;
 
     // Array index == Shown index - 1
-		ipcRenderer.send('switch-server-tab', shownIndex - 1);
+    ipcRenderer.send("switch-server-tab", shownIndex - 1);
 
     return shortcutText;
   }

app/renderer/js/components/tab.ts

@@ -1,8 +1,9 @@
-import BaseComponent from './base';
+import type {TabRole} from "../../../common/types";
-import WebView from './webview';
+
+import type WebView from "./webview";
 
 export interface TabProps {
-	role: string;
+  role: TabRole;
   icon?: string;
   name: string;
   $root: Element;
@@ -16,21 +17,26 @@ export interface TabProps {
   onDestroy?: () => void;
 }
 
-export default class Tab extends BaseComponent {
+export default abstract class Tab {
   props: TabProps;
   webview: WebView;
-	$el: Element;
+  abstract $el: Element;
-	constructor(props: TabProps) {
-		super();
 
+  constructor(props: TabProps) {
     this.props = props;
     this.webview = this.props.webview;
   }
 
   registerListeners(): void {
-		this.$el.addEventListener('click', this.props.onClick);
+    this.$el.addEventListener("click", this.props.onClick);
-		this.$el.addEventListener('mouseover', this.props.onHover);
+
-		this.$el.addEventListener('mouseout', this.props.onHoverOut);
+    if (this.props.onHover !== undefined) {
+      this.$el.addEventListener("mouseover", this.props.onHover);
+    }
+
+    if (this.props.onHoverOut !== undefined) {
+      this.$el.addEventListener("mouseout", this.props.onHoverOut);
+    }
   }
 
   showNetworkError(): void {
@@ -38,17 +44,17 @@ export default class Tab extends BaseComponent {
   }
 
   activate(): void {
-		this.$el.classList.add('active');
+    this.$el.classList.add("active");
     this.webview.load();
   }
 
   deactivate(): void {
-		this.$el.classList.remove('active');
+    this.$el.classList.remove("active");
     this.webview.hide();
   }
 
   destroy(): void {
     this.$el.remove();
-		this.webview.$el.remove();
+    this.webview.$el!.remove();
   }
 }

app/renderer/js/components/webview.ts

@@ -1,26 +1,28 @@
-import {ipcRenderer, remote} from 'electron';
+import {remote} from "electron";
-import fs from 'fs';
+import fs from "fs";
-import path from 'path';
+import path from "path";
 
-import {htmlEscape} from 'escape-goat';
+import * as ConfigUtil from "../../../common/config-util";
+import {HTML, html} from "../../../common/html";
+import type {RendererMessage} from "../../../common/typed-ipc";
+import type {TabRole} from "../../../common/types";
+import {ipcRenderer} from "../typed-ipc-renderer";
+import * as SystemUtil from "../utils/system-util";
 
-import * as ConfigUtil from '../utils/config-util';
+import {generateNodeFromHTML} from "./base";
-import * as SystemUtil from '../utils/system-util';
+import {contextMenu} from "./context-menu";
-
+import handleExternalLink from "./handle-external-link";
-import BaseComponent from './base';
-import {contextMenu} from './context-menu';
-import handleExternalLink from './handle-external-link';
 
 const {app, dialog} = remote;
 
-const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
+const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
 
 interface WebViewProps {
   $root: Element;
   index: number;
   tabIndex: number;
   url: string;
-	role: string;
+  role: TabRole;
   name: string;
   isActive: () => boolean;
   switchLoading: (loading: boolean, url: string) => void;
@@ -31,49 +33,59 @@ interface WebViewProps {
   hasPermission?: (origin: string, permission: string) => boolean;
 }
 
-export default class WebView extends BaseComponent {
+export default class WebView {
   props: WebViewProps;
   zoomFactor: number;
   badgeCount: number;
   loading: boolean;
-	customCSS: string;
+  customCSS: string | false | null;
   $webviewsContainer: DOMTokenList;
-	$el: Electron.WebviewTag;
+  $el?: Electron.WebviewTag;
   domReady?: Promise<void>;
 
   constructor(props: WebViewProps) {
-		super();
-
     this.props = props;
     this.zoomFactor = 1;
     this.loading = true;
     this.badgeCount = 0;
-		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+    this.customCSS = ConfigUtil.getConfigItem("customCSS", null);
-		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
+    this.$webviewsContainer = document.querySelector(
+      "#webviews-container",
+    )!.classList;
   }
 
-	templateHTML(): string {
+  templateHTML(): HTML {
-		return htmlEscape`
+    return html`
       <webview
         class="disabled"
         data-tab-id="${this.props.tabIndex}"
         src="${this.props.url}"
-				` + (this.props.nodeIntegration ? 'nodeIntegration' : '') + htmlEscape`
+        ${new HTML({html: this.props.nodeIntegration ? "nodeIntegration" : ""})}
-				` + (this.props.preload ? 'preload="js/preload.js"' : '') + htmlEscape`
+        ${new HTML({html: this.props.preload ? 'preload="js/preload.js"' : ""})}
         partition="persist:webviewsession"
         name="${this.props.name}"
         webpreferences="
           contextIsolation=${!this.props.nodeIntegration},
-					spellcheck=${Boolean(ConfigUtil.getConfigItem('enableSpellchecker'))}
+          spellcheck=${Boolean(
-				">
+          ConfigUtil.getConfigItem("enableSpellchecker", true),
+        )},
+          worldSafeExecuteJavaScript=true
+        "
+      >
       </webview>
     `;
   }
 
   init(): void {
-		this.$el = this.generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
+    this.$el = generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
-		this.domReady = new Promise(resolve => {
+    this.domReady = new Promise((resolve) => {
-			this.$el.addEventListener('dom-ready', () => resolve(), true);
+      this.$el!.addEventListener(
+        "dom-ready",
+        () => {
+          resolve();
+        },
+        true,
+      );
     });
     this.props.$root.append(this.$el);
 
@@ -81,24 +93,24 @@ export default class WebView extends BaseComponent {
   }
 
   registerListeners(): void {
-		this.$el.addEventListener('new-window', event => {
+    this.$el!.addEventListener("new-window", (event) => {
       handleExternalLink.call(this, event);
     });
 
     if (shouldSilentWebview) {
-			this.$el.addEventListener('dom-ready', () => {
+      this.$el!.addEventListener("dom-ready", () => {
-				this.$el.setAudioMuted(true);
+        this.$el!.setAudioMuted(true);
       });
     }
 
-		this.$el.addEventListener('page-title-updated', event => {
+    this.$el!.addEventListener("page-title-updated", (event) => {
       const {title} = event;
       this.badgeCount = this.getBadgeCount(title);
       this.props.onTitleChange();
     });
 
-		this.$el.addEventListener('did-navigate-in-page', event => {
+    this.$el!.addEventListener("did-navigate-in-page", (event) => {
-			const isSettingPage = event.url.includes('renderer/preference.html');
+      const isSettingPage = event.url.includes("renderer/preference.html");
       if (isSettingPage) {
         return;
       }
@@ -106,33 +118,38 @@ export default class WebView extends BaseComponent {
       this.canGoBackButton();
     });
 
-		this.$el.addEventListener('did-navigate', () => {
+    this.$el!.addEventListener("did-navigate", () => {
       this.canGoBackButton();
     });
 
-		this.$el.addEventListener('page-favicon-updated', event => {
+    this.$el!.addEventListener("page-favicon-updated", (event) => {
       const {favicons} = event;
 
       // This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
       // https://chat.zulip.org/static/images/favicon/favicon-pms.png
-			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
+      if (
+        favicons[0].indexOf("favicon-pms") > 0 &&
+        process.platform === "darwin"
+      ) {
         // This api is only supported on macOS
-				app.dock.setBadge('●');
+        app.dock.setBadge("●");
         // Bounce the dock
-				if (ConfigUtil.getConfigItem('dockBouncing')) {
+        if (ConfigUtil.getConfigItem("dockBouncing", true)) {
           app.dock.bounce();
         }
       }
     });
 
-		this.$el.addEventListener('dom-ready', () => {
+    this.$el!.addEventListener("dom-ready", () => {
-			const webContents = remote.webContents.fromId(this.$el.getWebContentsId());
+      const webContents = remote.webContents.fromId(
-			webContents.addListener('context-menu', (event, menuParameters) => {
+        this.$el!.getWebContentsId(),
+      );
+      webContents.addListener("context-menu", (event, menuParameters) => {
         contextMenu(webContents, event, menuParameters);
       });
 
-			if (this.props.role === 'server') {
+      if (this.props.role === "server") {
-				this.$el.classList.add('onload');
+        this.$el!.classList.add("onload");
       }
 
       this.loading = false;
@@ -141,40 +158,41 @@ export default class WebView extends BaseComponent {
 
       // Refocus text boxes after reload
       // Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
-			this.$el.blur();
+      this.$el!.blur();
-			this.$el.focus();
+      this.$el!.focus();
     });
 
-		this.$el.addEventListener('did-fail-load', event => {
+    this.$el!.addEventListener("did-fail-load", (event) => {
       const {errorDescription} = event;
-			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
+      const hasConnectivityError =
-			if (hasConnectivityErr) {
+        SystemUtil.connectivityERR.includes(errorDescription);
-				console.error('error', errorDescription);
+      if (hasConnectivityError) {
-				if (!this.props.url.includes('network.html')) {
+        console.error("error", errorDescription);
+        if (!this.props.url.includes("network.html")) {
           this.props.onNetworkError(this.props.index);
         }
       }
     });
 
-		this.$el.addEventListener('did-start-loading', () => {
+    this.$el!.addEventListener("did-start-loading", () => {
-			const isSettingPage = this.props.url.includes('renderer/preference.html');
+      const isSettingPage = this.props.url.includes("renderer/preference.html");
       if (!isSettingPage) {
         this.props.switchLoading(true, this.props.url);
       }
     });
 
-		this.$el.addEventListener('did-stop-loading', () => {
+    this.$el!.addEventListener("did-stop-loading", () => {
       this.props.switchLoading(false, this.props.url);
     });
   }
 
   getBadgeCount(title: string): number {
-		const messageCountInTitle = (/\((\d+)\)/).exec(title);
+    const messageCountInTitle = /\((\d+)\)/.exec(title);
     return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
   }
 
-	showNotificationSettings(): void {
+  async showNotificationSettings(): Promise<void> {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-notification-settings');
+    await this.send("show-notification-settings");
   }
 
   show(): void {
@@ -185,42 +203,49 @@ export default class WebView extends BaseComponent {
 
     // To show or hide the loading indicator in the the active tab
     if (this.loading) {
-			this.$webviewsContainer.remove('loaded');
+      this.$webviewsContainer.remove("loaded");
     } else {
-			this.$webviewsContainer.add('loaded');
+      this.$webviewsContainer.add("loaded");
     }
 
-		this.$el.classList.remove('disabled');
+    this.$el!.classList.remove("disabled");
-		this.$el.classList.add('active');
+    this.$el!.classList.add("active");
     setTimeout(() => {
-			if (this.props.role === 'server') {
+      if (this.props.role === "server") {
-				this.$el.classList.remove('onload');
+        this.$el!.classList.remove("onload");
       }
     }, 1000);
     this.focus();
     this.props.onTitleChange();
     // Injecting preload css in webview to override some css rules
-		(async () => this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8')))();
+    (async () =>
+      this.$el!.insertCSS(
+        fs.readFileSync(path.join(__dirname, "/../../css/preload.css"), "utf8"),
+      ))();
 
     // Get customCSS again from config util to avoid warning user again
-		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+    const customCSS = ConfigUtil.getConfigItem("customCSS", null);
-		if (this.customCSS) {
+    this.customCSS = customCSS;
-			if (!fs.existsSync(this.customCSS)) {
+    if (customCSS) {
+      if (!fs.existsSync(customCSS)) {
         this.customCSS = null;
-				ConfigUtil.setConfigItem('customCSS', null);
+        ConfigUtil.setConfigItem("customCSS", null);
 
-				const errorMessage = 'The custom css previously set is deleted!';
+        const errorMessage = "The custom css previously set is deleted!";
-				dialog.showErrorBox('custom css file deleted!', errorMessage);
+        dialog.showErrorBox("custom css file deleted!", errorMessage);
         return;
       }
 
-			(async () => this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8')))();
+      (async () =>
+        this.$el!.insertCSS(
+          fs.readFileSync(path.resolve(__dirname, customCSS), "utf8"),
+        ))();
     }
   }
 
   focus(): void {
     // Focus Webview and it's contents when Window regain focus.
-		const webContents = remote.webContents.fromId(this.$el.getWebContentsId());
+    const webContents = remote.webContents.fromId(this.$el!.getWebContentsId());
     // HACK: webContents.isFocused() seems to be true even without the element
     // being in focus. So, we check against `document.activeElement`.
     if (webContents && this.$el !== document.activeElement) {
@@ -228,14 +253,14 @@ export default class WebView extends BaseComponent {
       // element to transfer focus correctly, in Electron v3.0.10
       // See https://github.com/electron/electron/issues/15718
       (document.activeElement as HTMLElement).blur();
-			this.$el.focus();
+      this.$el!.focus();
       webContents.focus();
     }
   }
 
   hide(): void {
-		this.$el.classList.add('disabled');
+    this.$el!.classList.add("disabled");
-		this.$el.classList.remove('active');
+    this.$el!.classList.remove("active");
   }
 
   load(): void {
@@ -248,68 +273,73 @@ export default class WebView extends BaseComponent {
 
   zoomIn(): void {
     this.zoomFactor += 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
+    this.$el!.setZoomFactor(this.zoomFactor);
   }
 
   zoomOut(): void {
     this.zoomFactor -= 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
+    this.$el!.setZoomFactor(this.zoomFactor);
   }
 
   zoomActualSize(): void {
     this.zoomFactor = 1;
-		this.$el.setZoomFactor(this.zoomFactor);
+    this.$el!.setZoomFactor(this.zoomFactor);
   }
 
-	logOut(): void {
+  async logOut(): Promise<void> {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'logout');
+    await this.send("logout");
   }
 
-	showKeyboardShortcuts(): void {
+  async showKeyboardShortcuts(): Promise<void> {
-		ipcRenderer.sendTo(this.$el.getWebContentsId(), 'show-keyboard-shortcuts');
+    await this.send("show-keyboard-shortcuts");
   }
 
   openDevTools(): void {
-		this.$el.openDevTools();
+    this.$el!.openDevTools();
   }
 
   back(): void {
-		if (this.$el.canGoBack()) {
+    if (this.$el!.canGoBack()) {
-			this.$el.goBack();
+      this.$el!.goBack();
       this.focus();
     }
   }
 
   canGoBackButton(): void {
-		const $backButton = document.querySelector('#actions-container #back-action');
+    const $backButton = document.querySelector(
-		if (this.$el.canGoBack()) {
+      "#actions-container #back-action",
-			$backButton.classList.remove('disable');
+    )!;
+    if (this.$el!.canGoBack()) {
+      $backButton.classList.remove("disable");
     } else {
-			$backButton.classList.add('disable');
+      $backButton.classList.add("disable");
     }
   }
 
   forward(): void {
-		if (this.$el.canGoForward()) {
+    if (this.$el!.canGoForward()) {
-			this.$el.goForward();
+      this.$el!.goForward();
     }
   }
 
   reload(): void {
     this.hide();
     // Shows the loading indicator till the webview is reloaded
-		this.$webviewsContainer.remove('loaded');
+    this.$webviewsContainer.remove("loaded");
     this.loading = true;
     this.props.switchLoading(true, this.props.url);
-		this.$el.reload();
+    this.$el!.reload();
   }
 
   forceLoad(): void {
     this.init();
   }
 
-	async send(channel: string, ...parameters: unknown[]): Promise<void> {
+  async send<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    ...args: Parameters<RendererMessage[Channel]>
+  ): Promise<void> {
     await this.domReady;
-		await this.$el.send(channel, ...parameters);
+    ipcRenderer.sendTo(this.$el!.getWebContentsId(), channel, ...args);
   }
 }

app/renderer/js/electron-bridge.ts

@@ -1,12 +1,12 @@
-import {ipcRenderer} from 'electron';
+import {remote} from "electron";
-import {EventEmitter} from 'events';
+import {EventEmitter} from "events";
 
-import isDev from 'electron-is-dev';
+import {ClipboardDecrypterImpl} from "./clipboard-decrypter";
+import type {NotificationData} from "./notification";
+import {newNotification} from "./notification";
+import {ipcRenderer} from "./typed-ipc-renderer";
 
-import {ClipboardDecrypterImpl} from './clipboard-decrypter';
+type ListenerType = (...args: any[]) => void;
-import {NotificationData, newNotification} from './notification';
-
-type ListenerType = ((...args: any[]) => void);
 
 let notificationReplySupported = false;
 // Indicates if the user is idle or not
@@ -26,10 +26,9 @@ const electron_bridge: ElectronBridge = {
 
   new_notification: (
     title: string,
-		options: NotificationOptions | undefined,
+    options: NotificationOptions,
-		dispatch: (type: string, eventInit: EventInit) => boolean
+    dispatch: (type: string, eventInit: EventInit) => boolean,
-	): NotificationData =>
+  ): NotificationData => newNotification(title, options, dispatch),
-		newNotification(title, options, dispatch),
 
   get_idle_on_system: (): boolean => idle,
 
@@ -43,32 +42,43 @@ const electron_bridge: ElectronBridge = {
   },
 
   decrypt_clipboard: (version: number): ClipboardDecrypterImpl =>
-		new ClipboardDecrypterImpl(version)
+    new ClipboardDecrypterImpl(version),
 };
 
-bridgeEvents.on('total_unread_count', (...args) => {
+bridgeEvents.on("total_unread_count", (unreadCount: unknown) => {
-	ipcRenderer.send('unread-count', ...args);
+  if (typeof unreadCount !== "number") {
+    throw new TypeError("Expected string for unreadCount");
+  }
+
+  ipcRenderer.send("unread-count", unreadCount);
 });
 
-bridgeEvents.on('realm_name', realmName => {
+bridgeEvents.on("realm_name", (realmName: unknown) => {
-	const serverURL = location.origin;
+  if (typeof realmName !== "string") {
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
+    throw new TypeError("Expected string for realmName");
-});
-
-bridgeEvents.on('realm_icon_url', (iconURL: unknown) => {
-	if (typeof iconURL !== 'string') {
-		throw new TypeError('Expected string for iconURL');
   }
 
   const serverURL = location.origin;
-	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
+  ipcRenderer.send("realm-name-changed", serverURL, realmName);
-	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
+});
+
+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', () => {
+ipcRenderer.on("set-active", () => {
-	if (isDev) {
+  if (!remote.app.isPackaged) {
-		console.log('active');
+    console.log("active");
   }
 
   idle = false;
@@ -76,9 +86,9 @@ ipcRenderer.on('set-active', () => {
 });
 
 // Set user as idle and time of last activity is left unchanged
-ipcRenderer.on('set-idle', () => {
+ipcRenderer.on("set-idle", () => {
-	if (isDev) {
+  if (!remote.app.isPackaged) {
-		console.log('idle');
+    console.log("idle");
   }
 
   idle = true;

app/renderer/js/feedback.ts

@@ -1,50 +1,54 @@
-import {remote} from 'electron';
+import {remote} from "electron";
-import fs from 'fs';
+import fs from "fs";
-import path from 'path';
+import path from "path";
 
-import SendFeedback from '@electron-elements/send-feedback';
+import SendFeedback from "@electron-elements/send-feedback";
 
 const {app} = remote;
 
-customElements.define('send-feedback', SendFeedback);
+customElements.define("send-feedback", SendFeedback);
-export const sendFeedback: SendFeedback = document.querySelector('send-feedback');
+export const sendFeedback: SendFeedback =
-export const feedbackHolder = sendFeedback.parentElement;
+  document.querySelector("send-feedback")!;
+export const feedbackHolder = sendFeedback.parentElement!;
 
 // Make the button color match zulip app's theme
-sendFeedback.customStylesheet = 'css/feedback.css';
+sendFeedback.customStylesheet = "css/feedback.css";
 
 // Customize the fields of custom elements
-sendFeedback.title = 'Report Issue';
+sendFeedback.title = "Report Issue";
-sendFeedback.titleLabel = 'Issue title:';
+sendFeedback.titleLabel = "Issue title:";
-sendFeedback.titlePlaceholder = 'Enter issue title';
+sendFeedback.titlePlaceholder = "Enter issue title";
-sendFeedback.textareaLabel = 'Describe the issue:';
+sendFeedback.textareaLabel = "Describe the issue:";
-sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';
+sendFeedback.textareaPlaceholder =
+  "Succinctly describe your issue and steps to reproduce it...";
 
-sendFeedback.buttonLabel = 'Report Issue';
+sendFeedback.buttonLabel = "Report Issue";
-sendFeedback.loaderSuccessText = '';
+sendFeedback.loaderSuccessText = "";
 
-sendFeedback.useReporter('emailReporter', {
+sendFeedback.useReporter("emailReporter", {
-	email: 'support@zulip.com'
+  email: "support@zulip.com",
 });
 
-feedbackHolder.addEventListener('click', (event: Event) => {
+feedbackHolder.addEventListener("click", (event: Event) => {
   // Only remove the class if the grey out faded
   // part is clicked and not the feedback element itself
   if (event.target === event.currentTarget) {
-		feedbackHolder.classList.remove('show');
+    feedbackHolder.classList.remove("show");
   }
 });
 
-sendFeedback.addEventListener('feedback-submitted', () => {
+sendFeedback.addEventListener("feedback-submitted", () => {
   setTimeout(() => {
-		feedbackHolder.classList.remove('show');
+    feedbackHolder.classList.remove("show");
   }, 1000);
 });
 
-sendFeedback.addEventListener('feedback-cancelled', () => {
+sendFeedback.addEventListener("feedback-cancelled", () => {
-	feedbackHolder.classList.remove('show');
+  feedbackHolder.classList.remove("show");
 });
 
-const dataDir = app.getPath('userData');
+const dataDir = app.getPath("userData");
-const logsDir = path.join(dataDir, '/Logs');
+const logsDir = path.join(dataDir, "/Logs");
-sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
+sendFeedback.logs.push(
+  ...fs.readdirSync(logsDir).map((file) => path.join(logsDir, file)),
+);

app/renderer/js/injected.ts

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 interface CompatElectronBridge extends ElectronBridge {
   readonly idle_on_system: boolean;
@@ -9,7 +9,6 @@ interface CompatElectronBridge extends ElectronBridge {
 (() => {
   const zulipWindow = window as typeof window & {
     electron_bridge: CompatElectronBridge;
-		page_params?: unknown;
     raw_electron_bridge: ElectronBridge;
   };
 
@@ -30,17 +29,19 @@ interface CompatElectronBridge extends ElectronBridge {
 
     set send_notification_reply_message_supported(value: boolean) {
       this.set_send_notification_reply_message_supported(value);
-		}
+    },
   };
 
   zulipWindow.electron_bridge = electron_bridge;
 
-	function attributeListener<T extends EventTarget>(type: string): PropertyDescriptor {
+  function attributeListener<T extends EventTarget>(
-		const symbol = Symbol('on' + type);
+    type: string,
+  ): PropertyDescriptor {
+    const handlers = new WeakMap<T, (event: Event) => unknown>();
 
-		function listener(this: T, ev: Event): void {
+    function listener(this: T, event: Event): void {
-			if ((this as any)[symbol].call(this, ev) === false) {
+      if (handlers.get(this)!.call(this, event) === false) {
-				ev.preventDefault();
+        event.preventDefault();
       }
     }
 
@@ -48,33 +49,36 @@ interface CompatElectronBridge extends ElectronBridge {
       configurable: true,
       enumerable: true,
       get(this: T) {
-				return (this as any)[symbol];
+        return handlers.get(this);
       },
       set(this: T, value: unknown) {
-				if (typeof value === 'function') {
+        if (typeof value === "function") {
-					if (!(symbol in this)) {
+          if (!handlers.has(this)) {
             this.addEventListener(type, listener);
           }
 
-					(this as any)[symbol] = value;
+          handlers.set(this, value as (event: Event) => unknown);
-				} else if (symbol in this) {
+        } else if (handlers.has(this)) {
           this.removeEventListener(type, listener);
-					delete (this as any)[symbol];
+          handlers.delete(this);
-				}
         }
+      },
     };
   }
 
   const NativeNotification = Notification;
 
   class InjectedNotification extends EventTarget {
-		constructor(title: string, options?: NotificationOptions) {
+    constructor(title: string, options: NotificationOptions = {}) {
       super();
       Object.assign(
         this,
-				electron_bridge.new_notification(title, options, (type: string, eventInit: EventInit) =>
+        electron_bridge.new_notification(
-					this.dispatchEvent(new Event(type, eventInit))
+          title,
-				)
+          options,
+          (type: string, eventInit: EventInit) =>
+            this.dispatchEvent(new Event(type, eventInit)),
+        ),
       );
     }
 
@@ -86,7 +90,9 @@ interface CompatElectronBridge extends ElectronBridge {
       return NativeNotification.permission;
     }
 
-		static async requestPermission(callback?: NotificationPermissionCallback): Promise<NotificationPermission> {
+    static async requestPermission(
+      callback?: NotificationPermissionCallback,
+    ): Promise<NotificationPermission> {
       if (callback) {
         callback(await Promise.resolve(NativeNotification.permission));
       }
@@ -96,11 +102,11 @@ interface CompatElectronBridge extends ElectronBridge {
   }
 
   Object.defineProperties(InjectedNotification.prototype, {
-		onclick: attributeListener('click'),
+    onclick: attributeListener("click"),
-		onclose: attributeListener('close'),
+    onclose: attributeListener("close"),
-		onerror: attributeListener('error'),
+    onerror: attributeListener("error"),
-		onshow: attributeListener('show')
+    onshow: attributeListener("show"),
   });
 
-	window.Notification = InjectedNotification as any;
+  window.Notification = InjectedNotification as unknown as typeof Notification;
 })();

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

@@ -1,8 +1,7 @@
-import {ipcRenderer} from 'electron';
+import * as ConfigUtil from "../../../common/config-util";
+import {ipcRenderer} from "../typed-ipc-renderer";
 
-import * as ConfigUtil from '../utils/config-util';
+import {focusCurrentServer} from "./helpers";
-
-import {focusCurrentServer} from './helpers';
 
 const NativeNotification = window.Notification;
 export default class BaseNotification extends NativeNotification {
@@ -10,11 +9,11 @@ export default class BaseNotification extends NativeNotification {
     options.silent = true;
     super(title, options);
 
-		this.addEventListener('click', () => {
+    this.addEventListener("click", () => {
       // Focus to the server who sent the
       // notification if not focused already
       focusCurrentServer();
-			ipcRenderer.send('focus-app');
+      ipcRenderer.send("focus-app");
     });
   }
 
@@ -24,6 +23,8 @@ export default class BaseNotification extends NativeNotification {
 
   // Override default Notification permission
   static get permission(): NotificationPermission {
-		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
+    return ConfigUtil.getConfigItem("showNotification", true)
+      ? "granted"
+      : "denied";
   }
 }

app/renderer/js/notification/helpers.ts

@@ -1,7 +1,9 @@
-import {remote} from 'electron';
+import {remote} from "electron";
+
+import {ipcRenderer} from "../typed-ipc-renderer";
 
 // Do not change this
-export const appId = 'org.zulip.zulip-electron';
+export const appId = "org.zulip.zulip-electron";
 
 const currentWindow = remote.getCurrentWindow();
 const webContents = remote.getCurrentWebContents();
@@ -10,5 +12,9 @@ const webContentsId = webContents.id;
 // This function will focus the server that sent
 // the notification. Main function implemented in main.js
 export function focusCurrentServer(): void {
-	currentWindow.webContents.send('focus-webview-with-id', webContentsId);
+  ipcRenderer.sendTo(
+    currentWindow.webContents.id,
+    "focus-webview-with-id",
+    webContentsId,
+  );
 }

app/renderer/js/notification/index.ts

@@ -1,7 +1,7 @@
-import {remote} from 'electron';
+import {remote} from "electron";
 
-import DefaultNotification from './default-notification';
+import DefaultNotification from "./default-notification";
-import {appId} from './helpers';
+import {appId} from "./helpers";
 
 const {app} = remote;
 
@@ -30,11 +30,11 @@ export interface NotificationData {
 
 export function newNotification(
   title: string,
-	options: NotificationOptions | undefined,
+  options: NotificationOptions,
-	dispatch: (type: string, eventInit: EventInit) => boolean
+  dispatch: (type: string, eventInit: EventInit) => boolean,
 ): NotificationData {
   const notification = new DefaultNotification(title, options);
-	for (const type of ['click', 'close', 'error', 'show']) {
+  for (const type of ["click", "close", "error", "show"]) {
     notification.addEventListener(type, (ev: Event) => {
       if (!dispatch(type, ev)) {
         ev.preventDefault();
@@ -43,7 +43,9 @@ export function newNotification(
   }
 
   return {
-		close: () => notification.close(),
+    close: () => {
+      notification.close();
+    },
     title: notification.title,
     dir: notification.dir,
     lang: notification.lang,
@@ -58,6 +60,6 @@ export function newNotification(
     silent: notification.silent,
     requireInteraction: notification.requireInteraction,
     data: notification.data,
-		actions: notification.actions
+    actions: notification.actions,
   };
 }

app/renderer/js/pages/network.ts

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

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

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

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

@@ -1,8 +1,7 @@
-import {ipcRenderer} from 'electron';
+import type {HTML} from "../../../../common/html";
-
+import {html} from "../../../../common/html";
-import {htmlEscape} from 'escape-goat';
+import {generateNodeFromHTML} from "../../components/base";
-
+import {ipcRenderer} from "../../typed-ipc-renderer";
-import BaseComponent from '../../components/base';
 
 interface BaseSectionProps {
   $element: HTMLElement;
@@ -11,56 +10,74 @@ interface BaseSectionProps {
   clickHandler: () => void;
 }
 
-export default class BaseSection extends BaseComponent {
+export function generateSettingOption(props: BaseSectionProps): void {
-	generateSettingOption(props: BaseSectionProps): void {
   const {$element, disabled, value, clickHandler} = props;
 
-		$element.textContent = '';
+  $element.textContent = "";
 
-		const $optionControl = this.generateNodeFromHTML(this.generateOptionHTML(value, disabled));
+  const $optionControl = generateNodeFromHTML(
+    generateOptionHTML(value, disabled),
+  );
   $element.append($optionControl);
 
   if (!disabled) {
-			$optionControl.addEventListener('click', clickHandler);
+    $optionControl.addEventListener("click", clickHandler);
-		}
-	}
-
-	generateOptionHTML(settingOption: boolean, disabled?: boolean): string {
-		const labelHTML = disabled ? '<label class="disallowed" title="Setting locked by system administrator."></label>' : '<label></label>';
-		if (settingOption) {
-			return htmlEscape`
-				<div class="action">
-					<div class="switch">
-						<input class="toggle toggle-round" type="checkbox" checked disabled>
-						` + labelHTML + htmlEscape`
-					</div>
-				</div>
-			`;
-		}
-
-		return htmlEscape`
-			<div class="action">
-				<div class="switch">
-					<input class="toggle toggle-round" type="checkbox">
-					` + labelHTML + htmlEscape`
-				</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
-	*/
-	generateSelectHTML(options: Record<string, string>, className?: string, idName?: string): string {
-		let html = htmlEscape`<select class="${className}" id="${idName}">\n`;
-		Object.keys(options).forEach(key => {
-			html += htmlEscape`<option name="${key}" value="${key}">${options[key]}</option>\n`;
-		});
-		html += '</select>';
-		return html;
-	}
-
-	reloadApp(): void {
-		ipcRenderer.send('forward-message', 'reload-viewer');
   }
 }
+
+export function generateOptionHTML(
+  settingOption: boolean,
+  disabled?: boolean,
+): HTML {
+  const labelHTML = disabled
+    ? 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

@@ -1,80 +1,65 @@
-import {ipcRenderer} from 'electron';
+import {html} from "../../../../common/html";
+import * as t from "../../../../common/translation-util";
+import {ipcRenderer} from "../../typed-ipc-renderer";
+import * as DomainUtil from "../../utils/domain-util";
 
-import {htmlEscape} from 'escape-goat';
+import {reloadApp} from "./base-section";
-
+import {initFindAccounts} from "./find-accounts";
-import * as DomainUtil from '../../utils/domain-util';
+import {initServerInfoForm} from "./server-info-form";
-import * as t from '../../utils/translation-util';
-
-import BaseSection from './base-section';
-import FindAccounts from './find-accounts';
-import ServerInfoForm from './server-info-form';
 
 interface ConnectedOrgSectionProps {
   $root: Element;
 }
 
-export default class ConnectedOrgSection extends BaseSection {
+export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
-	props: ConnectedOrgSectionProps;
+  props.$root.textContent = "";
-	$serverInfoContainer: Element | null;
-	$existingServers: Element | null;
-	$newOrgButton: HTMLButtonElement | null;
-	$findAccountsContainer: Element | null;
-	constructor(props: ConnectedOrgSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	templateHTML(): string {
-		return htmlEscape`
-			<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>
-		`;
-	}
-
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.textContent = '';
 
   const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.templateHTML();
+  props.$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;
 
-		this.$serverInfoContainer = document.querySelector('#server-info-container');
+  const $serverInfoContainer = document.querySelector(
-		this.$existingServers = document.querySelector('#existing-servers');
+    "#server-info-container",
-		this.$newOrgButton = document.querySelector('#new-org-button');
+  )!;
-		this.$findAccountsContainer = document.querySelector('#find-accounts-container');
+  const $existingServers = document.querySelector("#existing-servers")!;
+  const $newOrgButton: HTMLButtonElement =
+    document.querySelector("#new-org-button")!;
+  const $findAccountsContainer = document.querySelector(
+    "#find-accounts-container",
+  )!;
 
-		const noServerText = t.__('All the connected orgnizations will appear here');
+  const noServerText = t.__("All the connected orgnizations will appear here");
   // Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.textContent = servers.length === 0 ? noServerText : '';
+  $existingServers.textContent = servers.length === 0 ? noServerText : "";
 
   for (const [i, server] of servers.entries()) {
-			new ServerInfoForm({
+    initServerInfoForm({
-				$root: this.$serverInfoContainer,
+      $root: $serverInfoContainer,
       server,
       index: i,
-				onChange: this.reloadApp
+      onChange: reloadApp,
-			}).init();
+    });
   }
 
-		this.$newOrgButton.addEventListener('click', () => {
+  $newOrgButton.addEventListener("click", () => {
-			ipcRenderer.send('forward-message', 'open-org-tab');
+    ipcRenderer.send("forward-message", "open-org-tab");
   });
 
-		this.initFindAccounts();
+  initFindAccounts({
-	}
+    $root: $findAccountsContainer,
-
+  });
-	initFindAccounts(): void {
-		new FindAccounts({
-			$root: this.$findAccountsContainer
-		}).init();
-	}
 }

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

@@ -1,80 +1,67 @@
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../../common/html";
-
+import * as t from "../../../../common/translation-util";
-import BaseComponent from '../../components/base';
+import {generateNodeFromHTML} from "../../components/base";
-import * as LinkUtil from '../../utils/link-util';
+import * as LinkUtil from "../../utils/link-util";
-import * as t from '../../utils/translation-util';
 
 interface FindAccountsProps {
   $root: Element;
 }
 
-export default class FindAccounts extends BaseComponent {
+async function findAccounts(url: string): Promise<void> {
-	props: FindAccountsProps;
-	$findAccounts: Element | null;
-	$findAccountsButton: Element | null;
-	$serverUrlField: HTMLInputElement | null;
-	constructor(props: FindAccountsProps) {
-		super();
-		this.props = props;
-	}
-
-	templateHTML(): string {
-		return htmlEscape`
-			<div class="settings-card certificate-card">
-				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
-					<input class="setting-input-value" value="zulipchat.com"/>
-				</div>
-				<div class="certificate-input">
-					<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
-		this.props.$root.append(this.$findAccounts);
-		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
-		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	async findAccounts(url: string): Promise<void> {
   if (!url) {
     return;
   }
 
-		if (!url.startsWith('http')) {
+  if (!url.startsWith("http")) {
-			url = 'https://' + url;
+    url = "https://" + url;
   }
 
-		await LinkUtil.openBrowser(new URL('/accounts/find', url));
+  await LinkUtil.openBrowser(new URL("/accounts/find", url));
-	}
+}
-
+
-	initListeners(): void {
+export function initFindAccounts(props: FindAccountsProps): void {
-		this.$findAccountsButton.addEventListener('click', async () => {
+  const $findAccounts = generateNodeFromHTML(html`
-			await this.findAccounts(this.$serverUrlField.value);
+    <div class="settings-card certificate-card">
-		});
+      <div class="certificate-input">
-
+        <div>${t.__("Organization URL")}</div>
-		this.$serverUrlField.addEventListener('click', () => {
+        <input class="setting-input-value" value="zulipchat.com" />
-			if (this.$serverUrlField.value === 'zulipchat.com') {
+      </div>
-				this.$serverUrlField.setSelectionRange(0, 0);
+      <div class="certificate-input">
-			}
+        <button class="green w-150" id="find-accounts-button">
-		});
+          ${t.__("Find accounts")}
-
+        </button>
-		this.$serverUrlField.addEventListener('keypress', async event => {
+      </div>
-			if (event.key === 'Enter') {
+    </div>
-				await this.findAccounts(this.$serverUrlField.value);
+  `);
-			}
+  props.$root.append($findAccounts);
-		});
+  const $findAccountsButton = $findAccounts.querySelector(
-
+    "#find-accounts-button",
-		this.$serverUrlField.addEventListener('input', () => {
+  )!;
-			if (this.$serverUrlField.value) {
+  const $serverUrlField: HTMLInputElement = $findAccounts.querySelector(
-				this.$serverUrlField.classList.remove('invalid-input-value');
+    "input.setting-input-value",
-			} else {
+  )!;
-				this.$serverUrlField.classList.add('invalid-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", () => {
+    if ($serverUrlField.value) {
+      $serverUrlField.classList.remove("invalid-input-value");
+    } else {
+      $serverUrlField.classList.add("invalid-input-value");
+    }
+  });
 }

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

@@ -1,54 +1,60 @@
-import {htmlEscape} from 'escape-goat';
+import type {HTML} from "../../../../common/html";
-
+import {html} from "../../../../common/html";
-import BaseComponent from '../../components/base';
+import * as t from "../../../../common/translation-util";
-import * as t from '../../utils/translation-util';
+import type {NavItem} from "../../../../common/types";
+import {generateNodeFromHTML} from "../../components/base";
 
 interface PreferenceNavProps {
   $root: Element;
-	onItemSelected: (navItem: string) => void;
+  onItemSelected: (navItem: NavItem) => void;
 }
 
-export default class PreferenceNav extends BaseComponent {
+export default class PreferenceNav {
   props: PreferenceNavProps;
-	navItems: string[];
+  navItems: NavItem[];
   $el: Element;
   constructor(props: PreferenceNavProps) {
-		super();
     this.props = props;
-		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
+    this.navItems = [
-		this.init();
+      "General",
-	}
+      "Network",
+      "AddServer",
+      "Organizations",
+      "Shortcuts",
+    ];
 
-	templateHTML(): string {
+    this.$el = generateNodeFromHTML(this.templateHTML());
-		let navItemsHTML = '';
-		for (const navItem of this.navItems) {
-			navItemsHTML += htmlEscape`<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
-		}
-
-		return htmlEscape`
-			<div>
-				<div id="settings-header">${t.__('Settings')}</div>
-				<div id="nav-container">` + navItemsHTML + htmlEscape`</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$el = this.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 = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+      const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
-			$item.addEventListener('click', () => {
+      $item.addEventListener("click", () => {
         this.props.onItemSelected(navItem);
       });
     }
   }
 
-	select(navItemToSelect: string): void {
+  select(navItemToSelect: NavItem): void {
     for (const navItem of this.navItems) {
       if (navItem === navItemToSelect) {
         this.activate(navItem);
@@ -58,13 +64,13 @@ export default class PreferenceNav extends BaseComponent {
     }
   }
 
-	activate(navItem: string): void {
+  activate(navItem: NavItem): void {
-		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+    const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
-		$item.classList.add('active');
+    $item.classList.add("active");
   }
 
-	deactivate(navItem: string): void {
+  deactivate(navItem: NavItem): void {
-		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
+    const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
-		$item.classList.remove('active');
+    $item.classList.remove("active");
   }
 }

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

@@ -1,141 +1,144 @@
-import {ipcRenderer} from 'electron';
+import * as ConfigUtil from "../../../../common/config-util";
+import {html} from "../../../../common/html";
+import * as t from "../../../../common/translation-util";
+import {ipcRenderer} from "../../typed-ipc-renderer";
 
-import {htmlEscape} from 'escape-goat';
+import {generateSettingOption} from "./base-section";
-
-import * as ConfigUtil from '../../utils/config-util';
-import * as t from '../../utils/translation-util';
-
-import BaseSection from './base-section';
 
 interface NetworkSectionProps {
   $root: Element;
 }
 
-export default class NetworkSection extends BaseSection {
+export function initNetworkSection(props: NetworkSectionProps): void {
-	props: NetworkSectionProps;
+  props.$root.innerHTML = html`
-	$proxyPAC: HTMLInputElement;
-	$proxyRules: HTMLInputElement;
-	$proxyBypass: HTMLInputElement;
-	$proxySaveAction: Element;
-	$manualProxyBlock: Element;
-	constructor(props: NetworkSectionProps) {
-		super();
-		this.props = props;
-	}
-
-	templateHTML(): string {
-		return htmlEscape`
     <div class="settings-pane">
-                <div class="title">${t.__('Proxy')}</div>
+      <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-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-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>
+            <span class="setting-input-key">PAC ${t.__("script")}</span>
-							<input class="setting-input-value" placeholder="e.g. foobar.com/pacfile.js"/>
+            <input
+              class="setting-input-value"
+              placeholder="e.g. foobar.com/pacfile.js"
+            />
           </div>
           <div class="setting-row" id="proxy-rules-option">
-							<span class="setting-input-key">${t.__('Proxy rules')}</span>
+            <span class="setting-input-key">${t.__("Proxy rules")}</span>
-							<input class="setting-input-value" placeholder="e.g. http=foopy:80;ftp=foopy2"/>
+            <input
+              class="setting-input-value"
+              placeholder="e.g. http=foopy:80;ftp=foopy2"
+            />
           </div>
           <div class="setting-row" id="proxy-bypass-option">
-							<span class="setting-input-key">${t.__('Proxy bypass rules')}</span>
+            <span class="setting-input-key">${t.__("Proxy bypass rules")}</span>
-							<input class="setting-input-value" placeholder="e.g. foobar.com"/>
+            <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>
+              <span>${t.__("Save")}</span>
             </div>
           </div>
         </div>
       </div>
     </div>
-		`;
+  `.html;
-	}
 
-	init(): void {
+  const $proxyPAC: HTMLInputElement = document.querySelector(
-		this.props.$root.innerHTML = this.templateHTML();
+    "#proxy-pac-option .setting-input-value",
-		this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
+  )!;
-		this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
+  const $proxyRules: HTMLInputElement = document.querySelector(
-		this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
+    "#proxy-rules-option .setting-input-value",
-		this.$proxySaveAction = document.querySelector('#proxy-save-action');
+  )!;
-		this.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-block');
+  const $proxyBypass: HTMLInputElement = document.querySelector(
-		this.initProxyOption();
+    "#proxy-bypass-option .setting-input-value",
+  )!;
+  const $proxySaveAction = document.querySelector("#proxy-save-action")!;
+  const $manualProxyBlock = props.$root.querySelector(".manual-proxy-block")!;
 
-		this.$proxyPAC.value = ConfigUtil.getConfigItem('proxyPAC', '');
+  toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
-		this.$proxyRules.value = ConfigUtil.getConfigItem('proxyRules', '');
+  updateProxyOption();
-		this.$proxyBypass.value = ConfigUtil.getConfigItem('proxyBypass', '');
 
-		this.$proxySaveAction.addEventListener('click', () => {
+  $proxyPAC.value = ConfigUtil.getConfigItem("proxyPAC", "");
-			ConfigUtil.setConfigItem('proxyPAC', this.$proxyPAC.value);
+  $proxyRules.value = ConfigUtil.getConfigItem("proxyRules", "");
-			ConfigUtil.setConfigItem('proxyRules', this.$proxyRules.value);
+  $proxyBypass.value = ConfigUtil.getConfigItem("proxyBypass", "");
-			ConfigUtil.setConfigItem('proxyBypass', this.$proxyBypass.value);
 
-			ipcRenderer.send('forward-message', 'reload-proxy', true);
+  $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);
   });
-	}
 
-	initProxyOption(): void {
+  function toggleManualProxySettings(option: boolean): void {
-		const manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
-		this.toggleManualProxySettings(manualProxyEnabled);
-
-		this.updateProxyOption();
-	}
-
-	toggleManualProxySettings(option: boolean): void {
     if (option) {
-			this.$manualProxyBlock.classList.remove('hidden');
+      $manualProxyBlock.classList.remove("hidden");
     } else {
-			this.$manualProxyBlock.classList.add('hidden');
+      $manualProxyBlock.classList.add("hidden");
     }
   }
 
-	updateProxyOption(): void {
+  function updateProxyOption(): void {
-		this.generateSettingOption({
+    generateSettingOption({
-			$element: document.querySelector('#use-system-settings .setting-control'),
+      $element: document.querySelector(
-			value: ConfigUtil.getConfigItem('useSystemProxy', false),
+        "#use-system-settings .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("useSystemProxy", false),
       clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('useSystemProxy');
+        const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
-				const manualProxyValue = ConfigUtil.getConfigItem('useManualProxy');
+        const manualProxyValue = ConfigUtil.getConfigItem(
+          "useManualProxy",
+          false,
+        );
         if (manualProxyValue && newValue) {
-					ConfigUtil.setConfigItem('useManualProxy', !manualProxyValue);
+          ConfigUtil.setConfigItem("useManualProxy", !manualProxyValue);
-					this.toggleManualProxySettings(!manualProxyValue);
+          toggleManualProxySettings(!manualProxyValue);
         }
 
         if (!newValue) {
           // Remove proxy system proxy settings
-					ConfigUtil.setConfigItem('proxyRules', '');
+          ConfigUtil.setConfigItem("proxyRules", "");
-					ipcRenderer.send('forward-message', 'reload-proxy', false);
+          ipcRenderer.send("forward-message", "reload-proxy", false);
         }
 
-				ConfigUtil.setConfigItem('useSystemProxy', newValue);
+        ConfigUtil.setConfigItem("useSystemProxy", newValue);
-				this.updateProxyOption();
+        updateProxyOption();
-			}
+      },
     });
-		this.generateSettingOption({
+    generateSettingOption({
-			$element: document.querySelector('#use-manual-settings .setting-control'),
+      $element: document.querySelector(
-			value: ConfigUtil.getConfigItem('useManualProxy', false),
+        "#use-manual-settings .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("useManualProxy", false),
       clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('useManualProxy');
+        const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);
-				const systemProxyValue = ConfigUtil.getConfigItem('useSystemProxy');
+        const systemProxyValue = ConfigUtil.getConfigItem(
-				this.toggleManualProxySettings(newValue);
+          "useSystemProxy",
+          false,
+        );
+        toggleManualProxySettings(newValue);
         if (systemProxyValue && newValue) {
-					ConfigUtil.setConfigItem('useSystemProxy', !systemProxyValue);
+          ConfigUtil.setConfigItem("useSystemProxy", !systemProxyValue);
         }
 
-				ConfigUtil.setConfigItem('proxyRules', '');
+        ConfigUtil.setConfigItem("proxyRules", "");
-				ConfigUtil.setConfigItem('useManualProxy', newValue);
+        ConfigUtil.setConfigItem("useManualProxy", newValue);
         // Reload app only when turning manual proxy off, hence !newValue
-				ipcRenderer.send('forward-message', 'reload-proxy', !newValue);
+        ipcRenderer.send("forward-message", "reload-proxy", !newValue);
-				this.updateProxyOption();
+        updateProxyOption();
-			}
+      },
     });
   }
 }

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

@@ -1,11 +1,11 @@
-import {ipcRenderer, remote} from 'electron';
+import {remote} from "electron";
 
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../../common/html";
-
+import * as t from "../../../../common/translation-util";
-import BaseComponent from '../../components/base';
+import {generateNodeFromHTML} from "../../components/base";
-import * as DomainUtil from '../../utils/domain-util';
+import {ipcRenderer} from "../../typed-ipc-renderer";
-import * as LinkUtil from '../../utils/link-util';
+import * as DomainUtil from "../../utils/domain-util";
-import * as t from '../../utils/translation-util';
+import * as LinkUtil from "../../utils/link-util";
 
 const {dialog} = remote;
 
@@ -14,101 +14,92 @@ interface NewServerFormProps {
   onChange: () => void;
 }
 
-export default class NewServerForm extends BaseComponent {
+export function initNewServerForm(props: NewServerFormProps): void {
-	props: NewServerFormProps;
+  const $newServerForm = generateNodeFromHTML(html`
-	$newServerForm: Element;
-	$saveServerButton: HTMLButtonElement;
-	$newServerUrl: HTMLInputElement;
-	constructor(props: NewServerFormProps) {
-		super();
-		this.props = props;
-	}
-
-	templateHTML(): string {
-		return htmlEscape`
     <div class="server-input-container">
-				<div class="title">${t.__('Organization URL')}</div>
+      <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"/>
+        <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>
+        <button id="connect">${t.__("Connect")}</button>
       </div>
       <div class="server-center">
         <div class="divider">
-						<hr class="left"/>${t.__('OR')}<hr class="right" />
+          <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>
+        <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>
+          <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")!;
+  props.$root.textContent = "";
+  props.$root.append($newServerForm);
+  const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
+    "input.setting-input-value",
+  )!;
 
-	init(): void {
+  async function submitFormHandler(): Promise<void> {
-		this.initForm();
+    $saveServerButton.textContent = "Connecting...";
-		this.initActions();
-	}
-
-	initForm(): void {
-		this.$newServerForm = this.generateNodeFromHTML(this.templateHTML());
-		this.$saveServerButton = this.$newServerForm.querySelector('#connect');
-		this.props.$root.textContent = '';
-		this.props.$root.append(this.$newServerForm);
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-	}
-
-	async submitFormHandler(): Promise<void> {
-		this.$saveServerButton.textContent = 'Connecting...';
     let serverConf;
     try {
-			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value.trim());
+      serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim());
     } catch (error: unknown) {
-			this.$saveServerButton.textContent = 'Connect';
+      $saveServerButton.textContent = "Connect";
       await dialog.showMessageBox({
-				type: 'error',
+        type: "error",
-				message: error instanceof Error ?
+        message:
-					`${error.name}: ${error.message}` : 'Unknown error',
+          error instanceof Error
-				buttons: ['OK']
+            ? `${error.name}: ${error.message}`
+            : "Unknown error",
+        buttons: ["OK"],
       });
       return;
     }
 
     await DomainUtil.addDomain(serverConf);
-		this.props.onChange();
+    props.onChange();
   }
 
-	openCreateNewOrgExternalLink(): void {
+  $saveServerButton.addEventListener("click", async () => {
-		const link = 'https://zulip.com/new/';
+    await submitFormHandler();
-		const externalCreateNewOrgElement = document.querySelector('#open-create-org-link');
+  });
-		externalCreateNewOrgElement.addEventListener('click', async () => {
+  $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 = document.querySelector(
+    "#open-create-org-link",
+  )!;
+  externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });
-	}
 
-	networkSettingsLink(): void {
+  const networkSettingsId = document.querySelector(".server-network-option")!;
-		const networkSettingsId = document.querySelectorAll('.server-network-option')[0];
+  networkSettingsId.addEventListener("click", () => {
-		networkSettingsId.addEventListener('click', () => ipcRenderer.send('forward-message', 'open-network-settings'));
+    ipcRenderer.send("forward-message", "open-network-settings");
-	}
-
-	initActions(): void {
-		this.$saveServerButton.addEventListener('click', async () => {
-			await this.submitFormHandler();
   });
-		this.$newServerUrl.addEventListener('keypress', async event => {
-			if (event.key === 'Enter') {
-				await this.submitFormHandler();
-			}
-		});
-		// Open create new org link in default browser
-		this.openCreateNewOrgExternalLink();
-		this.networkSettingsLink();
-	}
 }

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

@@ -1,131 +1,106 @@
-import {ipcRenderer} from 'electron';
+import type {DNDSettings} from "../../../../common/dnd-util";
+import type {NavItem} from "../../../../common/types";
+import {ipcRenderer} from "../../typed-ipc-renderer";
 
-import BaseComponent from '../../components/base';
+import {initConnectedOrgSection} from "./connected-org-section";
-import type {DNDSettings} from '../../utils/dnd-util';
+import {initGeneralSection} from "./general-section";
+import Nav from "./nav";
+import {initNetworkSection} from "./network-section";
+import {initServersSection} from "./servers-section";
+import {initShortcutsSection} from "./shortcuts-section";
 
-import ConnectedOrgSection from './connected-org-section';
+export function initPreferenceView(): void {
-import GeneralSection from './general-section';
+  const $sidebarContainer = document.querySelector("#sidebar")!;
-import Nav from './nav';
+  const $settingsContainer = document.querySelector("#settings-container")!;
-import NetworkSection from './network-section';
-import ServersSection from './servers-section';
-import ShortcutsSection from './shortcuts-section';
 
-type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
+  const nav = new Nav({
-
+    $root: $sidebarContainer,
-export default class PreferenceView extends BaseComponent {
+    onItemSelected: handleNavigation,
-	$sidebarContainer: Element;
-	$settingsContainer: Element;
-	nav: Nav;
-	section: Section;
-	constructor() {
-		super();
-		this.$sidebarContainer = document.querySelector('#sidebar');
-		this.$settingsContainer = document.querySelector('#settings-container');
-	}
-
-	init(): void {
-		this.nav = new Nav({
-			$root: this.$sidebarContainer,
-			onItemSelected: this.handleNavigation.bind(this)
   });
 
-		this.setDefaultView();
+  const navItem =
-		this.registerIpcs();
+    nav.navItems.find((navItem) => window.location.hash === `#${navItem}`) ??
-	}
+    "General";
 
-	setDefaultView(): void {
+  handleNavigation(navItem);
-		let nav = 'General';
-		const hasTag = window.location.hash;
-		if (hasTag) {
-			nav = hasTag.slice(1);
-		}
 
-		this.handleNavigation(nav);
+  function handleNavigation(navItem: NavItem): void {
-	}
+    nav.select(navItem);
-
-	handleNavigation(navItem: string): void {
-		this.nav.select(navItem);
     switch (navItem) {
-			case 'AddServer': {
+      case "AddServer":
-				this.section = new ServersSection({
+        initServersSection({
-					$root: this.$settingsContainer
+          $root: $settingsContainer,
+        });
+        break;
+
+      case "General":
+        initGeneralSection({
+          $root: $settingsContainer,
+        });
+        break;
+
+      case "Organizations":
+        initConnectedOrgSection({
+          $root: $settingsContainer,
+        });
+        break;
+
+      case "Network":
+        initNetworkSection({
+          $root: $settingsContainer,
+        });
+        break;
+
+      case "Shortcuts": {
+        initShortcutsSection({
+          $root: $settingsContainer,
         });
         break;
       }
 
-			case 'General': {
+      default:
-				this.section = new GeneralSection({
+        ((n: never) => n)(navItem);
-					$root: this.$settingsContainer
-				});
-				break;
     }
 
-			case 'Organizations': {
-				this.section = new ConnectedOrgSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-
-			case 'Network': {
-				this.section = new NetworkSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-
-			case 'Shortcuts': {
-				this.section = new ShortcutsSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-
-			default: break;
-		}
-
-		this.section.init();
     window.location.hash = `#${navItem}`;
   }
 
   // Handle toggling and reflect changes in preference page
-	handleToggle(elementName: string, state: boolean): void {
+  function handleToggle(elementName: string, state = false): void {
     const inputSelector = `#${elementName} .action .switch input`;
-		const input: HTMLInputElement = document.querySelector(inputSelector);
+    const input: HTMLInputElement = document.querySelector(inputSelector)!;
     if (input) {
       input.checked = state;
     }
   }
 
-	registerIpcs(): void {
+  ipcRenderer.on("switch-settings-nav", (_event: Event, navItem: NavItem) => {
-		ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
+    handleNavigation(navItem);
-			this.handleNavigation(navItem);
   });
 
-		ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
+  ipcRenderer.on("toggle-sidebar-setting", (_event: Event, state: boolean) => {
-			this.handleToggle('sidebar-option', state);
+    handleToggle("sidebar-option", state);
   });
 
-		ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
+  ipcRenderer.on("toggle-menubar-setting", (_event: Event, state: boolean) => {
-			this.handleToggle('menubar-option', state);
+    handleToggle("menubar-option", state);
   });
 
-		ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
+  ipcRenderer.on("toggle-tray", (_event: Event, state: boolean) => {
-			this.handleToggle('tray-option', state);
+    handleToggle("tray-option", state);
   });
 
-		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: DNDSettings) => {
+  ipcRenderer.on(
-			this.handleToggle('show-notification-option', newSettings.showNotification);
+    "toggle-dnd",
-			this.handleToggle('silent-option', newSettings.silent);
+    (_event: Event, _state: boolean, newSettings: Partial<DNDSettings>) => {
+      handleToggle("show-notification-option", newSettings.showNotification);
+      handleToggle("silent-option", newSettings.silent);
 
-			if (process.platform === 'win32') {
+      if (process.platform === "win32") {
-				this.handleToggle('flash-taskbar-option', newSettings.flashTaskbarOnMessage);
+        handleToggle("flash-taskbar-option", newSettings.flashTaskbarOnMessage);
-			}
-		});
       }
+    },
+  );
 }
 
-window.addEventListener('load', () => {
+window.addEventListener("load", initPreferenceView);
-	const preferenceView = new PreferenceView();
-	preferenceView.init();
-});

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

@@ -1,99 +1,82 @@
-import {remote, ipcRenderer} from 'electron';
+import {remote} from "electron";
 
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../../common/html";
-
+import * as Messages from "../../../../common/messages";
-import * as Messages from '../../../../resources/messages';
+import * as t from "../../../../common/translation-util";
-import BaseComponent from '../../components/base';
+import type {ServerConf} from "../../../../common/types";
-import * as DomainUtil from '../../utils/domain-util';
+import {generateNodeFromHTML} from "../../components/base";
-import * as t from '../../utils/translation-util';
+import {ipcRenderer} from "../../typed-ipc-renderer";
+import * as DomainUtil from "../../utils/domain-util";
 
 const {dialog} = remote;
 
 interface ServerInfoFormProps {
   $root: Element;
-	server: DomainUtil.ServerConf;
+  server: ServerConf;
   index: number;
   onChange: () => void;
 }
 
-export default class ServerInfoForm extends BaseComponent {
+export function initServerInfoForm(props: ServerInfoFormProps): void {
-	props: ServerInfoFormProps;
+  const $serverInfoForm = generateNodeFromHTML(html`
-	$serverInfoForm: Element;
-	$serverInfoAlias: Element;
-	$serverIcon: Element;
-	$deleteServerButton: Element;
-	$openServerButton: Element;
-	constructor(props: ServerInfoFormProps) {
-		super();
-		this.props = props;
-	}
-
-	templateHTML(): string {
-		return htmlEscape`
     <div class="settings-card">
       <div class="server-info-left">
-					<img class="server-info-icon" src="${this.props.server.icon}"/>
+        <img class="server-info-icon" src="${props.server.icon}" />
         <div class="server-info-row">
-						<span class="server-info-alias">${this.props.server.alias}</span>
+          <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="${this.props.server.url}">${this.props.server.url}</span>
+          <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>
+            <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);
 
-	init(): void {
+  $deleteServerButton.addEventListener("click", async () => {
-		this.initForm();
-		this.initActions();
-	}
-
-	initForm(): void {
-		this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML());
-		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
-		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
-		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
-		this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
-		this.props.$root.append(this.$serverInfoForm);
-	}
-
-	initActions(): void {
-		this.$deleteServerButton.addEventListener('click', async () => {
     const {response} = await dialog.showMessageBox({
-				type: 'warning',
+      type: "warning",
-				buttons: [t.__('YES'), t.__('NO')],
+      buttons: [t.__("YES"), t.__("NO")],
       defaultId: 0,
-				message: t.__('Are you sure you want to disconnect this organization?')
+      message: t.__("Are you sure you want to disconnect this organization?"),
     });
     if (response === 0) {
-				if (DomainUtil.removeDomain(this.props.index)) {
+      if (DomainUtil.removeDomain(props.index)) {
-					ipcRenderer.send('reload-full-app');
+        ipcRenderer.send("reload-full-app");
       } else {
-					const {title, content} = Messages.orgRemovalError(DomainUtil.getDomain(this.props.index).url);
+        const {title, content} = Messages.orgRemovalError(
+          DomainUtil.getDomain(props.index).url,
+        );
         dialog.showErrorBox(title, content);
       }
     }
   });
 
-		this.$openServerButton.addEventListener('click', () => {
+  $openServerButton.addEventListener("click", () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
   });
 
-		this.$serverInfoAlias.addEventListener('click', () => {
+  $serverInfoAlias.addEventListener("click", () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
   });
 
-		this.$serverIcon.addEventListener('click', () => {
+  $serverIcon.addEventListener("click", () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
+    ipcRenderer.send("forward-message", "switch-server-tab", props.index);
   });
-	}
 }

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

@@ -1,52 +1,30 @@
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../../common/html";
+import * as t from "../../../../common/translation-util";
 
-import * as t from '../../utils/translation-util';
+import {reloadApp} from "./base-section";
-
+import {initNewServerForm} from "./new-server-form";
-import BaseSection from './base-section';
-import NewServerForm from './new-server-form';
 
 interface ServersSectionProps {
   $root: Element;
 }
 
-export default class ServersSection extends BaseSection {
+export function initServersSection(props: ServersSectionProps): void {
-	props: ServersSectionProps;
+  props.$root.textContent = "";
-	$newServerContainer: Element;
-	constructor(props: ServersSectionProps) {
-		super();
-		this.props = props;
-	}
 
-	templateHTML(): string {
+  props.$root.innerHTML = html`
-		return htmlEscape`
     <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 class="page-title">${t.__("Add a Zulip organization")}</div>
           <div id="new-server-container"></div>
         </div>
       </div>
     </div>
-		`;
+  `.html;
-	}
+  const $newServerContainer = document.querySelector("#new-server-container")!;
 
-	init(): void {
+  initNewServerForm({
-		this.initServers();
+    $root: $newServerContainer,
-	}
+    onChange: reloadApp,
-
+  });
-	initServers(): void {
-		this.props.$root.textContent = '';
-
-		this.props.$root.innerHTML = this.templateHTML();
-		this.$newServerContainer = document.querySelector('#new-server-container');
-
-		this.initNewServerForm();
-	}
-
-	initNewServerForm(): void {
-		new NewServerForm({
-			$root: this.$newServerContainer,
-			onChange: this.reloadApp
-		}).init();
-	}
 }

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

@@ -1,348 +1,231 @@
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../../common/html";
-
+import * as t from "../../../../common/translation-util";
-import * as LinkUtil from '../../utils/link-util';
+import * as LinkUtil from "../../utils/link-util";
-import * as t from '../../utils/translation-util';
-
-import BaseSection from './base-section';
 
 interface ShortcutsSectionProps {
   $root: Element;
 }
 
-export default class ShortcutsSection extends BaseSection {
+// eslint-disable-next-line complexity
-	props: ShortcutsSectionProps;
+export function initShortcutsSection(props: ShortcutsSectionProps): void {
-	constructor(props: ShortcutsSectionProps) {
+  const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
-		super();
-		this.props = props;
-	}
 
-	// TODO - Deduplicate templateMacHTML and templateWinLinHTML functions. In theory
+  props.$root.innerHTML = html`
-	// they both should be the same the only thing different should be the userOSKey
-	// variable but there seems to be inconsistences between both function, one has more
-	// lines though one may just be using more new lines and other thing is the use of +.
-	templateMacHTML(): string {
-		const userOSKey = '⌘';
-
-		return htmlEscape`
     <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="settings-card tip">
-							<div class="title">${t.__('Application Shortcuts')}</div>
+        <p>
+          <b><i class="material-icons md-14">settings</i>${t.__("Tip")}: </b
+          >${t.__("These desktop app shortcuts extend the Zulip webapp's")}
+          <span id="open-hotkeys-link"> ${t.__("keyboard shortcuts")}</span>.
+        </p>
+      </div>
+      <div class="title">${t.__("Application Shortcuts")}</div>
       <div class="settings-card">
         <table>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>,</kbd></td>
-										<td>${t.__('Settings')}</td>
+            <td>${t.__("Settings")}</td>
           </tr>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>K</kbd></td>
-										<td>${t.__('Keyboard Shortcuts')}</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>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>L</kbd></td>
-										<td>${t.__('Toggle Do Not Disturb')}</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>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Q</kbd></td>
-										<td>${t.__('Reset App Settings')}</td>
+            <td>${t.__("Quit Zulip")}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
-										<td>${t.__('Log Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>${t.__('Hide Zulip')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>${t.__('Hide Others')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
-										<td>${t.__('Quit Zulip')}</td>
           </tr>
         </table>
         <div class="setting-control"></div>
       </div>
-							<div class="title">${t.__('Edit Shortcuts')}</div>
+      <div class="title">${t.__("Edit Shortcuts")}</div>
       <div class="settings-card">
         <table>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Z</kbd></td>
-										<td>${t.__('Undo')}</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>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>X</kbd></td>
-										<td>${t.__('Redo')}</td>
+            <td>${t.__("Cut")}</td>
           </tr>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>C</kbd></td>
-										<td>${t.__('Cut')}</td>
+            <td>${t.__("Copy")}</td>
           </tr>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>V</kbd></td>
-										<td>${t.__('Copy')}</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>${userOSKey}</kbd><kbd>V</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>A</kbd></td>
-										<td>${t.__('Paste')}</td>
+            <td>${t.__("Select All")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+            <td>
-										<td>${t.__('Paste and Match Style')}</td>
+              <kbd>Control</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>Space</kbd>
-									</tr>
+            </td>
-									<tr>
+            <td>${t.__("Emoji & Symbols")}</td>
-										<td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
-										<td>${t.__('Select All')}</td>
-									</tr>
-									<tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
-										<td>${t.__('Emoji & Symbols')}</td>
           </tr>
         </table>
         <div class="setting-control"></div>
       </div>
-							<div class="title">${t.__('View Shortcuts')}</div>
+      <div class="title">${t.__("View Shortcuts")}</div>
       <div class="settings-card">
         <table>
           <tr>
-										<td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>R</kbd></td>
-										<td>${t.__('Reload')}</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>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>-</kbd></td>
-										<td>${t.__('Hard Reload')}</td>
+            <td>${t.__("Zoom Out")}</td>
           </tr>
           <tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>0</kbd></td>
-										<td>${t.__('Enter Full Screen')}</td>
+            <td>${t.__("Actual Size")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
-										<td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>${t.__('Zoom In')}</td>
+            <td>${t.__("Toggle Sidebar")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
-										<td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
+            <td><kbd>Shift</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>S</kbd></td>
-										<td>${t.__('Zoom Out')}</td>
+            <td>${t.__("Toggle Sidebar")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
-										<td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
+            <td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>I</kbd></td>
-										<td>${t.__('Actual Size')}</td>
+            <td>${t.__("Toggle DevTools for Zulip App")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
-										<td>${t.__('Toggle Sidebar')}</td>
+            <td>${t.__("Toggle DevTools for Zulip App")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
+            <td><kbd>Option</kbd> + <kbd>${cmdOrCtrl}</kbd> + <kbd>U</kbd></td>
-										<td>${t.__('Toggle DevTools for Zulip App')}</td>
+            <td>${t.__("Toggle DevTools for Active Tab")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
-										<td>${t.__('Toggle DevTools for Active Tab')}</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>
+            <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>
+            <td>${t.__("Switch to Previous Organization")}</td>
           </tr>
         </table>
         <div class="setting-control"></div>
       </div>
-							<div class="title">${t.__('History Shortcuts')}</div>
+      <div class="title">${t.__("History Shortcuts")}</div>
       <div class="settings-card">
         <table>
-									<tr>
+          <tr ${process.platform === "darwin" ? "" : "hidden"}>
-										<td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>←</kbd></td>
-										<td>${t.__('Back')}</td>
+            <td>${t.__("Back")}</td>
           </tr>
-									<tr>
+          <tr ${process.platform === "darwin" ? "hidden" : ""}>
-										<td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
-										<td>${t.__('Forward')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">Window Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
-										<td>${t.__('Minimize')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
-										<td>${t.__('Close')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-						</div>
-		`;
-	}
-
-	templateWinLinHTML(): string {
-		const userOSKey = 'Ctrl';
-
-		return htmlEscape`
-						<div class="settings-pane">
-						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
-							<div class="title">${t.__('Application Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
-										<td>${t.__('Settings')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
-										<td>${t.__('Keyboard Shortcuts')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-										<td>${t.__('Toggle Do Not Disturb')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
-										<td>${t.__('Log Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
-										<td>${t.__('Quit Zulip')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('Edit Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
-										<td>${t.__('Undo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
-										<td>${t.__('Redo')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
-										<td>${t.__('Cut')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
-										<td>${t.__('Copy')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
-										<td>${t.__('Paste')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
-										<td>${t.__('Paste and Match Style')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
-										<td>${t.__('Select All')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('View Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
-										<td>${t.__('Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
-										<td>${t.__('Hard Reload')}</td>
-									</tr>
-									<tr>
-										<td><kbd>F11</kbd></td>
-										<td>${t.__('Toggle Full Screen')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
-										<td>${t.__('Zoom In')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
-										<td>${t.__('Zoom Out')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
-										<td>${t.__('Actual Size')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>${t.__('Toggle Sidebar')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
-										<td>${t.__('Toggle DevTools for Zulip App')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
-										<td>${t.__('Toggle DevTools for Active Tab')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Next Organization')}</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-										<td>${t.__('Switch to Previous Organization')}</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">${t.__('History Shortcuts')}</div>
-							<div class="settings-card">
-								<table>
-									<tr>
             <td><kbd>Alt</kbd> + <kbd>←</kbd></td>
-										<td>${t.__('Back')}</td>
+            <td>${t.__("Back")}</td>
           </tr>
-									<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>
+            <td>${t.__("Forward")}</td>
           </tr>
         </table>
         <div class="setting-control"></div>
       </div>
-							<div class="title">${t.__('Window Shortcuts')}</div>
+      <div class="title">${t.__("Window Shortcuts")}</div>
       <div class="settings-card">
         <table>
           <tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>M</kbd></td>
-										<td>${t.__('Minimize')}</td>
+            <td>${t.__("Minimize")}</td>
           </tr>
           <tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
+            <td><kbd>${cmdOrCtrl}</kbd> + <kbd>W</kbd></td>
-										<td>${t.__('Close')}</td>
+            <td>${t.__("Close")}</td>
           </tr>
         </table>
         <div class="setting-control"></div>
       </div>
     </div>
-		`;
+  `.html;
-	}
 
-	openHotkeysExternalLink(): void {
+  const link = "https://zulip.com/help/keyboard-shortcuts";
-		const link = 'https://zulip.com/help/keyboard-shortcuts';
+  const externalCreateNewOrgElement =
-		const externalCreateNewOrgElement = document.querySelector('#open-hotkeys-link');
+    document.querySelector("#open-hotkeys-link")!;
-		externalCreateNewOrgElement.addEventListener('click', async () => {
+  externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });
-	}
-
-	init(): void {
-		this.props.$root.innerHTML = (process.platform === 'darwin') ?
-			this.templateMacHTML() : this.templateWinLinHTML();
-		this.openHotkeysExternalLink();
-	}
 }

app/renderer/js/preload.ts

@@ -1,54 +1,63 @@
-import {contextBridge, ipcRenderer, webFrame} from 'electron';
+import {contextBridge, webFrame} from "electron";
-import fs from 'fs';
+import fs from "fs";
 
-import electron_bridge, {bridgeEvents} from './electron-bridge';
+import electron_bridge, {bridgeEvents} from "./electron-bridge";
-import * as NetworkError from './pages/network';
+import * as NetworkError from "./pages/network";
+import {ipcRenderer} from "./typed-ipc-renderer";
 
-contextBridge.exposeInMainWorld('raw_electron_bridge', electron_bridge);
+contextBridge.exposeInMainWorld("raw_electron_bridge", electron_bridge);
 
-ipcRenderer.on('logout', () => {
+ipcRenderer.on("logout", () => {
-	if (bridgeEvents.emit('logout')) {
+  if (bridgeEvents.emit("logout")) {
     return;
   }
 
   // Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+  const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
   dropdown.click();
 
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
+  const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".dropdown-menu li:last-child a",
+  );
   nodes[nodes.length - 1].click();
 });
 
-ipcRenderer.on('show-keyboard-shortcuts', () => {
+ipcRenderer.on("show-keyboard-shortcuts", () => {
-	if (bridgeEvents.emit('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]');
+  const node: HTMLElement = document.querySelector(
+    "a[data-overlay-trigger=keyboard-shortcuts]",
+  )!;
   // Additional check
-	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
+  if (node.textContent!.trim().toLowerCase() === "keyboard shortcuts (?)") {
     node.click();
   } else {
     // Atleast click the dropdown
-		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+    const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
     dropdown.click();
   }
 });
 
-ipcRenderer.on('show-notification-settings', () => {
+ipcRenderer.on("show-notification-settings", () => {
-	if (bridgeEvents.emit('show-notification-settings')) {
+  if (bridgeEvents.emit("show-notification-settings")) {
     return;
   }
 
   // Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
+  const dropdown: HTMLElement = document.querySelector(".dropdown-toggle")!;
   dropdown.click();
 
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
+  const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".dropdown-menu li a",
+  );
   nodes[2].click();
 
-	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
+  const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll(
+    ".normal-settings-list li div",
+  );
 
   // Wait until the notification dom element shows up
   setTimeout(() => {
@@ -56,32 +65,17 @@ ipcRenderer.on('show-notification-settings', () => {
   }, 100);
 });
 
-window.addEventListener('load', (event: any): void => {
+window.addEventListener("load", () => {
-	if (!event.target.URL.includes('app/renderer/network.html')) {
+  if (!location.href.includes("app/renderer/network.html")) {
     return;
   }
 
-	const $reconnectButton = document.querySelector('#reconnect');
+  const $reconnectButton = document.querySelector("#reconnect")!;
-	const $settingsButton = document.querySelector('#settings');
+  const $settingsButton = document.querySelector("#settings")!;
   NetworkError.init($reconnectButton, $settingsButton);
 });
 
-// Electron's globalShortcut can cause unexpected results
+(async () =>
-// so adding the reload shortcut in the old-school way
+  webFrame.executeJavaScript(
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
+    fs.readFileSync(require.resolve("./injected"), "utf8"),
-document.addEventListener('keydown', event => {
+  ))();
-	const cmdOrCtrl = event.ctrlKey || event.metaKey;
-	if (event.code === 'F5') {
-		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (cmdOrCtrl && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
-	}
-});
-
-(async () => webFrame.executeJavaScript(
-	fs.readFileSync(require.resolve('./injected'), 'utf8')
-))();

app/renderer/js/tray.ts

@@ -1,39 +1,46 @@
-import {ipcRenderer, remote, WebviewTag, NativeImage} from 'electron';
+import type {NativeImage, WebviewTag} from "electron";
-import path from 'path';
+import {remote} from "electron";
+import path from "path";
 
-import * as ConfigUtil from './utils/config-util';
+import * as ConfigUtil from "../../common/config-util";
+import type {RendererMessage} from "../../common/typed-ipc";
+
+import {ipcRenderer} from "./typed-ipc-renderer";
 
 const {Tray, Menu, nativeImage, BrowserWindow} = remote;
 
-let tray: Electron.Tray;
+let tray: Electron.Tray | null = null;
 
-const ICON_DIR = '../../resources/tray';
+const ICON_DIR = "../../resources/tray";
 
-const TRAY_SUFFIX = 'tray';
+const TRAY_SUFFIX = "tray";
 
 const APP_ICON = path.join(__dirname, ICON_DIR, TRAY_SUFFIX);
 
 const iconPath = (): string => {
-	if (process.platform === 'linux') {
+  if (process.platform === "linux") {
-		return APP_ICON + 'linux.png';
+    return APP_ICON + "linux.png";
   }
 
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'macOSTemplate.png');
+  return (
+    APP_ICON + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
+  );
 };
 
-const winUnreadTrayIconPath = (): string => APP_ICON + 'unread.ico';
+const winUnreadTrayIconPath = (): string => APP_ICON + "unread.ico";
 
 let unread = 0;
 
 const trayIconSize = (): number => {
   switch (process.platform) {
-		case 'darwin':
+    case "darwin":
       return 20;
-		case 'win32':
+    case "win32":
       return 100;
-		case 'linux':
+    case "linux":
       return 100;
-		default: return 80;
+    default:
+      return 80;
   }
 };
 
@@ -42,12 +49,12 @@ const config = {
   pixelRatio: window.devicePixelRatio,
   unreadCount: 0,
   showUnreadCount: true,
-	unreadColor: '#000000',
+  unreadColor: "#000000",
-	readColor: '#000000',
+  readColor: "#000000",
-	unreadBackgroundColor: '#B9FEEA',
+  unreadBackgroundColor: "#B9FEEA",
-	readBackgroundColor: '#B9FEEA',
+  readBackgroundColor: "#B9FEEA",
   size: trayIconSize(),
-	thick: process.platform === 'win32'
+  thick: process.platform === "win32",
 };
 
 const renderCanvas = function (arg: number): HTMLCanvasElement {
@@ -58,17 +65,19 @@ const renderCanvas = function (arg: number): HTMLCanvasElement {
   const CENTER = SIZE / 2;
   const HAS_COUNT = config.showUnreadCount && config.unreadCount;
   const color = config.unreadCount ? config.unreadColor : config.readColor;
-	const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+  const backgroundColor = config.unreadCount
+    ? config.unreadBackgroundColor
+    : config.readBackgroundColor;
 
-	const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = SIZE;
   canvas.height = SIZE;
-	const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext("2d")!;
 
   // Circle
   // If (!config.thick || config.thick && HAS_COUNT) {
   ctx.beginPath();
-	ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
+  ctx.arc(CENTER, CENTER, SIZE / 2 - PADDING, 0, 2 * Math.PI, false);
   ctx.fillStyle = backgroundColor;
   ctx.fill();
   ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
@@ -77,16 +86,16 @@ const renderCanvas = function (arg: number): HTMLCanvasElement {
   // Count or Icon
   if (HAS_COUNT) {
     ctx.fillStyle = color;
-		ctx.textAlign = 'center';
+    ctx.textAlign = "center";
     if (config.unreadCount > 99) {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
+      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.4}px Helvetica`;
-			ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
+      ctx.fillText("99+", CENTER, CENTER + SIZE * 0.15);
     } else if (config.unreadCount < 10) {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.5}px Helvetica`;
-			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.2));
+      ctx.fillText(String(config.unreadCount), CENTER, CENTER + SIZE * 0.2);
     } else {
-			ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
+      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.5}px Helvetica`;
-			ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
+      ctx.fillText(String(config.unreadCount), CENTER, CENTER + SIZE * 0.15);
     }
   }
 
@@ -99,87 +108,90 @@ const renderCanvas = function (arg: number): HTMLCanvasElement {
  * @return the native image
  */
 const renderNativeImage = function (arg: number): NativeImage {
-	if (process.platform === 'win32') {
+  if (process.platform === "win32") {
     return nativeImage.createFromPath(winUnreadTrayIconPath());
   }
 
   const canvas = renderCanvas(arg);
-	const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
+  const pngData = nativeImage
+    .createFromDataURL(canvas.toDataURL("image/png"))
+    .toPNG();
   return nativeImage.createFromBuffer(pngData, {
-		scaleFactor: config.pixelRatio
+    scaleFactor: config.pixelRatio,
   });
 };
 
-function sendAction(action: string): void {
+function sendAction<Channel extends keyof RendererMessage>(
+  channel: Channel,
+  ...args: Parameters<RendererMessage[Channel]>
+): void {
   const win = BrowserWindow.getAllWindows()[0];
 
-	if (process.platform === 'darwin') {
+  if (process.platform === "darwin") {
     win.restore();
   }
 
-	win.webContents.send(action);
+  ipcRenderer.sendTo(win.webContents.id, channel, ...args);
 }
 
 const createTray = function (): void {
   const contextMenu = Menu.buildFromTemplate([
     {
-			label: 'Zulip',
+      label: "Zulip",
       click() {
-				ipcRenderer.send('focus-app');
+        ipcRenderer.send("focus-app");
-			}
+      },
     },
     {
-			label: 'Settings',
+      label: "Settings",
       click() {
-				ipcRenderer.send('focus-app');
+        ipcRenderer.send("focus-app");
-				sendAction('open-settings');
+        sendAction("open-settings");
-			}
+      },
     },
     {
-			type: 'separator'
+      type: "separator",
     },
     {
-			label: 'Quit',
+      label: "Quit",
       click() {
-				ipcRenderer.send('quit-app');
+        ipcRenderer.send("quit-app");
-			}
+      },
-		}
+    },
   ]);
   tray = new Tray(iconPath());
   tray.setContextMenu(contextMenu);
-	if (process.platform === 'linux' || process.platform === 'win32') {
+  if (process.platform === "linux" || process.platform === "win32") {
-		tray.on('click', () => {
+    tray.on("click", () => {
-			ipcRenderer.send('toggle-app');
+      ipcRenderer.send("toggle-app");
     });
   }
 };
 
-ipcRenderer.on('destroytray', (event: Event): Event => {
+ipcRenderer.on("destroytray", (_event: Event) => {
   if (!tray) {
-		return undefined;
+    return;
   }
 
   tray.destroy();
   if (tray.isDestroyed()) {
     tray = null;
   } else {
-		throw new Error('Tray icon not properly destroyed.');
+    throw new Error("Tray icon not properly destroyed.");
   }
-
-	return event;
 });
 
-ipcRenderer.on('tray', (_event: Event, arg: number): void => {
+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 (process.platform === "linux" || process.platform === "win32") {
     if (arg === 0) {
       unread = arg;
       tray.setImage(iconPath());
-			tray.setToolTip('No unread messages');
+      tray.setToolTip("No unread messages");
     } else {
       unread = arg;
       const image = renderNativeImage(arg);
@@ -198,28 +210,27 @@ function toggleTray(): void {
       tray = null;
     }
 
-		ConfigUtil.setConfigItem('trayIcon', false);
+    ConfigUtil.setConfigItem("trayIcon", false);
   } else {
     state = true;
     createTray();
-		if (process.platform === 'linux' || process.platform === 'win32') {
+    if (process.platform === "linux" || process.platform === "win32") {
       const image = renderNativeImage(unread);
-			tray.setImage(image);
+      tray!.setImage(image);
-			tray.setToolTip(`${unread} unread messages`);
+      tray!.setToolTip(`${unread} unread messages`);
     }
 
-		ConfigUtil.setConfigItem('trayIcon', true);
+    ConfigUtil.setConfigItem("trayIcon", true);
   }
 
-	const selector = 'webview:not([class*=disabled])';
+  const selector = "webview:not([class*=disabled])";
-	const webview: WebviewTag = document.querySelector(selector);
+  const webview: WebviewTag = document.querySelector(selector)!;
-	const webContents = remote.webContents.fromId(webview.getWebContentsId());
+  ipcRenderer.sendTo(webview.getWebContentsId(), "toggle-tray", state);
-	webContents.send('toggletray', state);
 }
 
-ipcRenderer.on('toggletray', toggleTray);
+ipcRenderer.on("toggletray", toggleTray);
 
-if (ConfigUtil.getConfigItem('trayIcon', true)) {
+if (ConfigUtil.getConfigItem("trayIcon", true)) {
   createTray();
 }
 

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

@@ -0,0 +1,64 @@
+import type {IpcRendererEvent} from "electron";
+import {
+  ipcRenderer as untypedIpcRenderer, // eslint-disable-line no-restricted-imports
+} from "electron";
+
+import type {
+  MainCall,
+  MainMessage,
+  RendererMessage,
+} from "../../common/typed-ipc";
+
+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;
+  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/config-util.ts

@@ -1,106 +0,0 @@
-import electron from 'electron';
-import fs from 'fs';
-import path from 'path';
-
-import {JsonDB} from 'node-json-db';
-
-import * as EnterpriseUtil from './enterprise-util';
-import Logger from './logger-util';
-
-const logger = new Logger({
-	file: 'config-util.log',
-	timestamp: true
-});
-
-let dialog: Electron.Dialog = null;
-let app: Electron.App = null;
-
-/* To make the util runnable in both main and renderer process */
-if (process.type === 'renderer') {
-	const {remote} = electron;
-	dialog = remote.dialog;
-	app = remote.app;
-} else {
-	dialog = electron.dialog;
-	app = electron.app;
-}
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getConfigItem(key: string, defaultValue: unknown = null): any {
-	try {
-		db.reload();
-	} catch (error: unknown) {
-		logger.error('Error while reloading settings.json: ');
-		logger.error(error);
-	}
-
-	const value = db.getData('/')[key];
-	if (value === undefined) {
-		setConfigItem(key, defaultValue);
-		return defaultValue;
-	}
-
-	return value;
-}
-
-export function getConfigString(key: string, defaultValue: string): string {
-	const value = getConfigItem(key, defaultValue);
-	if (typeof value === 'string') {
-		return value;
-	}
-
-	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);
-	}
-
-	const value = db.getData('/')[key];
-	return (value !== undefined);
-}
-
-export function setConfigItem(key: string, value: unknown, override? : boolean): void {
-	if (EnterpriseUtil.configItemExists(key) && !override) {
-		// If item is in global config and we're not trying to override
-		return;
-	}
-
-	db.push(`/${key}`, value, true);
-	db.save();
-}
-
-export function removeConfigItem(key: string): void {
-	db.delete(`/${key}`);
-	db.save();
-}
-
-function reloadDB(): void {
-	const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
-	try {
-		const file = fs.readFileSync(settingsJsonPath, 'utf8');
-		JSON.parse(file);
-	} catch (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);
-			logger.reportSentry(error);
-		}
-	}
-
-	db = new JsonDB(settingsJsonPath, true, true);
-}

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

@@ -1,60 +0,0 @@
-import electron from 'electron';
-import fs from 'fs';
-
-const app = process.type === 'renderer' ? electron.remote.app : electron.app;
-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'
-				}
-			];
-			configData.forEach(data => {
-				if (fs.existsSync(data.path)) {
-					fs.copyFileSync(data.path, configDir + data.fileName);
-					fs.unlinkSync(data.path);
-				}
-			});
-			// `window-state.json` is only deleted not moved, as the electron-window-state
-			// package will recreate the file in the config folder.
-			if (fs.existsSync(windowStateJson)) {
-				fs.unlinkSync(windowStateJson);
-			}
-		}
-
-		setupCompleted = true;
-	}
-};

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

@@ -1,48 +0,0 @@
-import * as ConfigUtil from './config-util';
-
-type SettingName = 'showNotification' | 'silent' | 'flashTaskbarOnMessage';
-
-export interface DNDSettings {
-	showNotification?: boolean;
-	silent?: boolean;
-	flashTaskbarOnMessage?: boolean;
-}
-
-interface Toggle {
-	dnd: boolean;
-	newSettings: 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: DNDSettings;
-	if (dnd) {
-		const oldSettings: DNDSettings = {};
-		newSettings = {};
-
-		// Iterate through the dndSettingList.
-		for (const settingName of dndSettingList) {
-			// Store the current value of setting.
-			oldSettings[settingName] = ConfigUtil.getConfigItem(settingName);
-			// New value of setting.
-			newSettings[settingName] = (settingName === 'silent');
-		}
-
-		// Store old value in oldSettings.
-		ConfigUtil.setConfigItem('dndPreviousSettings', oldSettings);
-	} else {
-		newSettings = ConfigUtil.getConfigItem('dndPreviousSettings');
-	}
-
-	for (const settingName of dndSettingList) {
-		ConfigUtil.setConfigItem(settingName, newSettings[settingName]);
-	}
-
-	ConfigUtil.setConfigItem('dnd', dnd);
-	return {dnd, newSettings};
-}

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

@@ -1,77 +1,93 @@
-import {remote, ipcRenderer} from 'electron';
+import {remote} from "electron";
-import fs from 'fs';
+import fs from "fs";
-import path from 'path';
+import path from "path";
 
-import {JsonDB} from 'node-json-db';
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors";
+import * as z from "zod";
 
-import * as Messages from '../../../resources/messages';
+import * as EnterpriseUtil from "../../../common/enterprise-util";
-
+import Logger from "../../../common/logger-util";
-import * as EnterpriseUtil from './enterprise-util';
+import * as Messages from "../../../common/messages";
-import Logger from './logger-util';
+import type {ServerConf} from "../../../common/types";
+import {ipcRenderer} from "../typed-ipc-renderer";
 
 const {app, dialog} = remote;
 
-export interface ServerConf {
-	url: string;
-	alias?: string;
-	icon?: string;
-}
-
 const logger = new Logger({
-	file: 'domain-util.log',
+  file: "domain-util.log",
-	timestamp: true
 });
 
-const defaultIconUrl = '../renderer/img/icon.png';
+const defaultIconUrl = "../renderer/img/icon.png";
 
-let db: JsonDB;
+const serverConfSchema = z.object({
+  url: z.string(),
+  alias: z.string(),
+  icon: z.string(),
+});
+
+let db!: JsonDB;
 
 reloadDB();
+
 // Migrate from old schema
-if (db.getData('/').domain) {
+try {
+  const oldDomain = db.getObject<unknown>("/domain");
+  if (typeof oldDomain === "string") {
     (async () => {
       await addDomain({
-			alias: 'Zulip',
+        alias: "Zulip",
-			url: db.getData('/domain')
+        url: oldDomain,
       });
-		db.delete('/domain');
+      db.delete("/domain");
     })();
+  }
+} catch (error: unknown) {
+  if (!(error instanceof DataError)) throw error;
 }
 
 export function getDomains(): ServerConf[] {
   reloadDB();
-	if (db.getData('/').domains === undefined) {
+  try {
+    return serverConfSchema.array().parse(db.getObject<unknown>("/domains"));
+  } catch (error: unknown) {
+    if (!(error instanceof DataError)) throw error;
     return [];
   }
-
-	return db.getData('/domains');
 }
 
 export function getDomain(index: number): ServerConf {
   reloadDB();
-	return db.getData(`/domains[${index}]`);
+  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: ServerConf): Promise<void> {
+export async function addDomain(server: {
+  url: string;
+  alias: string;
+  icon?: string;
+}): Promise<void> {
   if (server.icon) {
-		const localIconUrl = await saveServerIcon(server);
+    const localIconUrl = await saveServerIcon(server.icon);
     server.icon = localIconUrl;
-		db.push('/domains[]', server, true);
+    serverConfSchema.parse(server);
+    db.push("/domains[]", server, true);
     reloadDB();
   } else {
     server.icon = defaultIconUrl;
-		db.push('/domains[]', server, true);
+    serverConfSchema.parse(server);
+    db.push("/domains[]", server, true);
     reloadDB();
   }
 }
 
 export function removeDomains(): void {
-	db.delete('/domains');
+  db.delete("/domains");
   reloadDB();
 }
 
@@ -88,13 +104,16 @@ export function removeDomain(index: number): boolean {
 // Check if domain is already added
 export function duplicateDomain(domain: string): boolean {
   domain = formatUrl(domain);
-	return getDomains().some(server => server.url === domain);
+  return getDomains().some((server) => server.url === domain);
 }
 
-export async function checkDomain(domain: string, silent = false): Promise<ServerConf> {
+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.');
+    throw new Error("This server has been added.");
   }
 
   domain = formatUrl(domain);
@@ -107,45 +126,51 @@ export async function checkDomain(domain: string, silent = false): Promise<Serve
 }
 
 async function getServerSettings(domain: string): Promise<ServerConf> {
-	return ipcRenderer.invoke('get-server-settings', domain);
+  return ipcRenderer.invoke("get-server-settings", domain);
 }
 
-export async function saveServerIcon(server: ServerConf): Promise<string> {
+export async function saveServerIcon(iconURL: string): Promise<string> {
-	return ipcRenderer.invoke('save-server-icon', server.icon);
+  return ipcRenderer.invoke("save-server-icon", iconURL);
 }
 
-export async function updateSavedServer(url: string, index: number): Promise<void> {
+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);
+    const localIconUrl = await saveServerIcon(newServerConf.icon);
-		if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
+    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("Could not update server icon.");
     logger.log(error);
     logger.reportSentry(error);
   }
 }
 
 function reloadDB(): void {
-	const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
+  const domainJsonPath = path.join(
+    app.getPath("userData"),
+    "config/domain.json",
+  );
   try {
-		const file = fs.readFileSync(domainJsonPath, 'utf8');
+    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',
+        "Error saving new organization",
-				'There seems to be error while saving new organization, ' +
+        "There seems to be error while saving new organization, " +
-				'you may have to re-add your previous organizations back.'
+          "you may have to re-add your previous organizations back.",
       );
-			logger.error('Error while JSON parsing domain.json: ');
+      logger.error("Error while JSON parsing domain.json: ");
       logger.error(error);
       logger.reportSentry(error);
     }
@@ -155,11 +180,11 @@ function reloadDB(): void {
 }
 
 export function formatUrl(domain: string): string {
-	if (domain.startsWith('http://') || domain.startsWith('https://')) {
+  if (domain.startsWith("http://") || domain.startsWith("https://")) {
     return domain;
   }
 
-	if (domain.startsWith('localhost:')) {
+  if (domain.startsWith("localhost:")) {
     return `http://${domain}`;
   }
 

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

@@ -1,81 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import Logger from './logger-util';
-
-const logger = new Logger({
-	file: 'enterprise-util.log',
-	timestamp: true
-});
-
-// TODO: replace enterpriseSettings type with an interface once settings are final
-let enterpriseSettings: Record<string, unknown>;
-let configFile: boolean;
-
-reloadDB();
-
-function reloadDB(): void {
-	let enterpriseFile = '/etc/zulip-desktop-config/global_config.json';
-	if (process.platform === 'win32') {
-		enterpriseFile = 'C:\\Program Files\\Zulip-Desktop-Config\\global_config.json';
-	}
-
-	enterpriseFile = path.resolve(enterpriseFile);
-	if (fs.existsSync(enterpriseFile)) {
-		configFile = true;
-		try {
-			const file = fs.readFileSync(enterpriseFile, 'utf8');
-			enterpriseSettings = JSON.parse(file);
-		} catch (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: string, defaultValue?: unknown): any {
-	reloadDB();
-	if (!configFile) {
-		return defaultValue;
-	}
-
-	if (defaultValue === undefined) {
-		defaultValue = null;
-	}
-
-	return configItemExists(key) ? enterpriseSettings[key] : defaultValue;
-}
-
-export function configItemExists(key: string): boolean {
-	reloadDB();
-	if (!configFile) {
-		return false;
-	}
-
-	return (enterpriseSettings[key] !== undefined);
-}
-
-export function isPresetOrg(url: string): boolean {
-	if (!configFile || !configItemExists('presetOrganizations')) {
-		return false;
-	}
-
-	const presetOrgs = enterpriseSettings.presetOrganizations;
-	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/renderer/js/utils/link-util.ts

@@ -1,27 +1,26 @@
-import {shell} from 'electron';
+import {shell} from "electron";
-import fs from 'fs';
+import fs from "fs";
-import os from 'os';
+import os from "os";
-import path from 'path';
+import path from "path";
 
-import {htmlEscape} from 'escape-goat';
+import {html} from "../../../common/html";
 
 export function isUploadsUrl(server: string, url: URL): boolean {
-	return url.origin === server && url.pathname.startsWith('/user_uploads/');
+  return url.origin === server && url.pathname.startsWith("/user_uploads/");
 }
 
 export async function openBrowser(url: URL): Promise<void> {
-	if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
+  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(
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
-			path.join(os.tmpdir(), 'zulip-redirect-')
+    const file = path.join(dir, "redirect.html");
-		);
+    fs.writeFileSync(
-		const file = path.join(dir, 'redirect.html');
+      file,
-		fs.writeFileSync(file, htmlEscape`\
+      html`<!DOCTYPE html>
-<!DOCTYPE html>
+        <html>
-<html>
           <head>
             <meta charset="UTF-8" />
             <meta http-equiv="Refresh" content="0; url=${url.href}" />
@@ -35,12 +34,12 @@ export async function openBrowser(url: URL): Promise<void> {
           <body>
             <p>Opening <a href="${url.href}">${url.href}</a>…</p>
           </body>
-</html>
+        </html> `.html,
-`);
+    );
     await shell.openPath(file);
     setTimeout(() => {
       fs.unlinkSync(file);
       fs.rmdirSync(dir);
-		}, 15000);
+    }, 15_000);
   }
 }

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

@@ -1,63 +0,0 @@
-import electron from 'electron';
-import fs from 'fs';
-import path from 'path';
-
-import {JsonDB} from 'node-json-db';
-
-import Logger from './logger-util';
-
-const remote =
-	process.type === 'renderer' ? electron.remote : electron;
-
-const logger = new Logger({
-	file: 'linux-update-util.log',
-	timestamp: true
-});
-
-/* To make the util runnable in both main and renderer process */
-const {dialog, app} = remote;
-
-let db: JsonDB;
-
-reloadDB();
-
-export function getUpdateItem(key: string, defaultValue: unknown = null): any {
-	reloadDB();
-	const value = db.getData('/')[key];
-	if (value === undefined) {
-		setUpdateItem(key, defaultValue);
-		return defaultValue;
-	}
-
-	return value;
-}
-
-export function setUpdateItem(key: string, value: unknown): 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/renderer/js/utils/logger-util.ts

@@ -1,154 +0,0 @@
-import {Console} from 'console'; // eslint-disable-line node/prefer-global/console
-import electron from 'electron';
-import fs from 'fs';
-import os from 'os';
-
-import isDev from 'electron-is-dev';
-
-import {initSetUp} from './default-util';
-import {sentryInit, captureException} from './sentry-util';
-
-interface LoggerOptions {
-	timestamp?: true | (() => string);
-	file?: string;
-	level?: boolean;
-	logInDevMode?: boolean;
-}
-
-initSetUp();
-
-let app: Electron.App = null;
-let reportErrors = true;
-if (process.type === 'renderer') {
-	app = electron.remote.app;
-
-	// Report Errors to Sentry only if it is enabled in settings
-	// Gets the value of reportErrors from config-util for renderer process
-	// For main process, sentryInit() is handled in index.js
-	const {ipcRenderer} = electron;
-	ipcRenderer.send('error-reporting');
-	ipcRenderer.on('error-reporting-val', (_event: Event, errorReporting: boolean) => {
-		reportErrors = errorReporting;
-		if (reportErrors) {
-			sentryInit();
-		}
-	});
-} else {
-	app = electron.app;
-}
-
-const logDir = `${app.getPath('userData')}/Logs`;
-
-type Level = 'log' | 'debug' | 'info' | 'warn' | 'error';
-const levels: Level[] = ['log', 'debug', 'info', 'warn', 'error'];
-type LogMethod = (...args: unknown[]) => void;
-
-export default class Logger {
-	log: LogMethod;
-	debug: LogMethod;
-	info: LogMethod;
-	warn: LogMethod;
-	error: LogMethod;
-
-	nodeConsole: Console;
-	timestamp?: () => string;
-	level: boolean;
-	logInDevMode: boolean;
-
-	constructor(options: LoggerOptions = {}) {
-		let {
-			timestamp = true,
-			file = 'console.log',
-			level = true,
-			logInDevMode = false
-		} = options;
-
-		file = `${logDir}/${file}`;
-		if (timestamp === true) {
-			timestamp = this.getTimestamp;
-		}
-
-		// Trim log according to type of process
-		if (process.type === 'renderer') {
-			requestIdleCallback(() => this.trimLog(file));
-		} else {
-			process.nextTick(() => this.trimLog(file));
-		}
-
-		const fileStream = fs.createWriteStream(file, {flags: 'a'});
-		const nodeConsole = new Console(fileStream);
-
-		this.nodeConsole = nodeConsole;
-		this.timestamp = timestamp;
-		this.level = level;
-		this.logInDevMode = logInDevMode;
-		this.setUpConsole();
-	}
-
-	_log(type: Level, ...args: unknown[]): void {
-		const {
-			nodeConsole, timestamp, level, logInDevMode
-		} = this;
-
-		switch (true) {
-			case typeof timestamp === 'function':
-				args.unshift(timestamp() + ' |\t');
-				// Fall through
-
-			case (level):
-				args.unshift(type.toUpperCase() + ' |');
-				// Fall through
-
-			case isDev || logInDevMode:
-				nodeConsole[type](...args);
-				break;
-
-			default:
-		}
-
-		console[type](...args);
-	}
-
-	setUpConsole(): void {
-		for (const type of levels) {
-			this.setupConsoleMethod(type);
-		}
-	}
-
-	setupConsoleMethod(type: Level): void {
-		this[type] = (...args: unknown[]) => this._log(type, ...args);
-	}
-
-	getTimestamp(): string {
-		const date = new Date();
-		const timestamp =
-			`${date.getMonth()}/${date.getDate()} ` +
-			`${date.getMinutes()}:${date.getSeconds()}`;
-		return timestamp;
-	}
-
-	reportSentry(err: unknown): void {
-		if (reportErrors) {
-			captureException(err);
-		}
-	}
-
-	trimLog(file: string): void {
-		fs.readFile(file, 'utf8', (err, data) => {
-			if (err) {
-				throw err;
-			}
-
-			const MAX_LOG_FILE_LINES = 500;
-			const logs = data.split(os.EOL);
-			const logLength = logs.length - 1;
-
-			// Keep bottom MAX_LOG_FILE_LINES of each log instance
-			if (logLength > MAX_LOG_FILE_LINES) {
-				const trimmedLogs = logs.slice(logLength - MAX_LOG_FILE_LINES);
-				const toWrite = trimmedLogs.join(os.EOL);
-				fs.writeFileSync(file, toWrite);
-			}
-		});
-	}
-}

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

@@ -1,83 +0,0 @@
-import * as ConfigUtil from './config-util';
-
-export interface ProxyRule {
-	hostname?: string;
-	port?: number;
-}
-
-// TODO: Refactor to async function
-export async function resolveSystemProxy(mainWindow: Electron.BrowserWindow): Promise<void> {
-	const page = mainWindow.webContents;
-	const ses = page.session;
-	const resolveProxyUrl = 'www.example.com';
-
-	// Check HTTP Proxy
-	const httpProxy = (async () => {
-		const proxy = await ses.resolveProxy('http://' + resolveProxyUrl);
-		let httpString = '';
-		if (proxy !== 'DIRECT') {
-			// In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
-			// for all other HTTP or direct url:port both uses PROXY
-			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
-				httpString = 'http=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-
-		return httpString;
-	})();
-	// Check HTTPS Proxy
-	const httpsProxy = (async () => {
-		const proxy = await ses.resolveProxy('https://' + resolveProxyUrl);
-		let httpsString = '';
-		if (proxy !== 'DIRECT' || proxy.includes('HTTPS')) {
-			// In case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
-			// for all other HTTP or direct url:port both uses PROXY
-			if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
-				httpsString += 'https=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-
-		return httpsString;
-	})();
-
-	// Check FTP Proxy
-	const ftpProxy = (async () => {
-		const proxy = await ses.resolveProxy('ftp://' + resolveProxyUrl);
-		let ftpString = '';
-		if (proxy !== 'DIRECT') {
-			if (proxy.includes('PROXY')) {
-				ftpString += 'ftp=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-
-		return ftpString;
-	})();
-
-	// Check SOCKS Proxy
-	const socksProxy = (async () => {
-		const proxy = await ses.resolveProxy('socks4://' + resolveProxyUrl);
-		let socksString = '';
-		if (proxy !== 'DIRECT') {
-			if (proxy.includes('SOCKS5')) {
-				socksString += 'socks=' + proxy.split('SOCKS5')[1] + ';';
-			} else if (proxy.includes('SOCKS4')) {
-				socksString += 'socks=' + proxy.split('SOCKS4')[1] + ';';
-			} else if (proxy.includes('PROXY')) {
-				socksString += 'socks=' + proxy.split('PROXY')[1] + ';';
-			}
-		}
-
-		return socksString;
-	})();
-
-	const values = await Promise.all([httpProxy, httpsProxy, ftpProxy, socksProxy]);
-	let proxyString = '';
-	values.forEach(proxy => {
-		proxyString += proxy;
-	});
-	ConfigUtil.setConfigItem('systemProxyRules', proxyString);
-	const useSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-	if (useSystemProxy) {
-		ConfigUtil.setConfigItem('proxyRules', proxyString);
-	}
-}

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

@@ -1,15 +1,12 @@
-import {ipcRenderer} from 'electron';
+import * as backoff from "backoff";
 
-import backoff from 'backoff';
+import {html} from "../../../common/html";
-import {htmlEscape} from 'escape-goat';
+import Logger from "../../../common/logger-util";
-
+import type WebView from "../components/webview";
-import type WebView from '../components/webview';
+import {ipcRenderer} from "../typed-ipc-renderer";
-
-import Logger from './logger-util';
 
 const logger = new Logger({
-	file: 'domain-util.log',
+  file: "domain-util.log",
-	timestamp: true
 });
 
 export default class ReconnectUtil {
@@ -22,23 +19,19 @@ export default class ReconnectUtil {
     this.webview = webview;
     this.url = webview.props.url;
     this.alreadyReloaded = false;
-		this.clearState();
-	}
-
-	clearState(): void {
     this.fibonacciBackoff = backoff.fibonacci({
       initialDelay: 5000,
-			maxDelay: 300000
+      maxDelay: 300_000,
     });
   }
 
   async isOnline(): Promise<boolean> {
-		return ipcRenderer.invoke('is-online', this.url);
+    return ipcRenderer.invoke("is-online", this.url);
   }
 
   pollInternetAndReload(): void {
     this.fibonacciBackoff.backoff();
-		this.fibonacciBackoff.on('ready', async () => {
+    this.fibonacciBackoff.on("ready", async () => {
       if (await this._checkAndReload()) {
         this.fibonacciBackoff.reset();
       } else {
@@ -53,17 +46,20 @@ export default class ReconnectUtil {
     }
 
     if (await this.isOnline()) {
-			ipcRenderer.send('forward-message', 'reload-viewer');
+      ipcRenderer.send("forward-message", "reload-viewer");
-			logger.log('You\'re back online.');
+      logger.log("You're back online.");
       return true;
     }
 
-		logger.log('There is no internet connection, try checking network cables, modem and router.');
+    logger.log(
-		const errorMessageHolder = document.querySelector('#description');
+      "There is no internet connection, try checking network cables, modem and router.",
+    );
+    const errorMessageHolder = document.querySelector("#description");
     if (errorMessageHolder) {
-			errorMessageHolder.innerHTML = htmlEscape`
+      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>`;
+        <div>Verify that it works and then click try again.</div>
+      `.html;
     }
 
     return false;

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

@@ -1,17 +0,0 @@
-import {init} from '@sentry/electron';
-import isDev from 'electron-is-dev';
-
-export const sentryInit = (): void => {
-	if (!isDev) {
-		init({
-			dsn: 'https://628dc2f2864243a08ead72e63f94c7b1@sentry.io/204668',
-			// 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
-		});
-	}
-};
-
-export {captureException} from '@sentry/electron';

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

@@ -1,36 +1,37 @@
-import {ipcRenderer} from 'electron';
+import os from "os";
-import os from 'os';
+
+import {ipcRenderer} from "../typed-ipc-renderer";
 
 export const connectivityERR: string[] = [
-	'ERR_INTERNET_DISCONNECTED',
+  "ERR_INTERNET_DISCONNECTED",
-	'ERR_PROXY_CONNECTION_FAILED',
+  "ERR_PROXY_CONNECTION_FAILED",
-	'ERR_CONNECTION_RESET',
+  "ERR_CONNECTION_RESET",
-	'ERR_NOT_CONNECTED',
+  "ERR_NOT_CONNECTED",
-	'ERR_NAME_NOT_RESOLVED',
+  "ERR_NAME_NOT_RESOLVED",
-	'ERR_NETWORK_CHANGED'
+  "ERR_NETWORK_CHANGED",
 ];
 
-const userAgent = ipcRenderer.sendSync('fetch-user-agent');
+const userAgent = ipcRenderer.sendSync("fetch-user-agent");
 
 export function getOS(): string {
   const platform = os.platform();
-	if (platform === 'darwin') {
+  if (platform === "darwin") {
-		return 'Mac';
+    return "Mac";
   }
 
-	if (platform === 'linux') {
+  if (platform === "linux") {
-		return 'Linux';
+    return "Linux";
   }
 
-	if (platform === 'win32') {
+  if (platform === "win32") {
     if (Number.parseFloat(os.release()) < 6.2) {
-			return 'Windows 7';
+      return "Windows 7";
     }
 
-		return 'Windows 10';
+    return "Windows 10";
   }
 
-	return '';
+  return "";
 }
 
 export function getUserAgent(): string {

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

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

app/renderer/main.html

@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-
   <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <title>Zulip</title>
-        <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
+    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
   </head>
 
   <body>
@@ -20,29 +19,31 @@
             <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>
+            <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>
+            <span id="dnd-tooltip" style="display: none">Do Not Disturb</span>
           </div>
           <div class="action-button" id="reload-action">
             <i class="material-icons md-48">refresh</i>
-                        <span id="reload-tooltip" style="display:none">Reload</span>
+            <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>
+            <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>
+            <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>
+            <span id="setting-tooltip" style="display: none">Settings</span>
           </div>
         </div>
       </div>
@@ -59,6 +60,6 @@
   <script>
     // we don't use src='./js/main' in the script tag because
     // it messes up require module path resolution
-        require('./js/main');
+    require("./js/main");
   </script>
 </html>

app/renderer/network.html

@@ -1,14 +1,19 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
   <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <title>Zulip - Network Troubleshooting</title>
-        <link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
+    <link
+      rel="stylesheet"
+      href="css/network.css"
+      type="text/css"
+      media="screen"
+    />
   </head>
   <body>
     <div id="content">
-            <div id="picture"><img src="img/zulip_network.png"></div>
+      <div id="picture"><img src="img/zulip_network.png" /></div>
       <div id="title">We can't connect to this organization</div>
       <div id="subtitle">This could be because</div>
       <ul id="description">

app/renderer/preference.html

@@ -1,11 +1,16 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
   <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <title>Zulip - Settings</title>
-        <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+    <link
-        <link id="tagify-css" rel="stylesheet" href="data:text/css,">
+      rel="stylesheet"
+      href="css/preference.css"
+      type="text/css"
+      media="screen"
+    />
+    <link id="tagify-css" rel="stylesheet" href="data:text/css," />
   </head>
   <body>
     <div id="content">
@@ -14,7 +19,9 @@
     </div>
   </body>
   <script>
-        document.querySelector('#tagify-css').href = require.resolve('@yaireo/tagify/dist/tagify.css');
+    document.querySelector("#tagify-css").href = require.resolve(
-        require('./js/pages/preference/preference.js');
+      "@yaireo/tagify/dist/tagify.css",
+    );
+    require("./js/pages/preference/preference.js");
   </script>
 </html>

app/resources/messages.ts

@@ -1,38 +0,0 @@
-interface 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
-		\n • You can connect to that URL in a web browser.\
-		\n • If you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings.\
-		\n • It's a Zulip server. (The oldest supported version is 1.6).\
-		\n • The server has a valid certificate. \
-		\n • The SSL is correctly configured for the certificate. Check out the SSL troubleshooting guide -
-		\n https://zulip.readthedocs.io/en/stable/production/ssl-certificates.html`;
-}
-
-export function noOrgsError(domain: string): string {
-	return `${domain} does not have any organizations added.\
-	\nPlease contact your server administrator.`;
-}
-
-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/translations/README.md

@@ -1,6 +1,6 @@
 # How to help translate Zulip Desktop
 
-These are *generated* files (*) that contain translations of the strings in
+These are _generated_ files (\*) that contain translations of the strings in
 the app.
 
 You can help translate Zulip Desktop into your language! We do our
@@ -14,7 +14,7 @@ Within that Transifex project, if you'd like to focus on Zulip Desktop, look
 at `desktop.json`. The other resources there are for the Zulip web/mobile
 app, where translations are also very welcome.
 
-(*) One file is an exception: `en.json` is manually maintained as a
+(\*) One file is an exception: `en.json` is manually maintained as a
 list of (English) messages in the source code, and is used when we upload to
 Transifex a list of strings to be translated. It doesn't contain any
 translations.

appveyor.yml

@@ -2,15 +2,14 @@ version: build{build}
 
 platform:
   - x64
-os: Previous Visual Studio 2015
+
+os: Visual Studio 2015
 
 cache:
   - node_modules -> appveyor.yml
 
 install:
-  - ps: Install-Product node 10 x64
+  - ps: Install-Product node LTS $env:platform
-  - git reset --hard HEAD
-  - npm install npm -g
   - node --version
   - npm --version
   - python --version

build/dmg-background.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="540" height="380">
+  <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="0" stop-color="#50adff" />
+    <stop offset="1" stop-color="#7877fc" />
+  </linearGradient>
+  <rect x="0" y="0" width="540" height="380" fill="url(#g)" />
+  <path d="M473.09 122.97c0 22.69-10.19 42.85-25.72 55.08L296.61 312.69c-2.8 2.4-6.44-1.47-4.42-4.7l55.3-110.72c1.55-3.1-.46-6.91-3.64-6.91H129.36c-33.22 0-60.4-30.32-60.4-67.37 0-37.06 27.18-67.37 60.4-67.37h283.33c33.22-.02 60.4 30.3 60.4 67.35zM129.36 506.05h283.33c33.22 0 60.4-30.32 60.4-67.37 0-37.06-27.18-67.37-60.4-67.37H198.2c-3.18 0-5.19-3.81-3.64-6.91l55.3-110.72c2.02-3.23-1.62-7.1-4.42-4.7L94.68 383.6c-15.53 12.22-25.72 32.39-25.72 55.08 0 37.05 27.18 67.37 60.4 67.37zm522.5-124.15l124.78-179.6v-1.56H663.52v-48.98h190.09v34.21L731.55 363.24v1.56h124.01v48.98h-203.7V381.9zm338.98-230.14V302.6c0 45.09 17.1 68.03 47.43 68.03 31.1 0 48.2-21.77 48.2-68.03V151.76h59.09V298.7c0 80.86-40.82 119.34-109.24 119.34-66.09 0-104.96-36.54-104.96-120.12V151.76h59.48zm244.91 0h59.48v212.25h104.18v49.76h-163.66V151.76zm297 0v262.01h-59.48V151.76h59.48zm90.18 3.5c18.27-3.11 43.93-5.44 80.08-5.44 36.54 0 62.59 7 80.08 20.99 16.72 13.22 27.99 34.99 27.99 60.64 0 25.66-8.55 47.43-24.1 62.2-20.21 19.05-50.15 27.6-85.13 27.6-7.77 0-14.77-.39-20.21-1.17v93.69h-58.7V155.26zm58.7 118.96c5.05 1.17 11.27 1.55 19.83 1.55 31.49 0 50.92-15.94 50.92-42.76 0-24.1-16.72-38.49-46.26-38.49-12.05 0-20.21 1.17-24.49 2.33v77.37z"
+  fill="#fff"
+  transform="translate(270, 70) scale(.12) translate(-940.02, -280.835)" />
+  <rect x="50" y="140" width="160" height="160" rx="24" fill="#fff"
+  opacity=".5" />
+  <text x="270" y="244" font-size="64" font-family="System Font"
+  text-anchor="middle" fill="#fff">→</text>
+  <rect x="330" y="140" width="160" height="160" rx="24"
+  fill="#fff" opacity=".5" />
+</svg>

development.md

@@ -7,16 +7,16 @@ in order to contribute to developing it.
 
 To build and run the app from source, you'll need the following:
 
-* [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+- [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-  * Use our [Git Guide](https://zulip.readthedocs.io/en/latest/git/setup.html) to get started with Git and GitHub.
+  - Use our [Git Guide](https://zulip.readthedocs.io/en/latest/git/setup.html) to get started with Git and GitHub.
-* [Node.js](https://nodejs.org) >= v10.16.3
+- [Node.js](https://nodejs.org) >= v10.16.3
-  * [NPM](https://www.npmjs.com/get-npm) and
+  - [NPM](https://www.npmjs.com/get-npm) and
     [node-gyp](https://github.com/nodejs/node-gyp#installation),
     if they don't come bundled with your Node.js installation
-* [Python](https://www.python.org/downloads/release/python-2713/)
+- [Python](https://www.python.org/downloads/release/python-2713/)
   (v2.7.x recommended)
-* A C++ compiler compatible with C++11
+- A C++ compiler compatible with C++11
-* Development headers for the libXext, libXtst, and libxkbfile libraries, which can be installed using apt on Ubuntu using
+- Development headers for the libXext, libXtst, and libxkbfile libraries, which can be installed using apt on Ubuntu using
   ```sh
   $ sudo apt install libxext-dev libxtst-dev libxkbfile-dev libgconf-2-4
   ```
@@ -37,7 +37,7 @@ $ sudo apt install git nodejs python build-essential snapcraft libxext-dev libxt
 ### MacOS
 
 On a system running MacOS, you can refer to [official nodejs docs][node-mac] to
-install nodejs. To ensure Node.js has been installed, run  ```node -v``` in terminal to know your node version.
+install nodejs. To ensure Node.js has been installed, run `node -v` in terminal to know your node version.
 
 [node-mac]: https://nodejs.org/en/download/package-manager/#macos
 
@@ -45,7 +45,7 @@ If [NPM](https://www.npmjs.com/get-npm) and [node-gyp](https://github.com/nodejs
 
 ### Windows
 
-- Download Node.js for Windows and install it. You can refer to the official docs [here][node-windows] to do so. To ensure Node.js has been installed, run  ```node -v``` in Git Bash to know your node version.
+- Download Node.js for Windows and install it. You can refer to the official docs [here][node-windows] to do so. To ensure Node.js has been installed, run `node -v` in Git Bash to know your node version.
 
 [node-windows]: https://nodejs.org/en/download/package-manager/#windows
 
@@ -57,27 +57,26 @@ If [NPM](https://www.npmjs.com/get-npm) and [node-gyp](https://github.com/nodejs
 ## Download, build, and run
 
 Clone the source locally:
+
 ```sh
 $ git clone https://github.com/zulip/zulip-desktop
 $ cd zulip-desktop
 ```
 
 Install project dependencies:
+
 ```sh
 $ npm install
 ```
 
 Start the app:
+
 ```sh
 $ npm start
 ```
 
-Start and watch changes:
-```sh
-$ npm run dev
-```
-
 Run tests:
+
 ```sh
 $ npm test
 ```
@@ -89,23 +88,20 @@ you find in the [issue tracker](https://github.com/zulip/zulip-desktop/issues).
 
 You can read more about making contributions in our [Contributing Guide](./CONTRIBUTING.md).
 
-## Troubleshooting
-
-If you have any problems running the app, see the [most common
-issues](./troubleshooting.md).
-
 ## Making a release
 
 To package the app into an installer:
+
 ```
 npm run dist
 ```
 
 This command will produce distributable packages or installers for the
 operating system you're running on:
-* on Windows, a .7z nsis file and a .exe WebSetup file 
+
-* on macOS, a `.dmg` file
+- on Windows, a .7z nsis file and a .exe WebSetup file
-* on Linux, a plain `.zip` file as well as a `.deb` file, `.snap` file and an
+- on macOS, a `.dmg` file
+- on Linux, a plain `.zip` file as well as a `.deb` file, `.snap` file and an
   `AppImage` file.
 
 To generate all three types of files, you will need all three operating

docs/Home.md

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