xo: Fix unicorn/prefer-event-target.

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}]
+[{*.cjs,*.css,*.html,*.js,*.json,*.ts}]
 indent_style = space
 indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false

.gitattributes

@@ -1,7 +1,5 @@
 * text=auto eol=lf
 
-package-lock.json binary
-app/package-lock.json binary
 *.gif binary
 *.jpg binary
 *.jpeg binary

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE.md

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/custom.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,16 +1,49 @@
----
-<!--
-Remove the fields that are not appropriate
-Please include:
+<!-- Describe your pull request here.-->
+
+Fixes: <!-- Issue link, or clear description.-->
+
+<!-- If the PR makes UI changes, always include one or more still screenshots to demonstrate your changes. If it seems helpful, add a screen capture of the new functionality as well.
+
+Tooling tips: https://zulip.readthedocs.io/en/latest/tutorials/screenshot-and-gif-software.html
 -->
 
-**What's this PR do?**
+**Screenshots and screen captures:**
 
-**Any background context you want to provide?**
+**Platforms this PR was tested on:**
 
-**Screenshots?**
+- [ ] Windows
+- [ ] macOS
+- [ ] Linux (specify distro)
 
-**You have tested this PR on:**
-  - [ ] Windows
-  - [ ] Linux/Ubuntu
-  - [ ] macOS
+<details>
+<summary>Self-review checklist</summary>
+
+<!-- Prior to submitting a PR, follow our step-by-step guide to review your own code:
+https://zulip.readthedocs.io/en/latest/contributing/code-reviewing.html#how-to-review-code -->
+
+<!-- Once you create the PR, check off all the steps below that you have completed.
+If any of these steps are not relevant or you have not completed, leave them unchecked.-->
+
+- [ ] [Self-reviewed](https://zulip.readthedocs.io/en/latest/contributing/code-reviewing.html#how-to-review-code) the changes for clarity and maintainability
+      (variable names, code reuse, readability, etc.).
+
+Communicate decisions, questions, and potential concerns.
+
+- [ ] Explains differences from previous plans (e.g., issue description).
+- [ ] Highlights technical choices and bugs encountered.
+- [ ] Calls out remaining decisions and concerns.
+- [ ] Automated tests verify logic where appropriate.
+
+Individual commits are ready for review (see [commit discipline](https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html)).
+
+- [ ] Each commit is a coherent idea.
+- [ ] Commit message(s) explain reasoning and motivation for changes.
+
+Completed manual review and testing of the following:
+
+- [ ] Visual appearance of the changes.
+- [ ] Responsiveness and internationalization.
+- [ ] Strings and tooltips.
+- [ ] End-to-end functionality of buttons, interactions and flows.
+- [ ] Corner cases, error conditions, and easily imagined bugs.
+</details>

.github/workflows/node.js.yml

@@ -0,0 +1,18 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -1,11 +1,12 @@
-# Dependency directories
-node_modules/
+# Dependency directory
+/node_modules/
 
 # npm cache directory
 .npm
 
 # Compiled binary build directory
-dist/
+/dist/
+/dist-electron/
 
 #snap generated files
 snap/parts
@@ -36,6 +37,3 @@ config.gypi
 # tests/package.json
 
 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js

.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,9 +12,8 @@
   "style-disabled": false,
   "inline-style-disabled": false,
   "inline-script-disabled": false,
-  "space-tab-mixed-disabled": "space4",
   "id-class-ad-disabled": false,
   "href-abs-or-rel": false,
   "attr-unsafe-chars": true,
   "head-script-disabled": true
-}
+}

.mailmap

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

.node-version

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

.npmrc

@@ -0,0 +1 @@
+node-options=--experimental-strip-types

.prettierignore

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

.stylelintrc

@@ -1,67 +1,12 @@
 {
-    "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",
-    }
-}
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "color-named": "never",
+    "color-no-hex": true,
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {"ignoreFontFamilies": ["Material Icons"]}
+    ],
+    "selector-type-no-unknown": [true, {"ignoreTypes": ["webview"]}]
+  }
+}

.travis.yml

@@ -1,37 +0,0 @@
-sudo: required
-dist: trusty
-
-os:
-- osx
-- linux
-
-addons:
-  apt:
-    packages:
-    - build-essential
-    - libxext-dev
-    - libxtst-dev
-    - libxkbfile-dev
-
-language: node_js
-node_js:
-- '8'
-
-before_install:
-  - ./scripts/travis-xvfb.sh
-  - npm install -g gulp
-  - npm install
-
-cache:
-  directories:
-  - node_modules
-  - app/node_modules
-
-script:
-- npm run travis
-notifications:
-  webhooks:
-    urls:
-      - https://zulip.org/zulipbot/travis
-    on_success: always
-    on_failure: always

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 web app 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 Zulip-Desktop version on which you tested.
-   * The relevant issue number, if applicable.
+   - The operating system on which you tested.
+   - The Zulip-Desktop version on which you tested.
+   - The relevant issue number, if applicable.

README.md

