dnd: Add duration dropdown with retoggle logic and updated icon to enabled/disabled visual (slash through it)

Implements a timed DND feature with options like 30m, 1h, etc. Auto-resumes DND state after expiration. DND icon update and modal positioning are pending.

Author: lolostheman

app/common/dnd-util.ts

@@ -18,7 +18,9 @@ type Toggle = {
   newSettings: Partial<DndSettings>;
 };
 
-export function toggle(): Toggle {
+let dndTimeout: NodeJS.Timeout | null = null;
+
+export function toggle(durationInMinutes?: number): Toggle {
   const dnd = !ConfigUtil.getConfigItem("dnd", false);
   const dndSettingList: SettingName[] = ["showNotification", "silent"];
   if (process.platform === "win32") {
@@ -56,5 +58,40 @@ export function toggle(): 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,7 +69,11 @@ export type RendererMessage = {
     autoHideMenubar: boolean,
     updateMenu: boolean,
   ) => void;
-  "toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
+  "toggle-dnd": (
+    state: boolean,
+    newSettings: Partial<DndSettings>,
+    duration?: number,
+  ) => void;
   "toggle-sidebar": (show: boolean) => void;
   "toggle-silent": (state: boolean) => void;
   "toggle-tray": (state: boolean) => void;

app/renderer/css/main.css

@@ -378,6 +378,27 @@ webview.focus {
   font-size: 14px;
 }
 
+.dropdown {
+  position: absolute;
+  left: 60px;
+  background-color: rgb(44 44 44 / 100%);
+  border: 1px solid rgb(68 68 68 / 100%);
+  color: rgb(255 255 255 / 100%);
+  z-index: 10;
+  padding: 5px 0;
+  font-size: 14px;
+  min-width: 150px;
+}
+
+.dropdown div {
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.dropdown div:hover {
+  background-color: rgb(68 68 68 / 100%);
+}
+
 #loading-tooltip::after,
 #dnd-tooltip::after,
 #back-tooltip::after,

app/renderer/js/main.ts

@@ -444,14 +444,35 @@ export class ServerManagerView {
 
   initLeftSidebarEvents(): void {
     this.$dndButton.addEventListener("click", () => {
-      const dndUtil = DNDUtil.toggle();
-      ipcRenderer.send(
-        "forward-message",
-        "toggle-dnd",
-        dndUtil.dnd,
-        dndUtil.newSettings,
-      );
+      const dropdown = document.querySelector("dnd-dropdown");
+      dropdown?.classList.toggle("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);
+
+        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,
+        );
+
+        document.querySelector("dnd-dropdown")?.classList.add("hidden");
+      });
+    }
+
     this.$reloadButton.addEventListener("click", async () => {
       const tab = this.tabs[this.activeTabIndex];
       if (tab instanceof ServerTab) (await tab.webview).reload();
@@ -1210,6 +1231,13 @@ window.addEventListener("load", async () => {
               >${t.__("Do Not Disturb")}</span
             >
           </div>
+          <div id="dnd-dropdown" class="dropdown hidden">
+            <div data-minutes="1">1 minute</div>
+            <div data-minutes="60">1 hour</div>
+            <div data-minutes="180">3 hours</div>
+            <div data-minutes="720">12 hours</div>
+            <div data-minutes="forever">Until I resume</div>
+          </div>
           <div class="action-button hidden" id="reload-action">
             <i class="material-icons md-48">refresh</i>
             <span id="reload-tooltip" style="display: none"