From a2428b6453dd7f4df78ba6641add74c07623bc33 Mon Sep 17 00:00:00 2001
From: lolostheman <loganmlogan@gmail.com>
Date: Thu, 8 May 2025 16:29:47 -0400
Subject: [PATCH 1/5] typed_ipc: Add duration param to toggle-dnd
 RendererMessage as well as add new toggle-dnd-request RenderMessage.

Introduces an optional duration parameter to the toggle-dnd-request message, enabling the renderer to specify a time value for automatically reverting Do Not Disturb (DND) mode. The toggle-dnd-request event is now used to send this duration from the client to the main process. The toggle-dnd response has been updated to include the duration, allowing the renderer to reflect the timeout state accurately.
---
 app/common/typed-ipc.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/common/typed-ipc.ts b/app/common/typed-ipc.ts
index 269f42984..0700b8eec 100644
--- a/app/common/typed-ipc.ts
+++ b/app/common/typed-ipc.ts
@@ -69,7 +69,12 @@ export type RendererMessage = {
     autoHideMenubar: boolean,
     updateMenu: boolean,
   ) => void;
-  "toggle-dnd": (state: boolean, newSettings: Partial<DndSettings>) => void;
+  "toggle-dnd-request": (duration?: number) => 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;

From 65cc1c350dc9045716f247219dcf00fd1fb9b4de Mon Sep 17 00:00:00 2001
From: lolostheman <loganmlogan@gmail.com>
Date: Thu, 8 May 2025 16:41:24 -0400
Subject: [PATCH 2/5] tooltips: Add HTML structure and CSS for DND duration
 dropdown.

Introduces a hidden dropdown menu with preset duration options and accompanying styles. This prepares the UI for timed DND selection.
---
 app/renderer/css/main.css | 25 +++++++++++++++++++++++++
 app/renderer/js/main.ts   | 17 +++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
index a796921f8..a117dcebb 100644
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -386,6 +386,31 @@ webview.focus {
   font-size: 14px;
 }
 
+.dnd-dropdown {
+  position: absolute;
+  left: 60px;
+  background-color: rgb(32 33 36 / 100%); /* closer to Zulip's sidebars */
+  border: 1px solid rgb(60 60 60 / 100%);
+  border-radius: 8px;
+  color: rgb(240 240 240 / 100%);
+  z-index: 1000;
+  padding: 4px 0;
+  font-size: 13px;
+  font-family: arial, sans-serif;
+  min-width: 150px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
+}
+
+.dnd-dropdown-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.dnd-dropdown-item:hover {
+  background-color: rgb(60 60 60 / 100%);
+}
+
 #loading-tooltip::after,
 #dnd-tooltip::after,
 #back-tooltip::after,