@@ -1,29 +1,33 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.org/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.org/zulip/zulip-desktop)
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=master&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
+
+[![Build Status](https://github.com/zulip/zulip-desktop/actions/workflows/node.js.yml/badge.svg)](https://github.com/zulip/zulip-desktop/actions/workflows/node.js.yml?query=branch%3Amain)
+[![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)
 
 Desktop client for Zulip. Available for Mac, Linux, and Windows.
 
-<img src="http://i.imgur.com/ChzTq4F.png"/>
+![screenshot](https://i.imgur.com/s1o6TRA.png)
+![screenshot](https://i.imgur.com/vekKnW4.png)
 
 # Download
-Please see the [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
+
+Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
 
 # Features
-* Sign in to multiple organizations
-* Desktop notifications with inline reply
-* Tray/dock integration
-* Multi-language spell checker
-* Automatic updates
+
+- Sign in to multiple organizations
+- Desktop notifications with inline reply
+- Tray/dock integration
+- Multi-language spell checker
+- Automatic updates
 
 # Reporting issues
 
-This desktop client shares most of its code with the Zulip webapp.
+This desktop client shares most of its code with the Zulip web app.
 Issues in an individual organization's Zulip window should be reported
-in the [Zulip server and webapp
-project](https://github.com/zulip/zulip/issues/new).  Other
+in the [Zulip server and web app
+project](https://github.com/zulip/zulip/issues/new). Other
 issues in the desktop app and its settings should be reported [in this
 project](https://github.com/zulip/zulip-desktop/issues/new).
 
@@ -33,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,45 @@
+import {z} from "zod";
+
+export const dndSettingsSchemata = {
+  showNotification: z.boolean(),
+  silent: z.boolean(),
+  flashTaskbarOnMessage: z.boolean(),
+};
+
+export const configSchemata = {
+  ...dndSettingsSchemata,
+  appLanguage: z.string().nullable(),
+  autoHideMenubar: z.boolean(),
+  autoUpdate: z.boolean(),
+  badgeOption: z.boolean(),
+  betaUpdate: z.boolean(),
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  customCSS: z.string().or(z.literal(false)).nullable(),
+  dnd: z.boolean(),
+  dndPreviousSettings: z.object(dndSettingsSchemata).partial(),
+  dockBouncing: z.boolean(),
+  downloadsPath: z.string(),
+  enableSpellchecker: z.boolean(),
+  errorReporting: z.boolean(),
+  lastActiveTab: z.number(),
+  promptDownload: z.boolean(),
+  proxyBypass: z.string(),
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  proxyPAC: z.string(),
+  proxyRules: z.string(),
+  quitOnClose: z.boolean(),
+  showSidebar: z.boolean(),
+  spellcheckerLanguages: z.string().array().nullable(),
+  startAtLogin: z.boolean(),
+  startMinimized: z.boolean(),
+  trayIcon: z.boolean(),
+  useManualProxy: z.boolean(),
+  useProxy: z.boolean(),
+  useSystemProxy: z.boolean(),
+};
+export type ConfigSchemata = typeof configSchemata;
+
+export const enterpriseConfigSchemata = {
+  ...configSchemata,
+  presetOrganizations: z.string().array(),
+};

app/common/config-util.ts

@@ -0,0 +1,106 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import * as Sentry from "@sentry/core";
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors.js";
+import type {z} from "zod";
+import {app, dialog} from "zulip:remote";
+
+import {type ConfigSchemata, configSchemata} from "./config-schemata.ts";
+import * as EnterpriseUtil from "./enterprise-util.ts";
+import Logger from "./logger-util.ts";
+
+export type Config = {
+  [Key in keyof ConfigSchemata]: z.output<ConfigSchemata[Key]>;
+};
+
+const logger = new Logger({
+  file: "config-util.log",
+});
+
+let database: JsonDB;
+
+reloadDatabase();
+
+export function getConfigItem<Key extends keyof Config>(
+  key: Key,
+  defaultValue: Config[Key],
+): z.output<ConfigSchemata[Key]> {
+  try {
+    database.reload();
+  } catch (error: unknown) {
+    logger.error("Error while reloading settings.json: ");
+    logger.error(error);
+  }
+
+  try {
+    const typedSchemata: {
+      [Key in keyof Config]: z.ZodType<
+        z.output<ConfigSchemata[Key]>,
+        z.input<ConfigSchemata[Key]>
+      >;
+    } = configSchemata; // https://github.com/colinhacks/zod/issues/5154
+    return typedSchemata[key].parse(database.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 {
+    database.reload();
+  } catch (error: unknown) {
+    logger.error("Error while reloading settings.json: ");
+    logger.error(error);
+  }
+
+  return database.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);
+  database.push(`/${key}`, value, true);
+  database.save();
+}
+
+export function removeConfigItem(key: string): void {
+  database.delete(`/${key}`);
+  database.save();
+}
+
+function reloadDatabase(): void {
+  const settingsJsonPath = path.join(
+    app.getPath("userData"),
+    "/config/settings.json",
+  );
+  try {
+    const file = fs.readFileSync(settingsJsonPath, "utf8");
+    JSON.parse(file);
+  } catch (error: unknown) {
+    if (fs.existsSync(settingsJsonPath)) {
+      fs.unlinkSync(settingsJsonPath);
+      dialog.showErrorBox(
+        "Error saving settings",
+        "We encountered an error while saving the settings.",
+      );
+      logger.error("Error while JSON parsing settings.json: ");
+      logger.error(error);
+      Sentry.captureException(error);
+    }
+  }
+
+  database = new JsonDB(settingsJsonPath, true, true);
+}

app/common/default-util.ts

@@ -0,0 +1,61 @@
+import fs from "node:fs";
+
+import {app} from "zulip:remote";
+
+let setupCompleted = false;
+
+const zulipDirectory = app.getPath("userData");
+const logDirectory = `${zulipDirectory}/Logs/`;
+const configDirectory = `${zulipDirectory}/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(zulipDirectory)) {
+      fs.mkdirSync(zulipDirectory);
+    }
+
+    if (!fs.existsSync(logDirectory)) {
+      fs.mkdirSync(logDirectory);
+    }
+
+    // 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(configDirectory)) {
+      fs.mkdirSync(configDirectory);
+      const domainJson = `${zulipDirectory}/domain.json`;
+      const settingsJson = `${zulipDirectory}/settings.json`;
+      const updatesJson = `${zulipDirectory}/updates.json`;
+      const windowStateJson = `${zulipDirectory}/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, configDirectory + data.fileName);
+          fs.unlinkSync(data.path);
+        }
+      }
+
+      // `window-state.json` is only deleted not moved, as the electron-window-state
+      // package will recreate the file in the config folder.
+      if (fs.existsSync(windowStateJson)) {
+        fs.unlinkSync(windowStateJson);
+      }
+    }
+
+    setupCompleted = true;
+  }
+};

app/common/dnd-util.ts

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

app/common/enterprise-util.ts

@@ -0,0 +1,98 @@
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+import {z} from "zod";
+import {dialog} from "zulip:remote";
+
+import {enterpriseConfigSchemata} from "./config-schemata.ts";
+import Logger from "./logger-util.ts";
+
+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;
+
+reloadDatabase();
+
+function reloadDatabase(): void {
+  let enterpriseFile = "/etc/zulip-desktop-config/global_config.json";
+  if (process.platform === "win32") {
+    enterpriseFile = String.raw`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) {
+      dialog.showErrorBox(
+        "Error loading global_config",
+        "We encountered an error while reading global_config.json, please make sure the file contains valid JSON.",
+      );
+      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] {
+  reloadDatabase();
+  if (!configFile) {
+    return defaultValue;
+  }
+
+  const value = enterpriseSettings[key];
+  return value === undefined ? defaultValue : (value as EnterpriseConfig[Key]);
+}
+
+export function configItemExists(key: keyof EnterpriseConfig): boolean {
+  reloadDatabase();
+  if (!configFile) {
+    return false;
+  }
+
+  return enterpriseSettings[key] !== undefined;
+}
+
+export function isPresetOrg(url: string): boolean {
+  if (!configFile || !configItemExists("presetOrganizations")) {
+    return false;
+  }
+
+  const presetOrgs = enterpriseSettings.presetOrganizations;
+  if (!Array.isArray(presetOrgs)) {
+    throw new TypeError("Expected array for presetOrgs");
+  }
+
+  for (const org of presetOrgs) {
+    if (url.includes(org)) {
+      return true;
+    }
+  }
+
+  return false;
+}

app/common/html.ts

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

app/common/link-util.ts

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

app/common/logger-util.ts

@@ -0,0 +1,90 @@
+import {Console} from "node:console"; // eslint-disable-line n/prefer-global/console
+import fs from "node:fs";
+import os from "node:os";
+import process from "node:process";
+
+import {app} from "zulip:remote";
+
+import {initSetUp} from "./default-util.ts";
+
+type LoggerOptions = {
+  file?: string;
+};
+
+initSetUp();
+
+const logDirectory = `${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 = `${logDirectory}/${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, ...arguments_: unknown[]): void {
+    arguments_.unshift(this.getTimestamp() + " |\t");
+    arguments_.unshift(type.toUpperCase() + " |");
+    this.nodeConsole[type](...arguments_);
+    console[type](...arguments_);
+  }
+
+  log(...arguments_: unknown[]): void {
+    this._log("log", ...arguments_);
+  }
+
+  debug(...arguments_: unknown[]): void {
+    this._log("debug", ...arguments_);
+  }
+
+  info(...arguments_: unknown[]): void {
+    this._log("info", ...arguments_);
+  }
+
+  warn(...arguments_: unknown[]): void {
+    this._log("warn", ...arguments_);
+  }
+
+  error(...arguments_: unknown[]): void {
+    this._log("error", ...arguments_);
+  }
+
+  getTimestamp(): string {
+    const date = new Date();
+    const timestamp =
+      `${date.getMonth()}/${date.getDate()} ` +
+      `${date.getMinutes()}:${date.getSeconds()}`;
+    return timestamp;
+  }
+
+  async trimLog(file: string): Promise<void> {
+    const data = await fs.promises.readFile(file, "utf8");
+
+    const maxLogFileLines = 500;
+    const logs = data.split(os.EOL);
+    const logLength = logs.length - 1;
+
+    // Keep bottom maxLogFileLines of each log instance
+    if (logLength > maxLogFileLines) {
+      const trimmedLogs = logs.slice(logLength - maxLogFileLines);
+      const toWrite = trimmedLogs.join(os.EOL);
+      await fs.promises.writeFile(file, toWrite);
+    }
+  }
+}

app/common/messages.ts

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

app/common/paths.ts

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

app/common/translation-util.ts

@@ -0,0 +1,16 @@
+import path from "node:path";
+
+import i18n from "i18n";
+
+import * as ConfigUtil from "./config-util.ts";
+import {publicPath} from "./paths.ts";
+
+i18n.configure({
+  directory: path.join(publicPath, "translations/"),
+  updateFiles: false,
+});
+
+/* Fetches the current appLocale from settings.json */
+i18n.setLocale(ConfigUtil.getConfigItem("appLanguage", "en") ?? "en");
+
+export {__, __mf} from "i18n";

app/common/typed-ipc.ts

@@ -0,0 +1,84 @@
+import type {DndSettings} from "./dnd-util.ts";
+import type {MenuProperties, ServerConfig} from "./types.ts";
+
+export type MainMessage = {
+  "clear-app-settings": () => void;
+  "configure-spell-checker": () => void;
+  "fetch-user-agent": () => string;
+  "focus-app": () => void;
+  "focus-this-webview": () => void;
+  "new-clipboard-key": () => {key: Uint8Array; sig: Uint8Array};
+  "permission-callback": (permissionCallbackId: number, grant: boolean) => void;
+  "quit-app": () => void;
+  "realm-icon-changed": (serverURL: string, iconURL: string) => void;
+  "realm-name-changed": (serverURL: string, realmName: string) => void;
+  "reload-full-app": () => void;
+  "save-last-tab": (index: number) => void;
+  "switch-server-tab": (index: number) => void;
+  "toggle-app": () => void;
+  "toggle-badge-option": (newValue: boolean) => void;
+  "toggle-menubar": (showMenubar: boolean) => void;
+  toggleAutoLauncher: (AutoLaunchValue: boolean) => void;
+  "unread-count": (unreadCount: number) => void;
+  "update-badge": (messageCount: number) => void;
+  "update-menu": (properties: MenuProperties) => void;
+  "update-taskbar-icon": (data: string, text: string) => void;
+};
+
+export type MainCall = {
+  "get-server-settings": (domain: string) => ServerConfig;
+  "is-online": (url: string) => boolean;
+  "poll-clipboard": (key: Uint8Array, sig: Uint8Array) => string | undefined;
+  "save-server-icon": (iconURL: string) => string | null;
+};
+
+export type RendererMessage = {
+  back: () => void;
+  "copy-zulip-url": () => void;
+  destroytray: () => void;
+  "enter-fullscreen": () => void;
+  focus: () => void;
+  "focus-webview-with-id": (webviewId: number) => void;
+  forward: () => void;
+  "hard-reload": () => void;
+  "leave-fullscreen": () => void;
+  "log-out": () => void;
+  logout: () => void;
+  "new-server": () => void;
+  "open-about": () => void;
+  "open-help": () => void;
+  "open-network-settings": () => void;
+  "open-org-tab": () => void;
+  "open-settings": () => void;
+  "permission-request": (
+    options: {webContentsId: number | null; origin: string; permission: string},
+    rendererCallbackId: number,
+  ) => void;
+  "play-ding-sound": () => void;
+  "reload-current-viewer": () => void;
+  "reload-proxy": (showAlert: boolean) => void;
+  "reload-viewer": () => void;
+  "render-taskbar-icon": (messageCount: number) => void;
+  "set-active": () => void;
+  "set-idle": () => void;
+  "show-keyboard-shortcuts": () => void;
+  "show-notification-settings": () => void;
+  "switch-server-tab": (index: number) => void;
+  "tab-devtools": () => void;
+  "toggle-autohide-menubar": (
+    autoHideMenubar: boolean,
+    updateMenu: boolean,
+  ) => void;
+  "toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
+  "toggle-sidebar": (show: boolean) => void;
+  "toggle-silent": (state: boolean) => void;
+  "toggle-tray": (state: boolean) => void;
+  toggletray: () => void;
+  tray: (argument: 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,30 @@
+export type MenuProperties = {
+  tabs: TabData[];
+  activeTabIndex?: number;
+  enableMenu?: boolean;
+};
+
+export type NavigationItem =
+  | "General"
+  | "Network"
+  | "AddServer"
+  | "Organizations"
+  | "Shortcuts";
+
+export type ServerConfig = {
+  url: string;
+  alias: string;
+  icon: string;
+  zulipVersion: string;
+  zulipFeatureLevel: number;
+};
+
+export type TabRole = "server" | "function";
+export type TabPage = "Settings" | "About";
+
+export type TabData = {
+  role: TabRole;
+  page?: TabPage;
+  label: string;
+  index: number;
+};

app/main/autoupdater.ts

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

app/main/badge-settings.ts

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

app/main/handle-external-link.ts

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

app/main/index.ts

@@ -1,402 +1,486 @@
-'use strict';
-import { sentryInit } from '../renderer/js/utils/sentry-util';
-import { appUpdater } from './autoupdater';
-import { setAutoLaunch } from './startup';
+import {clipboard} from "electron/common";
+import {
+  BrowserWindow,
+  type IpcMainEvent,
+  type WebContents,
+  app,
+  dialog,
+  powerMonitor,
+  session,
+  webContents,
+} from "electron/main";
+import {Buffer} from "node:buffer";
+import crypto from "node:crypto";
+import path from "node:path";
+import process from "node:process";
 
-import windowStateKeeper = require('electron-window-state');
-import path = require('path');
-import fs = require('fs');
-import isDev = require('electron-is-dev');
-import electron = require('electron');
-const { app, ipcMain, session } = electron;
+import * as remoteMain from "@electron/remote/main";
+import windowStateKeeper from "electron-window-state";
 
-import AppMenu = require('./menu');
-import BadgeSettings = require('../renderer/js/pages/preference/badge-settings');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
+import * as ConfigUtil from "../common/config-util.ts";
+import {bundlePath, bundleUrl, publicPath} from "../common/paths.ts";
+import * as t from "../common/translation-util.ts";
+import type {RendererMessage} from "../common/typed-ipc.ts";
+import type {MenuProperties} from "../common/types.ts";
 
-interface PatchedGlobal extends NodeJS.Global {
-	mainWindowState: windowStateKeeper.State;
-}
+import {appUpdater, shouldQuitForUpdate} from "./autoupdater.ts";
+import * as BadgeSettings from "./badge-settings.ts";
+import handleExternalLink from "./handle-external-link.ts";
+import * as AppMenu from "./menu.ts";
+import {_getServerSettings, _isOnline, _saveServerIcon} from "./request.ts";
+import {sentryInit} from "./sentry.ts";
+import {setAutoLaunch} from "./startup.ts";
+import {ipcMain, send} from "./typed-ipc-main.ts";
 
-const globalPatched = global as PatchedGlobal;
+import "gatemaker/electron-setup.js"; // eslint-disable-line import-x/no-unassigned-import
 
-// Adds debug features like hotkeys for triggering dev tools and reload
-// in development mode
-if (isDev) {
-	require('electron-debug')();
-}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const {GDK_BACKEND} = process.env;
+
+// Initialize sentry for main process
+sentryInit();
+
+let mainWindowState: windowStateKeeper.State;
 
 // Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
+let mainWindow: BrowserWindow;
 let badgeCount: number;
 
 let isQuitting = false;
 
-// Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
+// Load this file in main window
+const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
 
-const singleInstanceLock = app.requestSingleInstanceLock();
-if (singleInstanceLock) {
-	app.on('second-instance', () => {
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) {
-				mainWindow.restore();
-			}
+const permissionCallbacks = new Map<number, (grant: boolean) => void>();
+let nextPermissionCallbackId = 0;
 
-			mainWindow.show();
-		}
-	});
-} else {
-	app.quit();
-}
+const appIcon = path.join(publicPath, "resources/Icon");
 
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
+const iconPath = (): string =>
+  appIcon + (process.platform === "win32" ? ".ico" : ".png");
 
-const iconPath = (): string => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
+// Toggle the app window
+const toggleApp = (): void => {
+  if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+    mainWindow.show();
+  } else {
+    mainWindow.hide();
+  }
 };
 
-function createMainWindow(): Electron.BrowserWindow {
-	// Load the previous state with fallback to defaults
-	const mainWindowState: windowStateKeeper.State = windowStateKeeper({
-		defaultWidth: 1100,
-		defaultHeight: 720,
-		path: `${app.getPath('userData')}/config`
-	});
+function createMainWindow(): BrowserWindow {
+  // Load the previous state with fallback to defaults
+  mainWindowState = windowStateKeeper({
+    defaultWidth: 1100,
+    defaultHeight: 720,
+    path: `${app.getPath("userData")}/config`,
+  });
 
-	// Let's keep the window position global so that we can access it in other process
-	globalPatched.mainWindowState = mainWindowState;
+  const win = new BrowserWindow({
+    // This settings needs to be saved in config
+    title: "Zulip",
+    icon: iconPath(),
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    minWidth: 500,
+    minHeight: 400,
+    webPreferences: {
+      preload: path.join(bundlePath, "renderer.cjs"),
+      sandbox: false,
+      webviewTag: true,
+    },
+    show: false,
+  });
+  remoteMain.enable(win.webContents);
 
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		icon: iconPath(),
-		x: mainWindowState.x,
-		y: mainWindowState.y,
-		width: mainWindowState.width,
-		height: mainWindowState.height,
-		minWidth: 300,
-		minHeight: 400,
-		webPreferences: {
-			plugins: true,
-			nodeIntegration: true,
-			partition: 'persist:webviewsession'
-		},
-		show: false
-	});
+  win.on("focus", () => {
+    send(win.webContents, "focus");
+  });
 
-	win.on('focus', () => {
-		win.webContents.send('focus');
-	});
+  (async () => win.loadURL(mainUrl))();
 
-	win.loadURL(mainURL);
+  // Keep the app running in background on close event
+  win.on("close", (event) => {
+    if (ConfigUtil.getConfigItem("quitOnClose", false)) {
+      app.quit();
+    }
 
-	// Keep the app running in background on close event
-	win.on('close', e => {
-		if (ConfigUtil.getConfigItem("quitOnClose")) {
-			app.quit();
-		}
-		if (!isQuitting) {
-			e.preventDefault();
+    if (!isQuitting && !shouldQuitForUpdate()) {
+      event.preventDefault();
 
-			if (process.platform === 'darwin') {
-				app.hide();
-			} else {
-				win.hide();
-			}
-		}
-	});
+      if (process.platform === "darwin") {
+        if (win.isFullScreen()) {
+          win.setFullScreen(false);
+          win.once("leave-full-screen", () => {
+            app.hide();
+          });
+        } else {
+          app.hide();
+        }
+      } else {
+        win.hide();
+      }
+    }
+  });
 
-	win.setTitle('Zulip');
+  win.setTitle("Zulip");
 
-	win.on('enter-full-screen', () => {
-		win.webContents.send('enter-fullscreen');
-	});
+  win.on("enter-full-screen", () => {
+    send(win.webContents, "enter-fullscreen");
+  });
 
-	win.on('leave-full-screen', () => {
-		win.webContents.send('leave-fullscreen');
-	});
+  win.on("leave-full-screen", () => {
+    send(win.webContents, "leave-fullscreen");
+  });
 
-	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', e => {
-		if (e) {
-			win.webContents.send('destroytray');
-		}
-	});
+  //  To destroy tray icon when navigate to a new URL
+  win.webContents.on("will-navigate", (event) => {
+    if (event) {
+      send(win.webContents, "destroytray");
+    }
+  });
 
-	// Let us register listeners on the window, so we can update the state
-	// automatically (the listeners will be removed when the window is closed)
-	// and restore the maximized or full screen state
-	mainWindowState.manage(win);
+  // Let us register listeners on the window, so we can update the state
+  // automatically (the listeners will be removed when the window is closed)
+  // and restore the maximized or full screen state
+  mainWindowState.manage(win);
 
-	return win;
+  return win;
 }
 
-// Decrease load on GPU (experimental)
-app.disableHardwareAcceleration();
+(async () => {
+  if (!app.requestSingleInstanceLock()) {
+    app.quit();
+    return;
+  }
 
-// Temporary fix for Electron render colors differently
-// More info here - https://github.com/electron/electron/issues/10732
-app.commandLine.appendSwitch('force-color-profile', 'srgb');
+  await app.whenReady();
 
-// eslint-disable-next-line max-params
-app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
-	event.preventDefault();
-	callback(true);
-});
+  if (process.env.GDK_BACKEND !== GDK_BACKEND) {
+    console.warn(
+      "Reverting GDK_BACKEND to work around https://github.com/electron/electron/issues/28436",
+    );
+    if (GDK_BACKEND === undefined) {
+      delete process.env.GDK_BACKEND;
+    } else {
+      process.env.GDK_BACKEND = GDK_BACKEND;
+    }
+  }
 
-app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-	}
-});
+  // Used for notifications on Windows
+  app.setAppUserModelId("org.zulip.zulip-electron");
 
-app.on('ready', () => {
-	AppMenu.setMenu({
-		tabs: []
-	});
-	mainWindow = createMainWindow();
+  remoteMain.initialize();
 
-	// Auto-hide menu bar on Windows + Linux
-	if (process.platform !== 'darwin') {
-		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.setAutoHideMenuBar(shouldHideMenu);
-		mainWindow.setMenuBarVisibility(!shouldHideMenu);
-	}
+  app.on("second-instance", () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) {
+        mainWindow.restore();
+      }
 
-	// Initialize sentry for main process
-	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
-	if (errorReporting) {
-		sentryInit();
-	}
+      mainWindow.show();
+    }
+  });
 
-	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+  ipcMain.on(
+    "permission-callback",
+    (event, permissionCallbackId: number, grant: boolean) => {
+      permissionCallbacks.get(permissionCallbackId)?.(grant);
+      permissionCallbacks.delete(permissionCallbackId);
+    },
+  );
 
-	if (isSystemProxy) {
-		ProxyUtil.resolveSystemProxy(mainWindow);
-	}
+  // This event is only available on macOS. Triggers when you click on the dock icon.
+  app.on("activate", () => {
+    mainWindow.show();
+  });
 
-	const page = mainWindow.webContents;
+  app.on("web-contents-created", (_event, contents: WebContents) => {
+    contents.setWindowOpenHandler((details) => {
+      handleExternalLink(contents, details, page);
+      return {action: "deny"};
+    });
+  });
 
-	page.on('dom-ready', () => {
-		if (ConfigUtil.getConfigItem('startMinimized')) {
-			mainWindow.hide();
-		} else {
-			mainWindow.show();
-		}
-		if (!ConfigUtil.isConfigItemExists('userAgent')) {
-			const userAgent = session.fromPartition('webview:persistsession').getUserAgent();
-			ConfigUtil.setConfigItem('userAgent', userAgent);
-		}
-	});
+  const ses = session.fromPartition("persist:webviewsession");
+  ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
 
-	page.once('did-frame-finish-load', () => {
-		// Initiate auto-updates on MacOS and Windows
-		if (ConfigUtil.getConfigItem('autoUpdate')) {
-			appUpdater();
-		}
-	});
+  function configureSpellChecker() {
+    const enable = ConfigUtil.getConfigItem("enableSpellchecker", true);
+    if (enable && process.platform !== "darwin") {
+      ses.setSpellCheckerLanguages(
+        ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
+      );
+    }
 
-	// Temporarily remove this event
-	// electron.powerMonitor.on('resume', () => {
-	// 	mainWindow.reload();
-	// 	page.send('destroytray');
-	// });
+    ses.setSpellCheckerEnabled(enable);
+  }
 
-	ipcMain.on('focus-app', () => {
-		mainWindow.show();
-	});
+  configureSpellChecker();
+  ipcMain.on("configure-spell-checker", configureSpellChecker);
 
-	ipcMain.on('quit-app', () => {
-		app.quit();
-	});
+  const clipboardSigKey = crypto.randomBytes(32);
 
-	// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-	// ipcMain.on('pdf-view', (event, url) => {
-	// 	// Paddings for pdfWindow so that it fits into the main browserWindow
-	// 	const paddingWidth = 55;
-	// 	const paddingHeight = 22;
+  ipcMain.on("new-clipboard-key", (event) => {
+    const key = crypto.randomBytes(32);
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    event.returnValue = {key, sig: hmac.digest()};
+  });
 
-	// 	// Get the config of main browserWindow
-	// 	const mainWindowState = global.mainWindowState;
+  ipcMain.handle("poll-clipboard", (event, key, sig) => {
+    // Check that the key was generated here.
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    if (!crypto.timingSafeEqual(sig, hmac.digest())) return;
 
-	// 	// Window to view the pdf file
-	// 	const pdfWindow = new electron.BrowserWindow({
-	// 		x: mainWindowState.x + paddingWidth,
-	// 		y: mainWindowState.y + paddingHeight,
-	// 		width: mainWindowState.width - paddingWidth,
-	// 		height: mainWindowState.height - paddingHeight,
-	// 		webPreferences: {
-	// 			plugins: true,
-	// 			partition: 'persist:webviewsession'
-	// 		}
-	// 	});
-	// 	pdfWindow.loadURL(url);
+    try {
+      // Check that the data on the clipboard was encrypted to the key.
+      const data = Buffer.from(clipboard.readText(), "hex");
+      const iv = data.subarray(0, 12);
+      const ciphertext = data.subarray(12, -16);
+      const authTag = data.subarray(-16);
+      const decipher = crypto.createDecipheriv("aes-256-gcm", key, iv, {
+        authTagLength: 16,
+      });
+      decipher.setAuthTag(authTag);
+      return (
+        decipher.update(ciphertext, undefined, "utf8") + decipher.final("utf8")
+      );
+    } catch {
+      // If the parsing or decryption failed in any way,
+      // the correct token hasn’t been copied yet; try
+      // again next time.
+      return undefined;
+    }
+  });
 
-	// 	// We don't want to have the menu bar in pdf window
-	// 	pdfWindow.setMenu(null);
-	// });
+  AppMenu.setMenu({
+    tabs: [],
+  });
+  mainWindow = createMainWindow();
 
-	// Reload full app not just webview, useful in debugging
-	ipcMain.on('reload-full-app', () => {
-		mainWindow.reload();
-		page.send('destroytray');
-	});
+  // Auto-hide menu bar on Windows + Linux
+  if (process.platform !== "darwin") {
+    const shouldHideMenu = ConfigUtil.getConfigItem("autoHideMenubar", false);
+    mainWindow.autoHideMenuBar = shouldHideMenu;
+    mainWindow.setMenuBarVisibility(!shouldHideMenu);
+  }
 
-	ipcMain.on('clear-app-settings', () => {
-		globalPatched.mainWindowState.unmanage();
-		app.relaunch();
-		app.exit();
-	});
+  const page = mainWindow.webContents;
 
-	ipcMain.on('toggle-app', () => {
-		if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
-			mainWindow.show();
-		} else {
-			mainWindow.hide();
-		}
-	});
+  page.on("dom-ready", () => {
+    if (ConfigUtil.getConfigItem("startMinimized", false)) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+    }
+  });
 
-	ipcMain.on('toggle-badge-option', () => {
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-	});
+  ipcMain.on("fetch-user-agent", (event) => {
+    event.returnValue = session
+      .fromPartition("persist:webviewsession")
+      .getUserAgent();
+  });
 
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMessageEvent, showMenubar: boolean) => {
-		mainWindow.setAutoHideMenuBar(showMenubar);
-		mainWindow.setMenuBarVisibility(!showMenubar);
-		page.send('toggle-autohide-menubar', showMenubar, true);
-	});
+  ipcMain.handle("get-server-settings", async (event, domain: string) =>
+    _getServerSettings(domain, ses),
+  );
 
-	ipcMain.on('update-badge', (_event: Electron.IpcMessageEvent, messageCount: number) => {
-		badgeCount = messageCount;
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-		page.send('tray', messageCount);
-	});
+  ipcMain.handle("save-server-icon", async (event, url: string) =>
+    _saveServerIcon(url, ses),
+  );
 
-	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMessageEvent, data: any, text: string) => {
-		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-	});
+  ipcMain.handle("is-online", async (event, url: string) =>
+    _isOnline(url, ses),
+  );
 
-	ipcMain.on('forward-message', (_event: Electron.IpcMessageEvent, listener: any, ...params: any[]) => {
-		page.send(listener, ...params);
-	});
+  page.once("did-frame-finish-load", async () => {
+    // Initiate auto-updates on MacOS and Windows
+    if (ConfigUtil.getConfigItem("autoUpdate", true)) {
+      await appUpdater();
+    }
+  });
 
-	ipcMain.on('update-menu', (_event: Electron.IpcMessageEvent, props: any) => {
-		AppMenu.setMenu(props);
-		const activeTab = props.tabs[props.activeTabIndex];
-		if (activeTab) {
-			mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
-		}
-	});
+  app.on(
+    "certificate-error",
+    (
+      event,
+      webContents,
+      urlString,
+      error,
+      certificate,
+      callback,
+      isMainFrame,
+      // eslint-disable-next-line max-params
+    ) => {
+      if (isMainFrame) {
+        const url = new URL(urlString);
+        dialog.showErrorBox(
+          t.__("Certificate error"),
+          t.__(
+            "The server presented an invalid certificate for {{{origin}}}:\n\n{{{error}}}",
+            {origin: url.origin, error},
+          ),
+        );
+      }
+    },
+  );
 
-	ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMessageEvent, AutoLaunchValue: boolean) => {
-		setAutoLaunch(AutoLaunchValue);
-	});
+  ses.setPermissionRequestHandler(
+    (webContents, permission, callback, details) => {
+      const {origin} = new URL(details.requestingUrl);
+      const permissionCallbackId = nextPermissionCallbackId++;
+      permissionCallbacks.set(permissionCallbackId, callback);
+      send(
+        page,
+        "permission-request",
+        {
+          webContentsId:
+            webContents.id === mainWindow.webContents.id
+              ? null
+              : webContents.id,
+          origin,
+          permission,
+        },
+        permissionCallbackId,
+      );
+    },
+  );
 
-	ipcMain.on('downloadFile', (_event: Electron.IpcMessageEvent, url: string, downloadPath: string) => {
-		page.downloadURL(url);
-		page.session.once('will-download', (_event: Event, item) => {
-			const filePath = path.join(downloadPath, item.getFilename());
+  // Temporarily remove this event
+  // powerMonitor.on('resume', () => {
+  // 	mainWindow.reload();
+  // 	send(page, 'destroytray');
+  // });
 
-			const getTimeStamp = (): any => {
-				const date = new Date();
-				return date.getTime();
-			};
+  ipcMain.on("focus-app", () => {
+    mainWindow.show();
+  });
 
-			const formatFile = (filePath: string): string => {
-				const fileExtension = path.extname(filePath);
-				const baseName = path.basename(filePath, fileExtension);
-				return `${baseName}-${getTimeStamp()}${fileExtension}`;
-			};
+  ipcMain.on("quit-app", () => {
+    app.quit();
+  });
 
-			// Update the name and path of the file if it already exists
+  // Reload full app not just webview, useful in debugging
+  ipcMain.on("reload-full-app", () => {
+    mainWindow.reload();
+    send(page, "destroytray");
+  });
 
-			const updatedFilePath = path.join(downloadPath, formatFile(filePath));
+  ipcMain.on("clear-app-settings", () => {
+    mainWindowState.unmanage();
+    app.relaunch();
+    app.exit();
+  });
 
-			const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
+  ipcMain.on("toggle-app", () => {
+    toggleApp();
+  });
 
-			item.setSavePath(setFilePath);
+  ipcMain.on("toggle-badge-option", () => {
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+  });
 
-			item.on('updated', (_event: Event, state) => {
-				switch (state) {
-					case 'interrupted': {
-						// Can interrupted to due to network error, cancel download then
-						console.log('Download interrupted, cancelling and fallback to dialog download.');
-						item.cancel();
-						break;
-					}
-					case 'progressing': {
-						if (item.isPaused()) {
-							item.cancel();
-						}
-						// This event can also be used to show progress in percentage in future.
-						break;
-					}
-					default: {
-						console.info('Unknown updated state of download item');
-					}
-				}
-			});
-			item.once('done', (_event: Event, state) => {
-				const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
-				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), getFileName);
-				} else {
-					console.log('Download failed state: ', state);
-					page.send('downloadFileFailed');
-				}
-				// To stop item for listening to updated events of this file
-				item.removeAllListeners('updated');
-			});
-		});
-	});
+  ipcMain.on("toggle-menubar", (_event, showMenubar: boolean) => {
+    mainWindow.autoHideMenuBar = showMenubar;
+    mainWindow.setMenuBarVisibility(!showMenubar);
+    send(page, "toggle-autohide-menubar", showMenubar, true);
+  });
 
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMessageEvent, serverURL: string, realmName: string) => {
-		page.send('update-realm-name', serverURL, realmName);
-	});
+  ipcMain.on("update-badge", (_event, messageCount: number) => {
+    badgeCount = messageCount;
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+    send(page, "tray", messageCount);
+  });
 
-	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMessageEvent, serverURL: string, iconURL: string) => {
-		page.send('update-realm-icon', serverURL, iconURL);
-	});
+  ipcMain.on("update-taskbar-icon", (_event, data: string, text: string) => {
+    BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+  });
 
-	// 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.IpcMessageEvent) => {
-		event.sender.send('error-reporting-val', errorReporting);
-	});
+  ipcMain.on(
+    "forward-message",
+    <Channel extends keyof RendererMessage>(
+      _event: IpcMainEvent,
+      listener: Channel,
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      send(page, listener, ...parameters);
+    },
+  );
 
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMessageEvent, index: number) => {
-		ConfigUtil.setConfigItem('lastActiveTab', index);
-	});
+  ipcMain.on(
+    "forward-to",
+    <Channel extends keyof RendererMessage>(
+      _event: IpcMainEvent,
+      webContentsId: number,
+      listener: Channel,
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      const contents = webContents.fromId(webContentsId);
+      if (contents !== undefined) {
+        send(contents, listener, ...parameters);
+      }
+    },
+  );
 
-	// 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
+  ipcMain.on("update-menu", (_event, properties: MenuProperties) => {
+    AppMenu.setMenu(properties);
+    if (properties.activeTabIndex !== undefined) {
+      const activeTab = properties.tabs[properties.activeTabIndex];
+      mainWindow.setTitle(`Zulip - ${activeTab.label}`);
+    }
+  });
 
-		// TODO: Remove typecast to any when types get added
-		// TODO: use powerMonitor.getSystemIdleState when upgrading electron
-		// powerMonitor.querySystemIdleState is deprecated in current electron
-		// version at the time of writing.
-		const powerMonitor = electron.powerMonitor as any;
-		powerMonitor.querySystemIdleState(idleThresholdSeconds, (idleState: string) => {
-			if (idleState === 'active') {
-				page.send('set-active');
-			} else {
-				page.send('set-idle');
-			}
-		});
-	}, idleCheckInterval);
-});
+  ipcMain.on("toggleAutoLauncher", async (_event, AutoLaunchValue: boolean) => {
+    await setAutoLaunch(AutoLaunchValue);
+  });
 
-app.on('before-quit', () => {
-	isQuitting = true;
+  ipcMain.on(
+    "realm-name-changed",
+    (_event, serverURL: string, realmName: string) => {
+      send(page, "update-realm-name", serverURL, realmName);
+    },
+  );
+
+  ipcMain.on(
+    "realm-icon-changed",
+    (_event, serverURL: string, iconURL: string) => {
+      send(page, "update-realm-icon", serverURL, iconURL);
+    },
+  );
+
+  ipcMain.on("save-last-tab", (_event, index: number) => {
+    ConfigUtil.setConfigItem("lastActiveTab", index);
+  });
+
+  ipcMain.on("focus-this-webview", (event) => {
+    send(page, "focus-webview-with-id", event.sender.id);
+    mainWindow.show();
+  });
+
+  // Update user idle status for each realm after every 15s
+  const idleCheckInterval = 15 * 1000; // 15 seconds
+  setInterval(() => {
+    // Set user idle if no activity in 1 second (idleThresholdSeconds)
+    const idleThresholdSeconds = 1; // 1 second
+    const idleState = powerMonitor.getSystemIdleState(idleThresholdSeconds);
+    if (idleState === "active") {
+      send(page, "set-active");
+    } else {
+      send(page, "set-idle");
+    }
+  }, idleCheckInterval);
+})();
+
+app.on("before-quit", () => {
+  isQuitting = true;
 });
 
 // Send crash reports
-process.on('uncaughtException', err => {
-	console.error(err);
-	console.error(err.stack);
+process.on("uncaughtException", (error) => {
+  console.error(error);
+  console.error(error.stack);
 });

app/main/linux-update-util.ts

@@ -0,0 +1,70 @@
+import {app, dialog} from "electron/main";
+import fs from "node:fs";
+import path from "node:path";
+
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors.js";
+
+import Logger from "../common/logger-util.ts";
+import * as t from "../common/translation-util.ts";
+
+const logger = new Logger({
+  file: "linux-update-util.log",
+});
+
+let database: JsonDB;
+
+reloadDatabase();
+
+export function getUpdateItem(
+  key: string,
+  defaultValue: true | null = null,
+): true | null {
+  reloadDatabase();
+  let value: unknown;
+  try {
+    value = database.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 {
+  database.push(`/${key}`, value, true);
+  reloadDatabase();
+}
+
+export function removeUpdateItem(key: string): void {
+  database.delete(`/${key}`);
+  reloadDatabase();
+}
+
+function reloadDatabase(): 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(
+        t.__("Error saving update notifications"),
+        t.__("We encountered an error while saving the update notifications."),
+      );
+      logger.error("Error while JSON parsing updates.json: ");
+      logger.error(error);
+    }
+  }
+
+  database = new JsonDB(linuxUpdateJsonPath, true, true);
+}

app/main/linuxupdater.ts

@@ -1,48 +1,51 @@
-import { app, Notification } from 'electron';
+import {Notification, type Session, app} from "electron/main";
 
-import request = require('request');
-import semver = require('semver');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
-import LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
-import Logger = require('../renderer/js/utils/logger-util');
+import * as semver from "semver";
+import {z} from "zod";
+
+import * as ConfigUtil from "../common/config-util.ts";
+import Logger from "../common/logger-util.ts";
+import * as t from "../common/translation-util.ts";
+
+import * as LinuxUpdateUtil from "./linux-update-util.ts";
 
 const logger = new Logger({
-	file: 'linux-update-util.log',
-	timestamp: true
+  file: "linux-update-util.log",
 });
 
-export function linuxUpdateNotification(): void {
-	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
-	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
-	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+export async function linuxUpdateNotification(session: Session): Promise<void> {
+  let url = "https://api.github.com/repos/zulip/zulip-desktop/releases";
+  url = ConfigUtil.getConfigItem("betaUpdate", false) ? url : url + "/latest";
 
-	const options = {
-		url,
-		headers: {'User-Agent': 'request'},
-		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
-		ecdhCurve: 'auto'
-	};
+  try {
+    const response = await session.fetch(url);
+    if (!response.ok) {
+      logger.log("Linux update response status: ", response.status);
+      return;
+    }
 
-	request(options, (error: any, response: any, body: any) => {
-		if (error) {
-			logger.error('Linux update error.');
-			logger.error(error);
-			return;
-		}
-		if (response.statusCode < 400) {
-			const data = JSON.parse(body);
-			const latestVersion = ConfigUtil.getConfigItem('betaUpdate') ? data[0].tag_name : data.tag_name;
+    const data: unknown = await response.json();
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const latestVersion = ConfigUtil.getConfigItem("betaUpdate", false)
+      ? z.array(z.object({tag_name: z.string()})).parse(data)[0].tag_name
+      : z.object({tag_name: z.string()}).parse(data).tag_name;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
-			if (semver.gt(latestVersion, app.getVersion())) {
-				const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
-				if (notified === null) {
-					new Notification({title: 'Zulip Update', body: 'A new version ' + latestVersion + ' is available. Please update using your package manager.'}).show();
-					LinuxUpdateUtil.setUpdateItem(latestVersion, true);
-				}
-			}
-		} else {
-			logger.log('Linux update response status: ', response.statusCode);
-		}
-	});
+    if (semver.gt(latestVersion, app.getVersion())) {
+      const notified = LinuxUpdateUtil.getUpdateItem(latestVersion);
+      if (notified === null) {
+        new Notification({
+          title: t.__("Zulip Update"),
+          body: t.__(
+            "A new version {{{version}}} is available. Please update using your package manager.",
+            {version: latestVersion},
+          ),
+        }).show();
+        LinuxUpdateUtil.setUpdateItem(latestVersion, true);
+      }
+    }
+  } catch (error: unknown) {
+    logger.error("Linux update error.");
+    logger.error(error);
+  }
 }

app/main/request.ts

@@ -0,0 +1,121 @@
+import {type Session, app} from "electron/main";
+import fs from "node:fs";
+import path from "node:path";
+import {Readable} from "node:stream";
+import {pipeline} from "node:stream/promises";
+import type {ReadableStream} from "node:stream/web";
+
+import * as Sentry from "@sentry/electron/main";
+import {z} from "zod";
+
+import Logger from "../common/logger-util.ts";
+import * as Messages from "../common/messages.ts";
+import type {ServerConfig} from "../common/types.ts";
+
+/* Request: domain-util */
+
+const logger = new Logger({
+  file: "domain-util.log",
+});
+
+const generateFilePath = (url: string): string => {
+  const directory = `${app.getPath("userData")}/server-icons`;
+  const extension = path.extname(url).split("?")[0];
+
+  let hash = 5381;
+  let {length} = url;
+
+  while (length) {
+    // eslint-disable-next-line no-bitwise, unicorn/prefer-code-point
+    hash = (hash * 33) ^ url.charCodeAt(--length);
+  }
+
+  // Create 'server-icons' directory if not existed
+  if (!fs.existsSync(directory)) {
+    fs.mkdirSync(directory);
+  }
+
+  // eslint-disable-next-line no-bitwise
+  return `${directory}/${hash >>> 0}${extension}`;
+};
+
+export const _getServerSettings = async (
+  domain: string,
+  session: Session,
+): Promise<ServerConfig> => {
+  const response = await session.fetch(domain + "/api/v1/server_settings");
+  if (!response.ok) {
+    throw new Error(Messages.invalidZulipServerError(domain));
+  }
+
+  const data: unknown = await response.json();
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const {
+    realm_name,
+    realm_uri,
+    realm_icon,
+    zulip_version,
+    zulip_feature_level,
+  } = z
+    .object({
+      realm_name: z.string(),
+      realm_uri: z.url(),
+      realm_icon: z.string(),
+      zulip_version: z.string().default("unknown"),
+      zulip_feature_level: z.number().default(0),
+    })
+    .parse(data);
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  return {
+    // Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+    // Following check handles both the cases
+    icon: realm_icon.startsWith("/") ? realm_uri + realm_icon : realm_icon,
+    url: realm_uri,
+    alias: realm_name,
+    zulipVersion: zulip_version,
+    zulipFeatureLevel: zulip_feature_level,
+  };
+};
+
+export const _saveServerIcon = async (
+  url: string,
+  session: Session,
+): Promise<string | null> => {
+  try {
+    const response = await session.fetch(url);
+    if (!response.ok) {
+      logger.log("Could not get server icon.");
+      return null;
+    }
+
+    const filePath = generateFilePath(url);
+    await pipeline(
+      Readable.fromWeb(response.body as ReadableStream<Uint8Array>),
+      fs.createWriteStream(filePath),
+    );
+    return filePath;
+  } catch (error: unknown) {
+    logger.log("Could not get server icon.");
+    logger.log(error);
+    Sentry.captureException(error);
+    return null;
+  }
+};
+
+/* Request: reconnect-util */
+
+export const _isOnline = async (
+  url: string,
+  session: Session,
+): Promise<boolean> => {
+  try {
+    const response = await session.fetch(`${url}/api/v1/server_settings`, {
+      method: "HEAD",
+    });
+    return response.ok;
+  } catch (error: unknown) {
+    logger.log(error);
+    return false;
+  }
+};

app/main/sentry.ts

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

app/main/startup.ts

@@ -1,31 +1,36 @@
-'use strict';
-import { app } from 'electron';
+import {app} from "electron/main";
+import process from "node:process";
 
-import AutoLaunch = require('auto-launch');
-import isDev = require('electron-is-dev');
-import ConfigUtil = require('../renderer/js/utils/config-util');
+import AutoLaunch from "auto-launch";
 
-export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
-	// Don't run this in development
-	if (isDev) {
-		return;
-	}
+import * as ConfigUtil from "../common/config-util.ts";
 
-	// On Mac, work around a bug in auto-launch where it opens a Terminal window
-	// See https://github.com/Teamwork/node-auto-launch/issues/28#issuecomment-222194437
+export const setAutoLaunch = async (
+  AutoLaunchValue: boolean,
+): Promise<void> => {
+  // Don't run this in development
+  if (!app.isPackaged) {
+    return;
+  }
 
-	const appPath = process.platform === 'darwin' ? app.getPath('exe').replace(/\.app\/Content.*/, '.app') : undefined; // Use the default
+  const autoLaunchOption = ConfigUtil.getConfigItem(
+    "startAtLogin",
+    AutoLaunchValue,
+  );
 
-	const ZulipAutoLauncher = new AutoLaunch({
-		name: 'Zulip',
-		path: appPath,
-		isHidden: false
-	});
-	const autoLaunchOption = ConfigUtil.getConfigItem('startAtLogin', AutoLaunchValue);
-
-	if (autoLaunchOption) {
-		ZulipAutoLauncher.enable();
-	} else {
-		ZulipAutoLauncher.disable();
-	}
+  // `setLoginItemSettings` doesn't support linux
+  if (process.platform === "linux") {
+    const zulipAutoLauncher = new AutoLaunch({
+      name: "Zulip",
+      isHidden: false,
+    });
+    await (autoLaunchOption
+      ? zulipAutoLauncher.enable()
+      : zulipAutoLauncher.disable());
+  } else {
+    app.setLoginItemSettings({
+      openAtLogin: autoLaunchOption,
+      openAsHidden: false,
+    });
+  }
 };

app/main/typed-ipc-main.ts

@@ -0,0 +1,88 @@
+import {
+  type IpcMainEvent,
+  type IpcMainInvokeEvent,
+  type WebContents,
+  ipcMain as untypedIpcMain, // eslint-disable-line no-restricted-imports
+} from "electron/main";
+
+import type {
+  MainCall,
+  MainMessage,
+  RendererMessage,
+} from "../common/typed-ipc.js";
+
+type MainListener<Channel extends keyof MainMessage> =
+  MainMessage[Channel] extends (...arguments_: infer Arguments) => infer Return
+    ? (
+        event: IpcMainEvent & {returnValue: Return},
+        ...arguments_: Arguments
+      ) => void
+    : never;
+
+type MainHandler<Channel extends keyof MainCall> = MainCall[Channel] extends (
+  ...arguments_: infer Arguments
+) => infer Return
+  ? (
+      event: IpcMainInvokeEvent,
+      ...arguments_: Arguments
+    ) => Return | Promise<Return>
+  : never;
+
+export const ipcMain: {
+  on(
+    channel: "forward-message",
+    listener: <Channel extends keyof RendererMessage>(
+      event: IpcMainEvent,
+      channel: Channel,
+      ...arguments_: Parameters<RendererMessage[Channel]>
+    ) => void,
+  ): void;
+  on(
+    channel: "forward-to",
+    listener: <Channel extends keyof RendererMessage>(
+      event: IpcMainEvent,
+      webContentsId: number,
+      channel: Channel,
+      ...arguments_: 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,
+  ...arguments_: Parameters<RendererMessage[Channel]>
+): void {
+  contents.send(channel, ...arguments_);
+}
+
+export function sendToFrame<Channel extends keyof RendererMessage>(
+  contents: WebContents,
+  frameId: number | [number, number],
+  channel: Channel,
+  ...arguments_: Parameters<RendererMessage[Channel]>
+): void {
+  contents.sendToFrame(frameId, channel, ...arguments_);
+}

app/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "zulip",
-  "productName": "Zulip",
-  "version": "4.0.2-beta",
-  "desktopName": "zulip.desktop",
-  "description": "Zulip Desktop App",
-  "license": "Apache-2.0",
-  "copyright": "Kandra Labs, Inc.",
-  "author": {
-    "name": "Kandra Labs, Inc.",
-    "email": "support@zulipchat.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/zulip/zulip-desktop.git"
-  },
-  "bugs": {
-    "url": "https://github.com/zulip/zulip-desktop/issues"
-  },
-  "main": "main/index.js",
-  "keywords": [
-    "Zulip",
-    "Group Chat app",
-    "electron-app",
-    "electron",
-    "Desktop app",
-    "InstantMessaging"
-  ],
-  "dependencies": {
-    "@electron-elements/send-feedback": "1.0.8",
-    "@sentry/electron": "0.14.0",
-    "adm-zip": "0.4.11",
-    "auto-launch": "5.0.5",
-    "backoff": "2.5.0",
-    "dotenv": "8.0.0",
-    "electron-is-dev": "0.3.0",
-    "electron-log": "2.2.14",
-    "electron-spellchecker": "1.1.2",
-    "electron-updater": "4.0.6",
-    "electron-window-state": "5.0.3",
-    "escape-html": "1.0.3",
-    "i18n": "0.8.3",
-    "node-json-db": "0.9.2",
-    "request": "2.85.0",
-    "semver": "5.4.1",
-    "wurl": "2.5.0"
-  },
-  "optionalDependencies": {
-    "node-mac-notifier": "1.1.0"
-  }
-}

app/renderer/about.html

@@ -1,47 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<meta charset="UTF-8" />
+<link rel="stylesheet" href="css/about.css" />
 
-    <head>
-        <meta charset="UTF-8">
-        <link rel="stylesheet" href="css/about.css">
-        <title>Zulip - About</title>
-    </head>
-
-    <body>
-        <div class="about">
-            <img class="logo" src="../resources/zulip.png" />
-            <p class="detail" id="version">v?.?.?</p>
-            <div class="maintenance-info">
-                <p class="detail maintainer">
-                    Maintained by
-                    <a onclick="linkInBrowser('website')">Zulip</a>
-                </p>
-                <p class="detail license">
-                    Available under the
-                    <a onclick="linkInBrowser('license')">Apache 2.0 License</a>
-                </p>
-            </div>
-        </div>
-        <script>
-
-            const { app } = require('electron').remote;
-            const { shell } = require('electron');
-            const version_tag = document.querySelector('#version');
-            version_tag.innerHTML = 'v' + app.getVersion();
-
-            function linkInBrowser(type) {
-                let url;
-                switch (type) {
-                    case 'website':
-                        url = "https://zulipchat.com";
-                        break;
-                    case 'license':
-                        url = "https://github.com/zulip/zulip-desktop/blob/master/LICENSE";
-                        break;
-                }
-                shell.openExternal(url);
-            }
-        </script>
-        <script>require('./js/shared/preventdrag.js')</script>
-    </body>
-</html>
+<!-- Initially hidden to prevent FOUC -->
+<div class="about" hidden>
+  <img class="logo" src="../resources/zulip.png" />
+  <p class="detail" id="version"></p>
+</div>

app/renderer/css/about.css

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

app/renderer/css/feedback.css

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

app/renderer/css/fonts.css

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

app/renderer/css/main.css

@@ -4,280 +4,283 @@
 
 html,
 body {
-    height: 100%;
-    margin: 0;
-    cursor: default;
-    user-select: none;
+  height: 100%;
+  margin: 0;
+  cursor: default;
+  user-select: none;
 }
 
 #content {
-    display: flex;
-    height: 100%;
+  display: flex;
+  height: 100%;
 }
 
 .toggle-sidebar {
-    background: rgba(34, 44, 49, 1.000);
-    width: 54px;
-    padding: 27px 0 20px 0;
-    justify-content: space-between;
-    display: flex;
-    flex-direction: column;
-    -webkit-app-region: drag;
-    overflow: hidden;
-    transition: all 0.5s ease;
-    z-index: 2;
+  background: rgb(34 44 49 / 100%);
+  width: 54px;
+  padding: 27px 0 20px;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  -webkit-app-region: drag;
+  overflow: hidden;
+  transition: all 0.5s ease;
+  z-index: 2;
 }
 
 .toggle-sidebar div {
-    transition: all 0.5s ease-out;
+  transition: all 0.5s ease-out;
 }
 
 .sidebar-hide {
-    width: 0;
-    transition: all 0.8s ease;
+  width: 0;
+  transition: all 0.8s ease;
 }
 
 .sidebar-hide div {
-    transform: translateX(-100%);
-    transition: all 0.6s ease-out;
+  transform: translateX(-100%);
+  transition: all 0.6s ease-out;
 }
 
 #view-controls-container {
-    height: calc(100% - 208px);
-    overflow-y: hidden;
-}
-
-#view-controls-container:hover {
-    overflow-y: overlay;
+  height: calc(100% - 208px);
+  scrollbar-gutter: stable both-edges;
+  overflow-y: hidden;
 }
 
 #view-controls-container::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
 
 #view-controls-container::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgb(0 0 0 / 30%);
 }
 
 #view-controls-container::-webkit-scrollbar-thumb {
-    background-color: rgba(169, 169, 169, 1.000);
-    outline: 1px solid rgba(169, 169, 169, 1.000);
+  background-color: rgb(169 169 169 / 100%);
 }
 
-@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+#view-controls-container:hover {
+  overflow-y: scroll;
 }
 
-
 /*******************
   *   Left Sidebar  *
   *******************/
 
 #tabs-container {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    /* Preferred icon size */
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+
+  /* Preferred icon size */
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  overflow-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizelegibility;
 }
 
 #actions-container {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
 }
 
 .action-button {
-    display: flex;
-    flex-direction: column;
-    padding: 12px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
 }
 
 .action-button:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .action-button i {
-    color: rgba(108, 133, 146, 1.000);
-    font-size: 28px;
+  color: hsl(200.53deg 14.96% 49.8%);
+  font-size: 28px;
 }
 
 .action-button:hover i {
-    color: rgba(152, 169, 179, 1.000);
+  color: hsl(202.22deg 15.08% 64.9%);
 }
 
-.action-button.disable {
-    opacity: 0.6;
+.action-button > .dnd-on {
+  color: hsl(200.53deg 14.96% 85%);
 }
 
-.action-button.disable:hover {
-    cursor: not-allowed;
-}
-
-.action-button.disable:hover i {
-    color: rgba(108, 133, 146, 1.000);
+.action-button:hover > .dnd-on {
+  color: hsl(202.22deg 15.08% 95%);
 }
 
 .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;
+  /* background-color: rgba(255, 255, 255, 0.25); */
+  background-color: rgb(239 239 239 / 100%);
+  opacity: 0.9;
+  padding-right: 14px;
 }
 
 .action-button.active i {
-    color: rgba(28, 38, 43, 1.000);
+  color: rgb(28 38 43 / 100%);
 }
 
-.tab:first-child {
-    margin-top: 9px;
+.action-button.disable {
+  opacity: 0.6;
+}
+
+.action-button.disable:hover {
+  cursor: not-allowed;
+}
+
+.action-button.disable:hover i {
+  color: rgb(108 133 146 / 100%);
 }
 
 .tab {
-    position: relative;
-    margin: 2px 0;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
+  position: relative;
+  margin: 2px 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.tab:first-child {
+  margin-top: 9px;
 }
 
 .tab .server-icons {
-    width: 35px;
-    vertical-align: top;
-    border-radius: 4px;
+  width: 35px;
+  vertical-align: top;
+  border-radius: 4px;
 }
 
 .tab .server-tab {
-    width: 100%;
-    height: 35px;
-    position: relative;
-    margin-top: 5px;
-    z-index: 11;
-    line-height: 31px;
-    color: rgba(238, 238, 238, 1.000);
-    text-align: center;
-    overflow: hidden;
-    opacity: 0.6;
-    padding: 6px 0;
+  width: 100%;
+  height: 35px;
+  position: relative;
+  margin-top: 5px;
+  z-index: 11;
+  line-height: 31px;
+  color: rgb(238 238 238 / 100%);
+  text-align: center;
+  overflow: hidden;
+  opacity: 0.6;
+  padding: 6px 0;
 }
 
 .server-tab .alt-icon {
-    font-family: Verdana;
-    font-weight: 600;
-    font-size: 22px;
-    border: 2px solid rgba(34, 44, 49, 1.000);
-    margin-left: 17%;
-    width: 35px;
-    border-radius: 4px;
+  font-family: Verdana, sans-serif;
+  font-weight: 600;
+  font-size: 22px;
+  border: 2px solid rgb(34 44 49 / 100%);
+  margin-left: 17%;
+  width: 35px;
+  border-radius: 4px;
 }
 
 .tab .server-tab:hover {
-    opacity: 0.8;
-}
-
-.tab.functional-tab {
-    height: 46px;
-    padding: 0;
-}
-
-.tab.functional-tab.active .server-tab {
-    padding: 2px 0;
-    height: 40px;
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-.tab.functional-tab .server-tab i {
-    font-size: 28px;
-    line-height: 36px;
+  opacity: 0.8;
 }
 
 .tab.active .server-tab {
-    opacity: 1;
-    background-color: rgba(100, 132, 120, 1.000);
+  opacity: 1;
+  background-color: rgb(100 132 120 / 100%);
+}
+
+.tab.functional-tab {
+  height: 46px;
+  padding: 0;
+}
+
+.tab.functional-tab.active .server-tab {
+  padding: 2px 0;
+  height: 40px;
+  background-color: rgb(255 255 255 / 25%);
+}
+
+.tab.functional-tab .server-tab i {
+  font-size: 28px;
+  line-height: 36px;
 }
 
 .tab .server-tab-badge.active {
-    border-radius: 9px;
-    min-width: 11px;
-    padding: 0 3px;
-    height: 17px;
-    background-color: rgba(244, 67, 54, 1.000);
-    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);
-    text-align: center;
-    line-height: 17px;
-    display: block;
-    right: 0;
+  border-radius: 9px;
+  min-width: 11px;
+  padding: 0 3px;
+  height: 17px;
+  background-color: rgb(244 67 54 / 100%);
+  font-size: 10px;
+  font-family: sans-serif;
+  position: absolute;
+  z-index: 15;
+  top: 6px;
+  float: right;
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  line-height: 17px;
+  display: block;
+  right: 0;
 }
 
 .tab .server-tab-badge {
-    display: none;
+  display: none;
 }
 
 .tab .server-tab-badge.close-button {
-    width: 16px;
-    padding: 0;
+  width: 16px;
+  padding: 0;
 }
 
 .tab .server-tab-badge.close-button i {
-    font-size: 13px;
-    line-height: 17px;
+  font-size: 13px;
+  line-height: 17px;
 }
 
 #add-tab {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .tab .server-tab-shortcut {
-    color: rgba(100, 132, 120, 1.000);
-    font-size: 12px;
-    text-align: center;
-    font-family: sans-serif;
-    margin-bottom: 5px;
+  color: rgb(100 132 120 / 100%);
+  font-size: 12px;
+  text-align: center;
+  font-family: sans-serif;
+  margin-bottom: 5px;
 }
 
 .refresh {
-    animation: rotate-loader 1s linear infinite;
+  animation: rotate-loader 1s linear infinite;
 }
 
 @keyframes rotate-loader {
-    from {
-        transform: rotate(0);
-    }
-    to {
-        transform: rotate(-360deg);
-    }
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
 }
 
 /*******************
@@ -285,57 +288,81 @@ body {
   *******************/
 
 #webviews-container {
-    display: flex;
-    height: 100%;
-    width: 100%;
+  display: flex;
+  height: 100%;
+  width: 100%;
 }
 
 /* Pseudo element for loading indicator */
 #webviews-container::before {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    background: rgba(255, 255, 255, 1.000) url(../img/ic_loading.gif) no-repeat;
-    background-size: 60px 60px;
-    background-position: center;
-    width: 100%;
-    height: 100%;
+  content: "";
+  position: absolute;
+  z-index: 1;
+
+  /* Spinner is released under loading.io free License: https://loading.io/license/#free-license */
+  background: rgb(255 255 255 / 100%) url("../img/ic_loading.svg") no-repeat;
+  background-size: 60px 60px;
+  background-position: center;
+  width: 100%;
+  height: 100%;
 }
 
 /* When the active webview is loaded */
 #webviews-container.loaded::before {
-    opacity: 0;
-    z-index: -1;
-    visibility: hidden;
+  z-index: -1;
+  visibility: hidden;
 }
 
-webview {
-    /* transition: opacity 0.3s ease-in; */
-    flex-grow: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
+.webview-pane,
+.functional-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  visibility: hidden;
 }
 
-webview.onload {
-    transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+.webview-pane {
+  display: flex;
+  flex-direction: column;
 }
 
-webview.active {
-    opacity: 1;
-    z-index: 1;
-    visibility: visible;
+.webview-pane > webview {
+  flex: 1;
 }
 
-webview.disabled {
-    opacity: 0;
+.webview-pane.active,
+.functional-view.active {
+  z-index: 1;
+  visibility: visible;
 }
 
 webview.focus {
-    outline: 0px solid transparent;
+  outline: 0 solid transparent;
+}
+
+.webview-unsupported {
+  background: rgb(254 243 199);
+  border: 1px solid rgb(253 230 138);
+  color: rgb(69 26 3);
+  font-family: system-ui;
+  font-size: 14px;
+  display: flex;
+}
+
+.webview-unsupported[hidden] {
+  display: none;
+}
+
+.webview-unsupported-message {
+  padding: 0.3em;
+  flex: 1;
+  text-align: center;
+}
+
+.webview-unsupported-dismiss {
+  padding: 0.3em;
+  cursor: pointer;
 }
 
 /* Tooltip styling */
@@ -345,18 +372,18 @@ webview.focus {
 #back-tooltip,
 #reload-tooltip,
 #setting-tooltip {
-    font-family: sans-serif;
-    background: rgba(34, 44, 49, 1.000);
-    margin-left: 48px;
-    padding: 6px 8px;
-    position: absolute;
-    margin-top: 0px;
-    z-index: 1000;
-    color: rgba(255, 255, 255, 1.000);
-    border-radius: 4px;
-    text-align: center;
-    width: 55px;
-    font-size: 14px;
+  font-family: sans-serif;
+  background: rgb(34 44 49 / 100%);
+  margin-left: 48px;
+  padding: 6px 8px;
+  position: absolute;
+  margin-top: 0;
+  z-index: 1000;
+  color: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  text-align: center;
+  width: 55px;
+  font-size: 14px;
 }
 
 #loading-tooltip::after,
@@ -364,127 +391,104 @@ webview.focus {
 #back-tooltip::after,
 #reload-tooltip::after,
 #setting-tooltip::after {
-    content: " ";
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
-    position: absolute;
-    top: 7px;
-    right: 68px;
+  content: " ";
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 7px;
+  right: 68px;
 }
 
 #add-server-tooltip,
 .server-tooltip {
-    font-family: 'arial';
-    background: rgba(34, 44, 49, 1.000);
-    left: 56px;
-    padding: 10px 20px;
-    position: fixed;
-    margin-top: 11px;
-    z-index: 5000 !important;
-    color: rgba(255, 255, 255, 1.000);
-    border-radius: 4px;
-    text-align: center;
-    width: max-content;
-    font-size: 14px;
+  font-family: arial, sans-serif;
+  background: rgb(34 44 49 / 100%);
+  left: 56px;
+  padding: 10px 20px;
+  position: fixed;
+  margin-top: 11px;
+  z-index: 5000 !important;
+  color: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  text-align: center;
+  width: max-content;
+  font-size: 14px;
 }
 
 #add-server-tooltip::after,
 .server-tooltip::after {
-    content: " ";
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
-    position: absolute;
-    top: 10px;
-    left: -5px;
+  content: " ";
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 10px;
+  left: -5px;
 }
 
 #collapse-button {
-    bottom: 30px;
-    left: 20px;
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    background: rgba(34, 44, 49, 1.000);
-    border-radius: 20px;
-    cursor: pointer;
-    box-shadow: rgba(153, 153, 153, 1.000) 1px 1px;
+  bottom: 30px;
+  left: 20px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: rgb(34 44 49 / 100%);
+  border-radius: 20px;
+  cursor: pointer;
+  box-shadow: rgb(153 153 153 / 100%) 1px 1px;
 }
 
 #collapse-button i {
-    color: rgba(239, 239, 239, 1.000);
+  color: rgb(239 239 239 / 100%);
 }
 
 #main-container {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    flex-grow: 1;
-    flex-basis: 0px;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 
 .hidden {
-    display: none !important;
+  display: none !important;
 }
 
-
 /* Full screen Popup container  */
 
 .popup .popuptext {
-    visibility: hidden;
-    background-color: rgba(85, 85, 85, 1.000);
-    color: rgba(255, 255, 255, 1.000);
-    text-align: center;
-    border-radius: 6px;
-    padding: 9px 0;
-    position: absolute;
-    z-index: 1000;
-    font-family: arial;
-    width: 240px;
-    top: 15px;
-    height: 20px;
-    left: 43%;
+  visibility: hidden;
+  background-color: rgb(85 85 85 / 100%);
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  border-radius: 6px;
+  padding: 9px 0;
+  position: absolute;
+  z-index: 1000;
+  font-family: arial, sans-serif;
+  width: 240px;
+  top: 15px;
+  height: 20px;
+  left: 43%;
 }
 
 .popup .show {
-    visibility: visible;
-    animation: cssAnimation 0s ease-in 5s forwards;
-    animation-fill-mode: forwards;
+  visibility: visible;
+  animation: full-screen-popup 0s ease-in 1s forwards;
+  animation-fill-mode: forwards;
 }
 
-@keyframes cssAnimation {
-    from {
-        opacity: 0;
-    }
-    to {
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        opacity: 1;
-    }
-}
+@keyframes full-screen-popup {
+  from {
+    opacity: 0;
+  }
 
-send-feedback {
-    width: 60%;
-    height: 85%;
-}
-
-#feedback-modal {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(68, 67, 67, 0.81);
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    transition: all 1s ease-out;
-}
-
-#feedback-modal.show {
-    display: flex;
+  to {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 1;
+  }
 }

app/renderer/css/network.css

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

app/renderer/css/preload.css

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

app/renderer/img/ic_loading.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="150px" height="150px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#759ed4" stroke-width="10" r="42" stroke-dasharray="197.92033717615698 67.97344572538566" style="animation-play-state: running; animation-delay: 0s;">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
+</circle>
+<!-- Created with loading.io (https://loading.io/spinner/rolling/-bar-circle-curve-round-rotate) -->
+<!-- "The Rolling spinner is released under loading.io free License." (https://loading.io/license/#free-license) -->
+</svg>

app/renderer/js/clipboard-decrypter.ts

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

app/renderer/js/components/base.ts

@@ -1,11 +1,12 @@
-'use strict';
+import type {Html} from "../../../common/html.ts";
 
-class BaseComponent {
-	generateNodeFromTemplate(template: string): Element | null {
-		const wrapper = document.createElement('div');
-		wrapper.innerHTML = template;
-		return wrapper.firstElementChild;
-	}
+export function generateNodeFromHtml(html: Html): Element {
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html.html;
+
+  if (wrapper.firstElementChild === null) {
+    throw new Error("No element found in HTML");
+  }
+
+  return wrapper.firstElementChild;
 }
-
-export = BaseComponent;

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

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

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

@@ -1,51 +1,73 @@
-'use strict';
+import {type Html, html} from "../../../common/html.ts";
+import type {TabPage} from "../../../common/types.ts";
 
-import Tab = require('./tab');
+import {generateNodeFromHtml} from "./base.ts";
+import Tab, {type TabProperties} from "./tab.ts";
 
-class FunctionalTab extends Tab {
-	$closeButton: Element;
-	template(): string {
-		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tab-badge close-button">
-						<i class="material-icons">close</i>
-					</div>
-					<div class="server-tab">
-						<i class="material-icons">${this.props.materialIcon}</i>
-					</div>
-				</div>`;
-	}
+export type FunctionalTabProperties = {
+  $view: Element;
+  page: TabPage;
+} & TabProperties;
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
-	}
+export default class FunctionalTab extends Tab {
+  $view: Element;
+  $el: Element;
+  $closeButton?: Element;
 
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		if (this.props.name !== 'Settings') {
-			this.props.$root.append(this.$el);
-			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
-			this.registerListeners();
-		}
-	}
+  constructor({$view, ...properties}: FunctionalTabProperties) {
+    super(properties);
 
-	registerListeners(): void {
-		super.registerListeners();
+    this.$view = $view;
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    if (properties.page !== "Settings") {
+      this.properties.$root.append(this.$el);
+      this.$closeButton = this.$el.querySelector(".server-tab-badge")!;
+      this.registerListeners();
+    }
+  }
 
-		this.$el.addEventListener('mouseover', () => {
-			this.$closeButton.classList.add('active');
-		});
+  override async activate(): Promise<void> {
+    await super.activate();
+    this.$view.classList.add("active");
+  }
 
-		this.$el.addEventListener('mouseout', () => {
-			this.$closeButton.classList.remove('active');
-		});
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    this.$view.classList.remove("active");
+  }
 
-		this.$closeButton.addEventListener('click', (e: Event) => {
-			this.props.onDestroy();
-			e.stopPropagation();
-		});
-	}
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    this.$view.remove();
+  }
+
+  templateHtml(): Html {
+    return html`
+      <div class="tab functional-tab" data-tab-id="${this.properties.tabIndex}">
+        <div class="server-tab-badge close-button">
+          <i class="material-icons">close</i>
+        </div>
+        <div class="server-tab">
+          <i class="material-icons">${this.properties.materialIcon}</i>
+        </div>
+      </div>
+    `;
+  }
+
+  override registerListeners(): void {
+    super.registerListeners();
+
+    this.$el.addEventListener("mouseover", () => {
+      this.$closeButton?.classList.add("active");
+    });
+
+    this.$el.addEventListener("mouseout", () => {
+      this.$closeButton?.classList.remove("active");
+    });
+
+    this.$closeButton?.addEventListener("click", (event) => {
+      this.properties.onDestroy?.();
+      event.stopPropagation();
+    });
+  }
 }
-
-export = FunctionalTab;

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

@@ -1,83 +0,0 @@
-import { ipcRenderer, remote } from 'electron';
-
-import LinkUtil = require('../utils/link-util');
-import DomainUtil = require('../utils/domain-util');
-import ConfigUtil = require('../utils/config-util');
-
-const { shell, app } = remote;
-
-const dingSound = new Audio('../resources/sounds/ding.ogg');
-
-// TODO: TypeScript - Figure out a way to pass correct type here.
-function handleExternalLink(this: any, event: any): void {
-	const { url } = event;
-	const domainPrefix = DomainUtil.getDomain(this.props.index).url;
-	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
-	const shouldShowInFolder = ConfigUtil.getConfigItem('showDownloadFolder', false);
-
-	// Whitelist URLs which are allowed to be opened in the app
-	const {
-		isInternalUrl: isWhiteListURL,
-		isUploadsUrl: isUploadsURL
-	} = LinkUtil.isInternal(domainPrefix, url);
-
-	if (isWhiteListURL) {
-		event.preventDefault();
-
-		// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-		// Show pdf attachments in a new window
-		// if (LinkUtil.isPDF(url) && isUploadsURL) {
-		// 	ipcRenderer.send('pdf-view', url);
-		// 	return;
-		// }
-
-		// download txt, mp3, mp4 etc.. by using downloadURL in the
-		// main process which allows the user to save the files to their desktop
-		// and not trigger webview reload while image in webview will
-		// do nothing and will not save it
-
-		// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-		// if (!LinkUtil.isImage(url) && !LinkUtil.isPDF(url) && isUploadsURL) {
-		if (!LinkUtil.isImage(url) && isUploadsURL) {
-			ipcRenderer.send('downloadFile', url, downloadPath);
-			ipcRenderer.once('downloadFileCompleted', (_event: Event, filePath: string, fileName: string) => {
-				const downloadNotification = new Notification('Download Complete', {
-					body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `Click to open ${fileName}`,
-					silent: true // We'll play our own sound - ding.ogg
-				});
-
-				// Play sound to indicate download complete
-				if (!ConfigUtil.getConfigItem('silent')) {
-					dingSound.play();
-				}
-
-				downloadNotification.addEventListener('click', () => {
-					if (shouldShowInFolder) {
-						// Reveal file in download folder
-						shell.showItemInFolder(filePath);
-					} else {
-						// Open file in the default native app
-						shell.openItem(filePath);
-					}
-				});
-				ipcRenderer.removeAllListeners('downloadFileFailed');
-			});
-
-			ipcRenderer.once('downloadFileFailed', () => {
-				// Automatic download failed, so show save dialog prompt and download
-				// through webview
-				this.$el.downloadURL(url);
-				ipcRenderer.removeAllListeners('downloadFileCompleted');
-			});
-			return;
-		}
-
-		// open internal urls inside the current webview.
-		this.$el.loadURL(url);
-	} else {
-		event.preventDefault();
-		shell.openExternal(url);
-	}
-}
-
-export = handleExternalLink;

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

@@ -1,68 +1,93 @@
-'use strict';
+import process from "node:process";
 
-import { ipcRenderer } from 'electron';
+import {type Html, html} from "../../../common/html.ts";
+import {ipcRenderer} from "../typed-ipc-renderer.ts";
 
-import Tab = require('./tab');
-import SystemUtil = require('../utils/system-util');
+import {generateNodeFromHtml} from "./base.ts";
+import Tab, {type TabProperties} from "./tab.ts";
+import type WebView from "./webview.ts";
 
-class ServerTab extends Tab {
-	$badge: Element;
+export type ServerTabProperties = {
+  webview: Promise<WebView>;
+} & TabProperties;
 
-	template(): string {
-		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tooltip" style="display:none">${this.props.name}</div>
-					<div class="server-tab-badge"></div>
-					<div class="server-tab">
-					<img class="server-icons" src='${this.props.icon}'/>
-					</div>
-					<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
-				</div>`;
-	}
+export default class ServerTab extends Tab {
+  webview: Promise<WebView>;
+  $el: Element;
+  $name: Element;
+  $icon: HTMLImageElement;
+  $badge: Element;
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
-	}
+  constructor({webview, ...properties}: ServerTabProperties) {
+    super(properties);
 
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
-	}
+    this.webview = webview;
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    this.properties.$root.append(this.$el);
+    this.registerListeners();
+    this.$name = this.$el.querySelector(".server-tooltip")!;
+    this.$icon = this.$el.querySelector(".server-icons")!;
+    this.$badge = this.$el.querySelector(".server-tab-badge")!;
+  }
 
-	updateBadge(count: number): void {
-		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count.toString();
-			this.$badge.innerHTML = formattedCount;
-			this.$badge.classList.add('active');
-		} else {
-			this.$badge.classList.remove('active');
-		}
-	}
+  override async activate(): Promise<void> {
+    await super.activate();
+    (await this.webview).load();
+  }
 
-	generateShortcutText(): string {
-		// Only provide shortcuts for server [0..10]
-		if (this.props.index >= 10) {
-			return '';
-		}
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    (await this.webview).hide();
+  }
 
-		const shownIndex = this.props.index + 1;
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    (await this.webview).destroy();
+  }
 
-		let shortcutText = '';
+  templateHtml(): Html {
+    return html`
+      <div class="tab" data-tab-id="${this.properties.tabIndex}">
+        <div class="server-tooltip" style="display:none">
+          ${this.properties.label}
+        </div>
+        <div class="server-tab-badge"></div>
+        <div class="server-tab">
+          <img class="server-icons" src="${this.properties.icon}" />
+        </div>
+        <div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+      </div>
+    `;
+  }
 
-		if (SystemUtil.getOS() === 'Mac') {
-			shortcutText = `⌘ ${shownIndex}`;
-		} else {
-			shortcutText = `Ctrl+${shownIndex}`;
-		}
+  setLabel(label: string): void {
+    this.properties.label = label;
+    this.$name.textContent = label;
+  }
 
-		// Array index == Shown index - 1
-		ipcRenderer.send('switch-server-tab', shownIndex - 1);
+  setIcon(icon: string): void {
+    this.properties.icon = icon;
+    this.$icon.src = icon;
+  }
 
-		return shortcutText;
-	}
+  updateBadge(count: number): void {
+    this.$badge.textContent = count > 999 ? "1K+" : count.toString();
+    this.$badge.classList.toggle("active", count > 0);
+  }
+
+  generateShortcutText(): string {
+    // Only provide shortcuts for server [0..9]
+    if (this.properties.index >= 9) {
+      return "";
+    }
+
+    const shownIndex = this.properties.index + 1;
+
+    // Array index == Shown index - 1
+    ipcRenderer.send("switch-server-tab", shownIndex - 1);
+
+    return process.platform === "darwin"
+      ? `⌘${shownIndex}`
+      : `Ctrl+${shownIndex}`;
+  }
 }
-
-export = ServerTab;

app/renderer/js/components/tab.ts

@@ -1,48 +1,46 @@
-'use strict';
+import type {TabPage, TabRole} from "../../../common/types.ts";
 
-import WebView = require('./webview');
-import BaseComponent = require('./base');
+export type TabProperties = {
+  role: TabRole;
+  page?: TabPage;
+  icon?: string;
+  label: string;
+  $root: Element;
+  onClick: () => void;
+  index: number;
+  tabIndex: number;
+  onHover?: () => void;
+  onHoverOut?: () => void;
+  materialIcon?: string;
+  onDestroy?: () => void;
+};
 
-// TODO: TypeScript - Type annotate props
-interface TabProps {
-	[key: string]: any;
+export default abstract class Tab {
+  abstract $el: Element;
+
+  constructor(readonly properties: TabProperties) {}
+
+  registerListeners(): void {
+    this.$el.addEventListener("click", this.properties.onClick);
+
+    if (this.properties.onHover !== undefined) {
+      this.$el.addEventListener("mouseover", this.properties.onHover);
+    }
+
+    if (this.properties.onHoverOut !== undefined) {
+      this.$el.addEventListener("mouseout", this.properties.onHoverOut);
+    }
+  }
+
+  async activate(): Promise<void> {
+    this.$el.classList.add("active");
+  }
+
+  async deactivate(): Promise<void> {
+    this.$el.classList.remove("active");
+  }
+
+  async destroy(): Promise<void> {
+    this.$el.remove();
+  }
 }
-
-class Tab extends BaseComponent {
-	props: TabProps;
-	webview: WebView;
-	$el: Element;
-	constructor(props: TabProps) {
-		super();
-
-		this.props = props;
-		this.webview = this.props.webview;
-	}
-
-	registerListeners(): void {
-		this.$el.addEventListener('click', this.props.onClick);
-		this.$el.addEventListener('mouseover', this.props.onHover);
-		this.$el.addEventListener('mouseout', this.props.onHoverOut);
-	}
-
-	showNetworkError(): void {
-		this.webview.forceLoad();
-	}
-
-	activate(): void {
-		this.$el.classList.add('active');
-		this.webview.load();
-	}
-
-	deactivate(): void {
-		this.$el.classList.remove('active');
-		this.webview.hide();
-	}
-
-	destroy(): void {
-		this.$el.parentNode.removeChild(this.$el);
-		this.webview.$el.parentNode.removeChild(this.webview.$el);
-	}
-}
-
-export = Tab;

app/renderer/js/components/webview.ts

@@ -1,297 +1,342 @@
-'use strict';
-import { remote } from 'electron';
+import type {WebContents} from "electron/main";
+import fs from "node:fs";
 
-import path = require('path');
-import fs = require('fs');
-import ConfigUtil = require('../utils/config-util');
-import SystemUtil = require('../utils/system-util');
-import BaseComponent = require('../components/base');
-import handleExternalLink = require('../components/handle-external-link');
+import * as remote from "@electron/remote";
+import {app, dialog} from "@electron/remote";
 
-const { app, dialog } = remote;
+import * as ConfigUtil from "../../../common/config-util.ts";
+import {type Html, html} from "../../../common/html.ts";
+import * as t from "../../../common/translation-util.ts";
+import type {RendererMessage} from "../../../common/typed-ipc.ts";
+import type {TabRole} from "../../../common/types.ts";
+import preloadCss from "../../css/preload.css?raw";
+import {ipcRenderer} from "../typed-ipc-renderer.ts";
+import * as SystemUtil from "../utils/system-util.ts";
 
-const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
+import {generateNodeFromHtml} from "./base.ts";
+import {contextMenu} from "./context-menu.ts";
 
-// TODO: TypeScript - Type annotate WebViewProps.
-interface WebViewProps {
-	[key: string]: any;
+const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
+
+type WebViewProperties = {
+  $root: Element;
+  rootWebContents: WebContents;
+  index: number;
+  tabIndex: number;
+  url: string;
+  role: TabRole;
+  isActive: () => boolean;
+  switchLoading: (loading: boolean, url: string) => void;
+  onNetworkError: (index: number) => void;
+  preload?: string;
+  onTitleChange: () => void;
+  hasPermission?: (origin: string, permission: string) => boolean;
+  unsupportedMessage?: string;
+};
+
+export default class WebView {
+  static templateHtml(properties: WebViewProperties): Html {
+    return html`
+      <div class="webview-pane">
+        <div
+          class="webview-unsupported"
+          ${properties.unsupportedMessage === undefined ? html`hidden` : html``}
+        >
+          <span class="webview-unsupported-message"
+            >${properties.unsupportedMessage ?? ""}</span
+          >
+          <span class="webview-unsupported-dismiss">×</span>
+        </div>
+        <webview
+          data-tab-id="${properties.tabIndex}"
+          src="${properties.url}"
+          ${properties.preload === undefined
+            ? html``
+            : html`preload="${properties.preload}"`}
+          partition="persist:webviewsession"
+          allowpopups
+        >
+        </webview>
+      </div>
+    `;
+  }
+
+  static async create(properties: WebViewProperties): Promise<WebView> {
+    const $pane = generateNodeFromHtml(
+      WebView.templateHtml(properties),
+    ) as HTMLElement;
+    properties.$root.append($pane);
+
+    const $webview: HTMLElement = $pane.querySelector(":scope > webview")!;
+    await new Promise<void>((resolve) => {
+      $webview.addEventListener(
+        "did-attach",
+        () => {
+          resolve();
+        },
+        true,
+      );
+    });
+
+    // Work around https://github.com/electron/electron/issues/26904
+    function getWebContentsIdFunction(
+      this: undefined,
+      selector: string,
+    ): number {
+      return document
+        .querySelector<Electron.WebviewTag>(selector)!
+        .getWebContentsId();
+    }
+
+    const selector = `webview[data-tab-id="${CSS.escape(
+      `${properties.tabIndex}`,
+    )}"]`;
+    const webContentsId: unknown =
+      await properties.rootWebContents.executeJavaScript(
+        `(${getWebContentsIdFunction.toString()})(${JSON.stringify(selector)})`,
+      );
+    if (typeof webContentsId !== "number") {
+      throw new TypeError("Failed to get WebContents ID");
+    }
+
+    return new WebView(properties, $pane, $webview, webContentsId);
+  }
+
+  badgeCount = 0;
+  loading = true;
+  private customCss: string | false | null;
+  private readonly $webviewsContainer: DOMTokenList;
+  private readonly $unsupported: HTMLElement;
+  private readonly $unsupportedMessage: HTMLElement;
+  private readonly $unsupportedDismiss: HTMLElement;
+  private unsupportedDismissed = false;
+
+  private constructor(
+    readonly properties: WebViewProperties,
+    private readonly $pane: HTMLElement,
+    private readonly $webview: HTMLElement,
+    readonly webContentsId: number,
+  ) {
+    this.customCss = ConfigUtil.getConfigItem("customCSS", null);
+    this.$webviewsContainer = document.querySelector(
+      "#webviews-container",
+    )!.classList;
+    this.$unsupported = $pane.querySelector(".webview-unsupported")!;
+    this.$unsupportedMessage = $pane.querySelector(
+      ".webview-unsupported-message",
+    )!;
+    this.$unsupportedDismiss = $pane.querySelector(
+      ".webview-unsupported-dismiss",
+    )!;
+
+    this.registerListeners();
+  }
+
+  destroy(): void {
+    this.$pane.remove();
+  }
+
+  getWebContents(): WebContents {
+    return remote.webContents.fromId(this.webContentsId)!;
+  }
+
+  showNotificationSettings(): void {
+    this.send("show-notification-settings");
+    this.focus();
+  }
+
+  focus(): void {
+    this.$webview.focus();
+    // Work around https://github.com/electron/electron/issues/31918
+    this.$webview.shadowRoot?.querySelector("iframe")?.focus();
+  }
+
+  hide(): void {
+    this.$pane.classList.remove("active");
+  }
+
+  load(): void {
+    this.show();
+  }
+
+  zoomIn(): void {
+    this.getWebContents().zoomLevel += 0.5;
+  }
+
+  zoomOut(): void {
+    this.getWebContents().zoomLevel -= 0.5;
+  }
+
+  zoomActualSize(): void {
+    this.getWebContents().zoomLevel = 0;
+  }
+
+  logOut(): void {
+    this.send("logout");
+  }
+
+  showKeyboardShortcuts(): void {
+    this.send("show-keyboard-shortcuts");
+    this.focus();
+  }
+
+  openDevTools(): void {
+    this.getWebContents().openDevTools();
+  }
+
+  back(): void {
+    if (this.getWebContents().navigationHistory.canGoBack()) {
+      this.getWebContents().navigationHistory.goBack();
+      this.focus();
+    }
+  }
+
+  canGoBackButton(): void {
+    const $backButton = document.querySelector(
+      "#actions-container #back-action",
+    )!;
+    $backButton.classList.toggle(
+      "disable",
+      !this.getWebContents().navigationHistory.canGoBack(),
+    );
+  }
+
+  forward(): void {
+    if (this.getWebContents().navigationHistory.canGoForward()) {
+      this.getWebContents().navigationHistory.goForward();
+    }
+  }
+
+  reload(): void {
+    this.hide();
+    // Shows the loading indicator till the webview is reloaded
+    this.$webviewsContainer.remove("loaded");
+    this.loading = true;
+    this.properties.switchLoading(true, this.properties.url);
+    this.getWebContents().reload();
+  }
+
+  setUnsupportedMessage(unsupportedMessage: string | undefined) {
+    this.$unsupported.hidden =
+      unsupportedMessage === undefined || this.unsupportedDismissed;
+    this.$unsupportedMessage.textContent = unsupportedMessage ?? "";
+  }
+
+  send<Channel extends keyof RendererMessage>(
+    channel: Channel,
+    ...arguments_: Parameters<RendererMessage[Channel]>
+  ): void {
+    ipcRenderer.send("forward-to", this.webContentsId, channel, ...arguments_);
+  }
+
+  private registerListeners(): void {
+    const webContents = this.getWebContents();
+
+    if (shouldSilentWebview) {
+      webContents.setAudioMuted(true);
+    }
+
+    webContents.on("page-title-updated", (_event, title) => {
+      this.badgeCount = this.getBadgeCount(title);
+      this.properties.onTitleChange();
+    });
+
+    this.$webview.addEventListener("did-navigate-in-page", () => {
+      this.canGoBackButton();
+    });
+
+    this.$webview.addEventListener("did-navigate", () => {
+      this.canGoBackButton();
+    });
+
+    webContents.on("page-favicon-updated", (_event, favicons) => {
+      // This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
+      // https://chat.zulip.org/static/images/favicon/favicon-pms.png
+      if (favicons[0].indexOf("favicon-pms") > 0 && app.dock !== undefined) {
+        // This api is only supported on macOS
+        app.dock.setBadge("●");
+        // Bounce the dock
+        if (ConfigUtil.getConfigItem("dockBouncing", true)) {
+          app.dock.bounce();
+        }
+      }
+    });
+
+    webContents.addListener("context-menu", (event, menuParameters) => {
+      contextMenu(webContents, event, menuParameters);
+    });
+
+    this.$webview.addEventListener("dom-ready", () => {
+      this.loading = false;
+      this.properties.switchLoading(false, this.properties.url);
+      this.show();
+    });
+
+    webContents.on("did-fail-load", (_event, _errorCode, errorDescription) => {
+      const hasConnectivityError =
+        SystemUtil.connectivityError.includes(errorDescription);
+      if (hasConnectivityError) {
+        console.error("error", errorDescription);
+        if (!this.properties.url.includes("network.html")) {
+          this.properties.onNetworkError(this.properties.index);
+        }
+      }
+    });
+
+    this.$webview.addEventListener("did-start-loading", () => {
+      this.properties.switchLoading(true, this.properties.url);
+    });
+
+    this.$webview.addEventListener("did-stop-loading", () => {
+      this.properties.switchLoading(false, this.properties.url);
+    });
+
+    this.$unsupportedDismiss.addEventListener("click", () => {
+      this.unsupportedDismissed = true;
+      this.$unsupported.hidden = true;
+    });
+
+    webContents.on("zoom-changed", (event, zoomDirection) => {
+      if (zoomDirection === "in") this.zoomIn();
+      else if (zoomDirection === "out") this.zoomOut();
+    });
+  }
+
+  private getBadgeCount(title: string): number {
+    const messageCountInTitle = /^\((\d+)\)/.exec(title);
+    return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
+  }
+
+  private show(): void {
+    // Do not show WebView if another tab was selected and this tab should be in background.
+    if (!this.properties.isActive()) {
+      return;
+    }
+
+    // To show or hide the loading indicator in the active tab
+    this.$webviewsContainer.toggle("loaded", !this.loading);
+
+    this.$pane.classList.add("active");
+    this.focus();
+    this.properties.onTitleChange();
+    // Injecting preload css in webview to override some css rules
+    (async () => this.getWebContents().insertCSS(preloadCss))();
+
+    // Get customCSS again from config util to avoid warning user again
+    const customCss = ConfigUtil.getConfigItem("customCSS", null);
+    this.customCss = customCss;
+    if (customCss) {
+      if (!fs.existsSync(customCss)) {
+        this.customCss = null;
+        ConfigUtil.setConfigItem("customCSS", null);
+
+        const errorMessage = t.__("The custom CSS previously set is deleted.");
+        dialog.showErrorBox(t.__("Custom CSS file deleted"), errorMessage);
+        return;
+      }
+
+      (async () =>
+        this.getWebContents().insertCSS(fs.readFileSync(customCss, "utf8")))();
+    }
+  }
 }
-
-class WebView extends BaseComponent {
-	props: any;
-	zoomFactor: number;
-	badgeCount: number;
-	loading: boolean;
-	customCSS: string;
-	$webviewsContainer: DOMTokenList;
-	$el: Electron.WebviewTag;
-
-	// This is required because in main.js we access WebView.method as
-	// webview[method].
-	[key: string]: any;
-
-	constructor(props: WebViewProps) {
-		super();
-
-		this.props = props;
-		this.zoomFactor = 1.0;
-		this.loading = true;
-		this.badgeCount = 0;
-		this.customCSS = ConfigUtil.getConfigItem('customCSS');
-		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
-	}
-
-	template(): string {
-		return `<webview
-					class="disabled"
-					data-tab-id="${this.props.tabIndex}"
-					src="${this.props.url}"
-					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
-					disablewebsecurity
-					${this.props.preload ? 'preload="js/preload.js"' : ''}
-					partition="persist:webviewsession"
-					name="${this.props.name}"
-					webpreferences="allowRunningInsecureContent, javascript=yes">
-				</webview>`;
-	}
-
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
-		this.props.$root.append(this.$el);
-
-		this.registerListeners();
-	}
-
-	registerListeners(): void {
-		this.$el.addEventListener('new-window', event => {
-			handleExternalLink.call(this, event);
-		});
-
-		if (shouldSilentWebview) {
-			this.$el.addEventListener('dom-ready', () => {
-				this.$el.setAudioMuted(true);
-			});
-		}
-
-		this.$el.addEventListener('page-title-updated', event => {
-			const { title } = event;
-			this.badgeCount = this.getBadgeCount(title);
-			this.props.onTitleChange();
-		});
-
-		this.$el.addEventListener('did-navigate-in-page', event => {
-			const isSettingPage = event.url.includes('renderer/preference.html');
-			if (isSettingPage) {
-				return;
-			}
-			this.canGoBackButton();
-		});
-
-		this.$el.addEventListener('did-navigate', () => {
-			this.canGoBackButton();
-		});
-
-		this.$el.addEventListener('page-favicon-updated', event => {
-			const { favicons } = event;
-
-			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
-			// https://chat.zulip.org/static/images/favicon/favicon-pms.png
-			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
-				// This api is only supported on macOS
-				app.dock.setBadge('●');
-				// bounce the dock
-				if (ConfigUtil.getConfigItem('dockBouncing')) {
-					app.dock.bounce();
-				}
-			}
-		});
-
-		this.$el.addEventListener('dom-ready', () => {
-			if (this.props.role === 'server') {
-				this.$el.classList.add('onload');
-			}
-			this.loading = false;
-			this.props.switchLoading(false, this.props.url);
-			this.show();
-
-			// Refocus text boxes after reload
-			// Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
-			this.$el.blur();
-			this.$el.focus();
-		});
-
-		this.$el.addEventListener('did-fail-load', event => {
-			const { errorDescription } = event;
-			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
-			if (hasConnectivityErr) {
-				console.error('error', errorDescription);
-				if (!this.props.url.includes('network.html')) {
-					this.props.onNetworkError(this.props.index);
-				}
-			}
-		});
-
-		this.$el.addEventListener('did-start-loading', () => {
-			const isSettingPage = this.props.url.includes('renderer/preference.html');
-			if (!isSettingPage) {
-				this.props.switchLoading(true, this.props.url);
-			}
-			let userAgent = SystemUtil.getUserAgent();
-			if (!userAgent) {
-				SystemUtil.setUserAgent(this.$el.getUserAgent());
-				userAgent = SystemUtil.getUserAgent();
-			}
-			this.$el.setUserAgent(userAgent);
-		});
-
-		this.$el.addEventListener('did-stop-loading', () => {
-			this.props.switchLoading(false, this.props.url);
-		});
-	}
-
-	getBadgeCount(title: string): number {
-		const messageCountInTitle = (/\((\d+)\)/).exec(title);
-		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
-	}
-
-	showNotificationSettings(): void {
-		this.$el.executeJavaScript('showNotificationSettings()');
-	}
-
-	show(): void {
-		// Do not show WebView if another tab was selected and this tab should be in background.
-		if (!this.props.isActive()) {
-			return;
-		}
-
-		// To show or hide the loading indicator in the the active tab
-		if (this.loading) {
-			this.$webviewsContainer.remove('loaded');
-		} else {
-			this.$webviewsContainer.add('loaded');
-		}
-
-		this.$el.classList.remove('disabled');
-		this.$el.classList.add('active');
-		setTimeout(() => {
-			if (this.props.role === 'server') {
-				this.$el.classList.remove('onload');
-			}
-		}, 1000);
-		this.focus();
-		this.props.onTitleChange();
-		// Injecting preload css in webview to override some css rules
-		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
-
-		// get customCSS again from config util to avoid warning user again
-		this.customCSS = ConfigUtil.getConfigItem('customCSS');
-		if (this.customCSS) {
-			if (!fs.existsSync(this.customCSS)) {
-				this.customCSS = null;
-				ConfigUtil.setConfigItem('customCSS', null);
-
-				const errMsg = 'The custom css previously set is deleted!';
-				dialog.showErrorBox('custom css file deleted!', errMsg);
-				return;
-			}
-
-			this.$el.insertCSS(fs.readFileSync(path.resolve(__dirname, this.customCSS), 'utf8'));
-		}
-	}
-
-	focus(): void {
-		// focus Webview and it's contents when Window regain focus.
-		const webContents = this.$el.getWebContents();
-		// HACK: webContents.isFocused() seems to be true even without the element
-		// being in focus. So, we check against `document.activeElement`.
-		if (webContents && this.$el !== document.activeElement) {
-			// HACK: Looks like blur needs to be called on the previously focused
-			// element to transfer focus correctly, in Electron v3.0.10
-			// See https://github.com/electron/electron/issues/15718
-			(document.activeElement as HTMLElement).blur();
-			this.$el.focus();
-			webContents.focus();
-		}
-	}
-
-	hide(): void {
-		this.$el.classList.add('disabled');
-		this.$el.classList.remove('active');
-	}
-
-	load(): void {
-		if (this.$el) {
-			this.show();
-		} else {
-			this.init();
-		}
-	}
-
-	zoomIn(): void {
-		this.zoomFactor += 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	zoomOut(): void {
-		this.zoomFactor -= 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	zoomActualSize(): void {
-		this.zoomFactor = 1.0;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	logOut(): void {
-		this.$el.executeJavaScript('logout()');
-	}
-
-	showShortcut(): void {
-		this.$el.executeJavaScript('shortcut()');
-	}
-
-	openDevTools(): void {
-		this.$el.openDevTools();
-	}
-
-	back(): void {
-		if (this.$el.canGoBack()) {
-			this.$el.goBack();
-			this.focus();
-		}
-	}
-
-	canGoBackButton(): void {
-		const $backButton = document.querySelector('#actions-container #back-action');
-		if (this.$el.canGoBack()) {
-			$backButton.classList.remove('disable');
-		} else {
-			$backButton.classList.add('disable');
-		}
-	}
-
-	forward(): void {
-		if (this.$el.canGoForward()) {
-			this.$el.goForward();
-		}
-	}
-
-	reload(): void {
-		this.hide();
-		// Shows the loading indicator till the webview is reloaded
-		this.$webviewsContainer.remove('loaded');
-		this.loading = true;
-		this.props.switchLoading(true, this.props.url);
-		this.$el.reload();
-	}
-
-	forceLoad(): void {
-		this.init();
-	}
-
-	send(channel: string, ...param: any[]): void {
-		this.$el.send(channel, ...param);
-	}
-}
-
-export = WebView;

app/renderer/js/electron-bridge.ts

@@ -1,59 +1,122 @@
-import { ipcRenderer } from 'electron';
+import * as z from "zod";
 
-import events = require('events');
+import {
+  type ClipboardDecrypter,
+  ClipboardDecrypterImplementation,
+} from "./clipboard-decrypter.ts";
+import {type NotificationData, newNotification} from "./notification/index.ts";
+import {ipcRenderer} from "./typed-ipc-renderer.ts";
 
-type ListenerType = ((...args: any[]) => void);
+type ListenerType = (...arguments_: unknown[]) => void;
 
-// we have and will have some non camelcase stuff
-// while working with zulip so just turning the rule off
-// for the whole file.
-/* eslint-disable @typescript-eslint/camelcase */
-class ElectronBridge extends events {
-	send_notification_reply_message_supported: boolean;
-	idle_on_system: boolean;
-	last_active_on_system: number;
+/* eslint-disable @typescript-eslint/naming-convention */
+export type ElectronBridge = {
+  send_event: (eventName: string, ...arguments_: unknown[]) => boolean;
+  on_event: (eventName: string, listener: ListenerType) => void;
+  new_notification: (
+    title: string,
+    options: NotificationOptions,
+    dispatch: (type: string, eventInit: EventInit) => boolean,
+  ) => NotificationData;
+  get_idle_on_system: () => boolean;
+  get_last_active_on_system: () => number;
+  get_send_notification_reply_message_supported: () => boolean;
+  set_send_notification_reply_message_supported: (value: boolean) => void;
+  decrypt_clipboard: (version: number) => ClipboardDecrypter;
+};
+/* eslint-enable @typescript-eslint/naming-convention */
 
-	constructor() {
-		super();
-		this.send_notification_reply_message_supported = false;
-		// Indicates if the user is idle or not
-		this.idle_on_system = false;
+let notificationReplySupported = false;
+// Indicates if the user is idle or not
+let idle = false;
+// Indicates the time at which user was last active
+let lastActive = Date.now();
 
-		// Indicates the time at which user was last active
-		this.last_active_on_system = Date.now();
-	}
+export const bridgeEvents = new EventTarget();
 
-	send_event(eventName: string | symbol, ...args: any[]): void {
-		this.emit(eventName, ...args);
-	}
-
-	on_event(eventName: string, listener: ListenerType): void {
-		this.on(eventName, listener);
-	}
+export class BridgeEvent extends Event {
+  constructor(
+    type: string,
+    public readonly arguments_: unknown[] = [],
+  ) {
+    super(type);
+  }
 }
 
-const electron_bridge = new ElectronBridge();
+/* eslint-disable @typescript-eslint/naming-convention */
+const electron_bridge: ElectronBridge = {
+  send_event: (eventName: string, ...arguments_: unknown[]): boolean =>
+    bridgeEvents.dispatchEvent(new BridgeEvent(eventName, arguments_)),
 
-electron_bridge.on('total_unread_count', (...args) => {
-	ipcRenderer.send('unread-count', ...args);
+  on_event(eventName: string, listener: ListenerType): void {
+    bridgeEvents.addEventListener(eventName, (event) => {
+      listener(...z.instanceof(BridgeEvent).parse(event).arguments_);
+    });
+  },
+
+  new_notification: (
+    title: string,
+    options: NotificationOptions,
+    dispatch: (type: string, eventInit: EventInit) => boolean,
+  ): NotificationData => newNotification(title, options, dispatch),
+
+  get_idle_on_system: (): boolean => idle,
+
+  get_last_active_on_system: (): number => lastActive,
+
+  get_send_notification_reply_message_supported: (): boolean =>
+    notificationReplySupported,
+
+  set_send_notification_reply_message_supported(value: boolean): void {
+    notificationReplySupported = value;
+  },
+
+  decrypt_clipboard: (version: number): ClipboardDecrypter =>
+    new ClipboardDecrypterImplementation(version),
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
+bridgeEvents.addEventListener("total_unread_count", (event) => {
+  const [unreadCount] = z
+    .tuple([z.number()])
+    .parse(z.instanceof(BridgeEvent).parse(event).arguments_);
+  ipcRenderer.send("unread-count", unreadCount);
 });
 
-electron_bridge.on('realm_name', realmName => {
-	const serverURL = location.origin;
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
+bridgeEvents.addEventListener("realm_name", (event) => {
+  const [realmName] = z
+    .tuple([z.string()])
+    .parse(z.instanceof(BridgeEvent).parse(event).arguments_);
+  const serverUrl = location.origin;
+  ipcRenderer.send("realm-name-changed", serverUrl, realmName);
 });
 
-electron_bridge.on('realm_icon_url', iconURL => {
-	const serverURL = location.origin;
-	iconURL = iconURL.includes('http') ? iconURL : `${serverURL}${iconURL}`;
-	ipcRenderer.send('realm-icon-changed', serverURL, iconURL);
+bridgeEvents.addEventListener("realm_icon_url", (event) => {
+  const [iconUrl] = z
+    .tuple([z.string()])
+    .parse(z.instanceof(BridgeEvent).parse(event).arguments_);
+  const serverUrl = location.origin;
+  ipcRenderer.send(
+    "realm-icon-changed",
+    serverUrl,
+    iconUrl.includes("http") ? iconUrl : `${serverUrl}${iconUrl}`,
+  );
 });
 
-// this follows node's idiomatic implementation of event
+// Set user as active and update the time of last activity
+ipcRenderer.on("set-active", () => {
+  idle = false;
+  lastActive = Date.now();
+});
+
+// Set user as idle and time of last activity is left unchanged
+ipcRenderer.on("set-idle", () => {
+  idle = true;
+});
+
+// This follows node's idiomatic implementation of event
 // emitters to make event handling more simpler instead of using
-// functions zulip side will emit event using ElectronBrigde.send_event
+// functions zulip side will emit event using ElectronBridge.send_event
 // which is alias of .emit and on this side we can handle the data by adding
 // a listener for the event.
-export = electron_bridge;
-
-/* eslint-enable @typescript-eslint/camelcase */
+export default electron_bridge;

app/renderer/js/feedback.ts

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

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

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

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

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

app/renderer/js/notification/helpers.ts

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

app/renderer/js/notification/index.ts

@@ -1,25 +1,41 @@
-'use strict';
+import {ipcRenderer} from "../typed-ipc-renderer.ts";
 
-import { remote } from 'electron';
-import * as params from '../utils/params-util';
-import { appId, loadBots } from './helpers';
+export type NotificationData = {
+  close: () => void;
+  title: string;
+  dir: NotificationDirection;
+  lang: string;
+  body: string;
+  tag: string;
+  icon: string;
+  data: unknown;
+};
 
-import DefaultNotification = require('./default-notification');
-const { app } = remote;
+export function newNotification(
+  title: string,
+  options: NotificationOptions,
+  dispatch: (type: string, eventInit: EventInit) => boolean,
+): NotificationData {
+  const notification = new Notification(title, {...options, silent: true});
+  for (const type of ["click", "close", "error", "show"]) {
+    notification.addEventListener(type, (event) => {
+      if (type === "click") ipcRenderer.send("focus-this-webview");
+      if (!dispatch(type, event)) {
+        event.preventDefault();
+      }
+    });
+  }
 
-// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
-// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
-app.setAppUserModelId(appId);
-
-window.Notification = DefaultNotification;
-
-if (process.platform === 'darwin') {
-	window.Notification = require('./darwin-notifications');
+  return {
+    close() {
+      notification.close();
+    },
+    title: notification.title,
+    dir: notification.dir,
+    lang: notification.lang,
+    body: notification.body,
+    tag: notification.tag,
+    icon: notification.icon,
+    data: notification.data,
+  };
 }
-
-window.addEventListener('load', () => {
-	// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
-	if (params.isPageParams() && page_params.realm_uri) {
-		loadBots();
-	}
-});

app/renderer/js/pages/about.ts

@@ -0,0 +1,53 @@
+import {app} from "@electron/remote";
+
+import {Html, html} from "../../../common/html.ts";
+import {bundleUrl} from "../../../common/paths.ts";
+import * as t from "../../../common/translation-util.ts";
+import {generateNodeFromHtml} from "../components/base.ts";
+
+export class AboutView {
+  static async create(): Promise<AboutView> {
+    return new AboutView(
+      await (await fetch(new URL("app/renderer/about.html", bundleUrl))).text(),
+    );
+  }
+
+  readonly $view: HTMLElement;
+
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    const $shadow = this.$view.attachShadow({mode: "open"});
+    $shadow.innerHTML = templateHtml;
+    $shadow.querySelector("#version")!.textContent = `v${app.getVersion()}`;
+    const maintenanceInfoHtml = html`
+      <div class="maintenance-info">
+        <p class="detail maintainer">
+          ${new Html({
+            html: t.__("Maintained by {{{link}}}Zulip{{{endLink}}}", {
+              link: '<a href="https://zulip.com" target="_blank" rel="noopener noreferrer">',
+              endLink: "</a>",
+            }),
+          })}
+        </p>
+        <p class="detail license">
+          ${new Html({
+            html: t.__(
+              "Available under the {{{link}}}Apache 2.0 License{{{endLink}}}",
+              {
+                link: '<a href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">',
+                endLink: "</a>",
+              },
+            ),
+          })}
+        </p>
+      </div>
+    `;
+    $shadow
+      .querySelector(".about")!
+      .append(generateNodeFromHtml(maintenanceInfoHtml));
+  }
+
+  destroy() {
+    // Do nothing.
+  }
+}

app/renderer/js/pages/network.ts

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

app/renderer/js/pages/preference/add-certificate.ts

@@ -1,100 +0,0 @@
-'use-strict';
-
-import { remote, OpenDialogOptions } from 'electron';
-
-import path = require('path');
-import BaseComponent = require('../../components/base');
-import CertificateUtil = require('../../utils/certificate-util');
-import DomainUtil = require('../../utils/domain-util');
-import t = require('../../utils/translation-util');
-
-const { dialog } = remote;
-
-class AddCertificate extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	_certFile: string;
-	$addCertificate: Element | null;
-	addCertificateButton: Element | null;
-	serverUrl: HTMLInputElement | null;
-	constructor(props: any) {
-		super();
-		this.props = props;
-		this._certFile = '';
-	}
-
-	template(): string {
-		return `
-			<div class="settings-card certificates-card">
-				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
-				</div>
-				<div class="certificate-input">
-					<div>${t.__('Certificate file')}</div>
-					<button class="green" id="add-certificate-button">${t.__('Upload')}</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$addCertificate = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$addCertificate);
-		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
-		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	validateAndAdd(): void {
-		const certificate = this._certFile;
-		const serverUrl = this.serverUrl.value;
-		if (certificate !== '' && serverUrl !== '') {
-			const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
-			const fileName = path.basename(certificate);
-			const copy = CertificateUtil.copyCertificate(server, certificate, fileName);
-			if (!copy) {
-				return;
-			}
-			CertificateUtil.setCertificate(server, fileName);
-			dialog.showMessageBox({
-				title: 'Success',
-				message: `Certificate saved!`
-			});
-			this.serverUrl.value = '';
-		} else {
-			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
-				'Enter an Organization URL' : 'Choose certificate file'}`);
-		}
-	}
-
-	addHandler(): void {
-		const showDialogOptions: OpenDialogOptions = {
-			title: 'Select file',
-			properties: ['openFile'],
-			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
-		};
-		dialog.showOpenDialog(showDialogOptions, selectedFile => {
-			if (selectedFile) {
-				this._certFile = selectedFile[0] || '';
-				this.validateAndAdd();
-			}
-		});
-	}
-
-	initListeners(): void {
-		this.addCertificateButton.addEventListener('click', () => {
-			this.addHandler();
-		});
-
-		this.serverUrl.addEventListener('keypress', event => {
-			const EnterkeyCode = event.keyCode;
-
-			if (EnterkeyCode === 13) {
-				this.addHandler();
-			}
-		});
-	}
-}
-
-export = AddCertificate;

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

@@ -1,63 +0,0 @@
-'use strict';
-import { app } from 'electron';
-
-import electron = require('electron');
-import ConfigUtil = require('../../utils/config-util');
-
-let instance: BadgeSettings | any = null;
-
-class BadgeSettings {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
-		if (process.platform === 'win32') {
-			this.updateOverlayIcon(messageCount, mainWindow);
-		} else {
-			// This should work on both macOS and Linux
-			app.setBadgeCount(messageCount);
-		}
-	}
-
-	hideBadgeCount(mainWindow: electron.BrowserWindow): void {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(0);
-		}
-		if (process.platform === 'win32') {
-			mainWindow.setOverlayIcon(null, '');
-		}
-	}
-
-	updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
-		if (ConfigUtil.getConfigItem('badgeOption', true)) {
-			this.showBadgeCount(badgeCount, mainWindow);
-		} else {
-			this.hideBadgeCount(mainWindow);
-		}
-	}
-
-	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);
-		}
-	}
-
-	updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
-		const img = electron.nativeImage.createFromDataURL(data);
-		mainWindow.setOverlayIcon(img, text);
-	}
-}
-
-export = new BadgeSettings();

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

