release: New release v5.12.2.

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

.editorconfig

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

.gitattributes

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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/custom.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,49 @@
+<!-- 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
+-->
+
+**Screenshots and screen captures:**
+
+**Platforms this PR was tested on:**
+
+- [ ] Windows
+- [ ] macOS
+- [ ] Linux (specify distro)
+
+<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,10 +1,39 @@
-node_modules
-npm-debug.log
-domain.json
-dist
-config.gypi
+# Dependency directory
+/node_modules/
+
+# npm cache directory
+.npm
+
+# Compiled binary build directory
+/dist/
+/dist-electron/
+
+#snap generated files
+snap/parts
+snap/prime
+snap/snap
+snap/stage
+snap/*.snap
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 // osx garbage
 *.DS_Store
 .DS_Store
+
+# dotenv environment variables file
+.env
+
+# miscellaneous
 .idea
+config.gypi
+
+# Test generated files
+# tests/package.json
+
+.python-version

.htmlhintrc

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

.mailmap

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

.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

.python-version

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

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "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,36 +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:
-- '6'
-
-before_install:
-- 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

@@ -2,46 +2,50 @@
 
 Thanks for taking the time to contribute!
 
-The following is a set of guidelines for contributing to Zulip Electron Desktop Client. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
+The following is a set of guidelines for contributing to Zulip's desktop Client. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
 
 ## Getting Started
 
-Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](http://jlord.us/essential-electron/) great article.
+Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](https://jlord.us/essential-electron) great article.
 
 ## Community
 
-* The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).
+- 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-electron, open an [issue](https://github.com/zulip/zulip-electron/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/electron).
+- If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
 
 ## Issue
-Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-electron/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-electron/issues/new).
+
+Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-desktop/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-desktop/issues/new).
 
 The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by commenting the following in the comment section: "**@zulipbot** claim". **@zulipbot** will assign you to the issue and label the issue as **in progress**. For more details, check out [**@zulipbot**](https://github.com/zulip/zulipbot).
 
 Please pay attention to the following points while opening an issue.
 
 ### Does it happen on web browsers? (especially Chrome)
+
 Zulip'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.

ISSUE_TEMPLATE.md

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

README.md

@@ -1,39 +1,41 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.org/zulip/zulip-electron.svg?branch=master)](https://travis-ci.org/zulip/zulip-electron)
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-electron?branch=master&svg=true)](https://ci.appveyor.com/project/akashnimare/zulip-electron/branch/master)
+
+[![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.
+Desktop client for Zulip. Available for Mac, Linux, and Windows.
 
-<img src="http://i.imgur.com/bDtK47q.png"/>
+![screenshot](https://i.imgur.com/s1o6TRA.png)
+![screenshot](https://i.imgur.com/vekKnW4.png)
 
 # Download
-You can download the latest version from the [Releases](https://github.com/zulip/zulip-electron/releases/latest) page.
+
+Please see the [installation guide](https://zulip.com/help/desktop-app-install-guide).
 
 # Features
-* Sign in to multiple teams
-* Native desktop Notifications
-* SpellChecker
-* OSX/Win/Linux installers
-* Automatic Updates (macOS/Windows)
-* Keyboard shortcuts
 
-Description            | Keys
------------------------| -----------------------
-Default shortcuts      | <kbd>Cmd/Ctrl</kbd> <kbd>k</kbd>
-Manage Zulip Servers    | <kbd>Cmd/Ctrl</kbd> <kbd>,</kbd>
-Back                   | <kbd>Cmd/Ctrl</kbd> <kbd>[</kbd>
-Forward                | <kbd>Cmd/Ctrl</kbd> <kbd>]</kbd>
+- Sign in to multiple organizations
+- Desktop notifications with inline reply
+- Tray/dock integration
+- Multi-language spell checker
+- Automatic updates
 
-# Development
-Please see our [development guide](./development.md) to get started and run app locally.
+# Reporting issues
+
+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 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).
 
 # Contribute
 
-If you want to contribute please make sure to read [our documentation about contributing](./CONTRIBUTING.md) first.
-
-* [Issue Tracker](https://github.com/zulip/zulip-electron/issues)
-* [Source Code](https://github.com/zulip/zulip-electron/)
+First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html)!
+Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
 
 # 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.js

@@ -1,34 +0,0 @@
-'use strict';
-const {app, dialog} = require('electron');
-const {autoUpdater} = require('electron-updater');
-
-function appUpdater() {
-	// Log whats happening
-	const log = require('electron-log');
-	log.transports.file.level = 'info';
-	autoUpdater.logger = log;
-	autoUpdater.allowPrerelease = false;
-
-	// Ask the user if update is available
-	// eslint-disable-next-line no-unused-vars
-	autoUpdater.on('update-downloaded', (event, info) => {
-		// Ask user to update the app
-		dialog.showMessageBox({
-			type: 'question',
-			buttons: ['Install and Relaunch', 'Later'],
-			defaultId: 0,
-			message: 'A new version of ' + app.getName() + ' has been downloaded',
-			detail: 'It will be installed the next time you restart the application'
-		}, response => {
-			if (response === 0) {
-				setTimeout(() => autoUpdater.quitAndInstall(), 1);
-			}
-		});
-	});
-	// Init for updates
-	autoUpdater.checkForUpdates();
-}
-
-module.exports = {
-	appUpdater
-};

app/main/autoupdater.ts

@@ -0,0 +1,135 @@
+import {shell} from "electron/common";
+import {app, dialog, session} from "electron/main";
+import process from "node:process";
+
+import log from "electron-log/main";
+import {
+  type UpdateDownloadedEvent,
+  type UpdateInfo,
+  autoUpdater,
+} from "electron-updater";
+
+import * as ConfigUtil from "../common/config-util.ts";
+import * as t from "../common/translation-util.ts";
+
+import {linuxUpdateNotification} from "./linuxupdater.ts"; // Required only in case of linux
+
+let quitting = false;
+
+export function shouldQuitForUpdate(): boolean {
+  return quitting;
+}
+
+export async function appUpdater(updateFromMenu = false): Promise<void> {
+  // Don't initiate auto-updates in development
+  if (!app.isPackaged) {
+    return;
+  }
+
+  if (process.platform === "linux" && !process.env.APPIMAGE) {
+    const ses = session.fromPartition("persist:webviewsession");
+    await linuxUpdateNotification(ses);
+    return;
+  }
+
+  let updateAvailable = false;
+
+  // Log 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.js

@@ -1,219 +0,0 @@
-'use strict';
-const path = require('path');
-const electron = require('electron');
-const {app} = require('electron');
-const ipc = require('electron').ipcMain;
-const electronLocalshortcut = require('electron-localshortcut');
-const Configstore = require('electron-config');
-const isDev = require('electron-is-dev');
-const appMenu = require('./menu');
-const {appUpdater} = require('./autoupdater');
-
-// Adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
-
-const conf = new Configstore();
-
-// Setting userAgent so that server-side code can identify the desktop app
-
-// Prevent window being garbage collected
-let mainWindow;
-
-let isQuitting = false;
-
-// Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
-
-const isAlreadyRunning = app.makeSingleInstance(() => {
-	if (mainWindow) {
-		if (mainWindow.isMinimized()) {
-			mainWindow.restore();
-		}
-
-		mainWindow.show();
-	}
-});
-
-if (isAlreadyRunning) {
-	app.quit();
-}
-
-function isWindowsOrmacOS() {
-	return process.platform === 'darwin' || process.platform === 'win32';
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = () => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-function createMainWindow() {
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		width: conf.get('width') || 1000,
-		height: conf.get('height') || 600,
-		icon: iconPath(),
-		minWidth: 600,
-		minHeight: 500,
-		webPreferences: {
-			plugins: true,
-			allowDisplayingInsecureContent: true,
-			nodeIntegration: true
-		},
-		show: false
-	});
-
-	win.on('focus', () => {
-		win.webContents.send('focus');
-	});
-
-	win.once('ready-to-show', () => {
-		win.show();
-	});
-
-	win.loadURL(mainURL);
-
-	// Keep the app running in background on close event
-	win.on('close', e => {
-		if (!isQuitting) {
-			e.preventDefault();
-
-			if (process.platform === 'darwin') {
-				app.hide();
-			} else {
-				win.hide();
-			}
-		}
-	});
-
-	win.setTitle('Zulip');
-
-	// Let's save browser window position
-	if (conf.get('x') || conf.get('y')) {
-		win.setPosition(conf.get('x'), conf.get('y'));
-	}
-
-	if (conf.get('maximize')) {
-		win.maximize();
-	}
-
-	// Handle sizing events so we can persist them.
-	win.on('maximize', () => {
-		conf.set('maximize', true);
-	});
-
-	win.on('unmaximize', () => {
-		conf.set('maximize', false);
-	});
-
-	win.on('resize', function () {
-		const size = this.getSize();
-		conf.set({
-			width: size[0],
-			height: size[1]
-		});
-	});
-
-	// On osx it's 'moved'
-	win.on('move', function () {
-		const pos = this.getPosition();
-		conf.set({
-			x: pos[0],
-			y: pos[1]
-		});
-	});
-
-	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', e => {
-		if (e) {
-			win.webContents.send('destroytray');
-		}
-	});
-
-	return win;
-}
-
-// eslint-disable-next-line max-params
-app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
-	event.preventDefault();
-	callback(true);
-});
-
-app.on('window-all-closed', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
-app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-	}
-});
-
-app.on('ready', () => {
-	electron.Menu.setApplicationMenu(appMenu);
-	mainWindow = createMainWindow();
-
-	const page = mainWindow.webContents;
-
-	// TODO - use global shortcut instead
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		// page.send('reload');
-		mainWindow.reload();
-		// page.send('destroytray');
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+[', () => {
-		page.send('back');
-	});
-
-	electronLocalshortcut.register(mainWindow, 'CommandOrControl+]', () => {
-		page.send('forward');
-	});
-
-	page.on('dom-ready', () => {
-		mainWindow.show();
-	});
-
-	page.once('did-frame-finish-load', () => {
-		const checkOS = isWindowsOrmacOS();
-		if (checkOS && !isDev) {
-			// Initate auto-updates on MacOS and Windows
-			appUpdater();
-		}
-	});
-	electron.powerMonitor.on('resume', () => {
-		mainWindow.reload();
-		mainWindow.webContents.send('destroytray');
-	});
-
-	ipc.on('focus-app', () => {
-		mainWindow.show();
-	});
-
-	ipc.on('quit-app', () => {
-		app.quit();
-	});
-
-	ipc.on('reload-main', () => {
-		page.reload();
-	});
-
-	ipc.on('update-badge', (event, messageCount) => {
-		if (process.platform === 'darwin') {
-			app.setBadgeCount(messageCount);
-		}
-		page.send('tray', messageCount);
-	});
-});
-
-app.on('will-quit', () => {
-	// Unregister all the shortcuts so that they don't interfare with other apps
-	electronLocalshortcut.unregisterAll(mainWindow);
-});
-
-app.on('before-quit', () => {
-	isQuitting = true;
-});

app/main/index.ts

@@ -0,0 +1,486 @@
+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 * as remoteMain from "@electron/remote/main";
+import windowStateKeeper from "electron-window-state";
+
+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";
+
+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";
+
+import "gatemaker/electron-setup.js"; // eslint-disable-line import-x/no-unassigned-import
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const {GDK_BACKEND} = process.env;
+
+// Initialize sentry for main process
+sentryInit();
+
+let mainWindowState: windowStateKeeper.State;
+
+// Prevent window being garbage collected
+let mainWindow: BrowserWindow;
+let badgeCount: number;
+
+let isQuitting = false;
+
+// Load this file in main window
+const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
+
+const permissionCallbacks = new Map<number, (grant: boolean) => void>();
+let nextPermissionCallbackId = 0;
+
+const appIcon = path.join(publicPath, "resources/Icon");
+
+const iconPath = (): string =>
+  appIcon + (process.platform === "win32" ? ".ico" : ".png");
+
+// Toggle the app window
+const toggleApp = (): void => {
+  if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
+    mainWindow.show();
+  } else {
+    mainWindow.hide();
+  }
+};
+
+function createMainWindow(): BrowserWindow {
+  // Load the previous state with fallback to defaults
+  mainWindowState = windowStateKeeper({
+    defaultWidth: 1100,
+    defaultHeight: 720,
+    path: `${app.getPath("userData")}/config`,
+  });
+
+  const win = new BrowserWindow({
+    // This settings needs to be saved in config
+    title: "Zulip",
+    icon: iconPath(),
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    minWidth: 500,
+    minHeight: 400,
+    webPreferences: {
+      preload: path.join(bundlePath, "renderer.cjs"),
+      sandbox: false,
+      webviewTag: true,
+    },
+    show: false,
+  });
+  remoteMain.enable(win.webContents);
+
+  win.on("focus", () => {
+    send(win.webContents, "focus");
+  });
+
+  (async () => win.loadURL(mainUrl))();
+
+  // Keep the app running in background on close event
+  win.on("close", (event) => {
+    if (ConfigUtil.getConfigItem("quitOnClose", false)) {
+      app.quit();
+    }
+
+    if (!isQuitting && !shouldQuitForUpdate()) {
+      event.preventDefault();
+
+      if (process.platform === "darwin") {
+        if (win.isFullScreen()) {
+          win.setFullScreen(false);
+          win.once("leave-full-screen", () => {
+            app.hide();
+          });
+        } else {
+          app.hide();
+        }
+      } else {
+        win.hide();
+      }
+    }
+  });
+
+  win.setTitle("Zulip");
+
+  win.on("enter-full-screen", () => {
+    send(win.webContents, "enter-fullscreen");
+  });
+
+  win.on("leave-full-screen", () => {
+    send(win.webContents, "leave-fullscreen");
+  });
+
+  //  To destroy tray icon when navigate to a new URL
+  win.webContents.on("will-navigate", (event) => {
+    if (event) {
+      send(win.webContents, "destroytray");
+    }
+  });
+
+  // Let us register listeners on the window, so we can update the state
+  // automatically (the listeners will be removed when the window is closed)
+  // and restore the maximized or full screen state
+  mainWindowState.manage(win);
+
+  return win;
+}
+
+(async () => {
+  if (!app.requestSingleInstanceLock()) {
+    app.quit();
+    return;
+  }
+
+  await app.whenReady();
+
+  if (process.env.GDK_BACKEND !== GDK_BACKEND) {
+    console.warn(
+      "Reverting GDK_BACKEND to work around https://github.com/electron/electron/issues/28436",
+    );
+    if (GDK_BACKEND === undefined) {
+      delete process.env.GDK_BACKEND;
+    } else {
+      process.env.GDK_BACKEND = GDK_BACKEND;
+    }
+  }
+
+  // Used for notifications on Windows
+  app.setAppUserModelId("org.zulip.zulip-electron");
+
+  remoteMain.initialize();
+
+  app.on("second-instance", () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) {
+        mainWindow.restore();
+      }
+
+      mainWindow.show();
+    }
+  });
+
+  ipcMain.on(
+    "permission-callback",
+    (event, permissionCallbackId: number, grant: boolean) => {
+      permissionCallbacks.get(permissionCallbackId)?.(grant);
+      permissionCallbacks.delete(permissionCallbackId);
+    },
+  );
+
+  // This event is only available on macOS. Triggers when you click on the dock icon.
+  app.on("activate", () => {
+    mainWindow.show();
+  });
+
+  app.on("web-contents-created", (_event, contents: WebContents) => {
+    contents.setWindowOpenHandler((details) => {
+      handleExternalLink(contents, details, page);
+      return {action: "deny"};
+    });
+  });
+
+  const ses = session.fromPartition("persist:webviewsession");
+  ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
+
+  function configureSpellChecker() {
+    const enable = ConfigUtil.getConfigItem("enableSpellchecker", true);
+    if (enable && process.platform !== "darwin") {
+      ses.setSpellCheckerLanguages(
+        ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
+      );
+    }
+
+    ses.setSpellCheckerEnabled(enable);
+  }
+
+  configureSpellChecker();
+  ipcMain.on("configure-spell-checker", configureSpellChecker);
+
+  const clipboardSigKey = crypto.randomBytes(32);
+
+  ipcMain.on("new-clipboard-key", (event) => {
+    const key = crypto.randomBytes(32);
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    event.returnValue = {key, sig: hmac.digest()};
+  });
+
+  ipcMain.handle("poll-clipboard", (event, key, sig) => {
+    // Check that the key was generated here.
+    const hmac = crypto.createHmac("sha256", clipboardSigKey);
+    hmac.update(key);
+    if (!crypto.timingSafeEqual(sig, hmac.digest())) return;
+
+    try {
+      // Check that the data on the clipboard was encrypted to the key.
+      const data = Buffer.from(clipboard.readText(), "hex");
+      const iv = data.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;
+    }
+  });
+
+  AppMenu.setMenu({
+    tabs: [],
+  });
+  mainWindow = createMainWindow();
+
+  // Auto-hide menu bar on Windows + Linux
+  if (process.platform !== "darwin") {
+    const shouldHideMenu = ConfigUtil.getConfigItem("autoHideMenubar", false);
+    mainWindow.autoHideMenuBar = shouldHideMenu;
+    mainWindow.setMenuBarVisibility(!shouldHideMenu);
+  }
+
+  const page = mainWindow.webContents;
+
+  page.on("dom-ready", () => {
+    if (ConfigUtil.getConfigItem("startMinimized", false)) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+    }
+  });
+
+  ipcMain.on("fetch-user-agent", (event) => {
+    event.returnValue = session
+      .fromPartition("persist:webviewsession")
+      .getUserAgent();
+  });
+
+  ipcMain.handle("get-server-settings", async (event, domain: string) =>
+    _getServerSettings(domain, ses),
+  );
+
+  ipcMain.handle("save-server-icon", async (event, url: string) =>
+    _saveServerIcon(url, ses),
+  );
+
+  ipcMain.handle("is-online", async (event, url: string) =>
+    _isOnline(url, ses),
+  );
+
+  page.once("did-frame-finish-load", async () => {
+    // Initiate auto-updates on MacOS and Windows
+    if (ConfigUtil.getConfigItem("autoUpdate", true)) {
+      await appUpdater();
+    }
+  });
+
+  app.on(
+    "certificate-error",
+    (
+      event,
+      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},
+          ),
+        );
+      }
+    },
+  );
+
+  ses.setPermissionRequestHandler(
+    (webContents, permission, callback, details) => {
+      const {origin} = new URL(details.requestingUrl);
+      const permissionCallbackId = nextPermissionCallbackId++;
+      permissionCallbacks.set(permissionCallbackId, callback);
+      send(
+        page,
+        "permission-request",
+        {
+          webContentsId:
+            webContents.id === mainWindow.webContents.id
+              ? null
+              : webContents.id,
+          origin,
+          permission,
+        },
+        permissionCallbackId,
+      );
+    },
+  );
+
+  // Temporarily remove this event
+  // powerMonitor.on('resume', () => {
+  // 	mainWindow.reload();
+  // 	send(page, 'destroytray');
+  // });
+
+  ipcMain.on("focus-app", () => {
+    mainWindow.show();
+  });
+
+  ipcMain.on("quit-app", () => {
+    app.quit();
+  });
+
+  // Reload full app not just webview, useful in debugging
+  ipcMain.on("reload-full-app", () => {
+    mainWindow.reload();
+    send(page, "destroytray");
+  });
+
+  ipcMain.on("clear-app-settings", () => {
+    mainWindowState.unmanage();
+    app.relaunch();
+    app.exit();
+  });
+
+  ipcMain.on("toggle-app", () => {
+    toggleApp();
+  });
+
+  ipcMain.on("toggle-badge-option", () => {
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+  });
+
+  ipcMain.on("toggle-menubar", (_event, showMenubar: boolean) => {
+    mainWindow.autoHideMenuBar = showMenubar;
+    mainWindow.setMenuBarVisibility(!showMenubar);
+    send(page, "toggle-autohide-menubar", showMenubar, true);
+  });
+
+  ipcMain.on("update-badge", (_event, messageCount: number) => {
+    badgeCount = messageCount;
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
+    send(page, "tray", messageCount);
+  });
+
+  ipcMain.on("update-taskbar-icon", (_event, data: string, text: string) => {
+    BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+  });
+
+  ipcMain.on(
+    "forward-message",
+    <Channel extends keyof RendererMessage>(
+      _event: IpcMainEvent,
+      listener: Channel,
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      send(page, listener, ...parameters);
+    },
+  );
+
+  ipcMain.on(
+    "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);
+      }
+    },
+  );
+
+  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}`);
+    }
+  });
+
+  ipcMain.on("toggleAutoLauncher", async (_event, AutoLaunchValue: boolean) => {
+    await setAutoLaunch(AutoLaunchValue);
+  });
+
+  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", (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

@@ -0,0 +1,51 @@
+import {Notification, type Session, app} from "electron/main";
+
+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",
+});
+
+export async function linuxUpdateNotification(session: Session): Promise<void> {
+  let url = "https://api.github.com/repos/zulip/zulip-desktop/releases";
+  url = ConfigUtil.getConfigItem("betaUpdate", false) ? url : url + "/latest";
+
+  try {
+    const response = await session.fetch(url);
+    if (!response.ok) {
+      logger.log("Linux update response status: ", response.status);
+      return;
+    }
+
+    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: 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/menu.js

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

app/main/menu.ts

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

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

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

app/main/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,42 +0,0 @@
-{
-  "name": "zulip",
-  "productName": "Zulip",
-  "version": "1.0.0-beta",
-  "description": "Zulip Desktop App",
-  "license": "Apache-2.0",
-  "email": "<svnitakash@gmail.com>",
-  "copyright": "©2017 Kandra Labs, Inc.",
-  "author": {
-    "name": "Akash Nimare",
-    "email": "svnitakash@gmail.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/zulip/zulip-electron.git"
-  },
-  "bugs": {
-    "url": "https://github.com/zulip/zulip-electron/issues"
-  },
-  "main": "main/index.js",
-  "keywords": [
-    "Zulip",
-    "Group Chat app",
-    "electron-app",
-    "electron",
-    "Desktop app",
-    "InstantMessaging"
-  ],
-  "dependencies": {
-    "electron-config": "0.2.1",
-    "electron-debug": "1.1.0",
-    "electron-is-dev": "0.1.2",
-    "electron-localshortcut": "1.0.0",
-    "electron-log": "1.3.0",
-    "electron-spellchecker": "1.0.8",
-    "electron-updater": "1.11.2",
-    "https": "^1.0.0",
-    "node-json-db": "0.7.3",
-    "request": "2.79.0",
-    "wurl": "2.1.0"
-  }
-}

app/renderer/about.html

@@ -1,33 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="css/about.css">
-	</head>
-	<body>
-	<div class="about">
+<!doctype html>
+<meta charset="UTF-8" />
+<link rel="stylesheet" href="css/about.css" />
+
+<!-- Initially hidden to prevent FOUC -->
+<div class="about" hidden>
   <img class="logo" src="../resources/zulip.png" />
-		<p class="detail" id="version">version ?.?.?</p>
-		<div class="maintenance-info">
-			<p class="detail maintainer">Maintained by Zulip</p>
-			<p class="detail license">Available under the Apache License</p>
-			<a class="bug" onclick="linkInBrowser()" href="#">Found bug?</a>
-		</div>
-	</div>
-	<script>
-
-	const app = require('electron').remote.app;
-	const version_tag = document.getElementById('version');
-	version_tag.innerHTML = 'version ' + app.getVersion();
-
-	function linkInBrowser(event) {
-
-		const shell = require('electron').shell;
-
-		const url = "https://github.com/zulip/zulip-electron/issues/new?body=Please describe your issue and steps to reproduce it."
-
-		shell.openExternal(url);
-	}
-	</script>
-	</body>
-</html>
+  <p class="detail" id="version"></p>
+</div>

app/renderer/css/about.css

@@ -1,27 +1,32 @@
-body {
-	background: #fafafa;
+:host {
+  contain: strict;
+  display: flow-root;
+  background: rgb(250 250 250 / 100%);
   font-family: menu, "Helvetica Neue", sans-serif;
-	-webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .logo {
   display: block;
-	margin: 0 auto;
+  margin: -40px auto;
 }
 
 #version {
-	color: #aaa;
-	font-size: 0.9em;
+  color: rgb(68 67 67 / 100%);
+  font-size: 1.3em;
+  padding-top: 40px;
 }
 
 .about {
-	margin-top: 50px;
+  display: block !important;
+  margin: 25vh auto;
+  height: 25vh;
   text-align: center;
 }
 
 .about p {
   font-size: 20px;
-	color: rgba(0, 0, 0, 0.62);
+  color: rgb(0 0 0 / 62%);
 }
 
 .about img {
@@ -44,30 +49,20 @@ body {
 .maintenance-info {
   position: absolute;
   width: 100%;
-	bottom: 20px;
-	left: 0px;
-	color: #444;
+  left: 0;
+  color: rgb(68 68 68 / 100%);
 }
 
 .maintenance-info p {
   margin: 0;
   font-size: 1em;
-
   width: 100%;
 }
 
-.maintenance-info .bug {
-	display: inline-block;
-	padding: 8px 15px;
-	margin-top: 30px;
-	text-decoration: none;
-	background-color: #52c2af;
-	color: #fff;
-	border-radius: 4px;
-
-	transition: background-color 0.2s ease;
+p.detail a {
+  color: rgb(53 95 76 / 100%);
 }
 
-.maintenance-info .bug:hover {
-	background-color: #32a692;
+p.detail a:hover {
+  text-decoration: underline;
 }

app/renderer/css/feedback.css

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

app/renderer/css/fonts.css

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

@@ -1,132 +1,225 @@
 /*******************
  *  General rules  *
  *******************/
