release: New release v5.11.0.

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

app/common/config-util.ts

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 
-import * as Sentry from "@sentry/electron";
+import * as Sentry from "@sentry/core";
 import {JsonDB} from "node-json-db";
 import {DataError} from "node-json-db/dist/lib/Errors";
 import type {z} from "zod";
@@ -19,23 +19,23 @@ 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]> {
   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);
@@ -46,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>(
@@ -66,16 +66,16 @@ export function setConfigItem<Key extends keyof Config>(
   }
 
   configSchemata[key].parse(value);
-  db.push(`/${key}`, value, true);
-  db.save();
+  database.push(`/${key}`, value, true);
+  database.save();
 }
 
 export function removeConfigItem(key: string): void {
-  db.delete(`/${key}`);
-  db.save();
+  database.delete(`/${key}`);
+  database.save();
 }
 
-function reloadDb(): void {
+function reloadDatabase(): void {
   const settingsJsonPath = path.join(
     app.getPath("userData"),
     "/config/settings.json",
@@ -96,5 +96,5 @@ function reloadDb(): void {
     }
   }
 
-  db = new JsonDB(settingsJsonPath, true, true);
+  database = new JsonDB(settingsJsonPath, true, true);
 }

app/common/default-util.ts

@@ -4,30 +4,30 @@ import {app} from "zulip:remote";
 
 let setupCompleted = false;
 
-const zulipDir = app.getPath("userData");
-const logDir = `${zulipDir}/Logs/`;
-const configDir = `${zulipDir}/config/`;
+const zulipDirectory = app.getPath("userData");
+const logDirectory = `${zulipDirectory}/Logs/`;
+const configDirectory = `${zulipDirectory}/config/`;
 export const initSetUp = (): void => {
   // If it is the first time the app is running
   // create zulip dir in userData folder to
   // avoid errors
   if (!setupCompleted) {
-    if (!fs.existsSync(zulipDir)) {
-      fs.mkdirSync(zulipDir);
+    if (!fs.existsSync(zulipDirectory)) {
+      fs.mkdirSync(zulipDirectory);
     }
 
-    if (!fs.existsSync(logDir)) {
-      fs.mkdirSync(logDir);
+    if (!fs.existsSync(logDirectory)) {
+      fs.mkdirSync(logDirectory);
     }
 
     // Migrate config files from app data folder to config folder inside app
     // data folder. This will be done once when a user updates to the new version.
-    if (!fs.existsSync(configDir)) {
-      fs.mkdirSync(configDir);
-      const domainJson = `${zulipDir}/domain.json`;
-      const settingsJson = `${zulipDir}/settings.json`;
-      const updatesJson = `${zulipDir}/updates.json`;
-      const windowStateJson = `${zulipDir}/window-state.json`;
+    if (!fs.existsSync(configDirectory)) {
+      fs.mkdirSync(configDirectory);
+      const domainJson = `${zulipDirectory}/domain.json`;
+      const settingsJson = `${zulipDirectory}/settings.json`;
+      const updatesJson = `${zulipDirectory}/updates.json`;
+      const windowStateJson = `${zulipDirectory}/window-state.json`;
       const configData = [
         {
           path: domainJson,
@@ -44,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/enterprise-util.ts

@@ -20,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 =
@@ -56,7 +56,7 @@ export function getConfigItem<Key extends keyof EnterpriseConfig>(
   key: Key,
   defaultValue: EnterpriseConfig[Key],
 ): EnterpriseConfig[Key] {
-  reloadDb();
+  reloadDatabase();
   if (!configFile) {
     return defaultValue;
   }
@@ -66,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/link-util.ts

@@ -11,8 +11,8 @@ 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 file = path.join(dir, "redirect.html");
+    const directory = fs.mkdtempSync(path.join(os.tmpdir(), "zulip-redirect-"));
+    const file = path.join(directory, "redirect.html");
     fs.writeFileSync(
       file,
       html`
@@ -37,7 +37,7 @@ export async function openBrowser(url: URL): Promise<void> {
     await shell.openPath(file);
     setTimeout(() => {
       fs.unlinkSync(file);
-      fs.rmdirSync(dir);
+      fs.rmdirSync(directory);
     }, 15_000);
   }
 }

app/common/logger-util.ts

@@ -13,7 +13,7 @@ type LoggerOptions = {
 
 initSetUp();
 
-const logDir = `${app.getPath("userData")}/Logs`;
+const logDirectory = `${app.getPath("userData")}/Logs`;
 
 type Level = "log" | "debug" | "info" | "warn" | "error";
 
@@ -23,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") {
@@ -38,31 +38,31 @@ export default class Logger {
     this.nodeConsole = nodeConsole;
   }
 
-  _log(type: Level, ...args: unknown[]): void {
-    args.unshift(this.getTimestamp() + " |\t");
-    args.unshift(type.toUpperCase() + " |");
-    this.nodeConsole[type](...args);
-    console[type](...args);
+  _log(type: Level, ...arguments_: unknown[]): void {
+    arguments_.unshift(this.getTimestamp() + " |\t");
+    arguments_.unshift(type.toUpperCase() + " |");
+    this.nodeConsole[type](...arguments_);
+    console[type](...arguments_);
   }
 
-  log(...args: unknown[]): void {
-    this._log("log", ...args);
+  log(...arguments_: unknown[]): void {
+    this._log("log", ...arguments_);
   }
 
-  debug(...args: unknown[]): void {
-    this._log("debug", ...args);
+  debug(...arguments_: unknown[]): void {
+    this._log("debug", ...arguments_);
   }
 
-  info(...args: unknown[]): void {
-    this._log("info", ...args);
+  info(...arguments_: unknown[]): void {
+    this._log("info", ...arguments_);
   }
 
-  warn(...args: unknown[]): void {
-    this._log("warn", ...args);
+  warn(...arguments_: unknown[]): void {
+    this._log("warn", ...arguments_);
   }
 
-  error(...args: unknown[]): void {
-    this._log("error", ...args);
+  error(...arguments_: unknown[]): void {
+    this._log("error", ...arguments_);
   }
 
   getTimestamp(): string {

app/common/typed-ipc.ts

@@ -1,5 +1,5 @@
 import type {DndSettings} from "./dnd-util.js";
-import type {MenuProps, ServerConf} from "./types.js";
+import type {MenuProperties, ServerConfig} from "./types.js";
 
 export type MainMessage = {
   "clear-app-settings": () => void;
@@ -21,12 +21,12 @@ export type 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 type MainCall = {
-  "get-server-settings": (domain: string) => ServerConf;
+  "get-server-settings": (domain: string) => ServerConfig;
   "is-online": (url: string) => boolean;
   "poll-clipboard": (key: Uint8Array, sig: Uint8Array) => string | undefined;
   "save-server-icon": (iconURL: string) => string | null;
@@ -74,7 +74,7 @@ export type RendererMessage = {
   "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;
   "webview-reload": () => void;

app/common/types.ts

@@ -1,17 +1,17 @@
-export type MenuProps = {
+export type MenuProperties = {
   tabs: TabData[];
   activeTabIndex?: number;
   enableMenu?: boolean;
 };
 
-export type NavItem =
+export type NavigationItem =
   | "General"
   | "Network"
   | "AddServer"
   | "Organizations"
   | "Shortcuts";
 
-export type ServerConf = {
+export type ServerConfig = {
   url: string;
   alias: string;
   icon: string;

app/main/autoupdater.ts

@@ -2,9 +2,12 @@ import {shell} from "electron/common";
 import {app, dialog, session} from "electron/main";
 import process from "node:process";
 
-import log from "electron-log";
-import type {UpdateDownloadedEvent, UpdateInfo} from "electron-updater";
-import {autoUpdater} from "electron-updater";
+import log from "electron-log/main";
+import {
+  type UpdateDownloadedEvent,
+  type UpdateInfo,
+  autoUpdater,
+} from "electron-updater";
 
 import * as ConfigUtil from "../common/config-util.js";
 
@@ -31,9 +34,10 @@ export async function appUpdater(updateFromMenu = false): Promise<void> {
   let updateAvailable = false;
 
   // Log what's happening
-  log.transports.file.fileName = "updates.log";
-  log.transports.file.level = "info";
-  autoUpdater.logger = log;
+  const updateLogger = log.create({logId: "updates"});
+  updateLogger.transports.file.fileName = "updates.log";
+  updateLogger.transports.file.level = "info";
+  autoUpdater.logger = updateLogger;
 
   // Handle auto updates for beta/pre releases
   const isBetaUpdate = ConfigUtil.getConfigItem("betaUpdate", false);

app/main/badge-settings.ts

@@ -1,6 +1,5 @@
 import {nativeImage} from "electron/common";
-import type {BrowserWindow} from "electron/main";
-import {app} from "electron/main";
+import {type BrowserWindow, app} from "electron/main";
 import process from "node:process";
 
 import * as ConfigUtil from "../common/config-util.js";

app/main/handle-external-link.ts

@@ -1,11 +1,11 @@
-import type {Event} from "electron/common";
-import {shell} from "electron/common";
-import type {
-  HandlerDetails,
-  SaveDialogOptions,
-  WebContents,
+import {type Event, shell} from "electron/common";
+import {
+  type HandlerDetails,
+  Notification,
+  type SaveDialogOptions,
+  type WebContents,
+  app,
 } from "electron/main";
-import {Notification, app} from "electron/main";
 import fs from "node:fs";
 import path from "node:path";
 

app/main/index.ts

@@ -1,8 +1,8 @@
-import type {Event} from "electron/common";
 import {clipboard} from "electron/common";
-import type {IpcMainEvent, WebContents} from "electron/main";
 import {
   BrowserWindow,
+  type IpcMainEvent,
+  type WebContents,
   app,
   dialog,
   powerMonitor,
@@ -20,7 +20,7 @@ import windowStateKeeper from "electron-window-state";
 import * as ConfigUtil from "../common/config-util.js";
 import {bundlePath, bundleUrl, publicPath} from "../common/paths.js";
 import type {RendererMessage} from "../common/typed-ipc.js";
-import type {MenuProps} from "../common/types.js";
+import type {MenuProperties} from "../common/types.js";
 
 import {appUpdater, shouldQuitForUpdate} from "./autoupdater.js";
 import * as BadgeSettings from "./badge-settings.js";
@@ -110,7 +110,14 @@ function createMainWindow(): BrowserWindow {
       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();
       }
@@ -299,18 +306,24 @@ function createMainWindow(): BrowserWindow {
   app.on(
     "certificate-error",
     (
-      event: Event,
-      webContents: WebContents,
-      urlString: string,
-      error: string,
+      event,
+      webContents,
+      urlString,
+      error,
+      certificate,
+      callback,
+      isMainFrame,
+      // eslint-disable-next-line max-params
     ) => {
-      const url = new URL(urlString);
-      dialog.showErrorBox(
-        "Certificate error",
-        `The server presented an invalid certificate for ${url.origin}:
+      if (isMainFrame) {
+        const url = new URL(urlString);
+        dialog.showErrorBox(
+          "Certificate error",
+          `The server presented an invalid certificate for ${url.origin}:
 
 ${error}`,
-      );
+        );
+      }
     },
   );
 
@@ -411,10 +424,10 @@ ${error}`,
     },
   );
 
-  ipcMain.on("update-menu", (_event, props: MenuProps) => {
-    AppMenu.setMenu(props);
-    if (props.activeTabIndex !== undefined) {
-      const activeTab = props.tabs[props.activeTabIndex];
+  ipcMain.on("update-menu", (_event, properties: MenuProperties) => {
+    AppMenu.setMenu(properties);
+    if (properties.activeTabIndex !== undefined) {
+      const activeTab = properties.tabs[properties.activeTabIndex];
       mainWindow.setTitle(`Zulip - ${activeTab.name}`);
     }
   });

app/main/linux-update-util.ts

@@ -11,18 +11,18 @@ 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 +36,16 @@ export function getUpdateItem(
 }
 
 export function setUpdateItem(key: string, value: true | null): void {
-  db.push(`/${key}`, value, true);
-  reloadDb();
+  database.push(`/${key}`, value, true);
+  reloadDatabase();
 }
 
 export function removeUpdateItem(key: string): void {
-  db.delete(`/${key}`);
-  reloadDb();
+  database.delete(`/${key}`);
+  reloadDatabase();
 }
 
-function reloadDb(): void {
+function reloadDatabase(): void {
   const linuxUpdateJsonPath = path.join(
     app.getPath("userData"),
     "/config/updates.json",
@@ -65,5 +65,5 @@ function reloadDb(): void {
     }
   }
 
-  db = new JsonDB(linuxUpdateJsonPath, true, true);
+  database = new JsonDB(linuxUpdateJsonPath, true, true);
 }

app/main/linuxupdater.ts

@@ -1,5 +1,4 @@
-import type {Session} from "electron/main";
-import {Notification, app} from "electron/main";
+import {Notification, type Session, app} from "electron/main";
 
 import * as semver from "semver";
 import {z} from "zod";

app/main/menu.ts

@@ -1,6 +1,10 @@
 import {shell} from "electron/common";
-import type {MenuItemConstructorOptions} from "electron/main";
-import {BrowserWindow, Menu, app} from "electron/main";
+import {
+  BrowserWindow,
+  Menu,
+  type MenuItemConstructorOptions,
+  app,
+} from "electron/main";
 import process from "node:process";
 
 import AdmZip from "adm-zip";
@@ -9,7 +13,7 @@ import * as ConfigUtil from "../common/config-util.js";
 import * as DNDUtil from "../common/dnd-util.js";
 import * as t from "../common/translation-util.js";
 import type {RendererMessage} from "../common/typed-ipc.js";
-import type {MenuProps, TabData} from "../common/types.js";
+import type {MenuProperties, TabData} from "../common/types.js";
 
 import {appUpdater} from "./autoupdater.js";
 import {send} from "./typed-ipc-main.js";
@@ -368,8 +372,10 @@ function getWindowSubmenu(
   return initialSubmenu;
 }
 
-function getDarwinTpl(props: MenuProps): MenuItemConstructorOptions[] {
-  const {tabs, activeTabIndex, enableMenu = false} = props;
+function getDarwinTpl(
+  properties: MenuProperties,
+): MenuItemConstructorOptions[] {
+  const {tabs, activeTabIndex, enableMenu = false} = properties;
 
   return [
     {
@@ -533,8 +539,8 @@ function getDarwinTpl(props: MenuProps): MenuItemConstructorOptions[] {
   ];
 }
 
-function getOtherTpl(props: MenuProps): MenuItemConstructorOptions[] {
-  const {tabs, activeTabIndex, enableMenu = false} = props;
+function getOtherTpl(properties: MenuProperties): MenuItemConstructorOptions[] {
+  const {tabs, activeTabIndex, enableMenu = false} = properties;
   return [
     {
       label: t.__("File"),
@@ -683,7 +689,7 @@ function getOtherTpl(props: MenuProps): MenuItemConstructorOptions[] {
 
 function sendAction<Channel extends keyof RendererMessage>(
   channel: Channel,
-  ...args: Parameters<RendererMessage[Channel]>
+  ...arguments_: Parameters<RendererMessage[Channel]>
 ): void {
   const win = BrowserWindow.getAllWindows()[0];
 
@@ -691,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> {
@@ -714,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/request.ts

@@ -1,17 +1,16 @@
-import type {Session} from "electron/main";
-import {app} from "electron/main";
+import {type Session, app} from "electron/main";
 import fs from "node:fs";
 import path from "node:path";
 import {Readable} from "node:stream";
 import {pipeline} from "node:stream/promises";
 import type {ReadableStream} from "node:stream/web";
 
-import * as Sentry from "@sentry/electron";
+import * as Sentry from "@sentry/electron/main";
 import {z} from "zod";
 
 import Logger from "../common/logger-util.js";
 import * as Messages from "../common/messages.js";
-import type {ServerConf} from "../common/types.js";
+import type {ServerConfig} from "../common/types.js";
 
 /* Request: domain-util */
 
@@ -20,7 +19,7 @@ const logger = new Logger({
 });
 
 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;
@@ -32,18 +31,18 @@ const generateFilePath = (url: string): string => {
   }
 
   // Create 'server-icons' directory if not existed
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir);
+  if (!fs.existsSync(directory)) {
+    fs.mkdirSync(directory);
   }
 
   // eslint-disable-next-line no-bitwise
-  return `${dir}/${hash >>> 0}${extension}`;
+  return `${directory}/${hash >>> 0}${extension}`;
 };
 
 export const _getServerSettings = async (
   domain: string,
   session: Session,
-): Promise<ServerConf> => {
+): Promise<ServerConfig> => {
   const response = await session.fetch(domain + "/api/v1/server_settings");
   if (!response.ok) {
     throw new Error(Messages.invalidZulipServerError(domain));

app/main/typed-ipc-main.ts

@@ -1,9 +1,7 @@
-import type {
-  IpcMainEvent,
-  IpcMainInvokeEvent,
-  WebContents,
-} from "electron/main";
 import {
+  type IpcMainEvent,
+  type IpcMainInvokeEvent,
+  type WebContents,
   ipcMain as untypedIpcMain, // eslint-disable-line no-restricted-imports
 } from "electron/main";
 
@@ -14,14 +12,20 @@ import type {
 } from "../common/typed-ipc.js";
 
 type MainListener<Channel extends keyof MainMessage> =
-  MainMessage[Channel] extends (...args: infer Args) => infer Return
-    ? (event: IpcMainEvent & {returnValue: Return}, ...args: Args) => void
+  MainMessage[Channel] extends (...arguments_: infer Arguments) => infer Return
+    ? (
+        event: IpcMainEvent & {returnValue: Return},
+        ...arguments_: Arguments
+      ) => void
     : never;
 
 type MainHandler<Channel extends keyof MainCall> = MainCall[Channel] extends (
-  ...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: {
@@ -30,7 +34,7 @@ export const ipcMain: {
     listener: <Channel extends keyof RendererMessage>(
       event: IpcMainEvent,
       channel: Channel,
-      ...args: Parameters<RendererMessage[Channel]>
+      ...arguments_: Parameters<RendererMessage[Channel]>
     ) => void,
   ): void;
   on(
@@ -39,7 +43,7 @@ export const ipcMain: {
       event: IpcMainEvent,
       webContentsId: number,
       channel: Channel,
-      ...args: Parameters<RendererMessage[Channel]>
+      ...arguments_: Parameters<RendererMessage[Channel]>
     ) => void,
   ): void;
   on<Channel extends keyof MainMessage>(
@@ -69,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/js/clipboard-decrypter.ts

@@ -20,7 +20,7 @@ export type ClipboardDecrypter = {
   pasted: Promise<string>;
 };
 
-export class ClipboardDecrypterImpl implements ClipboardDecrypter {
+export class ClipboardDecrypterImplementation implements ClipboardDecrypter {
   version: number;
   key: Uint8Array;
   pasted: Promise<string>;

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

@@ -1,5 +1,4 @@
-import type {Event} from "electron/common";
-import {clipboard} from "electron/common";
+import {type Event, clipboard} from "electron/common";
 import type {WebContents} from "electron/main";
 import type {
   ContextMenuParams,
@@ -14,11 +13,11 @@ import * as t from "../../../common/translation-util.js";
 export const contextMenu = (
   webContents: WebContents,
   event: Event,
-  props: ContextMenuParams,
+  properties: ContextMenuParams,
 ) => {
-  const isText = props.selectionText !== "";
-  const isLink = props.linkURL !== "";
-  const linkUrl = isLink ? new URL(props.linkURL) : undefined;
+  const isText = properties.selectionText !== "";
+  const isLink = properties.linkURL !== "";
+  const linkUrl = isLink ? new URL(properties.linkURL) : undefined;
 
   const makeSuggestion = (suggestion: string) => ({
     label: suggestion,
@@ -31,19 +30,21 @@ export const contextMenu = (
   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();
@@ -56,7 +57,7 @@ export const contextMenu = (
     {
       label: t.__("Cut"),
       visible: isText,
-      enabled: props.isEditable,
+      enabled: properties.isEditable,
       accelerator: "CommandOrControl+X",
       click(_item) {
         webContents.cut();
@@ -65,7 +66,7 @@ export const contextMenu = (
     {
       label: t.__("Copy"),
       accelerator: "CommandOrControl+C",
-      enabled: props.editFlags.canCopy,
+      enabled: properties.editFlags.canCopy,
       click(_item) {
         webContents.copy();
       },
@@ -73,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();
       },
@@ -89,32 +90,34 @@ export const contextMenu = (
       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,
-          text: props.srcURL,
+          bookmark: properties.srcURL,
+          text: properties.srcURL,
         });
       },
     },
     {
       type: "separator",
-      visible: isLink || props.mediaType === "image",
+      visible: isLink || properties.mediaType === "image",
     },
     {
       label: t.__("Services"),
@@ -123,10 +126,10 @@ export const contextMenu = (
     },
   ];
 
-  if (props.misspelledWord) {
-    if (props.dictionarySuggestions.length > 0) {
+  if (properties.misspelledWord) {
+    if (properties.dictionarySuggestions.length > 0) {
       const suggestions: MenuItemConstructorOptions[] =
-        props.dictionarySuggestions.map((suggestion: string) =>
+        properties.dictionarySuggestions.map((suggestion: string) =>
           makeSuggestion(suggestion),
         );
       menuTemplate = [...suggestions, ...menuTemplate];

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

@@ -1,26 +1,24 @@
-import type {Html} from "../../../common/html.js";
-import {html} from "../../../common/html.js";
+import {type Html, html} from "../../../common/html.js";
 
 import {generateNodeFromHtml} from "./base.js";
-import type {TabProps} from "./tab.js";
-import Tab from "./tab.js";
+import Tab, {type TabProperties} from "./tab.js";
 
-export type FunctionalTabProps = {
+export type FunctionalTabProperties = {
   $view: Element;
-} & TabProps;
+} & TabProperties;
 
 export default class FunctionalTab extends Tab {
   $view: Element;
   $el: Element;
   $closeButton?: Element;
 
-  constructor({$view, ...props}: FunctionalTabProps) {
-    super(props);
+  constructor({$view, ...properties}: FunctionalTabProperties) {
+    super(properties);
 
     this.$view = $view;
     this.$el = generateNodeFromHtml(this.templateHtml());
-    if (this.props.name !== "Settings") {
-      this.props.$root.append(this.$el);
+    if (this.properties.name !== "Settings") {
+      this.properties.$root.append(this.$el);
       this.$closeButton = this.$el.querySelector(".server-tab-badge")!;
       this.registerListeners();
     }
@@ -43,12 +41,12 @@ export default class FunctionalTab extends Tab {
 
   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>
     `;
@@ -66,7 +64,7 @@ export default class FunctionalTab extends Tab {
     });
 
     this.$closeButton?.addEventListener("click", (event) => {
-      this.props.onDestroy?.();
+      this.properties.onDestroy?.();
       event.stopPropagation();
     });
   }

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

@@ -1,17 +1,15 @@
 import process from "node:process";
 
-import type {Html} from "../../../common/html.js";
-import {html} from "../../../common/html.js";
+import {type Html, html} from "../../../common/html.js";
 import {ipcRenderer} from "../typed-ipc-renderer.js";
 
 import {generateNodeFromHtml} from "./base.js";
-import type {TabProps} from "./tab.js";
-import Tab from "./tab.js";
+import Tab, {type TabProperties} from "./tab.js";
 import type WebView from "./webview.js";
 
-export type ServerTabProps = {
+export type ServerTabProperties = {
   webview: Promise<WebView>;
-} & TabProps;
+} & TabProperties;
 
 export default class ServerTab extends Tab {
   webview: Promise<WebView>;
@@ -20,12 +18,12 @@ export default class ServerTab extends Tab {
   $icon: HTMLImageElement;
   $badge: Element;
 
-  constructor({webview, ...props}: ServerTabProps) {
-    super(props);
+  constructor({webview, ...properties}: ServerTabProperties) {
+    super(properties);
 
     this.webview = webview;
     this.$el = generateNodeFromHtml(this.templateHtml());
-    this.props.$root.append(this.$el);
+    this.properties.$root.append(this.$el);
     this.registerListeners();
     this.$name = this.$el.querySelector(".server-tooltip")!;
     this.$icon = this.$el.querySelector(".server-icons")!;
@@ -49,13 +47,13 @@ export default class ServerTab extends Tab {
 
   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.name}
         </div>
         <div class="server-tab-badge"></div>
         <div class="server-tab">
-          <img class="server-icons" src="${this.props.icon}" />
+          <img class="server-icons" src="${this.properties.icon}" />
         </div>
         <div class="server-tab-shortcut">${this.generateShortcutText()}</div>
       </div>
@@ -63,12 +61,12 @@ export default class ServerTab extends Tab {
   }
 
   setName(name: string): void {
-    this.props.name = name;
+    this.properties.name = name;
     this.$name.textContent = name;
   }
 
   setIcon(icon: string): void {
-    this.props.icon = icon;
+    this.properties.icon = icon;
     this.$icon.src = icon;
   }
 
@@ -79,11 +77,11 @@ export default class ServerTab extends Tab {
 
   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;
 
     // Array index == Shown index - 1
     ipcRenderer.send("switch-server-tab", shownIndex - 1);

app/renderer/js/components/tab.ts

@@ -1,6 +1,6 @@
 import type {TabRole} from "../../../common/types.js";
 
-export type TabProps = {
+export type TabProperties = {
   role: TabRole;
   icon?: string;
   name: string;
@@ -17,17 +17,17 @@ export type TabProps = {
 export default abstract class Tab {
   abstract $el: Element;
 
-  constructor(readonly props: TabProps) {}
+  constructor(readonly properties: TabProperties) {}
 
   registerListeners(): void {
-    this.$el.addEventListener("click", this.props.onClick);
+    this.$el.addEventListener("click", this.properties.onClick);
 
-    if (this.props.onHover !== undefined) {
-      this.$el.addEventListener("mouseover", this.props.onHover);
+    if (this.properties.onHover !== undefined) {
+      this.$el.addEventListener("mouseover", this.properties.onHover);
     }
 
-    if (this.props.onHoverOut !== undefined) {
-      this.$el.addEventListener("mouseout", this.props.onHoverOut);
+    if (this.properties.onHoverOut !== undefined) {
+      this.$el.addEventListener("mouseout", this.properties.onHoverOut);
     }
   }
 

app/renderer/js/components/webview.ts

@@ -6,8 +6,7 @@ import * as remote from "@electron/remote";
 import {app, dialog} from "@electron/remote";
 
 import * as ConfigUtil from "../../../common/config-util.js";
-import type {Html} from "../../../common/html.js";
-import {html} from "../../../common/html.js";
+import {type Html, html} from "../../../common/html.js";
 import type {RendererMessage} from "../../../common/typed-ipc.js";
 import type {TabRole} from "../../../common/types.js";
 import preloadCss from "../../css/preload.css?raw";
@@ -19,7 +18,7 @@ import {contextMenu} from "./context-menu.js";
 
 const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
 
-type WebViewProps = {
+type WebViewProperties = {
   $root: Element;
   rootWebContents: WebContents;
   index: number;
@@ -36,24 +35,24 @@ type WebViewProps = {
 };
 
 export default class WebView {
-  static templateHtml(props: WebViewProps): Html {
+  static templateHtml(properties: WebViewProperties): Html {
     return html`
       <div class="webview-pane">
         <div
           class="webview-unsupported"
-          ${props.unsupportedMessage === undefined ? html`hidden` : html``}
+          ${properties.unsupportedMessage === undefined ? html`hidden` : html``}
         >
           <span class="webview-unsupported-message"
-            >${props.unsupportedMessage ?? ""}</span
+            >${properties.unsupportedMessage ?? ""}</span
           >
           <span class="webview-unsupported-dismiss">×</span>
         </div>
         <webview
-          data-tab-id="${props.tabIndex}"
-          src="${props.url}"
-          ${props.preload === undefined
+          data-tab-id="${properties.tabIndex}"
+          src="${properties.url}"
+          ${properties.preload === undefined
             ? html``
-            : html`preload="${props.preload}"`}
+            : html`preload="${properties.preload}"`}
           partition="persist:webviewsession"
           allowpopups
         >
@@ -62,11 +61,11 @@ export default class WebView {
     `;
   }
 
-  static async create(props: WebViewProps): Promise<WebView> {
+  static async create(properties: WebViewProperties): Promise<WebView> {
     const $pane = generateNodeFromHtml(
-      WebView.templateHtml(props),
+      WebView.templateHtml(properties),
     ) as HTMLElement;
-    props.$root.append($pane);
+    properties.$root.append($pane);
 
     const $webview: HTMLElement = $pane.querySelector(":scope > webview")!;
     await new Promise<void>((resolve) => {
@@ -90,22 +89,21 @@ export default class WebView {
     }
 
     const selector = `webview[data-tab-id="${CSS.escape(
-      `${props.tabIndex}`,
+      `${properties.tabIndex}`,
     )}"]`;
     const webContentsId: unknown =
-      await props.rootWebContents.executeJavaScript(
+      await properties.rootWebContents.executeJavaScript(
         `(${getWebContentsIdFunction.toString()})(${JSON.stringify(selector)})`,
       );
     if (typeof webContentsId !== "number") {
       throw new TypeError("Failed to get WebContents ID");
     }
 
-    return new WebView(props, $pane, $webview, webContentsId);
+    return new WebView(properties, $pane, $webview, webContentsId);
   }
 
   badgeCount = 0;
   loading = true;
-  private zoomFactor = 1;
   private customCss: string | false | null;
   private readonly $webviewsContainer: DOMTokenList;
   private readonly $unsupported: HTMLElement;
@@ -114,7 +112,7 @@ export default class WebView {
   private unsupportedDismissed = false;
 
   private constructor(
-    readonly props: WebViewProps,
+    readonly properties: WebViewProperties,
     private readonly $pane: HTMLElement,
     private readonly $webview: HTMLElement,
     readonly webContentsId: number,
@@ -161,18 +159,15 @@ export default class WebView {
   }
 
   zoomIn(): void {
-    this.zoomFactor += 0.1;
-    this.getWebContents().setZoomFactor(this.zoomFactor);
+    this.getWebContents().zoomLevel += 0.5;
   }
 
   zoomOut(): void {
-    this.zoomFactor -= 0.1;
-    this.getWebContents().setZoomFactor(this.zoomFactor);
+    this.getWebContents().zoomLevel -= 0.5;
   }
 
   zoomActualSize(): void {
-    this.zoomFactor = 1;
-    this.getWebContents().setZoomFactor(this.zoomFactor);
+    this.getWebContents().zoomLevel = 0;
   }
 
   logOut(): void {
@@ -212,7 +207,7 @@ export default class WebView {
     // Shows the loading indicator till the webview is reloaded
     this.$webviewsContainer.remove("loaded");
     this.loading = true;
-    this.props.switchLoading(true, this.props.url);
+    this.properties.switchLoading(true, this.properties.url);
     this.getWebContents().reload();
   }
 
@@ -224,9 +219,9 @@ export default class WebView {
 
   send<Channel extends keyof RendererMessage>(
     channel: Channel,
-    ...args: Parameters<RendererMessage[Channel]>
+    ...arguments_: Parameters<RendererMessage[Channel]>
   ): void {
-    ipcRenderer.send("forward-to", this.webContentsId, channel, ...args);
+    ipcRenderer.send("forward-to", this.webContentsId, channel, ...arguments_);
   }
 
   private registerListeners(): void {
@@ -238,7 +233,7 @@ export default class WebView {
 
     webContents.on("page-title-updated", (_event, title) => {
       this.badgeCount = this.getBadgeCount(title);
-      this.props.onTitleChange();
+      this.properties.onTitleChange();
     });
 
     this.$webview.addEventListener("did-navigate-in-page", () => {
@@ -271,7 +266,7 @@ export default class WebView {
 
     this.$webview.addEventListener("dom-ready", () => {
       this.loading = false;
-      this.props.switchLoading(false, this.props.url);
+      this.properties.switchLoading(false, this.properties.url);
       this.show();
     });
 
@@ -280,24 +275,29 @@ export default class WebView {
         SystemUtil.connectivityError.includes(errorDescription);
       if (hasConnectivityError) {
         console.error("error", errorDescription);
-        if (!this.props.url.includes("network.html")) {
-          this.props.onNetworkError(this.props.index);
+        if (!this.properties.url.includes("network.html")) {
+          this.properties.onNetworkError(this.properties.index);
         }
       }
     });
 
     this.$webview.addEventListener("did-start-loading", () => {
-      this.props.switchLoading(true, this.props.url);
+      this.properties.switchLoading(true, this.properties.url);
     });
 
     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();
+    });
   }
 
   private getBadgeCount(title: string): number {
@@ -307,7 +307,7 @@ export default class WebView {
 
   private 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;
     }
 
@@ -316,7 +316,7 @@ export default class WebView {
 
     this.$pane.classList.add("active");
     this.focus();
-    this.props.onTitleChange();
+    this.properties.onTitleChange();
     // Injecting preload css in webview to override some css rules
     (async () => this.getWebContents().insertCSS(preloadCss))();
 

app/renderer/js/electron-bridge.ts

@@ -1,16 +1,17 @@
 import {EventEmitter} from "node:events";
 
-import type {ClipboardDecrypter} from "./clipboard-decrypter.js";
-import {ClipboardDecrypterImpl} from "./clipboard-decrypter.js";
-import type {NotificationData} from "./notification/index.js";
-import {newNotification} from "./notification/index.js";
+import {
+  type ClipboardDecrypter,
+  ClipboardDecrypterImplementation,
+} 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, ...args: unknown[]) => boolean;
+  send_event: (eventName: string | symbol, ...arguments_: unknown[]) => boolean;
   on_event: (eventName: string, listener: ListenerType) => void;
   new_notification: (
     title: string,
@@ -35,8 +36,8 @@ export const bridgeEvents = new EventEmitter(); // eslint-disable-line unicorn/p
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const electron_bridge: ElectronBridge = {
-  send_event: (eventName: string | symbol, ...args: unknown[]): boolean =>
-    bridgeEvents.emit(eventName, ...args),
+  send_event: (eventName: string | symbol, ...arguments_: unknown[]): boolean =>
+    bridgeEvents.emit(eventName, ...arguments_),
 
   on_event(eventName: string, listener: ListenerType): void {
     bridgeEvents.on(eventName, listener);
@@ -60,7 +61,7 @@ const electron_bridge: ElectronBridge = {
   },
 
   decrypt_clipboard: (version: number): ClipboardDecrypter =>
-    new ClipboardDecrypterImpl(version),
+    new ClipboardDecrypterImplementation(version),
 };
 /* eslint-enable @typescript-eslint/naming-convention */
 

app/renderer/js/main.ts

@@ -5,7 +5,7 @@ import url from "node:url";
 
 import {Menu, app, dialog, session} from "@electron/remote";
 import * as remote from "@electron/remote";
-import * as Sentry from "@sentry/electron";
+import * as Sentry from "@sentry/electron/renderer";
 
 import type {Config} from "../../common/config-util.js";
 import * as ConfigUtil from "../../common/config-util.js";
@@ -16,7 +16,11 @@ import * as LinkUtil from "../../common/link-util.js";
 import Logger from "../../common/logger-util.js";
 import * as Messages from "../../common/messages.js";
 import {bundlePath, bundleUrl} from "../../common/paths.js";
-import type {NavItem, ServerConf, TabData} from "../../common/types.js";
+import type {
+  NavigationItem,
+  ServerConfig,
+  TabData,
+} from "../../common/types.js";
 import defaultIcon from "../img/icon.png";
 
 import FunctionalTab from "./components/functional-tab.js";
@@ -248,8 +252,8 @@ export class ServerManagerView {
     // promise of addition resolves in both cases, but we consider it rejected
     // if the resolved value is false
     try {
-      const serverConf = await DomainUtil.checkDomain(domain);
-      await DomainUtil.addDomain(serverConf);
+      const serverConfig = await DomainUtil.checkDomain(domain);
+      await DomainUtil.addDomain(serverConfig);
       return true;
     } catch (error: unknown) {
       logger.error(error);
@@ -325,11 +329,14 @@ export class ServerManagerView {
       for (const [i, server] of servers.entries()) {
         const tab = this.initServer(server, i);
         (async () => {
-          const serverConf = await DomainUtil.updateSavedServer(server.url, i);
-          tab.setName(serverConf.alias);
-          tab.setIcon(DomainUtil.iconAsUrl(serverConf.icon));
+          const serverConfig = await DomainUtil.updateSavedServer(
+            server.url,
+            i,
+          );
+          tab.setName(serverConfig.alias);
+          tab.setIcon(DomainUtil.iconAsUrl(serverConfig.icon));
           (await tab.webview).setUnsupportedMessage(
-            DomainUtil.getUnsupportedMessage(serverConf),
+            DomainUtil.getUnsupportedMessage(serverConfig),
           );
         })();
       }
@@ -364,7 +371,7 @@ export class ServerManagerView {
     }
   }
 
-  initServer(server: ServerConf, index: number): ServerTab {
+  initServer(server: ServerConfig, index: number): ServerTab {
     const tabIndex = this.getTabIndex();
     const tab = new ServerTab({
       role: "server",
@@ -398,7 +405,7 @@ export class ServerManagerView {
           const tab = this.tabs[this.activeTabIndex];
           this.showLoading(
             tab instanceof ServerTab &&
-              this.loading.has((await tab.webview).props.url),
+              this.loading.has((await tab.webview).properties.url),
           );
         },
         onNetworkError: async (index: number) => {
@@ -481,7 +488,7 @@ export class ServerManagerView {
 
   async getCurrentActiveServer(): Promise<string> {
     const tab = this.tabs[this.activeTabIndex];
-    return tab instanceof ServerTab ? (await tab.webview).props.url : "";
+    return tab instanceof ServerTab ? (await tab.webview).properties.url : "";
   }
 
   displayInitialCharLogo($img: HTMLImageElement, index: number): void {
@@ -550,36 +557,36 @@ export class ServerManagerView {
     this.$serverIconTooltip[index].style.display = "none";
   }
 
-  async openFunctionalTab(tabProps: {
+  async openFunctionalTab(tabProperties: {
     name: string;
     materialIcon: string;
     makeView: () => Promise<Element>;
     destroyView: () => void;
   }): Promise<void> {
-    if (this.functionalTabs.has(tabProps.name)) {
-      await this.activateTab(this.functionalTabs.get(tabProps.name)!);
+    if (this.functionalTabs.has(tabProperties.name)) {
+      await this.activateTab(this.functionalTabs.get(tabProperties.name)!);
       return;
     }
 
     const index = this.tabs.length;
-    this.functionalTabs.set(tabProps.name, index);
+    this.functionalTabs.set(tabProperties.name, index);
 
     const tabIndex = this.getTabIndex();
-    const $view = await tabProps.makeView();
+    const $view = await tabProperties.makeView();
     this.$webviewsContainer.append($view);
 
     this.tabs.push(
       new FunctionalTab({
         role: "function",
-        materialIcon: tabProps.materialIcon,
-        name: tabProps.name,
+        materialIcon: tabProperties.materialIcon,
+        name: tabProperties.name,
         $root: this.$tabsContainer,
         index,
         tabIndex,
         onClick: this.activateTab.bind(this, index),
         onDestroy: async () => {
-          await this.destroyTab(tabProps.name, index);
-          tabProps.destroyView();
+          await this.destroyTab(tabProperties.name, index);
+          tabProperties.destroyView();
         },
         $view,
       }),
@@ -589,10 +596,12 @@ export class ServerManagerView {
     // closed when the functional tab DOM is ready, handled in webview.js
     this.$webviewsContainer.classList.remove("loaded");
 
-    await this.activateTab(this.functionalTabs.get(tabProps.name)!);
+    await this.activateTab(this.functionalTabs.get(tabProperties.name)!);
   }
 
-  async openSettings(nav: NavItem = "General"): Promise<void> {
+  async openSettings(
+    navigationItem: NavigationItem = "General",
+  ): Promise<void> {
     await this.openFunctionalTab({
       name: "Settings",
       materialIcon: "settings",
@@ -607,7 +616,7 @@ export class ServerManagerView {
       },
     });
     this.$settingsButton.classList.add("active");
-    this.preferenceView!.handleNavigation(nav);
+    this.preferenceView!.handleNavigation(navigationItem);
   }
 
   async openAbout(): Promise<void> {
@@ -646,13 +655,13 @@ export class ServerManagerView {
 
   // Returns this.tabs in an way that does
   // not crash app when this.tabs is passed into
-  // ipcRenderer. Something about webview, and props.webview
+  // ipcRenderer. Something about webview, and properties.webview
   // properties in ServerTab causes the app to crash.
   get tabsForIpc(): TabData[] {
     return this.tabs.map((tab) => ({
-      role: tab.props.role,
-      name: tab.props.name,
-      index: tab.props.index,
+      role: tab.properties.role,
+      name: tab.properties.name,
+      index: tab.properties.index,
     }));
   }
 
@@ -670,8 +679,8 @@ export class ServerManagerView {
       if (hideOldTab) {
         // If old tab is functional tab Settings, remove focus from the settings icon at sidebar bottom
         if (
-          this.tabs[this.activeTabIndex].props.role === "function" &&
-          this.tabs[this.activeTabIndex].props.name === "Settings"
+          this.tabs[this.activeTabIndex].properties.role === "function" &&
+          this.tabs[this.activeTabIndex].properties.name === "Settings"
         ) {
           this.$settingsButton.classList.remove("active");
         }
@@ -695,7 +704,7 @@ export class ServerManagerView {
 
     this.showLoading(
       tab instanceof ServerTab &&
-        this.loading.has((await tab.webview).props.url),
+        this.loading.has((await tab.webview).properties.url),
     );
 
     ipcRenderer.send("update-menu", {
@@ -704,7 +713,7 @@ export class ServerManagerView {
       tabs: this.tabsForIpc,
       activeTabIndex: this.activeTabIndex,
       // Following flag controls whether a menu item should be enabled or not
-      enableMenu: tab.props.role === "server",
+      enableMenu: tab.properties.role === "server",
     });
   }
 
@@ -721,7 +730,7 @@ export class ServerManagerView {
 
     await tab.destroy();
 
-    delete this.tabs[index];
+    delete this.tabs[index]; // eslint-disable-line @typescript-eslint/no-array-delete
     this.functionalTabs.delete(name);
 
     // Issue #188: If the functional tab was not focused, do not activate another tab.
@@ -746,7 +755,7 @@ export class ServerManagerView {
 
   async reloadView(): Promise<void> {
     // Save and remember the index of last active tab so that we can use it later
-    const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
+    const lastActiveTab = this.tabs[this.activeTabIndex].properties.index;
     ConfigUtil.setConfigItem("lastActiveTab", lastActiveTab);
 
     // Destroy the current view and re-initiate it
@@ -946,7 +955,7 @@ export class ServerManagerView {
                     const webview = await tab.webview;
                     return (
                       webview.webContentsId === webContentsId &&
-                      webview.props.hasPermission?.(origin, permission)
+                      webview.properties.hasPermission?.(origin, permission)
                     );
                   }),
                 )
@@ -1092,7 +1101,7 @@ export class ServerManagerView {
             (await tab.webview).webContentsId === webviewId
           ) {
             const concurrentTab: HTMLButtonElement = document.querySelector(
-              `div[data-tab-id="${CSS.escape(`${tab.props.tabIndex}`)}"]`,
+              `div[data-tab-id="${CSS.escape(`${tab.properties.tabIndex}`)}"]`,
             )!;
             concurrentTab.click();
           }
@@ -1107,22 +1116,22 @@ export class ServerManagerView {
         canvas.height = 128;
         canvas.width = 128;
         canvas.style.letterSpacing = "-5px";
-        const ctx = canvas.getContext("2d")!;
-        ctx.fillStyle = "#f42020";
-        ctx.beginPath();
-        ctx.ellipse(64, 64, 64, 64, 0, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.textAlign = "center";
-        ctx.fillStyle = "white";
+        const context = canvas.getContext("2d")!;
+        context.fillStyle = "#f42020";
+        context.beginPath();
+        context.ellipse(64, 64, 64, 64, 0, 0, 2 * Math.PI);
+        context.fill();
+        context.textAlign = "center";
+        context.fillStyle = "white";
         if (messageCount > 99) {
-          ctx.font = "65px Helvetica";
-          ctx.fillText("99+", 64, 85);
+          context.font = "65px Helvetica";
+          context.fillText("99+", 64, 85);
         } else if (messageCount < 10) {
-          ctx.font = "90px Helvetica";
-          ctx.fillText(String(Math.min(99, messageCount)), 64, 96);
+          context.font = "90px Helvetica";
+          context.fillText(String(Math.min(99, messageCount)), 64, 96);
         } else {
-          ctx.font = "85px Helvetica";
-          ctx.fillText(String(Math.min(99, messageCount)), 64, 90);
+          context.font = "85px Helvetica";
+          context.fillText(String(Math.min(99, messageCount)), 64, 90);
         }
 
         return canvas;

app/renderer/js/notification/index.ts

@@ -18,10 +18,10 @@ export function newNotification(
 ): NotificationData {
   const notification = new Notification(title, {...options, silent: true});
   for (const type of ["click", "close", "error", "show"]) {
-    notification.addEventListener(type, (ev) => {
+    notification.addEventListener(type, (event) => {
       if (type === "click") ipcRenderer.send("focus-this-webview");
-      if (!dispatch(type, ev)) {
-        ev.preventDefault();
+      if (!dispatch(type, event)) {
+        event.preventDefault();
       }
     });
   }

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

@@ -1,17 +1,16 @@
-import type {Html} from "../../../../common/html.js";
-import {html} from "../../../../common/html.js";
+import {type Html, html} from "../../../../common/html.js";
 import {generateNodeFromHtml} from "../../components/base.js";
 import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
-type BaseSectionProps = {
+type BaseSectionProperties = {
   $element: HTMLElement;
   disabled?: boolean;
   value: boolean;
   clickHandler: () => void;
 };
 
-export function generateSettingOption(props: BaseSectionProps): void {
-  const {$element, disabled, value, clickHandler} = props;
+export function generateSettingOption(properties: BaseSectionProperties): void {
+  const {$element, disabled, value, clickHandler} = properties;
 
   $element.textContent = "";
 
@@ -30,8 +29,7 @@ export function generateOptionHtml(
   disabled?: boolean,
 ): Html {
   const labelHtml = disabled
-    ? // eslint-disable-next-line unicorn/template-indent
-      html`<label
+    ? html`<label
         class="disallowed"
         title="Setting locked by system administrator."
       ></label>`

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

@@ -7,13 +7,13 @@ import {reloadApp} from "./base-section.js";
 import {initFindAccounts} from "./find-accounts.js";
 import {initServerInfoForm} from "./server-info-form.js";
 
-type ConnectedOrgSectionProps = {
+type ConnectedOrgSectionProperties = {
   $root: Element;
 };
 
 export function initConnectedOrgSection({
   $root,
-}: ConnectedOrgSectionProps): void {
+}: ConnectedOrgSectionProperties): void {
   $root.textContent = "";
 
   const servers = DomainUtil.getDomains();

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

@@ -3,7 +3,7 @@ import * as LinkUtil from "../../../../common/link-util.js";
 import * as t from "../../../../common/translation-util.js";
 import {generateNodeFromHtml} from "../../components/base.js";
 
-type FindAccountsProps = {
+type FindAccountsProperties = {
   $root: Element;
 };
 
@@ -19,7 +19,7 @@ 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`
     <div class="settings-card certificate-card">
       <div class="certificate-input">
@@ -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",
   )!;

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

@@ -20,11 +20,11 @@ import {generateSelectHtml, generateSettingOption} from "./base-section.js";
 
 const currentBrowserWindow = remote.getCurrentWindow();
 
-type GeneralSectionProps = {
+type GeneralSectionProperties = {
   $root: Element;
 };
 
-export function initGeneralSection({$root}: GeneralSectionProps): void {
+export function initGeneralSection({$root}: GeneralSectionProperties): void {
   $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Appearance")}</div>

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

@@ -1,19 +1,18 @@
-import type {Html} from "../../../../common/html.js";
-import {html} from "../../../../common/html.js";
+import {type Html, html} from "../../../../common/html.js";
 import * as t from "../../../../common/translation-util.js";
-import type {NavItem} from "../../../../common/types.js";
+import type {NavigationItem} from "../../../../common/types.js";
 import {generateNodeFromHtml} from "../../components/base.js";
 
-type PreferenceNavProps = {
+type PreferenceNavigationProperties = {
   $root: Element;
-  onItemSelected: (navItem: NavItem) => void;
+  onItemSelected: (navigationItem: NavigationItem) => void;
 };
 
-export default class PreferenceNav {
-  navItems: NavItem[];
+export default class PreferenceNavigation {
+  navigationItems: NavigationItem[];
   $el: Element;
-  constructor(private readonly props: PreferenceNavProps) {
-    this.navItems = [
+  constructor(private readonly properties: PreferenceNavigationProperties) {
+    this.navigationItems = [
       "General",
       "Network",
       "AddServer",
@@ -22,15 +21,17 @@ export default class PreferenceNav {
     ];
 
     this.$el = generateNodeFromHtml(this.templateHtml());
-    this.props.$root.append(this.$el);
+    this.properties.$root.append(this.$el);
     this.registerListeners();
   }
 
   templateHtml(): Html {
-    const navItemsHtml = html``.join(
-      this.navItems.map(
-        (navItem) => html`
-          <div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>
+    const navigationItemsHtml = html``.join(
+      this.navigationItems.map(
+        (navigationItem) => html`
+          <div class="nav" id="nav-${navigationItem}">
+            ${t.__(navigationItem)}
+          </div>
         `,
       ),
     );
@@ -38,37 +39,39 @@ export default class PreferenceNav {
     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) {
-      const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+    for (const navigationItem of this.navigationItems) {
+      const $item = this.$el.querySelector(
+        `#nav-${CSS.escape(navigationItem)}`,
+      )!;
       $item.addEventListener("click", () => {
-        this.props.onItemSelected(navItem);
+        this.properties.onItemSelected(navigationItem);
       });
     }
   }
 
-  select(navItemToSelect: NavItem): void {
-    for (const navItem of this.navItems) {
-      if (navItem === navItemToSelect) {
-        this.activate(navItem);
+  select(navigationItemToSelect: NavigationItem): void {
+    for (const navigationItem of this.navigationItems) {
+      if (navigationItem === navigationItemToSelect) {
+        this.activate(navigationItem);
       } else {
-        this.deactivate(navItem);
+        this.deactivate(navigationItem);
       }
     }
   }
 
-  activate(navItem: NavItem): void {
-    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+  activate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
     $item.classList.add("active");
   }
 
-  deactivate(navItem: NavItem): void {
-    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+  deactivate(navigationItem: NavigationItem): void {
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navigationItem)}`)!;
     $item.classList.remove("active");
   }
 }

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

@@ -5,11 +5,11 @@ import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
 import {generateSettingOption} from "./base-section.js";
 
-type NetworkSectionProps = {
+type NetworkSectionProperties = {
   $root: Element;
 };
 
-export function initNetworkSection({$root}: NetworkSectionProps): void {
+export function initNetworkSection({$root}: NetworkSectionProperties): void {
   $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Proxy")}</div>

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

@@ -7,12 +7,15 @@ import {generateNodeFromHtml} from "../../components/base.js";
 import {ipcRenderer} from "../../typed-ipc-renderer.js";
 import * as DomainUtil from "../../utils/domain-util.js";
 
-type NewServerFormProps = {
+type NewServerFormProperties = {
   $root: Element;
   onChange: () => void;
 };
 
-export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
+export function initNewServerForm({
+  $root,
+  onChange,
+}: NewServerFormProperties): void {
   const $newServerForm = generateNodeFromHtml(html`
     <div class="server-input-container">
       <div class="title">${t.__("Organization URL")}</div>
@@ -58,9 +61,9 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
 
   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({
@@ -74,7 +77,7 @@ export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
       return;
     }
 
-    await DomainUtil.addDomain(serverConf);
+    await DomainUtil.addDomain(serverConfig);
     onChange();
   }
 

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

@@ -3,7 +3,7 @@ import process from "node:process";
 
 import type {DndSettings} from "../../../../common/dnd-util.js";
 import {bundleUrl} from "../../../../common/paths.js";
-import type {NavItem} from "../../../../common/types.js";
+import type {NavigationItem} from "../../../../common/types.js";
 import {ipcRenderer} from "../../typed-ipc-renderer.js";
 
 import {initConnectedOrgSection} from "./connected-org-section.js";
@@ -26,7 +26,7 @@ export class PreferenceView {
   private readonly $shadow: ShadowRoot;
   private readonly $settingsContainer: Element;
   private readonly nav: Nav;
-  private navItem: NavItem = "General";
+  private navigationItem: NavigationItem = "General";
 
   private constructor(templateHtml: string) {
     this.$view = document.createElement("div");
@@ -47,13 +47,13 @@ export class PreferenceView {
     ipcRenderer.on("toggle-autohide-menubar", this.handleToggleMenubar);
     ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
 
-    this.handleNavigation(this.navItem);
+    this.handleNavigation(this.navigationItem);
   }
 
-  handleNavigation = (navItem: NavItem): void => {
-    this.navItem = navItem;
-    this.nav.select(navItem);
-    switch (navItem) {
+  handleNavigation = (navigationItem: NavigationItem): void => {
+    this.navigationItem = navigationItem;
+    this.nav.select(navigationItem);
+    switch (navigationItem) {
       case "AddServer": {
         initServersSection({
           $root: this.$settingsContainer,
@@ -88,13 +88,9 @@ export class PreferenceView {
         });
         break;
       }
-
-      default: {
-        ((n: never) => n)(navItem);
-      }
     }
 
-    window.location.hash = `#${navItem}`;
+    window.location.hash = `#${navigationItem}`;
   };
 
   handleToggleTray(state: boolean) {

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

@@ -3,35 +3,35 @@ import {dialog} from "@electron/remote";
 import {html} from "../../../../common/html.js";
 import * as Messages from "../../../../common/messages.js";
 import * as t from "../../../../common/translation-util.js";
-import type {ServerConf} from "../../../../common/types.js";
+import type {ServerConfig} from "../../../../common/types.js";
 import {generateNodeFromHtml} from "../../components/base.js";
 import {ipcRenderer} from "../../typed-ipc-renderer.js";
 import * as DomainUtil from "../../utils/domain-util.js";
 
-type ServerInfoFormProps = {
+type ServerInfoFormProperties = {
   $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`
     <div class="settings-card">
       <div class="server-info-left">
         <img
           class="server-info-icon"
-          src="${DomainUtil.iconAsUrl(props.server.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}"
-            >${props.server.url}</span
+          <span class="server-url-info" title="${properties.server.url}"
+            >${properties.server.url}</span
           >
         </div>
         <div class="server-info-row">
@@ -48,7 +48,7 @@ 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({
@@ -58,11 +58,11 @@ export function initServerInfoForm(props: ServerInfoFormProps): void {
       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);
       }
@@ -70,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

@@ -4,11 +4,11 @@ import * as t from "../../../../common/translation-util.js";
 import {reloadApp} from "./base-section.js";
 import {initNewServerForm} from "./new-server-form.js";
 
-type ServersSectionProps = {
+type ServersSectionProperties = {
   $root: Element;
 };
 
-export function initServersSection({$root}: ServersSectionProps): void {
+export function initServersSection({$root}: ServersSectionProperties): void {
   $root.innerHTML = html`
     <div class="add-server-modal">
       <div class="modal-container">

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

@@ -4,12 +4,14 @@ import {html} from "../../../../common/html.js";
 import * as LinkUtil from "../../../../common/link-util.js";
 import * as t from "../../../../common/translation-util.js";
 
-type ShortcutsSectionProps = {
+type ShortcutsSectionProperties = {
   $root: Element;
 };
 
 // eslint-disable-next-line complexity
-export function initShortcutsSection({$root}: ShortcutsSectionProps): void {
+export function initShortcutsSection({
+  $root,
+}: ShortcutsSectionProperties): void {
   const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
 
   $root.innerHTML = html`

app/renderer/js/tray.ts

@@ -1,5 +1,4 @@
-import type {NativeImage} from "electron/common";
-import {nativeImage} from "electron/common";
+import {type NativeImage, nativeImage} from "electron/common";
 import type {Tray as ElectronTray} from "electron/main";
 import path from "node:path";
 import process from "node:process";
@@ -64,8 +63,8 @@ const config = {
   thick: process.platform === "win32",
 };
 
-const renderCanvas = function (arg: number): HTMLCanvasElement {
-  config.unreadCount = arg;
+const renderCanvas = function (argument: number): HTMLCanvasElement {
+  config.unreadCount = argument;
 
   const size = config.size * config.pixelRatio;
   const padding = size * 0.05;
@@ -79,30 +78,34 @@ const renderCanvas = function (arg: number): HTMLCanvasElement {
   const canvas = document.createElement("canvas");
   canvas.width = size;
   canvas.height = size;
-  const ctx = canvas.getContext("2d")!;
+  const context = canvas.getContext("2d")!;
 
   // Circle
   // If (!config.thick || config.thick && hasCount) {
-  ctx.beginPath();
-  ctx.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
-  ctx.fillStyle = backgroundColor;
-  ctx.fill();
-  ctx.lineWidth = size / (config.thick ? 10 : 20);
-  ctx.strokeStyle = backgroundColor;
-  ctx.stroke();
+  context.beginPath();
+  context.arc(center, center, size / 2 - padding, 0, 2 * Math.PI, false);
+  context.fillStyle = backgroundColor;
+  context.fill();
+  context.lineWidth = size / (config.thick ? 10 : 20);
+  context.strokeStyle = backgroundColor;
+  context.stroke();
   // Count or Icon
   if (hasCount) {
-    ctx.fillStyle = color;
-    ctx.textAlign = "center";
+    context.fillStyle = color;
+    context.textAlign = "center";
     if (config.unreadCount > 99) {
-      ctx.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
-      ctx.fillText("99+", center, center + size * 0.15);
+      context.font = `${config.thick ? "bold " : ""}${size * 0.4}px Helvetica`;
+      context.fillText("99+", center, center + size * 0.15);
     } else if (config.unreadCount < 10) {
-      ctx.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
-      ctx.fillText(String(config.unreadCount), center, center + size * 0.2);
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      context.fillText(String(config.unreadCount), center, center + size * 0.2);
     } else {
-      ctx.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
-      ctx.fillText(String(config.unreadCount), center, center + size * 0.15);
+      context.font = `${config.thick ? "bold " : ""}${size * 0.5}px Helvetica`;
+      context.fillText(
+        String(config.unreadCount),
+        center,
+        center + size * 0.15,
+      );
     }
   }
 
@@ -114,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();
@@ -130,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];
 
@@ -138,7 +141,7 @@ function sendAction<Channel extends keyof RendererMessage>(
     win.restore();
   }
 
-  ipcRenderer.send("forward-to", win.webContents.id, channel, ...args);
+  ipcRenderer.send("forward-to", win.webContents.id, channel, ...arguments_);
 }
 
 const createTray = function (): void {
@@ -189,22 +192,22 @@ export function initializeTray(serverManagerView: ServerManagerView) {
     }
   });
 
-  ipcRenderer.on("tray", (_event, arg: number): void => {
+  ipcRenderer.on("tray", (_event, argument: number): void => {
     if (!tray) {
       return;
     }
 
     // We don't want to create tray from unread messages on macOS since it already has dock badges.
     if (process.platform === "linux" || process.platform === "win32") {
-      if (arg === 0) {
-        unread = arg;
+      if (argument === 0) {
+        unread = argument;
         tray.setImage(iconPath());
         tray.setToolTip("No unread messages");
       } else {
-        unread = arg;
-        const image = renderNativeImage(arg);
+        unread = argument;
+        const image = renderNativeImage(argument);
         tray.setImage(image);
-        tray.setToolTip(`${arg} unread messages`);
+        tray.setToolTip(`${argument} unread messages`);
       }
     }
   });

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

@@ -1,5 +1,5 @@
-import type {IpcRendererEvent} from "electron/renderer";
 import {
+  type IpcRendererEvent,
   ipcRenderer as untypedIpcRenderer, // eslint-disable-line no-restricted-imports
 } from "electron/renderer";
 
@@ -10,8 +10,8 @@ import type {
 } from "../../common/typed-ipc.js";
 
 type RendererListener<Channel extends keyof RendererMessage> =
-  RendererMessage[Channel] extends (...args: infer Args) => void
-    ? (event: IpcRendererEvent, ...args: Args) => void
+  RendererMessage[Channel] extends (...arguments_: infer Arguments) => void
+    ? (event: IpcRendererEvent, ...arguments_: Arguments) => void
     : never;
 
 export const ipcRenderer: {
@@ -35,25 +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,
-    ...args: Parameters<RendererMessage[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,
@@ -64,6 +64,6 @@ export const ipcRenderer: {
   ): 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

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 
 import {app, dialog} from "@electron/remote";
-import * as Sentry from "@sentry/electron";
+import * as Sentry from "@sentry/electron/renderer";
 import {JsonDB} from "node-json-db";
 import {DataError} from "node-json-db/dist/lib/Errors";
 import {z} from "zod";
@@ -11,7 +11,7 @@ import * as EnterpriseUtil from "../../../common/enterprise-util.js";
 import Logger from "../../../common/logger-util.js";
 import * as Messages from "../../../common/messages.js";
 import * as t from "../../../common/translation-util.js";
-import type {ServerConf} from "../../../common/types.js";
+import type {ServerConfig} from "../../../common/types.js";
 import defaultIcon from "../../img/icon.png";
 import {ipcRenderer} from "../typed-ipc-renderer.js";
 
@@ -23,7 +23,7 @@ const logger = new Logger({
 // 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(),
   alias: z.string(),
   icon: z.string(),
@@ -31,45 +31,49 @@ const serverConfSchema = z.object({
   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[] {
-  reloadDb();
+export function getDomains(): ServerConfig[] {
+  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 {
-  reloadDb();
-  return serverConfSchema.parse(db.getObject<unknown>(`/domains[${index}]`));
+export function getDomain(index: number): ServerConfig {
+  reloadDatabase();
+  return serverConfigSchema.parse(
+    database.getObject<unknown>(`/domains[${index}]`),
+  );
 }
 
-export function updateDomain(index: number, server: ServerConf): void {
-  reloadDb();
-  serverConfSchema.parse(server);
-  db.push(`/domains[${index}]`, server, true);
+export function updateDomain(index: number, server: ServerConfig): void {
+  reloadDatabase();
+  serverConfigSchema.parse(server);
+  database.push(`/domains[${index}]`, server, true);
 }
 
 export async function addDomain(server: {
@@ -80,20 +84,20 @@ export async function addDomain(server: {
   if (server.icon) {
     const localIconUrl = await saveServerIcon(server.icon);
     server.icon = localIconUrl;
-    serverConfSchema.parse(server);
-    db.push("/domains[]", server, true);
-    reloadDb();
+    serverConfigSchema.parse(server);
+    database.push("/domains[]", server, true);
+    reloadDatabase();
   } else {
     server.icon = defaultIconSentinel;
-    serverConfSchema.parse(server);
-    db.push("/domains[]", server, true);
-    reloadDb();
+    serverConfigSchema.parse(server);
+    database.push("/domains[]", server, true);
+    reloadDatabase();
   }
 }
 
 export function removeDomains(): void {
-  db.delete("/domains");
-  reloadDb();
+  database.delete("/domains");
+  reloadDatabase();
 }
 
 export function removeDomain(index: number): boolean {
@@ -101,8 +105,8 @@ export function removeDomain(index: number): boolean {
     return false;
   }
 
-  db.delete(`/domains[${index}]`);
-  reloadDb();
+  database.delete(`/domains[${index}]`);
+  reloadDatabase();
   return true;
 }
 
@@ -115,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.");
@@ -130,7 +134,7 @@ 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);
 }
 
@@ -144,29 +148,29 @@ export async function saveServerIcon(iconURL: string): Promise<string> {
 export async function updateSavedServer(
   url: string,
   index: number,
-): Promise<ServerConf> {
+): Promise<ServerConfig> {
   // Does not promise successful update
-  const serverConf = getDomain(index);
-  const oldIcon = serverConf.icon;
+  const serverConfig = getDomain(index);
+  const oldIcon = serverConfig.icon;
   try {
-    const newServerConf = await checkDomain(url, true);
-    const localIconUrl = await saveServerIcon(newServerConf.icon);
+    const newServerConfig = await checkDomain(url, true);
+    const localIconUrl = await saveServerIcon(newServerConfig.icon);
     if (!oldIcon || localIconUrl !== defaultIconSentinel) {
-      newServerConf.icon = localIconUrl;
-      updateDomain(index, newServerConf);
-      reloadDb();
+      newServerConfig.icon = localIconUrl;
+      updateDomain(index, newServerConfig);
+      reloadDatabase();
     }
 
-    return newServerConf;
+    return newServerConfig;
   } catch (error: unknown) {
     logger.log("Could not update server icon.");
     logger.log(error);
     Sentry.captureException(error);
-    return serverConf;
+    return serverConfig;
   }
 }
 
-function reloadDb(): void {
+function reloadDatabase(): void {
   const domainJsonPath = path.join(
     app.getPath("userData"),
     "config/domain.json",
@@ -188,7 +192,7 @@ function reloadDb(): void {
     }
   }
 
-  db = new JsonDB(domainJsonPath, true, true);
+  database = new JsonDB(domainJsonPath, true, true);
 }
 
 export function formatUrl(domain: string): string {
@@ -203,7 +207,9 @@ export function formatUrl(domain: string): string {
   return `https://${domain}`;
 }
 
-export function getUnsupportedMessage(server: ServerConf): string | undefined {
+export function getUnsupportedMessage(
+  server: ServerConfig,
+): string | undefined {
   if (server.zulipFeatureLevel < 65 /* Zulip Server 4.0 */) {
     const realm = new URL(server.url).hostname;
     return t.__(

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

@@ -15,7 +15,7 @@ export default class ReconnectUtil {
   fibonacciBackoff: backoff.Backoff;
 
   constructor(webview: WebView) {
-    this.url = webview.props.url;
+    this.url = webview.properties.url;
     this.alreadyReloaded = false;
     this.fibonacciBackoff = backoff.fibonacci({
       initialDelay: 5000,

app/renderer/main.html

@@ -2,6 +2,10 @@
 <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/fonts.css" />

app/renderer/network.html

@@ -2,6 +2,10 @@
 <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

changelog.md

@@ -2,6 +2,31 @@
 
 All notable changes to the Zulip desktop app are documented in this file.
 
+### v5.11.0 --2024-03-22
+
+**Fixes**:
+
+- Removed the popup dialog for certificate errors when loading subresources such as images.
+- Allowed hiding the window from full screen mode on macOS.
+
+**Enhancements**:
+
+- Enabled zooming with Ctrl+mouse wheel on Linux and Windows.
+
+**Dependencies**:
+
+- Upgraded all dependencies, including Electron 29.1.5.
+
+### v5.10.5 --2024-01-25
+
+**Dependencies**:
+
+- Upgraded all dependencies, including Electron 28.2.0.
+
+**Enhancements**:
+
+- Improved security hardening by setting a Content-Security-Policy for the app UI.
+
 ### v5.10.4 --2024-01-09
 
 **Dependencies**:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "5.10.4",
+  "version": "5.11.0",
   "main": "./dist-electron",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
@@ -147,19 +147,20 @@
   },
   "devDependencies": {
     "@electron/remote": "^2.0.8",
+    "@sentry/core": "^7.94.1",
     "@sentry/electron": "^4.1.2",
     "@types/adm-zip": "^0.5.0",
     "@types/auto-launch": "^5.0.2",
     "@types/backoff": "^2.5.2",
     "@types/i18n": "^0.13.1",
-    "@types/node": "~18.17.19",
+    "@types/node": "^20.11.30",
     "@types/requestidlecallback": "^0.3.4",
     "@types/yaireo__tagify": "^4.3.2",
     "@yaireo/tagify": "^4.5.0",
     "adm-zip": "^0.5.5",
     "auto-launch": "^5.0.5",
     "backoff": "^2.5.0",
-    "electron": "^28.1.1",
+    "electron": "^29.1.5",
     "electron-builder": "^24.6.4",
     "electron-log": "^5.0.3",
     "electron-updater": "^6.1.4",
@@ -181,7 +182,7 @@
     "typescript": "^5.0.4",
     "vite": "^5.0.11",
     "vite-plugin-electron": "^0.28.0",
-    "xo": "^0.56.0",
+    "xo": "^0.58.0",
     "zod": "^3.5.1"
   },
   "prettier": {
@@ -239,6 +240,10 @@
         "error",
         {
           "paths": [
+            {
+              "name": "@sentry/electron",
+              "message": "Use @sentry/electron/main, @sentry/electron/renderer, or @sentry/core."
+            },
             {
               "name": "electron",
               "message": "Use electron/main, electron/renderer, or electron/common."
@@ -256,6 +261,10 @@
                 "ipcRenderer"
               ],
               "message": "Use typed-ipc-renderer."
+            },
+            {
+              "name": "electron-log",
+              "message": "Use electron-log/main or electron-log/renderer."
             }
           ]
         }

tests/setup.js

@@ -10,7 +10,7 @@ const testsPkg = require("./package.json");
 module.exports = {
   createApp,
   endTest,
-  resetTestDataDir,
+  resetTestDataDir: resetTestDataDirectory,
 };
 
 // Runs Zulip Desktop.
@@ -26,7 +26,7 @@ async function endTest(app) {
   await app.close();
 }
 
-function getAppDataDir() {
+function getAppDataDirectory() {
   let base;
 
   switch (process.platform) {
@@ -56,7 +56,7 @@ function getAppDataDir() {
 }
 
 // Resets the test directory, containing domain.json, window-state.json, etc
-function resetTestDataDir() {
-  const appDataDir = getAppDataDir();
-  rimraf.sync(appDataDir);
+function resetTestDataDirectory() {
+  const appDataDirectory = getAppDataDirectory();
+  rimraf.sync(appDataDirectory);
 }