@@ -1,50 +1,83 @@
-'use strict';
+import {type Html, html} from "../../../../common/html.ts";
+import * as t from "../../../../common/translation-util.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
+import {ipcRenderer} from "../../typed-ipc-renderer.ts";
 
-import { ipcRenderer } from 'electron';
+type BaseSectionProperties = {
+  $element: HTMLElement;
+  disabled?: boolean;
+  value: boolean;
+  clickHandler: () => void;
+};
 
-import BaseComponent = require('../../components/base');
+export function generateSettingOption(properties: BaseSectionProperties): void {
+  const {$element, disabled, value, clickHandler} = properties;
 
-class BaseSection extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	generateSettingOption(props: any): void {
-		const {$element, disabled, value, clickHandler} = props;
+  $element.textContent = "";
 
-		$element.innerHTML = '';
+  const $optionControl = generateNodeFromHtml(
+    generateOptionHtml(value, disabled),
+  );
+  $element.append($optionControl);
 
-		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled));
-		$element.append($optionControl);
-
-		if (!disabled) {
-			$optionControl.addEventListener('click', clickHandler);
-		}
-	}
-
-	generateOptionTemplate(settingOption: boolean, disabled: boolean): string {
-		const label = disabled ? `<label class="disallowed" title="Setting locked by system administrator."/>` : `<label/>`;
-		if (settingOption) {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox" checked disabled>
-					  ${label}
-					</div>
-				</div>
-			`;
-		} else {
-			return `
-				<div class="action">
-					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox">
-					  ${label}
-					</div>
-				</div>
-			`;
-		}
-	}
-
-	reloadApp(): void {
-		ipcRenderer.send('forward-message', 'reload-viewer');
-	}
+  if (!disabled) {
+    $optionControl.addEventListener("click", clickHandler);
+  }
 }
 
-export = BaseSection;
+export function generateOptionHtml(
+  settingOption: boolean,
+  disabled?: boolean,
+): Html {
+  const labelHtml = disabled
+    ? html`<label
+        class="disallowed"
+        title="${t.__("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,90 +1,67 @@
-'use strict';
+import {html} from "../../../../common/html.ts";
+import * as t from "../../../../common/translation-util.ts";
+import {ipcRenderer} from "../../typed-ipc-renderer.ts";
+import * as DomainUtil from "../../utils/domain-util.ts";
 
-import { ipcRenderer } from 'electron';
+import {reloadApp} from "./base-section.ts";
+import {initFindAccounts} from "./find-accounts.ts";
+import {initServerInfoForm} from "./server-info-form.ts";
 
-import BaseSection = require('./base-section');
-import DomainUtil = require('../../utils/domain-util');
-import ServerInfoForm = require('./server-info-form');
-import AddCertificate = require('./add-certificate');
-import FindAccounts = require('./find-accounts');
-import t = require('../../utils/translation-util');
+type ConnectedOrgSectionProperties = {
+  $root: Element;
+};
 
-class ConnectedOrgSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$serverInfoContainer: Element | null;
-	$existingServers: Element | null;
-	$newOrgButton: HTMLButtonElement | null;
-	$addCertificateContainer: Element | null;
-	$findAccountsContainer: Element | null;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
+export function initConnectedOrgSection({
+  $root,
+}: ConnectedOrgSectionProperties): void {
+  $root.textContent = "";
 
-	template(): string {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">${t.__('Connected organizations')}</div>
-				<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
-				<div id="server-info-container"></div>
-				<div id="new-org-button"><button class="green sea w-250">${t.__('Connect to another organization')}</button></div>
-				<div class="page-title">${t.__('Add Custom Certificates')}</div>
-				<div id="add-certificate-container"></div>
-				<div class="page-title">${t.__('Find accounts by email')}</div>
-				<div id="find-accounts-container"></div>
-			</div>
-		`;
-	}
+  const servers = DomainUtil.getDomains();
+  $root.innerHTML = html`
+    <div class="settings-pane" id="server-settings-pane">
+      <div class="page-title">${t.__("Connected organizations")}</div>
+      <div class="title" id="existing-servers">
+        ${t.__("All the connected organizations 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;
 
-	init(): void {
-		this.initServers();
-	}
+  const $serverInfoContainer = $root.querySelector("#server-info-container")!;
+  const $existingServers = $root.querySelector("#existing-servers")!;
+  const $newOrgButton: HTMLButtonElement =
+    $root.querySelector("#new-org-button")!;
+  const $findAccountsContainer = $root.querySelector(
+    "#find-accounts-container",
+  )!;
 
-	initServers(): void {
-		this.props.$root.innerHTML = '';
+  const noServerText = t.__(
+    "All the connected organizations will appear here.",
+  );
+  // Show noServerText if no servers are there otherwise hide it
+  $existingServers.textContent = servers.length === 0 ? noServerText : "";
 
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
+  for (const [i, server] of servers.entries()) {
+    initServerInfoForm({
+      $root: $serverInfoContainer,
+      server,
+      index: i,
+      onChange: reloadApp,
+    });
+  }
 
-		this.$serverInfoContainer = document.querySelector('#server-info-container');
-		this.$existingServers = document.querySelector('#existing-servers');
-		this.$newOrgButton = document.querySelector('#new-org-button');
-		this.$addCertificateContainer = document.querySelector('#add-certificate-container');
-		this.$findAccountsContainer = document.querySelector('#find-accounts-container');
+  $newOrgButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-org-tab");
+  });
 
-		const noServerText = t.__('All the connected orgnizations will appear here');
-		// Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
-
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-
-		this.$newOrgButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'open-org-tab');
-		});
-
-		this.initAddCertificate();
-		this.initFindAccounts();
-	}
-
-	initAddCertificate(): void {
-		new AddCertificate({
-			$root: this.$addCertificateContainer
-		}).init();
-	}
-
-	initFindAccounts(): void {
-		new FindAccounts({
-			$root: this.$findAccountsContainer
-		}).init();
-	}
+  initFindAccounts({
+    $root: $findAccountsContainer,
+  });
 }