-html, body {
+
+html,
+body {
   height: 100%;
   margin: 0;
   cursor: default;
-    user-select:none;
+  user-select: none;
 }
 
 #content {
   display: flex;
   height: 100%;
-    background: #eee url(../img/ic_loading.gif) no-repeat;
-    background-size: 60px 60px;
-    background-position: center;
 }
 
-#sidebar {
-    background: #222c31;
+.toggle-sidebar {
+  background: rgb(34 44 49 / 100%);
   width: 54px;
-    padding: 27px 0 20px 0;
+  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;
 }
 
-@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');
+.toggle-sidebar div {
+  transition: all 0.5s ease-out;
+}
+
+.sidebar-hide {
+  width: 0;
+  transition: all 0.8s ease;
+}
+
+.sidebar-hide div {
+  transform: translateX(-100%);
+  transition: all 0.6s ease-out;
+}
+
+#view-controls-container {
+  height: calc(100% - 208px);
+  scrollbar-gutter: stable both-edges;
+  overflow-y: hidden;
+}
+
+#view-controls-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+#view-controls-container::-webkit-scrollbar-track {
+  background-color: rgb(0 0 0 / 30%);
+}
+
+#view-controls-container::-webkit-scrollbar-thumb {
+  background-color: rgb(169 169 169 / 100%);
+}
+
+#view-controls-container:hover {
+  overflow-y: scroll;
 }
 
 /*******************
   *   Left Sidebar  *
   *******************/
