zulip-desktop/app/renderer/js/pages/preference/preference.ts

import type {DNDSettings} from "../../../../common/dnd-util";
import {html} from "../../../../common/html";
import type {NavItem} from "../../../../common/types";
import {ipcRenderer} from "../../typed-ipc-renderer";

import {initConnectedOrgSection} from "./connected-org-section";
import {initGeneralSection} from "./general-section";
import Nav from "./nav";
import {initNetworkSection} from "./network-section";
import {initServersSection} from "./servers-section";
import {initShortcutsSection} from "./shortcuts-section";

export class PreferenceView {
  readonly $view: HTMLElement;
  private readonly $shadow: ShadowRoot;
  private readonly $settingsContainer: Element;
  private readonly nav: Nav;

  constructor() {
    this.$view = document.createElement("div");
    this.$shadow = this.$view.attachShadow({mode: "open"});
    this.$shadow.innerHTML = html`
      <link
        rel="stylesheet"
        href="${require.resolve("../../../css/fonts.css")}"
      />
      <link
        rel="stylesheet"
        href="${require.resolve("../../../css/preference.css")}"
      />
      <link
        rel="stylesheet"
        href="${require.resolve("@yaireo/tagify/dist/tagify.css")}"
      />
      <!-- Initially hidden to prevent FOUC -->
      <div id="content" hidden>
        <div id="sidebar"></div>
        <div id="settings-container"></div>
      </div>
    `.html;

    const $sidebarContainer = this.$shadow.querySelector("#sidebar")!;
    this.$settingsContainer = this.$shadow.querySelector(
      "#settings-container",
    )!;

    this.nav = new Nav({
      $root: $sidebarContainer,
      onItemSelected: this.handleNavigation,
    });

    const navItem =
      this.nav.navItems.find(
        (navItem) => window.location.hash === `#${navItem}`,
      ) ?? "General";

    this.handleNavigation(navItem);

    ipcRenderer.on("switch-settings-nav", this.handleSwitchSettingsNav);
    ipcRenderer.on("toggle-sidebar-setting", this.handleToggleSidebar);
    ipcRenderer.on("toggle-menubar-setting", this.handleToggleMenubar);
    ipcRenderer.on("toggle-tray", this.handleToggleTray);
    ipcRenderer.on("toggle-dnd", this.handleToggleDnd);
  }

  handleNavigation = (navItem: NavItem): void => {
    this.nav.select(navItem);
    switch (navItem) {
      case "AddServer":
        initServersSection({
          $root: this.$settingsContainer,
        });
        break;

      case "General":
        initGeneralSection({
          $root: this.$settingsContainer,
        });
        break;

      case "Organizations":
        initConnectedOrgSection({
          $root: this.$settingsContainer,
        });
        break;

      case "Network":
        initNetworkSection({
          $root: this.$settingsContainer,
        });
        break;

      case "Shortcuts": {
        initShortcutsSection({
          $root: this.$settingsContainer,
        });
        break;
      }

      default:
        ((n: never) => n)(navItem);
    }

    window.location.hash = `#${navItem}`;
  };

  destroy(): void {
    ipcRenderer.off("switch-settings-nav", this.handleSwitchSettingsNav);
    ipcRenderer.off("toggle-sidebar-setting", this.handleToggleSidebar);
    ipcRenderer.off("toggle-menubar-setting", this.handleToggleMenubar);
    ipcRenderer.off("toggle-tray", this.handleToggleTray);
    ipcRenderer.off("toggle-dnd", this.handleToggleDnd);
  }

  // Handle toggling and reflect changes in preference page
  private handleToggle(elementName: string, state = false): void {
    const inputSelector = `#${elementName} .action .switch input`;
    const input: HTMLInputElement = this.$shadow.querySelector(inputSelector)!;
    if (input) {
      input.checked = state;
    }
  }

  private readonly handleSwitchSettingsNav = (
    _event: Event,
    navItem: NavItem,
  ) => {
    this.handleNavigation(navItem);
  };

  private readonly handleToggleSidebar = (_event: Event, state: boolean) => {
    this.handleToggle("sidebar-option", state);
  };

  private readonly handleToggleMenubar = (_event: Event, state: boolean) => {
    this.handleToggle("menubar-option", state);
  };

  private readonly handleToggleTray = (_event: Event, state: boolean) => {
    this.handleToggle("tray-option", state);
  };

  private readonly handleToggleDnd = (
    _event: Event,
    _state: boolean,
    newSettings: Partial<DNDSettings>,
  ) => {
    this.handleToggle("show-notification-option", newSettings.showNotification);
    this.handleToggle("silent-option", newSettings.silent);

    if (process.platform === "win32") {
      this.handleToggle(
        "flash-taskbar-option",
        newSettings.flashTaskbarOnMessage,
      );
    }
  };
}