-
-export = ConnectedOrgSection;

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

@@ -1,78 +1,66 @@
-'use-strict';
+import {html} from "../../../../common/html.ts";
+import * as LinkUtil from "../../../../common/link-util.ts";
+import * as t from "../../../../common/translation-util.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
 
-import { shell } from 'electron';
+type FindAccountsProperties = {
+  $root: Element;
+};
 
-import BaseComponent = require('../../components/base');
-import t = require('../../utils/translation-util');
+async function findAccounts(url: string): Promise<void> {
+  if (!url) {
+    return;
+  }
 
-class FindAccounts extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$findAccounts: Element | null;
-	$findAccountsButton: Element | null;
-	$serverUrlField: HTMLInputElement | null;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
+  if (!url.startsWith("http")) {
+    url = "https://" + url;
+  }
 
-	template(): string {
-		return `
-			<div class="settings-card certificate-card">
-				<div class="certificate-input">
-					<div>${t.__('Organization URL')}</div>
-					<input class="setting-input-value" value="zulipchat.com"/>
-				</div>
-				<div class="certificate-input">
-					<button class="green w-150" id="find-accounts-button">${t.__('Find accounts')}</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$findAccounts = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$findAccounts);
-		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
-		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	findAccounts(url: string): void {
-		if (!url) {
-			return;
-		}
-		if (!url.startsWith('http')) {
-			url = 'https://' + url;
-		}
-		shell.openExternal(url + '/accounts/find');
-	}
-
-	initListeners(): void {
-		this.$findAccountsButton.addEventListener('click', () => {
-			this.findAccounts(this.$serverUrlField.value);
-		});
-
-		this.$serverUrlField.addEventListener('click', () => {
-			if (this.$serverUrlField.value === 'zulipchat.com') {
-				this.$serverUrlField.setSelectionRange(0, 0);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('keypress', event => {
-			if (event.keyCode === 13) {
-				this.findAccounts(this.$serverUrlField.value);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('input', () => {
-			if (this.$serverUrlField.value) {
-				this.$serverUrlField.classList.remove('invalid-input-value');
-			} else {
-				this.$serverUrlField.classList.add('invalid-input-value');
-			}
-		});
-	}
+  await LinkUtil.openBrowser(new URL("/accounts/find", url));
 }
 
-export = FindAccounts;
+export function initFindAccounts(properties: FindAccountsProperties): void {
+  const $findAccounts = generateNodeFromHtml(html`
+    <div class="settings-card certificate-card">
+      <div class="certificate-input">
+        <div>${t.__("Organization URL")}</div>
+        <input class="setting-input-value" value="zulipchat.com" />
+      </div>
+      <div class="certificate-input">
+        <button class="green w-150" id="find-accounts-button">
+          ${t.__("Find accounts")}
+        </button>
+      </div>
+    </div>
+  `);
+  properties.$root.append($findAccounts);
+  const $findAccountsButton = $findAccounts.querySelector(
+    "#find-accounts-button",
+  )!;
+  const $serverUrlField: HTMLInputElement = $findAccounts.querySelector(
+    "input.setting-input-value",
+  )!;
+
+  $findAccountsButton.addEventListener("click", async () => {
+    await findAccounts($serverUrlField.value);
+  });
+
+  $serverUrlField.addEventListener("click", () => {
+    if ($serverUrlField.value === "zulipchat.com") {
+      $serverUrlField.setSelectionRange(0, 0);
+    }
+  });
+
+  $serverUrlField.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+      await findAccounts($serverUrlField.value);
+    }
+  });
+
+  $serverUrlField.addEventListener("input", () => {
+    $serverUrlField.classList.toggle(
+      "invalid-input-value",
+      $serverUrlField.value === "",
+    );
+  });
+}

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

@@ -1,68 +1,74 @@
-'use strict';
+import {type Html, html} from "../../../../common/html.ts";
+import * as t from "../../../../common/translation-util.ts";
+import type {NavigationItem} from "../../../../common/types.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
 
-import BaseComponent = require('../../components/base');
-import t = require('../../utils/translation-util');
+type PreferenceNavigationProperties = {
+  $root: Element;
+  onItemSelected: (navigationItem: NavigationItem) => void;
+};
 
-class PreferenceNav extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	navItems: string[];
-	$el: Element;
-	constructor(props: any) {
-		super();
-		this.props = props;
-		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
-		this.init();
-	}
+export default class PreferenceNavigation {
+  navigationItems: Array<{navigationItem: NavigationItem; label: string}>;
+  $el: Element;
+  constructor(private readonly properties: PreferenceNavigationProperties) {
+    this.navigationItems = [
+      {navigationItem: "General", label: t.__("General")},
+      {navigationItem: "Network", label: t.__("Network")},
+      {navigationItem: "AddServer", label: t.__("Add Organization")},
+      {navigationItem: "Organizations", label: t.__("Organizations")},
+      {navigationItem: "Shortcuts", label: t.__("Shortcuts")},
+    ];
 
-	template(): string {
-		let navItemsTemplate = '';
-		for (const navItem of this.navItems) {
-			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
-		}
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    this.properties.$root.append(this.$el);
+    this.registerListeners();
+  }
 
-		return `
-			<div>
-				<div id="settings-header">${t.__('Settings')}</div>
-				<div id="nav-container">${navItemsTemplate}</div>
-			</div>
-		`;
-	}
+  templateHtml(): Html {
+    const navigationItemsHtml = html``.join(
+      this.navigationItems.map(
+        ({navigationItem, label}) =>
+          html`<div class="nav" id="nav-${navigationItem}">${label}</div>`,
+      ),
+    );
 
-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-	}
+    return html`
+      <div>
+        <div id="settings-header">${t.__("Settings")}</div>
+        <div id="nav-container">${navigationItemsHtml}</div>
+      </div>
+    `;
+  }
 
-	registerListeners(): void {
-		for (const navItem of this.navItems) {
-			const $item = document.querySelector(`#nav-${navItem}`);
-			$item.addEventListener('click', () => {
-				this.props.onItemSelected(navItem);
-			});
-		}
-	}
+  registerListeners(): void {
+    for (const {navigationItem} of this.navigationItems) {
+      const $item = this.$el.querySelector(
+        `#nav-${CSS.escape(navigationItem)}`,
+      )!;
+      $item.addEventListener("click", () => {
+        this.properties.onItemSelected(navigationItem);
+      });
+    }
+  }
 