- #tabs-container {
+
+#tabs-container {
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
+
   /* Preferred icon size */
   font-size: 24px;
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
-  word-wrap: 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;
+  text-rendering: optimizelegibility;
+}
+
+#actions-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
 }
 
 .action-button {
   display: flex;
   flex-direction: column;
-    align-items: center;
-    padding: 10px;
+  padding: 12px;
+}
+
+.action-button:hover {
+  cursor: pointer;
 }
 
 .action-button i {
-    color: #6c8592;
+  color: hsl(200.53deg 14.96% 49.8%);
   font-size: 28px;
 }
 
 .action-button:hover i {
-    color: #98a9b3;
+  color: hsl(202.22deg 15.08% 64.9%);
+}
+
+.action-button > .dnd-on {
+  color: hsl(200.53deg 14.96% 85%);
+}
+
+.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: rgb(239 239 239 / 100%);
+  opacity: 0.9;
+  padding-right: 14px;
+}
+
+.action-button.active i {
+  color: rgb(28 38 43 / 100%);
+}
+
+.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: 5px 0;
+  margin: 2px 0;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
 
-.tab.active::before {
-    content: "";
-    background: #fff;
-    border-radius: 0 3px 3px 0;
-    width: 4px;
-    position: absolute;
-    height: 35px;
-    left: -10px;
-    top: 5px;
+.tab:first-child {
+  margin-top: 9px;
+}
+
+.tab .server-icons {
+  width: 35px;
+  vertical-align: top;
+  border-radius: 4px;
 }
 
 .tab .server-tab {
-    background: #a4d3c4;
-    background-size: 100%;
-    border-radius: 4px;
-    width: 35px;
+  width: 100%;
   height: 35px;
   position: relative;
-    margin: 5px 0;
+  margin-top: 5px;
   z-index: 11;
   line-height: 31px;
-    color: #194a2b;
+  color: rgb(238 238 238 / 100%);
   text-align: center;
   overflow: hidden;
   opacity: 0.6;
+  padding: 6px 0;
+}
+
+.server-tab .alt-icon {
+  font-family: Verdana, sans-serif;
+  font-weight: 600;
+  font-size: 22px;
+  border: 2px solid rgb(34 44 49 / 100%);
+  margin-left: 17%;
+  width: 35px;
+  border-radius: 4px;
 }
 
 .tab .server-tab:hover {
   opacity: 0.8;
 }
 
-.tab .functional-tab {
-    background: #eee;
-}
-
-.tab .functional-tab i {
-    font-size: 28px;
-    line-height: 36px;
-}
-
 .tab.active .server-tab {
   opacity: 1;
+  background-color: rgb(100 132 120 / 100%);
+}
+
+.tab.functional-tab {
+  height: 46px;
+  padding: 0;
+}
+
+.tab.functional-tab.active .server-tab {
+  padding: 2px 0;
+  height: 40px;
+  background-color: rgb(255 255 255 / 25%);
+}
+
+.tab.functional-tab .server-tab i {
+  font-size: 28px;
+  line-height: 36px;
 }
 
 .tab .server-tab-badge.active {
@@ -134,18 +227,18 @@ html, body {
   min-width: 11px;
   padding: 0 3px;
   height: 17px;
-    background-color: #f44336;
+  background-color: rgb(244 67 54 / 100%);
   font-size: 10px;
   font-family: sans-serif;
   position: absolute;
-    right: -6px;
   z-index: 15;
-    top: -2px;
+  top: 6px;
   float: right;
-    color: #fff;
+  color: rgb(255 255 255 / 100%);
   text-align: center;
   line-height: 17px;
   display: block;
+  right: 0;
 }
 
 .tab .server-tab-badge {
@@ -154,7 +247,7 @@ html, body {
 
 .tab .server-tab-badge.close-button {
   width: 16px;
-    padding: 0 0 0 1px;
+  padding: 0;
 }
 
 .tab .server-tab-badge.close-button i {
@@ -162,23 +255,240 @@ html, body {
   line-height: 17px;
 }
 
+#add-tab {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab .server-tab-shortcut {
+  color: rgb(100 132 120 / 100%);
+  font-size: 12px;
+  text-align: center;
+  font-family: sans-serif;
+  margin-bottom: 5px;
+}
+
+.refresh {
+  animation: rotate-loader 1s linear infinite;
+}
+
+@keyframes rotate-loader {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
 /*******************
   *   Webview Area  *
   *******************/
-webview {
-    opacity: 1;
-    transition: opacity 0.3s;
+
+#webviews-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+/* Pseudo element for loading indicator */
+#webviews-container::before {
+  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 {
+  z-index: -1;
+  visibility: hidden;
+}
+
+.webview-pane,
+.functional-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   flex-grow: 1;
+  visibility: hidden;
 }
 
-webview.disabled {
-    flex: 0 1;
-    height: 0;
-    width: 0;
+.webview-pane {
+  display: flex;
+  flex-direction: column;
+}
+
+.webview-pane > webview {
+  flex: 1;
+}
+
+.webview-pane.active,
+.functional-view.active {
+  z-index: 1;
+  visibility: visible;
+}
+
+webview.focus {
+  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 */
+
+#loading-tooltip,
+#dnd-tooltip,
+#back-tooltip,
+#reload-tooltip,
+#setting-tooltip {
+  font-family: sans-serif;
+  background: rgb(34 44 49 / 100%);
+  margin-left: 48px;
+  padding: 6px 8px;
+  position: absolute;
+  margin-top: 0;
+  z-index: 1000;
+  color: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  text-align: center;
+  width: 55px;
+  font-size: 14px;
+}
+
+#loading-tooltip::after,
+#dnd-tooltip::after,
+#back-tooltip::after,
+#reload-tooltip::after,
+#setting-tooltip::after {
+  content: " ";
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 7px;
+  right: 68px;
+}
+
+#add-server-tooltip,
+.server-tooltip {
+  font-family: arial, sans-serif;
+  background: rgb(34 44 49 / 100%);
+  left: 56px;
+  padding: 10px 20px;
+  position: fixed;
+  margin-top: 11px;
+  z-index: 5000 !important;
+  color: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  text-align: center;
+  width: max-content;
+  font-size: 14px;
+}
+
+#add-server-tooltip::after,
+.server-tooltip::after {
+  content: " ";
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid rgb(34 44 49 / 100%);
+  position: absolute;
+  top: 10px;
+  left: -5px;
+}
+
+#collapse-button {
+  bottom: 30px;
+  left: 20px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: rgb(34 44 49 / 100%);
+  border-radius: 20px;
+  cursor: pointer;
+  box-shadow: rgb(153 153 153 / 100%) 1px 1px;
+}
+
+#collapse-button i {
+  color: rgb(239 239 239 / 100%);
+}
+
+#main-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Full screen Popup container  */
+
+.popup .popuptext {
+  visibility: hidden;
+  background-color: rgb(85 85 85 / 100%);
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  border-radius: 6px;
+  padding: 9px 0;
+  position: absolute;
+  z-index: 1000;
+  font-family: arial, sans-serif;
+  width: 240px;
+  top: 15px;
+  height: 20px;
+  left: 43%;
+}
+
+.popup .show {
+  visibility: visible;
+  animation: full-screen-popup 0s ease-in 1s forwards;
+  animation-fill-mode: forwards;
+}
+
+@keyframes full-screen-popup {
+  from {
     opacity: 0;
-    transition: opacity 0.3s;
-}
+  }
 
-webview:focus {
-    outline: 0px solid transparent;
+  to {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 1;
+  }
 }

app/renderer/css/network.css

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

app/renderer/css/preference.css

@@ -1,54 +1,137 @@
-html, body {
-    height: 100%;
-    margin: 0;
+@import url("@yaireo/tagify/dist/tagify.css");
+
+:host {
+  contain: strict;
+  display: flow-root;
   cursor: default;
+  user-select: none;
+  font-family: menu, "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
   font-size: 14px;
-    color: #333;
-    background: #fff;
+  background: rgb(239 239 239 / 100%);
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  color: rgb(34 44 49 / 100%);
+
+  /* Copied from https://github.com/yairEO/tagify/blob/v4.17.7/src/tagify.scss#L4-L8 */
+  --tagify-dd-color-primary: rgb(53 149 246);
+  --tagify-dd-bg-color: rgb(255 255 255);
+  --tagify-dd-item-pad: 0.3em 0.5em;
+}
+
+kbd {
+  display: inline-block;
+  border: 1px solid rgb(204 204 204 / 100%);
+  border-radius: 4px;
+  font-size: 15px;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: bold;
+  white-space: nowrap;
+  background-color: rgb(247 247 247 / 100%);
+  color: rgb(51 51 51 / 100%);
+  margin: 0 0.1em;
+  padding: 0.3em 0.8em;
+  text-shadow: 0 1px 0 rgb(255 255 255 / 100%);
+  line-height: 1.4;
+}
+
+table,
+th,
+td {
+  border-collapse: collapse;
+  color: rgb(56 52 48 / 100%);
+}
+
+table {
+  width: 100%;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+
+td {
+  padding: 5px;
+}
+
+td:nth-child(odd) {
+  text-align: right;
+  width: 50%;
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+
+  /* Preferred icon size */
+  font-size: 24px;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  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;
 }
 
 #content {
-    display: flex;
+  display: flex !important;
   height: 100%;
-    font-family: sans-serif;
+  font-family: Montserrat, sans-serif;
 }
 
 #sidebar {
-    width: 80px;
-    padding: 30px;
+  width: 150px;
+  min-width: 100px;
+  padding: 30px 30px 30px 35px;
   display: flex;
   flex-direction: column;
   font-size: 16px;
+  background: rgb(242 242 242 / 100%);
 }
 
-#tabs-container {
+#nav-container {
   padding: 20px 0;
 }
 
-.tab {
-    padding: 5px 0;
-    color: #999;
+.nav {
+  padding: 7px 0;
+  color: rgb(70 78 90 / 100%);
   cursor: pointer;
 }
 
-.tab.active {
-    color: #464e5a;
+.nav.active {
+  color: rgb(78 191 172 / 100%);
   cursor: default;
   position: relative;
 }
 
-.tab.active::before {
-    background: #464e5a;
+.nav.active::before {
+  background: rgb(70 78 90 / 100%);
   width: 3px;
-    height: 16px;
+  height: 18px;
   position: absolute;
   left: -8px;
-    content: '';
+  content: "";
+}
+
+/* We don't want to show this in nav item since we have the + button for adding an Organization */
+
+/* stylelint-disable-next-line selector-id-pattern */
+#nav-AddServer {
+  display: none;
 }
 
 #settings-header {
   font-size: 22px;
-    color: #5c6166;
+  color: rgb(34 44 49 / 100%);
+  font-weight: bold;
+  text-transform: uppercase;
 }
 
 #settings-container {
@@ -58,63 +141,126 @@ html, body {
   overflow-y: scroll;
 }
 
-.server-info-container {
-    margin: 20px 0;
+#new-server-container {
+  padding-left: 42px;
+  padding-top: 25px;
+  margin-right: 16px;
 }
 
 .title {
-    padding: 4px 0 6px 0;
-    font-size: 18px;
-    color: #000;
+  font-weight: 500;
+  color: rgb(34 44 49 / 100%);
+}
+
+.page-title {
+  color: rgb(34 44 49 / 100%);
+  font-size: 15px;
+  font-weight: bold;
+  padding: 4px 0 6px;
+}
+
+.add-server-info-row {
+  display: flex;
+  margin: 8px 0 0;
+}
+
+.add-server-info-right {
+  flex-grow: 1;
+  margin-top: 10px;
+}
+
+.sub-title {
+  padding: 4px 0 6px;
+  font-weight: bold;
+  color: rgb(97 97 97 / 100%);
 }
 
 img.server-info-icon {
-    background: #a4d3c4;
-    background-size: 100%;
-    border-radius: 4px;
-    width: 44px;
-    height: 44px;
+  width: 36px;
+  height: 36px;
+  padding: 4px 4px 4px 10px;
+  cursor: pointer;
+  vertical-align: middle;
 }
 
 .server-info-left {
-    margin-right: 20px;
+  margin: 4px 20px 0 0;
+  min-width: 40%;
 }
 
 .server-info-right {
+  margin-top: 4px;
+  width: 55%;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
   flex-grow: 1;
 }
 
 .server-info-row {
-    display: flex;
-    line-height: 26px;
-    height: 40px;
+  display: inline-block;
+  margin: 5px 0 0;
 }
 
-.server-info-key {
-    width: 40px;
-    margin-right: 20px;
-    text-align: right;
+.server-info-left .server-info-row {
+  display: inline-flex;
+  align-items: inherit;
+  vertical-align: -2px;
+  position: relative;
 }
 
-.server-info-value {
+.server-url {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.server-info-alias {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.server-url-info {
+  margin-right: 10px;
+}
+
+.setting-input-key {
+  font-size: 14px;
+  height: 27px;
+  line-height: 27px;
+  font-weight: bold;
+  background: transparent;
+  flex-wrap: nowrap;
+  margin-right: 10px;
+}
+
+.setting-input-value {
   flex-grow: 1;
   font-size: 14px;
-    height: 24px;
-    border: none;
-    border-bottom: #ddd 1px solid;
+  border-radius: 4px;
+  padding: 13px;
+  border: rgb(237 237 237 / 100%) 2px solid;
   outline-width: 0;
   background: transparent;
-    max-width: 500px;
+  max-width: 450px;
 }
 
-.server-info-value:focus {
-    border-bottom: #b0d8ce 2px solid;
+.setting-input-value:focus {
+  border: rgb(78 191 172 / 100%) 2px solid;
+}
+
+.invalid-input-value:focus {
+  border: rgb(239 83 80 / 100%) 2px solid;
+}
+
+.manual-proxy-block {
+  width: 96%;
 }
 
 .actions-container {
   display: flex;
   font-size: 14px;
-    color: #235d3a;
+  color: rgb(35 93 58 / 100%);
   vertical-align: middle;
   margin: 10px 0;
   flex-wrap: wrap;
@@ -123,40 +269,502 @@ img.server-info-icon {
 .action {
   display: flex;
   align-items: center;
-    margin-right: 20px;
+  padding: 0 10px;
+  margin-right: 10px;
 }
 
 .action i {
   margin-right: 5px;
   font-size: 18px;
+  line-height: 26px;
 }
 
 .settings-pane {
   flex-grow: 1;
+  min-width: 550px;
 }
 
 .action:hover {
   cursor: pointer;
 }
 
+.action.disabled {
+  color: rgb(153 153 153 / 100%);
+}
+
 .action.disabled:hover {
   cursor: default;
 }
 
-.action.disabled {
-    color: #999;
-}
-
-.server-info.active {
-    background: #ecf4ef;
-}
-
-.server-info {
+.settings-card {
   display: flex;
-    padding: 10px;
-    margin: 10px 0 10px 0;
+  flex-wrap: wrap;
+  padding: 12px 30px;
+  margin: 10px 0 20px;
+  background: rgb(255 255 255 / 100%);
+  width: 80%;
+  transition: all 0.2s;
+}
+
+.settings-card:hover {
+  box-shadow:
+    0 2px 5px 0 rgb(0 0 0 / 16%),
+    0 2px 0 0 rgb(0 0 0 / 12%);
 }
 
 .hidden {
   display: none;
+  margin: 5px !important;
+}
+
+.red {
+  color: rgb(240 148 148);
+  background: rgb(255 255 255 / 100%);
+  border-radius: 4px;
+  display: inline-block;
+  border: 2px solid rgb(240 148 148);
+  padding: 10px;
+  width: 100px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+}
+
+.red:hover {
+  background-color: rgb(240 148 148);
+  color: rgb(255 255 255 / 100%);
+}
+
+.green {
+  color: rgb(255 255 255 / 100%);
+  background: rgb(78 191 172 / 100%);
+  border-radius: 4px;
+  display: inline-block;
+  border: none;
+  padding: 10px;
+  width: 100px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+}
+
+.green:hover {
+  background-color: rgb(60 159 141 / 100%);
+  color: rgb(255 255 255 / 100%);
+}
+
+.w-150 {
+  width: 150px;
+}
+
+.w-250 {
+  width: 250px;
+}
+
+.grey {
+  color: rgb(158 158 158 / 100%);
+  background: rgb(250 250 250 / 100%);
+  border: 1px solid rgb(158 158 158 / 100%);
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 6px;
+}
+
+#note {
+  font-size: 10px;
+}
+
+.code {
+  font-family: "Courier New", Courier, monospace;
+}
+
+i.open-tab-button {
+  padding-left: 5px;
+  font-size: 19px;
+  cursor: pointer;
+}
+
+#css-delete-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  /*
+        .action class will add extra margin to right which
+        we don't want for a button; the extra margin is intended for radio buttons
+    */
+  margin-right: 0;
+}
+
+.selected-css-path,
+.download-folder-path {
+  background: rgb(238 238 238 / 100%);
+  padding: 5px 10px;
+  margin-right: 10px;
+  display: flex;
+  width: 90%;
+  justify-content: space-between;
+}
+
+#remove-custom-css {
+  align-items: flex-end;
+}
+
+#server-info-container {
+  /* min-height: calc(100% - 260px); */
+}
+
+#new-org-button {
+  margin: 30px 0;
+}
+
+#create-organization-container {
+  font-size: 1.15em;
+}
+
+#create-organization-container i {
+  position: relative;
+  top: 3px;
+}
+
+#open-create-org-link {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+
+.toggle + label {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.disallowed:hover {
+  background-color: rgb(241 241 241 / 100%);
+  cursor: not-allowed;
+}
+
+input.toggle-round + label {
+  padding: 2px;
+  width: 50px;
+  height: 25px;
+  background-color: rgb(221 221 221 / 100%);
+  border-radius: 25px;
+}
+
+input.toggle-round + label::before,
+input.toggle-round + label::after {
+  display: block;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  content: "";
+}
+
+input.toggle-round + label::before {
+  background-color: rgb(241 241 241 / 100%);
+  border-radius: 25px;
+  inset: 0;
+}
+
+input.toggle-round + label::after {
+  width: 25px;
+  height: 25px;
+  background-color: rgb(255 255 255 / 100%);
+  border-radius: 100%;
+}
+
+input.toggle-round:checked + label::before {
+  background-color: rgb(78 191 172 / 100%);
+  inset: 0;
+}
+
+input.toggle-round:checked + label::after {
+  margin-left: 25px;
+}
+
+/*  Add new server modal */
+
+.add-server-modal {
+  display: block;
+  position: fixed;
+  z-index: 1;
+  padding-top: 15vh;
+  left: 0;
+  top: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+
+  /* background: rgba(61, 64, 67, 15); */
+  background: linear-gradient(
+    35deg,
+    rgb(0 59 82 / 100%),
+    rgb(69 181 155 / 100%)
+  );
+  overflow: auto;
+}
+
+/* Modal Content */
+
+.modal-container {
+  background-color: rgb(244 247 248 / 100%);
+  margin: auto;
+  padding: 57px;
+  border: rgb(218 225 227 / 100%) 1px solid;
+  width: 550px;
+  height: 370px;
+  border-radius: 4px;
+}
+
+.add-server-modal .page-title {
+  text-align: center;
+  font-size: 1.6rem;
+}
+
+.divider {
+  margin-bottom: 30px;
+  margin-top: 30px;
+  color: rgb(125 135 138 / 100%);
+}
+
+.divider hr {
+  margin-left: 8px;
+  margin-right: 8px;
+  width: 44%;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.server-center {
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  padding-top: 13px;
+  margin-left: -5px;
+}
+
+.server-center button {
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin: auto;
+  align-items: center;
+  text-align: center;
+  color: rgb(255 255 255 / 100%);
+  background: rgb(78 191 172 / 100%);
+  border: none;
+  width: 98%;
+  height: 46px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.server-center button:hover {
+  background: rgb(50 149 136 / 100%);
+}
+
+.server-center button:focus {
+  background: rgb(50 149 136 / 100%);
+}
+
+.certificates-card {
+  width: 80%;
+}
+
+.certificate-input {
+  width: 100%;
+  margin-top: 10px;
+  display: inline-flex;
+}
+
+.certificate-input div {
+  align-self: center;
+}
+
+.certificate-input .setting-input-value {
+  margin-left: 10px;
+  max-width: 100%;
+}
+
+.tip {
+  background: none;
+  padding: 0;
+}
+
+.tip:hover {
+  box-shadow: none;
+}
+
+.md-14 {
+  font-size: 14px;
+  vertical-align: middle;
+  padding-right: 6px;
+}
+
+#open-hotkeys-link {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.server-network-option {
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-top: 10px;
+  padding-top: 15px;
+  align-items: center;
+  text-align: center;
+  color: rgb(78 191 172);
+  width: 98%;
+  height: 46px;
+  cursor: pointer;
+}
+
+i.open-network-button {
+  font-size: 16px;
+  cursor: pointer;
+  padding-left: 5px;
+  position: absolute;
+}
+
+/* responsive grid */
+@media (width >= 500px) and (width <= 720px) {
+  #new-server-container {
+    padding-left: 0;
+    width: 60vw;
+    padding-right: 4vh;
+  }
+
+  .page-title {
+    width: 60vw;
+  }
+}
+
+@media (width <= 500px) {
+  #new-server-container {
+    padding-left: 0;
+    width: 54%;
+  }
+
+  .page-title {
+    width: 54%;
+  }
+}
+
+@media (width <= 650px) {
+  .selected-css-path,
+  .download-folder-path {
+    margin-right: 15px;
+  }
+
+  #css-delete-action {
+    margin-left: 10px;
+  }
+
+  #css-delete-action span {
+    display: none;
+  }
+}
+
+@media (width <= 720px) {
+  .modal-container {
+    width: 60vw;
+    padding: 40px;
+    min-width: 300px;
+  }
+
+  .server-center button {
+    margin-right: -12px;
+    width: 100%;
+  }
+
+  .divider {
+    margin-right: -8px;
+  }
+
+  .divider hr {
+    margin-left: 6px;
+    margin-right: 6px;
+    width: 43%;
+  }
+}
+
+@media (width <= 600px) {
+  .divider {
+    margin-left: 4%;
+  }
+
+  .divider hr {
+    margin-left: 2px;
+    margin-right: 2px;
+    width: 40%;
+  }
+}
+
+@media (width <= 900px) {
+  .settings-card {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .server-info-right {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .action {
+    margin-top: 10px;
+  }
+}
+
+.lang-menu {
+  font-size: 13px;
+  font-weight: bold;
+  background: rgb(78 191 172 / 100%);
+  width: 100px;
+  height: 38px;
+  color: rgb(255 255 255 / 100%);
+  border-color: rgb(0 0 0 / 0%);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.tagify__input {
+  min-width: 130px !important;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.tagify__input::before {
+  top: 0;
+  bottom: 0;
+}
+
+.settings-tagify-dropdown {
+  position: relative;
+  z-index: 9999;
+  height: 0;
 }

app/renderer/css/preload.css

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

app/renderer/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.js

@@ -1,11 +0,0 @@
-'use strict';
-
-class BaseComponent {
-	generateNodeFromTemplate(template) {
-		const wrapper = document.createElement('div');
-		wrapper.innerHTML = template;
-		return wrapper.firstElementChild;
-	}
-}
-
-module.exports = BaseComponent;

app/renderer/js/components/base.ts

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

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

@@ -0,0 +1,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.js

@@ -1,43 +0,0 @@
-'use strict';
-
-const Tab = require(__dirname + '/../components/tab.js');
-
-class FunctionalTab extends Tab {
-	template() {
-		return `<div class="tab">
-					<div class="server-tab-badge close-button">
-						<i class="material-icons">close</i>
-					</div>
-					<div class="server-tab functional-tab">
-						<i class="material-icons">${this.props.materialIcon}</i>
-					</div>
-				</div>`;
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
-		this.registerListeners();
-	}
-
-	registerListeners() {
-		super.registerListeners();
-
-		this.$el.addEventListener('mouseover', () => {
-			this.$closeButton.classList.add('active');
-		});
-
-		this.$el.addEventListener('mouseout', () => {
-			this.$closeButton.classList.remove('active');
-		});
-
-		this.$closeButton.addEventListener('click', e => {
-			this.props.onDestroy();
-			e.stopPropagation();
-		});
-	}
-}
-
-module.exports = FunctionalTab;

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

@@ -0,0 +1,73 @@
+import {type Html, html} from "../../../common/html.ts";
+import type {TabPage} from "../../../common/types.ts";
+
+import {generateNodeFromHtml} from "./base.ts";
+import Tab, {type TabProperties} from "./tab.ts";
+
+export type FunctionalTabProperties = {
+  $view: Element;
+  page: TabPage;
+} & TabProperties;
+
+export default class FunctionalTab extends Tab {
+  $view: Element;
+  $el: Element;
+  $closeButton?: Element;
+
+  constructor({$view, ...properties}: FunctionalTabProperties) {
+    super(properties);
+
+    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();
+    }
+  }
+
+  override async activate(): Promise<void> {
+    await super.activate();
+    this.$view.classList.add("active");
+  }
+
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    this.$view.classList.remove("active");
+  }
+
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    this.$view.remove();
+  }
+
+  templateHtml(): Html {
+    return html`
+      <div class="tab functional-tab" data-tab-id="${this.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();
+    });
+  }
+}

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

@@ -1,31 +0,0 @@
-'use strict';
-
-const Tab = require(__dirname + '/../components/tab.js');
-
-class ServerTab extends Tab {
-	template() {
-		return `<div class="tab">
-					<div class="server-tab-badge"></div>
-					<div class="server-tab" style="background-image: url(${this.props.icon});"></div>
-				</div>`;
-	}
-
-	init() {
-		super.init();
-
-		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
-	}
-
-	updateBadge(count) {
-		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count;
-
-			this.$badge.innerHTML = formattedCount;
-			this.$badge.classList.add('active');
-		} else {
-			this.$badge.classList.remove('active');
-		}
-	}
-}
-
-module.exports = ServerTab;

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

@@ -0,0 +1,93 @@
+import process from "node:process";
+
+import {type Html, html} from "../../../common/html.ts";
+import {ipcRenderer} from "../typed-ipc-renderer.ts";
+
+import {generateNodeFromHtml} from "./base.ts";
+import Tab, {type TabProperties} from "./tab.ts";
+import type WebView from "./webview.ts";
+
+export type ServerTabProperties = {
+  webview: Promise<WebView>;
+} & TabProperties;
+
+export default class ServerTab extends Tab {
+  webview: Promise<WebView>;
+  $el: Element;
+  $name: Element;
+  $icon: HTMLImageElement;
+  $badge: Element;
+
+  constructor({webview, ...properties}: ServerTabProperties) {
+    super(properties);
+
+    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")!;
+  }
+
+  override async activate(): Promise<void> {
+    await super.activate();
+    (await this.webview).load();
+  }
+
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    (await this.webview).hide();
+  }
+
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    (await this.webview).destroy();
+  }
+
+  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>
+    `;
+  }
+
+  setLabel(label: string): void {
+    this.properties.label = label;
+    this.$name.textContent = label;
+  }
+
+  setIcon(icon: string): void {
+    this.properties.icon = icon;
+    this.$icon.src = icon;
+  }
+
+  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}`;
+  }
+}

app/renderer/js/components/tab.js

@@ -1,49 +0,0 @@
-'use strict';
-
-const BaseComponent = require(__dirname + '/../components/base.js');
-
-class Tab extends BaseComponent {
-	constructor(props) {
-		super();
-
-		this.props = props;
-		this.webview = this.props.webview;
-
-		this.init();
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.registerListeners();
-	}
-
-	registerListeners() {
-		this.$el.addEventListener('click', this.props.onClick);
-	}
-
-	isLoading() {
-		return this.webview.isLoading;
-	}
-
-	activate() {
-		this.$el.classList.add('active');
-		this.webview.load();
-	}
-
-	deactivate() {
-		this.$el.classList.remove('active');
-		this.webview.hide();
-	}
-
-	destroy() {
-		this.$el.parentNode.removeChild(this.$el);
-		this.webview.$el.parentNode.removeChild(this.webview.$el);
-	}
-}
-
-Tab.SERVER_TAB = 0;
-Tab.SETTINGS_TAB = 1;
-
-module.exports = Tab;

app/renderer/js/components/tab.ts

@@ -0,0 +1,46 @@
+import type {TabPage, TabRole} from "../../../common/types.ts";
+
+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;
+};
+
+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();
+  }
+}

app/renderer/js/components/webview.js

@@ -1,178 +0,0 @@
-'use strict';
-
-const DomainUtil = require(__dirname + '/../utils/domain-util.js');
-const SystemUtil = require(__dirname + '/../utils/system-util.js');
-const LinkUtil = require(__dirname + '/../utils/link-util.js');
-const {app, dialog, shell} = require('electron').remote;
-const {ipcRenderer} = require('electron');
-
-const BaseComponent = require(__dirname + '/../components/base.js');
-
-class WebView extends BaseComponent {
-	constructor(props) {
-		super();
-
-		this.props = props;
-
-		this.zoomFactor = 1.0;
-		this.loading = false;
-		this.badgeCount = 0;
-	}
-
-	template() {
-		return `<webview
-					class="disabled"
-					src="${this.props.url}"
-					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
-					disablewebsecurity
-					preload="js/preload.js"
-					webpreferences="allowRunningInsecureContent, javascript=yes">
-				</webview>`;
-	}
-
-	init() {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.appendChild(this.$el);
-
-		this.registerListeners();
-	}
-
-	registerListeners() {
-		this.$el.addEventListener('new-window', event => {
-			const {url} = event;
-			const domainPrefix = DomainUtil.getDomain(this.props.index).url;
-
-			if (LinkUtil.isInternal(domainPrefix, url)) {
-				event.preventDefault();
-				this.$el.loadURL(url);
-			} else {
-				event.preventDefault();
-				shell.openExternal(url);
-			}
-		});
-
-		this.$el.addEventListener('page-title-updated', event => {
-			const {title} = event;
-			this.badgeCount = this.getBadgeCount(title);
-			this.props.onTitleChange();
-		});
-
-		this.$el.addEventListener('dom-ready', this.show.bind(this));
-
-		this.$el.addEventListener('did-fail-load', event => {
-			const {errorDescription} = event;
-			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
-			if (hasConnectivityErr) {
-				console.error('error', errorDescription);
-				this.checkConnectivity();
-			}
-		});
-
-		this.$el.addEventListener('did-start-loading', () => {
-			let userAgent = SystemUtil.getUserAgent();
-			if (!userAgent) {
-				SystemUtil.setUserAgent(this.$el.getUserAgent());
-				userAgent = SystemUtil.getUserAgent();
-			}
-			this.$el.setUserAgent(userAgent);
-		});
-	}
-
-	getBadgeCount(title) {
-		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
-		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
-	}
-
-	show() {
-		// Do not show WebView if another tab was selected and this tab should be in background.
-		if (!this.props.isActive()) {
-			return;
-		}
-
-		this.$el.classList.remove('disabled');
-		this.focus();
-		this.loading = false;
-		this.props.onTitleChange(this.$el.getTitle());
-	}
-
-	focus() {
-		this.$el.focus();
-	}
-
-	hide() {
-		this.$el.classList.add('disabled');
-	}
-
-	load() {
-		if (this.$el) {
-			this.show();
-		} else {
-			this.init();
-		}
-	}
-
-	checkConnectivity() {
-		return dialog.showMessageBox({
-			title: 'Internet connection problem',
-			message: 'No internet available! Try again?',
-			type: 'warning',
-			buttons: ['Try again', 'Close'],
-			defaultId: 0
-		}, index => {
-			if (index === 0) {
-				this.reload();
-				ipcRenderer.send('reload');
-				ipcRenderer.send('destroytray');
-			}
-			if (index === 1) {
-				app.quit();
-			}
-		});
-	}
-
-	zoomIn() {
-		this.zoomFactor += 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	zoomOut() {
-		this.zoomFactor -= 0.1;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	zoomActualSize() {
-		this.zoomFactor = 1.0;
-		this.$el.setZoomFactor(this.zoomFactor);
-	}
-
-	logOut() {
-		this.$el.executeJavaScript('logout()');
-	}
-
-	showShortcut() {
-		this.$el.executeJavaScript('shortcut()');
-	}
-
-	openDevTools() {
-		this.$el.openDevTools();
-	}
-
-	back() {
-		if (this.$el.canGoBack()) {
-			this.$el.goBack();
-		}
-	}
-
-	forward() {
-		if (this.$el.canGoForward()) {
-			this.$el.goForward();
-		}
-	}
-
-	reload() {
-		this.hide();
-		this.$el.reload();
-	}
-}
-
-module.exports = WebView;

app/renderer/js/components/webview.ts

@@ -0,0 +1,342 @@
+import type {WebContents} from "electron/main";
+import fs from "node:fs";
+
+import * as remote from "@electron/remote";
+import {app, dialog} from "@electron/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";
+
+import {generateNodeFromHtml} from "./base.ts";
+import {contextMenu} from "./context-menu.ts";
+
+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")))();
+    }
+  }
+}

app/renderer/js/electron-bridge.ts

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

app/renderer/js/main.js

@@ -1,190 +0,0 @@
-'use strict';
-
-require(__dirname + '/js/tray.js');
-const {ipcRenderer} = require('electron');
-
-const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
-const WebView = require(__dirname + '/js/components/webview.js');
-const ServerTab = require(__dirname + '/js/components/server-tab.js');
-const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
-
-class ServerManagerView {
-	constructor() {
-		this.$tabsContainer = document.getElementById('tabs-container');
-
-		const $actionsContainer = document.getElementById('actions-container');
-		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
-		this.$addServerButton = $actionsContainer.querySelector('#add-action');
-		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
-		this.$content = document.getElementById('content');
-
-		this.activeTabIndex = -1;
-		this.tabs = [];
-		this.functionalTabs = {};
-	}
-
-	init() {
-		this.initTabs();
-		this.initActions();
-		this.registerIpcs();
-	}
-
-	initTabs() {
-		const servers = DomainUtil.getDomains();
-		if (servers.length > 0) {
-			for (let i = 0; i < servers.length; i++) {
-				this.initServer(servers[i], i);
-			}
-			this.activateTab(0);
-		} else {
-			this.openSettings();
-		}
-	}
-
-	initServer(server, index) {
-		this.tabs.push(new ServerTab({
-			icon: server.icon,
-			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, index),
-			webview: new WebView({
-				$root: this.$content,
-				index,
-				url: server.url,
-				name: server.alias,
-				isActive: () => {
-					return index === this.activeTabIndex;
-				},
-				onTitleChange: this.updateBadge.bind(this),
-				nodeIntegration: false
-			})
-		}));
-	}
-
-	initActions() {
-		this.$reloadButton.addEventListener('click', () => {
-			this.tabs[this.activeTabIndex].webview.reload();
-		});
-		this.$addServerButton.addEventListener('click', this.openSettings.bind(this));
-		this.$settingsButton.addEventListener('click', this.openSettings.bind(this));
-	}
-
-	openFunctionalTab(tabProps) {
-		if (this.functionalTabs[tabProps.name]) {
-			this.activateTab(this.functionalTabs[tabProps.name]);
-			return;
-		}
-
-		this.functionalTabs[tabProps.name] = this.tabs.length;
-
-		this.tabs.push(new FunctionalTab({
-			materialIcon: tabProps.materialIcon,
-			$root: this.$tabsContainer,
-			onClick: this.activateTab.bind(this, this.functionalTabs[tabProps.name]),
-			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs[tabProps.name]),
-			webview: new WebView({
-				$root: this.$content,
-				index: this.functionalTabs[tabProps.name],
-				url: tabProps.url,
-				name: tabProps.name,
-				isActive: () => {
-					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
-				},
-				onTitleChange: this.updateBadge.bind(this),
-				nodeIntegration: true
-			})
-		}));
-
-		this.activateTab(this.functionalTabs[tabProps.name]);
-	}
-
-	openSettings() {
-		this.openFunctionalTab({
-			name: 'Settings',
-			materialIcon: 'settings',
-			url: `file://${__dirname}/preference.html`
-		});
-	}
-
-	openAbout() {
-		this.openFunctionalTab({
-			name: 'About',
-			materialIcon: 'sentiment_very_satisfied',
-			url: `file://${__dirname}/about.html`
-		});
-	}
-
-	activateTab(index, hideOldTab = true) {
-		if (this.tabs[index].loading) {
-			return;
-		}
-
-		if (this.activeTabIndex !== -1) {
-			if (this.activeTabIndex === index) {
-				return;
-			} else if (hideOldTab) {
-				this.tabs[this.activeTabIndex].deactivate();
-			}
-		}
-
-		this.activeTabIndex = index;
-		this.tabs[index].activate();
-	}
-
-	destroyTab(name, index) {
-		if (this.tabs[index].loading) {
-			return;
-		}
-
-		this.tabs[index].destroy();
-
-		delete this.tabs[index];
-		delete this.functionalTabs[name];
-
-		this.activateTab(0, false);
-	}
-
-	updateBadge() {
-		let messageCountAll = 0;
-		for (let i = 0; i < this.tabs.length; i++) {
-			if (this.tabs[i] && this.tabs[i].updateBadge) {
-				const count = this.tabs[i].webview.badgeCount;
-				messageCountAll += count;
-				this.tabs[i].updateBadge(count);
-			}
-		}
-
-		ipcRenderer.send('update-badge', messageCountAll);
-	}
-
-	registerIpcs() {
-		const webviewListeners = {
-			'webview-reload': 'reload',
-			back: 'back',
-			focus: 'focus',
-			forward: 'forward',
-			zoomIn: 'zoomIn',
-			zoomOut: 'zoomOut',
-			zoomActualSize: 'zoomActualSize',
-			'log-out': 'logOut',
-			shortcut: 'showShortcut',
-			'tab-devtools': 'openDevTools'
-		};
-
-		for (const key in webviewListeners) {
-			ipcRenderer.on(key, () => {
-				const activeWebview = this.tabs[this.activeTabIndex].webview;
-				if (activeWebview) {
-					activeWebview[webviewListeners[key]]();
-				}
-			});
-		}
-
-		ipcRenderer.on('open-settings', this.openSettings.bind(this));
-		ipcRenderer.on('open-about', this.openAbout.bind(this));
-	}
-}
-
-window.onload = () => {
-	const serverManagerView = new ServerManagerView();
-	serverManagerView.init();
-};

