renderer: Add event listener to show/hide DND duration dropdown.

Implements click and mouseleave behavior for the DND button and duration dropdown, allowing the user to select a duration visually. We also remove the dnd-util.js import, since we no longer handle the DNDtoggle() here and instead we send the toggle request to the ipcMain.

Author: lolostheman

app/renderer/js/main.ts

@@ -9,7 +9,6 @@ import * as Sentry from "@sentry/electron/renderer";
 
 import type {Config} from "../../common/config-util.js";
 import * as ConfigUtil from "../../common/config-util.js";
-import * as DNDUtil from "../../common/dnd-util.js";
 import type {DndSettings} from "../../common/dnd-util.js";
 import * as EnterpriseUtil from "../../common/enterprise-util.js";
 import {html} from "../../common/html.js";
@@ -444,14 +443,34 @@ export class ServerManagerView {
 
   initLeftSidebarEvents(): void {
     this.$dndButton.addEventListener("click", () => {
-      const dndUtil = DNDUtil.toggle();
-      ipcRenderer.send(
-        "forward-message",
-        "toggle-dnd",
-        dndUtil.dnd,
-        dndUtil.newSettings,
-      );
+      const isDndOn = ConfigUtil.getConfigItem("dnd", false);
+      if (isDndOn) {
+        ipcRenderer.send("forward-message", "toggle-dnd-request", undefined);
+        return;
+      }
+
+      const dropdown = document.querySelector("#dnd-dropdown");
+      dropdown?.classList.toggle("hidden");
+      this.$dndTooltip.classList.add("hidden");
+      dropdown?.addEventListener("mouseleave", () => {
+        dropdown.classList.add("hidden");
+        this.$dndTooltip.classList.remove("hidden");
+      });
     });
+    const dropdownItems = document.querySelectorAll("#dnd-dropdown div");
+    for (const item of dropdownItems) {
+      item.addEventListener("click", (event) => {
+        const target = event.target as HTMLElement;
+        const value = target.dataset.minutes;
+        const duration = value === "forever" ? undefined : Number(value);
+
+        ipcRenderer.send("forward-message", "toggle-dnd-request", duration);
+
+        document.querySelector("#dnd-dropdown")?.classList.add("hidden");
+        this.$dndTooltip.classList.remove("hidden");
+      });
+    }
+
     this.$reloadButton.addEventListener("click", async () => {
       const tab = this.tabs[this.activeTabIndex];
       if (tab instanceof ServerTab) (await tab.webview).reload();