Explode GeneralSection class to a function.

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

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

@@ -8,7 +8,6 @@ import ISO6391 from "iso-639-1";
 
 import * as ConfigUtil from "../../../../common/config-util";
 import * as EnterpriseUtil from "../../../../common/enterprise-util";
-import type {HTML} from "../../../../common/html";
 import {html} from "../../../../common/html";
 import * as t from "../../../../common/translation-util";
 import supportedLocales from "../../../../translations/supported-locales.json";
@@ -22,312 +21,300 @@ interface GeneralSectionProps {
   $root: Element;
 }
 
-export default class GeneralSection {
-  props: GeneralSectionProps;
-  constructor(props: GeneralSectionProps) {
-    this.props = props;
-  }
-
-  templateHTML(): HTML {
-    return html`
-      <div class="settings-pane">
-        <div class="title">${t.__("Appearance")}</div>
-        <div id="appearance-option-settings" class="settings-card">
-          <div class="setting-row" id="tray-option">
-            <div class="setting-description">
-              ${t.__("Show app icon in system tray")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div
-            class="setting-row"
-            id="menubar-option"
-            style="display:${process.platform === "darwin" ? "none" : ""}"
-          >
-            <div class="setting-description">
-              ${t.__("Auto hide menu bar (Press Alt key to display)")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="sidebar-option">
-            <div class="setting-description">
-              ${t.__("Show sidebar")} (<span class="code"
-                >${process.platform === "darwin"
-                  ? "Cmd+Shift+S"
-                  : "Ctrl+Shift+S"}</span
-              >)
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="badge-option">
-            <div class="setting-description">
-              ${t.__("Show app unread badge")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div
-            class="setting-row"
-            id="dock-bounce-option"
-            style="display:${process.platform === "darwin" ? "" : "none"}"
-          >
-            <div class="setting-description">
-              ${t.__("Bounce dock on new private message")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div
-            class="setting-row"
-            id="flash-taskbar-option"
-            style="display:${process.platform === "win32" ? "" : "none"}"
-          >
-            <div class="setting-description">
-              ${t.__("Flash taskbar on new message")}
-            </div>
-            <div class="setting-control"></div>
+export function initGeneralSection(props: GeneralSectionProps): void {
+  props.$root.innerHTML = html`
+    <div class="settings-pane">
+      <div class="title">${t.__("Appearance")}</div>
+      <div id="appearance-option-settings" class="settings-card">
+        <div class="setting-row" id="tray-option">
+          <div class="setting-description">
+            ${t.__("Show app icon in system tray")}
           </div>
+          <div class="setting-control"></div>
         </div>
-        <div class="title">${t.__("Desktop Notifications")}</div>
-        <div class="settings-card">
-          <div class="setting-row" id="show-notification-option">
-            <div class="setting-description">
-              ${t.__("Show desktop notifications")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="silent-option">
-            <div class="setting-description">
-              ${t.__("Mute all sounds from Zulip")}
-            </div>
-            <div class="setting-control"></div>
+        <div
+          class="setting-row"
+          id="menubar-option"
+          style="display:${process.platform === "darwin" ? "none" : ""}"
+        >
+          <div class="setting-description">
+            ${t.__("Auto hide menu bar (Press Alt key to display)")}
           </div>
+          <div class="setting-control"></div>
         </div>
-        <div class="title">${t.__("App Updates")}</div>
-        <div class="settings-card">
-          <div class="setting-row" id="autoupdate-option">
-            <div class="setting-description">
-              ${t.__("Enable auto updates")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="betaupdate-option">
-            <div class="setting-description">${t.__("Get beta updates")}</div>
-            <div class="setting-control"></div>
+        <div class="setting-row" id="sidebar-option">
+          <div class="setting-description">
+            ${t.__("Show sidebar")} (<span class="code"
+              >${process.platform === "darwin"
+                ? "Cmd+Shift+S"
+                : "Ctrl+Shift+S"}</span
+            >)
           </div>
+          <div class="setting-control"></div>
         </div>
-        <div class="title">${t.__("Functionality")}</div>
-        <div class="settings-card">
-          <div class="setting-row" id="startAtLogin-option">
-            <div class="setting-description">${t.__("Start app at login")}</div>
-            <div class="setting-control"></div>
+        <div class="setting-row" id="badge-option">
+          <div class="setting-description">
+            ${t.__("Show app unread badge")}
           </div>
-          <div class="setting-row" id="start-minimize-option">
-            <div class="setting-description">
-              ${t.__("Always start minimized")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="quitOnClose-option">
-            <div class="setting-description">
-              ${t.__("Quit when the window is closed")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div class="setting-row" id="enable-spellchecker-option">
-            <div class="setting-description">
-              ${t.__("Enable spellchecker (requires restart)")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-          <div
-            class="setting-row"
-            id="spellcheck-langs"
-            style="display:${process.platform === "darwin" ? "none" : ""}"
-          ></div>
-          <div class="setting-row" id="note"></div>
+          <div class="setting-control"></div>
         </div>
-
-        <div class="title">${t.__("Advanced")}</div>
-        <div class="settings-card">
-          <div class="setting-row" id="enable-error-reporting">
-            <div class="setting-description">
-              ${t.__("Enable error reporting (requires restart)")}
-            </div>
-            <div class="setting-control"></div>
-          </div>
-
-          <div class="setting-row" id="app-language">
-            <div class="setting-description">
-              ${t.__("App language (requires restart)")}
-            </div>
-            <div id="lang-div" class="lang-div"></div>
-          </div>
-
-          <div class="setting-row" id="add-custom-css">
-            <div class="setting-description">${t.__("Add custom CSS")}</div>
-            <button class="custom-css-button green">${t.__("Upload")}</button>
-          </div>
-          <div class="setting-row" id="remove-custom-css">
-            <div class="setting-description">
-              <div class="selected-css-path" id="custom-css-path">
-                ${ConfigUtil.getConfigString("customCSS", "")}
-              </div>
-            </div>
-            <div class="action red" id="css-delete-action">
-              <i class="material-icons">indeterminate_check_box</i>
-              <span>${t.__("Delete")}</span>
-            </div>
-          </div>
-          <div class="setting-row" id="download-folder">
-            <div class="setting-description">
-              ${t.__("Default download location")}
-            </div>
-            <button class="download-folder-button green">
-              ${t.__("Change")}
-            </button>
-          </div>
-          <div class="setting-row">
-            <div class="setting-description">
-              <div class="download-folder-path">
-                ${ConfigUtil.getConfigString(
-                  "downloadsPath",
-                  app.getPath("downloads"),
-                )}
-              </div>
-            </div>
-          </div>
-          <div class="setting-row" id="prompt-download">
-            <div class="setting-description">
-              ${t.__("Ask where to save files before downloading")}
-            </div>
-            <div class="setting-control"></div>
+        <div
+          class="setting-row"
+          id="dock-bounce-option"
+          style="display:${process.platform === "darwin" ? "" : "none"}"
+        >
+          <div class="setting-description">
+            ${t.__("Bounce dock on new private message")}
           </div>
+          <div class="setting-control"></div>
         </div>
-        <div class="title">${t.__("Factory Reset Data")}</div>
-        <div class="settings-card">
-          <div class="setting-row" id="factory-reset-option">
-            <div class="setting-description">
-              ${t.__(
-                "Reset the application, thus deleting all the connected organizations and accounts.",
-              )}
-            </div>
-            <button class="factory-reset-button red w-150">
-              ${t.__("Factory Reset")}
-            </button>
+        <div
+          class="setting-row"
+          id="flash-taskbar-option"
+          style="display:${process.platform === "win32" ? "" : "none"}"
+        >
+          <div class="setting-description">
+            ${t.__("Flash taskbar on new message")}
           </div>
+          <div class="setting-control"></div>
         </div>
       </div>
-    `;
+      <div class="title">${t.__("Desktop Notifications")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="show-notification-option">
+          <div class="setting-description">
+            ${t.__("Show desktop notifications")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="silent-option">
+          <div class="setting-description">
+            ${t.__("Mute all sounds from Zulip")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("App Updates")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="autoupdate-option">
+          <div class="setting-description">${t.__("Enable auto updates")}</div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="betaupdate-option">
+          <div class="setting-description">${t.__("Get beta updates")}</div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("Functionality")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="startAtLogin-option">
+          <div class="setting-description">${t.__("Start app at login")}</div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="start-minimize-option">
+          <div class="setting-description">
+            ${t.__("Always start minimized")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="quitOnClose-option">
+          <div class="setting-description">
+            ${t.__("Quit when the window is closed")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div class="setting-row" id="enable-spellchecker-option">
+          <div class="setting-description">
+            ${t.__("Enable spellchecker (requires restart)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+        <div
+          class="setting-row"
+          id="spellcheck-langs"
+          style="display:${process.platform === "darwin" ? "none" : ""}"
+        ></div>
+        <div class="setting-row" id="note"></div>
+      </div>
+
+      <div class="title">${t.__("Advanced")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="enable-error-reporting">
+          <div class="setting-description">
+            ${t.__("Enable error reporting (requires restart)")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+
+        <div class="setting-row" id="app-language">
+          <div class="setting-description">
+            ${t.__("App language (requires restart)")}
+          </div>
+          <div id="lang-div" class="lang-div"></div>
+        </div>
+
+        <div class="setting-row" id="add-custom-css">
+          <div class="setting-description">${t.__("Add custom CSS")}</div>
+          <button class="custom-css-button green">${t.__("Upload")}</button>
+        </div>
+        <div class="setting-row" id="remove-custom-css">
+          <div class="setting-description">
+            <div class="selected-css-path" id="custom-css-path">
+              ${ConfigUtil.getConfigString("customCSS", "")}
+            </div>
+          </div>
+          <div class="action red" id="css-delete-action">
+            <i class="material-icons">indeterminate_check_box</i>
+            <span>${t.__("Delete")}</span>
+          </div>
+        </div>
+        <div class="setting-row" id="download-folder">
+          <div class="setting-description">
+            ${t.__("Default download location")}
+          </div>
+          <button class="download-folder-button green">
+            ${t.__("Change")}
+          </button>
+        </div>
+        <div class="setting-row">
+          <div class="setting-description">
+            <div class="download-folder-path">
+              ${ConfigUtil.getConfigString(
+                "downloadsPath",
+                app.getPath("downloads"),
+              )}
+            </div>
+          </div>
+        </div>
+        <div class="setting-row" id="prompt-download">
+          <div class="setting-description">
+            ${t.__("Ask where to save files before downloading")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
+      </div>
+      <div class="title">${t.__("Factory Reset Data")}</div>
+      <div class="settings-card">
+        <div class="setting-row" id="factory-reset-option">
+          <div class="setting-description">
+            ${t.__(
+              "Reset the application, thus deleting all the connected organizations and accounts.",
+            )}
+          </div>
+          <button class="factory-reset-button red w-150">
+            ${t.__("Factory Reset")}
+          </button>
+        </div>
+      </div>
+    </div>
+  `.html;
+
+  updateTrayOption();
+  updateBadgeOption();
+  updateSilentOption();
+  autoUpdateOption();
+  betaUpdateOption();
+  updateSidebarOption();
+  updateStartAtLoginOption();
+  factoryReset();
+  showDesktopNotification();
+  enableSpellchecker();
+  minimizeOnStart();
+  addCustomCSS();
+  showCustomCSSPath();
+  removeCustomCSS();
+  downloadFolder();
+  updateQuitOnCloseOption();
+  updatePromptDownloadOption();
+  enableErrorReporting();
+  setLocale();
+  initSpellChecker();
+
+  // Platform specific settings
+
+  // Flashing taskbar on Windows
+  if (process.platform === "win32") {
+    updateFlashTaskbar();
   }
 
-  init(): void {
-    this.props.$root.innerHTML = this.templateHTML().html;
-    this.updateTrayOption();
-    this.updateBadgeOption();
-    this.updateSilentOption();
-    this.autoUpdateOption();
-    this.betaUpdateOption();
-    this.updateSidebarOption();
-    this.updateStartAtLoginOption();
-    this.factoryReset();
-    this.showDesktopNotification();
-    this.enableSpellchecker();
-    this.minimizeOnStart();
-    this.addCustomCSS();
-    this.showCustomCSSPath();
-    this.removeCustomCSS();
-    this.downloadFolder();
-    this.updateQuitOnCloseOption();
-    this.updatePromptDownloadOption();
-    this.enableErrorReporting();
-    this.setLocale();
-    this.initSpellChecker();
-
-    // Platform specific settings
-
-    // Flashing taskbar on Windows
-    if (process.platform === "win32") {
-      this.updateFlashTaskbar();
-    }
-
-    // Dock bounce on macOS
-    if (process.platform === "darwin") {
-      this.updateDockBouncing();
-    }
-
-    // Auto hide menubar on Windows and Linux
-    if (process.platform !== "darwin") {
-      this.updateMenubarOption();
-    }
+  // Dock bounce on macOS
+  if (process.platform === "darwin") {
+    updateDockBouncing();
   }
 
-  updateTrayOption(): void {
+  // Auto hide menubar on Windows and Linux
+  if (process.platform !== "darwin") {
+    updateMenubarOption();
+  }
+
+  function updateTrayOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#tray-option .setting-control"),
+      $element: document.querySelector("#tray-option .setting-control")!,
       value: ConfigUtil.getConfigItem("trayIcon", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("trayIcon");
         ConfigUtil.setConfigItem("trayIcon", newValue);
         ipcRenderer.send("forward-message", "toggletray");
-        this.updateTrayOption();
+        updateTrayOption();
       },
     });
   }
 
-  updateMenubarOption(): void {
+  function updateMenubarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#menubar-option .setting-control"),
+      $element: document.querySelector("#menubar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("autoHideMenubar", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("autoHideMenubar");
         ConfigUtil.setConfigItem("autoHideMenubar", newValue);
         ipcRenderer.send("toggle-menubar", newValue);
-        this.updateMenubarOption();
+        updateMenubarOption();
       },
     });
   }
 
-  updateBadgeOption(): void {
+  function updateBadgeOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#badge-option .setting-control"),
+      $element: document.querySelector("#badge-option .setting-control")!,
       value: ConfigUtil.getConfigItem("badgeOption", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("badgeOption");
         ConfigUtil.setConfigItem("badgeOption", newValue);
         ipcRenderer.send("toggle-badge-option", newValue);
-        this.updateBadgeOption();
+        updateBadgeOption();
       },
     });
   }
 
-  updateDockBouncing(): void {
+  function updateDockBouncing(): void {
     generateSettingOption({
-      $element: document.querySelector("#dock-bounce-option .setting-control"),
+      $element: document.querySelector("#dock-bounce-option .setting-control")!,
       value: ConfigUtil.getConfigItem("dockBouncing", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("dockBouncing");
         ConfigUtil.setConfigItem("dockBouncing", newValue);
-        this.updateDockBouncing();
+        updateDockBouncing();
       },
     });
   }
 
-  updateFlashTaskbar(): void {
+  function updateFlashTaskbar(): void {
     generateSettingOption({
       $element: document.querySelector(
         "#flash-taskbar-option .setting-control",
-      ),
+      )!,
       value: ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("flashTaskbarOnMessage");
         ConfigUtil.setConfigItem("flashTaskbarOnMessage", newValue);
-        this.updateFlashTaskbar();
+        updateFlashTaskbar();
       },
     });
   }
 
-  autoUpdateOption(): void {
+  function autoUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#autoupdate-option .setting-control"),
+      $element: document.querySelector("#autoupdate-option .setting-control")!,
       disabled: EnterpriseUtil.configItemExists("autoUpdate"),
       value: ConfigUtil.getConfigItem("autoUpdate", true),
       clickHandler: () => {
@@ -335,107 +322,109 @@ export default class GeneralSection {
         ConfigUtil.setConfigItem("autoUpdate", newValue);
         if (!newValue) {
           ConfigUtil.setConfigItem("betaUpdate", false);
-          this.betaUpdateOption();
+          betaUpdateOption();
         }
 
-        this.autoUpdateOption();
+        autoUpdateOption();
       },
     });
   }
 
-  betaUpdateOption(): void {
+  function betaUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#betaupdate-option .setting-control"),
+      $element: document.querySelector("#betaupdate-option .setting-control")!,
       value: ConfigUtil.getConfigItem("betaUpdate", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("betaUpdate");
         if (ConfigUtil.getConfigItem("autoUpdate")) {
           ConfigUtil.setConfigItem("betaUpdate", newValue);
-          this.betaUpdateOption();
+          betaUpdateOption();
         }
       },
     });
   }
 