app/renderer/js/notification/index.ts

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

app/renderer/js/pages/about.ts

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

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

app/renderer/js/pages/preference.js

@@ -1,144 +0,0 @@
-'use strict';
-
-const {ipcRenderer} = require('electron');
-
-const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
-
-class PreferenceView {
-	constructor() {
-		this.$newServerButton = document.getElementById('new-server-action');
-		this.$saveServerButton = document.getElementById('save-server-action');
-		this.$reloadServerButton = document.getElementById('reload-server-action');
-		this.$serverInfoContainer = document.querySelector('.server-info-container');
-	}
-
-	init() {
-		this.initServers();
-		this.initActions();
-	}
-
-	initServers() {
-		const servers = DomainUtil.getDomains();
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
-
-		this.initNewServerForm();
-
-		for (const i in servers) {
-			this.initServer(servers[i], i);
-		}
-	}
-
-	initServer(server, index) {
-		const {
-			alias,
-			url,
-			icon
-		} = server;
-		const serverInfoTemplate = `
-				<div class="server-info">
-					<div class="server-info-left">
-						<img class="server-info-icon" src="${icon}"/>
-					</div>
-					<div class="server-info-right">
-						<div class="server-info-row">
-							<span class="server-info-key">Name</span>
-							<input class="server-info-value" disabled value="${alias}"/>
-						</div>
-						<div class="server-info-row">
-							<span class="server-info-key">Url</span>
-							<input class="server-info-value" disabled value="${url}"/>
-						</div>
-						<div class="server-info-row">
-							<span class="server-info-key">Icon</span>
-							<input class="server-info-value" disabled value="${icon}"/>
-						</div>
-						<div class="server-info-row">
-							<span class="server-info-key">Actions</span>
-							<div class="action server-info-value" id="delete-server-action-${index}">
-								<i class="material-icons">indeterminate_check_box</i>
-								<span>Delete</span>
-							</div>
-						</div>
-					</div>
-				</div>`;
-		this.$serverInfoContainer.appendChild(this.insertNode(serverInfoTemplate));
-		document.getElementById(`delete-server-action-${index}`).addEventListener('click', () => {
-			DomainUtil.removeDomain(index);
-			this.initServers();
-			// alert('Success. Reload to apply changes.');
-			ipcRenderer.send('reload-main');
-			this.$reloadServerButton.classList.remove('hidden');
-		});
-	}
-
-	initNewServerForm() {
-		const newServerFormTemplate = `
-				<div class="server-info active hidden">
-					<div class="server-info-left">
-						<img class="server-info-icon" src="https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png"/>
-					</div>
-					<div class="server-info-right">
-						<div class="server-info-row">
-							<span class="server-info-key">Name</span>
-							<input id="server-info-name" class="server-info-value" placeholder="(Required)"/>
-						</div>
-						<div class="server-info-row">
-							<span class="server-info-key">Url</span>
-							<input id="server-info-url" spellcheck="false" class="server-info-value" placeholder="(Required)"/>
-						</div>
-						<div class="server-info-row">
-							<span class="server-info-key">Icon</span>
-							<input id="server-info-icon" class="server-info-value" placeholder="(Optional)"/>
-						</div>
-					</div>
-				</div>
-		`;
-		this.$serverInfoContainer.appendChild(this.insertNode(newServerFormTemplate));
-
-		this.$newServerForm = document.querySelector('.server-info.active');
-		this.$newServerAlias = this.$newServerForm.querySelectorAll('input.server-info-value')[0];
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.server-info-value')[1];
-		this.$newServerIcon = this.$newServerForm.querySelectorAll('input.server-info-value')[2];
-	}
-
-	initActions() {
-		this.$newServerButton.addEventListener('click', () => {
-			this.$newServerForm.classList.remove('hidden');
-			this.$saveServerButton.classList.remove('hidden');
-			this.$newServerButton.classList.add('hidden');
-		});
-		this.$saveServerButton.addEventListener('click', () => {
-			DomainUtil.checkDomain(this.$newServerUrl.value).then(domain => {
-				const server = {
-					alias: this.$newServerAlias.value,
-					url: domain,
-					icon: this.$newServerIcon.value
-				};
-				DomainUtil.addDomain(server);
-				this.$saveServerButton.classList.add('hidden');
-				this.$newServerButton.classList.remove('hidden');
-				this.$newServerForm.classList.add('hidden');
-
-				this.initServers();
-				// alert('Success. Reload to apply changes.');
-				ipcRenderer.send('reload-main');
-				this.$reloadServerButton.classList.remove('hidden');
-			}, errorMessage => {
-				alert(errorMessage);
-			});
-		});
-		this.$reloadServerButton.addEventListener('click', () => {
-			ipcRenderer.send('reload-main');
-		});
-	}
-	insertNode(html) {
-		const wrapper = document.createElement('div');
-		wrapper.innerHTML = html;
-		return wrapper.firstElementChild;
-	}
-}
-
-window.onload = () => {
-	const preferenceView = new PreferenceView();
-	preferenceView.init();
-};

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