-	select(navItemToSelect: string): void {
-		for (const navItem of this.navItems) {
-			if (navItem === navItemToSelect) {
-				this.activate(navItem);
-			} else {
-				this.deactivate(navItem);
-			}
-		}
-	}
+  select(navigationItemToSelect: NavigationItem): void {
+    for (const {navigationItem} of this.navigationItems) {
+      if (navigationItem === navigationItemToSelect) {
+        this.activate(navigationItem);
+      } else {
+        this.deactivate(navigationItem);
+      }
+    }
+  }
 
-	activate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
-		$item.classList.add('active');
-	}
+  activate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
+    $item.classList.add("active");
+  }
 
-	deactivate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
-		$item.classList.remove('active');
-	}
+  deactivate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
+    $item.classList.remove("active");
+  }
 }
-
-export = PreferenceNav;

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

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

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

@@ -1,107 +1,108 @@
-'use strict';
+import {dialog} from "@electron/remote";
 
-import { shell, ipcRenderer } from 'electron';
+import {html} from "../../../../common/html.ts";
+import * as LinkUtil from "../../../../common/link-util.ts";
+import * as t from "../../../../common/translation-util.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
+import {ipcRenderer} from "../../typed-ipc-renderer.ts";
+import * as DomainUtil from "../../utils/domain-util.ts";
 