-  updateSilentOption(): void {
+  function updateSilentOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#silent-option .setting-control"),
+      $element: document.querySelector("#silent-option .setting-control")!,
       value: ConfigUtil.getConfigItem("silent", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("silent", true);
         ConfigUtil.setConfigItem("silent", newValue);
-        this.updateSilentOption();
+        updateSilentOption();
         currentBrowserWindow.webContents.send("toggle-silent", newValue);
       },
     });
   }
 
-  showDesktopNotification(): void {
+  function showDesktopNotification(): void {
     generateSettingOption({
       $element: document.querySelector(
         "#show-notification-option .setting-control",
-      ),
+      )!,
       value: ConfigUtil.getConfigItem("showNotification", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("showNotification", true);
         ConfigUtil.setConfigItem("showNotification", newValue);
-        this.showDesktopNotification();
+        showDesktopNotification();
       },
     });
   }
 
-  updateSidebarOption(): void {
+  function updateSidebarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#sidebar-option .setting-control"),
+      $element: document.querySelector("#sidebar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("showSidebar", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("showSidebar");
         ConfigUtil.setConfigItem("showSidebar", newValue);
         ipcRenderer.send("forward-message", "toggle-sidebar", newValue);
-        this.updateSidebarOption();
+        updateSidebarOption();
       },
     });
   }
 