@@ -0,0 +1,83 @@
+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";
+
+type BaseSectionProperties = {
+  $element: HTMLElement;
+  disabled?: boolean;
+  value: boolean;
+  clickHandler: () => void;
+};
+
+export function generateSettingOption(properties: BaseSectionProperties): void {
+  const {$element, disabled, value, clickHandler} = properties;
+
+  $element.textContent = "";
+
+  const $optionControl = generateNodeFromHtml(
+    generateOptionHtml(value, disabled),
+  );
+  $element.append($optionControl);
+
+  if (!disabled) {
+    $optionControl.addEventListener("click", clickHandler);
+  }
+}
+
+export function generateOptionHtml(
+  settingOption: boolean,
+  disabled?: boolean,
+): Html {
+  const labelHtml = disabled
+    ? 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

@@ -0,0 +1,67 @@
+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 {reloadApp} from "./base-section.ts";
+import {initFindAccounts} from "./find-accounts.ts";
+import {initServerInfoForm} from "./server-info-form.ts";
+
+type ConnectedOrgSectionProperties = {
+  $root: Element;
+};
+
+export function initConnectedOrgSection({
+  $root,
+}: ConnectedOrgSectionProperties): void {
+  $root.textContent = "";
+
+  const servers = DomainUtil.getDomains();
+  $root.innerHTML = html`
+    <div class="settings-pane" id="server-settings-pane">
+      <div class="page-title">${t.__("Connected organizations")}</div>
+      <div class="title" id="existing-servers">
+        ${t.__("All the connected 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;
+
+  const $serverInfoContainer = $root.querySelector("#server-info-container")!;
+  const $existingServers = $root.querySelector("#existing-servers")!;
+  const $newOrgButton: HTMLButtonElement =
+    $root.querySelector("#new-org-button")!;
+  const $findAccountsContainer = $root.querySelector(
+    "#find-accounts-container",
+  )!;
+
+  const noServerText = t.__(
+    "All the connected organizations will appear here.",
+  );
+  // Show noServerText if no servers are there otherwise hide it
+  $existingServers.textContent = servers.length === 0 ? noServerText : "";
+
+  for (const [i, server] of servers.entries()) {
+    initServerInfoForm({
+      $root: $serverInfoContainer,
+      server,
+      index: i,
+      onChange: reloadApp,
+    });
+  }
+
+  $newOrgButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-org-tab");
+  });
+
+  initFindAccounts({
+    $root: $findAccountsContainer,
+  });
+}

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

@@ -0,0 +1,66 @@
+import {html} from "../../../../common/html.ts";
+import * as LinkUtil from "../../../../common/link-util.ts";
+import * as t from "../../../../common/translation-util.ts";
+import {generateNodeFromHtml} from "../../components/base.ts";
+
+type FindAccountsProperties = {
+  $root: Element;
+};
+
+async function findAccounts(url: string): Promise<void> {
+  if (!url) {
+    return;
+  }
+
+  if (!url.startsWith("http")) {
+    url = "https://" + url;
+  }
+
+  await LinkUtil.openBrowser(new URL("/accounts/find", url));
+}
+
+export function initFindAccounts(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/general-section.ts

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

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

@@ -0,0 +1,74 @@
+import {type Html, 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";
+
+type PreferenceNavigationProperties = {
+  $root: Element;
+  onItemSelected: (navigationItem: NavigationItem) => void;
+};
+
+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")},
+    ];
+
+    this.$el = generateNodeFromHtml(this.templateHtml());
+    this.properties.$root.append(this.$el);
+    this.registerListeners();
+  }
+
+  templateHtml(): Html {
+    const navigationItemsHtml = html``.join(
+      this.navigationItems.map(
+        ({navigationItem, label}) =>
+          html`<div class="nav" id="nav-${navigationItem}">${label}</div>`,
+      ),
+    );
+
+    return html`
+      <div>
+        <div id="settings-header">${t.__("Settings")}</div>
+        <div id="nav-container">${navigationItemsHtml}</div>
+      </div>
+    `;
+  }
+
+  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(navigationItemToSelect: NavigationItem): void {
+    for (const {navigationItem} of this.navigationItems) {
+      if (navigationItem === navigationItemToSelect) {
+        this.activate(navigationItem);
+      } else {
+        this.deactivate(navigationItem);
+      }
+    }
+  }
+
+  activate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
+    $item.classList.add("active");
+  }
+
+  deactivate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
+    $item.classList.remove("active");
+  }
+}

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

@@ -0,0 +1,136 @@
+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 {generateSettingOption} from "./base-section.ts";
+
+type NetworkSectionProperties = {
+  $root: Element;
+};
+
+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;
+
+  const $proxyPac: HTMLInputElement = $root.querySelector(
+    "#proxy-pac-option .setting-input-value",
+  )!;
+  const $proxyRules: HTMLInputElement = $root.querySelector(
+    "#proxy-rules-option .setting-input-value",
+  )!;
+  const $proxyBypass: HTMLInputElement = $root.querySelector(
+    "#proxy-bypass-option .setting-input-value",
+  )!;
+  const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
+  const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
+
+  toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
+  updateProxyOption();
+
+  $proxyPac.value = ConfigUtil.getConfigItem("proxyPAC", "");
+  $proxyRules.value = ConfigUtil.getConfigItem("proxyRules", "");
+  $proxyBypass.value = ConfigUtil.getConfigItem("proxyBypass", "");
+
+  $proxySaveAction.addEventListener("click", () => {
+    ConfigUtil.setConfigItem("proxyPAC", $proxyPac.value);
+    ConfigUtil.setConfigItem("proxyRules", $proxyRules.value);
+    ConfigUtil.setConfigItem("proxyBypass", $proxyBypass.value);
+
+    ipcRenderer.send("forward-message", "reload-proxy", true);
+  });
+
+  function toggleManualProxySettings(option: boolean): void {
+    $manualProxyBlock.classList.toggle("hidden", !option);
+  }
+
+  function updateProxyOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#use-system-settings .setting-control")!,
+      value: ConfigUtil.getConfigItem("useSystemProxy", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
+        const manualProxyValue = ConfigUtil.getConfigItem(
+          "useManualProxy",
+          false,
+        );
+        if (manualProxyValue && newValue) {
+          ConfigUtil.setConfigItem("useManualProxy", !manualProxyValue);
+          toggleManualProxySettings(!manualProxyValue);
+        }
+
+        if (!newValue) {
+          // Remove proxy system proxy settings
+          ConfigUtil.setConfigItem("proxyRules", "");
+          ipcRenderer.send("forward-message", "reload-proxy", false);
+        }
+
+        ConfigUtil.setConfigItem("useSystemProxy", newValue);
+        updateProxyOption();
+      },
+    });
+    generateSettingOption({
+      $element: $root.querySelector("#use-manual-settings .setting-control")!,
+      value: ConfigUtil.getConfigItem("useManualProxy", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);
+        const systemProxyValue = ConfigUtil.getConfigItem(
+          "useSystemProxy",
+          false,
+        );
+        toggleManualProxySettings(newValue);
+        if (systemProxyValue && newValue) {
+          ConfigUtil.setConfigItem("useSystemProxy", !systemProxyValue);
+        }
+
+        ConfigUtil.setConfigItem("proxyRules", "");
+        ConfigUtil.setConfigItem("useManualProxy", newValue);
+        // Reload app only when turning manual proxy off, hence !newValue
+        ipcRenderer.send("forward-message", "reload-proxy", !newValue);
+        updateProxyOption();
+      },
+    });
+  }
+}

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

@@ -0,0 +1,108 @@
+import {dialog} from "@electron/remote";
+
+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";
+
+type NewServerFormProperties = {
+  $root: Element;
+  onChange: () => void;
+};
+
+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",
+  )!;
+
+  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;
+    }
+
+    await DomainUtil.addDomain(serverConfig);
+    onChange();
+  }
+
+  $saveServerButton.addEventListener("click", async () => {
+    await submitFormHandler();
+  });
+  $newServerUrl.addEventListener("keypress", async (event) => {
+    if (event.key === "Enter") {
+      await submitFormHandler();
+    }
+  });
+
+  // Open create new org link in default browser
+  const link = "https://zulip.com/new/";
+  const externalCreateNewOrgElement = $root.querySelector(
+    "#open-create-org-link",
+  )!;
+  externalCreateNewOrgElement.addEventListener("click", async () => {
+    await LinkUtil.openBrowser(new URL(link));
+  });
+
+  const networkSettingsId = $root.querySelector(".server-network-option")!;
+  networkSettingsId.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "open-network-settings");
+  });
+}

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

@@ -0,0 +1,144 @@
+import type {IpcRendererEvent} from "electron/renderer";
+import process from "node:process";
+
+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 {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";
+
+export class PreferenceView {
+  static async create(): Promise<PreferenceView> {
+    return new PreferenceView(
+      await (
+        await fetch(new URL("app/renderer/preference.html", bundleUrl))
+      ).text(),
+    );
+  }
+
+  readonly $view: HTMLElement;
+  private readonly $shadow: ShadowRoot;
+  private readonly $settingsContainer: Element;
+  private readonly nav: Nav;
+  private navigationItem: NavigationItem = "General";
+
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    this.$shadow = this.$view.attachShadow({mode: "open"});
+    this.$shadow.innerHTML = templateHtml;
+
+    const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
+    this.$settingsContainer = this.$shadow.querySelector(
+      "#settings-container",
+    )!;
+
+    this.nav = new Nav({
+      $root: $sidebarContainer,
+      onItemSelected: this.handleNavigation,
+    });
+
+    ipcRenderer.on("toggle-sidebar", this.handleToggleSidebar);
+    ipcRenderer.on("toggle-autohide-menubar", this.handleToggleMenubar);
+    ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
+
+    this.handleNavigation(this.navigationItem);
+  }
+
+  handleNavigation = (navigationItem: NavigationItem): void => {
+    this.navigationItem = navigationItem;
+    this.nav.select(navigationItem);
+    switch (navigationItem) {
+      case "AddServer": {
+        initServersSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "General": {
+        initGeneralSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Organizations": {
+        initConnectedOrgSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Network": {
+        initNetworkSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+
+      case "Shortcuts": {
+        initShortcutsSection({
+          $root: this.$settingsContainer,
+        });
+        break;
+      }
+    }
+
+    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,
+      );
+    }
+  };
+}

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

@@ -0,0 +1,83 @@
+import {dialog} from "@electron/remote";
+
+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";
+
+type ServerInfoFormProperties = {
+  $root: Element;
+  server: ServerConfig;
+  index: number;
+  onChange: () => void;
+};
+
+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);
+
+  $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);
+      }
+    }
+  });
+
+  $openServerButton.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
+
+  $serverInfoAlias.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
+
+  $serverIcon.addEventListener("click", () => {
+    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+  });
+}

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

@@ -0,0 +1,28 @@
+import {html} from "../../../../common/html.ts";
+import * as t from "../../../../common/translation-util.ts";
+
+import {reloadApp} from "./base-section.ts";
+import {initNewServerForm} from "./new-server-form.ts";
+
+type ServersSectionProperties = {
+  $root: Element;
+};
+
+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")!;
+
+  initNewServerForm({
+    $root: $newServerContainer,
+    onChange: reloadApp,
+  });
+}

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

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

app/renderer/js/preload.js

@@ -1,33 +0,0 @@
-'use strict';
-const {spellChecker} = require('./spellchecker');
-
-const logout = () => {
-	// Create the menu for the below
-	document.querySelector('.dropdown-toggle').click();
-
-	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
-	nodes[nodes.length - 1].click();
-};
-
-const shortcut = () => {
-	// Create the menu for the below
-	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
-	// Additional check
-	if (node.text.trim().toLowerCase() === 'keyboard shortcuts') {
-		node.click();
-	} else {
-		// Atleast click the dropdown
-		document.querySelector('.dropdown-toggle').click();
-	}
-};
-
-process.once('loaded', () => {
-	global.logout = logout;
-	global.shortcut = shortcut;
-});
-
-// To prevent failing this script on linux we need to load it after the document loaded
-document.addEventListener('DOMContentLoaded', () => {
-	// Init spellchecker
-	spellChecker();
-});

app/renderer/js/preload.ts

@@ -0,0 +1,29 @@
+import {contextBridge} from "electron/renderer";
+
+import electron_bridge, {bridgeEvents} from "./electron-bridge.ts";
+import * as NetworkError from "./pages/network.ts";
+import {ipcRenderer} from "./typed-ipc-renderer.ts";
+
+contextBridge.exposeInMainWorld("electron_bridge", electron_bridge);
+
+ipcRenderer.on("logout", () => {
+  bridgeEvents.emit("logout");
+});
+
+ipcRenderer.on("show-keyboard-shortcuts", () => {
+  bridgeEvents.emit("show-keyboard-shortcuts");
+});
+
+ipcRenderer.on("show-notification-settings", () => {
+  bridgeEvents.emit("show-notification-settings");
+});
+
+window.addEventListener("load", () => {
+  if (!location.href.includes("app/renderer/network.html")) {
+    return;
+  }
+
+  const $reconnectButton = document.querySelector("#reconnect")!;
+  const $settingsButton = document.querySelector("#settings")!;
+  NetworkError.init($reconnectButton, $settingsButton);
+});

app/renderer/js/spellchecker.js

@@ -1,27 +0,0 @@
-const {SpellCheckHandler, ContextMenuListener, ContextMenuBuilder} = require('electron-spellchecker');
-
-function spellChecker() {
-	// Implement spellcheck using electron api
-	window.spellCheckHandler = new SpellCheckHandler();
-	window.spellCheckHandler.attachToInput();
-
-	// Start off as US English
-	window.spellCheckHandler.switchLanguage('en-US');
-
-	const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
-	const contextMenuListener = new ContextMenuListener(info => {
-		contextMenuBuilder.showPopupMenu(info);
-	});
-
-	// Clean up events after you navigate away from this page;
-	// otherwise, you may experience errors
-	window.addEventListener('beforeunload', () => {
-	// eslint-disable-next-line no-undef
-		spellCheckHandler.unsubscribe();
-		contextMenuListener.unsubscribe();
-	});
-}
-
-module.exports = {
-	spellChecker
-};

app/renderer/js/tray.js

@@ -1,197 +0,0 @@
-'use strict';
-const path = require('path');
-
-const electron = require('electron');
-
-const {ipcRenderer, remote} = electron;
-
-const {Tray, Menu, nativeImage, BrowserWindow} = remote;
-
-const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');
-
-const iconPath = () => {
-	if (process.platform === 'linux') {
-		return APP_ICON + 'linux.png';
-	}
-	return APP_ICON + (process.platform === 'win32' ? 'win.ico' : 'osx.png');
-};
-
-let unread = 0;
-
-const trayIconSize = () => {
-	switch (process.platform) {
-		case 'darwin':
-			return 20;
-		case 'win32':
-			return 100;
-		case 'linux':
-			return 100;
-		default: return 80;
-	}
-};
-
-//  Default config for Icon we might make it OS specific if needed like the size
-const config = {
-	pixelRatio: window.devicePixelRatio,
-	unreadCount: 0,
-	showUnreadCount: true,
-	unreadColor: '#000000',
-	readColor: '#000000',
-	unreadBackgroundColor: '#B9FEEA',
-	readBackgroundColor: '#B9FEEA',
-	size: trayIconSize(),
-	thick: process.platform === 'win32'
-};
-
-const renderCanvas = function (arg) {
-	config.unreadCount = arg;
-	return new Promise((resolve, reject) => {
-		const SIZE = config.size * config.pixelRatio;
-		const PADDING = SIZE * 0.05;
-		const CENTER = SIZE / 2;
-		const HAS_COUNT = config.showUnreadCount && config.unreadCount;
-		const color = config.unreadCount ? config.unreadColor : config.readColor;
-		const backgroundColor = config.unreadCount ? config.unreadBackgroundColor : config.readBackgroundColor;
-
-		const canvas = document.createElement('canvas');
-		canvas.width = SIZE;
-		canvas.height = SIZE;
-		const ctx = canvas.getContext('2d');
-
-		// Circle
-		// If (!config.thick || config.thick && HAS_COUNT) {
-		ctx.beginPath();
-		ctx.arc(CENTER, CENTER, (SIZE / 2) - PADDING, 0, 2 * Math.PI, false);
-		ctx.fillStyle = backgroundColor;
-		ctx.fill();
-		ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
-		ctx.strokeStyle = backgroundColor;
-		ctx.stroke();
-		// Count or Icon
-		if (HAS_COUNT) {
-			ctx.fillStyle = color;
-			ctx.textAlign = 'center';
-			if (config.unreadCount > 99) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.4}px Helvetica`;
-				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
-			} else if (config.unreadCount < 10) {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
-			} else {
-				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
-			}
-
-			resolve(canvas);
-		} else {
-			reject(canvas);
-		}
-	});
-};
-/**
- * Renders the tray icon as a native image
- * @param arg: Unread count
- * @return the native image
- */
-const renderNativeImage = function (arg) {
-	return Promise.resolve()
-		.then(() => renderCanvas(arg))
-		.then(canvas => {
-			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPng();
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
-		});
-};
-
-function sendAction(action) {
-	const win = BrowserWindow.getAllWindows()[0];
-
-	if (process.platform === 'darwin') {
-		win.restore();
-	}
-
-	win.webContents.send(action);
-}
-
-const createTray = function () {
-	window.tray = new Tray(iconPath());
-	const contextMenu = Menu.buildFromTemplate([{
-		label: 'About',
-		click() {
-			sendAction('open-about');
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Focus',
-		click() {
-			ipcRenderer.send('focus-app');
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Manage Zulip servers',
-		click() {
-			sendAction('open-settings');
-		}
-	},
-	{
-		type: 'separator'
-	},
-	{
-		label: 'Quit',
-		click() {
-			ipcRenderer.send('quit-app');
-		}
-	}
-	]);
-	window.tray.setContextMenu(contextMenu);
-};
-
-ipcRenderer.on('destroytray', event => {
-	window.tray.destroy();
-	if (window.tray.isDestroyed()) {
-		window.tray = null;
-	} else {
-		throw new Error('Tray icon not properly destroyed.');
-	}
-
-	return event;
-});
-
-ipcRenderer.on('tray', (event, arg) => {
-	if (arg === 0) {
-		unread = arg;
-		// Message Count // console.log("message count is zero.");
-		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');
-		});
-	}
-});
-
-ipcRenderer.on('toggletray', event => {
-	if (event) {
-		if (window.tray) {
-			window.tray.destroy();
-			if (window.tray.isDestroyed()) {
-				window.tray = null;
-			}
-		} else {
-			createTray();
-			renderNativeImage(unread).then(image => {
-				window.tray.setImage(image);
-				window.tray.setToolTip(unread + ' unread messages');
-			});
-		}
-	}
-});
-
-createTray();