-import BaseComponent = require('../../components/base');
-import DomainUtil = require('../../utils/domain-util');
-import t = require('../../utils/translation-util');
+type NewServerFormProperties = {
+  $root: Element;
+  onChange: () => void;
+};
 
-class NewServerForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$newServerForm: Element;
-	$saveServerButton: HTMLButtonElement;
-	$newServerUrl: HTMLInputElement;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
+export function initNewServerForm({
+  $root,
+  onChange,
+}: NewServerFormProperties): void {
+  const $newServerForm = generateNodeFromHtml(html`
+    <div class="server-input-container">
+      <div class="title">${t.__("Organization URL")}</div>
+      <div class="add-server-info-row">
+        <input
+          class="setting-input-value"
+          autofocus
+          placeholder="${t.__(
+            "your-organization.zulipchat.com or zulip.your-organization.com",
+          )}"
+        />
+      </div>
+      <div class="server-center">
+        <button id="connect">${t.__("Connect")}</button>
+      </div>
+      <div class="server-center">
+        <div class="divider">
+          <hr class="left" />
+          ${t.__("OR")}
+          <hr class="right" />
+        </div>
+      </div>
+      <div class="server-center">
+        <button id="open-create-org-link">
+          ${t.__("Create a new organization")}
+        </button>
+      </div>
+      <div class="server-center">
+        <div class="server-network-option">
+          <span id="open-network-settings"
+            >${t.__("Network and Proxy Settings")}</span
+          >
+          <i class="material-icons open-network-button">open_in_new</i>
+        </div>
+      </div>
+    </div>
+  `);
+  const $saveServerButton: HTMLButtonElement =
+    $newServerForm.querySelector("#connect")!;
+  $root.textContent = "";
+  $root.append($newServerForm);
+  const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
+    "input.setting-input-value",
+  )!;
 
-	template(): string {
-		return `
-			<div class="server-input-container">
-				<div class="title">${t.__('Organization URL')}</div>
-				<div class="add-server-info-row">
-					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
-				</div>
-				<div class="server-center">
-					<div class="server-save-action">
-						<button id="connect">${t.__('Connect')}</button>
-					</div>
-				</div>
-				<div class="server-center">
-					<div class="divider">
-						<hr class="left"/>${t.__('OR')}<hr class="right" />
-					</div>
-				</div>
-				<div class="server-center">
-					<div class="server-save-action">
-						<button id="open-create-org-link">${t.__('Create a new organization')}</button>
-					</div>
-				</div>
-				<div class="server-center">
-					<div class="server-network-option">
-						<span id="open-network-settings">${t.__('Network and Proxy Settings')}</span>
-						<i class="material-icons open-network-button">open_in_new</i>
-					</div>
-				</div>
-			</div>
-		`;
-	}
+  async function submitFormHandler(): Promise<void> {
+    $saveServerButton.textContent = t.__("Connecting…");
+    let serverConfig;
+    try {
+      serverConfig = await DomainUtil.checkDomain($newServerUrl.value.trim());
+    } catch (error: unknown) {
+      $saveServerButton.textContent = t.__("Connect");
+      await dialog.showMessageBox({
+        type: "error",
+        message:
+          error instanceof Error
+            ? `${error.name}: ${error.message}`
+            : t.__("Unknown error"),
+        buttons: [t.__("OK")],
+      });
+      return;
+    }
 
-	init(): void {
-		this.initForm();
-		this.initActions();
-	}
+    await DomainUtil.addDomain(serverConfig);
+    onChange();
+  }
 
-	initForm(): void {
-		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		this.$saveServerButton = this.$newServerForm.querySelectorAll('.server-save-action')[0] as HTMLButtonElement;
-		this.props.$root.innerHTML = '';
-		this.props.$root.append(this.$newServerForm);
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-	}
+  $saveServerButton.addEventListener("click", async () => {
+    await submitFormHandler();
+  });
+  $newServerUrl.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+      await submitFormHandler();
+    }
+  });
 
-	submitFormHandler(): void {
-		this.$saveServerButton.children[0].innerHTML = 'Connecting...';
-		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
-			DomainUtil.addDomain(serverConf).then(() => {
-				this.props.onChange(this.props.index);
-			});
-		}, errorMessage => {
-			this.$saveServerButton.children[0].innerHTML = 'Connect';
-			alert(errorMessage);
-		});
-	}
+  // Open create new org link in default browser
+  const link = "https://zulip.com/new/";
+  const externalCreateNewOrgElement = $root.querySelector(
+    "#open-create-org-link",
+  )!;
+  externalCreateNewOrgElement.addEventListener("click", async () => {
+    await LinkUtil.openBrowser(new URL(link));
+  });
 
-	openCreateNewOrgExternalLink(): void {
-		const link = 'https://zulipchat.com/new/';
-		const externalCreateNewOrgEl = document.querySelector('#open-create-org-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
-			shell.openExternal(link);
-		});
-	}
-
-	networkSettingsLink(): void {
-		const networkSettingsId = document.querySelectorAll('.server-network-option')[0];
-		networkSettingsId.addEventListener('click', () => ipcRenderer.send('forward-message', 'open-network-settings'));
-	}
-
-	initActions(): void {
-		this.$saveServerButton.addEventListener('click', () => {
-			this.submitFormHandler();
-		});
-		this.$newServerUrl.addEventListener('keypress', event => {
-			const EnterkeyCode = event.keyCode;
-			// Submit form when Enter key is pressed
-			if (EnterkeyCode === 13) {
-				this.submitFormHandler();
-			}
-		});
-		// open create new org link in default browser
-		this.openCreateNewOrgExternalLink();
-		this.networkSettingsLink();
-	}
+  const networkSettingsId = $root.querySelector(".server-network-option")!;
+  networkSettingsId.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-network-settings");
+  });
 }
-
-export = NewServerForm;

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

@@ -1,126 +1,144 @@
-'use strict';
+import type {IpcRendererEvent} from "electron/renderer";
+import process from "node:process";
 
-import { ipcRenderer } from 'electron';
+import type {DndSettings} from "../../../../common/dnd-util.ts";
+import {bundleUrl} from "../../../../common/paths.ts";
+import type {NavigationItem} from "../../../../common/types.ts";
+import {ipcRenderer} from "../../typed-ipc-renderer.ts";
 
-import BaseComponent = require('../../components/base');
-import Nav = require('./nav');
-import ServersSection = require('./servers-section');
-import GeneralSection = require('./general-section');
-import NetworkSection = require('./network-section');
-import ConnectedOrgSection = require('./connected-org-section');
-import ShortcutsSection = require('./shortcuts-section');
+import {initConnectedOrgSection} from "./connected-org-section.ts";
+import {initGeneralSection} from "./general-section.ts";
+import Nav from "./nav.ts";
+import {initNetworkSection} from "./network-section.ts";
+import {initServersSection} from "./servers-section.ts";
+import {initShortcutsSection} from "./shortcuts-section.ts";
 
-type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
+export class PreferenceView {
+  static async create(): Promise<PreferenceView> {
+    return new PreferenceView(
+      await (
+        await fetch(new URL("app/renderer/preference.html", bundleUrl))
+      ).text(),
+    );
+  }
 
-class PreferenceView extends BaseComponent {
-	$sidebarContainer: Element;
-	$settingsContainer: Element;
-	nav: Nav;
-	section: Section;
-	constructor() {
-		super();
-		this.$sidebarContainer = document.querySelector('#sidebar');
-		this.$settingsContainer = document.querySelector('#settings-container');
-	}
+  readonly $view: HTMLElement;
+  private readonly $shadow: ShadowRoot;
+  private readonly $settingsContainer: Element;
+  private readonly nav: Nav;
+  private navigationItem: NavigationItem = "General";
 
-	init(): void {
-		this.nav = new Nav({
-			$root: this.$sidebarContainer,
-			onItemSelected: this.handleNavigation.bind(this)
-		});
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    this.$shadow = this.$view.attachShadow({mode: "open"});
+    this.$shadow.innerHTML = templateHtml;
 
-		this.setDefaultView();
-		this.registerIpcs();
-	}
+    const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
+    this.$settingsContainer = this.$shadow.querySelector(
+      "#settings-container",
+    )!;
 
-	setDefaultView(): void {
-		let nav = 'General';
-		const hasTag = window.location.hash;
-		if (hasTag) {
-			nav = hasTag.substring(1);
-		}
-		this.handleNavigation(nav);
-	}
+    this.nav = new Nav({
+      $root: $sidebarContainer,
+      onItemSelected: this.handleNavigation,
+    });
 
-	handleNavigation(navItem: string): void {
-		this.nav.select(navItem);
-		switch (navItem) {
-			case 'AddServer': {
-				this.section = new ServersSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-			case 'General': {
-				this.section = new GeneralSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-			case 'Organizations': {
-				this.section = new ConnectedOrgSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-			case 'Network': {
-				this.section = new NetworkSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-			case 'Shortcuts': {
-				this.section = new ShortcutsSection({
-					$root: this.$settingsContainer
-				});
-				break;
-			}
-			default: break;
-		}
-		this.section.init();
-		window.location.hash = `#${navItem}`;
-	}
+    ipcRenderer.on("toggle-sidebar", this.handleToggleSidebar);
+    ipcRenderer.on("toggle-autohide-menubar", this.handleToggleMenubar);
+    ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
 
-	// Handle toggling and reflect changes in preference page
-	handleToggle(elementName: string, state: boolean): void {
-		const inputSelector = `#${elementName} .action .switch input`;
-		const input: HTMLInputElement = document.querySelector(inputSelector);
-		if (input) {
-			input.checked = state;
-		}
-	}
+    this.handleNavigation(this.navigationItem);
+  }
 
-	registerIpcs(): void {
-		ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
-			this.handleNavigation(navItem);
-		});
+  handleNavigation = (navigationItem: NavigationItem): void => {
+    this.navigationItem = navigationItem;
+    this.nav.select(navigationItem);
+    switch (navigationItem) {
+      case "AddServer": {
+        initServersSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
 
-		ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
-			this.handleToggle('sidebar-option', state);
-		});
+      case "General": {
+        initGeneralSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
 
-		ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
-			this.handleToggle('menubar-option', state);
-		});
+      case "Organizations": {
+        initConnectedOrgSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
 
-		ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
-			this.handleToggle('tray-option', state);
-		});
+      case "Network": {
+        initNetworkSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
 
-		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: any) => {
-			this.handleToggle('show-notification-option', newSettings.showNotification);
-			this.handleToggle('silent-option', newSettings.silent);
+      case "Shortcuts": {
+        initShortcutsSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+    }
 
-			if (process.platform === 'win32') {
-				this.handleToggle('flash-taskbar-option', newSettings.flashTaskbarOnMessage);
-			}
-		});
-	}
+    location.hash = `#${navigationItem}`;
+  };
+
+  handleToggleTray(state: boolean) {
+    this.handleToggle("tray-option", state);
+  }
+
+  destroy(): void {
+    ipcRenderer.off("toggle-sidebar", this.handleToggleSidebar);
+    ipcRenderer.off("toggle-autohide-menubar", this.handleToggleMenubar);
+    ipcRenderer.off("toggle-dnd", this.handleToggleDnd);
+  }
+
+  // Handle toggling and reflect changes in preference page
+  private handleToggle(elementName: string, state = false): void {
+    const inputSelector = `#${elementName} .action .switch input`;
+    const input: HTMLInputElement = this.$shadow.querySelector(inputSelector)!;
+    if (input) {
+      input.checked = state;
+    }
+  }
+
+  private readonly handleToggleSidebar = (
+    _event: IpcRendererEvent,
+    state: boolean,
+  ) => {
+    this.handleToggle("sidebar-option", state);
+  };
+
+  private readonly handleToggleMenubar = (
+    _event: IpcRendererEvent,
+    state: boolean,
+  ) => {
+    this.handleToggle("menubar-option", state);
+  };
+
+  private readonly handleToggleDnd = (
+    _event: IpcRendererEvent,
+    _state: boolean,
+    newSettings: Partial<DndSettings>,
+  ) => {
+    this.handleToggle("show-notification-option", newSettings.showNotification);
+    this.handleToggle("silent-option", newSettings.silent);
+
+    if (process.platform === "win32") {
+      this.handleToggle(
+        "flash-taskbar-option",
+        newSettings.flashTaskbarOnMessage,
+      );
+    }
+  };
 }