-  updateStartAtLoginOption(): void {
+  function updateStartAtLoginOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#startAtLogin-option .setting-control"),
+      $element: document.querySelector(
+        "#startAtLogin-option .setting-control",
+      )!,
       value: ConfigUtil.getConfigItem("startAtLogin", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("startAtLogin");
         ConfigUtil.setConfigItem("startAtLogin", newValue);
         ipcRenderer.send("toggleAutoLauncher", newValue);
-        this.updateStartAtLoginOption();
+        updateStartAtLoginOption();
       },
     });
   }
 
-  updateQuitOnCloseOption(): void {
+  function updateQuitOnCloseOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#quitOnClose-option .setting-control"),
+      $element: document.querySelector("#quitOnClose-option .setting-control")!,
       value: ConfigUtil.getConfigItem("quitOnClose", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("quitOnClose");
         ConfigUtil.setConfigItem("quitOnClose", newValue);
-        this.updateQuitOnCloseOption();
+        updateQuitOnCloseOption();
       },
     });
   }
 
-  enableSpellchecker(): void {
+  function enableSpellchecker(): void {
     generateSettingOption({
       $element: document.querySelector(
         "#enable-spellchecker-option .setting-control",
-      ),
+      )!,
       value: ConfigUtil.getConfigItem("enableSpellchecker", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("enableSpellchecker");
         ConfigUtil.setConfigItem("enableSpellchecker", newValue);
-        this.enableSpellchecker();
+        enableSpellchecker();
         const spellcheckerLanguageInput: HTMLElement = document.querySelector(
           "#spellcheck-langs",
-        );
-        const spellcheckerNote: HTMLElement = document.querySelector("#note");
+        )!;
+        const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
         spellcheckerLanguageInput.style.display =
           spellcheckerLanguageInput.style.display === "none" ? "" : "none";
         spellcheckerNote.style.display =
@@ -444,21 +433,21 @@ export default class GeneralSection {
     });
   }
 
-  enableErrorReporting(): void {
+  function enableErrorReporting(): void {
     generateSettingOption({
       $element: document.querySelector(
         "#enable-error-reporting .setting-control",
-      ),
+      )!,
       value: ConfigUtil.getConfigItem("errorReporting", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("errorReporting");
         ConfigUtil.setConfigItem("errorReporting", newValue);
-        this.enableErrorReporting();
+        enableErrorReporting();
       },
     });
   }
 
-  async customCssDialog(): Promise<void> {
+  async function customCssDialog(): Promise<void> {
     const showDialogOptions: OpenDialogOptions = {
       title: "Select file",
       properties: ["openFile"],
@@ -474,18 +463,18 @@ export default class GeneralSection {
     }
   }
 
-  setLocale(): void {
-    const langDiv: HTMLSelectElement = document.querySelector(".lang-div");
+  function setLocale(): void {
+    const langDiv: HTMLSelectElement = document.querySelector(".lang-div")!;
     const langListHTML = generateSelectHTML(supportedLocales, "lang-menu");
     langDiv.innerHTML += langListHTML.html;
     // `langMenu` is the select-option dropdown menu formed after executing the previous command
-    const langMenu: HTMLSelectElement = document.querySelector(".lang-menu");
+    const langMenu: HTMLSelectElement = document.querySelector(".lang-menu")!;
 
     // The next three lines set the selected language visible on the dropdown button
     let language = ConfigUtil.getConfigItem("appLanguage");
     language =
       language && langMenu.options.namedItem(language) ? language : "en";
-    langMenu.options.namedItem(language).selected = true;
+    langMenu.options.namedItem(language)!.selected = true;
 
     langMenu.addEventListener("change", (event: Event) => {
       ConfigUtil.setConfigItem(
@@ -495,45 +484,47 @@ export default class GeneralSection {
     });
   }
 
-  minimizeOnStart(): void {
+  function minimizeOnStart(): void {
     generateSettingOption({
       $element: document.querySelector(
         "#start-minimize-option .setting-control",
-      ),
+      )!,
       value: ConfigUtil.getConfigItem("startMinimized", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("startMinimized");
         ConfigUtil.setConfigItem("startMinimized", newValue);
-        this.minimizeOnStart();
+        minimizeOnStart();
       },
     });
   }
 
-  addCustomCSS(): void {
+  function addCustomCSS(): void {
     const customCSSButton = document.querySelector(
       "#add-custom-css .custom-css-button",
-    );
+    )!;
     customCSSButton.addEventListener("click", async () => {
-      await this.customCssDialog();
+      await customCssDialog();
     });
   }
 
-  showCustomCSSPath(): void {
+  function showCustomCSSPath(): void {
     if (!ConfigUtil.getConfigItem("customCSS")) {
-      const cssPATH: HTMLElement = document.querySelector("#remove-custom-css");
+      const cssPATH: HTMLElement = document.querySelector(
+        "#remove-custom-css",
+      )!;
       cssPATH.style.display = "none";
     }
   }
 
-  removeCustomCSS(): void {
-    const removeCSSButton = document.querySelector("#css-delete-action");
+  function removeCustomCSS(): void {
+    const removeCSSButton = document.querySelector("#css-delete-action")!;
     removeCSSButton.addEventListener("click", () => {
       ConfigUtil.setConfigItem("customCSS", "");
       ipcRenderer.send("forward-message", "hard-reload");
     });
   }
 
-  async downloadFolderDialog(): Promise<void> {
+  async function downloadFolderDialog(): Promise<void> {
     const showDialogOptions: OpenDialogOptions = {
       title: "Select Download Location",
       properties: ["openDirectory"],
@@ -546,33 +537,33 @@ export default class GeneralSection {
       ConfigUtil.setConfigItem("downloadsPath", filePaths[0]);
       const downloadFolderPath: HTMLElement = document.querySelector(
         ".download-folder-path",
-      );
+      )!;
       downloadFolderPath.textContent = filePaths[0];
     }
   }
 
-  downloadFolder(): void {
+  function downloadFolder(): void {
     const downloadFolder = document.querySelector(
       "#download-folder .download-folder-button",
-    );
+    )!;
     downloadFolder.addEventListener("click", async () => {
-      await this.downloadFolderDialog();
+      await downloadFolderDialog();
     });
   }
 
-  updatePromptDownloadOption(): void {
+  function updatePromptDownloadOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#prompt-download .setting-control"),
+      $element: document.querySelector("#prompt-download .setting-control")!,
       value: ConfigUtil.getConfigItem("promptDownload", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("promptDownload");
         ConfigUtil.setConfigItem("promptDownload", newValue);
-        this.updatePromptDownloadOption();
+        updatePromptDownloadOption();
       },
     });
   }
 
-  async factoryResetSettings(): Promise<void> {
+  async function factoryResetSettings(): Promise<void> {
     const clearAppDataMessage =
       "When the application restarts, it will be as if you have just downloaded Zulip app.";
     const getAppPath = path.join(app.getPath("appData"), app.name);
@@ -592,19 +583,19 @@ export default class GeneralSection {
     }
   }
 
-  factoryReset(): void {
+  function factoryReset(): void {
     const factoryResetButton = document.querySelector(
       "#factory-reset-option .factory-reset-button",
-    );
+    )!;
     factoryResetButton.addEventListener("click", async () => {
-      await this.factoryResetSettings();
+      await factoryResetSettings();
     });
   }
 
-  initSpellChecker(): void {
+  function initSpellChecker(): void {
     // The elctron 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 = document.querySelector("#note")!;
       note.append(t.__("On macOS, the OS spellchecker is used."));
       note.append(document.createElement("br"));
       note.append(
@@ -613,11 +604,13 @@ export default class GeneralSection {
         ),
       );
     } else {
-      const note: HTMLElement = document.querySelector("#note");
+      const note: HTMLElement = document.querySelector("#note")!;
       note.append(
         t.__("You can select a maximum of 3 languages for spellchecking."),
       );
-      const spellDiv: HTMLElement = document.querySelector("#spellcheck-langs");
+      const spellDiv: HTMLElement = document.querySelector(
+        "#spellcheck-langs",
+      )!;
       spellDiv.innerHTML += html`
         <div class="setting-description">${t.__("Spellchecker Languages")}</div>
         <input name="spellcheck" placeholder="Enter Languages" />
@@ -651,7 +644,7 @@ export default class GeneralSection {
 
       const tagField: HTMLElement = document.querySelector(
         "input[name=spellcheck]",
-      );
+      )!;
       const tagify = new Tagify(tagField, {
         whitelist: [...languagePairs.keys()],
         enforceWhitelist: true,
@@ -668,7 +661,7 @@ export default class GeneralSection {
         "spellcheckerLanguages",
       ).map(
         (code: string) =>
-          [...languagePairs].find((pair) => pair[1] === code)[0],
+          [...languagePairs].find((pair) => pair[1] === code)![0],
       );
       tagify.addTags(configuredLanguages);
 
@@ -679,7 +672,7 @@ export default class GeneralSection {
         } else {
           const spellLangs: string[] = [
             ...JSON.parse((event.target as HTMLInputElement).value).values(),
-          ].map((elt) => languagePairs.get(elt.value));
+          ].map((elt) => languagePairs.get(elt.value)!);
           ConfigUtil.setConfigItem("spellcheckerLanguages", spellLangs);
           ipcRenderer.send("set-spellcheck-langs");
         }
@@ -690,8 +683,8 @@ export default class GeneralSection {
     if (!ConfigUtil.getConfigItem("enableSpellchecker")) {
       const spellcheckerLanguageInput: HTMLElement = document.querySelector(
         "#spellcheck-langs",
-      );
-      const spellcheckerNote: HTMLElement = document.querySelector("#note");
+      )!;
+      const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
       spellcheckerLanguageInput.style.display = "none";
       spellcheckerNote.style.display = "none";
     }

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

@@ -3,18 +3,14 @@ import {ipcRenderer} from "electron";
 import type {DNDSettings} from "../../../../common/dnd-util";
 
 import ConnectedOrgSection from "./connected-org-section";
-import GeneralSection from "./general-section";
+import {initGeneralSection} from "./general-section";
 import Nav from "./nav";
 import type {NavItem} from "./nav";
 import NetworkSection from "./network-section";
 import {initServersSection} from "./servers-section";
 import ShortcutsSection from "./shortcuts-section";
 
-type Section =
-  | GeneralSection
-  | NetworkSection
-  | ConnectedOrgSection
-  | ShortcutsSection;
+type Section = NetworkSection | ConnectedOrgSection | ShortcutsSection;
 
 export default class PreferenceView {
   $sidebarContainer: Element;
@@ -54,13 +50,11 @@ export default class PreferenceView {
         });
         break;
 
-      case "General": {
-        this.section = new GeneralSection({
+      case "General":
+        initGeneralSection({
           $root: this.$settingsContainer,
         });
-        this.section.init();
         break;
-      }
 
       case "Organizations": {
         this.section = new ConnectedOrgSection({