app/renderer/js/tray.ts

@@ -0,0 +1,251 @@
+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 {BrowserWindow, Menu, Tray} from "@electron/remote";
+
+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";
+
+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 appIcon + "linux.png";
+  }
+
+  return (
+    appIcon + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
+  );
+};
+
+const winUnreadTrayIconPath = (): string => appIcon + "unread.ico";
+
+let unread = 0;
+
+const trayIconSize = (): number => {
+  switch (process.platform) {
+    case "darwin": {
+      return 20;
+    }
+
+    case "win32": {
+      return 100;
+    }
+
+    case "linux": {
+      return 100;
+    }
+
+    default: {
+      return 80;
+    }
+  }
+};
+
+//  Default config for Icon we might make it OS specific if needed like the size
+const config = {
+  pixelRatio: window.devicePixelRatio,
+  unreadCount: 0,
+  showUnreadCount: true,
+  unreadColor: "#000000",
+  readColor: "#000000",
+  unreadBackgroundColor: "#B9FEEA",
+  readBackgroundColor: "#B9FEEA",
+  size: trayIconSize(),
+  thick: process.platform === "win32",
+};
+
+const renderCanvas = function (argument: number): HTMLCanvasElement {
+  config.unreadCount = argument;
+
+  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 context = canvas.getContext("2d")!;
+
+  // 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,
+      );
+    }
+  }
+
+  return canvas;
+};
+
+/**
+ * Renders the tray icon as a native image
+ * @param arg: Unread count
+ * @return the native image
+ */
+const renderNativeImage = function (argument: number): NativeImage {
+  if (process.platform === "win32") {
+    return nativeImage.createFromPath(winUnreadTrayIconPath());
+  }
+
+  const canvas = renderCanvas(argument);
+  const pngData = nativeImage
+    .createFromDataURL(canvas.toDataURL("image/png"))
+    .toPNG();
+  return nativeImage.createFromBuffer(pngData, {
+    scaleFactor: config.pixelRatio,
+  });
+};
+
+function sendAction<Channel extends keyof RendererMessage>(
+  channel: Channel,
+  ...arguments_: Parameters<RendererMessage[Channel]>
+): void {
+  const win = BrowserWindow.getAllWindows()[0];
+
+  if (process.platform === "darwin") {
+    win.restore();
+  }
+
+  ipcRenderer.send("forward-to", win.webContents.id, channel, ...arguments_);
+}
+
+const createTray = function (): void {
+  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");
+    });
+  }
+};
+
+export function initializeTray(serverManagerView: ServerManagerView) {
+  ipcRenderer.on("destroytray", () => {
+    if (!tray) {
+      return;
+    }
+
+    tray.destroy();
+    if (tray.isDestroyed()) {
+      tray = null;
+    } else {
+      throw new Error("Tray icon not properly destroyed.");
+    }
+  });
+
+  ipcRenderer.on("tray", (_event, argument: number): void => {
+    if (!tray) {
+      return;
+    }
+
+    // We don't want to create tray from unread messages on macOS since it already has dock badges.
+    if (process.platform === "linux" || process.platform === "win32") {
+      if (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 (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/domain-util.js

@@ -1,82 +0,0 @@
-'use strict';
-
-const {app} = require('electron').remote;
-const JsonDB = require('node-json-db');
-const request = require('request');
-
-let instance = null;
-
-const defaultIconUrl = __dirname + '../../../img/icon.png';
-class DomainUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.db = new JsonDB(app.getPath('userData') + '/domain.json', true, true);
-		// Migrate from old schema
-		if (this.db.getData('/').domain) {
-			this.addDomain({
-				alias: 'Zulip',
-				url: this.db.getData('/domain')
-			});
-			this.db.delete('/domain');
-		}
-
-		return instance;
-	}
-
-	getDomains() {
-		if (this.db.getData('/').domains === undefined) {
-			return [];
-		} else {
-			return this.db.getData('/domains');
-		}
-	}
-
-	getDomain(index) {
-		return this.db.getData(`/domains[${index}]`);
-	}
-
-	addDomain(server) {
-		server.icon = server.icon || defaultIconUrl;
-		this.db.push('/domains[]', server, true);
-	}
-
-	removeDomains() {
-		this.db.delete('/domains');
-	}
-
-	removeDomain(index) {
-		this.db.delete(`/domains[${index}]`);
-	}
-
-	checkDomain(domain) {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (!hasPrefix) {
-			domain = (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
-		}
-
-		const checkDomain = domain + '/static/audio/zulip.ogg';
-
-		return new Promise((resolve, reject) => {
-			request(checkDomain, (error, response) => {
-				if (!error && response.statusCode !== 404) {
-					resolve(domain);
-				} else if (error.toString().indexOf('Error: self signed certificate') >= 0) {
-					if (window.confirm(`Do you trust certificate from ${domain}?`)) {
-						resolve(domain);
-					} else {
-						reject('Untrusted Certificate.');
-					}
-				} else {
-					reject('Not a valid Zulip server');
-				}
-			});
-		});
-	}
-}
-
-module.exports = new DomainUtil();

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

@@ -0,0 +1,236 @@
+import fs from "node:fs";
+import path from "node:path";
+
+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 * 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",
+});
+
+// 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 serverConfigSchema = z.object({
+  url: z.url(),
+  alias: z.string(),
+  icon: z.string(),
+  zulipVersion: z.string().default("unknown"),
+  zulipFeatureLevel: z.number().default(0),
+});
+
+let database!: JsonDB;
+
+reloadDatabase();
+
+// 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 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;
+  }
+}