dnd: Fix tooltip overlap with DND duration dropdown and auto-hide on mouse leave.

Prevents the tooltip from obscuring the dropdown and improves UX by closing the dropdown when the cursor leaves the area.

Author: lolostheman

app/main/index.ts

@@ -412,7 +412,7 @@ function createMainWindow(): BrowserWindow {
     ) => {
       if (listener === "toggle-dnd-request") {
         const [duration] = parameters as [number?];
-        const result = DNDUtil.toggle(); // Toggle DND
+        const result = DNDUtil.toggle();
         send(event.sender, "toggle-dnd", result.dnd, result.newSettings);
 
         if (result.dnd && duration && !Number.isNaN(duration)) {
@@ -425,6 +425,9 @@ function createMainWindow(): BrowserWindow {
             },
             duration * 60 * 1000,
           );
+        } else if (dndRevertTimeout) {
+          clearTimeout(dndRevertTimeout);
+          dndRevertTimeout = null;
         }
 
         return;

app/renderer/js/main.ts

@@ -443,9 +443,18 @@ export class ServerManagerView {
 
   initLeftSidebarEvents(): void {
     this.$dndButton.addEventListener("click", () => {
+      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");
+      });
     });
     const dropdownItems = document.querySelectorAll("#dnd-dropdown div");
     for (const item of dropdownItems) {
@@ -457,6 +466,7 @@ export class ServerManagerView {
         ipcRenderer.send("forward-message", "toggle-dnd-request", duration);
 
         document.querySelector("#dnd-dropdown")?.classList.add("hidden");
+        this.$dndTooltip.classList.remove("hidden");
       });
     }