-
-window.addEventListener('load', () => {
-	const preferenceView = new PreferenceView();
-	preferenceView.init();
-});
-
-export = PreferenceView;

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

@@ -1,96 +1,83 @@
-'use strict';
+import {dialog} from "@electron/remote";
 
-import { remote, ipcRenderer } from 'electron';
+import {html} from "../../../../common/html.ts";
+import * as Messages from "../../../../common/messages.ts";
+import * as t from "../../../../common/translation-util.ts";
+import type {ServerConfig} from "../../../../common/types.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
+import {ipcRenderer} from "../../typed-ipc-renderer.ts";
+import * as DomainUtil from "../../utils/domain-util.ts";
 
-import BaseComponent = require('../../components/base');
-import DomainUtil = require('../../utils/domain-util');
-import Messages = require('./../../../../resources/messages');
-import t = require('../../utils/translation-util');
+type ServerInfoFormProperties = {
+  $root: Element;
+  server: ServerConfig;
+  index: number;
+  onChange: () => void;
+};
 
-const { dialog } = remote;
+export function initServerInfoForm(properties: ServerInfoFormProperties): void {
+  const $serverInfoForm = generateNodeFromHtml(html`
+    <div class="settings-card">
+      <div class="server-info-left">
+        <img
+          class="server-info-icon"
+          src="${DomainUtil.iconAsUrl(properties.server.icon)}"
+        />
+        <div class="server-info-row">
+          <span class="server-info-alias">${properties.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="${properties.server.url}"
+            >${properties.server.url}</span
+          >
+        </div>
+        <div class="server-info-row">
+          <div class="action red server-delete-action">
+            <span>${t.__("Disconnect")}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+  const $serverInfoAlias = $serverInfoForm.querySelector(".server-info-alias")!;
+  const $serverIcon = $serverInfoForm.querySelector(".server-info-icon")!;
+  const $deleteServerButton = $serverInfoForm.querySelector(
+    ".server-delete-action",
+  )!;
+  const $openServerButton = $serverInfoForm.querySelector(".open-tab-button")!;
+  properties.$root.append($serverInfoForm);
 
-class ServerInfoForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$serverInfoForm: Element;
-	$serverInfoAlias: Element;
-	$serverIcon: Element;
-	$deleteServerButton: Element;
-	$openServerButton: Element;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
+  $deleteServerButton.addEventListener("click", async () => {
+    const {response} = await dialog.showMessageBox({
+      type: "warning",
+      buttons: [t.__("Yes"), t.__("No")],
+      defaultId: 0,
+      message: t.__("Are you sure you want to disconnect this organization?"),
+    });
+    if (response === 0) {
+      if (DomainUtil.removeDomain(properties.index)) {
+        ipcRenderer.send("reload-full-app");
+      } else {
+        const {title, content} = Messages.orgRemovalError(
+          DomainUtil.getDomain(properties.index).url,
+        );
+        dialog.showErrorBox(title, content);
+      }
+    }
+  });
 
-	template(): string {
-		return `
-			<div class="settings-card">
-				<div class="server-info-left">
-					<img class="server-info-icon" src="${this.props.server.icon}"/>
-					<div class="server-info-row">
-						<span class="server-info-alias">${this.props.server.alias}</span>
-						<i class="material-icons open-tab-button">open_in_new</i>
-					</div>
-				</div>
-				<div class="server-info-right">
-					<div class="server-info-row server-url">
-						<span class="server-url-info" title="${this.props.server.url}">${this.props.server.url}</span>
-					</div>
-					<div class="server-info-row">
-						<div class="action red server-delete-action">
-							<span>${t.__('Disconnect')}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		`;
-	}
+  $openServerButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
 
-	init(): void {
-		this.initForm();
-		this.initActions();
-	}
+  $serverInfoAlias.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
 
-	initForm(): void {
-		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
-		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
-		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
-		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
-		this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
-		this.props.$root.append(this.$serverInfoForm);
-	}
-
-	initActions(): void {
-		this.$deleteServerButton.addEventListener('click', () => {
-			dialog.showMessageBox({
-				type: 'warning',
-				buttons: [t.__('YES'), t.__('NO')],
-				defaultId: 0,
-				message: t.__('Are you sure you want to disconnect this organization?')
-			}, response => {
-				if (response === 0) {
-					if (DomainUtil.removeDomain(this.props.index)) {
-						ipcRenderer.send('reload-full-app');
-					} else {
-						const { title, content } = Messages.orgRemovalError(DomainUtil.getDomain(this.props.index).url);
-						dialog.showErrorBox(title, content);
-					}
-				}
-			});
-		});
-
-		this.$openServerButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-
-		this.$serverInfoAlias.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-
-		this.$serverIcon.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
-		});
-	}
+  $serverIcon.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
 }
-
-export = ServerInfoForm;

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

@@ -1,50 +1,28 @@
-'use strict';
+import {html} from "../../../../common/html.ts";
+import * as t from "../../../../common/translation-util.ts";
 
-import BaseSection = require('./base-section');
-import NewServerForm = require('./new-server-form');
-import t = require('../../utils/translation-util');
+import {reloadApp} from "./base-section.ts";
+import {initNewServerForm} from "./new-server-form.ts";
 
-class ServersSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$newServerContainer: Element;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
+type ServersSectionProperties = {
+  $root: Element;
+};
 
-	template(): string {
-		return `
-		<div class="add-server-modal">
-			<div class="modal-container">
-				<div class="settings-pane" id="server-settings-pane">
-					<div class="page-title">${t.__('Add a Zulip organization')}</div>
-					<div id="new-server-container"></div>
-				</div>
-			</div>
-		</div>
-		`;
-	}
+export function initServersSection({$root}: ServersSectionProperties): void {
+  $root.innerHTML = html`
+    <div class="add-server-modal">
+      <div class="modal-container">
+        <div class="settings-pane" id="server-settings-pane">
+          <div class="page-title">${t.__("Add a Zulip organization")}</div>
+          <div id="new-server-container"></div>
+        </div>
+      </div>
+    </div>
+  `.html;
+  const $newServerContainer = $root.querySelector("#new-server-container")!;
 
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.innerHTML = '';
-
-		this.props.$root.innerHTML = this.template();
-		this.$newServerContainer = document.querySelector('#new-server-container');
-
-		this.initNewServerForm();
-	}
-
-	initNewServerForm(): void {
-		new NewServerForm({
-			$root: this.$newServerContainer,
-			onChange: this.reloadApp
-		}).init();
-	}
+  initNewServerForm({
+    $root: $newServerContainer,
+    onChange: reloadApp,
+  });
 }
-
-export = ServersSection;

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

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

app/renderer/js/preload.ts

@@ -1,165 +1,29 @@
-// we have and will have some non camelcase stuff
-// while working with zulip and electron bridge
-// so turning the rule off for the whole file.
-/* eslint-disable @typescript-eslint/camelcase */
+import {contextBridge} from "electron/renderer";
 
-'use strict';
+import electron_bridge, {BridgeEvent, bridgeEvents} from "./electron-bridge.ts";
+import * as NetworkError from "./pages/network.ts";
+import {ipcRenderer} from "./typed-ipc-renderer.ts";
 
-import { ipcRenderer, shell } from 'electron';
-import SetupSpellChecker from './spellchecker';
+contextBridge.exposeInMainWorld("electron_bridge", electron_bridge);
 
-import isDev = require('electron-is-dev');
-import LinkUtil = require('./utils/link-util');
-import params = require('./utils/params-util');
-
-import NetworkError = require('./pages/network');
-
-interface PatchedGlobal extends NodeJS.Global {
-	logout: () => void;
-	shortcut: () => void;
-	showNotificationSettings: () => void;
-}
-
-const globalPatched = global as PatchedGlobal;
-
-// eslint-disable-next-line import/no-unassigned-import
-require('./notification');
-
-// Prevent drag and drop event in main process which prevents remote code executaion
-require(__dirname + '/shared/preventdrag.js');
-
-declare let window: ZulipWebWindow;
-
-window.electron_bridge = require('./electron-bridge');
-
-const logout = (): void => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-};
-
-const shortcut = (): void => {
-	// Create the menu for the below
-	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
-	// Additional check
-	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
-		node.click();
-	} else {
-		// Atleast click the dropdown
-		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-		dropdown.click();
-	}
-};
-
-const showNotificationSettings = (): void => {
-	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
-
-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li a');
-	nodes[2].click();
-
-	const notificationItem: NodeListOf<HTMLElement> = document.querySelectorAll('.normal-settings-list li div');
-
-	// wait until the notification dom element shows up
-	setTimeout(() => {
-		notificationItem[2].click();
-	}, 100);
-};
-
-process.once('loaded', (): void => {
-	globalPatched.logout = logout;
-	globalPatched.shortcut = shortcut;
-	globalPatched.showNotificationSettings = showNotificationSettings;
+ipcRenderer.on("logout", () => {
+  bridgeEvents.dispatchEvent(new BridgeEvent("logout"));
 });
 
-// To prevent failing this script on linux we need to load it after the document loaded
-document.addEventListener('DOMContentLoaded', (): void => {
-	if (params.isPageParams()) {
-	// Get the default language of the server
-		const serverLanguage = page_params.default_language; // eslint-disable-line no-undef
-		if (serverLanguage) {
-			// Init spellchecker
-			SetupSpellChecker.init(serverLanguage);
-		}
-		// redirect users to network troubleshooting page
-		const getRestartButton = document.querySelector('.restart_get_events_button');
-		if (getRestartButton) {
-			getRestartButton.addEventListener('click', () => {
-				ipcRenderer.send('forward-message', 'reload-viewer');
-			});
-		}
-		// Open image attachment link in the lightbox instead of opening in the default browser
-		const { $, lightbox } = window;
-		$('#main_div').on('click', '.message_content p a', function (this: HTMLElement, e: Event) {
-			const url = $(this).attr('href');
-
-			if (LinkUtil.isImage(url)) {
-				const $img = $(this).parent().siblings('.message_inline_image').find('img');
-
-				// prevent the image link from opening in a new page.
-				e.preventDefault();
-				// prevent the message compose dialog from happening.
-				e.stopPropagation();
-
-				// Open image in the default browser if image preview is unavailable
-				if (!$img[0]) {
-					shell.openExternal(window.location.origin + url);
-				}
-				// Open image in lightbox
-				lightbox.open($img);
-			}
-		});
-	}
+ipcRenderer.on("show-keyboard-shortcuts", () => {
+  bridgeEvents.dispatchEvent(new BridgeEvent("show-keyboard-shortcuts"));
 });
 
-// Clean up spellchecker events after you navigate away from this page;
-// otherwise, you may experience errors
-window.addEventListener('beforeunload', (): void => {
-	SetupSpellChecker.unsubscribeSpellChecker();
+ipcRenderer.on("show-notification-settings", () => {
+  bridgeEvents.dispatchEvent(new BridgeEvent("show-notification-settings"));
 });
 
-window.addEventListener('load', (event: any): void => {
-	if (!event.target.URL.includes('app/renderer/network.html')) {
-		return;
-	}
-	const $reconnectButton = document.querySelector('#reconnect');
-	const $settingsButton = document.querySelector('#settings');
-	NetworkError.init($reconnectButton, $settingsButton);
-});
+window.addEventListener("load", () => {
+  if (!location.href.includes("app/renderer/network.html")) {
+    return;
+  }
 
-// electron's globalShortcut can cause unexpected results
-// so adding the reload shortcut in the old-school way
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
-document.addEventListener('keydown', event => {
-	const cmdOrCtrl = event.ctrlKey || event.metaKey;
-	if (event.code === 'F5') {
-		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (cmdOrCtrl && (event.code === 'NumpadAdd' || event.code === 'Equal')) {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (cmdOrCtrl && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (cmdOrCtrl && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
-	}
-});
-
-// Set user as active and update the time of last activity
-ipcRenderer.on('set-active', () => {
-	if (isDev) {
-		console.log('active');
-	}
-	window.electron_bridge.idle_on_system = false;
-	window.electron_bridge.last_active_on_system = Date.now();
-});
-
-// Set user as idle and time of last activity is left unchanged
-ipcRenderer.on('set-idle', () => {
-	if (isDev) {
-		console.log('idle');
-	}
-	window.electron_bridge.idle_on_system = true;
+  const $reconnectButton = document.querySelector("#reconnect")!;
+  const $settingsButton = document.querySelector("#settings")!;
+  NetworkError.init($reconnectButton, $settingsButton);
 });

app/renderer/js/shared/preventdrag.ts

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

app/renderer/js/spellchecker.ts

@@ -1,56 +0,0 @@
-'use strict';
-
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
-import ConfigUtil = require('./utils/config-util');
-import Logger = require('./utils/logger-util');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class SetupSpellChecker {
-	SpellCheckHandler: typeof SpellCheckHandler;
-	contextMenuListener: typeof ContextMenuListener;
-	init(serverLanguage: string): void {
-		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-			this.enableSpellChecker();
-		}
-		this.enableContextMenu(serverLanguage);
-	}
-
-	enableSpellChecker(): void {
-		try {
-			this.SpellCheckHandler = new SpellCheckHandler();
-		} catch (err) {
-			logger.error(err);
-		}
-	}
-
-	enableContextMenu(serverLanguage: string): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.attachToInput();
-			this.SpellCheckHandler.switchLanguage(serverLanguage);
-			this.SpellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
-				this.SpellCheckHandler.switchLanguage(this.SpellCheckHandler.currentSpellcheckerLanguage);
-			});
-		}
-
-		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
-		this.contextMenuListener = new ContextMenuListener((info: object) => {
-			contextMenuBuilder.showPopupMenu(info);
-		});
-	}
-
-	unsubscribeSpellChecker(): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.unsubscribe();
-		}
-		if (this.contextMenuListener) {
-			this.contextMenuListener.unsubscribe();
-		}
-	}
-}
-
-export = new SetupSpellChecker();

app/renderer/js/tray.ts

@@ -1,220 +1,251 @@
-'use strict';
-import { ipcRenderer, remote, WebviewTag, NativeImage } from 'electron';
+import {type NativeImage, nativeImage} from "electron/common";
+import type {Tray as ElectronTray} from "electron/main";
+import path from "node:path";
+import process from "node:process";
 
-import path = require('path');
-import ConfigUtil = require('./utils/config-util.js');
-const { Tray, Menu, nativeImage, BrowserWindow } = remote;
+import {BrowserWindow, Menu, Tray} from "@electron/remote";
 
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
+import * as ConfigUtil from "../../common/config-util.ts";
+import {publicPath} from "../../common/paths.ts";
+import * as t from "../../common/translation-util.ts";
+import type {RendererMessage} from "../../common/typed-ipc.ts";
 
-declare let window: ZulipWebWindow;
+import type {ServerManagerView} from "./main.ts";
+import {ipcRenderer} from "./typed-ipc-renderer.ts";
+
+let tray: ElectronTray | null = null;
+
+const appIcon = path.join(publicPath, "resources/tray/tray");
 
 const iconPath = (): string => {
-	if (process.platform === 'linux') {
-		return APP_ICON + 'linux.png';
-	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
+  if (process.platform === "linux") {
+    return appIcon + "linux.png";
+  }
+
+  return (
+    appIcon + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
+  );
 };
 
+const winUnreadTrayIconPath = (): string => appIcon + "unread.ico";
+
 let unread = 0;
 
 const trayIconSize = (): number => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
+  switch (process.platform) {
+    case "darwin": {
+      return 20;
+    }
+
+    case "win32": {
+      return 100;
+    }
+
+    case "linux": {
+      return 100;
+    }
+
+    default: {
+      return 80;
+    }
+  }
 };
 
 //  Default config for Icon we might make it OS specific if needed like the size
 const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
+  pixelRatio: window.devicePixelRatio,
+  unreadCount: 0,
+  showUnreadCount: true,
+  unreadColor: "#000000",
+  readColor: "#000000",
+  unreadBackgroundColor: "#B9FEEA",
+  readBackgroundColor: "#B9FEEA",
+  size: trayIconSize(),
+  thick: process.platform === "win32",
 };
 
-const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
-	config.unreadCount = arg;
+const renderCanvas = function (argument: number): HTMLCanvasElement {
+  config.unreadCount = argument;
 
-	return new Promise(resolve => {
-		const SIZE = config.size * config.pixelRatio;
-		const PADDING = SIZE * 0.05;
-		const CENTER = SIZE / 2;
-		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-		const color = config.unreadCount ? config.unreadColor : config.readColor;
-		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
+  const size = config.size * config.pixelRatio;
+  const padding = size * 0.05;
+  const center = size / 2;
+  const hasCount = config.showUnreadCount && config.unreadCount;
+  const color = config.unreadCount ? config.unreadColor : config.readColor;
+  const backgroundColor = config.unreadCount
+    ? config.unreadBackgroundColor
+    : config.readBackgroundColor;
 
-		const canvas = document.createElement('canvas');
-		canvas.width = SIZE;
-		canvas.height = SIZE;
-		const ctx = canvas.getContext('2d');
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext("2d")!;
 
-		// Circle
-		// If (!config.thick || config.thick && HAS_COUNT) {
-		ctx.beginPath();
-		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-		ctx.fillStyle = backgroundColor;
-		ctx.fill();
-		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-		ctx.strokeStyle = backgroundColor;
-		ctx.stroke();
-		// Count or Icon
-		if (HAS_COUNT) {
-			ctx.fillStyle = color;
-			ctx.textAlign = 'center';
-			if (config.unreadCount > 99) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-			} else if (config.unreadCount < 10) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.20));
-			} else {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
-			}
+  // Circle
+  // If (!config.thick || config.thick && hasCount) {
+  context.beginPath();
+  context.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
+  context.fillStyle = backgroundColor;
+  context.fill();
+  context.lineWidth = size / (config.thick ? 10 : 20);
+  context.strokeStyle = backgroundColor;
+  context.stroke();
+  // Count or Icon
+  if (hasCount) {
+    context.fillStyle = color;
+    context.textAlign = "center";
+    if (config.unreadCount > 99) {
+      context.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
+      context.fillText("99+", center, center + size * 0.15);
+    } else if (config.unreadCount < 10) {
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      context.fillText(String(config.unreadCount), center, center + size * 0.2);
+    } else {
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      context.fillText(
+        String(config.unreadCount),
+        center,
+        center + size * 0.15,
+      );
+    }
+  }
 
-			resolve(canvas);
-		}
-	});
+  return canvas;
 };
+
 /**
  * Renders the tray icon as a native image
  * @param arg: Unread count
  * @return the native image
  */
-const renderNativeImage = function (arg: number): Promise<NativeImage> {
-	return Promise.resolve()
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
+const renderNativeImage = function (argument: number): NativeImage {
+  if (process.platform === "win32") {
+    return nativeImage.createFromPath(winUnreadTrayIconPath());
+  }
 
-			// TODO: Fix the function to correctly use Promise correctly.
-			// the Promise.resolve().then(...) above is useless we should
-			// start with renderCanvas(arg).then
-			// eslint-disable-next-line promise/no-return-wrap
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, {
-				scaleFactor: config.pixelRatio
-			}));
-		});
+  const canvas = renderCanvas(argument);
+  const pngData = nativeImage
+    .createFromDataURL(canvas.toDataURL("image/png"))
+    .toPNG();
+  return nativeImage.createFromBuffer(pngData, {
+    scaleFactor: config.pixelRatio,
+  });
 };
 
-function sendAction(action: string): void {
-	const win = BrowserWindow.getAllWindows()[0];
+function sendAction<Channel extends keyof RendererMessage>(
+  channel: Channel,
+  ...arguments_: Parameters<RendererMessage[Channel]>
+): void {
+  const win = BrowserWindow.getAllWindows()[0];
 
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
+  if (process.platform === "darwin") {
+    win.restore();
+  }
 
-	win.webContents.send(action);
+  ipcRenderer.send("forward-to", win.webContents.id, channel, ...arguments_);
 }
 
 const createTray = function (): void {
-	window.tray = new Tray(iconPath());
-	const contextMenu = Menu.buildFromTemplate([
-		{
-			label: 'Zulip',
-			click() {
-				ipcRenderer.send('focus-app');
-			}
-		},
-		{
-			label: 'Settings',
-			click() {
-				ipcRenderer.send('focus-app');
-				sendAction('open-settings');
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Quit',
-			click() {
-				ipcRenderer.send('quit-app');
-			}
-		}
-	]);
-	window.tray.setContextMenu(contextMenu);
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		window.tray.on('click', () => {
-			ipcRenderer.send('toggle-app');
-		});
-	}
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: t.__("Zulip"),
+      click() {
+        ipcRenderer.send("focus-app");
+      },
+    },
+    {
+      label: t.__("Settings"),
+      click() {
+        ipcRenderer.send("focus-app");
+        sendAction("open-settings");
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: t.__("Quit"),
+      click() {
+        ipcRenderer.send("quit-app");
+      },
+    },
+  ]);
+  tray = new Tray(iconPath());
+  tray.setContextMenu(contextMenu);
+  if (process.platform === "linux" || process.platform === "win32") {
+    tray.on("click", () => {
+      ipcRenderer.send("toggle-app");
+    });
+  }
 };
 
-ipcRenderer.on('destroytray', (event: Event): Event => {
-	if (!window.tray) {
-		return undefined;
-	}
+export function initializeTray(serverManagerView: ServerManagerView) {
+  ipcRenderer.on("destroytray", () => {
+    if (!tray) {
+      return;
+    }
 
-	window.tray.destroy();
-	if (window.tray.isDestroyed()) {
-		window.tray = null;
-	} else {
-		throw new Error('Tray icon not properly destroyed.');
-	}
+    tray.destroy();
+    if (tray.isDestroyed()) {
+      tray = null;
+    } else {
+      throw new Error("Tray icon not properly destroyed.");
+    }
+  });
 
-	return event;
-});
+  ipcRenderer.on("tray", (_event, argument: number): void => {
+    if (!tray) {
+      return;
+    }
 
-ipcRenderer.on('tray', (_event: Event, arg: number): void => {
-	if (!window.tray) {
-		return;
-	}
-	// We don't want to create tray from unread messages on macOS since it already has dock badges.
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		if (arg === 0) {
-			unread = arg;
-			window.tray.setImage(iconPath());
-			window.tray.setToolTip('No unread messages');
-		} else {
-			unread = arg;
-			renderNativeImage(arg).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(arg + ' unread messages');
-			});
-		}
-	}
-});
+    // 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 (argument === 0) {
+        unread = argument;
+        tray.setImage(iconPath());
+        tray.setToolTip(t.__("No unread messages"));
+      } else {
+        unread = argument;
+        const image = renderNativeImage(argument);
+        tray.setImage(image);
+        tray.setToolTip(
+          t.__mf(
+            "{number, plural, one {# unread message} other {# unread messages}}",
+            {number: `${argument}`},
+          ),
+        );
+      }
+    }
+  });
 
-function toggleTray(): void {
-	let state;
-	if (window.tray) {
-		state = false;
-		window.tray.destroy();
-		if (window.tray.isDestroyed()) {
-			window.tray = null;
-		}
-		ConfigUtil.setConfigItem('trayIcon', false);
-	} else {
-		state = true;
-		createTray();
-		if (process.platform === 'linux' || process.platform === 'win32') {
-			renderNativeImage(unread).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
-			});
-		}
-		ConfigUtil.setConfigItem('trayIcon', true);
-	}
-	const selector = 'webview:not([class*=disabled])';
-	const webview: WebviewTag = document.querySelector(selector);
-	const webContents = webview.getWebContents();
-	webContents.send('toggletray', state);
-}
-
-ipcRenderer.on('toggletray', toggleTray);
-
-if (ConfigUtil.getConfigItem('trayIcon', true)) {
-	createTray();
+  function toggleTray(): void {
+    let state;
+    if (tray) {
+      state = false;
+      tray.destroy();
+      if (tray.isDestroyed()) {
+        tray = null;
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", false);
+    } else {
+      state = true;
+      createTray();
+      if (process.platform === "linux" || process.platform === "win32") {
+        const image = renderNativeImage(unread);
+        tray!.setImage(image);
+        tray!.setToolTip(`${unread} unread messages`);
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", true);
+    }
+
+    serverManagerView.preferenceView?.handleToggleTray(state);
+  }
+
+  ipcRenderer.on("toggletray", toggleTray);
+
+  if (ConfigUtil.getConfigItem("trayIcon", true)) {
+    createTray();
+  }
 }

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

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

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

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

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

@@ -1,25 +0,0 @@
-'use strict';
-
-let instance: null | CommonUtil = null;
-
-class CommonUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-		return instance;
-	}
-
-	// unescape already encoded/escaped strings
-	decodeString(stringInput: string): string {
-		const parser = new DOMParser();
-		const dom = parser.parseFromString(
-			'<!doctype html><body>' + stringInput,
-			'text/html');
-		return dom.body.textContent;
-	}
-}
-
-export = new CommonUtil();

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

@@ -1,106 +0,0 @@
-'use strict';
-import JsonDB from 'node-json-db';
-
-import fs = require('fs');
-import path = require('path');
-import electron = require('electron');
-import Logger = require('./logger-util');
-import EnterpriseUtil = require('./enterprise-util');
-
-const logger = new Logger({
-	file: 'config-util.log',
-	timestamp: true
-});
-
-let instance: null | ConfigUtil = null;
-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;
-}
-
-class ConfigUtil {
-	db: JsonDB;
-
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.reloadDB();
-		return instance;
-	}
-
-	getConfigItem(key: string, defaultValue: any = null): any {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
-		const value = this.db.getData('/')[key];
-		if (value === undefined) {
-			this.setConfigItem(key, defaultValue);
-			return defaultValue;
-		} else {
-			return value;
-		}
-	}
-
-	// This function returns whether a key exists in the configuration file (settings.json)
-	isConfigItemExists(key: string): boolean {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
-		const value = this.db.getData('/')[key];
-		return (value !== undefined);
-	}
-
-	setConfigItem(key: string, value: any, override? : boolean): void {
-		if (EnterpriseUtil.configItemExists(key) && !override) {
-			// if item is in global config and we're not trying to override
-			return;
-		}
-		this.db.push(`/${key}`, value, true);
-		this.db.save();
-	}
-
-	removeConfigItem(key: string): void {
-		this.db.delete(`/${key}`);
-		this.db.save();
-	}
-
-	reloadDB(): void {
-		const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
-		try {
-			const file = fs.readFileSync(settingsJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(settingsJsonPath)) {
-				fs.unlinkSync(settingsJsonPath);
-				dialog.showErrorBox(
-					'Error saving settings',
-					'We encountered an error while saving the settings.'
-				);
-				logger.error('Error while JSON parsing settings.json: ');
-				logger.error(err);
-				logger.reportSentry(err);
-			}
-		}
-		this.db = new JsonDB(settingsJsonPath, true, true);
-	}
-}
-
-export = new ConfigUtil();

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

@@ -1,74 +0,0 @@
-import fs = require('fs');
-
-let app: Electron.App = null;
-let setupCompleted = false;
-if (process.type === 'renderer') {
-	app = require('electron').remote.app;
-} else {
-	app = require('electron').app;
-}
-
-const zulipDir = app.getPath('userData');
-const logDir = `${zulipDir}/Logs/`;
-const certificatesDir = `${zulipDir}/certificates/`;
-const configDir = `${zulipDir}/config/`;
-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);
-		}
-
-		if (!fs.existsSync(certificatesDir)) {
-			fs.mkdirSync(certificatesDir);
-		}
-
-		// Migrate config files from app data folder to config folder inside app
-		// data folder. This will be done once when a user updates to the new version.
-		if (!fs.existsSync(configDir)) {
-			fs.mkdirSync(configDir);
-			const domainJson = `${zulipDir}/domain.json`;
-			const certificatesJson = `${zulipDir}/certificates.json`;
-			const settingsJson = `${zulipDir}/settings.json`;
-			const updatesJson = `${zulipDir}/updates.json`;
-			const windowStateJson = `${zulipDir}/window-state.json`;
-			const configData = [
-				{
-					path: domainJson,
-					fileName: `domain.json`
-				},
-				{
-					path: certificatesJson,
-					fileName: `certificates.json`
-				},
-				{
-					path: settingsJson,
-					fileName: `settings.json`
-				},
-				{
-					path: updatesJson,
-					fileName: `updates.json`
-				}
-			];
-			configData.forEach(data => {
-				if (fs.existsSync(data.path)) {
-					fs.copyFileSync(data.path, configDir + data.fileName);
-					fs.unlinkSync(data.path);
-				}
-			});
-			// window-state.json is only deleted not moved, as the electron-window-state
-			// package will recreate the file in the config folder.
-			if (fs.existsSync(windowStateJson)) {
-				fs.unlinkSync(windowStateJson);
-			}
-		}
-
-		setupCompleted = true;
-	}
-};

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

@@ -1,50 +0,0 @@
-'use strict';
-
-import ConfigUtil = require('./config-util');
-
-// TODO: TypeScript - add to Setting interface
-// the list of settings since we have fixed amount of them
-// We want to do this by creating a new module that exports
-// this interface
-interface Setting {
-	[key: string]: any;
-}
-
-interface Toggle {
-	dnd: boolean;
-	newSettings: Setting;
-}
-
-export function toggle(): Toggle {
-	const dnd = !ConfigUtil.getConfigItem('dnd', false);
-	const dndSettingList = ['showNotification', 'silent'];
-	if (process.platform === 'win32') {
-		dndSettingList.push('flashTaskbarOnMessage');
-	}
-
-	let newSettings: Setting;
-	if (dnd) {
-		const oldSettings: Setting = {};
-		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,331 +1,236 @@
-'use strict';
-import JsonDB from 'node-json-db';
+import fs from "node:fs";
+import path from "node:path";
 
-import escape = require('escape-html');
-import request = require('request');
-import fs = require('fs');
-import path = require('path');
-import Logger = require('./logger-util');
-import electron = require('electron');
+import {app, dialog} from "@electron/remote";
+import * as Sentry from "@sentry/electron/renderer";
+import {JsonDB} from "node-json-db";
+import {DataError} from "node-json-db/dist/lib/Errors.js";
+import {z} from "zod";
 
-import RequestUtil = require('./request-util');
-import EnterpriseUtil = require('./enterprise-util');
-import Messages = require('../../../resources/messages');
-
-const { ipcRenderer } = electron;
-const { app, dialog } = electron.remote;
+import * as EnterpriseUtil from "../../../common/enterprise-util.ts";
+import Logger from "../../../common/logger-util.ts";
+import * as Messages from "../../../common/messages.ts";
+import * as t from "../../../common/translation-util.ts";
+import type {ServerConfig} from "../../../common/types.ts";
+import defaultIcon from "../../img/icon.png";
+import {ipcRenderer} from "../typed-ipc-renderer.ts";
 
 const logger = new Logger({
-	file: `domain-util.log`,
-	timestamp: true
+  file: "domain-util.log",
 });
 
-let instance: null | DomainUtil = null;
+// For historical reasons, we store this string in domain.json to denote a
+// missing icon; it does not change with the actual icon location.
+export const defaultIconSentinel = "../renderer/img/icon.png";
 
-const defaultIconUrl = '../renderer/img/icon.png';
+const serverConfigSchema = z.object({
+  url: z.url(),
+  alias: z.string(),
+  icon: z.string(),
+  zulipVersion: z.string().default("unknown"),
+  zulipFeatureLevel: z.number().default(0),
+});
 
-class DomainUtil {
-	db: JsonDB;
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
+let database!: JsonDB;
 
-		this.reloadDB();
-		// Migrate from old schema
-		if (this.db.getData('/').domain) {
-			this.addDomain({
-				alias: 'Zulip',
-				url: this.db.getData('/domain')
-			});
-			this.db.delete('/domain');
-		}
+reloadDatabase();
 
-		return instance;
-	}
-
-	getDomains(): any {
-		this.reloadDB();
-		if (this.db.getData('/').domains === undefined) {
-			return [];
-		} else {
-			return this.db.getData('/domains');
-		}
-	}
-
-	getDomain(index: number): any {
-		this.reloadDB();
-		return this.db.getData(`/domains[${index}]`);
-	}
-
-	shouldIgnoreCerts(url: string): boolean {
-		const domains = this.getDomains();
-		for (const domain of domains) {
-			if (domain.url === url) {
-				return domain.ignoreCerts;
-			}
-		}
-		return null;
-	}
-
-	updateDomain(index: number, server: object): void {
-		this.reloadDB();
-		this.db.push(`/domains[${index}]`, server, true);
-	}
-
-	addDomain(server: any): Promise<void> {
-		const { ignoreCerts } = server;
-		return new Promise(resolve => {
-			if (server.icon) {
-				this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
-					server.icon = localIconUrl;
-					this.db.push('/domains[]', server, true);
-					this.reloadDB();
-					resolve();
-				});
-			} else {
-				server.icon = defaultIconUrl;
-				this.db.push('/domains[]', server, true);
-				this.reloadDB();
-				resolve();
-			}
-		});
-	}
-
-	removeDomains(): void {
-		this.db.delete('/domains');
-		this.reloadDB();
-	}
-
-	removeDomain(index: number): boolean {
-		if (EnterpriseUtil.isPresetOrg(this.getDomain(index).url)) {
-			return false;
-		}
-		this.db.delete(`/domains[${index}]`);
-		this.reloadDB();
-		return true;
-	}
-
-	// Check if domain is already added
-	duplicateDomain(domain: any): boolean {
-		domain = this.formatUrl(domain);
-		const servers = this.getDomains();
-		for (const i in servers) {
-			if (servers[i].url === domain) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	async checkCertError(domain: any, serverConf: any, error: string, silent: boolean): Promise<string | object> {
-		if (silent) {
-			// since getting server settings has already failed
-			return serverConf;
-		} else {
-			// Report error to sentry to get idea of possible certificate errors
-			// users get when adding the servers
-			logger.reportSentry(new Error(error).toString());
-			const certErrorMessage = Messages.certErrorMessage(domain, error);
-			const certErrorDetail = Messages.certErrorDetail();
-
-			const response = await (dialog.showMessageBox({
-				type: 'warning',
-				buttons: ['Yes', 'No'],
-				defaultId: 1,
-				message: certErrorMessage,
-				detail: certErrorDetail
-			}) as any); // TODO: TypeScript - Figure this out
-			if (response === 0) {
-				// set ignoreCerts parameter to true in case user responds with yes
-				serverConf.ignoreCerts = true;
-				try {
-					return await this.getServerSettings(domain, serverConf.ignoreCerts);
-				} catch (_) {
-					if (error === Messages.noOrgsError(domain)) {
-						throw new Error(error);
-					}
-					return serverConf;
-				}
-			} else {
-				throw new Error('Untrusted certificate.');
-			}
-		}
-	}
-
-	// ignoreCerts parameter helps in fetching server icon and
-	// other server details when user chooses to ignore certificate warnings
-	async checkDomain(domain: any, ignoreCerts = false, silent = false): Promise<any> {
-		if (!silent && this.duplicateDomain(domain)) {
-			// Do not check duplicate in silent mode
-			throw new Error('This server has been added.');
-		}
-
-		domain = this.formatUrl(domain);
-
-		const serverConf = {
-			icon: defaultIconUrl,
-			url: domain,
-			alias: domain,
-			ignoreCerts
-		};
-
-		try {
-			return await this.getServerSettings(domain, serverConf.ignoreCerts);
-		} catch (err) {
-			// If the domain contains following strings we just bypass the server
-			const whitelistDomains = [
-				'zulipdev.org'
-			];
-
-			// make sure that error is an error or string not undefined
-			// so validation does not throw error.
-			const error = err || '';
-
-			const certsError = error.toString().includes('certificate');
-			if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
-				return this.checkCertError(domain, serverConf, error, silent);
-			} else {
-				throw Messages.invalidZulipServerError(domain);
-			}
-		}
-	}
-
-	getServerSettings(domain: any, ignoreCerts = false): Promise<object | string> {
-		const serverSettingsOptions = {
-			url: domain + '/api/v1/server_settings',
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		return new Promise((resolve, reject) => {
-			request(serverSettingsOptions, (error: string, response: any) => {
-				if (!error && response.statusCode === 200) {
-					const data = JSON.parse(response.body);
-					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
-						resolve({
-							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
-							// Following check handles both the cases
-							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
-							url: data.realm_uri,
-							alias: escape(data.realm_name),
-							ignoreCerts
-						});
-					} else {
-						reject(Messages.noOrgsError(domain));
-					}
-				} else {
-					reject(response);
-				}
-			});
-		});
-	}
-
-	saveServerIcon(server: any, ignoreCerts = false): Promise<string> {
-		const url = server.icon;
-		const domain = server.url;
-
-		const serverIconOptions = {
-			url,
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		// The save will always succeed. If url is invalid, downgrade to default icon.
-		return new Promise(resolve => {
-			const filePath = this.generateFilePath(url);
-			const file = fs.createWriteStream(filePath);
-			try {
-				request(serverIconOptions).on('response', (response: any) => {
-					response.on('error', (err: string) => {
-						logger.log('Could not get server icon.');
-						logger.log(err);
-						logger.reportSentry(err);
-						resolve(defaultIconUrl);
-					});
-					response.pipe(file).on('finish', () => {
-						resolve(filePath);
-					});
-				}).on('error', (err: string) => {
-					logger.log('Could not get server icon.');
-					logger.log(err);
-					logger.reportSentry(err);
-					resolve(defaultIconUrl);
-				});
-			} catch (err) {
-				logger.log('Could not get server icon.');
-				logger.log(err);
-				logger.reportSentry(err);
-				resolve(defaultIconUrl);
-			}
-		});
-	}
-
-	async updateSavedServer(url: string, index: number): Promise<void> {
-		// Does not promise successful update
-		const oldIcon = this.getDomain(index).icon;
-		const { ignoreCerts } = this.getDomain(index);
-		try {
-			const newServerConf = await this.checkDomain(url, ignoreCerts, true);
-			const localIconUrl = await this.saveServerIcon(newServerConf, ignoreCerts);
-			if (!oldIcon || localIconUrl !== '../renderer/img/icon.png') {
-				newServerConf.icon = localIconUrl;
-				this.updateDomain(index, newServerConf);
-				this.reloadDB();
-			}
-		} catch (err) {
-			ipcRenderer.send('forward-message', 'show-network-error', index);
-		}
-	}
-
-	reloadDB(): void {
-		const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
-		try {
-			const file = fs.readFileSync(domainJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(domainJsonPath)) {
-				fs.unlinkSync(domainJsonPath);
-				dialog.showErrorBox(
-					'Error saving new organization',
-					'There seems to be error while saving new organization, ' +
-					'you may have to re-add your previous organizations back.'
-				);
-				logger.error('Error while JSON parsing domain.json: ');
-				logger.error(err);
-				logger.reportSentry(err);
-			}
-		}
-		this.db = new JsonDB(domainJsonPath, true, true);
-	}
-
-	generateFilePath(url: string): string {
-		const dir = `${app.getPath('userData')}/server-icons`;
-		const extension = path.extname(url).split('?')[0];
-
-		let hash = 5381;
-		let len = url.length;
-
-		while (len) {
-			hash = (hash * 33) ^ url.charCodeAt(--len);
-		}
-
-		// Create 'server-icons' directory if not existed
-		if (!fs.existsSync(dir)) {
-			fs.mkdirSync(dir);
-		}
-
-		return `${dir}/${hash >>> 0}${extension}`;
-	}
-
-	formatUrl(domain: any): string {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
-		}
-	}
+// Migrate from old schema
+try {
+  const oldDomain = database.getObject<unknown>("/domain");
+  if (typeof oldDomain === "string") {
+    (async () => {
+      await addDomain({
+        alias: "Zulip",
+        url: oldDomain,
+      });
+      database.delete("/domain");
+    })();
+  }
+} catch (error: unknown) {
+  if (!(error instanceof DataError)) throw error;
 }
 
-export = new DomainUtil();
+export function getDomains(): ServerConfig[] {
+  reloadDatabase();
+  try {
+    return serverConfigSchema
+      .array()
+      .parse(database.getObject<unknown>("/domains"));
+  } catch (error: unknown) {
+    if (!(error instanceof DataError)) throw error;
+    return [];
+  }
+}
+
+export function getDomain(index: number): ServerConfig {
+  reloadDatabase();
+  return serverConfigSchema.parse(
+    database.getObject<unknown>(`/domains[${index}]`),
+  );
+}
+
+export function updateDomain(index: number, server: ServerConfig): void {
+  reloadDatabase();
+  serverConfigSchema.parse(server);
+  database.push(`/domains[${index}]`, server, true);
+}
+
+export async function addDomain(server: {
+  url: string;
+  alias: string;
+  icon?: string;
+}): Promise<void> {
+  if (server.icon) {
+    const localIconUrl = await saveServerIcon(server.icon);
+    server.icon = localIconUrl;
+    serverConfigSchema.parse(server);
+    database.push("/domains[]", server, true);
+    reloadDatabase();
+  } else {
+    server.icon = defaultIconSentinel;
+    serverConfigSchema.parse(server);
+    database.push("/domains[]", server, true);
+    reloadDatabase();
+  }
+}
+
+export function removeDomains(): void {
+  database.delete("/domains");
+  reloadDatabase();
+}
+
+export function removeDomain(index: number): boolean {
+  if (EnterpriseUtil.isPresetOrg(getDomain(index).url)) {
+    return false;
+  }
+
+  database.delete(`/domains[${index}]`);
+  reloadDatabase();
+  return true;
+}
+
+// Check if domain is already added
+export function duplicateDomain(domain: string): boolean {
+  domain = formatUrl(domain);
+  return getDomains().some((server) => server.url === domain);
+}
+
+export async function checkDomain(
+  domain: string,
+  silent = false,
+): Promise<ServerConfig> {
+  if (!silent && duplicateDomain(domain)) {
+    // Do not check duplicate in silent mode
+    throw new Error("This server has been added.");
+  }
+
+  domain = formatUrl(domain);
+
+  try {
+    return await getServerSettings(domain);
+  } catch {
+    throw new Error(Messages.invalidZulipServerError(domain));
+  }
+}
+
+async function getServerSettings(domain: string): Promise<ServerConfig> {
+  return ipcRenderer.invoke("get-server-settings", domain);
+}
+
+export async function saveServerIcon(iconURL: string): Promise<string> {
+  return (
+    (await ipcRenderer.invoke("save-server-icon", iconURL)) ??
+    defaultIconSentinel
+  );
+}
+
+export async function updateSavedServer(
+  url: string,
+  index: number,
+): Promise<ServerConfig> {
+  // Does not promise successful update
+  const serverConfig = getDomain(index);
+  const oldIcon = serverConfig.icon;
+  try {
+    const newServerConfig = await checkDomain(url, true);
+    const localIconUrl = await saveServerIcon(newServerConfig.icon);
+    if (!oldIcon || localIconUrl !== defaultIconSentinel) {
+      newServerConfig.icon = localIconUrl;
+      updateDomain(index, newServerConfig);
+      reloadDatabase();
+    }
+
+    return newServerConfig;
+  } catch (error: unknown) {
+    logger.log("Could not update server icon.");
+    logger.log(error);
+    Sentry.captureException(error);
+    return serverConfig;
+  }
+}
+
+function reloadDatabase(): void {
+  const domainJsonPath = path.join(
+    app.getPath("userData"),
+    "config/domain.json",
+  );
+  try {
+    const file = fs.readFileSync(domainJsonPath, "utf8");
+    JSON.parse(file);
+  } catch (error: unknown) {
+    if (fs.existsSync(domainJsonPath)) {
+      fs.unlinkSync(domainJsonPath);
+      dialog.showErrorBox(
+        t.__("Error saving new organization"),
+        t.__(
+          "There was an error while saving the new organization. You may have to add your previous organizations again.",
+        ),
+      );
+      logger.error("Error while JSON parsing domain.json: ");
+      logger.error(error);
+      Sentry.captureException(error);
+    }
+  }
+
+  database = new JsonDB(domainJsonPath, true, true);
+}
+
+export function formatUrl(domain: string): string {
+  if (domain.startsWith("http://") || domain.startsWith("https://")) {
+    return domain;
+  }
+
+  if (domain.startsWith("localhost:")) {
+    return `http://${domain}`;
+  }
+
+  return `https://${domain}`;
+}
+
+export function getUnsupportedMessage(
+  server: ServerConfig,
+): string | undefined {
+  if (server.zulipFeatureLevel < 65 /* Zulip Server 4.0 */) {
+    const realm = new URL(server.url).hostname;
+    return t.__(
+      "{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app.",
+      {server: realm, version: server.zulipVersion},
+    );
+  }
+
+  return undefined;
+}
+
+export function iconAsUrl(iconPath: string): string {
+  if (iconPath === defaultIconSentinel) return defaultIcon;
+
+  try {
+    return `data:application/octet-stream;base64,${fs.readFileSync(
+      iconPath,
+      "base64",
+    )}`;
+  } catch {
+    return defaultIcon;
+  }
+}

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

