dnd: Move duration logic from dnd-util.ts to index.ts and suppress tooltip on click.

Decouples logic for better separation of concerns and disables the tooltip to prevent dropdown overlap.

Author: lolostheman

app/common/dnd-util.ts

@@ -18,9 +18,7 @@ type Toggle = {
   newSettings: Partial<DndSettings>;
 };
 
-let dndTimeout: NodeJS.Timeout | null = null;
-
-export function toggle(durationInMinutes?: number): Toggle {
+export function toggle(): Toggle {
   const dnd = !ConfigUtil.getConfigItem("dnd", false);
   const dndSettingList: SettingName[] = ["showNotification", "silent"];
   if (process.platform === "win32") {
@@ -58,40 +56,6 @@ export function toggle(durationInMinutes?: number): Toggle {
   }
 
   ConfigUtil.setConfigItem("dnd", dnd);
-  if (dnd && durationInMinutes && !Number.isNaN(durationInMinutes)) {
-    if (dndTimeout) {
-      clearTimeout(dndTimeout);
-    }
-
-    dndTimeout = setTimeout(
-      () => {
-        toggle(); // Revert DND after timeout
-
-        const restoredSettings = ConfigUtil.getConfigItem(
-          "dndPreviousSettings",
-          {
-            showNotification: true,
-            silent: false,
-            ...(process.platform === "win32" && {
-              flashTaskbarOnMessage: true,
-            }),
-          },
-        );
-
-        if (restoredSettings) {
-          for (const settingName of dndSettingList) {
-            ConfigUtil.setConfigItem(
-              settingName,
-              restoredSettings[settingName]!,
-            );
-          }
-        }
-
-        ConfigUtil.setConfigItem("dnd", false);
-      },
-      durationInMinutes * 60 * 1000,
-    );
-  }
 
   return {dnd, newSettings};
 }

app/common/typed-ipc.ts

@@ -69,6 +69,7 @@ export type RendererMessage = {
     autoHideMenubar: boolean,
     updateMenu: boolean,
   ) => void;
+  "toggle-dnd-request": (duration?: number) => void;
   "toggle-dnd": (
     state: boolean,
     newSettings: Partial<DndSettings>,

app/main/index.ts

@@ -18,6 +18,7 @@ import * as remoteMain from "@electron/remote/main";
 import windowStateKeeper from "electron-window-state";
 
 import * as ConfigUtil from "../common/config-util.js";
+import * as DNDUtil from "../common/dnd-util.js";
 import {bundlePath, bundleUrl, publicPath} from "../common/paths.js";
 import * as t from "../common/translation-util.js";
 import type {RendererMessage} from "../common/typed-ipc.js";
@@ -48,6 +49,8 @@ let badgeCount: number;
 
 let isQuitting = false;
 
+let dndRevertTimeout: NodeJS.Timeout | null = null;
+
 // Load this file in main window
 const mainUrl = new URL("app/renderer/main.html", bundleUrl).href;
 
@@ -403,10 +406,30 @@ function createMainWindow(): BrowserWindow {
   ipcMain.on(
     "forward-message",
     <Channel extends keyof RendererMessage>(
-      _event: IpcMainEvent,
+      event: IpcMainEvent,
       listener: Channel,
       ...parameters: Parameters<RendererMessage[Channel]>
     ) => {
+      if (listener === "toggle-dnd-request") {
+        const [duration] = parameters as [number?];
+        const result = DNDUtil.toggle(); // Toggle DND
+        send(event.sender, "toggle-dnd", result.dnd, result.newSettings);
+
+        if (result.dnd && duration && !Number.isNaN(duration)) {
+          if (dndRevertTimeout) clearTimeout(dndRevertTimeout);
+
+          dndRevertTimeout = setTimeout(
+            () => {
+              const revert = DNDUtil.toggle();
+              send(event.sender, "toggle-dnd", revert.dnd, revert.newSettings);
+            },
+            duration * 60 * 1000,
+          );
+        }
+
+        return;
+      }
+
       send(page, listener, ...parameters);
     },
   );

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,8 +443,9 @@ export class ServerManagerView {
 
   initLeftSidebarEvents(): void {
     this.$dndButton.addEventListener("click", () => {
-      const dropdown = document.querySelector("dnd-dropdown");
+      const dropdown = document.querySelector("#dnd-dropdown");
       dropdown?.classList.toggle("hidden");
+      this.$dndTooltip.classList.add("hidden");
     });
     const dropdownItems = document.querySelectorAll("#dnd-dropdown div");
     for (const item of dropdownItems) {
@@ -454,22 +454,9 @@ export class ServerManagerView {
         const value = target.dataset.minutes;
         const duration = value === "forever" ? undefined : Number(value);
 
-        const dndUtil = DNDUtil.toggle(duration);
-        if (dndUtil.dnd && duration !== undefined) {
-          console.log(`[DND] Started for ${duration} minutes`);
-        } else {
-          console.log("[DND] No timeout set (manual resume)");
-        }
-
-        ipcRenderer.send(
-          "forward-message",
-          "toggle-dnd",
-          dndUtil.dnd,
-          dndUtil.newSettings,
-          duration,
-        );
+        ipcRenderer.send("forward-message", "toggle-dnd-request", duration);
 
-        document.querySelector("dnd-dropdown")?.classList.add("hidden");
+        document.querySelector("#dnd-dropdown")?.classList.add("hidden");
       });
     }