release: New release v5.12.0.

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,18 +1,49 @@
----
+<!-- Describe your pull request here.-->
 
-<!--
+Fixes: <!-- Issue link, or clear description.-->
-Remove the fields that are not appropriate
+
-Please include:
+<!-- If the PR makes UI changes, always include one or more still screenshots to demonstrate your changes. If it seems helpful, add a screen capture of the new functionality as well.
+
+Tooling tips: https://zulip.readthedocs.io/en/latest/tutorials/screenshot-and-gif-software.html
 -->
 
-**What's this PR do?**
+**Screenshots and screen captures:**
 
-**Any background context you want to provide?**
+**Platforms this PR was tested on:**
-
-**Screenshots?**
-
-**You have tested this PR on:**
 
 - [ ] Windows
-- [ ] Linux/Ubuntu
 - [ ] 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

@@ -10,6 +10,6 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - run: npm ci
       - run: npm test

.gitignore

@@ -8,7 +8,8 @@
 .transifexrc
 
 # Compiled binary build directory
-dist/
+/dist/
+/dist-electron/
 
 #snap generated files
 snap/parts
@@ -39,6 +40,3 @@ config.gypi
 # tests/package.json
 
 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js

.prettierignore

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

.prettierignore.non-js

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

.stylelintrc

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

.tx/config

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

CONTRIBUTING.md

@@ -10,7 +10,7 @@ Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If yo
 
 ## Community
 