@@ -1,80 +0,0 @@
-import fs = require('fs');
-import path = require('path');
-
-import Logger = require('./logger-util');
-
-const logger = new Logger({
-	file: 'enterprise-util.log',
-	timestamp: true
-});
-
-let instance: null | EnterpriseUtil = null;
-
-class EnterpriseUtil {
-	// todo: replace enterpriseSettings type with an interface once settings are final
-	enterpriseSettings: any;
-	configFile: boolean;
-	constructor() {
-		if (instance) {
-			return instance;
-		}
-		instance = this;
-
-		this.reloadDB();
-	}
-
-	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)) {
-			this.configFile = true;
-			try {
-				const file = fs.readFileSync(enterpriseFile, 'utf8');
-				this.enterpriseSettings = JSON.parse(file);
-			} catch (err) {
-				logger.log('Error while JSON parsing global_config.json: ');
-				logger.log(err);
-			}
-		} else {
-			this.configFile = false;
-		}
-	}
-
-	getConfigItem(key: string, defaultValue?: any): any {
-		this.reloadDB();
-		if (!this.configFile) {
-			return defaultValue;
-		}
-		if (defaultValue === undefined) {
-			defaultValue = null;
-		}
-		return this.configItemExists(key) ? this.enterpriseSettings[key] : defaultValue;
-	}
-
-	configItemExists(key: string): boolean {
-		this.reloadDB();
-		if (!this.configFile) {
-			return false;
-		}
-		return (this.enterpriseSettings[key] !== undefined);
-	}
-
-	isPresetOrg(url: string): boolean {
-		if (!this.configFile || !this.configItemExists('presetOrganizations')) {
-			return false;
-		}
-		const presetOrgs = this.enterpriseSettings.presetOrganizations;
-		for (const org of presetOrgs) {
-			if (url.includes(org)) {
-				return true;
-			}
-		}
-		return false;
-	}
-}
-
-export = new EnterpriseUtil();