diff --git a/app/renderer/js/main.ts b/app/renderer/js/main.ts
index 861074738..200db88aa 100644
--- a/app/renderer/js/main.ts
+++ b/app/renderer/js/main.ts
@@ -1215,6 +1215,23 @@ window.addEventListener("load", async () => {
               >${t.__("Do Not Disturb")}</span
             >
           </div>
+          <div id="dnd-dropdown" class="dnd-dropdown hidden">
+            <div class="dnd-dropdown-item" data-minutes="30">
+              ${t.__("30 minutes")}
+            </div>
+            <div class="dnd-dropdown-item" data-minutes="60">
+              ${t.__("1 hour")}
+            </div>
+            <div class="dnd-dropdown-item" data-minutes="180">
+              ${t.__("3 hours")}
+            </div>
+            <div class="dnd-dropdown-item" data-minutes="720">
+              ${t.__("12 hours")}
+            </div>
+            <div class="dnd-dropdown-item" data-minutes="forever">
+              ${t.__("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"

From b9bfcb2ab55c4abc4f538b8cb3744e6a71f77c2b Mon Sep 17 00:00:00 2001
From: lolostheman <loganmlogan@gmail.com>
Date: Thu, 8 May 2025 16:46:56 -0400
Subject: [PATCH 3/5] 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.
---
 app/renderer/js/main.ts | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/renderer/js/main.ts b/app/renderer/js/main.ts
index 200db88aa..66d4961f3 100644
--- a/app/renderer/js/main.ts
+++ b/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();

From d24a44b6e23be9ec42cff28f711d9da9cdf91443 Mon Sep 17 00:00:00 2001
From: lolostheman <loganmlogan@gmail.com>
Date: Thu, 8 May 2025 16:49:35 -0400
Subject: [PATCH 4/5] main: Handle toggle-dnd-request and auto-revert DND in
 ipcMain.

When a duration is provided, sets a timer to automatically revert DND mode. Ensures only one timer is active at a time, and cleans up appropriately when DND is turned off early. We import dnd-util.js to handle the DNDUtil.toggle() in our timer logic.
Fixes #561.
---
 app/main/index.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/app/main/index.ts b/app/main/index.ts
index e04c59936..d2c6b4d67 100644
--- a/app/main/index.ts
+++ b/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,7 @@ 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;
 
@@ -407,6 +409,29 @@ function createMainWindow(): BrowserWindow {
       listener: Channel,
       ...parameters: Parameters<RendererMessage[Channel]>
     ) => {
+      if (listener === "toggle-dnd-request") {
+        const [duration] = parameters as [number?];
+        const result = DNDUtil.toggle();
+        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,
+          );
+        } else if (dndRevertTimeout) {
+          clearTimeout(dndRevertTimeout);
+          dndRevertTimeout = null;
+        }
+
+        return;
+      }
+
       send(page, listener, ...parameters);
     },
   );

From bd65edd713900361ea19d479712d7f2a30c027df Mon Sep 17 00:00:00 2001
From: lolostheman <loganmlogan@gmail.com>
Date: Thu, 8 May 2025 18:29:28 -0400
Subject: [PATCH 5/5] main: Revert DND on startup if expiration has passed.

Checks the dndExpiration config key on app startup. If the timestamp has passed, DND is toggled off. If still active, schedules a timeout to revert DND later.
---
 app/common/config-schemata.ts |  1 +
 app/main/index.ts             | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/common/config-schemata.ts b/app/common/config-schemata.ts
index e2db7b80f..ac172c9c3 100644
--- a/app/common/config-schemata.ts
+++ b/app/common/config-schemata.ts
@@ -8,6 +8,7 @@ export const dndSettingsSchemata = {
 
 export const configSchemata = {
   ...dndSettingsSchemata,
+  dndExpiration: z.number().nullable().default(null),
   appLanguage: z.string().nullable(),
   autoHideMenubar: z.boolean(),
   autoUpdate: z.boolean(),
diff --git a/app/main/index.ts b/app/main/index.ts
index d2c6b4d67..03373ff32 100644
--- a/app/main/index.ts
+++ b/app/main/index.ts
@@ -70,6 +70,23 @@ const toggleApp = (): void => {
   }
 };
 
+function checkDndExpirationOnStartup(page: WebContents): void {
+  const expiration = ConfigUtil.getConfigItem("dndExpiration", null);
+
+  if (expiration && Date.now() > expiration) {
+    const revert = DNDUtil.toggle();
+    send(page, "toggle-dnd", revert.dnd, revert.newSettings);
+    ConfigUtil.removeConfigItem("dndExpiration");
+  } else if (expiration) {
+    const timeLeft = expiration - Date.now();
+    dndRevertTimeout = setTimeout(() => {
+      const revert = DNDUtil.toggle();
+      send(page, "toggle-dnd", revert.dnd, revert.newSettings);
+      ConfigUtil.removeConfigItem("dndExpiration");
+    }, timeLeft);
+  }
+}
+
 function createMainWindow(): BrowserWindow {
   // Load the previous state with fallback to defaults
   mainWindowState = windowStateKeeper({
@@ -272,7 +289,7 @@ function createMainWindow(): BrowserWindow {
   }
 
   const page = mainWindow.webContents;
-
+  checkDndExpirationOnStartup(page);
   page.on("dom-ready", () => {
     if (ConfigUtil.getConfigItem("startMinimized", false)) {
       mainWindow.hide();
@@ -417,16 +434,21 @@ function createMainWindow(): BrowserWindow {
         if (result.dnd && duration && !Number.isNaN(duration)) {
           if (dndRevertTimeout) clearTimeout(dndRevertTimeout);
 
+          const expirationTime = Date.now() + duration * 60 * 1000;
+          ConfigUtil.setConfigItem("dndExpiration", expirationTime);
+
           dndRevertTimeout = setTimeout(
             () => {
               const revert = DNDUtil.toggle();
               send(_event.sender, "toggle-dnd", revert.dnd, revert.newSettings);
+              ConfigUtil.removeConfigItem("dndExpiration");
             },
             duration * 60 * 1000,
           );
         } else if (dndRevertTimeout) {
           clearTimeout(dndRevertTimeout);
           dndRevertTimeout = null;
+          ConfigUtil.removeConfigItem("dndExpiration");
         }
 
         return;