-- The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).
+- The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip web app project, and testing, can be read [here](https://zulip.readthedocs.io).
 
 - If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
 

README.md

@@ -1,6 +1,6 @@
 # Zulip Desktop Client
 
-[![Build Status](https://travis-ci.com/zulip/zulip-desktop.svg?branch=main)](https://travis-ci.com/github/zulip/zulip-desktop)
+[![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)
@@ -24,9 +24,9 @@ Please see the [installation guide](https://zulip.com/help/desktop-app-install-g
 
 # Reporting issues
 
-This desktop client shares most of its code with the Zulip webapp.
+This desktop client shares most of its code with the Zulip web app.
 Issues in an individual organization's Zulip window should be reported
-in the [Zulip server and webapp
+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).

app/common/config-schemata.ts

@@ -1,4 +1,4 @@
-import * as z from "zod";
+import {z} from "zod";
 
 export const dndSettingsSchemata = {
   showNotification: z.boolean(),
@@ -13,6 +13,7 @@ export const configSchemata = {
   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(),
@@ -23,6 +24,7 @@ export const configSchemata = {
   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(),
@@ -30,7 +32,6 @@ export const configSchemata = {
   spellcheckerLanguages: z.string().array().nullable(),
   startAtLogin: z.boolean(),
   startMinimized: z.boolean(),
-  systemProxyRules: z.string(),
   trayIcon: z.boolean(),
   useManualProxy: z.boolean(),
   useProxy: z.boolean(),

app/common/config-util.ts

@@ -1,43 +1,41 @@
-import electron from "electron";
+import fs from "node:fs";
-import fs from "fs";
+import path from "node:path";
-import path from "path";
 
+import * as Sentry from "@sentry/core";
 import {JsonDB} from "node-json-db";
 import {DataError} from "node-json-db/dist/lib/Errors";
-import type * as z from "zod";
+import type {z} from "zod";
+import {app, dialog} from "zulip:remote";
 
-import {configSchemata} from "./config-schemata";
+import {configSchemata} from "./config-schemata.js";
-import * as EnterpriseUtil from "./enterprise-util";
+import * as EnterpriseUtil from "./enterprise-util.js";
-import Logger from "./logger-util";
+import Logger from "./logger-util.js";
 
 export type Config = {
-  [Key in keyof typeof configSchemata]: z.output<typeof configSchemata[Key]>;
+  [Key in keyof typeof configSchemata]: z.output<(typeof configSchemata)[Key]>;
 };
 
-/* To make the util runnable in both main and renderer process */
-const {app, dialog} = process.type === "renderer" ? electron.remote : electron;
-
 const logger = new Logger({
   file: "config-util.log",
 });
 
-let db: JsonDB;
+let database: JsonDB;
 
-reloadDB();
+reloadDatabase();
 
 export function getConfigItem<Key extends keyof Config>(
   key: Key,
   defaultValue: Config[Key],
-): z.output<typeof configSchemata[Key]> {
+): z.output<(typeof configSchemata)[Key]> {
   try {
-    db.reload();
+    database.reload();
   } catch (error: unknown) {
     logger.error("Error while reloading settings.json: ");
     logger.error(error);
   }
 
   try {
-    return configSchemata[key].parse(db.getObject<unknown>(`/${key}`));
+    return configSchemata[key].parse(database.getObject<unknown>(`/${key}`));
   } catch (error: unknown) {
     if (!(error instanceof DataError)) throw error;
     setConfigItem(key, defaultValue);
@@ -48,13 +46,13 @@ export function getConfigItem<Key extends keyof Config>(
 // This function returns whether a key exists in the configuration file (settings.json)
 export function isConfigItemExists(key: string): boolean {
   try {
-    db.reload();
+    database.reload();
   } catch (error: unknown) {
     logger.error("Error while reloading settings.json: ");
     logger.error(error);
   }
 
-  return db.exists(`/${key}`);
+  return database.exists(`/${key}`);
 }
 
 export function setConfigItem<Key extends keyof Config>(
@@ -68,16 +66,16 @@ export function setConfigItem<Key extends keyof Config>(
   }
 
   configSchemata[key].parse(value);
-  db.push(`/${key}`, value, true);
+  database.push(`/${key}`, value, true);
-  db.save();
+  database.save();
 }
 
 export function removeConfigItem(key: string): void {
-  db.delete(`/${key}`);
+  database.delete(`/${key}`);
-  db.save();
+  database.save();
 }
 
-function reloadDB(): void {
+function reloadDatabase(): void {
   const settingsJsonPath = path.join(
     app.getPath("userData"),
     "/config/settings.json",
@@ -94,9 +92,9 @@ function reloadDB(): void {
       );
       logger.error("Error while JSON parsing settings.json: ");
       logger.error(error);
-      logger.reportSentry(error);
+      Sentry.captureException(error);
     }
   }
 
-  db = new JsonDB(settingsJsonPath, true, true);
+  database = new JsonDB(settingsJsonPath, true, true);
 }

app/common/default-util.ts

@@ -1,34 +1,33 @@
-import electron from "electron";
+import fs from "node:fs";
-import fs from "fs";
 
-const {app} = process.type === "renderer" ? electron.remote : electron;
+import {app} from "zulip:remote";
 
 let setupCompleted = false;
 
-const zulipDir = app.getPath("userData");
+const zulipDirectory = app.getPath("userData");
-const logDir = `${zulipDir}/Logs/`;
+const logDirectory = `${zulipDirectory}/Logs/`;
-const configDir = `${zulipDir}/config/`;
+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(zulipDir)) {
+    if (!fs.existsSync(zulipDirectory)) {
-      fs.mkdirSync(zulipDir);
+      fs.mkdirSync(zulipDirectory);
     }
 
-    if (!fs.existsSync(logDir)) {
+    if (!fs.existsSync(logDirectory)) {
-      fs.mkdirSync(logDir);
+      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(configDir)) {
+    if (!fs.existsSync(configDirectory)) {
-      fs.mkdirSync(configDir);
+      fs.mkdirSync(configDirectory);
-      const domainJson = `${zulipDir}/domain.json`;
+      const domainJson = `${zulipDirectory}/domain.json`;
-      const settingsJson = `${zulipDir}/settings.json`;
+      const settingsJson = `${zulipDirectory}/settings.json`;
-      const updatesJson = `${zulipDir}/updates.json`;
+      const updatesJson = `${zulipDirectory}/updates.json`;
-      const windowStateJson = `${zulipDir}/window-state.json`;
+      const windowStateJson = `${zulipDirectory}/window-state.json`;
       const configData = [
         {
           path: domainJson,
@@ -45,7 +44,7 @@ export const initSetUp = (): void => {
       ];
       for (const data of configData) {
         if (fs.existsSync(data.path)) {
-          fs.copyFileSync(data.path, configDir + data.fileName);
+          fs.copyFileSync(data.path, configDirectory + data.fileName);
           fs.unlinkSync(data.path);
         }
       }

app/common/dnd-util.ts

@@ -1,20 +1,22 @@
-import type * as z from "zod";
+import process from "node:process";
 
-import type {dndSettingsSchemata} from "./config-schemata";
+import type {z} from "zod";
-import * as ConfigUtil from "./config-util";
 
-export type DNDSettings = {
+import type {dndSettingsSchemata} from "./config-schemata.js";
+import * as ConfigUtil from "./config-util.js";
+
+export type DndSettings = {
   [Key in keyof typeof dndSettingsSchemata]: z.output<
-    typeof dndSettingsSchemata[Key]
+    (typeof dndSettingsSchemata)[Key]
   >;
 };
 
-type SettingName = keyof DNDSettings;
+type SettingName = keyof DndSettings;
 
-interface Toggle {
+type Toggle = {
   dnd: boolean;
-  newSettings: Partial<DNDSettings>;
+  newSettings: Partial<DndSettings>;
-}
+};
 
 export function toggle(): Toggle {
   const dnd = !ConfigUtil.getConfigItem("dnd", false);
@@ -23,9 +25,9 @@ export function toggle(): Toggle {
     dndSettingList.push("flashTaskbarOnMessage");
   }
 
-  let newSettings: Partial<DNDSettings>;
+  let newSettings: Partial<DndSettings>;
   if (dnd) {
-    const oldSettings: Partial<DNDSettings> = {};
+    const oldSettings: Partial<DndSettings> = {};
     newSettings = {};
 
     // Iterate through the dndSettingList.

app/common/enterprise-util.ts

@@ -1,14 +1,15 @@
-import fs from "fs";
+import fs from "node:fs";
-import path from "path";
+import path from "node:path";
+import process from "node:process";
 
-import * as z from "zod";
+import {z} from "zod";
 
-import {enterpriseConfigSchemata} from "./config-schemata";
+import {enterpriseConfigSchemata} from "./config-schemata.js";
-import Logger from "./logger-util";
+import Logger from "./logger-util.js";
 
 type EnterpriseConfig = {
   [Key in keyof typeof enterpriseConfigSchemata]: z.output<
-    typeof enterpriseConfigSchemata[Key]
+    (typeof enterpriseConfigSchemata)[Key]
   >;
 };
 
@@ -19,9 +20,9 @@ const logger = new Logger({
 let enterpriseSettings: Partial<EnterpriseConfig>;
 let configFile: boolean;
 
-reloadDB();
+reloadDatabase();
 
-function reloadDB(): void {
+function reloadDatabase(): void {
   let enterpriseFile = "/etc/zulip-desktop-config/global_config.json";
   if (process.platform === "win32") {
     enterpriseFile =
@@ -55,7 +56,7 @@ export function getConfigItem<Key extends keyof EnterpriseConfig>(
   key: Key,
   defaultValue: EnterpriseConfig[Key],
 ): EnterpriseConfig[Key] {
-  reloadDB();
+  reloadDatabase();
   if (!configFile) {
     return defaultValue;
   }
@@ -65,7 +66,7 @@ export function getConfigItem<Key extends keyof EnterpriseConfig>(
 }
 
 export function configItemExists(key: keyof EnterpriseConfig): boolean {
-  reloadDB();
+  reloadDatabase();
   if (!configFile) {
     return false;
   }

app/common/html.ts

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

app/common/link-util.ts

@@ -1,13 +1,9 @@
-import {shell} from "electron";
+import {shell} from "electron/common";
-import fs from "fs";
+import fs from "node:fs";
-import os from "os";
+import os from "node:os";
-import path from "path";
+import path from "node:path";
 
-import {html} from "../../../common/html";
+import {html} from "./html.js";
-
-export function isUploadsUrl(server: string, url: URL): boolean {
-  return url.origin === server && url.pathname.startsWith("/user_uploads/");
-}
 
 export async function openBrowser(url: URL): Promise<void> {
   if (["http:", "https:", "mailto:"].includes(url.protocol)) {
@@ -15,11 +11,12 @@ export async function openBrowser(url: URL): Promise<void> {
   } else {
     // For security, indirect links to non-whitelisted protocols
     // through a real web browser via a local HTML file.
-    const dir = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
+    const directory = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
-    const file = path.join(dir, "redirect.html");
+    const file = path.join(directory, "redirect.html");
     fs.writeFileSync(
       file,
-      html`<!DOCTYPE html>
+      html`
+        <!doctype html>
         <html>
           <head>
             <meta charset="UTF-8" />
@@ -34,12 +31,13 @@ export async function openBrowser(url: URL): Promise<void> {
           <body>
             <p>Opening <a href="${url.href}">${url.href}</a>…</p>
           </body>
-        </html> `.html,
+        </html>
+      `.html,
     );
     await shell.openPath(file);
     setTimeout(() => {
       fs.unlinkSync(file);
-      fs.rmdirSync(dir);
+      fs.rmdirSync(directory);
     }, 15_000);
   }
 }

app/common/logger-util.ts

@@ -1,38 +1,19 @@
-import {Console} from "console"; // eslint-disable-line node/prefer-global/console
+import {Console} from "node:console"; // eslint-disable-line n/prefer-global/console
-import electron from "electron";
+import fs from "node:fs";
-import fs from "fs";
+import os from "node:os";
-import os from "os";
+import process from "node:process";
 
-import {initSetUp} from "./default-util";
+import {app} from "zulip:remote";
-import {captureException, sentryInit} from "./sentry-util";
 
-const {app} = process.type === "renderer" ? electron.remote : electron;
+import {initSetUp} from "./default-util.js";
 
-interface LoggerOptions {
+type LoggerOptions = {
   file?: string;
-}
+};
 
 initSetUp();
 
-let reportErrors = true;
+const logDirectory = `${app.getPath("userData")}/Logs`;
-if (process.type === "renderer") {
-  // Report Errors to Sentry only if it is enabled in settings
-  // Gets the value of reportErrors from config-util for renderer process
-  // For main process, sentryInit() is handled in index.js
-  const {ipcRenderer} = electron;
-  ipcRenderer.send("error-reporting");
-  ipcRenderer.on(
-    "error-reporting-val",
-    (_event: Event, errorReporting: boolean) => {
-      reportErrors = errorReporting;
-      if (reportErrors) {
-        sentryInit();
-      }
-    },
-  );
-}
-
-const logDir = `${app.getPath("userData")}/Logs`;
 
 type Level = "log" | "debug" | "info" | "warn" | "error";
 
@@ -42,7 +23,7 @@ export default class Logger {
   constructor(options: LoggerOptions = {}) {
     let {file = "console.log"} = options;
 
-    file = `${logDir}/${file}`;
+    file = `${logDirectory}/${file}`;
 
     // Trim log according to type of process
     if (process.type === "renderer") {
@@ -57,31 +38,31 @@ export default class Logger {
     this.nodeConsole = nodeConsole;
   }
 
-  _log(type: Level, ...args: unknown[]): void {
+  _log(type: Level, ...arguments_: unknown[]): void {
-    args.unshift(this.getTimestamp() + " |\t");
+    arguments_.unshift(this.getTimestamp() + " |\t");
-    args.unshift(type.toUpperCase() + " |");
+    arguments_.unshift(type.toUpperCase() + " |");
-    this.nodeConsole[type](...args);
+    this.nodeConsole[type](...arguments_);
-    console[type](...args);
+    console[type](...arguments_);
   }
 
-  log(...args: unknown[]): void {
+  log(...arguments_: unknown[]): void {
-    this._log("log", ...args);
+    this._log("log", ...arguments_);
   }
 
-  debug(...args: unknown[]): void {
+  debug(...arguments_: unknown[]): void {
-    this._log("debug", ...args);
+    this._log("debug", ...arguments_);
   }
 
-  info(...args: unknown[]): void {
+  info(...arguments_: unknown[]): void {
-    this._log("info", ...args);
+    this._log("info", ...arguments_);
   }
 
-  warn(...args: unknown[]): void {
+  warn(...arguments_: unknown[]): void {
-    this._log("warn", ...args);
+    this._log("warn", ...arguments_);
   }
 
-  error(...args: unknown[]): void {
+  error(...arguments_: unknown[]): void {
-    this._log("error", ...args);
+    this._log("error", ...arguments_);
   }
 
   getTimestamp(): string {
@@ -92,22 +73,16 @@ export default class Logger {
     return timestamp;
   }
 
-  reportSentry(error: unknown): void {
-    if (reportErrors) {
-      captureException(error);
-    }
-  }
-
   async trimLog(file: string): Promise<void> {
     const data = await fs.promises.readFile(file, "utf8");
 
-    const MAX_LOG_FILE_LINES = 500;
+    const maxLogFileLines = 500;
     const logs = data.split(os.EOL);
     const logLength = logs.length - 1;
 
-    // Keep bottom MAX_LOG_FILE_LINES of each log instance
+    // Keep bottom maxLogFileLines of each log instance
-    if (logLength > MAX_LOG_FILE_LINES) {
+    if (logLength > maxLogFileLines) {
-      const trimmedLogs = logs.slice(logLength - MAX_LOG_FILE_LINES);
+      const trimmedLogs = logs.slice(logLength - maxLogFileLines);
       const toWrite = trimmedLogs.join(os.EOL);
       await fs.promises.writeFile(file, toWrite);
     }

app/common/messages.ts

@@ -1,7 +1,7 @@
-interface DialogBoxError {
+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

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/sentry-util.ts

@@ -1,20 +0,0 @@
-import electron from "electron";
-
-import {init} from "@sentry/electron";
-
-const {app} = process.type === "renderer" ? electron.remote : electron;
-
-export const sentryInit = (): void => {
-  if (app.isPackaged) {
-    init({
-      dsn: "https://628dc2f2864243a08ead72e63f94c7b1@sentry.io/204668",
-      // We should ignore this error since it's harmless and we know the reason behind this
-      // This error mainly comes from the console logs.
-      // This is a temp solution until Sentry supports disabling the console logs
-      ignoreErrors: ["does not appear to be a valid Zulip server"],
-      /// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
-    });
-  }
-};
-
-export {captureException} from "@sentry/electron";

app/common/translation-util.ts

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

app/common/typed-ipc.ts

@@ -1,19 +1,19 @@
-import type {DNDSettings} from "./dnd-util";
+import type {DndSettings} from "./dnd-util.js";
-import type {MenuProps, NavItem, ServerConf} from "./types";
+import type {MenuProperties, ServerConfig} from "./types.js";
 
-export interface MainMessage {
+export type MainMessage = {
   "clear-app-settings": () => void;
-  downloadFile: (url: string, downloadPath: string) => void;
+  "configure-spell-checker": () => void;
-  "error-reporting": () => 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;
-  "set-spellcheck-langs": () => void;
   "switch-server-tab": (index: number) => void;
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
@@ -21,24 +21,22 @@ export interface MainMessage {
   toggleAutoLauncher: (AutoLaunchValue: boolean) => void;
   "unread-count": (unreadCount: number) => void;
   "update-badge": (messageCount: number) => void;
-  "update-menu": (props: MenuProps) => void;
+  "update-menu": (properties: MenuProperties) => void;
   "update-taskbar-icon": (data: string, text: string) => void;
-}
+};
 
-export interface MainCall {
+export type MainCall = {
-  "get-server-settings": (domain: string) => ServerConf;
+  "get-server-settings": (domain: string) => ServerConfig;
   "is-online": (url: string) => boolean;
-  "save-server-icon": (iconURL: string) => string;
+  "poll-clipboard": (key: Uint8Array, sig: Uint8Array) => string | undefined;
-}
+  "save-server-icon": (iconURL: string) => string | null;
+};
 
-export interface RendererMessage {
+export type RendererMessage = {
   back: () => void;
   "copy-zulip-url": () => void;
   destroytray: () => void;
-  downloadFileCompleted: (filePath: string, fileName: string) => void;
-  downloadFileFailed: (state: string) => void;
   "enter-fullscreen": () => void;
-  "error-reporting-val": (errorReporting: boolean) => void;
   focus: () => void;
   "focus-webview-with-id": (webviewId: number) => void;
   forward: () => void;
@@ -48,7 +46,6 @@ export interface RendererMessage {
   logout: () => void;
   "new-server": () => void;
   "open-about": () => void;
-  "open-feedback-modal": () => void;
   "open-help": () => void;
   "open-network-settings": () => void;
   "open-org-tab": () => void;
@@ -57,6 +54,7 @@ export interface RendererMessage {
     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;
@@ -64,27 +62,23 @@ export interface RendererMessage {
   "set-active": () => void;
   "set-idle": () => void;
   "show-keyboard-shortcuts": () => void;
-  "show-network-error": (index: number) => void;
   "show-notification-settings": () => void;
   "switch-server-tab": (index: number) => void;
-  "switch-settings-nav": (navItem: NavItem) => void;
   "tab-devtools": () => void;
   "toggle-autohide-menubar": (
     autoHideMenubar: boolean,
     updateMenu: boolean,
   ) => void;
-  "toggle-dnd": (state: boolean, newSettings: Partial<DNDSettings>) => void;
+  "toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
-  "toggle-menubar-setting": (state: boolean) => void;
   "toggle-sidebar": (show: boolean) => void;
-  "toggle-sidebar-setting": (state: boolean) => void;
   "toggle-silent": (state: boolean) => void;
   "toggle-tray": (state: boolean) => void;
   toggletray: () => void;
-  tray: (arg: number) => void;
+  tray: (argument: number) => void;
   "update-realm-icon": (serverURL: string, iconURL: string) => void;
-  "update-realm-name": (serveRURL: string, realmName: string) => void;
+  "update-realm-name": (serverURL: string, realmName: string) => void;
   "webview-reload": () => void;
   zoomActualSize: () => void;
   zoomIn: () => void;
   zoomOut: () => void;
-}
+};

app/common/types.ts

@@ -1,27 +1,30 @@
-export interface MenuProps {
+export type MenuProperties = {
   tabs: TabData[];
   activeTabIndex?: number;
   enableMenu?: boolean;
-}
+};
 
-export type NavItem =
+export type NavigationItem =
   | "General"
   | "Network"
   | "AddServer"
   | "Organizations"
   | "Shortcuts";
 
-export interface ServerConf {
+export type ServerConfig = {
   url: string;
   alias: string;
   icon: string;
-}
+  zulipVersion: string;
+  zulipFeatureLevel: number;
+};
 
 export type TabRole = "server" | "function";
+export type TabPage = "Settings" | "About";
 
-export interface TabData {
+export type TabData = {
   role: TabRole;
-  name: string;
+  page?: TabPage;
+  label: string;
   index: number;
-  webviewName: string;
+};
-}

app/main/autoupdater.ts

@@ -1,15 +1,24 @@
-import {app, dialog, session, shell} from "electron";
+import {shell} from "electron/common";
-import util from "util";
+import {app, dialog, session} from "electron/main";
+import process from "node:process";
 
-import log from "electron-log";
+import log from "electron-log/main";
-import type {UpdateDownloadedEvent, UpdateInfo} from "electron-updater";
+import {
-import {autoUpdater} from "electron-updater";
+  type UpdateDownloadedEvent,
+  type UpdateInfo,
+  autoUpdater,
+} from "electron-updater";
 
-import * as ConfigUtil from "../common/config-util";
+import * as ConfigUtil from "../common/config-util.js";
+import * as t from "../common/translation-util.js";
 
-import {linuxUpdateNotification} from "./linuxupdater"; // Required only in case of linux
+import {linuxUpdateNotification} from "./linuxupdater.js"; // Required only in case of linux
 
-const sleep = util.promisify(setTimeout);
+let quitting = false;
+
+export function shouldQuitForUpdate(): boolean {
+  return quitting;
+}
 
 export async function appUpdater(updateFromMenu = false): Promise<void> {
   // Don't initiate auto-updates in development
@@ -25,20 +34,21 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
 
   let updateAvailable = false;
 
-  // Create Logs directory
+  // Log what's happening
-  const LogsDir = `${app.getPath("userData")}/Logs`;
+  const updateLogger = log.create({logId: "updates"});
-
+  updateLogger.transports.file.fileName = "updates.log";
-  // Log whats happening
+  updateLogger.transports.file.level = "info";
-  log.transports.file.file = `${LogsDir}/updates.log`;
+  autoUpdater.logger = updateLogger;
-  log.transports.file.level = "info";
-  autoUpdater.logger = log;
 
   // Handle auto updates for beta/pre releases
   const isBetaUpdate = ConfigUtil.getConfigItem("betaUpdate", false);
 
   autoUpdater.allowPrerelease = isBetaUpdate;
 
-  const eventsListenerRemove = ["update-available", "update-not-available"];
+  const eventsListenerRemove = [
+    "update-available",
+    "update-not-available",
+  ] as const;
   autoUpdater.on("update-available", async (info: UpdateInfo) => {
     if (updateFromMenu) {
       updateAvailable = true;
@@ -49,9 +59,13 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
       }
 
       await dialog.showMessageBox({
-        message: `A new version ${info.version}, of Zulip Desktop is available`,
+        message: t.__(
-        detail:
+          "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.",
+        ),
       });
     }
   });
@@ -63,8 +77,11 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
       autoUpdater.removeAllListeners();
 
       await dialog.showMessageBox({
-        message: "No updates available",
+        message: t.__("No updates available."),
-        detail: `You are running the latest version of Zulip Desktop.\nVersion: ${app.getVersion()}`,
+        detail: t.__(
+          "You are running the latest version of Zulip Desktop.\nVersion: {{{version}}}",
+          {version: app.getVersion()},
+        ),
       });
     }
   });
@@ -76,20 +93,20 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
       autoUpdater.removeAllListeners();
 
       const messageText = updateAvailable
-        ? "Unable to download the updates"
+        ? t.__("Unable to download the update.")
-        : "Unable to check for updates";
+        : t.__("Unable to check for updates.");
+      const link = "https://zulip.com/apps/";
       const {response} = await dialog.showMessageBox({
         type: "error",
-        buttons: ["Manual Download", "Cancel"],
+        buttons: [t.__("Manual Download"), t.__("Cancel")],
         message: messageText,
-        detail: `Error: ${error.message}
+        detail: t.__(
-
+          "Error: {{{error}}}\n\nThe latest version of Zulip Desktop is available at:\n{{{link}}}\nCurrent version: {{{version}}}",
-The latest version of Zulip Desktop is available at -
+          {error: error.message, link, version: app.getVersion()},
-https://zulip.com/apps/.
+        ),
-Current Version: ${app.getVersion()}`,
       });
       if (response === 0) {
-        await shell.openExternal("https://zulip.com/apps/");
+        await shell.openExternal(link);
       }
     }
   });
@@ -99,16 +116,18 @@ Current Version: ${app.getVersion()}`,
     // Ask user to update the app
     const {response} = await dialog.showMessageBox({
       type: "question",
-      buttons: ["Install and Relaunch", "Install Later"],
+      buttons: [t.__("Install and Relaunch"), t.__("Install Later")],
       defaultId: 0,
-      message: `A new update ${event.version} has been downloaded`,
+      message: t.__("A new update {{{version}}} has been downloaded.", {
-      detail: "It will be installed the next time you restart the application",
+        version: event.version,
+      }),
+      detail: t.__(
+        "It will be installed the next time you restart the application.",
+      ),
     });
     if (response === 0) {
-      await sleep(1000);
+      quitting = true;
       autoUpdater.quitAndInstall();
-      // Force app to quit. This is just a workaround, ideally autoUpdater.quitAndInstall() should relaunch the app.
-      app.quit();
     }
   });
   // Init for updates

app/main/badge-settings.ts

@@ -1,13 +1,12 @@
-import electron, {app} from "electron";
+import {nativeImage} from "electron/common";
+import {type BrowserWindow, app} from "electron/main";
+import process from "node:process";
 
-import * as ConfigUtil from "../common/config-util";
+import * as ConfigUtil from "../common/config-util.js";
 
-import {send} from "./typed-ipc-main";
+import {send} from "./typed-ipc-main.js";
 
-function showBadgeCount(
+function showBadgeCount(messageCount: number, mainWindow: BrowserWindow): void {
-  messageCount: number,
-  mainWindow: electron.BrowserWindow,
-): void {
   if (process.platform === "win32") {
     updateOverlayIcon(messageCount, mainWindow);
   } else {
@@ -15,7 +14,7 @@ function showBadgeCount(
   }
 }
 
-function hideBadgeCount(mainWindow: electron.BrowserWindow): void {
+function hideBadgeCount(mainWindow: BrowserWindow): void {
   if (process.platform === "win32") {
     mainWindow.setOverlayIcon(null, "");
   } else {
@@ -25,7 +24,7 @@ function hideBadgeCount(mainWindow: electron.BrowserWindow): void {
 
 export function updateBadge(
   badgeCount: number,
-  mainWindow: electron.BrowserWindow,
+  mainWindow: BrowserWindow,
 ): void {
   if (ConfigUtil.getConfigItem("badgeOption", true)) {
     showBadgeCount(badgeCount, mainWindow);
@@ -36,7 +35,7 @@ export function updateBadge(
 
 function updateOverlayIcon(
   messageCount: number,
-  mainWindow: electron.BrowserWindow,
+  mainWindow: BrowserWindow,
 ): void {
   if (!mainWindow.isFocused()) {
     mainWindow.flashFrame(
@@ -54,8 +53,8 @@ function updateOverlayIcon(
 export function updateTaskbarIcon(
   data: string,
   text: string,
-  mainWindow: electron.BrowserWindow,
+  mainWindow: BrowserWindow,
 ): void {
-  const img = electron.nativeImage.createFromDataURL(data);
+  const img = nativeImage.createFromDataURL(data);
   mainWindow.setOverlayIcon(img, text);
 }

app/main/handle-external-link.ts

@@ -0,0 +1,164 @@
+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.js";
+import * as LinkUtil from "../common/link-util.js";
+
+import {send} from "./typed-ipc-main.js";
+
+function isUploadsUrl(server: string, url: URL): boolean {
+  return url.origin === server && url.pathname.startsWith("/user_uploads/");
+}
+
+function downloadFile({
+  contents,
+  url,
+  downloadPath,
+  completed,
+  failed,
+}: {
+  contents: WebContents;
+  url: string;
+  downloadPath: string;
+  completed(filePath: string, fileName: string): Promise<void>;
+  failed(state: string): void;
+}) {
+  contents.downloadURL(url);
+  contents.session.once("will-download", async (_event, 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: "Download Complete",
+          body: `Click to show ${fileName} in folder`,
+          silent: true, // We'll play our own sound - ding.ogg
+        });
+        downloadNotification.on("click", () => {
+          // Reveal file in download folder
+          shell.showItemInFolder(filePath);
+        });
+        downloadNotification.show();
+
+        // Play sound to indicate download complete
+        if (!ConfigUtil.getConfigItem("silent", false)) {
+          send(mainContents, "play-ding-sound");
+        }
+      },
+      failed(state: string) {
+        // Automatic download failed, so show save dialog prompt and download
+        // through webview
+        // Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
+        // prompts right after each other)
+        // Check that the download is not cancelled by user
+        if (state !== "cancelled") {
+          if (ConfigUtil.getConfigItem("promptDownload", false)) {
+            new Notification({
+              title: "Download Complete",
+              body: "Download failed",
+            }).show();
+          } else {
+            contents.downloadURL(url.href);
+          }
+        }
+      },
+    });
+  } else {
+    (async () => LinkUtil.openBrowser(url))();
+  }
+}

app/main/index.ts

@@ -1,42 +1,63 @@
-import electron, {app, dialog, session} from "electron";
+import {clipboard} from "electron/common";
-import fs from "fs";
+import {
-import path from "path";
+  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";
+import * as ConfigUtil from "../common/config-util.js";
-import {sentryInit} from "../common/sentry-util";
+import {bundlePath, bundleUrl, publicPath} from "../common/paths.js";
-import type {RendererMessage} from "../common/typed-ipc";
+import * as t from "../common/translation-util.js";
-import type {MenuProps} from "../common/types";
+import type {RendererMessage} from "../common/typed-ipc.js";
+import type {MenuProperties} from "../common/types.js";
 
-import {appUpdater} from "./autoupdater";
+import {appUpdater, shouldQuitForUpdate} from "./autoupdater.js";
-import * as BadgeSettings from "./badge-settings";
+import * as BadgeSettings from "./badge-settings.js";
-import * as AppMenu from "./menu";
+import handleExternalLink from "./handle-external-link.js";
-import * as ProxyUtil from "./proxy-util";
+import * as AppMenu from "./menu.js";
-import {_getServerSettings, _isOnline, _saveServerIcon} from "./request";
+import {_getServerSettings, _isOnline, _saveServerIcon} from "./request.js";
-import {setAutoLaunch} from "./startup";
+import {sentryInit} from "./sentry.js";
-import {ipcMain, send} from "./typed-ipc-main";
+import {setAutoLaunch} from "./startup.js";
+import {ipcMain, send} from "./typed-ipc-main.js";
 
+import "gatemaker/electron-setup"; // eslint-disable-line import/no-unassigned-import
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const {GDK_BACKEND} = process.env;
 
+// Initialize sentry for main process
+sentryInit();
+
 let mainWindowState: windowStateKeeper.State;
 
 // Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
+let mainWindow: BrowserWindow;
 let badgeCount: number;
 
 let isQuitting = false;
 
-// Load this url in main window
+// Load this file in main window
-const mainURL = "file://" + path.join(__dirname, "../renderer", "main.html");
+const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
 
 const permissionCallbacks = new Map<number, (grant: boolean) => void>();
 let nextPermissionCallbackId = 0;
 
-const APP_ICON = path.join(__dirname, "../resources", "Icon");
+const appIcon = path.join(publicPath, "resources/Icon");
 
 const iconPath = (): string =>
-  APP_ICON + (process.platform === "win32" ? ".ico" : ".png");
+  appIcon + (process.platform === "win32" ? ".ico" : ".png");
 
 // Toggle the app window
 const toggleApp = (): void => {
@@ -47,7 +68,7 @@ const toggleApp = (): void => {
   }
 };
 
-function createMainWindow(): Electron.BrowserWindow {
+function createMainWindow(): BrowserWindow {
   // Load the previous state with fallback to defaults
   mainWindowState = windowStateKeeper({
     defaultWidth: 1100,
@@ -55,7 +76,7 @@ function createMainWindow(): Electron.BrowserWindow {
     path: `${app.getPath("userData")}/config`,
   });
 
-  const win = new electron.BrowserWindow({
+  const win = new BrowserWindow({
     // This settings needs to be saved in config
     title: "Zulip",
     icon: iconPath(),
@@ -66,21 +87,19 @@ function createMainWindow(): Electron.BrowserWindow {
     minWidth: 500,
     minHeight: 400,
     webPreferences: {
-      contextIsolation: false,
+      preload: path.join(bundlePath, "renderer.js"),
-      enableRemoteModule: true,
+      sandbox: false,
-      nodeIntegration: true,
-      partition: "persist:webviewsession",
       webviewTag: true,
-      worldSafeExecuteJavaScript: true,
     },
     show: false,
   });
+  remoteMain.enable(win.webContents);
 
   win.on("focus", () => {
     send(win.webContents, "focus");
   });
 
-  (async () => win.loadURL(mainURL))();
+  (async () => win.loadURL(mainUrl))();
 
   // Keep the app running in background on close event
   win.on("close", (event) => {
@@ -88,11 +107,18 @@ function createMainWindow(): Electron.BrowserWindow {
       app.quit();
     }
 
-    if (!isQuitting) {
+    if (!isQuitting && !shouldQuitForUpdate()) {
       event.preventDefault();
 
       if (process.platform === "darwin") {
-        app.hide();
+        if (win.isFullScreen()) {
+          win.setFullScreen(false);
+          win.once("leave-full-screen", () => {
+            app.hide();
+          });
+        } else {
+          app.hide();
+        }
       } else {
         win.hide();
       }
@@ -143,6 +169,11 @@ function createMainWindow(): Electron.BrowserWindow {
     }
   }
 
+  // Used for notifications on Windows
+  app.setAppUserModelId("org.zulip.zulip-electron");
+
+  remoteMain.initialize();
+
   app.on("second-instance", () => {
     if (mainWindow) {
       if (mainWindow.isMinimized()) {
@@ -155,7 +186,7 @@ function createMainWindow(): Electron.BrowserWindow {
 
   ipcMain.on(
     "permission-callback",
-    (event: Event, permissionCallbackId: number, grant: boolean) => {
+    (event, permissionCallbackId: number, grant: boolean) => {
       permissionCallbacks.get(permissionCallbackId)?.(grant);
       permissionCallbacks.delete(permissionCallbackId);
     },
@@ -163,24 +194,67 @@ function createMainWindow(): Electron.BrowserWindow {
 
   // This event is only available on macOS. Triggers when you click on the dock icon.
   app.on("activate", () => {
-    if (mainWindow) {
+    mainWindow.show();
-      // If there is already a window show it
+  });
-      mainWindow.show();
+
-    } else {
+  app.on("web-contents-created", (_event, contents: WebContents) => {
-      mainWindow = createMainWindow();
+    contents.setWindowOpenHandler((details) => {
-    }
+      handleExternalLink(contents, details, page);
+      return {action: "deny"};
+    });
   });
 
   const ses = session.fromPartition("persist:webviewsession");
   ses.setUserAgent(`ZulipElectron/${app.getVersion()} ${ses.getUserAgent()}`);
 
-  ipcMain.on("set-spellcheck-langs", () => {
+  function configureSpellChecker() {
-    ses.setSpellCheckerLanguages(
+    const enable = ConfigUtil.getConfigItem("enableSpellchecker", true);
-      process.platform === "darwin"
+    if (enable && process.platform !== "darwin") {
-        ? // Work around https://github.com/electron/electron/issues/30215.
+      ses.setSpellCheckerLanguages(
-          mainWindow.webContents.session.getSpellCheckerLanguages()
+        ConfigUtil.getConfigItem("spellcheckerLanguages", null) ?? [],
-        : 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.slice(0, 12);
+      const ciphertext = data.slice(12, -16);
+      const authTag = data.slice(-16);
+      const decipher = crypto.createDecipheriv("aes-256-gcm", key, iv, {
+        authTagLength: 16,
+      });
+      decipher.setAuthTag(authTag);
+      return (
+        decipher.update(ciphertext, undefined, "utf8") + decipher.final("utf8")
+      );
+    } catch {
+      // If the parsing or decryption failed in any way,
+      // the correct token hasn’t been copied yet; try
+      // again next time.
+      return undefined;
+    }
   });
 
   AppMenu.setMenu({
@@ -195,18 +269,6 @@ function createMainWindow(): Electron.BrowserWindow {
     mainWindow.setMenuBarVisibility(!shouldHideMenu);
   }
 
-  // Initialize sentry for main process
-  const errorReporting = ConfigUtil.getConfigItem("errorReporting", true);
-  if (errorReporting) {
-    sentryInit();
-  }
-
-  const isSystemProxy = ConfigUtil.getConfigItem("useSystemProxy", false);
-
-  if (isSystemProxy) {
-    (async () => ProxyUtil.resolveSystemProxy(mainWindow))();
-  }
-
   const page = mainWindow.webContents;
 
   page.on("dom-ready", () => {
@@ -245,22 +307,29 @@ function createMainWindow(): Electron.BrowserWindow {
   app.on(
     "certificate-error",
     (
-      event: Event,
+      event,
-      webContents: Electron.WebContents,
+      webContents,
-      urlString: string,
+      urlString,
-      error: string,
+      error,
+      certificate,
+      callback,
+      isMainFrame,
+      // eslint-disable-next-line max-params
     ) => {
-      const url = new URL(urlString);
+      if (isMainFrame) {
-      dialog.showErrorBox(
+        const url = new URL(urlString);
-        "Certificate error",
+        dialog.showErrorBox(
-        `The server presented an invalid certificate for ${url.origin}:
+          t.__("Certificate error"),
-
+          t.__(
-${error}`,
+            "The server presented an invalid certificate for {{{origin}}}:\n\n{{{error}}}",
-      );
+            {origin: url.origin, error},
+          ),
+        );
+      }
     },
   );
 
-  page.session.setPermissionRequestHandler(
+  ses.setPermissionRequestHandler(
     (webContents, permission, callback, details) => {
       const {origin} = new URL(details.requestingUrl);
       const permissionCallbackId = nextPermissionCallbackId++;
@@ -282,7 +351,7 @@ ${error}`,
   );
 
   // Temporarily remove this event
-  // electron.powerMonitor.on('resume', () => {
+  // powerMonitor.on('resume', () => {
   // 	mainWindow.reload();
   // 	send(page, 'destroytray');
   // });
@@ -315,35 +384,26 @@ ${error}`,
     BadgeSettings.updateBadge(badgeCount, mainWindow);
   });
 
-  ipcMain.on(
+  ipcMain.on("toggle-menubar", (_event, showMenubar: boolean) => {
-    "toggle-menubar",
+    mainWindow.autoHideMenuBar = showMenubar;
-    (_event: Electron.IpcMainEvent, showMenubar: boolean) => {
+    mainWindow.setMenuBarVisibility(!showMenubar);
-      mainWindow.autoHideMenuBar = showMenubar;
+    send(page, "toggle-autohide-menubar", showMenubar, true);
-      mainWindow.setMenuBarVisibility(!showMenubar);
+  });
-      send(page, "toggle-autohide-menubar", showMenubar, true);
-    },
-  );
 
-  ipcMain.on(
+  ipcMain.on("update-badge", (_event, messageCount: number) => {
-    "update-badge",
+    badgeCount = messageCount;
-    (_event: Electron.IpcMainEvent, messageCount: number) => {
+    BadgeSettings.updateBadge(badgeCount, mainWindow);
-      badgeCount = messageCount;
+    send(page, "tray", messageCount);
-      BadgeSettings.updateBadge(badgeCount, mainWindow);
+  });
-      send(page, "tray", messageCount);
-    },
-  );
 
-  ipcMain.on(
+  ipcMain.on("update-taskbar-icon", (_event, data: string, text: string) => {
-    "update-taskbar-icon",
+    BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-    (_event: Electron.IpcMainEvent, data: string, text: string) => {
+  });
-      BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-    },
-  );
 
   ipcMain.on(
     "forward-message",
     <Channel extends keyof RendererMessage>(
-      _event: Electron.IpcMainEvent,
+      _event: IpcMainEvent,
       listener: Channel,
       ...parameters: Parameters<RendererMessage[Channel]>
     ) => {
@@ -352,136 +412,61 @@ ${error}`,
   );
 
   ipcMain.on(
-    "update-menu",
+    "forward-to",
-    (_event: Electron.IpcMainEvent, props: MenuProps) => {
+    <Channel extends keyof RendererMessage>(
-      AppMenu.setMenu(props);
+      _event: IpcMainEvent,
-      if (props.activeTabIndex !== undefined) {
+      webContentsId: number,
-        const activeTab = props.tabs[props.activeTabIndex];
+      listener: Channel,
-        mainWindow.setTitle(`Zulip - ${activeTab.webviewName}`);
+      ...parameters: Parameters<RendererMessage[Channel]>
+    ) => {
+      const contents = webContents.fromId(webContentsId);
+      if (contents !== undefined) {
+        send(contents, listener, ...parameters);
       }
     },
   );
 
-  ipcMain.on(
+  ipcMain.on("update-menu", (_event, properties: MenuProperties) => {
-    "toggleAutoLauncher",
+    AppMenu.setMenu(properties);
-    async (_event: Electron.IpcMainEvent, AutoLaunchValue: boolean) => {
+    if (properties.activeTabIndex !== undefined) {
-      await setAutoLaunch(AutoLaunchValue);
+      const activeTab = properties.tabs[properties.activeTabIndex];
-    },
+      mainWindow.setTitle(`Zulip - ${activeTab.label}`);
-  );
+    }
+  });
 
-  ipcMain.on(
+  ipcMain.on("toggleAutoLauncher", async (_event, AutoLaunchValue: boolean) => {
-    "downloadFile",
+    await setAutoLaunch(AutoLaunchValue);
-    (_event: Electron.IpcMainEvent, url: string, downloadPath: string) => {
+  });
-      page.downloadURL(url);
-      page.session.once("will-download", async (_event: Event, item) => {
-        if (ConfigUtil.getConfigItem("promptDownload", false)) {
-          const showDialogOptions: electron.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", (_event: Event, state) => {
-          if (state === "completed") {
-            send(
-              page,
-              "downloadFileCompleted",
-              item.getSavePath(),
-              path.basename(item.getSavePath()),
-            );
-          } else {
-            console.log("Download failed state:", state);
-            send(page, "downloadFileFailed", state);
-          }
-
-          // To stop item for listening to updated events of this file
-          item.removeListener("updated", updatedListener);
-        });
-      });
-    },
-  );
 
   ipcMain.on(
     "realm-name-changed",
-    (_event: Electron.IpcMainEvent, serverURL: string, realmName: string) => {
+    (_event, serverURL: string, realmName: string) => {
       send(page, "update-realm-name", serverURL, realmName);
     },
   );
 
   ipcMain.on(
     "realm-icon-changed",
-    (_event: Electron.IpcMainEvent, serverURL: string, iconURL: string) => {
+    (_event, serverURL: string, iconURL: string) => {
       send(page, "update-realm-icon", serverURL, iconURL);
     },
   );
 
-  // Using event.sender.send instead of page.send here to
+  ipcMain.on("save-last-tab", (_event, index: number) => {
-  // make sure the value of errorReporting is sent only once on load.
+    ConfigUtil.setConfigItem("lastActiveTab", index);
-  ipcMain.on("error-reporting", (event: Electron.IpcMainEvent) => {
-    send(event.sender, "error-reporting-val", errorReporting);
   });
 
-  ipcMain.on(
+  ipcMain.on("focus-this-webview", (event) => {
-    "save-last-tab",
+    send(page, "focus-webview-with-id", event.sender.id);
-    (_event: Electron.IpcMainEvent, index: number) => {
+    mainWindow.show();
-      ConfigUtil.setConfigItem("lastActiveTab", index);
+  });
-    },
-  );
 
   // Update user idle status for each realm after every 15s
   const idleCheckInterval = 15 * 1000; // 15 seconds
   setInterval(() => {
     // Set user idle if no activity in 1 second (idleThresholdSeconds)
     const idleThresholdSeconds = 1; // 1 second
-    const idleState =
+    const idleState = powerMonitor.getSystemIdleState(idleThresholdSeconds);
-      electron.powerMonitor.getSystemIdleState(idleThresholdSeconds);
     if (idleState === "active") {
       send(page, "set-active");
     } else {

app/main/linux-update-util.ts

@@ -1,28 +1,29 @@
-import {app, dialog} from "electron";
+import {app, dialog} from "electron/main";
-import fs from "fs";
+import fs from "node:fs";
-import path from "path";
+import path from "node:path";
 
 import {JsonDB} from "node-json-db";
 import {DataError} from "node-json-db/dist/lib/Errors";
 
-import Logger from "../common/logger-util";
+import Logger from "../common/logger-util.js";
+import * as t from "../common/translation-util.js";
 
 const logger = new Logger({
   file: "linux-update-util.log",
 });
 
-let db: JsonDB;
+let database: JsonDB;
 
-reloadDB();
+reloadDatabase();
 
 export function getUpdateItem(
   key: string,
   defaultValue: true | null = null,
 ): true | null {
-  reloadDB();
+  reloadDatabase();
   let value: unknown;
   try {
-    value = db.getObject<unknown>(`/${key}`);
+    value = database.getObject<unknown>(`/${key}`);
   } catch (error: unknown) {
     if (!(error instanceof DataError)) throw error;
   }
@@ -36,16 +37,16 @@ export function getUpdateItem(
 }
 
 export function setUpdateItem(key: string, value: true | null): void {
-  db.push(`/${key}`, value, true);
+  database.push(`/${key}`, value, true);
-  reloadDB();
+  reloadDatabase();
 }
 
 export function removeUpdateItem(key: string): void {
-  db.delete(`/${key}`);
+  database.delete(`/${key}`);
-  reloadDB();
+  reloadDatabase();
 }
 
-function reloadDB(): void {
+function reloadDatabase(): void {
   const linuxUpdateJsonPath = path.join(
     app.getPath("userData"),
     "/config/updates.json",
@@ -57,13 +58,13 @@ function reloadDB(): void {
     if (fs.existsSync(linuxUpdateJsonPath)) {
       fs.unlinkSync(linuxUpdateJsonPath);
       dialog.showErrorBox(
-        "Error saving update notifications.",
+        t.__("Error saving update notifications"),
-        "We encountered an error while saving the update notifications.",
+        t.__("We encountered an error while saving the update notifications."),
       );
       logger.error("Error while JSON parsing updates.json: ");
       logger.error(error);
     }
   }
 
-  db = new JsonDB(linuxUpdateJsonPath, true, true);
+  database = new JsonDB(linuxUpdateJsonPath, true, true);
 }

app/main/linuxupdater.ts

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

app/main/menu.ts

@@ -1,21 +1,26 @@
-import {BrowserWindow, Menu, app, shell} from "electron";
+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";
+import * as ConfigUtil from "../common/config-util.js";
-import * as DNDUtil from "../common/dnd-util";
+import * as DNDUtil from "../common/dnd-util.js";
-import * as t from "../common/translation-util";
+import * as t from "../common/translation-util.js";
-import type {RendererMessage} from "../common/typed-ipc";
+import type {RendererMessage} from "../common/typed-ipc.js";
-import type {MenuProps, TabData} from "../common/types";
+import type {MenuProperties, TabData} from "../common/types.js";
 
-import {appUpdater} from "./autoupdater";
+import {appUpdater} from "./autoupdater.js";
-import {send} from "./typed-ipc-main";
+import {send} from "./typed-ipc-main.js";
 
 const appName = app.name;
 
-function getHistorySubmenu(
+function getHistorySubmenu(enableMenu: boolean): MenuItemConstructorOptions[] {
-  enableMenu: boolean,
-): Electron.MenuItemConstructorOptions[] {
   return [
     {
       label: t.__("Back"),
@@ -41,7 +46,7 @@ function getHistorySubmenu(
   ];
 }
 
-function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getToolsSubmenu(): MenuItemConstructorOptions[] {
   return [
     {
       label: t.__("Check for Updates"),
@@ -65,7 +70,7 @@ function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
       click() {
         const zip = new AdmZip();
         const date = new Date();
-        const dateString = date.toLocaleDateString().replace(/\//g, "-");
+        const dateString = date.toLocaleDateString().replaceAll("/", "-");
 
         // Create a zip file of all the logs and config data
         zip.addLocalFolder(`${app.getPath("appData")}/${appName}/Logs`);
@@ -89,7 +94,7 @@ function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
       accelerator:
         process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",
       click(_item, focusedWindow) {
-        if (focusedWindow) {
+        if (focusedWindow instanceof BrowserWindow) {
           focusedWindow.webContents.openDevTools({mode: "undocked"});
         }
       },
@@ -107,7 +112,7 @@ function getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
   ];
 }
 
-function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getViewSubmenu(): MenuItemConstructorOptions[] {
   return [
     {
       label: t.__("Reload"),
@@ -217,7 +222,7 @@ function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
     {
       label: t.__("Toggle Tray Icon"),
       click(_item, focusedWindow) {
-        if (focusedWindow) {
+        if (focusedWindow instanceof BrowserWindow) {
           send(focusedWindow.webContents, "toggletray");
         }
       },
@@ -226,7 +231,7 @@ function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
       label: t.__("Toggle Sidebar"),
       accelerator: "CommandOrControl+Shift+S",
       click(_item, focusedWindow) {
-        if (focusedWindow) {
+        if (focusedWindow instanceof BrowserWindow) {
           const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
           send(focusedWindow.webContents, "toggle-sidebar", newValue);
           ConfigUtil.setConfigItem("showSidebar", newValue);
@@ -238,7 +243,7 @@ function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
       checked: ConfigUtil.getConfigItem("autoHideMenubar", false),
       visible: process.platform !== "darwin",
       click(_item, focusedWindow) {
-        if (focusedWindow) {
+        if (focusedWindow instanceof BrowserWindow) {
           const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
           focusedWindow.autoHideMenuBar = newValue;
           focusedWindow.setMenuBarVisibility(!newValue);
@@ -256,7 +261,7 @@ function getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
   ];
 }
 
-function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
+function getHelpSubmenu(): MenuItemConstructorOptions[] {
   return [
     {
       label: `${appName + " Desktop"} v${app.getVersion()}`,
@@ -280,12 +285,8 @@ function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
     },
     {
       label: t.__("Report an Issue"),
-      click() {
+      async click() {
-        // The goal is to notify the main.html BrowserWindow
+        await shell.openExternal("https://zulip.com/help/contact-support");
-        // which may not be the focused window.
-        for (const window of BrowserWindow.getAllWindows()) {
-          send(window.webContents, "open-feedback-modal");
-        }
       },
     },
   ];
@@ -294,8 +295,8 @@ function getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
 function getWindowSubmenu(
   tabs: TabData[],
   activeTabIndex?: number,
-): Electron.MenuItemConstructorOptions[] {
+): MenuItemConstructorOptions[] {
-  const initialSubmenu: Electron.MenuItemConstructorOptions[] = [
+  const initialSubmenu: MenuItemConstructorOptions[] = [
     {
       label: t.__("Minimize"),
       role: "minimize",
@@ -307,7 +308,7 @@ function getWindowSubmenu(
   ];
 
   if (tabs.length > 0) {
-    const ShortcutKey = process.platform === "darwin" ? "Cmd" : "Ctrl";
+    const shortcutKey = process.platform === "darwin" ? "Cmd" : "Ctrl";
     initialSubmenu.push({
       type: "separator",
     });
@@ -317,14 +318,14 @@ function getWindowSubmenu(
       if (tab === undefined) continue;
 
       // Do not add functional tab settings to list of windows in menu bar
-      if (tab.role === "function" && tab.name === "Settings") {
+      if (tab.role === "function" && tab.page === "Settings") {
         continue;
       }
 
       initialSubmenu.push({
-        label: tab.name,
+        label: tab.label,
         accelerator:
-          tab.role === "function" ? "" : `${ShortcutKey} + ${tab.index + 1}`,
+          tab.role === "function" ? "" : `${shortcutKey} + ${tab.index + 1}`,
         checked: tab.index === activeTabIndex,
         click(_item, focusedWindow) {
           if (focusedWindow) {
@@ -371,8 +372,10 @@ function getWindowSubmenu(
   return initialSubmenu;
 }
 
-function getDarwinTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
+function getDarwinTpl(
-  const {tabs, activeTabIndex, enableMenu = false} = props;
+  properties: MenuProperties,
+): MenuItemConstructorOptions[] {
+  const {tabs, activeTabIndex, enableMenu = false} = properties;
 
   return [
     {
@@ -536,8 +539,8 @@ function getDarwinTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
   ];
 }
 
-function getOtherTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
+function getOtherTpl(properties: MenuProperties): MenuItemConstructorOptions[] {
-  const {tabs, activeTabIndex, enableMenu = false} = props;
+  const {tabs, activeTabIndex, enableMenu = false} = properties;
   return [
     {
       label: t.__("File"),
@@ -686,7 +689,7 @@ function getOtherTpl(props: MenuProps): Electron.MenuItemConstructorOptions[] {
 
 function sendAction<Channel extends keyof RendererMessage>(
   channel: Channel,
-  ...args: Parameters<RendererMessage[Channel]>
+  ...arguments_: Parameters<RendererMessage[Channel]>
 ): void {
   const win = BrowserWindow.getAllWindows()[0];
 
@@ -694,7 +697,7 @@ function sendAction<Channel extends keyof RendererMessage>(
     win.restore();
   }
 
-  send(win.webContents, channel, ...args);
+  send(win.webContents, channel, ...arguments_);
 }
 
 async function checkForUpdate(): Promise<void> {
@@ -717,9 +720,11 @@ function getPreviousServer(tabs: TabData[], activeTabIndex: number): number {
   return activeTabIndex;
 }
 
-export function setMenu(props: MenuProps): void {
+export function setMenu(properties: MenuProperties): void {
   const tpl =
-    process.platform === "darwin" ? getDarwinTpl(props) : getOtherTpl(props);
+    process.platform === "darwin"
+      ? getDarwinTpl(properties)
+      : getOtherTpl(properties);
   const menu = Menu.buildFromTemplate(tpl);
   Menu.setApplicationMenu(menu);
 }

app/main/proxy-util.ts

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

app/main/request.ts

@@ -1,81 +1,71 @@
-import type {ClientRequest, IncomingMessage} from "electron";
+import {type Session, app} from "electron/main";
-import {app, net} from "electron";
+import fs from "node:fs";
-import fs from "fs";
+import path from "node:path";
-import path from "path";
+import {Readable} from "node:stream";
-import stream from "stream";
+import {pipeline} from "node:stream/promises";
-import util from "util";
+import type {ReadableStream} from "node:stream/web";
 
-import getStream from "get-stream";
+import * as Sentry from "@sentry/electron/main";
-import * as z from "zod";
+import {z} from "zod";
 
-import Logger from "../common/logger-util";
+import Logger from "../common/logger-util.js";
-import * as Messages from "../common/messages";
+import * as Messages from "../common/messages.js";
-import type {ServerConf} from "../common/types";
+import type {ServerConfig} from "../common/types.js";
-
-export async function fetchResponse(
-  request: ClientRequest,
-): Promise<IncomingMessage> {
-  return new Promise((resolve, reject) => {
-    request.on("response", resolve);
-    request.on("abort", () => {
-      reject(new Error("Request aborted"));
-    });
-    request.on("error", reject);
-    request.end();
-  });
-}
-
-const pipeline = util.promisify(stream.pipeline);
 
 /* Request: domain-util */
 
-const defaultIconUrl = "../renderer/img/icon.png";
-
 const logger = new Logger({
   file: "domain-util.log",
 });
 
 const generateFilePath = (url: string): string => {
-  const dir = `${app.getPath("userData")}/server-icons`;
+  const 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(dir)) {
+  if (!fs.existsSync(directory)) {
-    fs.mkdirSync(dir);
+    fs.mkdirSync(directory);
   }
 
-  return `${dir}/${hash >>> 0}${extension}`;
+  // eslint-disable-next-line no-bitwise
+  return `${directory}/${hash >>> 0}${extension}`;
 };
 
 export const _getServerSettings = async (
   domain: string,
-  session: Electron.session,
+  session: Session,
-): Promise<ServerConf> => {
+): Promise<ServerConfig> => {
-  const response = await fetchResponse(
+  const response = await session.fetch(domain + "/api/v1/server_settings");
-    net.request({
+  if (!response.ok) {
-      url: domain + "/api/v1/server_settings",
-      session,
-    }),
-  );
-  if (response.statusCode !== 200) {
     throw new Error(Messages.invalidZulipServerError(domain));
   }
 
-  const data: unknown = JSON.parse(await getStream(response));
+  const data: unknown = await response.json();
-  const {realm_name, realm_uri, realm_icon} = z
+  /* 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.string(),
+      realm_uri: z.string().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
@@ -83,28 +73,33 @@ export const _getServerSettings = async (
     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: Electron.session,
+  session: Session,
-): Promise<string> => {
+): Promise<string | null> => {
   try {
-    const response = await fetchResponse(net.request({url, session}));
+    const response = await session.fetch(url);
-    if (response.statusCode !== 200) {
+    if (!response.ok) {
       logger.log("Could not get server icon.");
-      return defaultIconUrl;
+      return null;
     }
 
     const filePath = generateFilePath(url);
-    await pipeline(response, fs.createWriteStream(filePath));
+    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);
-    logger.reportSentry(error);
+    Sentry.captureException(error);
-    return defaultIconUrl;
+    return null;
   }
 };
 
@@ -112,19 +107,13 @@ export const _saveServerIcon = async (
 
 export const _isOnline = async (
   url: string,
-  session: Electron.session,
+  session: Session,
 ): Promise<boolean> => {
   try {
-    const response = await fetchResponse(
+    const response = await session.fetch(`${url}/api/v1/server_settings`, {
-      net.request({
+      method: "HEAD",
-        method: "HEAD",
+    });
-        url: `${url}/api/v1/server_settings`,
+    return response.ok;
-        session,
-      }),
-    );
-    const isValidResponse =
-      response.statusCode >= 200 && response.statusCode < 400;
-    return isValidResponse;
   } catch (error: unknown) {
     logger.log(error);
     return false;

app/main/sentry.ts

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

app/main/startup.ts

@@ -1,8 +1,9 @@
-import {app} from "electron";
+import {app} from "electron/main";
+import process from "node:process";
 
 import AutoLaunch from "auto-launch";
 
-import * as ConfigUtil from "../common/config-util";
+import * as ConfigUtil from "../common/config-util.js";
 
 export const setAutoLaunch = async (
   AutoLaunchValue: boolean,
@@ -19,13 +20,13 @@ export const setAutoLaunch = async (
 
   // `setLoginItemSettings` doesn't support linux
   if (process.platform === "linux") {
-    const ZulipAutoLauncher = new AutoLaunch({
+    const zulipAutoLauncher = new AutoLaunch({
       name: "Zulip",
       isHidden: false,
     });
     await (autoLaunchOption
-      ? ZulipAutoLauncher.enable()
+      ? zulipAutoLauncher.enable()
-      : ZulipAutoLauncher.disable());
+      : zulipAutoLauncher.disable());
   } else {
     app.setLoginItemSettings({
       openAtLogin: autoLaunchOption,

app/main/typed-ipc-main.ts

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

app/renderer/about.html

@@ -1,37 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
-<html lang="en">
+<meta charset="UTF-8" />
-  <head>
+<link rel="stylesheet" href="css/about.css" />
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="css/about.css" />
-    <title>Zulip - About</title>
-  </head>
 
-  <body>
+<!-- Initially hidden to prevent FOUC -->
-    <div class="about">
+<div class="about" hidden>
-      <img class="logo" src="../resources/zulip.png" />
+  <img class="logo" src="../resources/zulip.png" />
-      <p class="detail" id="version">v?.?.?</p>
+  <p class="detail" id="version"></p>
-      <div class="maintenance-info">
+</div>
-        <p class="detail maintainer">
-          Maintained by
-          <a href="https://zulip.com" target="_blank" rel="noopener noreferrer"
-            >Zulip</a
-          >
-        </p>
-        <p class="detail license">
-          Available under the
-          <a
-            href="https://github.com/zulip/zulip-desktop/blob/main/LICENSE"
-            target="_blank"
-            rel="noopener noreferrer"
-            >Apache 2.0 License</a
-          >
-        </p>
-      </div>
-    </div>
-    <script>
-      const {app} = require("electron").remote;
-      const version_tag = document.querySelector("#version");
-      version_tag.textContent = "v" + app.getVersion();
-    </script>
-  </body>
-</html>

app/renderer/css/about.css

@@ -1,5 +1,7 @@
-body {
+:host {
-  background: rgba(250, 250, 250, 1);
+  contain: strict;
+  display: flow-root;
+  background: rgb(250 250 250 / 100%);
   font-family: menu, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -10,12 +12,13 @@ body {
 }
 
 #version {
-  color: rgba(68, 67, 67, 1);
+  color: rgb(68 67 67 / 100%);
   font-size: 1.3em;
   padding-top: 40px;
 }
 
 .about {
+  display: block !important;
   margin: 25vh auto;
   height: 25vh;
   text-align: center;
@@ -23,7 +26,7 @@ body {
 
 .about p {
   font-size: 20px;
-  color: rgba(0, 0, 0, 0.62);
+  color: rgb(0 0 0 / 62%);
 }
 
 .about img {
@@ -44,11 +47,10 @@ body {
 }
 
 .maintenance-info {
-  cursor: pointer;
   position: absolute;
   width: 100%;
   left: 0;
-  color: rgba(68, 68, 68, 1);
+  color: rgb(68 68 68 / 100%);
 }
 
 .maintenance-info p {
@@ -58,7 +60,7 @@ body {
 }
 
 p.detail a {
-  color: rgba(53, 95, 76, 1);
+  color: rgb(53 95 76 / 100%);
 }
 
 p.detail a:hover {

app/renderer/css/feedback.css

@@ -1,5 +1,5 @@
 :host {
-  --button-color: rgb(69, 166, 149);
+  --button-color: rgb(69 166 149);
 }
 
 button {
@@ -14,6 +14,6 @@ button:focus {
 }
 
 button:active {
-  background-color: rgb(241, 241, 241);
+  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

@@ -16,9 +16,9 @@ body {
 }
 
 .toggle-sidebar {
-  background: rgba(34, 44, 49, 1);
+  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;
@@ -44,6 +44,7 @@ body {
 
 #view-controls-container {
   height: calc(100% - 208px);
+  scrollbar-gutter: stable both-edges;
   overflow-y: hidden;
 }
 
@@ -52,24 +53,15 @@ body {
 }
 
 #view-controls-container::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgb(0 0 0 / 30%);
 }
 
 #view-controls-container::-webkit-scrollbar-thumb {
-  background-color: rgba(169, 169, 169, 1);
+  background-color: rgb(169 169 169 / 100%);
-  outline: 1px solid rgba(169, 169, 169, 1);
 }
 
 #view-controls-container:hover {
-  overflow-y: overlay;
+  overflow-y: scroll;
-}
-
-@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");
 }
 
 /*******************
@@ -101,7 +93,7 @@ body {
   -webkit-font-smoothing: antialiased;
 
   /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 #actions-container {
@@ -122,23 +114,23 @@ body {
 }
 
 .action-button i {
-  color: rgba(108, 133, 146, 1);
+  color: rgb(108 133 146 / 100%);
   font-size: 28px;
 }
 
 .action-button:hover i {
-  color: rgba(152, 169, 179, 1);
+  color: rgb(152 169 179 / 100%);
 }
 
 .action-button.active {
   /* background-color: rgba(255, 255, 255, 0.25); */
-  background-color: rgba(239, 239, 239, 1);
+  background-color: rgb(239 239 239 / 100%);
   opacity: 0.9;
   padding-right: 14px;
 }
 
 .action-button.active i {
-  color: rgba(28, 38, 43, 1);
+  color: rgb(28 38 43 / 100%);
 }
 
 .action-button.disable {
@@ -150,7 +142,7 @@ body {
 }
 
 .action-button.disable:hover i {
-  color: rgba(108, 133, 146, 1);
+  color: rgb(108 133 146 / 100%);
 }
 
 .tab {
@@ -180,7 +172,7 @@ body {
   margin-top: 5px;
   z-index: 11;
   line-height: 31px;
-  color: rgba(238, 238, 238, 1);
+  color: rgb(238 238 238 / 100%);
   text-align: center;
   overflow: hidden;
   opacity: 0.6;
@@ -191,7 +183,7 @@ body {
   font-family: Verdana, sans-serif;
   font-weight: 600;
   font-size: 22px;
-  border: 2px solid rgba(34, 44, 49, 1);
+  border: 2px solid rgb(34 44 49 / 100%);
   margin-left: 17%;
   width: 35px;
   border-radius: 4px;
@@ -203,7 +195,7 @@ body {
 
 .tab.active .server-tab {
   opacity: 1;
-  background-color: rgba(100, 132, 120, 1);
+  background-color: rgb(100 132 120 / 100%);
 }
 
 .tab.functional-tab {
@@ -214,7 +206,7 @@ body {
 .tab.functional-tab.active .server-tab {
   padding: 2px 0;
   height: 40px;
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgb(255 255 255 / 25%);
 }
 
 .tab.functional-tab .server-tab i {
@@ -227,14 +219,14 @@ body {
   min-width: 11px;
   padding: 0 3px;
   height: 17px;
-  background-color: rgba(244, 67, 54, 1);
+  background-color: rgb(244 67 54 / 100%);
   font-size: 10px;
   font-family: sans-serif;
   position: absolute;
   z-index: 15;
   top: 6px;
   float: right;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
   text-align: center;
   line-height: 17px;
   display: block;
@@ -262,7 +254,7 @@ body {
 }
 
 .tab .server-tab-shortcut {
-  color: rgba(100, 132, 120, 1);
+  color: rgb(100 132 120 / 100%);
   font-size: 12px;
   text-align: center;
   font-family: sans-serif;
@@ -298,7 +290,9 @@ body {
   content: "";
   position: absolute;
   z-index: 1;
-  background: rgba(255, 255, 255, 1) url(../img/ic_loading.gif) no-repeat;
+
+  /* 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%;
@@ -307,39 +301,62 @@ body {
 
 /* When the active webview is loaded */
 #webviews-container.loaded::before {
-  opacity: 0;
   z-index: -1;
   visibility: hidden;
 }
 
-webview {
+.webview-pane,
-  /* transition: opacity 0.3s ease-in; */
+.functional-view {
   position: absolute;
   width: 100%;
   height: 100%;
   flex-grow: 1;
+  visibility: hidden;
+}
+
+.webview-pane {
   display: flex;
   flex-direction: column;
 }
 
-webview.onload {
+.webview-pane > webview {
-  transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  flex: 1;
 }
 
-webview.active {
+.webview-pane.active,
-  opacity: 1;
+.functional-view.active {
   z-index: 1;
   visibility: visible;
 }
 
-webview.disabled {
-  opacity: 0;
-}
-
 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,
@@ -348,13 +365,13 @@ webview.focus {
 #reload-tooltip,
 #setting-tooltip {
   font-family: sans-serif;
-  background: rgba(34, 44, 49, 1);
+  background: rgb(34 44 49 / 100%);
   margin-left: 48px;
   padding: 6px 8px;
   position: absolute;
   margin-top: 0;
   z-index: 1000;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
   border-radius: 4px;
   text-align: center;
   width: 55px;
@@ -369,7 +386,7 @@ webview.focus {
   content: " ";
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
-  border-right: 8px solid rgba(34, 44, 49, 1);
+  border-right: 8px solid rgb(34 44 49 / 100%);
   position: absolute;
   top: 7px;
   right: 68px;
@@ -377,14 +394,14 @@ webview.focus {
 
 #add-server-tooltip,
 .server-tooltip {
-  font-family: "arial", sans-serif;
+  font-family: arial, sans-serif;
-  background: rgba(34, 44, 49, 1);
+  background: rgb(34 44 49 / 100%);
   left: 56px;
   padding: 10px 20px;
   position: fixed;
   margin-top: 11px;
   z-index: 5000 !important;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
   border-radius: 4px;
   text-align: center;
   width: max-content;
@@ -396,7 +413,7 @@ webview.focus {
   content: " ";
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
-  border-right: 8px solid rgba(34, 44, 49, 1);
+  border-right: 8px solid rgb(34 44 49 / 100%);
   position: absolute;
   top: 10px;
   left: -5px;
@@ -408,14 +425,14 @@ webview.focus {
   position: absolute;
   width: 24px;
   height: 24px;
-  background: rgba(34, 44, 49, 1);
+  background: rgb(34 44 49 / 100%);
   border-radius: 20px;
   cursor: pointer;
-  box-shadow: rgba(153, 153, 153, 1) 1px 1px;
+  box-shadow: rgb(153 153 153 / 100%) 1px 1px;
 }
 
 #collapse-button i {
-  color: rgba(239, 239, 239, 1);
+  color: rgb(239 239 239 / 100%);
 }
 
 #main-container {
@@ -435,8 +452,8 @@ webview.focus {
 
 .popup .popuptext {
   visibility: hidden;
-  background-color: rgba(85, 85, 85, 1);
+  background-color: rgb(85 85 85 / 100%);
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
   text-align: center;
   border-radius: 6px;
   padding: 9px 0;
@@ -451,11 +468,11 @@ webview.focus {
 
 .popup .show {
   visibility: visible;
-  animation: cssAnimation 0s ease-in 5s forwards;
+  animation: full-screen-popup 0s ease-in 1s forwards;
   animation-fill-mode: forwards;
 }
 
-@keyframes cssAnimation {
+@keyframes full-screen-popup {
   from {
     opacity: 0;
   }
@@ -467,26 +484,3 @@ webview.focus {
     opacity: 1;
   }
 }
-
-send-feedback {
-  width: 60%;
-  height: 85%;
-}
-
-#feedback-modal {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(68, 67, 67, 0.81);
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  transition: all 1s ease-out;
-}
-
-#feedback-modal.show {
-  display: flex;
-}

app/renderer/css/network.css

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

app/renderer/css/preference.css

@@ -1,31 +1,37 @@
-html,
+@import url("@yaireo/tagify/dist/tagify.css");
-body {
+
-  height: 100%;
+:host {
-  margin: 0;
+  contain: strict;
+  display: flow-root;
   cursor: default;
   user-select: none;
   font-family: menu, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: 14px;
-  background: rgba(239, 239, 239, 1);
+  background: rgb(239 239 239 / 100%);
   letter-spacing: -0.08px;
   line-height: 18px;
-  color: rgba(139, 142, 143, 1);
+  color: rgb(139 142 143 / 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 rgba(204, 204, 204, 1);
+  border: 1px solid rgb(204 204 204 / 100%);
   border-radius: 4px;
   font-size: 15px;
-  font-family: Courier New, Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
   font-weight: bold;
   white-space: nowrap;
-  background-color: rgba(247, 247, 247, 1);
+  background-color: rgb(247 247 247 / 100%);
-  color: rgba(51, 51, 51, 1);
+  color: rgb(51 51 51 / 100%);
   margin: 0 0.1em;
   padding: 0.3em 0.8em;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+  text-shadow: 0 1px 0 rgb(255 255 255 / 100%);
   line-height: 1.4;
 }
 
@@ -33,7 +39,7 @@ table,
 th,
 td {
   border-collapse: collapse;
-  color: rgba(56, 52, 48, 1);
+  color: rgb(56 52 48 / 100%);
 }
 
 table {
@@ -51,19 +57,6 @@ td:nth-child(odd) {
   width: 50%;
 }
 
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: local("Material Icons"), local("MaterialIcons-Regular"),
-    url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
-}
-
-@font-face {
-  font-family: "Montserrat";
-  src: url(../fonts/Montserrat-Regular.ttf) format("truetype");
-}
-
 .material-icons {
   font-family: "Material Icons";
   font-weight: normal;
@@ -83,13 +76,13 @@ td:nth-child(odd) {
   -webkit-font-smoothing: antialiased;
 
   /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 #content {
-  display: flex;
+  display: flex !important;
   height: 100%;
-  font-family: "Montserrat", sans-serif;
+  font-family: Montserrat, sans-serif;
 }
 
 #sidebar {
@@ -99,7 +92,7 @@ td:nth-child(odd) {
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  background: rgba(242, 242, 242, 1);
+  background: rgb(242 242 242 / 100%);
 }
 
 #nav-container {
@@ -108,18 +101,18 @@ td:nth-child(odd) {
 
 .nav {
   padding: 7px 0;
-  color: rgba(153, 153, 153, 1);
+  color: rgb(153 153 153 / 100%);
   cursor: pointer;
 }
 
 .nav.active {
-  color: rgba(78, 191, 172, 1);
+  color: rgb(78 191 172 / 100%);
   cursor: default;
   position: relative;
 }
 
 .nav.active::before {
-  background: rgba(70, 78, 90, 1);
+  background: rgb(70 78 90 / 100%);
   width: 3px;
   height: 18px;
   position: absolute;
@@ -129,13 +122,14 @@ td:nth-child(odd) {
 
 /* 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: rgba(34, 44, 49, 1);
+  color: rgb(34 44 49 / 100%);
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -155,19 +149,19 @@ td:nth-child(odd) {
 
 .title {
   font-weight: 500;
-  color: rgba(34, 44, 49, 1);
+  color: rgb(34 44 49 / 100%);
 }
 
 .page-title {
-  color: rgba(34, 44, 49, 1);
+  color: rgb(34 44 49 / 100%);
   font-size: 15px;
   font-weight: bold;
-  padding: 4px 0 6px 0;
+  padding: 4px 0 6px;
 }
 
 .add-server-info-row {
   display: flex;
-  margin: 8px 0 0 0;
+  margin: 8px 0 0;
 }
 
 .add-server-info-right {
@@ -176,9 +170,9 @@ td:nth-child(odd) {
 }
 
 .sub-title {
-  padding: 4px 0 6px 0;
+  padding: 4px 0 6px;
   font-weight: bold;
-  color: rgba(97, 97, 97, 1);
+  color: rgb(97 97 97 / 100%);
 }
 
 img.server-info-icon {
@@ -205,7 +199,7 @@ img.server-info-icon {
 
 .server-info-row {
   display: inline-block;
-  margin: 5px 0 0 0;
+  margin: 5px 0 0;
 }
 
 .server-info-left .server-info-row {
@@ -245,18 +239,18 @@ img.server-info-icon {
   font-size: 14px;
   border-radius: 4px;
   padding: 13px;
-  border: rgba(237, 237, 237, 1) 2px solid;
+  border: rgb(237 237 237 / 100%) 2px solid;
   outline-width: 0;
   background: transparent;
   max-width: 450px;
 }
 
 .setting-input-value:focus {
-  border: rgba(78, 191, 172, 1) 2px solid;
+  border: rgb(78 191 172 / 100%) 2px solid;
 }
 
 .invalid-input-value:focus {
-  border: rgba(239, 83, 80, 1) 2px solid;
+  border: rgb(239 83 80 / 100%) 2px solid;
 }
 
 .manual-proxy-block {
@@ -266,7 +260,7 @@ img.server-info-icon {
 .actions-container {
   display: flex;
   font-size: 14px;
-  color: rgba(35, 93, 58, 1);
+  color: rgb(35 93 58 / 100%);
   vertical-align: middle;
   margin: 10px 0;
   flex-wrap: wrap;
@@ -295,7 +289,7 @@ img.server-info-icon {
 }
 
 .action.disabled {
-  color: rgba(153, 153, 153, 1);
+  color: rgb(153 153 153 / 100%);
 }
 
 .action.disabled:hover {
@@ -306,14 +300,16 @@ img.server-info-icon {
   display: flex;
   flex-wrap: wrap;
   padding: 12px 30px;
-  margin: 10px 0 20px 0;
+  margin: 10px 0 20px;
-  background: rgba(255, 255, 255, 1);
+  background: rgb(255 255 255 / 100%);
   width: 80%;
   transition: all 0.2s;
 }
 
 .settings-card:hover {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 2px 5px 0 rgb(0 0 0 / 16%),
+    0 2px 0 0 rgb(0 0 0 / 12%);
 }
 
 .hidden {
@@ -322,11 +318,11 @@ img.server-info-icon {
 }
 
 .red {
-  color: rgb(240, 148, 148);
+  color: rgb(240 148 148);
-  background: rgba(255, 255, 255, 1);
+  background: rgb(255 255 255 / 100%);
   border-radius: 4px;
   display: inline-block;
-  border: 2px solid rgb(240, 148, 148);
+  border: 2px solid rgb(240 148 148);
   padding: 10px;
   width: 100px;
   cursor: pointer;
@@ -338,13 +334,13 @@ img.server-info-icon {
 }
 
 .red:hover {
-  background-color: rgb(240, 148, 148);
+  background-color: rgb(240 148 148);
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
 }
 
 .green {
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
-  background: rgba(78, 191, 172, 1);
+  background: rgb(78 191 172 / 100%);
   border-radius: 4px;
   display: inline-block;
   border: none;
@@ -359,8 +355,8 @@ img.server-info-icon {
 }
 
 .green:hover {
-  background-color: rgba(60, 159, 141, 1);
+  background-color: rgb(60 159 141 / 100%);
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
 }
 
 .w-150 {
@@ -372,9 +368,9 @@ img.server-info-icon {
 }
 
 .grey {
-  color: rgba(158, 158, 158, 1);
+  color: rgb(158 158 158 / 100%);
-  background: rgba(250, 250, 250, 1);
+  background: rgb(250 250 250 / 100%);
-  border: 1px solid rgba(158, 158, 158, 1);
+  border: 1px solid rgb(158 158 158 / 100%);
 }
 
 .setting-row {
@@ -390,7 +386,7 @@ img.server-info-icon {
 }
 
 .code {
-  font-family: Courier New, Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 i.open-tab-button {
@@ -414,7 +410,7 @@ i.open-tab-button {
 
 .selected-css-path,
 .download-folder-path {
-  background: rgba(238, 238, 238, 1);
+  background: rgb(238 238 238 / 100%);
   padding: 5px 10px;
   margin-right: 10px;
   display: flex;
@@ -431,7 +427,7 @@ i.open-tab-button {
 }
 
 #new-org-button {
-  margin: 30px 0 30px 0;
+  margin: 30px 0;
 }
 
 #create-organization-container {
@@ -463,7 +459,7 @@ i.open-tab-button {
 }
 
 .disallowed:hover {
-  background-color: rgba(241, 241, 241, 1);
+  background-color: rgb(241 241 241 / 100%);
   cursor: not-allowed;
 }
 
@@ -471,7 +467,7 @@ input.toggle-round + label {
   padding: 2px;
   width: 50px;
   height: 25px;
-  background-color: rgba(221, 221, 221, 1);
+  background-color: rgb(221 221 221 / 100%);
   border-radius: 25px;
 }
 
@@ -486,27 +482,21 @@ input.toggle-round + label::after {
 }
 
 input.toggle-round + label::before {
-  background-color: rgba(241, 241, 241, 1);
+  background-color: rgb(241 241 241 / 100%);
   border-radius: 25px;
-  top: 0;
+  inset: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
 }
 
 input.toggle-round + label::after {
   width: 25px;
   height: 25px;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: rgb(255 255 255 / 100%);
   border-radius: 100%;
 }
 
 input.toggle-round:checked + label::before {
-  background-color: rgba(78, 191, 172, 1);
+  background-color: rgb(78 191 172 / 100%);
-  top: 0;
+  inset: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
 }
 
 input.toggle-round:checked + label::after {
@@ -527,17 +517,21 @@ input.toggle-round:checked + label::after {
   height: 100%;
 
   /* background: rgba(61, 64, 67, 15); */
-  background: linear-gradient(35deg, rgba(0, 59, 82, 1), rgba(69, 181, 155, 1));
+  background: linear-gradient(
+    35deg,
+    rgb(0 59 82 / 100%),
+    rgb(69 181 155 / 100%)
+  );
   overflow: auto;
 }
 
 /* Modal Content */
 
 .modal-container {
-  background-color: rgba(244, 247, 248, 1);
+  background-color: rgb(244 247 248 / 100%);
   margin: auto;
   padding: 57px;
-  border: rgba(218, 225, 227, 1) 1px solid;
+  border: rgb(218 225 227 / 100%) 1px solid;
   width: 550px;
   height: 370px;
   border-radius: 4px;
@@ -551,7 +545,7 @@ input.toggle-round:checked + label::after {
 .divider {
   margin-bottom: 30px;
   margin-top: 30px;
-  color: rgba(125, 135, 138, 1);
+  color: rgb(125 135 138 / 100%);
 }
 
 .divider hr {
@@ -582,9 +576,8 @@ input.toggle-round:checked + label::after {
   margin: auto;
   align-items: center;
   text-align: center;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
-  background: rgba(78, 191, 172, 1);
+  background: rgb(78 191 172 / 100%);
-  border-color: none;
   border: none;
   width: 98%;
   height: 46px;
@@ -593,11 +586,11 @@ input.toggle-round:checked + label::after {
 }
 
 .server-center button:hover {
-  background: rgba(50, 149, 136, 1);
+  background: rgb(50 149 136 / 100%);
 }
 
 .server-center button:focus {
-  background: rgba(50, 149, 136, 1);
+  background: rgb(50 149 136 / 100%);
 }
 
 .certificates-card {
@@ -646,7 +639,7 @@ input.toggle-round:checked + label::after {
   padding-top: 15px;
   align-items: center;
   text-align: center;
-  color: rgb(78, 191, 172);
+  color: rgb(78 191 172);
   width: 98%;
   height: 46px;
   cursor: pointer;
@@ -660,7 +653,7 @@ i.open-network-button {
 }
 
 /* responsive grid */
-@media (min-width: 500px) and (max-width: 720px) {
+@media (width >= 500px) and (width <= 720px) {
   #new-server-container {
     padding-left: 0;
     width: 60vw;
@@ -672,7 +665,7 @@ i.open-network-button {
   }
 }
 
-@media (max-width: 500px) {
+@media (width <= 500px) {
   #new-server-container {
     padding-left: 0;
     width: 54%;
@@ -683,7 +676,7 @@ i.open-network-button {
   }
 }
 
-@media (max-width: 650px) {
+@media (width <= 650px) {
   .selected-css-path,
   .download-folder-path {
     margin-right: 15px;
@@ -698,7 +691,7 @@ i.open-network-button {
   }
 }
 
-@media (max-width: 720px) {
+@media (width <= 720px) {
   .modal-container {
     width: 60vw;
     padding: 40px;
@@ -721,7 +714,7 @@ i.open-network-button {
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .divider {
     margin-left: 4%;
   }
@@ -733,7 +726,7 @@ i.open-network-button {
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .settings-card {
     flex-direction: column;
     align-items: center;
@@ -752,18 +745,26 @@ i.open-network-button {
 .lang-menu {
   font-size: 13px;
   font-weight: bold;
-  background: rgba(78, 191, 172, 1);
+  background: rgb(78 191 172 / 100%);
   width: 100px;
   height: 38px;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
-  border-color: rgba(0, 0, 0, 0);
+  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/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

@@ -1,5 +1,4 @@
-import crypto from "crypto";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
-import {clipboard} from "electron";
 
 // This helper is exposed via electron_bridge for use in the social
 // login flow.
@@ -15,7 +14,13 @@ import {clipboard} from "electron";
 // don’t leak anything from the user’s clipboard other than the token
 // intended for us.
 
-export class ClipboardDecrypterImpl implements ClipboardDecrypter {
+export type ClipboardDecrypter = {
+  version: number;
+  key: Uint8Array;
+  pasted: Promise<string>;
+};
+
+export class ClipboardDecrypterImplementation implements ClipboardDecrypter {
   version: number;
   key: Uint8Array;
   pasted: Promise<string>;
@@ -23,7 +28,8 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
   constructor(_: number) {
     // At this time, the only version is 1.
     this.version = 1;
-    this.key = crypto.randomBytes(32);
+    const {key, sig} = ipcRenderer.sendSync("new-clipboard-key");
+    this.key = key;
     this.pasted = new Promise((resolve) => {
       let interval: NodeJS.Timeout | null = null;
       const startPolling = () => {
@@ -31,7 +37,7 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
           interval = setInterval(poll, 1000);
         }
 
-        poll();
+        void poll();
       };
 
       const stopPolling = () => {
@@ -41,30 +47,9 @@ export class ClipboardDecrypterImpl implements ClipboardDecrypter {
         }
       };
 
-      const poll = () => {
+      const poll = async () => {
-        let plaintext;
+        const plaintext = await ipcRenderer.invoke("poll-clipboard", key, sig);
-
+        if (plaintext === undefined) return;
-        try {
-          const data = Buffer.from(clipboard.readText(), "hex");
-          const iv = data.slice(0, 12);
-          const ciphertext = data.slice(12, -16);
-          const authTag = data.slice(-16);
-          const decipher = crypto.createDecipheriv(
-            "aes-256-gcm",
-            this.key,
-            iv,
-            {authTagLength: 16},
-          );
-          decipher.setAuthTag(authTag);
-          plaintext =
-            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;
-        }
 
         window.removeEventListener("focus", startPolling);
         window.removeEventListener("blur", stopPolling);

app/renderer/js/components/base.ts

@@ -1,6 +1,6 @@
-import type {HTML} from "../../../common/html";
+import type {Html} from "../../../common/html.js";
 
-export function generateNodeFromHTML(html: HTML): Element {
+export function generateNodeFromHtml(html: Html): Element {
   const wrapper = document.createElement("div");
   wrapper.innerHTML = html.html;
 

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

@@ -1,18 +1,23 @@
-import type {ContextMenuParams} from "electron";
+import {type Event, clipboard} from "electron/common";
-import {remote} from "electron";
+import type {WebContents} from "electron/main";
+import type {
+  ContextMenuParams,
+  MenuItemConstructorOptions,
+} from "electron/renderer";
+import process from "node:process";
 
-import * as t from "../../../common/translation-util";
+import {Menu} from "@electron/remote";
 
-const {clipboard, Menu} = remote;
+import * as t from "../../../common/translation-util.js";
 
 export const contextMenu = (
-  webContents: Electron.WebContents,
+  webContents: WebContents,
   event: Event,
-  props: ContextMenuParams,
+  properties: ContextMenuParams,
 ) => {
-  const isText = props.selectionText !== "";
+  const isText = properties.selectionText !== "";
-  const isLink = props.linkURL !== "";
+  const isLink = properties.linkURL !== "";
-  const linkURL = isLink ? new URL(props.linkURL) : undefined;
+  const linkUrl = isLink ? new URL(properties.linkURL) : undefined;
 
   const makeSuggestion = (suggestion: string) => ({
     label: suggestion,
@@ -22,22 +27,24 @@ export const contextMenu = (
     },
   });
 
-  let menuTemplate: Electron.MenuItemConstructorOptions[] = [
+  let menuTemplate: MenuItemConstructorOptions[] = [
     {
       label: t.__("Add to Dictionary"),
-      visible: props.isEditable && isText && props.misspelledWord.length > 0,
+      visible:
+        properties.isEditable && isText && properties.misspelledWord.length > 0,
       click(_item) {
         webContents.session.addWordToSpellCheckerDictionary(
-          props.misspelledWord,
+          properties.misspelledWord,
         );
       },
     },
     {
       type: "separator",
-      visible: props.isEditable && isText && props.misspelledWord.length > 0,
+      visible:
+        properties.isEditable && isText && properties.misspelledWord.length > 0,
     },
     {
-      label: `${t.__("Look Up")} "${props.selectionText}"`,
+      label: `${t.__("Look Up")} "${properties.selectionText}"`,
       visible: process.platform === "darwin" && isText,
       click(_item) {
         webContents.showDefinitionForSelection();
@@ -50,7 +57,7 @@ export const contextMenu = (
     {
       label: t.__("Cut"),
       visible: isText,
-      enabled: props.isEditable,
+      enabled: properties.isEditable,
       accelerator: "CommandOrControl+X",
       click(_item) {
         webContents.cut();
@@ -59,7 +66,7 @@ export const contextMenu = (
     {
       label: t.__("Copy"),
       accelerator: "CommandOrControl+C",
-      enabled: props.editFlags.canCopy,
+      enabled: properties.editFlags.canCopy,
       click(_item) {
         webContents.copy();
       },
@@ -67,7 +74,7 @@ export const contextMenu = (
     {
       label: t.__("Paste"), // Bug: Paste replaces text
       accelerator: "CommandOrControl+V",
-      enabled: props.isEditable,
+      enabled: properties.isEditable,
       click() {
         webContents.paste();
       },
@@ -77,38 +84,40 @@ export const contextMenu = (
     },
     {
       label:
-        linkURL?.protocol === "mailto:"
+        linkUrl?.protocol === "mailto:"
           ? t.__("Copy Email Address")
           : t.__("Copy Link"),
       visible: isLink,
       click(_item) {
         clipboard.write({
-          bookmark: props.linkText,
+          bookmark: properties.linkText,
           text:
-            linkURL?.protocol === "mailto:" ? linkURL.pathname : props.linkURL,
+            linkUrl?.protocol === "mailto:"
+              ? linkUrl.pathname
+              : properties.linkURL,
         });
       },
     },
     {
       label: t.__("Copy Image"),
-      visible: props.mediaType === "image",
+      visible: properties.mediaType === "image",
       click(_item) {
-        webContents.copyImageAt(props.x, props.y);
+        webContents.copyImageAt(properties.x, properties.y);
       },
     },
     {
       label: t.__("Copy Image URL"),
-      visible: props.mediaType === "image",
+      visible: properties.mediaType === "image",
       click(_item) {
         clipboard.write({
-          bookmark: props.srcURL,
+          bookmark: properties.srcURL,
-          text: props.srcURL,
+          text: properties.srcURL,
         });
       },
     },
     {
       type: "separator",
-      visible: isLink || props.mediaType === "image",
+      visible: isLink || properties.mediaType === "image",
     },
     {
       label: t.__("Services"),
@@ -117,10 +126,10 @@ export const contextMenu = (
     },
   ];
 
-  if (props.misspelledWord) {
+  if (properties.misspelledWord) {
-    if (props.dictionarySuggestions.length > 0) {
+    if (properties.dictionarySuggestions.length > 0) {
-      const suggestions: Electron.MenuItemConstructorOptions[] =
+      const suggestions: MenuItemConstructorOptions[] =
-        props.dictionarySuggestions.map((suggestion: string) =>
+        properties.dictionarySuggestions.map((suggestion: string) =>
           makeSuggestion(suggestion),
         );
       menuTemplate = [...suggestions, ...menuTemplate];
@@ -132,7 +141,7 @@ export const contextMenu = (
     }
   }
   // Hide the invisible separators on Linux and Windows
-  // Electron has a bug which ignores visible: false parameter for separator menuitems. So we remove them here.
+  // 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
 

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

@@ -1,39 +1,60 @@
-import type {HTML} from "../../../common/html";
+import {type Html, html} from "../../../common/html.js";
-import {html} from "../../../common/html";
+import type {TabPage} from "../../../common/types.js";
 
-import {generateNodeFromHTML} from "./base";
+import {generateNodeFromHtml} from "./base.js";
-import type {TabProps} from "./tab";
+import Tab, {type TabProperties} from "./tab.js";
-import Tab from "./tab";
+
+export type FunctionalTabProperties = {
+  $view: Element;
+  page: TabPage;
+} & TabProperties;
 
 export default class FunctionalTab extends Tab {
+  $view: Element;
   $el: Element;
   $closeButton?: Element;
 
-  constructor(props: TabProps) {
+  constructor({$view, ...properties}: FunctionalTabProperties) {
-    super(props);
+    super(properties);
 
-    this.$el = generateNodeFromHTML(this.templateHTML());
+    this.$view = $view;
-    if (this.props.name !== "Settings") {
+    this.$el = generateNodeFromHtml(this.templateHtml());
-      this.props.$root.append(this.$el);
+    if (properties.page !== "Settings") {
+      this.properties.$root.append(this.$el);
       this.$closeButton = this.$el.querySelector(".server-tab-badge")!;
       this.registerListeners();
     }
   }
 
-  templateHTML(): HTML {
+  override async activate(): Promise<void> {
+    await super.activate();
+    this.$view.classList.add("active");
+  }
+
+  override async deactivate(): Promise<void> {
+    await super.deactivate();
+    this.$view.classList.remove("active");
+  }
+
+  override async destroy(): Promise<void> {
+    await super.destroy();
+    this.$view.remove();
+  }
+
+  templateHtml(): Html {
     return html`
-      <div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
+      <div class="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.props.materialIcon}</i>
+          <i class="material-icons">${this.properties.materialIcon}</i>
         </div>
       </div>
     `;
   }
 
-  registerListeners(): void {
+  override registerListeners(): void {
     super.registerListeners();
 
     this.$el.addEventListener("mouseover", () => {
@@ -44,8 +65,8 @@ export default class FunctionalTab extends Tab {
       this.$closeButton?.classList.remove("active");
     });
 
-    this.$closeButton?.addEventListener("click", (event: Event) => {
+    this.$closeButton?.addEventListener("click", (event) => {
-      this.props.onDestroy?.();
+      this.properties.onDestroy?.();
       event.stopPropagation();
     });
   }

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

@@ -1,72 +0,0 @@
-import {remote} from "electron";
-
-import * as ConfigUtil from "../../../common/config-util";
-import {ipcRenderer} from "../typed-ipc-renderer";
-import * as LinkUtil from "../utils/link-util";
-
-import type WebView from "./webview";
-
-const {shell, app} = remote;
-
-const dingSound = new Audio("../resources/sounds/ding.ogg");
-
-export default function handleExternalLink(
-  this: WebView,
-  event: Electron.NewWindowEvent,
-): void {
-  event.preventDefault();
-
-  const url = new URL(event.url);
-  const downloadPath = ConfigUtil.getConfigItem(
-    "downloadsPath",
-    `${app.getPath("downloads")}`,
-  );
-
-  if (LinkUtil.isUploadsUrl(this.props.url, url)) {
-    ipcRenderer.send("downloadFile", url.href, downloadPath);
-    ipcRenderer.once(
-      "downloadFileCompleted",
-      async (_event: Event, filePath: string, fileName: string) => {
-        const downloadNotification = new Notification("Download Complete", {
-          body: `Click to show ${fileName} in folder`,
-          silent: true, // We'll play our own sound - ding.ogg
-        });
-
-        downloadNotification.addEventListener("click", () => {
-          // Reveal file in download folder
-          shell.showItemInFolder(filePath);
-        });
-        ipcRenderer.removeAllListeners("downloadFileFailed");
-
-        // Play sound to indicate download complete
-        if (!ConfigUtil.getConfigItem("silent", false)) {
-          await dingSound.play();
-        }
-      },
-    );
-
-    ipcRenderer.once("downloadFileFailed", (_event: Event, state: string) => {
-      // Automatic download failed, so show save dialog prompt and download
-      // through webview
-      // Only do this if it is the automatic download, otherwise show an error (so we aren't showing two save
-      // prompts right after each other)
-      // Check that the download is not cancelled by user
-      if (state !== "cancelled") {
-        if (ConfigUtil.getConfigItem("promptDownload", false)) {
-          // We need to create a "new Notification" to display it, but just `Notification(...)` on its own
-          // doesn't work
-          // eslint-disable-next-line no-new
-          new Notification("Download Complete", {
-            body: "Download failed",
-          });
-        } else {
-          this.$el!.downloadURL(url.href);
-        }
-      }
-
-      ipcRenderer.removeAllListeners("downloadFileCompleted");
-    });
-  } else {
-    (async () => LinkUtil.openBrowser(url))();
-  }
-}

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

@@ -1,66 +1,93 @@
-import type {HTML} from "../../../common/html";
+import process from "node:process";
-import {html} from "../../../common/html";
-import {ipcRenderer} from "../typed-ipc-renderer";
-import * as SystemUtil from "../utils/system-util";
 
-import {generateNodeFromHTML} from "./base";
+import {type Html, html} from "../../../common/html.js";
-import type {TabProps} from "./tab";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
-import Tab from "./tab";
+
+import {generateNodeFromHtml} from "./base.js";
+import Tab, {type TabProperties} from "./tab.js";
+import type WebView from "./webview.js";
+
+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(props: TabProps) {
+  constructor({webview, ...properties}: ServerTabProperties) {
-    super(props);
+    super(properties);
 
-    this.$el = generateNodeFromHTML(this.templateHTML());
+    this.webview = webview;
-    this.props.$root.append(this.$el);
+    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")!;
   }
 
-  templateHTML(): HTML {
+  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.props.tabIndex}">
+      <div class="tab" data-tab-id="${this.properties.tabIndex}">
         <div class="server-tooltip" style="display:none">
-          ${this.props.name}
+          ${this.properties.label}
         </div>
         <div class="server-tab-badge"></div>
         <div class="server-tab">
-          <img class="server-icons" src="${this.props.icon}" />
+          <img class="server-icons" src="${this.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 {
-    if (count > 0) {
+    this.$badge.textContent = count > 999 ? "1K+" : count.toString();
-      const formattedCount = count > 999 ? "1K+" : count.toString();
+    this.$badge.classList.toggle("active", count > 0);
-      this.$badge.textContent = formattedCount;
-      this.$badge.classList.add("active");
-    } else {
-      this.$badge.classList.remove("active");
-    }
   }
 
   generateShortcutText(): string {
     // Only provide shortcuts for server [0..9]
-    if (this.props.index >= 9) {
+    if (this.properties.index >= 9) {
       return "";
     }
 
-    const shownIndex = this.props.index + 1;
+    const shownIndex = this.properties.index + 1;
-
-    let shortcutText = "";
-
-    shortcutText =
-      SystemUtil.getOS() === "Mac" ? `⌘ ${shownIndex}` : `Ctrl+${shownIndex}`;
 
     // Array index == Shown index - 1
     ipcRenderer.send("switch-server-tab", shownIndex - 1);
 
-    return shortcutText;
+    return process.platform === "darwin"
+      ? `⌘${shownIndex}`
+      : `Ctrl+${shownIndex}`;
   }
 }

app/renderer/js/components/tab.ts

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

app/renderer/js/components/webview.ts

@@ -1,130 +1,254 @@
-import {remote} from "electron";
+import type {WebContents} from "electron/main";
-import fs from "fs";
+import fs from "node:fs";
-import path from "path";
+import process from "node:process";
 
-import * as ConfigUtil from "../../../common/config-util";
+import * as remote from "@electron/remote";
-import {HTML, html} from "../../../common/html";
+import {app, dialog} from "@electron/remote";
-import type {RendererMessage} from "../../../common/typed-ipc";
-import type {TabRole} from "../../../common/types";
-import {ipcRenderer} from "../typed-ipc-renderer";
-import * as SystemUtil from "../utils/system-util";
 
-import {generateNodeFromHTML} from "./base";
+import * as ConfigUtil from "../../../common/config-util.js";
-import {contextMenu} from "./context-menu";
+import {type Html, html} from "../../../common/html.js";
-import handleExternalLink from "./handle-external-link";
+import * as t from "../../../common/translation-util.js";
+import type {RendererMessage} from "../../../common/typed-ipc.js";
+import type {TabRole} from "../../../common/types.js";
+import preloadCss from "../../css/preload.css?raw";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
+import * as SystemUtil from "../utils/system-util.js";
 
-const {app, dialog} = remote;
+import {generateNodeFromHtml} from "./base.js";
+import {contextMenu} from "./context-menu.js";
 
 const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
 
-interface WebViewProps {
+type WebViewProperties = {
   $root: Element;
+  rootWebContents: WebContents;
   index: number;
   tabIndex: number;
   url: string;
   role: TabRole;
-  name: string;
   isActive: () => boolean;
   switchLoading: (loading: boolean, url: string) => void;
   onNetworkError: (index: number) => void;
-  nodeIntegration: boolean;
+  preload?: string;
-  preload: boolean;
   onTitleChange: () => void;
   hasPermission?: (origin: string, permission: string) => boolean;
-}
+  unsupportedMessage?: string;
+};
 
 export default class WebView {
-  props: WebViewProps;
+  static templateHtml(properties: WebViewProperties): Html {
-  zoomFactor: number;
-  badgeCount: number;
-  loading: boolean;
-  customCSS: string | false | null;
-  $webviewsContainer: DOMTokenList;
-  $el?: Electron.WebviewTag;
-  domReady?: Promise<void>;
-
-  constructor(props: WebViewProps) {
-    this.props = props;
-    this.zoomFactor = 1;
-    this.loading = true;
-    this.badgeCount = 0;
-    this.customCSS = ConfigUtil.getConfigItem("customCSS", null);
-    this.$webviewsContainer = document.querySelector(
-      "#webviews-container",
-    )!.classList;
-  }
-
-  templateHTML(): HTML {
     return html`
-      <webview
+      <div class="webview-pane">
-        class="disabled"
+        <div
-        data-tab-id="${this.props.tabIndex}"
+          class="webview-unsupported"
-        src="${this.props.url}"
+          ${properties.unsupportedMessage === undefined ? html`hidden` : html``}
-        ${new HTML({html: this.props.nodeIntegration ? "nodeIntegration" : ""})}
+        >
-        ${new HTML({html: this.props.preload ? 'preload="js/preload.js"' : ""})}
+          <span class="webview-unsupported-message"
-        partition="persist:webviewsession"
+            >${properties.unsupportedMessage ?? ""}</span
-        name="${this.props.name}"
+          >
-        webpreferences="
+          <span class="webview-unsupported-dismiss">×</span>
-          contextIsolation=${!this.props.nodeIntegration},
+        </div>
-          spellcheck=${Boolean(
+        <webview
-          ConfigUtil.getConfigItem("enableSpellchecker", true),
+          data-tab-id="${properties.tabIndex}"
-        )},
+          src="${properties.url}"
-          worldSafeExecuteJavaScript=true
+          ${properties.preload === undefined
-        "
+            ? html``
-      >
+            : html`preload="${properties.preload}"`}
-      </webview>
+          partition="persist:webviewsession"
+          allowpopups
+        >
+        </webview>
+      </div>
     `;
   }
 
-  init(): void {
+  static async create(properties: WebViewProperties): Promise<WebView> {
-    this.$el = generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
+    const $pane = generateNodeFromHtml(
-    this.domReady = new Promise((resolve) => {
+      WebView.templateHtml(properties),
-      this.$el!.addEventListener(
+    ) as HTMLElement;
-        "dom-ready",
+    properties.$root.append($pane);
+
+    const $webview: HTMLElement = $pane.querySelector(":scope > webview")!;
+    await new Promise<void>((resolve) => {
+      $webview.addEventListener(
+        "did-attach",
         () => {
           resolve();
         },
         true,
       );
     });
-    this.props.$root.append(this.$el);
+
+    // 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();
   }
 
-  registerListeners(): void {
+  destroy(): void {
-    this.$el!.addEventListener("new-window", (event) => {
+    this.$pane.remove();
-      handleExternalLink.call(this, event);
+  }
-    });
+
+  getWebContents(): WebContents {
+    return remote.webContents.fromId(this.webContentsId)!;
+  }
+
+  showNotificationSettings(): void {
+    this.send("show-notification-settings");
+  }
+
+  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");
+  }
+
+  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) {
-      this.$el!.addEventListener("dom-ready", () => {
+      webContents.setAudioMuted(true);
-        this.$el!.setAudioMuted(true);
-      });
     }
 
-    this.$el!.addEventListener("page-title-updated", (event) => {
+    webContents.on("page-title-updated", (_event, title) => {
-      const {title} = event;
       this.badgeCount = this.getBadgeCount(title);
-      this.props.onTitleChange();
+      this.properties.onTitleChange();
     });
 
-    this.$el!.addEventListener("did-navigate-in-page", (event) => {
+    this.$webview.addEventListener("did-navigate-in-page", () => {
-      const isSettingPage = event.url.includes("renderer/preference.html");
-      if (isSettingPage) {
-        return;
-      }
-
       this.canGoBackButton();
     });
 
-    this.$el!.addEventListener("did-navigate", () => {
+    this.$webview.addEventListener("did-navigate", () => {
       this.canGoBackButton();
     });
 
-    this.$el!.addEventListener("page-favicon-updated", (event) => {
+    webContents.on("page-favicon-updated", (_event, favicons) => {
-      const {favicons} = event;
-
       // This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
       // https://chat.zulip.org/static/images/favicon/favicon-pms.png
       if (
@@ -140,206 +264,81 @@ export default class WebView {
       }
     });
 
-    this.$el!.addEventListener("dom-ready", () => {
+    webContents.addListener("context-menu", (event, menuParameters) => {
-      const webContents = remote.webContents.fromId(
+      contextMenu(webContents, event, menuParameters);
-        this.$el!.getWebContentsId(),
-      );
-      webContents.addListener("context-menu", (event, menuParameters) => {
-        contextMenu(webContents, event, menuParameters);
-      });
-
-      if (this.props.role === "server") {
-        this.$el!.classList.add("onload");
-      }
-
-      this.loading = false;
-      this.props.switchLoading(false, this.props.url);
-      this.show();
-
-      // Refocus text boxes after reload
-      // Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
-      this.$el!.blur();
-      this.$el!.focus();
     });
 
-    this.$el!.addEventListener("did-fail-load", (event) => {
+    this.$webview.addEventListener("dom-ready", () => {
-      const {errorDescription} = event;
+      this.loading = false;
+      this.properties.switchLoading(false, this.properties.url);
+      this.show();
+    });
+
+    webContents.on("did-fail-load", (_event, _errorCode, errorDescription) => {
       const hasConnectivityError =
-        SystemUtil.connectivityERR.includes(errorDescription);
+        SystemUtil.connectivityError.includes(errorDescription);
       if (hasConnectivityError) {
         console.error("error", errorDescription);
-        if (!this.props.url.includes("network.html")) {
+        if (!this.properties.url.includes("network.html")) {
-          this.props.onNetworkError(this.props.index);
+          this.properties.onNetworkError(this.properties.index);
         }
       }
     });
 
-    this.$el!.addEventListener("did-start-loading", () => {
+    this.$webview.addEventListener("did-start-loading", () => {
-      const isSettingPage = this.props.url.includes("renderer/preference.html");
+      this.properties.switchLoading(true, this.properties.url);
-      if (!isSettingPage) {
-        this.props.switchLoading(true, this.props.url);
-      }
     });
 
-    this.$el!.addEventListener("did-stop-loading", () => {
+    this.$webview.addEventListener("did-stop-loading", () => {
-      this.props.switchLoading(false, this.props.url);
+      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();
     });
   }
 
-  getBadgeCount(title: string): number {
+  private getBadgeCount(title: string): number {
-    const messageCountInTitle = /\((\d+)\)/.exec(title);
+    const messageCountInTitle = /^\((\d+)\)/.exec(title);
     return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
   }
 
-  async showNotificationSettings(): Promise<void> {
+  private show(): void {
-    await this.send("show-notification-settings");
-  }
-
-  show(): void {
     // Do not show WebView if another tab was selected and this tab should be in background.
-    if (!this.props.isActive()) {
+    if (!this.properties.isActive()) {
       return;
     }
 
-    // To show or hide the loading indicator in the the active tab
+    // To show or hide the loading indicator in the active tab
-    if (this.loading) {
+    this.$webviewsContainer.toggle("loaded", !this.loading);
-      this.$webviewsContainer.remove("loaded");
-    } else {
-      this.$webviewsContainer.add("loaded");
-    }
 
-    this.$el!.classList.remove("disabled");
+    this.$pane.classList.add("active");
-    this.$el!.classList.add("active");
-    setTimeout(() => {
-      if (this.props.role === "server") {
-        this.$el!.classList.remove("onload");
-      }
-    }, 1000);
     this.focus();
-    this.props.onTitleChange();
+    this.properties.onTitleChange();
     // Injecting preload css in webview to override some css rules
-    (async () =>
+    (async () => this.getWebContents().insertCSS(preloadCss))();
-      this.$el!.insertCSS(
-        fs.readFileSync(path.join(__dirname, "/../../css/preload.css"), "utf8"),
-      ))();
 
     // Get customCSS again from config util to avoid warning user again
-    const customCSS = ConfigUtil.getConfigItem("customCSS", null);
+    const customCss = ConfigUtil.getConfigItem("customCSS", null);
-    this.customCSS = customCSS;
+    this.customCss = customCss;
-    if (customCSS) {
+    if (customCss) {
-      if (!fs.existsSync(customCSS)) {
+      if (!fs.existsSync(customCss)) {
-        this.customCSS = null;
+        this.customCss = null;
         ConfigUtil.setConfigItem("customCSS", null);
 
-        const errorMessage = "The custom css previously set is deleted!";
+        const errorMessage = t.__("The custom CSS previously set is deleted.");
-        dialog.showErrorBox("custom css file deleted!", errorMessage);
+        dialog.showErrorBox(t.__("Custom CSS file deleted"), errorMessage);
         return;
       }
 
       (async () =>
-        this.$el!.insertCSS(
+        this.getWebContents().insertCSS(fs.readFileSync(customCss, "utf8")))();
-          fs.readFileSync(path.resolve(__dirname, customCSS), "utf8"),
-        ))();
     }
   }
-
-  focus(): void {
-    // Focus Webview and it's contents when Window regain focus.
-    const webContents = remote.webContents.fromId(this.$el!.getWebContentsId());
-    // HACK: webContents.isFocused() seems to be true even without the element
-    // being in focus. So, we check against `document.activeElement`.
-    if (webContents && this.$el !== document.activeElement) {
-      // HACK: Looks like blur needs to be called on the previously focused
-      // element to transfer focus correctly, in Electron v3.0.10
-      // See https://github.com/electron/electron/issues/15718
-      (document.activeElement as HTMLElement).blur();
-      this.$el!.focus();
-      webContents.focus();
-    }
-  }
-
-  hide(): void {
-    this.$el!.classList.add("disabled");
-    this.$el!.classList.remove("active");
-  }
-
-  load(): void {
-    if (this.$el) {
-      this.show();
-    } else {
-      this.init();
-    }
-  }
-
-  zoomIn(): void {
-    this.zoomFactor += 0.1;
-    this.$el!.setZoomFactor(this.zoomFactor);
-  }
-
-  zoomOut(): void {
-    this.zoomFactor -= 0.1;
-    this.$el!.setZoomFactor(this.zoomFactor);
-  }
-
-  zoomActualSize(): void {
-    this.zoomFactor = 1;
-    this.$el!.setZoomFactor(this.zoomFactor);
-  }
-
-  async logOut(): Promise<void> {
-    await this.send("logout");
-  }
-
-  async showKeyboardShortcuts(): Promise<void> {
-    await this.send("show-keyboard-shortcuts");
-  }
-
-  openDevTools(): void {
-    this.$el!.openDevTools();
-  }
-
-  back(): void {
-    if (this.$el!.canGoBack()) {
-      this.$el!.goBack();
-      this.focus();
-    }
-  }
-
-  canGoBackButton(): void {
-    const $backButton = document.querySelector(
-      "#actions-container #back-action",
-    )!;
-    if (this.$el!.canGoBack()) {
-      $backButton.classList.remove("disable");
-    } else {
-      $backButton.classList.add("disable");
-    }
-  }
-
-  forward(): void {
-    if (this.$el!.canGoForward()) {
-      this.$el!.goForward();
-    }
-  }
-
-  reload(): void {
-    this.hide();
-    // Shows the loading indicator till the webview is reloaded
-    this.$webviewsContainer.remove("loaded");
-    this.loading = true;
-    this.props.switchLoading(true, this.props.url);
-    this.$el!.reload();
-  }
-
-  forceLoad(): void {
-    this.init();
-  }
-
-  async send<Channel extends keyof RendererMessage>(
-    channel: Channel,
-    ...args: Parameters<RendererMessage[Channel]>
-  ): Promise<void> {
-    await this.domReady;
-    ipcRenderer.sendTo(this.$el!.getWebContentsId(), channel, ...args);
-  }
 }

app/renderer/js/electron-bridge.ts

@@ -1,12 +1,30 @@
-import {remote} from "electron";
+import {EventEmitter} from "node:events";
-import {EventEmitter} from "events";
 
-import {ClipboardDecrypterImpl} from "./clipboard-decrypter";
+import {
-import type {NotificationData} from "./notification";
+  type ClipboardDecrypter,
-import {newNotification} from "./notification";
+  ClipboardDecrypterImplementation,
-import {ipcRenderer} from "./typed-ipc-renderer";
+} from "./clipboard-decrypter.js";
+import {type NotificationData, newNotification} from "./notification/index.js";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
 
-type ListenerType = (...args: any[]) => void;
+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
@@ -14,13 +32,14 @@ let idle = false;
 // Indicates the time at which user was last active
 let lastActive = Date.now();
 
-export const bridgeEvents = new EventEmitter();
+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, ...args: unknown[]): boolean =>
+  send_event: (eventName: string | symbol, ...arguments_: unknown[]): boolean =>
-    bridgeEvents.emit(eventName, ...args),
+    bridgeEvents.emit(eventName, ...arguments_),
 
-  on_event: (eventName: string, listener: ListenerType): void => {
+  on_event(eventName: string, listener: ListenerType): void {
     bridgeEvents.on(eventName, listener);
   },
 
@@ -37,13 +56,14 @@ const electron_bridge: ElectronBridge = {
   get_send_notification_reply_message_supported: (): boolean =>
     notificationReplySupported,
 
-  set_send_notification_reply_message_supported: (value: boolean): void => {
+  set_send_notification_reply_message_supported(value: boolean): void {
     notificationReplySupported = value;
   },
 
-  decrypt_clipboard: (version: number): ClipboardDecrypterImpl =>
+  decrypt_clipboard: (version: number): ClipboardDecrypter =>
-    new ClipboardDecrypterImpl(version),
+    new ClipboardDecrypterImplementation(version),
 };
+/* eslint-enable @typescript-eslint/naming-convention */
 
 bridgeEvents.on("total_unread_count", (unreadCount: unknown) => {
   if (typeof unreadCount !== "number") {
@@ -58,45 +78,37 @@ bridgeEvents.on("realm_name", (realmName: unknown) => {
     throw new TypeError("Expected string for realmName");
   }
 
-  const serverURL = location.origin;
+  const serverUrl = location.origin;
-  ipcRenderer.send("realm-name-changed", serverURL, realmName);
+  ipcRenderer.send("realm-name-changed", serverUrl, realmName);
 });
 
-bridgeEvents.on("realm_icon_url", (iconURL: unknown) => {
+bridgeEvents.on("realm_icon_url", (iconUrl: unknown) => {
-  if (typeof iconURL !== "string") {
+  if (typeof iconUrl !== "string") {
-    throw new TypeError("Expected string for iconURL");
+    throw new TypeError("Expected string for iconUrl");
   }
 
-  const serverURL = location.origin;
+  const serverUrl = location.origin;
   ipcRenderer.send(
     "realm-icon-changed",
-    serverURL,
+    serverUrl,
-    iconURL.includes("http") ? iconURL : `${serverURL}${iconURL}`,
+    iconUrl.includes("http") ? iconUrl : `${serverUrl}${iconUrl}`,
   );
 });
 
 // Set user as active and update the time of last activity
 ipcRenderer.on("set-active", () => {
-  if (!remote.app.isPackaged) {
-    console.log("active");
-  }
-
   idle = false;
   lastActive = Date.now();
 });
 
 // Set user as idle and time of last activity is left unchanged
 ipcRenderer.on("set-idle", () => {
-  if (!remote.app.isPackaged) {
-    console.log("idle");
-  }
-
   idle = true;
 });
 
 // This follows node's idiomatic implementation of event
 // emitters to make event handling more simpler instead of using
-// functions zulip side will emit event using ElectronBrigde.send_event
+// functions zulip side will emit event using ElectronBridge.send_event
 // which is alias of .emit and on this side we can handle the data by adding
 // a listener for the event.
 export default electron_bridge;

app/renderer/js/feedback.ts

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

app/renderer/js/injected.ts

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

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

@@ -1,30 +0,0 @@
-import * as ConfigUtil from "../../../common/config-util";
-import {ipcRenderer} from "../typed-ipc-renderer";
-
-import {focusCurrentServer} from "./helpers";
-
-const NativeNotification = window.Notification;
-export default class BaseNotification extends NativeNotification {
-  constructor(title: string, options: NotificationOptions) {
-    options.silent = true;
-    super(title, options);
-
-    this.addEventListener("click", () => {
-      // Focus to the server who sent the
-      // notification if not focused already
-      focusCurrentServer();
-      ipcRenderer.send("focus-app");
-    });
-  }
-
-  static async requestPermission(): Promise<NotificationPermission> {
-    return this.permission;
-  }
-
-  // Override default Notification permission
-  static get permission(): NotificationPermission {
-    return ConfigUtil.getConfigItem("showNotification", true)
-      ? "granted"
-      : "denied";
-  }
-}

app/renderer/js/notification/helpers.ts

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

app/renderer/js/notification/index.ts

@@ -1,49 +1,33 @@
-import {remote} from "electron";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
 
-import DefaultNotification from "./default-notification";
+export type NotificationData = {
-import {appId} from "./helpers";
-
-const {app} = remote;
-
-// From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
-// On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
-app.setAppUserModelId(appId);
-
-export interface NotificationData {
   close: () => void;
   title: string;
   dir: NotificationDirection;
   lang: string;
   body: string;
   tag: string;
-  image: string;
   icon: string;
-  badge: string;
-  vibrate: readonly number[];
-  timestamp: number;
-  renotify: boolean;
-  silent: boolean;
-  requireInteraction: boolean;
   data: unknown;
-  actions: readonly NotificationAction[];
+};
-}
 
 export function newNotification(
   title: string,
   options: NotificationOptions,
   dispatch: (type: string, eventInit: EventInit) => boolean,
 ): NotificationData {
-  const notification = new DefaultNotification(title, options);
+  const notification = new Notification(title, {...options, silent: true});
   for (const type of ["click", "close", "error", "show"]) {
-    notification.addEventListener(type, (ev: Event) => {
+    notification.addEventListener(type, (event) => {
-      if (!dispatch(type, ev)) {
+      if (type === "click") ipcRenderer.send("focus-this-webview");
-        ev.preventDefault();
+      if (!dispatch(type, event)) {
+        event.preventDefault();
       }
     });
   }
 
   return {
-    close: () => {
+    close() {
       notification.close();
     },
     title: notification.title,
@@ -51,15 +35,7 @@ export function newNotification(
     lang: notification.lang,
     body: notification.body,
     tag: notification.tag,
-    image: notification.image,
     icon: notification.icon,
-    badge: notification.badge,
-    vibrate: notification.vibrate,
-    timestamp: notification.timestamp,
-    renotify: notification.renotify,
-    silent: notification.silent,
-    requireInteraction: notification.requireInteraction,
     data: notification.data,
-    actions: notification.actions,
   };
 }

app/renderer/js/pages/about.ts

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

app/renderer/js/pages/network.ts

@@ -1,4 +1,4 @@
-import {ipcRenderer} from "../typed-ipc-renderer";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
 
 export function init(
   $reconnectButton: Element,

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

@@ -1,22 +1,21 @@
-import type {HTML} from "../../../../common/html";
+import {type Html, html} from "../../../../common/html.js";
-import {html} from "../../../../common/html";
+import {generateNodeFromHtml} from "../../components/base.js";
-import {generateNodeFromHTML} from "../../components/base";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
-import {ipcRenderer} from "../../typed-ipc-renderer";
 
-interface BaseSectionProps {
+type BaseSectionProperties = {
   $element: HTMLElement;
   disabled?: boolean;
   value: boolean;
   clickHandler: () => void;
-}
+};
 
-export function generateSettingOption(props: BaseSectionProps): void {
+export function generateSettingOption(properties: BaseSectionProperties): void {
-  const {$element, disabled, value, clickHandler} = props;
+  const {$element, disabled, value, clickHandler} = properties;
 
   $element.textContent = "";
 
-  const $optionControl = generateNodeFromHTML(
+  const $optionControl = generateNodeFromHtml(
-    generateOptionHTML(value, disabled),
+    generateOptionHtml(value, disabled),
   );
   $element.append($optionControl);
 
@@ -25,11 +24,11 @@ export function generateSettingOption(props: BaseSectionProps): void {
   }
 }
 
-export function generateOptionHTML(
+export function generateOptionHtml(
   settingOption: boolean,
   disabled?: boolean,
-): HTML {
+): Html {
-  const labelHTML = disabled
+  const labelHtml = disabled
     ? html`<label
         class="disallowed"
         title="Setting locked by system administrator."
@@ -40,7 +39,7 @@ export function generateOptionHTML(
       <div class="action">
         <div class="switch">
           <input class="toggle toggle-round" type="checkbox" checked disabled />
-          ${labelHTML}
+          ${labelHtml}
         </div>
       </div>
     `;
@@ -50,7 +49,7 @@ export function generateOptionHTML(
     <div class="action">
       <div class="switch">
         <input class="toggle toggle-round" type="checkbox" />
-        ${labelHTML}
+        ${labelHtml}
       </div>
     </div>
   `;
@@ -59,12 +58,12 @@ export function generateOptionHTML(
 /* 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(
+export function generateSelectHtml(
   options: Record<string, string>,
   className?: string,
   idName?: string,
-): HTML {
+): Html {
-  const optionsHTML = html``.join(
+  const optionsHtml = html``.join(
     Object.keys(options).map(
       (key) => html`
         <option name="${key}" value="${key}">${options[key]}</option>
@@ -73,7 +72,7 @@ export function generateSelectHTML(
   );
   return html`
     <select class="${className}" id="${idName}">
-      ${optionsHTML}
+      ${optionsHtml}
     </select>
   `;
 }

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

@@ -1,25 +1,27 @@
-import {html} from "../../../../common/html";
+import {html} from "../../../../common/html.js";
-import * as t from "../../../../common/translation-util";
+import * as t from "../../../../common/translation-util.js";
-import {ipcRenderer} from "../../typed-ipc-renderer";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
-import * as DomainUtil from "../../utils/domain-util";
+import * as DomainUtil from "../../utils/domain-util.js";
 
-import {reloadApp} from "./base-section";
+import {reloadApp} from "./base-section.js";
-import {initFindAccounts} from "./find-accounts";
+import {initFindAccounts} from "./find-accounts.js";
-import {initServerInfoForm} from "./server-info-form";
+import {initServerInfoForm} from "./server-info-form.js";
 
-interface ConnectedOrgSectionProps {
+type ConnectedOrgSectionProperties = {
   $root: Element;
-}
+};
 
-export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
+export function initConnectedOrgSection({
-  props.$root.textContent = "";
+  $root,
+}: ConnectedOrgSectionProperties): void {
+  $root.textContent = "";
 
   const servers = DomainUtil.getDomains();
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane" id="server-settings-pane">
       <div class="page-title">${t.__("Connected organizations")}</div>
       <div class="title" id="existing-servers">
-        ${t.__("All the connected orgnizations will appear here.")}
+        ${t.__("All the connected organizations will appear here.")}
       </div>
       <div id="server-info-container"></div>
       <div id="new-org-button">
@@ -32,17 +34,17 @@ export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
     </div>
   `.html;
 
-  const $serverInfoContainer = document.querySelector(
+  const $serverInfoContainer = $root.querySelector("#server-info-container")!;
-    "#server-info-container",
+  const $existingServers = $root.querySelector("#existing-servers")!;
-  )!;
-  const $existingServers = document.querySelector("#existing-servers")!;
   const $newOrgButton: HTMLButtonElement =
-    document.querySelector("#new-org-button")!;
+    $root.querySelector("#new-org-button")!;
-  const $findAccountsContainer = document.querySelector(
+  const $findAccountsContainer = $root.querySelector(
     "#find-accounts-container",
   )!;
 
-  const noServerText = t.__("All the connected orgnizations will appear here");
+  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 : "";
 

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

@@ -1,11 +1,11 @@
-import {html} from "../../../../common/html";
+import {html} from "../../../../common/html.js";
-import * as t from "../../../../common/translation-util";
+import * as LinkUtil from "../../../../common/link-util.js";
-import {generateNodeFromHTML} from "../../components/base";
+import * as t from "../../../../common/translation-util.js";
-import * as LinkUtil from "../../utils/link-util";
+import {generateNodeFromHtml} from "../../components/base.js";
 
-interface FindAccountsProps {
+type FindAccountsProperties = {
   $root: Element;
-}
+};
 
 async function findAccounts(url: string): Promise<void> {
   if (!url) {
@@ -19,8 +19,8 @@ async function findAccounts(url: string): Promise<void> {
   await LinkUtil.openBrowser(new URL("/accounts/find", url));
 }
 
-export function initFindAccounts(props: FindAccountsProps): void {
+export function initFindAccounts(properties: FindAccountsProperties): void {
-  const $findAccounts = generateNodeFromHTML(html`
+  const $findAccounts = generateNodeFromHtml(html`
     <div class="settings-card certificate-card">
       <div class="certificate-input">
         <div>${t.__("Organization URL")}</div>
@@ -33,7 +33,7 @@ export function initFindAccounts(props: FindAccountsProps): void {
       </div>
     </div>
   `);
-  props.$root.append($findAccounts);
+  properties.$root.append($findAccounts);
   const $findAccountsButton = $findAccounts.querySelector(
     "#find-accounts-button",
   )!;
@@ -58,10 +58,9 @@ export function initFindAccounts(props: FindAccountsProps): void {
   });
 
   $serverUrlField.addEventListener("input", () => {
-    if ($serverUrlField.value) {
+    $serverUrlField.classList.toggle(
-      $serverUrlField.classList.remove("invalid-input-value");
+      "invalid-input-value",
-    } else {
+      $serverUrlField.value === "",
-      $serverUrlField.classList.add("invalid-input-value");
+    );
-    }
   });
 }

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

@@ -1,30 +1,30 @@
-import type {OpenDialogOptions} from "electron";
+import type {OpenDialogOptions} from "electron/renderer";
-import {remote} from "electron";
+import fs from "node:fs";
-import fs from "fs";
+import path from "node:path";
-import path from "path";
+import process from "node:process";
 
+import * as remote from "@electron/remote";
+import {app, dialog, session} from "@electron/remote";
 import Tagify from "@yaireo/tagify";
-import ISO6391 from "iso-639-1";
+import {z} from "zod";
-import * as z from "zod";
 
-import * as ConfigUtil from "../../../../common/config-util";
+import supportedLocales from "../../../../../public/translations/supported-locales.json";
-import * as EnterpriseUtil from "../../../../common/enterprise-util";
+import * as ConfigUtil from "../../../../common/config-util.js";
-import {html} from "../../../../common/html";
+import * as EnterpriseUtil from "../../../../common/enterprise-util.js";
-import * as t from "../../../../common/translation-util";
+import {html} from "../../../../common/html.js";
-import supportedLocales from "../../../../translations/supported-locales.json";
+import * as t from "../../../../common/translation-util.js";
-import {ipcRenderer} from "../../typed-ipc-renderer";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
-import {generateSelectHTML, generateSettingOption} from "./base-section";
+import {generateSelectHtml, generateSettingOption} from "./base-section.js";
 
-const {app, dialog, session} = remote;
 const currentBrowserWindow = remote.getCurrentWindow();
 
-interface GeneralSectionProps {
+type GeneralSectionProperties = {
   $root: Element;
-}
+};
 
-export function initGeneralSection(props: GeneralSectionProps): void {
+export function initGeneralSection({$root}: GeneralSectionProperties): void {
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Appearance")}</div>
       <div id="appearance-option-settings" class="settings-card">
@@ -56,7 +56,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
         </div>
         <div class="setting-row" id="badge-option">
           <div class="setting-description">
-            ${t.__("Show app unread badge")}
+            ${t.__("Show unread count badge on app icon")}
           </div>
           <div class="setting-control"></div>
         </div>
@@ -222,9 +222,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   showDesktopNotification();
   enableSpellchecker();
   minimizeOnStart();
-  addCustomCSS();
+  addCustomCss();
-  showCustomCSSPath();
+  showCustomCssPath();
-  removeCustomCSS();
+  removeCustomCss();
   downloadFolder();
   updateQuitOnCloseOption();
   updatePromptDownloadOption();
@@ -251,9 +251,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateTrayOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#tray-option .setting-control")!,
+      $element: $root.querySelector("#tray-option .setting-control")!,
       value: ConfigUtil.getConfigItem("trayIcon", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("trayIcon", true);
         ConfigUtil.setConfigItem("trayIcon", newValue);
         ipcRenderer.send("forward-message", "toggletray");
@@ -264,9 +264,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateMenubarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#menubar-option .setting-control")!,
+      $element: $root.querySelector("#menubar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("autoHideMenubar", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
         ConfigUtil.setConfigItem("autoHideMenubar", newValue);
         ipcRenderer.send("toggle-menubar", newValue);
@@ -277,9 +277,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateBadgeOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#badge-option .setting-control")!,
+      $element: $root.querySelector("#badge-option .setting-control")!,
       value: ConfigUtil.getConfigItem("badgeOption", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("badgeOption", true);
         ConfigUtil.setConfigItem("badgeOption", newValue);
         ipcRenderer.send("toggle-badge-option", newValue);
@@ -290,9 +290,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateDockBouncing(): void {
     generateSettingOption({
-      $element: document.querySelector("#dock-bounce-option .setting-control")!,
+      $element: $root.querySelector("#dock-bounce-option .setting-control")!,
       value: ConfigUtil.getConfigItem("dockBouncing", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("dockBouncing", true);
         ConfigUtil.setConfigItem("dockBouncing", newValue);
         updateDockBouncing();
@@ -302,11 +302,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateFlashTaskbar(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector("#flash-taskbar-option .setting-control")!,
-        "#flash-taskbar-option .setting-control",
-      )!,
       value: ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem(
           "flashTaskbarOnMessage",
           true,
@@ -319,10 +317,10 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function autoUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#autoupdate-option .setting-control")!,
+      $element: $root.querySelector("#autoupdate-option .setting-control")!,
       disabled: EnterpriseUtil.configItemExists("autoUpdate"),
       value: ConfigUtil.getConfigItem("autoUpdate", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("autoUpdate", true);
         ConfigUtil.setConfigItem("autoUpdate", newValue);
         if (!newValue) {
@@ -337,9 +335,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function betaUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#betaupdate-option .setting-control")!,
+      $element: $root.querySelector("#betaupdate-option .setting-control")!,
       value: ConfigUtil.getConfigItem("betaUpdate", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("betaUpdate", false);
         if (ConfigUtil.getConfigItem("autoUpdate", true)) {
           ConfigUtil.setConfigItem("betaUpdate", newValue);
@@ -351,13 +349,14 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateSilentOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#silent-option .setting-control")!,
+      $element: $root.querySelector("#silent-option .setting-control")!,
       value: ConfigUtil.getConfigItem("silent", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("silent", true);
         ConfigUtil.setConfigItem("silent", newValue);
         updateSilentOption();
-        ipcRenderer.sendTo(
+        ipcRenderer.send(
+          "forward-to",
           currentBrowserWindow.webContents.id,
           "toggle-silent",
           newValue,
@@ -368,11 +367,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function showDesktopNotification(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#show-notification-option .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("showNotification", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("showNotification", true);
         ConfigUtil.setConfigItem("showNotification", newValue);
         showDesktopNotification();
@@ -382,9 +381,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateSidebarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#sidebar-option .setting-control")!,
+      $element: $root.querySelector("#sidebar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("showSidebar", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
         ConfigUtil.setConfigItem("showSidebar", newValue);
         ipcRenderer.send("forward-message", "toggle-sidebar", newValue);
@@ -395,11 +394,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateStartAtLoginOption(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector("#startAtLogin-option .setting-control")!,
-        "#startAtLogin-option .setting-control",
-      )!,
       value: ConfigUtil.getConfigItem("startAtLogin", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("startAtLogin", false);
         ConfigUtil.setConfigItem("startAtLogin", newValue);
         ipcRenderer.send("toggleAutoLauncher", newValue);
@@ -410,9 +407,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateQuitOnCloseOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#quitOnClose-option .setting-control")!,
+      $element: $root.querySelector("#quitOnClose-option .setting-control")!,
       value: ConfigUtil.getConfigItem("quitOnClose", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("quitOnClose", false);
         ConfigUtil.setConfigItem("quitOnClose", newValue);
         updateQuitOnCloseOption();
@@ -422,17 +419,18 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function enableSpellchecker(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#enable-spellchecker-option .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("enableSpellchecker", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("enableSpellchecker", true);
         ConfigUtil.setConfigItem("enableSpellchecker", newValue);
+        ipcRenderer.send("configure-spell-checker");
         enableSpellchecker();
         const spellcheckerLanguageInput: HTMLElement =
-          document.querySelector("#spellcheck-langs")!;
+          $root.querySelector("#spellcheck-langs")!;
-        const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
+        const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
         spellcheckerLanguageInput.style.display =
           spellcheckerLanguageInput.style.display === "none" ? "" : "none";
         spellcheckerNote.style.display =
@@ -443,11 +441,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function enableErrorReporting(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#enable-error-reporting .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("errorReporting", true),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("errorReporting", true);
         ConfigUtil.setConfigItem("errorReporting", newValue);
         enableErrorReporting();
@@ -457,14 +455,13 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   async function customCssDialog(): Promise<void> {
     const showDialogOptions: OpenDialogOptions = {
-      title: "Select file",
+      title: t.__("Select file"),
       properties: ["openFile"],
-      filters: [{name: "CSS file", extensions: ["css"]}],
+      filters: [{name: t.__("CSS file"), extensions: ["css"]}],
     };
 
-    const {filePaths, canceled} = await dialog.showOpenDialog(
+    const {filePaths, canceled} =
-      showDialogOptions,
+      await dialog.showOpenDialog(showDialogOptions);
-    );
     if (!canceled) {
       ConfigUtil.setConfigItem("customCSS", filePaths[0]);
       ipcRenderer.send("forward-message", "hard-reload");
@@ -472,11 +469,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function setLocale(): void {
-    const langDiv: HTMLSelectElement = document.querySelector(".lang-div")!;
+    const langDiv: HTMLSelectElement = $root.querySelector(".lang-div")!;
-    const langListHTML = generateSelectHTML(supportedLocales, "lang-menu");
+    const langListHtml = generateSelectHtml(supportedLocales, "lang-menu");
-    langDiv.innerHTML += langListHTML.html;
+    langDiv.innerHTML += langListHtml.html;
     // `langMenu` is the select-option dropdown menu formed after executing the previous command
-    const langMenu: HTMLSelectElement = document.querySelector(".lang-menu")!;
+    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");
@@ -491,11 +488,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function minimizeOnStart(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector("#start-minimize-option .setting-control")!,
-        "#start-minimize-option .setting-control",
-      )!,
       value: ConfigUtil.getConfigItem("startMinimized", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("startMinimized", false);
         ConfigUtil.setConfigItem("startMinimized", newValue);
         minimizeOnStart();
@@ -503,26 +498,25 @@ export function initGeneralSection(props: GeneralSectionProps): void {
     });
   }
 
-  function addCustomCSS(): void {
+  function addCustomCss(): void {
-    const customCSSButton = document.querySelector(
+    const customCssButton = $root.querySelector(
       "#add-custom-css .custom-css-button",
     )!;
-    customCSSButton.addEventListener("click", async () => {
+    customCssButton.addEventListener("click", async () => {
       await customCssDialog();
     });
   }
 
-  function showCustomCSSPath(): void {
+  function showCustomCssPath(): void {
     if (!ConfigUtil.getConfigItem("customCSS", null)) {
-      const cssPATH: HTMLElement =
+      const cssPath: HTMLElement = $root.querySelector("#remove-custom-css")!;
-        document.querySelector("#remove-custom-css")!;
+      cssPath.style.display = "none";
-      cssPATH.style.display = "none";
     }
   }
 
-  function removeCustomCSS(): void {
+  function removeCustomCss(): void {
-    const removeCSSButton = document.querySelector("#css-delete-action")!;
+    const removeCssButton = $root.querySelector("#css-delete-action")!;
-    removeCSSButton.addEventListener("click", () => {
+    removeCssButton.addEventListener("click", () => {
       ConfigUtil.setConfigItem("customCSS", "");
       ipcRenderer.send("forward-message", "hard-reload");
     });
@@ -530,16 +524,15 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   async function downloadFolderDialog(): Promise<void> {
     const showDialogOptions: OpenDialogOptions = {
-      title: "Select Download Location",
+      title: t.__("Select Download Location"),
       properties: ["openDirectory"],
     };
 
-    const {filePaths, canceled} = await dialog.showOpenDialog(
+    const {filePaths, canceled} =
-      showDialogOptions,
+      await dialog.showOpenDialog(showDialogOptions);
-    );
     if (!canceled) {
       ConfigUtil.setConfigItem("downloadsPath", filePaths[0]);
-      const downloadFolderPath: HTMLElement = document.querySelector(
+      const downloadFolderPath: HTMLElement = $root.querySelector(
         ".download-folder-path",
       )!;
       downloadFolderPath.textContent = filePaths[0];
@@ -547,7 +540,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function downloadFolder(): void {
-    const downloadFolder = document.querySelector(
+    const downloadFolder = $root.querySelector(
       "#download-folder .download-folder-button",
     )!;
     downloadFolder.addEventListener("click", async () => {
@@ -557,9 +550,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updatePromptDownloadOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#prompt-download .setting-control")!,
+      $element: $root.querySelector("#prompt-download .setting-control")!,
       value: ConfigUtil.getConfigItem("promptDownload", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("promptDownload", false);
         ConfigUtil.setConfigItem("promptDownload", newValue);
         updatePromptDownloadOption();
@@ -574,9 +567,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
     const {response} = await dialog.showMessageBox({
       type: "warning",
-      buttons: ["YES", "NO"],
+      buttons: [t.__("Yes"), t.__("No")],
       defaultId: 0,
-      message: "Are you sure?",
+      message: t.__("Are you sure?"),
       detail: clearAppDataMessage,
     });
     if (response === 0) {
@@ -588,7 +581,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function factoryReset(): void {
-    const factoryResetButton = document.querySelector(
+    const factoryResetButton = $root.querySelector(
       "#factory-reset-option .factory-reset-button",
     )!;
     factoryResetButton.addEventListener("click", async () => {
@@ -597,9 +590,9 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function initSpellChecker(): void {
-    // The elctron API is a no-op on macOS and macOS default spellchecker is used.
+    // The Electron API is a no-op on macOS and macOS default spellchecker is used.
     if (process.platform === "darwin") {
-      const note: HTMLElement = document.querySelector("#note")!;
+      const note: HTMLElement = $root.querySelector("#note")!;
       note.append(t.__("On macOS, the OS spellchecker is used."));
       note.append(document.createElement("br"));
       note.append(
@@ -608,45 +601,43 @@ export function initGeneralSection(props: GeneralSectionProps): void {
         ),
       );
     } else {
-      const note: HTMLElement = document.querySelector("#note")!;
+      const note: HTMLElement = $root.querySelector("#note")!;
       note.append(
         t.__("You can select a maximum of 3 languages for spellchecking."),
       );
-      const spellDiv: HTMLElement =
+      const spellDiv: HTMLElement = $root.querySelector("#spellcheck-langs")!;
-        document.querySelector("#spellcheck-langs")!;
       spellDiv.innerHTML += html`
         <div class="setting-description">${t.__("Spellchecker Languages")}</div>
-        <input name="spellcheck" placeholder="Enter Languages" />
+        <div id="spellcheck-langs-value">
+          <input name="spellcheck" placeholder="Enter Languages" />
+        </div>
       `.html;
 
       const availableLanguages = session.fromPartition(
         "persist:webviewsession",
       ).availableSpellCheckerLanguages;
-      let languagePairs: Map<string, string> = new Map();
+      let languagePairs = new Map<string, string>();
       for (const l of availableLanguages) {
-        if (ISO6391.validate(l)) {
+        const locale = new Intl.Locale(l.replaceAll("_", "-"));
-          languagePairs.set(ISO6391.getName(l), l);
+        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);
       }
 
-      // Manually set names for languages not available in ISO6391
-      languagePairs.set("English (AU)", "en-AU");
-      languagePairs.set("English (CA)", "en-CA");
-      languagePairs.set("English (GB)", "en-GB");
-      languagePairs.set("English (US)", "en-US");
-      languagePairs.set("Spanish (Latin America)", "es-419");
-      languagePairs.set("Spanish (Argentina)", "es-AR");
-      languagePairs.set("Spanish (Mexico)", "es-MX");
-      languagePairs.set("Spanish (US)", "es-US");
-      languagePairs.set("Portuguese (Brazil)", "pt-BR");
-      languagePairs.set("Portuguese (Portugal)", "pt-PT");
-      languagePairs.set("Serbo-Croatian", "sh");
-
       languagePairs = new Map(
-        [...languagePairs].sort((a, b) => (a[0] < b[0] ? -1 : 1)),
+        [...languagePairs].sort((a, b) => a[0].localeCompare(b[1])),
       );
 
-      const tagField: HTMLInputElement = document.querySelector(
+      const tagField: HTMLInputElement = $root.querySelector(
         "input[name=spellcheck]",
       )!;
       const tagify = new Tagify(tagField, {
@@ -658,8 +649,20 @@ export function initGeneralSection(props: GeneralSectionProps): void {
           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) ?? []
@@ -672,7 +675,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
       tagField.addEventListener("change", () => {
         if (tagField.value.length === 0) {
           ConfigUtil.setConfigItem("spellcheckerLanguages", []);
-          ipcRenderer.send("set-spellcheck-langs");
+          ipcRenderer.send("configure-spell-checker");
         } else {
           const data: unknown = JSON.parse(tagField.value);
           const spellLangs: string[] = z
@@ -680,7 +683,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
             .parse(data)
             .map((elt) => languagePairs.get(elt.value)!);
           ConfigUtil.setConfigItem("spellcheckerLanguages", spellLangs);
-          ipcRenderer.send("set-spellcheck-langs");
+          ipcRenderer.send("configure-spell-checker");
         }
       });
     }
@@ -688,8 +691,8 @@ export function initGeneralSection(props: GeneralSectionProps): void {
     // Do not display the spellchecker input and note if it is disabled
     if (!ConfigUtil.getConfigItem("enableSpellchecker", true)) {
       const spellcheckerLanguageInput: HTMLElement =
-        document.querySelector("#spellcheck-langs")!;
+        $root.querySelector("#spellcheck-langs")!;
-      const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
+      const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
       spellcheckerLanguageInput.style.display = "none";
       spellcheckerNote.style.display = "none";
     }

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

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

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

@@ -1,16 +1,16 @@
-import * as ConfigUtil from "../../../../common/config-util";
+import * as ConfigUtil from "../../../../common/config-util.js";
-import {html} from "../../../../common/html";
+import {html} from "../../../../common/html.js";
-import * as t from "../../../../common/translation-util";
+import * as t from "../../../../common/translation-util.js";
-import {ipcRenderer} from "../../typed-ipc-renderer";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
-import {generateSettingOption} from "./base-section";
+import {generateSettingOption} from "./base-section.js";
 
-interface NetworkSectionProps {
+type NetworkSectionProperties = {
   $root: Element;
-}
+};
 
-export function initNetworkSection(props: NetworkSectionProps): void {
+export function initNetworkSection({$root}: NetworkSectionProperties): void {
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Proxy")}</div>
       <div id="appearance-option-settings" class="settings-card">
@@ -55,27 +55,27 @@ export function initNetworkSection(props: NetworkSectionProps): void {
     </div>
   `.html;
 
-  const $proxyPAC: HTMLInputElement = document.querySelector(
+  const $proxyPac: HTMLInputElement = $root.querySelector(
     "#proxy-pac-option .setting-input-value",
   )!;
-  const $proxyRules: HTMLInputElement = document.querySelector(
+  const $proxyRules: HTMLInputElement = $root.querySelector(
     "#proxy-rules-option .setting-input-value",
   )!;
-  const $proxyBypass: HTMLInputElement = document.querySelector(
+  const $proxyBypass: HTMLInputElement = $root.querySelector(
     "#proxy-bypass-option .setting-input-value",
   )!;
-  const $proxySaveAction = document.querySelector("#proxy-save-action")!;
+  const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
-  const $manualProxyBlock = props.$root.querySelector(".manual-proxy-block")!;
+  const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
 
   toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
   updateProxyOption();
 
-  $proxyPAC.value = ConfigUtil.getConfigItem("proxyPAC", "");
+  $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("proxyPAC", $proxyPac.value);
     ConfigUtil.setConfigItem("proxyRules", $proxyRules.value);
     ConfigUtil.setConfigItem("proxyBypass", $proxyBypass.value);
 
@@ -83,20 +83,14 @@ export function initNetworkSection(props: NetworkSectionProps): void {
   });
 
   function toggleManualProxySettings(option: boolean): void {
-    if (option) {
+    $manualProxyBlock.classList.toggle("hidden", !option);
-      $manualProxyBlock.classList.remove("hidden");
-    } else {
-      $manualProxyBlock.classList.add("hidden");
-    }
   }
 
   function updateProxyOption(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector("#use-system-settings .setting-control")!,
-        "#use-system-settings .setting-control",
-      )!,
       value: ConfigUtil.getConfigItem("useSystemProxy", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
         const manualProxyValue = ConfigUtil.getConfigItem(
           "useManualProxy",
@@ -118,11 +112,9 @@ export function initNetworkSection(props: NetworkSectionProps): void {
       },
     });
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector("#use-manual-settings .setting-control")!,
-        "#use-manual-settings .setting-control",
-      )!,
       value: ConfigUtil.getConfigItem("useManualProxy", false),
-      clickHandler: () => {
+      clickHandler() {
         const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);
         const systemProxyValue = ConfigUtil.getConfigItem(
           "useSystemProxy",

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

@@ -1,21 +1,22 @@
-import {remote} from "electron";
+import {dialog} from "@electron/remote";
 
-import {html} from "../../../../common/html";
+import {html} from "../../../../common/html.js";
-import * as t from "../../../../common/translation-util";
+import * as LinkUtil from "../../../../common/link-util.js";
-import {generateNodeFromHTML} from "../../components/base";
+import * as t from "../../../../common/translation-util.js";
-import {ipcRenderer} from "../../typed-ipc-renderer";
+import {generateNodeFromHtml} from "../../components/base.js";
-import * as DomainUtil from "../../utils/domain-util";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
-import * as LinkUtil from "../../utils/link-util";
+import * as DomainUtil from "../../utils/domain-util.js";
 
-const {dialog} = remote;
+type NewServerFormProperties = {
-
-interface NewServerFormProps {
   $root: Element;
   onChange: () => void;
-}
+};
 
-export function initNewServerForm(props: NewServerFormProps): void {
+export function initNewServerForm({
-  const $newServerForm = generateNodeFromHTML(html`
+  $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">
@@ -52,17 +53,17 @@ export function initNewServerForm(props: NewServerFormProps): void {
   `);
   const $saveServerButton: HTMLButtonElement =
     $newServerForm.querySelector("#connect")!;
-  props.$root.textContent = "";
+  $root.textContent = "";
-  props.$root.append($newServerForm);
+  $root.append($newServerForm);
   const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
     "input.setting-input-value",
   )!;
 
   async function submitFormHandler(): Promise<void> {
     $saveServerButton.textContent = "Connecting...";
-    let serverConf;
+    let serverConfig;
     try {
-      serverConf = await DomainUtil.checkDomain($newServerUrl.value.trim());
+      serverConfig = await DomainUtil.checkDomain($newServerUrl.value.trim());
     } catch (error: unknown) {
       $saveServerButton.textContent = "Connect";
       await dialog.showMessageBox({
@@ -70,14 +71,14 @@ export function initNewServerForm(props: NewServerFormProps): void {
         message:
           error instanceof Error
             ? `${error.name}: ${error.message}`
-            : "Unknown error",
+            : t.__("Unknown error"),
-        buttons: ["OK"],
+        buttons: [t.__("OK")],
       });
       return;
     }
 
-    await DomainUtil.addDomain(serverConf);
+    await DomainUtil.addDomain(serverConfig);
-    props.onChange();
+    onChange();
   }
 
   $saveServerButton.addEventListener("click", async () => {
@@ -91,14 +92,14 @@ export function initNewServerForm(props: NewServerFormProps): void {
 
   // Open create new org link in default browser
   const link = "https://zulip.com/new/";
-  const externalCreateNewOrgElement = document.querySelector(
+  const externalCreateNewOrgElement = $root.querySelector(
     "#open-create-org-link",
   )!;
   externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });
 
-  const networkSettingsId = document.querySelector(".server-network-option")!;
+  const networkSettingsId = $root.querySelector(".server-network-option")!;
   networkSettingsId.addEventListener("click", () => {
     ipcRenderer.send("forward-message", "open-network-settings");
   });

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

@@ -1,106 +1,144 @@
-import type {DNDSettings} from "../../../../common/dnd-util";
+import type {IpcRendererEvent} from "electron/renderer";
-import type {NavItem} from "../../../../common/types";
+import process from "node:process";
-import {ipcRenderer} from "../../typed-ipc-renderer";
 
-import {initConnectedOrgSection} from "./connected-org-section";
+import type {DndSettings} from "../../../../common/dnd-util.js";
-import {initGeneralSection} from "./general-section";
+import {bundleUrl} from "../../../../common/paths.js";
-import Nav from "./nav";
+import type {NavigationItem} from "../../../../common/types.js";
-import {initNetworkSection} from "./network-section";
+import {ipcRenderer} from "../../typed-ipc-renderer.js";
-import {initServersSection} from "./servers-section";
-import {initShortcutsSection} from "./shortcuts-section";
 
-export function initPreferenceView(): void {
+import {initConnectedOrgSection} from "./connected-org-section.js";
-  const $sidebarContainer = document.querySelector("#sidebar")!;
+import {initGeneralSection} from "./general-section.js";
-  const $settingsContainer = document.querySelector("#settings-container")!;
+import Nav from "./nav.js";
+import {initNetworkSection} from "./network-section.js";
+import {initServersSection} from "./servers-section.js";
+import {initShortcutsSection} from "./shortcuts-section.js";
 
-  const nav = new Nav({
+export class PreferenceView {
-    $root: $sidebarContainer,
+  static async create(): Promise<PreferenceView> {
-    onItemSelected: handleNavigation,
+    return new PreferenceView(
-  });
+      await (
+        await fetch(new URL("app/renderer/preference.html", bundleUrl))
+      ).text(),
+    );
+  }
 
-  const navItem =
+  readonly $view: HTMLElement;
-    nav.navItems.find((navItem) => window.location.hash === `#${navItem}`) ??
+  private readonly $shadow: ShadowRoot;
-    "General";
+  private readonly $settingsContainer: Element;
+  private readonly nav: Nav;
+  private navigationItem: NavigationItem = "General";
 
-  handleNavigation(navItem);
+  private constructor(templateHtml: string) {
+    this.$view = document.createElement("div");
+    this.$shadow = this.$view.attachShadow({mode: "open"});
+    this.$shadow.innerHTML = templateHtml;
 
-  function handleNavigation(navItem: NavItem): void {
+    const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
-    nav.select(navItem);
+    this.$settingsContainer = this.$shadow.querySelector(
-    switch (navItem) {
+      "#settings-container",
-      case "AddServer":
+    )!;
+
+    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: $settingsContainer,
+          $root: this.$settingsContainer,
-        });
-        break;
-
-      case "General":
-        initGeneralSection({
-          $root: $settingsContainer,
-        });
-        break;
-
-      case "Organizations":
-        initConnectedOrgSection({
-          $root: $settingsContainer,
-        });
-        break;
-
-      case "Network":
-        initNetworkSection({
-          $root: $settingsContainer,
-        });
-        break;
-
-      case "Shortcuts": {
-        initShortcutsSection({
-          $root: $settingsContainer,
         });
         break;
       }
 
-      default:
+      case "General": {
-        ((n: never) => n)(navItem);
+        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;
+      }
     }
 
-    window.location.hash = `#${navItem}`;
+    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
-  function handleToggle(elementName: string, state = false): void {
+  private handleToggle(elementName: string, state = false): void {
     const inputSelector = `#${elementName} .action .switch input`;
-    const input: HTMLInputElement = document.querySelector(inputSelector)!;
+    const input: HTMLInputElement = this.$shadow.querySelector(inputSelector)!;
     if (input) {
       input.checked = state;
     }
   }
 
-  ipcRenderer.on("switch-settings-nav", (_event: Event, navItem: NavItem) => {
+  private readonly handleToggleSidebar = (
-    handleNavigation(navItem);
+    _event: IpcRendererEvent,
-  });
+    state: boolean,
+  ) => {
+    this.handleToggle("sidebar-option", state);
+  };
 
-  ipcRenderer.on("toggle-sidebar-setting", (_event: Event, state: boolean) => {
+  private readonly handleToggleMenubar = (
-    handleToggle("sidebar-option", state);
+    _event: IpcRendererEvent,
-  });
+    state: boolean,
+  ) => {
+    this.handleToggle("menubar-option", state);
+  };
 
-  ipcRenderer.on("toggle-menubar-setting", (_event: Event, state: boolean) => {
+  private readonly handleToggleDnd = (
-    handleToggle("menubar-option", state);
+    _event: IpcRendererEvent,
-  });
+    _state: boolean,
+    newSettings: Partial<DndSettings>,
+  ) => {
+    this.handleToggle("show-notification-option", newSettings.showNotification);
+    this.handleToggle("silent-option", newSettings.silent);
 
-  ipcRenderer.on("toggle-tray", (_event: Event, state: boolean) => {
+    if (process.platform === "win32") {
-    handleToggle("tray-option", state);
+      this.handleToggle(
-  });
+        "flash-taskbar-option",
-
+        newSettings.flashTaskbarOnMessage,
-  ipcRenderer.on(
+      );
-    "toggle-dnd",
+    }
-    (_event: Event, _state: boolean, newSettings: Partial<DNDSettings>) => {
+  };
-      handleToggle("show-notification-option", newSettings.showNotification);
-      handleToggle("silent-option", newSettings.silent);
-
-      if (process.platform === "win32") {
-        handleToggle("flash-taskbar-option", newSettings.flashTaskbarOnMessage);
-      }
-    },
-  );
 }
-
-window.addEventListener("load", initPreferenceView);

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

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

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

@@ -1,17 +1,15 @@
-import {html} from "../../../../common/html";
+import {html} from "../../../../common/html.js";
-import * as t from "../../../../common/translation-util";
+import * as t from "../../../../common/translation-util.js";
 
-import {reloadApp} from "./base-section";
+import {reloadApp} from "./base-section.js";
-import {initNewServerForm} from "./new-server-form";
+import {initNewServerForm} from "./new-server-form.js";
 
-interface ServersSectionProps {
+type ServersSectionProperties = {
   $root: Element;
-}
+};
 
-export function initServersSection(props: ServersSectionProps): void {
+export function initServersSection({$root}: ServersSectionProperties): void {
-  props.$root.textContent = "";
+  $root.innerHTML = html`
-
-  props.$root.innerHTML = html`
     <div class="add-server-modal">
       <div class="modal-container">
         <div class="settings-pane" id="server-settings-pane">
@@ -21,7 +19,7 @@ export function initServersSection(props: ServersSectionProps): void {
       </div>
     </div>
   `.html;
-  const $newServerContainer = document.querySelector("#new-server-container")!;
+  const $newServerContainer = $root.querySelector("#new-server-container")!;
 
   initNewServerForm({
     $root: $newServerContainer,

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

@@ -1,16 +1,20 @@
-import {html} from "../../../../common/html";
+import process from "node:process";
-import * as t from "../../../../common/translation-util";
-import * as LinkUtil from "../../utils/link-util";
 
-interface ShortcutsSectionProps {
+import {html} from "../../../../common/html.js";
+import * as LinkUtil from "../../../../common/link-util.js";
+import * as t from "../../../../common/translation-util.js";
+
+type ShortcutsSectionProperties = {
   $root: Element;
-}
+};
 
 // eslint-disable-next-line complexity
-export function initShortcutsSection(props: ShortcutsSectionProps): void {
+export function initShortcutsSection({
+  $root,
+}: ShortcutsSectionProperties): void {
   const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
 
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="settings-card tip">
         <p>
@@ -224,7 +228,7 @@ export function initShortcutsSection(props: ShortcutsSectionProps): void {
 
   const link = "https://zulip.com/help/keyboard-shortcuts";
   const externalCreateNewOrgElement =
-    document.querySelector("#open-hotkeys-link")!;
+    $root.querySelector("#open-hotkeys-link")!;
   externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });

app/renderer/js/preload.ts

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

app/renderer/js/tray.ts

@@ -1,46 +1,52 @@
-import type {NativeImage, WebviewTag} from "electron";
+import {type NativeImage, nativeImage} from "electron/common";
-import {remote} from "electron";
+import type {Tray as ElectronTray} from "electron/main";
-import path from "path";
+import path from "node:path";
+import process from "node:process";
 
-import * as ConfigUtil from "../../common/config-util";
+import {BrowserWindow, Menu, Tray} from "@electron/remote";
-import type {RendererMessage} from "../../common/typed-ipc";
 
-import {ipcRenderer} from "./typed-ipc-renderer";
+import * as ConfigUtil from "../../common/config-util.js";
+import {publicPath} from "../../common/paths.js";
+import type {RendererMessage} from "../../common/typed-ipc.js";
 
-const {Tray, Menu, nativeImage, BrowserWindow} = remote;
+import type {ServerManagerView} from "./main.js";
+import {ipcRenderer} from "./typed-ipc-renderer.js";
 
-let tray: Electron.Tray | null = null;
+let tray: ElectronTray | null = null;
 
-const ICON_DIR = "../../resources/tray";
+const appIcon = path.join(publicPath, "resources/tray/tray");
-
-const TRAY_SUFFIX = "tray";
-
-const APP_ICON = path.join(__dirname, ICON_DIR, TRAY_SUFFIX);
 
 const iconPath = (): string => {
   if (process.platform === "linux") {
-    return APP_ICON + "linux.png";
+    return appIcon + "linux.png";
   }
 
   return (
-    APP_ICON + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
+    appIcon + (process.platform === "win32" ? "win.ico" : "macOSTemplate.png")
   );
 };
 
-const winUnreadTrayIconPath = (): string => APP_ICON + "unread.ico";
+const winUnreadTrayIconPath = (): string => appIcon + "unread.ico";
 
 let unread = 0;
 
 const trayIconSize = (): number => {
   switch (process.platform) {
-    case "darwin":
+    case "darwin": {
       return 20;
-    case "win32":
+    }
+
+    case "win32": {
       return 100;
-    case "linux":
+    }
+
+    case "linux": {
       return 100;
-    default:
+    }
+
+    default: {
       return 80;
+    }
   }
 };
 
@@ -57,45 +63,49 @@ const config = {
   thick: process.platform === "win32",
 };
 
-const renderCanvas = function (arg: number): HTMLCanvasElement {
+const renderCanvas = function (argument: number): HTMLCanvasElement {
-  config.unreadCount = arg;
+  config.unreadCount = argument;
 
-  const SIZE = config.size * config.pixelRatio;
+  const size = config.size * config.pixelRatio;
-  const PADDING = SIZE * 0.05;
+  const padding = size * 0.05;
-  const CENTER = SIZE / 2;
+  const center = size / 2;
-  const HAS_COUNT = config.showUnreadCount && config.unreadCount;
+  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.width = size;
-  canvas.height = SIZE;
+  canvas.height = size;
-  const ctx = canvas.getContext("2d")!;
+  const context = canvas.getContext("2d")!;
 
   // Circle
-  // If (!config.thick || config.thick && HAS_COUNT) {
+  // If (!config.thick || config.thick && hasCount) {
-  ctx.beginPath();
+  context.beginPath();
-  ctx.arc(CENTER, CENTER, SIZE / 2 - PADDING, 0, 2 * Math.PI, false);
+  context.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
-  ctx.fillStyle = backgroundColor;
+  context.fillStyle = backgroundColor;
-  ctx.fill();
+  context.fill();
-  ctx.lineWidth = SIZE / (config.thick ? 10 : 20);
+  context.lineWidth = size / (config.thick ? 10 : 20);
-  ctx.strokeStyle = backgroundColor;
+  context.strokeStyle = backgroundColor;
-  ctx.stroke();
+  context.stroke();
   // Count or Icon
-  if (HAS_COUNT) {
+  if (hasCount) {
-    ctx.fillStyle = color;
+    context.fillStyle = color;
-    ctx.textAlign = "center";
+    context.textAlign = "center";
     if (config.unreadCount > 99) {
-      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.4}px Helvetica`;
+      context.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
-      ctx.fillText("99+", CENTER, CENTER + SIZE * 0.15);
+      context.fillText("99+", center, center + size * 0.15);
     } else if (config.unreadCount < 10) {
-      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.5}px Helvetica`;
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
-      ctx.fillText(String(config.unreadCount), CENTER, CENTER + SIZE * 0.2);
+      context.fillText(String(config.unreadCount), center, center + size * 0.2);
     } else {
-      ctx.font = `${config.thick ? "bold " : ""}${SIZE * 0.5}px Helvetica`;
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
-      ctx.fillText(String(config.unreadCount), CENTER, CENTER + SIZE * 0.15);
+      context.fillText(
+        String(config.unreadCount),
+        center,
+        center + size * 0.15,
+      );
     }
   }
 
@@ -107,12 +117,12 @@ const renderCanvas = function (arg: number): HTMLCanvasElement {
  * @param arg: Unread count
  * @return the native image
  */
-const renderNativeImage = function (arg: number): NativeImage {
+const renderNativeImage = function (argument: number): NativeImage {
   if (process.platform === "win32") {
     return nativeImage.createFromPath(winUnreadTrayIconPath());
   }
 
-  const canvas = renderCanvas(arg);
+  const canvas = renderCanvas(argument);
   const pngData = nativeImage
     .createFromDataURL(canvas.toDataURL("image/png"))
     .toPNG();
@@ -123,7 +133,7 @@ const renderNativeImage = function (arg: number): NativeImage {
 
 function sendAction<Channel extends keyof RendererMessage>(
   channel: Channel,
-  ...args: Parameters<RendererMessage[Channel]>
+  ...arguments_: Parameters<RendererMessage[Channel]>
 ): void {
   const win = BrowserWindow.getAllWindows()[0];
 
@@ -131,7 +141,7 @@ function sendAction<Channel extends keyof RendererMessage>(
     win.restore();
   }
 
-  ipcRenderer.sendTo(win.webContents.id, channel, ...args);
+  ipcRenderer.send("forward-to", win.webContents.id, channel, ...arguments_);
 }
 
 const createTray = function (): void {
@@ -168,70 +178,68 @@ const createTray = function (): void {
   }
 };
 
-ipcRenderer.on("destroytray", (_event: Event) => {
+export function initializeTray(serverManagerView: ServerManagerView) {
-  if (!tray) {
+  ipcRenderer.on("destroytray", () => {
-    return;
+    if (!tray) {
-  }
+      return;
-
-  tray.destroy();
-  if (tray.isDestroyed()) {
-    tray = null;
-  } else {
-    throw new Error("Tray icon not properly destroyed.");
-  }
-});
-
-ipcRenderer.on("tray", (_event: Event, arg: number): void => {
-  if (!tray) {
-    return;
-  }
-
-  // We don't want to create tray from unread messages on macOS since it already has dock badges.
-  if (process.platform === "linux" || process.platform === "win32") {
-    if (arg === 0) {
-      unread = arg;
-      tray.setImage(iconPath());
-      tray.setToolTip("No unread messages");
-    } else {
-      unread = arg;
-      const image = renderNativeImage(arg);
-      tray.setImage(image);
-      tray.setToolTip(`${arg} unread messages`);
     }
-  }
-});
 
-function toggleTray(): void {
-  let state;
-  if (tray) {
-    state = false;
     tray.destroy();
     if (tray.isDestroyed()) {
       tray = null;
+    } else {
+      throw new Error("Tray icon not properly destroyed.");
+    }
+  });
+
+  ipcRenderer.on("tray", (_event, argument: number): void => {
+    if (!tray) {
+      return;
     }
 
-    ConfigUtil.setConfigItem("trayIcon", false);
+    // We don't want to create tray from unread messages on macOS since it already has dock badges.
-  } else {
-    state = true;
-    createTray();
     if (process.platform === "linux" || process.platform === "win32") {
-      const image = renderNativeImage(unread);
+      if (argument === 0) {
-      tray!.setImage(image);
+        unread = argument;
-      tray!.setToolTip(`${unread} unread messages`);
+        tray.setImage(iconPath());
+        tray.setToolTip("No unread messages");
+      } else {
+        unread = argument;
+        const image = renderNativeImage(argument);
+        tray.setImage(image);
+        tray.setToolTip(`${argument} unread messages`);
+      }
+    }
+  });
+
+  function toggleTray(): void {
+    let state;
+    if (tray) {
+      state = false;
+      tray.destroy();
+      if (tray.isDestroyed()) {
+        tray = null;
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", false);
+    } else {
+      state = true;
+      createTray();
+      if (process.platform === "linux" || process.platform === "win32") {
+        const image = renderNativeImage(unread);
+        tray!.setImage(image);
+        tray!.setToolTip(`${unread} unread messages`);
+      }
+
+      ConfigUtil.setConfigItem("trayIcon", true);
     }
 
-    ConfigUtil.setConfigItem("trayIcon", true);
+    serverManagerView.preferenceView?.handleToggleTray(state);
   }
 
-  const selector = "webview:not([class*=disabled])";
+  ipcRenderer.on("toggletray", toggleTray);
-  const webview: WebviewTag = document.querySelector(selector)!;
+
-  ipcRenderer.sendTo(webview.getWebContentsId(), "toggle-tray", state);
+  if (ConfigUtil.getConfigItem("trayIcon", true)) {
+    createTray();
+  }
 }
-
-ipcRenderer.on("toggletray", toggleTray);
-
-if (ConfigUtil.getConfigItem("trayIcon", true)) {
-  createTray();
-}
-
-export {};

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

@@ -1,17 +1,17 @@
-import type {IpcRendererEvent} from "electron";
 import {
+  type IpcRendererEvent,
   ipcRenderer as untypedIpcRenderer, // eslint-disable-line no-restricted-imports
-} from "electron";
+} from "electron/renderer";
 
 import type {
   MainCall,
   MainMessage,
   RendererMessage,
-} from "../../common/typed-ipc";
+} from "../../common/typed-ipc.js";
 
 type RendererListener<Channel extends keyof RendererMessage> =
-  RendererMessage[Channel] extends (...args: infer Args) => void
+  RendererMessage[Channel] extends (...arguments_: infer Arguments) => void
-    ? (event: IpcRendererEvent, ...args: Args) => void
+    ? (event: IpcRendererEvent, ...arguments_: Arguments) => void
     : never;
 
 export const ipcRenderer: {
@@ -23,6 +23,10 @@ export const ipcRenderer: {
     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>,
@@ -31,19 +35,25 @@ export const ipcRenderer: {
   send<Channel extends keyof RendererMessage>(
     channel: "forward-message",
     rendererChannel: Channel,
-    ...args: Parameters<RendererMessage[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,
-    ...args: Parameters<MainMessage[Channel]>
+    ...arguments_: Parameters<MainMessage[Channel]>
   ): void;
   invoke<Channel extends keyof MainCall>(
     channel: Channel,
-    ...args: Parameters<MainCall[Channel]>
+    ...arguments_: Parameters<MainCall[Channel]>
   ): Promise<ReturnType<MainCall[Channel]>>;
   sendSync<Channel extends keyof MainMessage>(
     channel: Channel,
-    ...args: Parameters<MainMessage[Channel]>
+    ...arguments_: Parameters<MainMessage[Channel]>
   ): ReturnType<MainMessage[Channel]>;
   postMessage<Channel extends keyof MainMessage>(
     channel: Channel,
@@ -52,13 +62,8 @@ export const ipcRenderer: {
       : never,
     transfer?: MessagePort[],
   ): void;
-  sendTo<Channel extends keyof RendererMessage>(
-    webContentsId: number,
-    channel: Channel,
-    ...args: Parameters<RendererMessage[Channel]>
-  ): void;
   sendToHost<Channel extends keyof RendererMessage>(
     channel: Channel,
-    ...args: Parameters<RendererMessage[Channel]>
+    ...arguments_: Parameters<RendererMessage[Channel]>
   ): void;
 } = untypedIpcRenderer;

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

@@ -1,70 +1,79 @@
-import {remote} from "electron";
+import fs from "node:fs";
-import fs from "fs";
+import path from "node:path";
-import path from "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";
-import * as z from "zod";
+import {z} from "zod";
 
-import * as EnterpriseUtil from "../../../common/enterprise-util";
+import * as EnterpriseUtil from "../../../common/enterprise-util.js";
-import Logger from "../../../common/logger-util";
+import Logger from "../../../common/logger-util.js";
-import * as Messages from "../../../common/messages";
+import * as Messages from "../../../common/messages.js";
-import type {ServerConf} from "../../../common/types";
+import * as t from "../../../common/translation-util.js";
-import {ipcRenderer} from "../typed-ipc-renderer";
+import type {ServerConfig} from "../../../common/types.js";
-
+import defaultIcon from "../../img/icon.png";
-const {app, dialog} = remote;
+import {ipcRenderer} from "../typed-ipc-renderer.js";
 
 const logger = new Logger({
   file: "domain-util.log",
 });
 
-const defaultIconUrl = "../renderer/img/icon.png";
+// 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 serverConfSchema = z.object({
+const serverConfigSchema = z.object({
-  url: z.string(),
+  url: z.string().url(),
   alias: z.string(),
   icon: z.string(),
+  zulipVersion: z.string().default("unknown"),
+  zulipFeatureLevel: z.number().default(0),
 });
 
-let db!: JsonDB;
+let database!: JsonDB;
 
-reloadDB();
+reloadDatabase();
 
 // Migrate from old schema
 try {
-  const oldDomain = db.getObject<unknown>("/domain");
+  const oldDomain = database.getObject<unknown>("/domain");
   if (typeof oldDomain === "string") {
     (async () => {
       await addDomain({
         alias: "Zulip",
         url: oldDomain,
       });
-      db.delete("/domain");
+      database.delete("/domain");
     })();
   }
 } catch (error: unknown) {
   if (!(error instanceof DataError)) throw error;
 }
 
-export function getDomains(): ServerConf[] {
+export function getDomains(): ServerConfig[] {
-  reloadDB();
+  reloadDatabase();
   try {
-    return serverConfSchema.array().parse(db.getObject<unknown>("/domains"));
+    return serverConfigSchema
+      .array()
+      .parse(database.getObject<unknown>("/domains"));
   } catch (error: unknown) {
     if (!(error instanceof DataError)) throw error;
     return [];
   }
 }
 
-export function getDomain(index: number): ServerConf {
+export function getDomain(index: number): ServerConfig {
-  reloadDB();
+  reloadDatabase();
-  return serverConfSchema.parse(db.getObject<unknown>(`/domains[${index}]`));
+  return serverConfigSchema.parse(
+    database.getObject<unknown>(`/domains[${index}]`),
+  );
 }
 
-export function updateDomain(index: number, server: ServerConf): void {
+export function updateDomain(index: number, server: ServerConfig): void {
-  reloadDB();
+  reloadDatabase();
-  serverConfSchema.parse(server);
+  serverConfigSchema.parse(server);
-  db.push(`/domains[${index}]`, server, true);
+  database.push(`/domains[${index}]`, server, true);
 }
 
 export async function addDomain(server: {
@@ -75,20 +84,20 @@ export async function addDomain(server: {
   if (server.icon) {
     const localIconUrl = await saveServerIcon(server.icon);
     server.icon = localIconUrl;
-    serverConfSchema.parse(server);
+    serverConfigSchema.parse(server);
-    db.push("/domains[]", server, true);
+    database.push("/domains[]", server, true);
-    reloadDB();
+    reloadDatabase();
   } else {
-    server.icon = defaultIconUrl;
+    server.icon = defaultIconSentinel;
-    serverConfSchema.parse(server);
+    serverConfigSchema.parse(server);
-    db.push("/domains[]", server, true);
+    database.push("/domains[]", server, true);
-    reloadDB();
+    reloadDatabase();
   }
 }
 
 export function removeDomains(): void {
-  db.delete("/domains");
+  database.delete("/domains");
-  reloadDB();
+  reloadDatabase();
 }
 
 export function removeDomain(index: number): boolean {
@@ -96,8 +105,8 @@ export function removeDomain(index: number): boolean {
     return false;
   }
 
-  db.delete(`/domains[${index}]`);
+  database.delete(`/domains[${index}]`);
-  reloadDB();
+  reloadDatabase();
   return true;
 }
 
@@ -110,7 +119,7 @@ export function duplicateDomain(domain: string): boolean {
 export async function checkDomain(
   domain: string,
   silent = false,
-): Promise<ServerConf> {
+): Promise<ServerConfig> {
   if (!silent && duplicateDomain(domain)) {
     // Do not check duplicate in silent mode
     throw new Error("This server has been added.");
@@ -125,36 +134,43 @@ export async function checkDomain(
   }
 }
 
-async function getServerSettings(domain: string): Promise<ServerConf> {
+async function getServerSettings(domain: string): Promise<ServerConfig> {
   return ipcRenderer.invoke("get-server-settings", domain);
 }
 
 export async function saveServerIcon(iconURL: string): Promise<string> {
-  return ipcRenderer.invoke("save-server-icon", iconURL);
+  return (
+    (await ipcRenderer.invoke("save-server-icon", iconURL)) ??
+    defaultIconSentinel
+  );
 }
 
 export async function updateSavedServer(
   url: string,
   index: number,
-): Promise<void> {
+): Promise<ServerConfig> {
   // Does not promise successful update
-  const oldIcon = getDomain(index).icon;
+  const serverConfig = getDomain(index);
+  const oldIcon = serverConfig.icon;
   try {
-    const newServerConf = await checkDomain(url, true);
+    const newServerConfig = await checkDomain(url, true);
-    const localIconUrl = await saveServerIcon(newServerConf.icon);
+    const localIconUrl = await saveServerIcon(newServerConfig.icon);
-    if (!oldIcon || localIconUrl !== "../renderer/img/icon.png") {
+    if (!oldIcon || localIconUrl !== defaultIconSentinel) {
-      newServerConf.icon = localIconUrl;
+      newServerConfig.icon = localIconUrl;
-      updateDomain(index, newServerConf);
+      updateDomain(index, newServerConfig);
-      reloadDB();
+      reloadDatabase();
     }
+
+    return newServerConfig;
   } catch (error: unknown) {
     logger.log("Could not update server icon.");
     logger.log(error);
-    logger.reportSentry(error);
+    Sentry.captureException(error);
+    return serverConfig;
   }
 }
 
-function reloadDB(): void {
+function reloadDatabase(): void {
   const domainJsonPath = path.join(
     app.getPath("userData"),
     "config/domain.json",
@@ -166,17 +182,18 @@ function reloadDB(): void {
     if (fs.existsSync(domainJsonPath)) {
       fs.unlinkSync(domainJsonPath);
       dialog.showErrorBox(
-        "Error saving new organization",
+        t.__("Error saving new organization"),
-        "There seems to be error while saving new organization, " +
+        t.__(
-          "you may have to re-add your previous organizations back.",
+          "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);
-      logger.reportSentry(error);
+      Sentry.captureException(error);
     }
   }
 
-  db = new JsonDB(domainJsonPath, true, true);
+  database = new JsonDB(domainJsonPath, true, true);
 }
 
 export function formatUrl(domain: string): string {
@@ -190,3 +207,30 @@ export function formatUrl(domain: string): string {
 
   return `https://${domain}`;
 }
+
+export function getUnsupportedMessage(
+  server: ServerConfig,
+): string | undefined {
+  if (server.zulipFeatureLevel < 65 /* Zulip Server 4.0 */) {
+    const realm = new URL(server.url).hostname;
+    return t.__(
+      "{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app.",
+      {server: realm, version: server.zulipVersion},
+    );
+  }
+
+  return undefined;
+}
+
+export function iconAsUrl(iconPath: string): string {
+  if (iconPath === defaultIconSentinel) return defaultIcon;
+
+  try {
+    return `data:application/octet-stream;base64,${fs.readFileSync(
+      iconPath,
+      "base64",
+    )}`;
+  } catch {
+    return defaultIcon;
+  }
+}

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

@@ -1,23 +1,21 @@
 import * as backoff from "backoff";
 
-import {html} from "../../../common/html";
+import {html} from "../../../common/html.js";
-import Logger from "../../../common/logger-util";
+import Logger from "../../../common/logger-util.js";
-import type WebView from "../components/webview";
+import type WebView from "../components/webview.js";
-import {ipcRenderer} from "../typed-ipc-renderer";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
 
 const logger = new Logger({
   file: "domain-util.log",
 });
 
 export default class ReconnectUtil {
-  webview: WebView;
   url: string;
   alreadyReloaded: boolean;
   fibonacciBackoff: backoff.Backoff;
 
   constructor(webview: WebView) {
-    this.webview = webview;
+    this.url = webview.properties.url;
-    this.url = webview.props.url;
     this.alreadyReloaded = false;
     this.fibonacciBackoff = backoff.fibonacci({
       initialDelay: 5000,

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

@@ -1,8 +1,6 @@
-import os from "os";
+import {ipcRenderer} from "../typed-ipc-renderer.js";
 
-import {ipcRenderer} from "../typed-ipc-renderer";
+export const connectivityError: string[] = [
-
-export const connectivityERR: string[] = [
   "ERR_INTERNET_DISCONNECTED",
   "ERR_PROXY_CONNECTION_FAILED",
   "ERR_CONNECTION_RESET",
@@ -13,27 +11,6 @@ export const connectivityERR: string[] = [
 
 const userAgent = ipcRenderer.sendSync("fetch-user-agent");
 
-export function getOS(): string {
-  const platform = os.platform();
-  if (platform === "darwin") {
-    return "Mac";
-  }
-
-  if (platform === "linux") {
-    return "Linux";
-  }
-
-  if (platform === "win32") {
-    if (Number.parseFloat(os.release()) < 6.2) {
-      return "Windows 7";
-    }
-
-    return "Windows 10";
-  }
-
-  return "";
-}
-
 export function getUserAgent(): string {
   return userAgent;
 }

app/renderer/main.html

@@ -1,65 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="responsive desktop">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
     <meta name="viewport" content="width=device-width" />
     <title>Zulip</title>
-    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+    <link rel="stylesheet" href="css/fonts.css" />
+    <link rel="stylesheet" href="css/main.css" />
   </head>
 
-  <body>
+  <body></body>
-    <div id="content">
-      <div class="popup">
-        <span class="popuptext hidden" id="fullscreen-popup"></span>
-      </div>
-      <div id="sidebar" class="toggle-sidebar">
-        <div id="view-controls-container">
-          <div id="tabs-container"></div>
-          <div id="add-tab" class="tab functional-tab">
-            <div class="server-tab" id="add-action">
-              <i class="material-icons">add</i>
-            </div>
-            <span id="add-server-tooltip" style="display: none"
-              >Add organization</span
-            >
-          </div>
-        </div>
-        <div id="actions-container">
-          <div class="action-button" id="dnd-action">
-            <i class="material-icons md-48">notifications</i>
-            <span id="dnd-tooltip" style="display: none">Do Not Disturb</span>
-          </div>
-          <div class="action-button" id="reload-action">
-            <i class="material-icons md-48">refresh</i>
-            <span id="reload-tooltip" style="display: none">Reload</span>
-          </div>
-          <div class="action-button disable" id="loading-action">
-            <i class="refresh material-icons md-48">loop</i>
-            <span id="loading-tooltip" style="display: none">Loading</span>
-          </div>
-          <div class="action-button disable" id="back-action">
-            <i class="material-icons md-48">arrow_back</i>
-            <span id="back-tooltip" style="display: none">Go Back</span>
-          </div>
-          <div class="action-button" id="settings-action">
-            <i class="material-icons md-48">settings</i>
-            <span id="setting-tooltip" style="display: none">Settings</span>
-          </div>
-        </div>
-      </div>
-      <div id="main-container">
-        <div id="webviews-container"></div>
-      </div>
-    </div>
-
-    <div id="feedback-modal">
-      <send-feedback show-cancel-button="show"></send-feedback>
-    </div>
-  </body>
-
-  <script>
-    // we don't use src='./js/main' in the script tag because
-    // it messes up require module path resolution
-    require("./js/main");
-  </script>
 </html>

app/renderer/network.html

@@ -1,7 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="responsive desktop">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; connect-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'"
+    />
     <meta name="viewport" content="width=device-width" />
     <title>Zulip - Network Troubleshooting</title>
     <link

app/renderer/preference.html

@@ -1,27 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
-<html lang="en" class="responsive desktop">
+<meta charset="UTF-8" />
-  <head>
+<link rel="stylesheet" href="css/fonts.css" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="stylesheet" href="css/preference.css" />
-    <meta name="viewport" content="width=device-width" />
+
-    <title>Zulip - Settings</title>
+<!-- Initially hidden to prevent FOUC -->
-    <link
+<div id="content" hidden>
-      rel="stylesheet"
+  <div id="sidebar"></div>
-      href="css/preference.css"
+  <div id="settings-container"></div>
-      type="text/css"
+</div>
-      media="screen"
-    />
-    <link id="tagify-css" rel="stylesheet" href="data:text/css," />
-  </head>
-  <body>
-    <div id="content">
-      <div id="sidebar"></div>
-      <div id="settings-container"></div>
-    </div>
-  </body>
-  <script>
-    document.querySelector("#tagify-css").href = require.resolve(
-      "@yaireo/tagify/dist/tagify.css",
-    );
-    require("./js/pages/preference/preference.js");
-  </script>
-</html>

app/translations/en.json

@@ -1,119 +0,0 @@
-{
-	"About Zulip": "About Zulip",
-	"Actual Size": "Actual Size",
-	"Add Custom Certificates": "Add Custom Certificates",
-	"Add Organization": "Add Organization",
-	"Add a Zulip organization": "Add a Zulip organization",
-	"Add custom CSS": "Add custom CSS",
-	"Advanced": "Advanced",
-	"All the connected organizations will appear here": "All the connected organizations will appear here",
-	"Always start minimized": "Always start minimized",
-	"App Updates": "App Updates",
-	"Appearance": "Appearance",
-	"Application Shortcuts": "Application Shortcuts",
-	"Are you sure you want to disconnect this organization?": "Are you sure you want to disconnect this organization?",
-	"Auto hide Menu bar": "Auto hide Menu bar",
-	"Auto hide menu bar (Press Alt key to display)": "Auto hide menu bar (Press Alt key to display)",
-	"Back": "Back",
-	"Bounce dock on new private message": "Bounce dock on new private message",
-	"Certificate file": "Certificate file",
-	"Change": "Change",
-	"Check for Updates": "Check for Updates",
-	"Close": "Close",
-	"Connect": "Connect",
-	"Connect to another organization": "Connect to another organization",
-	"Connected organizations": "Connected organizations",
-	"Copy": "Copy",
-	"Copy Zulip URL": "Copy Zulip URL",
-	"Create a new organization": "Create a new organization",
-	"Cut": "Cut",
-	"Default download location": "Default download location",
-	"Delete": "Delete",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "Desktop Notifications",
-	"Desktop Settings": "Desktop Settings",
-	"Disconnect": "Disconnect",
-	"Download App Logs": "Download App Logs",
-	"Edit": "Edit",
-	"Edit Shortcuts": "Edit Shortcuts",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "File",
-	"Find accounts": "Find accounts",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "General",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "Help",
-	"Help Center": "Help Center",
-	"History": "History",
-	"History Shortcuts": "History Shortcuts",
-	"Keyboard Shortcuts": "Keyboard Shortcuts",
-	"Log Out": "Log Out",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "Minimize",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "NO",
-	"Network": "Network",
-	"OR": "OR",
-	"Organization URL": "Organization URL",
-	"Organizations": "Organizations",
-	"Paste": "Paste",
-	"Paste and Match Style": "Paste and Match Style",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Quit",
-	"Quit Zulip": "Quit Zulip",
-	"Redo": "Redo",
-	"Release Notes": "Release Notes",
-	"Reload": "Reload",
-	"Report an Issue": "Report an Issue",
-	"Reset App Data": "Reset App Data",
-	"Reset App Settings": "Reset App Settings",
-	"Reset Application Data": "Reset Application Data",
-	"Save": "Save",
-	"Select All": "Select All",
-	"Settings": "Settings",
-	"Shortcuts": "Shortcuts",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "Show sidebar",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
-	"Tip": "Tip",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "Tools",
-	"Undo": "Undo",
-	"Upload": "Upload",
-	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
-	"View": "View",
-	"View Shortcuts": "View Shortcuts",
-	"Window": "Window",
-	"Window Shortcuts": "Window Shortcuts",
-	"YES": "YES",
-	"Zoom In": "Zoom In",
-	"Zoom Out": "Zoom Out",
-	"Zulip Help": "Zulip Help",
-	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading"
-}

app/translations/es.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "Acerca de Zulip",
-	"Actual Size": "Tamaño actual",
-	"Add Custom Certificates": "Añadir certificados personalizados",
-	"Add Organization": "Añadir organización",
-	"Add a Zulip organization": "Añadir una organización de Zulip",
-	"Add custom CSS": "Añadir CSS personalizado",
-	"Advanced": "Avanzado",
-	"All the connected organizations will appear here": "Todas las organizaciones conectadas aparecerán aquí",
-	"Always start minimized": "Iniciar siempre minimizado",
-	"App Updates": "Actualizaciones de la aplicación",
-	"Appearance": "Apariencia",
-	"Application Shortcuts": "Atajos de la aplicación",
-	"Are you sure you want to disconnect this organization?": "Estas seguro de desconectar esta organización?",
-	"Auto hide Menu bar": "Ocultar la barra de menú automáticamente",
-	"Auto hide menu bar (Press Alt key to display)": "Ocultar la barra de menú automáticamente (mantén tecla Alt para mostrar)",
-	"Back": "Atrás",
-	"Bounce dock on new private message": "Rebotar dock cuando se reciba un nuevo mensaje privado",
-	"Certificate file": "Archivo de certificado",
-	"Change": "Cambiar",
-	"Check for Updates": "Comprobar actualizaciones",
-	"Close": "Cerrar",
-	"Connect": "Conectar",
-	"Connect to another organization": "Conectar a otra organización",
-	"Connected organizations": "Organizaciones conectada",
-	"Copy": "Copiar",
-	"Copy Zulip URL": "Copiar URL de Zulip",
-	"Create a new organization": "Crear una nueva organización",
-	"Cut": "Cortar",
-	"Default download location": "Ubicación por defecto de descargas",
-	"Delete": "Eliminar",
-	"Desktop App Settings": "Ajustes de la aplicación de escritorio",
-	"Desktop Notifications": "Notificaciones de escritorio",
-	"Desktop Settings": "Ajustes de escritorio",
-	"Disconnect": "Desconectar",
-	"Download App Logs": "Descargar registros de la aplicación",
-	"Edit": "Editar",
-	"Edit Shortcuts": "Editar atajos",
-	"Enable auto updates": "Activar actualizaciones automáticas",
-	"Enable error reporting (requires restart)": "Activar reporte de fallos (necesita reinicio)",
-	"Enable spellchecker (requires restart)": "Activar corrector ortográfico (necesita reinicio)",
-	"Factory Reset": "Reinicio de fábrica",
-	"File": "Archivo",
-	"Find accounts": "Encontrar cuentas",
-	"Find accounts by email": "Encontrar cuentas por correo electrónico",
-	"Flash taskbar on new message": "Hacer que la barra de tareas parpadee cuando se reciba un mensaje nuevo",
-	"Forward": "Reenviar",
-	"Functionality": "Funcionalidad",
-	"General": "General",
-	"Get beta updates": "Obtener actualizaciones beta",
-	"Hard Reload": "Recarga forzosa",
-	"Help": "Ayuda",
-	"Help Center": "Centro de ayuda",
-	"History": "Historial",
-	"History Shortcuts": "Atajos del historial",
-	"Keyboard Shortcuts": "Atajos de teclado",
-	"Log Out": "Cerrar sesión",
-	"Log Out of Organization": "Cerrar sesión de organización",
-	"Manual proxy configuration": "Configuración de proxy manual",
-	"Minimize": "Minimizar",
-	"Mute all sounds from Zulip": "Silenciar todos los sonidos de Zulip",
-	"NO": "NO",
-	"Network": "Red",
-	"OR": "O",
-	"Organization URL": "URL de la organización",
-	"Organizations": "Organizaciones",
-	"Paste": "Pegar",
-	"Paste and Match Style": "Pegar y mantener estilo",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Reglas para ignorar proxy",
-	"Proxy rules": "Reglas del proxy",
-	"Quit": "Cerrar",
-	"Quit Zulip": "Cerrar Zulip",
-	"Redo": "Rehacer",
-	"Release Notes": "Notas de la versión",
-	"Reload": "Recargar",
-	"Report an Issue": "Informar de un error",
-	"Save": "Guardar",
-	"Select All": "Seleccionar todo",
-	"Settings": "Ajustes",
-	"Shortcuts": "Atajos de teclado",
-	"Show App Logs": "Mostrar registros de la aplicación",
-	"Show app icon in system tray": "Mostrar un icono de la aplicación en la bandeja del sistema",
-	"Show app unread badge": "Mostrar un globo en el icono si hay mensajes sin leer",
-	"Show desktop notifications": "Mostrar notificaciones de escritorio",
-	"Show downloaded files in file manager": "Mostrar archivos descargados en el explorador",
-	"Show sidebar": "Mostrar barra lateral",
-	"Start app at login": "Lanzar aplicación al inicio",
-	"Switch to Next Organization": "Cambiar a la siguiente organización",
-	"Switch to Previous Organization": "Cambiar a la anterior organización",
-	"These desktop app shortcuts extend the Zulip webapp's": "Estos atajos de la aplicación de escritorio extienden los ya existentes en Zulip",
-	"This will delete all application data including all added accounts and preferences": "Esto borrará todos los datos de la aplicación, incluyendo cuentas añadidas y preferencia",
-	"Tip": "Consej",
-	"Toggle DevTools for Active Tab": "Activar/desactivar herramientas de desarrollador para la pestaña activa",
-	"Toggle DevTools for Zulip App": "Activar/desactivar herramientas de desarrollador para la aplicación de Zulip",
-	"Toggle Do Not Disturb": "Activar/desactivar no molestar",
-	"Toggle Full Screen": "Activar/desactivar pantalla completa",
-	"Toggle Sidebar": "Activar/desactivar barra lateral",
-	"Toggle Tray Icon": "Activar/desactivar icono en bandeja del sistema",
-	"Tools": "Herramientas",
-	"Undo": "Deshacer",
-	"Upload": "Subir",
-	"Use system proxy settings (requires restart)": "Usar ajustes de proxy del sistema (necesita reinicio)",
-	"View": "Ver",
-	"View Shortcuts": "Ver atajos",
-	"Window": "Ventana",
-	"Window Shortcuts": "Atajos de ventana",
-	"YES": "SÍ",
-	"Zoom In": "Aumentar zoom",
-	"Zoom Out": "Reducir zoom",
-	"Zulip Help": "Ayuda sobre Zulip",
-	"keyboard shortcuts": "atajos de teclado",
-	"script": "script",
-	"Quit when the window is closed": "Salir cuando la ventana se cierre",
-	"Ask where to save files before downloading": "Preguntar dónde guardar los archivos antes de descargar",
-	"Services": "Servicios",
-	"Hide": "Ocultar",
-	"Hide Others": "Ocultar otros",
-	"Unhide": "Dejar de ocultar",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "Idioma de la aplicación (requiere reinicio)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reinicia la aplicación, borrando todas las organizaciones, cuentas y certificados conectados.",
-	"On macOS, the OS spellchecker is used.": "En macOS se utiliza la verificación ortográfica del sistema operativo.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Modifica el idioma en Preferencias del sistema → Teclado → Texto → Ortografía.",
-	"Copy Link": "Copiar enlace",
-	"Copy Image": "Copiar imagen",
-	"Copy Image URL": "Copiar URL de la imagen",
-	"No Suggestion Found": "No se encontró ninguna sugerencia",
-	"You can select a maximum of 3 languages for spellchecking.": "Puedes elegir un máximo de 3 idiomas para la verificación ortográfica.",
-	"Spellchecker Languages": "Idiomas de verificación ortográfica",
-	"Add to Dictionary": "Añadir al diccionario",
-	"Look Up": "Consultar"
-}

app/translations/fa.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "درباره Zulip ",
-	"Actual Size": "اندازه واقعی",
-	"Add Custom Certificates": "اضافه کردن مجوز دلخواه",
-	"Add Organization": "اضافه کردن سازمان",
-	"Add a Zulip organization": "اضافه کردن سازمان Zulip",
-	"Add custom CSS": "اضافه کردن CSS دلخواه",
-	"Advanced": "پیشرفته",
-	"All the connected organizations will appear here": "همه سازمان‌های متصل شده اینجا نمایش داده می‌شوند",
-	"Always start minimized": "همواره به صورت کوچک شده اجرا شو",
-	"App Updates": "به‌روزرسانی‌های برنامه",
-	"Appearance": "شمایل",
-	"Application Shortcuts": "میانبرهای برنامه",
-	"Are you sure you want to disconnect this organization?": "آیا از قطع ارتباط از سازمان اطمینان دارید؟",
-	"Auto hide Menu bar": "مخفی‌سازی خودکار نوار منو",
-	"Auto hide menu bar (Press Alt key to display)": "مخفی‌سازی خودکار نوار منو (برای نمایش دکمه Alt را بزنید)",
-	"Back": "عقب",
-	"Bounce dock on new private message": "Bounce dock on new private message",
-	"Certificate file": "فایل مجوز",
-	"Change": "تغییر دادن",
-	"Check for Updates": "بررسی برای به‌روز‌رسانی",
-	"Close": "بستن",
-	"Connect": "اتصال",
-	"Connect to another organization": "اتصال به یک سازمان دیگر",
-	"Connected organizations": "سازمان‌های وصل شده",
-	"Copy": "رونوشت",
-	"Copy Zulip URL": "رونوشت از Zulip URL",
-	"Create a new organization": "ایجاد سازمان جدید",
-	"Cut": "بریدن",
-	"Default download location": "محل پیش‌فرض دانلود",
-	"Delete": "حذف",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "اطلاع‌رسانی‌های دسکتاپ",
-	"Desktop Settings": "تنظیمات دسکتاپ",
-	"Disconnect": "Disconnect",
-	"Download App Logs": "Download App Logs",
-	"Edit": "ویرایش",
-	"Edit Shortcuts": "ویرایش میانبرها",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "فایل",
-	"Find accounts": "پیدا کردن حساب های کاربری ",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "عمومی",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "کمک",
-	"Help Center": "مرکز کمک",
-	"History": "تاریخچه ",
-	"History Shortcuts": "تاریخچه میانبرها",
-	"Keyboard Shortcuts": "میانبرهای صفحه‌کلید",
-	"Log Out": "خروج",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "Minimize",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "NO",
-	"Network": "Network",
-	"OR": "یا",
-	"Organization URL": "URL سازمان",
-	"Organizations": "Organizations",
-	"Paste": "Paste",
-	"Paste and Match Style": "Paste and Match Style",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Quit",
-	"Quit Zulip": "Quit Zulip",
-	"Redo": "Redo",
-	"Release Notes": "Release Notes",
-	"Reload": "Reload",
-	"Report an Issue": "Report an Issue",
-	"Save": "ذخیره",
-	"Select All": "Select All",
-	"Settings": "تنظیمات",
-	"Shortcuts": "Shortcuts",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "Show sidebar",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
-	"Tip": "Tip",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "Tools",
-	"Undo": "Undo",
-	"Upload": "Upload",
-	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
-	"View": "View",
-	"View Shortcuts": "View Shortcuts",
-	"Window": "Window",
-	"Window Shortcuts": "Window Shortcuts",
-	"YES": "YES",
-	"Zoom In": "Zoom In",
-	"Zoom Out": "Zoom Out",
-	"Zulip Help": "Zulip Help",
-	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/fi.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "Tietoa Zulipista",
-	"Actual Size": "Varsinainen koko",
-	"Add Custom Certificates": "Lisää omia sertifikaatteja",
-	"Add Organization": "Lisää organisaatio",
-	"Add a Zulip organization": "Lisää Zulip-organisaatio",
-	"Add custom CSS": "Lisää oma CSS",
-	"Advanced": "Edistynyt",
-	"All the connected organizations will appear here": "All the connected organizations will appear here",
-	"Always start minimized": "Aloita aina pienennettynä",
-	"App Updates": "Sovellspäivitykset",
-	"Appearance": "Ulkonäkö",
-	"Application Shortcuts": "Sovellusoikotiet",
-	"Are you sure you want to disconnect this organization?": "Are you sure you want to disconnect this organization?",
-	"Auto hide Menu bar": "Auto hide Menu bar",
-	"Auto hide menu bar (Press Alt key to display)": "Auto hide menu bar (Press Alt key to display)",
-	"Back": "Back",
-	"Bounce dock on new private message": "Bounce dock on new private message",
-	"Certificate file": "Certificate file",
-	"Change": "Muuta",
-	"Check for Updates": "Check for Updates",
-	"Close": "Sulje",
-	"Connect": "Yhdistä",
-	"Connect to another organization": "Connect to another organization",
-	"Connected organizations": "Connected organizations",
-	"Copy": "Kopioi",
-	"Copy Zulip URL": "Kopioi Zulip-URL",
-	"Create a new organization": "Luo uusi organisaatio",
-	"Cut": "Leikkaa",
-	"Default download location": "Default download location",
-	"Delete": "Poista",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "Desktop Notifications",
-	"Desktop Settings": "Desktop Settings",
-	"Disconnect": "Katkaise",
-	"Download App Logs": "Download App Logs",
-	"Edit": "Muokkaa",
-	"Edit Shortcuts": "Edit Shortcuts",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "Tiedosto",
-	"Find accounts": "Löydä tilit",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "General",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "Ohje",
-	"Help Center": "Tukikeskus",
-	"History": "History",
-	"History Shortcuts": "History Shortcuts",
-	"Keyboard Shortcuts": "Keyboard Shortcuts",
-	"Log Out": "Log Out",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "Minimize",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "EI",
-	"Network": "Network",
-	"OR": "TAI",
-	"Organization URL": "Organisaation URL",
-	"Organizations": "Organisaatiot",
-	"Paste": "Liitä",
-	"Paste and Match Style": "Liitä ja täsmää tyylit",
-	"Proxy": "Välipalvelin",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Lopeta",
-	"Quit Zulip": "Lopeta Zulip",
-	"Redo": "Toista",
-	"Release Notes": "Release Notes",
-	"Reload": "Lataa uudelleen",
-	"Report an Issue": "Report an Issue",
-	"Save": "Tallenna",
-	"Select All": "Valitse kaikki",
-	"Settings": "Asetukset",
-	"Shortcuts": "Oikopolut",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "Show sidebar",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
-	"Tip": "Vinkki",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "Työkalut",
-	"Undo": "Peru",
-	"Upload": "Upload",
-	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
-	"View": "Näytä",
-	"View Shortcuts": "View Shortcuts",
-	"Window": "Ikkuna",
-	"Window Shortcuts": "Window Shortcuts",
-	"YES": "KYLLÄ",
-	"Zoom In": "Zoom In",
-	"Zoom Out": "Zoom Out",
-	"Zulip Help": "Zulip Help",
-	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/ko.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "Zulip에 대해",
-	"Actual Size": "실제 크기",
-	"Add Custom Certificates": "사용자 지정 인증서 추가",
-	"Add Organization": "조직 추가",
-	"Add a Zulip organization": "새로운 Zulip 조직 추가",
-	"Add custom CSS": "맞춤 CSS 추가",
-	"Advanced": "많은",
-	"All the connected organizations will appear here": "연결된 모든 조직이 여기에 표시됩니다.",
-	"Always start minimized": "항상 최소화 된 상태로 시작하십시오.",
-	"App Updates": "앱 업데이트",
-	"Appearance": "외관",
-	"Application Shortcuts": "애플리케이션 단축키",
-	"Are you sure you want to disconnect this organization?": "이 조직의 연결을 해제 하시겠습니까?",
-	"Auto hide Menu bar": "메뉴 바 자동 숨기기",
-	"Auto hide menu bar (Press Alt key to display)": "메뉴 바 자동 숨기기 (표시하려면 Alt 키를 누릅니다)",
-	"Back": "뒤로가기",
-	"Bounce dock on new private message": "새로운 비공개 메시지에 바운스 독",
-	"Certificate file": "인증서 파일",
-	"Change": "변화",
-	"Check for Updates": "업데이트 확인",
-	"Close": "닫기",
-	"Connect": "잇다",
-	"Connect to another organization": "다른 조직에 연결",
-	"Connected organizations": "연결된 조직",
-	"Copy": "복사",
-	"Copy Zulip URL": "Zulip URL 복사",
-	"Create a new organization": "새 조직 만들기",
-	"Cut": "절단",
-	"Default download location": "기본 다운로드 위치",
-	"Delete": "삭제",
-	"Desktop App Settings": "데스크톱 앱 설정",
-	"Desktop Notifications": "데스크톱 알림",
-	"Desktop Settings": "데스크톱 설정",
-	"Disconnect": "연결 끊기",
-	"Download App Logs": "앱 로그 다운로드",
-	"Edit": "편집하다",
-	"Edit Shortcuts": "바로 가기 편집",
-	"Enable auto updates": "자동 업데이트 사용",
-	"Enable error reporting (requires restart)": "오류보고 사용 (재시작 필요)",
-	"Enable spellchecker (requires restart)": "맞춤법 검사기 사용 (재시작 필요)",
-	"Factory Reset": "공장 초기화",
-	"File": "파일",
-	"Find accounts": "계정 찾기",
-	"Find accounts by email": "이메일을 통한 계정 찾기",
-	"Flash taskbar on new message": "새 메시지의 Flash 작업 표시 줄",
-	"Forward": "앞으로",
-	"Functionality": "기능",
-	"General": "일반",
-	"Get beta updates": "베타 업데이트 받기",
-	"Hard Reload": "하드 다시로드",
-	"Help": "도움",
-	"Help Center": "지원 센터",
-	"History": "역사",
-	"History Shortcuts": "연혁 단축키",
-	"Keyboard Shortcuts": "키보드 단축키",
-	"Log Out": "로그 아웃",
-	"Log Out of Organization": "조직에서 로그 아웃",
-	"Manual proxy configuration": "수동 프록시 구성",
-	"Minimize": "최소화",
-	"Mute all sounds from Zulip": "튤립에서 모든 소리를 음소거합니다.",
-	"NO": "아니",
-	"Network": "회로망",
-	"OR": "또는",
-	"Organization URL": "조직 URL",
-	"Organizations": "단체",
-	"Paste": "붙여넣기",
-	"Paste and Match Style": "붙여 넣기 및 스타일 일치",
-	"Proxy": "대리",
-	"Proxy bypass rules": "프록시 우회 규칙",
-	"Proxy rules": "프록시 규칙",
-	"Quit": "떠나다",
-	"Quit Zulip": "Zulip 을 종료하십시오.",
-	"Redo": "다시 하다",
-	"Release Notes": "릴리즈 노트",
-	"Reload": "다시로드",
-	"Report an Issue": "문제 신고",
-	"Save": "구하다",
-	"Select All": "모두 선택",
-	"Settings": "설정",
-	"Shortcuts": "바로 가기",
-	"Show App Logs": "앱 로그 보기",
-	"Show app icon in system tray": "시스템 트레이에 앱 아이콘 표시",
-	"Show app unread badge": "앱에 읽지 않은 배지 표시",
-	"Show desktop notifications": "바탕 화면 알림 표시",
-	"Show downloaded files in file manager": "파일 관리자에서 다운로드 한 파일 표시",
-	"Show sidebar": "사이드 바 표시",
-	"Start app at login": "로그인시 앱 시작",
-	"Switch to Next Organization": "다음 조직으로 전환",
-	"Switch to Previous Organization": "이전 조직으로 전환",
-	"These desktop app shortcuts extend the Zulip webapp's": "이러한 데스크톱 앱 바로 가기는 Zulip 웹 앱을 확장합니다.",
-	"This will delete all application data including all added accounts and preferences": "이렇게하면 추가 된 모든 계정 및 환경 설정을 포함한 모든 응용 프로그램 데이터가 삭제됩니다.",
-	"Tip": "팁",
-	"Toggle DevTools for Active Tab": "DevTools for Active Tab 토글",
-	"Toggle DevTools for Zulip App": "Zulip App 용 DevTools 토글",
-	"Toggle Do Not Disturb": "방해 금지 전환",
-	"Toggle Full Screen": "전체 화면 토글",
-	"Toggle Sidebar": "사이드 바 전환",
-	"Toggle Tray Icon": "트레이 아이콘 토글",
-	"Tools": "도구들",
-	"Undo": "끄르다",
-	"Upload": "업로드",
-	"Use system proxy settings (requires restart)": "시스템 프록시 설정 사용 (다시 시작해야 함)",
-	"View": "전망",
-	"View Shortcuts": "바로 가기보기",
-	"Window": "창문",
-	"Window Shortcuts": "창 바로 가기",
-	"YES": "예",
-	"Zoom In": "확대",
-	"Zoom Out": "축소",
-	"Zulip Help": "Zulip 도움말",
-	"keyboard shortcuts": "키보드 단축키",
-	"script": "스크립트",
-	"Quit when the window is closed": "윈도우가 닫히면 종료",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/pt.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "Sobre o Zulip",
-	"Actual Size": "Tamanho atual",
-	"Add Custom Certificates": "Adicionar certificados personalizados",
-	"Add Organization": "Adicionar Organização",
-	"Add a Zulip organization": "Adicione uma organização Zulip",
-	"Add custom CSS": "Adicionar CSS personalizado",
-	"Advanced": "Avançado",
-	"All the connected organizations will appear here": "Todas as organizações conectadas aparecerão aqui",
-	"Always start minimized": "Começar sempre minimizado",
-	"App Updates": "Atualizações de aplicativos",
-	"Appearance": "Aparência",
-	"Application Shortcuts": "Atalhos de aplicativos",
-	"Are you sure you want to disconnect this organization?": "Tem certeza de que deseja desconectar essa organização?",
-	"Auto hide Menu bar": "Auto ocultar barra de Menu",
-	"Auto hide menu bar (Press Alt key to display)": "Ocultar barra de menu automaticamente (pressione a tecla Alt para exibir)",
-	"Back": "De volta",
-	"Bounce dock on new private message": "Bounce doca em nova mensagem privada",
-	"Certificate file": "Arquivo de certificado",
-	"Change": "mudança",
-	"Check for Updates": "Verificar se há atualizações",
-	"Close": "Fechar",
-	"Connect": "Conectar",
-	"Connect to another organization": "Conecte-se a outra organização",
-	"Connected organizations": "Organizações conectadas",
-	"Copy": "Copiar",
-	"Copy Zulip URL": "Copiar URL do Zulip",
-	"Create a new organization": "Crie uma nova organização",
-	"Cut": "Cortar",
-	"Default download location": "Local de download padrão",
-	"Delete": "Excluir",
-	"Desktop App Settings": "Configurações do aplicativo de desktop",
-	"Desktop Notifications": "Notificações da área de trabalho",
-	"Desktop Settings": "Configurações da área de trabalho",
-	"Disconnect": "desconectar",
-	"Download App Logs": "Download de registros de aplicativos",
-	"Edit": "Editar",
-	"Edit Shortcuts": "Editar atalhos",
-	"Enable auto updates": "Ativar atualizações automáticas",
-	"Enable error reporting (requires restart)": "Ativar relatório de erros (requer reinicialização)",
-	"Enable spellchecker (requires restart)": "Ativar verificação ortográfica (requer reinicialização)",
-	"Factory Reset": "Restauração de fábrica",
-	"File": "Arquivo",
-	"Find accounts": "Encontrar contas",
-	"Find accounts by email": "Encontre contas por email",
-	"Flash taskbar on new message": "Barra de tarefas em Flash na nova mensagem",
-	"Forward": "frente",
-	"Functionality": "Funcionalidade",
-	"General": "Geral",
-	"Get beta updates": "Receba atualizações beta",
-	"Hard Reload": "Hard Reload",
-	"Help": "Socorro",
-	"Help Center": "Centro de ajuda",
-	"History": "História",
-	"History Shortcuts": "Atalhos da História",
-	"Keyboard Shortcuts": "Atalhos do teclado",
-	"Log Out": "Sair",
-	"Log Out of Organization": "Sair da organização",
-	"Manual proxy configuration": "Configuração manual de proxy",
-	"Minimize": "Minimizar",
-	"Mute all sounds from Zulip": "Silencie todos os sons de Zulip",
-	"NO": "NÃO",
-	"Network": "Rede",
-	"OR": "OU",
-	"Organization URL": "URL da organização",
-	"Organizations": "Organizações",
-	"Paste": "Colar",
-	"Paste and Match Style": "Colar e combinar estilo",
-	"Proxy": "Procuração",
-	"Proxy bypass rules": "Regras de desvio de proxy",
-	"Proxy rules": "Regras de proxy",
-	"Quit": "Sair",
-	"Quit Zulip": "Saia de Zulip",
-	"Redo": "Refazer",
-	"Release Notes": "Notas de Lançamento",
-	"Reload": "recarregar",
-	"Report an Issue": "Comunicar um problema",
-	"Save": "Salve ",
-	"Select All": "Selecionar tudo",
-	"Settings": "Configurações",
-	"Shortcuts": "Atalhos",
-	"Show App Logs": "Mostrar registros do aplicativo",
-	"Show app icon in system tray": "Mostrar ícone do aplicativo na bandeja do sistema",
-	"Show app unread badge": "Mostrar crachá não lido do aplicativo",
-	"Show desktop notifications": "Mostrar notificações da área de trabalho",
-	"Show downloaded files in file manager": "Mostrar arquivos baixados no gerenciador de arquivos",
-	"Show sidebar": "Mostrar barra lateral",
-	"Start app at login": "Inicie o aplicativo no login",
-	"Switch to Next Organization": "Mudar para a próxima organização",
-	"Switch to Previous Organization": "Mudar para a organização anterior",
-	"These desktop app shortcuts extend the Zulip webapp's": "Esses atalhos para aplicativos de desktop estendem o aplicativo da web do Zulip",
-	"This will delete all application data including all added accounts and preferences": "Isso excluirá todos os dados do aplicativo, incluindo todas as contas e preferências adicionadas",
-	"Tip": "Gorjeta",
-	"Toggle DevTools for Active Tab": "Alternar DevTools para a guia ativa",
-	"Toggle DevTools for Zulip App": "Alternar DevTools para Zulip App",
-	"Toggle Do Not Disturb": "Alternar não perturbe",
-	"Toggle Full Screen": "Alternar para o modo tela cheia",
-	"Toggle Sidebar": "Alternar Barra Lateral",
-	"Toggle Tray Icon": "Alternar ícone da bandeja",
-	"Tools": "Ferramentas",
-	"Undo": "Desfazer",
-	"Upload": "Envio",
-	"Use system proxy settings (requires restart)": "Use as configurações de proxy do sistema (requer reinicialização)",
-	"View": "Visão",
-	"View Shortcuts": "Exibir atalhos",
-	"Window": "Janela",
-	"Window Shortcuts": "Atalhos de janela",
-	"YES": "SIM",
-	"Zoom In": "Mais Zoom",
-	"Zoom Out": "Reduzir o zoom",
-	"Zulip Help": "Zulip Ajuda",
-	"keyboard shortcuts": "atalhos do teclado",
-	"script": "roteiro",
-	"Quit when the window is closed": "Sair quando fechar a janela",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/ru.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "О Zulip",
-	"Actual Size": "Актуальный размер",
-	"Add Custom Certificates": "Добавить собственные сертификаты",
-	"Add Organization": "Добавить организацию",
-	"Add a Zulip organization": "Добавить организацию Zulip",
-	"Add custom CSS": "Добавить собственный CSS",
-	"Advanced": "Дополнительно",
-	"All the connected organizations will appear here": "Все связанные организации будут появляться здесь",
-	"Always start minimized": "Запускать свернуто",
-	"App Updates": "Обновления",
-	"Appearance": "Вид",
-	"Application Shortcuts": "Горячие клавиши",
-	"Are you sure you want to disconnect this organization?": "Вы уверены, что хотите отключить эту организацию?",
-	"Auto hide Menu bar": "Скрывать меню",
-	"Auto hide menu bar (Press Alt key to display)": "Скрывать меню (для показа нажмите Alt)",
-	"Back": "Назад",
-	"Bounce dock on new private message": "Показывать док при поступлении нового личного сообщения",
-	"Certificate file": "Файл сертификата",
-	"Change": "Изменить",
-	"Check for Updates": "Проверить наличие обновлений",
-	"Close": "Закрыть",
-	"Connect": "Подключиться",
-	"Connect to another organization": "Подключиться к другой организации",
-	"Connected organizations": "Подключенные организации",
-	"Copy": "Копировать",
-	"Copy Zulip URL": "Скопировать ссылку на сервер Zulip",
-	"Create a new organization": "Создать новую организацию",
-	"Cut": "Вырезать",
-	"Default download location": "Папка для загрузки",
-	"Delete": "Удалить",
-	"Desktop App Settings": "Настройки приложения",
-	"Desktop Notifications": "Оповещения на рабочем столе",
-	"Desktop Settings": "Настройки рабочего стола",
-	"Disconnect": "Отключиться",
-	"Download App Logs": "Скачать логи приложения",
-	"Edit": "Изменить",
-	"Edit Shortcuts": "Редактировать горячие клавиши",
-	"Enable auto updates": "Включить автообновление",
-	"Enable error reporting (requires restart)": "Включить сообщения об ошибках (потребуется перезапуск)",
-	"Enable spellchecker (requires restart)": "Включить проверку орфографии (потребуется перезапуск)",
-	"Factory Reset": "Сброс настроек",
-	"File": "Файл",
-	"Find accounts": "Найти учетные записи",
-	"Find accounts by email": "Искать учетные записи по адресу электронной почты",
-	"Flash taskbar on new message": "Высвечивать панель задач при новом сообщении",
-	"Forward": "Вперед",
-	"Functionality": "Функциональность",
-	"General": "Общее",
-	"Get beta updates": "Получать бета-обновления",
-	"Hard Reload": "Жесткая перезагрузка",
-	"Help": "Помощь",
-	"Help Center": "Центр поддержки",
-	"History": "История",
-	"History Shortcuts": "Горячие клавишы по истории",
-	"Keyboard Shortcuts": "Горячие клавишы",
-	"Log Out": "Выйти из учетной записи",
-	"Log Out of Organization": "Выйти из организации",
-	"Manual proxy configuration": "Ручная настройка прокси",
-	"Minimize": "Свернуть",
-	"Mute all sounds from Zulip": "Выключить все звуки Zulip",
-	"NO": "НЕТ",
-	"Network": "Сеть",
-	"OR": "ИЛИ",
-	"Organization URL": "URL организации",
-	"Organizations": "Организации",
-	"Paste": "Вставить",
-	"Paste and Match Style": "Вставить с соблюдением стиля",
-	"Proxy": "Прокси",
-	"Proxy bypass rules": "Правила обхода прокси",
-	"Proxy rules": "Правила прокси",
-	"Quit": "Выход",
-	"Quit Zulip": "Выйти из Zulip",
-	"Redo": "Исправить",
-	"Release Notes": "Описание обновлений",
-	"Reload": "Перезагрузить",
-	"Report an Issue": "Сообщить об ошибке",
-	"Save": "Сохранить",
-	"Select All": "Выделить все",
-	"Settings": "Настройки",
-	"Shortcuts": "Горячие клавиши",
-	"Show App Logs": "Показать логи приложения",
-	"Show app icon in system tray": "Показывать приложение в области уведомлений",
-	"Show app unread badge": "Показывать значок о непрочитанных сообщениях",
-	"Show desktop notifications": "Показывать всплывающие оповещения",
-	"Show downloaded files in file manager": "Показать скаченные файлы в менеджере закачек",
-	"Show sidebar": "Показывать боковую панель",
-	"Start app at login": "Запускать приложение при входе в систему",
-	"Switch to Next Organization": "Перейти к следующей организации",
-	"Switch to Previous Organization": "Перейти к предыдущей организации",
-	"These desktop app shortcuts extend the Zulip webapp's": "Эти ярлыки приложения для рабочего стола дополняют функционал сетевого приложения Zulip",
-	"This will delete all application data including all added accounts and preferences": "Этим удаляются все данные приложения, включая данные всех подключенных аккаунтов и настройки.",
-	"Tip": "Совет",
-	"Toggle DevTools for Active Tab": "Переключить инструменты разработчика для активной вкладки",
-	"Toggle DevTools for Zulip App": "Переключить инструменты разработчика для приложения Zulip",
-	"Toggle Do Not Disturb": "Переключить режим \"не мешать\"",
-	"Toggle Full Screen": "Переключить полный экран",
-	"Toggle Sidebar": "Переключить боковую панель",
-	"Toggle Tray Icon": "Переключить иконку в области уведомлений",
-	"Tools": "Инструменты",
-	"Undo": "Отменить",
-	"Upload": "Загрузить",
-	"Use system proxy settings (requires restart)": "Использовать системные настройки прокси (необходима перезагрузка)",
-	"View": "Вид",
-	"View Shortcuts": "Посмотреть горячие клавишы",
-	"Window": "Окно",
-	"Window Shortcuts": "Ярлыки окна",
-	"YES": "ДА",
-	"Zoom In": "Увеличить масштаб",
-	"Zoom Out": "Уменьшить масштаб",
-	"Zulip Help": "Помощь по Zulip",
-	"keyboard shortcuts": "Горячие клавиши",
-	"script": "скрипт",
-	"Quit when the window is closed": "Выйти, когда окно будет закрыто",
-	"Ask where to save files before downloading": "Спрашивать, где сохранять файлы перед скачиванием",
-	"Services": "Сервисы",
-	"Hide": "Скрыть",
-	"Hide Others": "Скрыть другие",
-	"Unhide": "Не скрывать",
-	"AddServer": "Добавить Сервер",
-	"App language (requires restart)": "Язык приложения (требует перезапуска)",
-	"Factory Reset Data": "Сброс данных приложения",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Сбросить все настройки приложения, и удалить все подключенные организации, учетные записи и сертификаты.",
-	"On macOS, the OS spellchecker is used.": "На macOS используется орфографический корректор OS.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Настройте язык, следуя меню Настройки системы → Клавиатура → Текст → Орфография.",
-	"Copy Link": "Скопировать ссылку",
-	"Copy Image": "Скопировать изображение",
-	"Copy Image URL": "Скопировать ссылку на изображение",
-	"No Suggestion Found": "Предложений не найдено",
-	"You can select a maximum of 3 languages for spellchecking.": "Вы можете выбрать не более 3-х языков для проверки орфографии.",
-	"Spellchecker Languages": "Языки для проверки орфографии",
-	"Add to Dictionary": "Добавить в словарь",
-	"Look Up": "Искать"
-}

app/translations/sr.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "О Зулипу",
-	"Actual Size": "Стварна величина",
-	"Add Custom Certificates": "Додајте прилагођене цертификате",
-	"Add Organization": "Додај организацију",
-	"Add a Zulip organization": "Додајте Зулип организацију",
-	"Add custom CSS": "Додајте прилагођени ЦСС",
-	"Advanced": "Напредно",
-	"All the connected organizations will appear here": "Овде ће се појавити све повезане организације",
-	"Always start minimized": "Увек започните минимизирано",
-	"App Updates": "Апп Упдатес",
-	"Appearance": "Изглед",
-	"Application Shortcuts": "Пречице за апликације",
-	"Are you sure you want to disconnect this organization?": "Јесте ли сигурни да желите прекинути везу с овом организацијом?",
-	"Auto hide Menu bar": "Ауто хиде Мену бар",
-	"Auto hide menu bar (Press Alt key to display)": "Аутоматско скривање траке менија (притисните тастер Алт да бисте приказали)",
-	"Back": "Назад",
-	"Bounce dock on new private message": "Одскочите у нову приватну поруку",
-	"Certificate file": "Датотека сертификата",
-	"Change": "Цханге",
-	"Check for Updates": "Провери ажурирања",
-	"Close": "Близу",
-	"Connect": "Повежи",
-	"Connect to another organization": "Повежите се са другом организацијом",
-	"Connected organizations": "Повезане организације",
-	"Copy": "Копирај",
-	"Copy Zulip URL": "Цопи Зулип УРЛ",
-	"Create a new organization": "Направите нову организацију",
-	"Cut": "Цут",
-	"Default download location": "Дефаулт довнлоад лоцатион",
-	"Delete": "Обриши",
-	"Desktop App Settings": "Подешавања апликације за десктоп рачунаре",
-	"Desktop Notifications": "Обавештења о радној површини",
-	"Desktop Settings": "Десктоп Сеттингс",
-	"Disconnect": "Дисцоннецт",
-	"Download App Logs": "Довнлоад Апп Логс",
-	"Edit": "Уредити",
-	"Edit Shortcuts": "Уреди пречице",
-	"Enable auto updates": "Омогући аутоматско ажурирање",
-	"Enable error reporting (requires restart)": "Омогући извештавање о грешкама (захтева поновно покретање)",
-	"Enable spellchecker (requires restart)": "Омогући провјеру правописа (захтијева поновно покретање)",
-	"Factory Reset": "Фацтори Ресет",
-	"File": "Филе",
-	"Find accounts": "Нађи рачуне",
-	"Find accounts by email": "Пронађите рачуне путем е-поште",
-	"Flash taskbar on new message": "Фласх трака задатака у новој поруци",
-	"Forward": "Напријед",
-	"Functionality": "Функционалност",
-	"General": "Генерал",
-	"Get beta updates": "Набавите бета ажурирања",
-	"Hard Reload": "Хард Релоад",
-	"Help": "Помоћ",
-	"Help Center": "Центар за помоћ",
-	"History": "Хистори",
-	"History Shortcuts": "Историјске пречице",
-	"Keyboard Shortcuts": "Пречице на тастатури",
-	"Log Out": "Одјавити се",
-	"Log Out of Organization": "Одјавите се из организације",
-	"Manual proxy configuration": "Мануал проки цонфигуратион",
-	"Minimize": "Минимизе",
-	"Mute all sounds from Zulip": "Искључите све звукове из Зулипа",
-	"NO": "НЕ",
-	"Network": "Мрежа",
-	"OR": "ОР",
-	"Organization URL": "УРЛ организације",
-	"Organizations": "Организације",
-	"Paste": "Пасте",
-	"Paste and Match Style": "Залепите и подесите стил",
-	"Proxy": "Заступник",
-	"Proxy bypass rules": "Проки бипасс правила",
-	"Proxy rules": "Проки рулес",
-	"Quit": "Одустати",
-	"Quit Zulip": "Куит Зулип",
-	"Redo": "Редо",
-	"Release Notes": "Релеасе Нотес",
-	"Reload": "Освежи",
-	"Report an Issue": "Пријавите проблем",
-	"Save": "сачувати",
-	"Select All": "Изабери све",
-	"Settings": "Подешавања",
-	"Shortcuts": "Пречице",
-	"Show App Logs": "Прикажи дневнике апликација",
-	"Show app icon in system tray": "Покажи икону апликације у системској палети",
-	"Show app unread badge": "Покажи непрочитану значку апликације",
-	"Show desktop notifications": "Прикажи обавештења радне површине",
-	"Show downloaded files in file manager": "Прикажи преузете датотеке у управитељу датотека",
-	"Show sidebar": "Схов сидебар",
-	"Start app at login": "Покрените апликацију приликом пријављивања",
-	"Switch to Next Organization": "Пребаци се на следећу организацију",
-	"Switch to Previous Organization": "Пребаци се на претходну организацију",
-	"These desktop app shortcuts extend the Zulip webapp's": "Пречице за десктоп апликације проширују Зулип вебаппове",
-	"This will delete all application data including all added accounts and preferences": "Ово ће избрисати све податке о апликацији, укључујући све додатне налоге и поставке",
-	"Tip": "Савет",
-	"Toggle DevTools for Active Tab": "Пребаци ДевТоолс за Ацтиве Таб",
-	"Toggle DevTools for Zulip App": "Пребаци ДевТоолс за Зулип Апп",
-	"Toggle Do Not Disturb": "Тоггле До Нот Дистурб",
-	"Toggle Full Screen": "Тоггле Фулл Сцреен",
-	"Toggle Sidebar": "Тоггле Сидебар",
-	"Toggle Tray Icon": "Тоггле Траи Ицон",
-	"Tools": "Алати",
-	"Undo": "Ундо",
-	"Upload": "Отпремити",
-	"Use system proxy settings (requires restart)": "Користи поставке системског прокија (потребно је поново покренути)",
-	"View": "Поглед",
-	"View Shortcuts": "Прикажи пречице",
-	"Window": "Прозор",
-	"Window Shortcuts": "Пречице за прозор",
-	"YES": "ДА",
-	"Zoom In": "Увеличати",
-	"Zoom Out": "Зоом Оут",
-	"Zulip Help": "Зулип Хелп",
-	"keyboard shortcuts": "пречице на тастатури",
-	"script": "скрипта",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/supported-locales.json

@@ -1,43 +0,0 @@
-{
-    "ar": "عربى",
-    "bg": "български",
-    "ca": "català",
-    "cs": "česky",
-    "da": "Dansk",
-    "de": "Deutsch",
-    "el_GR": "Greek (Greece)",
-    "el": "Ελληνικά",
-    "en_GB": "English (UK)",
-    "en": "English (US)",
-    "es": "Español",
-    "fa": "فارسی",
-    "fi": "suomi",
-    "fr": "français",
-    "gl": "Galego",
-    "hi": "हिन्दी",
-    "hr": "Croata",
-    "hu": "Magyar",
-    "id_ID": "Indonesian (Indonesia)",
-    "it": "Italiano",
-    "ja": "日本語",
-    "ko": "한국어" ,
-    "lt": "Lietuvis" ,
-    "ml": "മലയാളം",
-    "nb_NO": "norsk (Norge)",
-    "nl": "Nederlands",
-    "pl": "Polski",
-    "pt": "Português",
-    "ro": "Română",
-    "ru": "Русский",
-    "sk": "Slovak",
-    "sr": "српски",
-    "sv": "svenska",
-    "ta": "தமிழ்",
-    "tr": "Türkçe",
-    "uk": "Українська",
-    "uz": "O'zbek",
-    "vi": "Tiếng Việt",
-    "zh_TW": "中文 (傳統的)",
-    "zh-Hans": "简体中文",
-    "zh-Hant": "繁體中文"
-}

app/translations/vi.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "Giới thiệu",
-	"Actual Size": "Kích thước thực",
-	"Add Custom Certificates": "Thêm chứng chỉ tự tùy chỉnh",
-	"Add Organization": "Thêm nhóm",
-	"Add a Zulip organization": "Thêm nhóm Zulip",
-	"Add custom CSS": "Thêm chỉnh sửa CSS",
-	"Advanced": "Nâng cao",
-	"All the connected organizations will appear here": "Tất cả các nhóm đã kết nối sẽ hiển thị tại đây",
-	"Always start minimized": "Luôn thu nhỏ",
-	"App Updates": "Cập nhật",
-	"Appearance": "Giao diện",
-	"Application Shortcuts": "Phím tắt",
-	"Are you sure you want to disconnect this organization?": "Bạn có chắc muốn ngừng kết nối với nhóm này?",
-	"Auto hide Menu bar": "Tự động ẩn thanh công cụ",
-	"Auto hide menu bar (Press Alt key to display)": "Tự động ẩn thanh công cụ (Ấn phím Alt để hiển thị)",
-	"Back": "Quay lại",
-	"Bounce dock on new private message": "Bounce dock trên tin nhắn mới",
-	"Certificate file": "Giấy chứng nhận",
-	"Change": "Thay đổi",
-	"Check for Updates": "Kiểm tra cập nhật",
-	"Close": "Tắt",
-	"Connect": "Kết nối",
-	"Connect to another organization": "Kết nối với tổ chức khác",
-	"Connected organizations": "Tổ chức kết nối",
-	"Copy": "Sao chép",
-	"Copy Zulip URL": "Sao chép đường dẫn",
-	"Create a new organization": "Tạo nhóm mới",
-	"Cut": "Cắt",
-	"Default download location": "Nơi lưu tập tin mặc định",
-	"Delete": "Xóa",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "Thông báo trên giao diện máy tính",
-	"Desktop Settings": "Cài đặt ứng dụng",
-	"Disconnect": "Ngắt kết nối",
-	"Download App Logs": "Download App Logs",
-	"Edit": "Chỉnh sửa",
-	"Edit Shortcuts": "Edit Shortcuts",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "File",
-	"Find accounts": "Find accounts",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "General",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "Help",
-	"Help Center": "Help Center",
-	"History": "History",
-	"History Shortcuts": "History Shortcuts",
-	"Keyboard Shortcuts": "Keyboard Shortcuts",
-	"Log Out": "Log Out",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "Minimize",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "NO",
-	"Network": "Network",
-	"OR": "OR",
-	"Organization URL": "Organization URL",
-	"Organizations": "Organizations",
-	"Paste": "Paste",
-	"Paste and Match Style": "Paste and Match Style",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Thoát",
-	"Quit Zulip": "Thoát khỏi Zulip",
-	"Redo": "Thực hiện lại",
-	"Release Notes": "Release Notes",
-	"Reload": "Tải lại",
-	"Report an Issue": "Report an Issue",
-	"Save": "Lưu",
-	"Select All": "Select All",
-	"Settings": "Cài đặt",
-	"Shortcuts": "Shortcuts",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "Show sidebar",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "Mọi dữ liệu trong ứng dụng, bao gồm tất cả tài khoản và tùy chỉnh được thêm vào, sẽ bị xóa",
-	"Tip": "Mẹo",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "Công cụ",
-	"Undo": "Hủy thay đổi",
-	"Upload": "Tải lên",
-	"Use system proxy settings (requires restart)": "Chọn cài đặt system proxy (Yêu cầu khởi động lại)",
-	"View": "Xem",
-	"View Shortcuts": "Hiển thị phím tắt",
-	"Window": "Ứng dụng Window",
-	"Window Shortcuts": "Phím tắt trong Windows",
-	"YES": "Có",
-	"Zoom In": "Phóng to",
-	"Zoom Out": "Thu nhỏ",
-	"Zulip Help": "Trợ giúp",
-	"keyboard shortcuts": "Phím tắt bàn phím",
-	"script": "script",
-	"Quit when the window is closed": "Thoát khi cửa sổ tắt",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/zh-Hans.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "关于Zulip",
-	"Actual Size": "真实大小",
-	"Add Custom Certificates": "添加自定义证书\n\n",
-	"Add Organization": "添加组织\n\n",
-	"Add a Zulip organization": "添加Zulip组织\n\n",
-	"Add custom CSS": "添加自定义样式(CSS)",
-	"Advanced": "高级",
-	"All the connected organizations will appear here": "All the connected organizations will appear here",
-	"Always start minimized": "Always start minimized",
-	"App Updates": "应用更新",
-	"Appearance": "Appearance",
-	"Application Shortcuts": "快捷键",
-	"Are you sure you want to disconnect this organization?": "Are you sure you want to disconnect this organization?",
-	"Auto hide Menu bar": "Auto hide Menu bar",
-	"Auto hide menu bar (Press Alt key to display)": "Auto hide menu bar (Press Alt key to display)",
-	"Back": "后退",
-	"Bounce dock on new private message": "Bounce dock on new private message",
-	"Certificate file": "Certificate file",
-	"Change": "更改",
-	"Check for Updates": "检查更新...",
-	"Close": "关闭",
-	"Connect": "连接",
-	"Connect to another organization": "连接到另一个组织",
-	"Connected organizations": "连接的组织",
-	"Copy": "复制",
-	"Copy Zulip URL": "复制Zulip地址(URL)",
-	"Create a new organization": "创建新的组织",
-	"Cut": "剪切",
-	"Default download location": "缺省下载位置",
-	"Delete": "删除",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "Desktop Notifications",
-	"Desktop Settings": "Desktop Settings",
-	"Disconnect": "断开",
-	"Download App Logs": "Download App Logs",
-	"Edit": "编辑",
-	"Edit Shortcuts": "Edit Shortcuts",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "文件",
-	"Find accounts": "查找账户",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "General",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "Help",
-	"Help Center": "Help Center",
-	"History": "历史消息",
-	"History Shortcuts": "History Shortcuts",
-	"Keyboard Shortcuts": "Keyboard Shortcuts",
-	"Log Out": "退出",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "最小化",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "NO",
-	"Network": "Network",
-	"OR": "或",
-	"Organization URL": "社群网址",
-	"Organizations": "Organizations",
-	"Paste": "粘贴",
-	"Paste and Match Style": "粘贴并匹配格式",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Quit",
-	"Quit Zulip": "Quit Zulip",
-	"Redo": "Redo",
-	"Release Notes": "Release Notes",
-	"Reload": "Reload",
-	"Report an Issue": "Report an Issue",
-	"Save": "保存",
-	"Select All": "全选",
-	"Settings": "设置",
-	"Shortcuts": "Shortcuts",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "显示侧边栏",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
-	"Tip": "Tip",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "工具",
-	"Undo": "撤销",
-	"Upload": "上传",
-	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
-	"View": "View",
-	"View Shortcuts": "View Shortcuts",
-	"Window": "Window",
-	"Window Shortcuts": "Window Shortcuts",
-	"YES": "确认",
-	"Zoom In": "Zoom In",
-	"Zoom Out": "Zoom Out",
-	"Zulip Help": "Zulip Help",
-	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

app/translations/zh-Hant.json

@@ -1,134 +0,0 @@
-{
-	"About Zulip": "關於 Zulip",
-	"Actual Size": "Actual Size",
-	"Add Custom Certificates": "Add Custom Certificates",
-	"Add Organization": "Add Organization",
-	"Add a Zulip organization": "Add a Zulip organization",
-	"Add custom CSS": "Add custom CSS",
-	"Advanced": "Advanced",
-	"All the connected organizations will appear here": "All the connected organizations will appear here",
-	"Always start minimized": "Always start minimized",
-	"App Updates": "App Updates",
-	"Appearance": "Appearance",
-	"Application Shortcuts": "Application Shortcuts",
-	"Are you sure you want to disconnect this organization?": "Are you sure you want to disconnect this organization?",
-	"Auto hide Menu bar": "Auto hide Menu bar",
-	"Auto hide menu bar (Press Alt key to display)": "Auto hide menu bar (Press Alt key to display)",
-	"Back": "Back",
-	"Bounce dock on new private message": "Bounce dock on new private message",
-	"Certificate file": "Certificate file",
-	"Change": "Change",
-	"Check for Updates": "Check for Updates",
-	"Close": "關閉",
-	"Connect": "Connect",
-	"Connect to another organization": "Connect to another organization",
-	"Connected organizations": "Connected organizations",
-	"Copy": "Copy",
-	"Copy Zulip URL": "Copy Zulip URL",
-	"Create a new organization": "Create a new organization",
-	"Cut": "Cut",
-	"Default download location": "Default download location",
-	"Delete": "Delete",
-	"Desktop App Settings": "Desktop App Settings",
-	"Desktop Notifications": "Desktop Notifications",
-	"Desktop Settings": "Desktop Settings",
-	"Disconnect": "Disconnect",
-	"Download App Logs": "Download App Logs",
-	"Edit": "Edit",
-	"Edit Shortcuts": "Edit Shortcuts",
-	"Enable auto updates": "Enable auto updates",
-	"Enable error reporting (requires restart)": "Enable error reporting (requires restart)",
-	"Enable spellchecker (requires restart)": "Enable spellchecker (requires restart)",
-	"Factory Reset": "Factory Reset",
-	"File": "File",
-	"Find accounts": "尋找帳戶",
-	"Find accounts by email": "Find accounts by email",
-	"Flash taskbar on new message": "Flash taskbar on new message",
-	"Forward": "Forward",
-	"Functionality": "Functionality",
-	"General": "General",
-	"Get beta updates": "Get beta updates",
-	"Hard Reload": "Hard Reload",
-	"Help": "Help",
-	"Help Center": "Help Center",
-	"History": "History",
-	"History Shortcuts": "History Shortcuts",
-	"Keyboard Shortcuts": "Keyboard Shortcuts",
-	"Log Out": "Log Out",
-	"Log Out of Organization": "Log Out of Organization",
-	"Manual proxy configuration": "Manual proxy configuration",
-	"Minimize": "Minimize",
-	"Mute all sounds from Zulip": "Mute all sounds from Zulip",
-	"NO": "NO",
-	"Network": "Network",
-	"OR": "OR",
-	"Organization URL": "Organization URL",
-	"Organizations": "Organizations",
-	"Paste": "Paste",
-	"Paste and Match Style": "Paste and Match Style",
-	"Proxy": "Proxy",
-	"Proxy bypass rules": "Proxy bypass rules",
-	"Proxy rules": "Proxy rules",
-	"Quit": "Quit",
-	"Quit Zulip": "Quit Zulip",
-	"Redo": "Redo",
-	"Release Notes": "Release Notes",
-	"Reload": "Reload",
-	"Report an Issue": "Report an Issue",
-	"Save": "Save",
-	"Select All": "Select All",
-	"Settings": "設定",
-	"Shortcuts": "Shortcuts",
-	"Show App Logs": "Show App Logs",
-	"Show app icon in system tray": "Show app icon in system tray",
-	"Show app unread badge": "Show app unread badge",
-	"Show desktop notifications": "Show desktop notifications",
-	"Show downloaded files in file manager": "Show downloaded files in file manager",
-	"Show sidebar": "Show sidebar",
-	"Start app at login": "Start app at login",
-	"Switch to Next Organization": "Switch to Next Organization",
-	"Switch to Previous Organization": "Switch to Previous Organization",
-	"These desktop app shortcuts extend the Zulip webapp's": "These desktop app shortcuts extend the Zulip webapp's",
-	"This will delete all application data including all added accounts and preferences": "This will delete all application data including all added accounts and preferences",
-	"Tip": "Tip",
-	"Toggle DevTools for Active Tab": "Toggle DevTools for Active Tab",
-	"Toggle DevTools for Zulip App": "Toggle DevTools for Zulip App",
-	"Toggle Do Not Disturb": "Toggle Do Not Disturb",
-	"Toggle Full Screen": "Toggle Full Screen",
-	"Toggle Sidebar": "Toggle Sidebar",
-	"Toggle Tray Icon": "Toggle Tray Icon",
-	"Tools": "Tools",
-	"Undo": "Undo",
-	"Upload": "Upload",
-	"Use system proxy settings (requires restart)": "Use system proxy settings (requires restart)",
-	"View": "View",
-	"View Shortcuts": "View Shortcuts",
-	"Window": "Window",
-	"Window Shortcuts": "Window Shortcuts",
-	"YES": "YES",
-	"Zoom In": "Zoom In",
-	"Zoom Out": "Zoom Out",
-	"Zulip Help": "Zulip Help",
-	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script",
-	"Quit when the window is closed": "Quit when the window is closed",
-	"Ask where to save files before downloading": "Ask where to save files before downloading",
-	"Services": "Services",
-	"Hide": "Hide",
-	"Hide Others": "Hide Others",
-	"Unhide": "Unhide",
-	"AddServer": "AddServer",
-	"App language (requires restart)": "App language (requires restart)",
-	"Factory Reset Data": "Factory Reset Data",
-	"Reset the application, thus deleting all the connected organizations, accounts, and certificates.": "Reset the application, thus deleting all the connected organizations, accounts, and certificates.",
-	"On macOS, the OS spellchecker is used.": "On macOS, the OS spellchecker is used.",
-	"Change the language from System Preferences → Keyboard → Text → Spelling.": "Change the language from System Preferences → Keyboard → Text → Spelling.",
-	"Copy Link": "Copy Link",
-	"Copy Image": "Copy Image",
-	"Copy Image URL": "Copy Image URL",
-	"No Suggestion Found": "No Suggestion Found",
-	"You can select a maximum of 3 languages for spellchecking.": "You can select a maximum of 3 languages for spellchecking.",
-	"Spellchecker Languages": "Spellchecker Languages",
-	"Add to Dictionary": "Add to Dictionary",
-	"Look Up": "Look Up"
-}

build/entitlements.mac.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-  <dict>
-    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
-    <true/>
-  </dict>
-</plist>

build/entitlements.mas.plist

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>com.apple.security.app-sandbox</key>
-	<true/>
-	<key>com.apple.security.network.client</key>
-	<true/>
-	<key>com.apple.security.files.user-selected.read-only</key>
-	<true/>
-	<key>com.apple.security.files.user-selected.read-write</key>
-	<true/>
-	<key>com.apple.security.files.downloads.read-write</key>
-	<true/>
-</dict>
-</plist>

build/icon-macos.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 1024 1024"><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#50adff"/><stop offset="1" stop-color="#7877fc"/></linearGradient><mask id="b"><rect x="-100" y="-100" width="1024" height="1024" fill="#fff"/><path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z" transform="scale(1.0658112582781456)" fill="#000"/></mask><path id="c" d="M824 257c0-64 0-104-14-141A173 173 0 00708 14C671 0 631 0 567 0H257C193 0 153 0 116 14A173 173 0 0014 116C0 153 0 193 0 257V567c0 64 0 104 14 141A173 173 0 00116 810c37 14 77 14 141 14H567c64 0 104 0 141-14A173 173 0 00810 708c14-37 14-77 14-141Z"/><filter id="d"><feGaussianBlur in="SourceGraphic" stdDeviation="10"/></filter><filter id="e"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter></defs><use href="#c" transform="translate(0 10)" fill-opacity="0.3" filter="url(#d)"/><rect x="120" y="120" width="584" height="584" fill="#fff" /><g filter="url(#e)"><rect x="120" y="120" width="584" height="584" fill="#32497f" mask="url(#b)" transform="translate(0 5)"/></g><use href="#c" mask="url(#b)" fill="url(#a)"/></svg>