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.

Author: lolostheman

app/renderer/css/main.css

@@ -378,6 +378,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,

app/renderer/js/main.ts

@@ -1210,6 +1210,15 @@ window.addEventListener("load", async () => {
               >${t.__("Do Not Disturb")}</span
             >
           </div>
+          <div id="dnd-dropdown" class="dropdown hidden">
+            <div class="dnd-dropdown-item" data-minutes="30">30 minutes</div>
+            <div class="dnd-dropdown-item" data-minutes="60">1 hour</div>
+            <div class="dnd-dropdown-item" data-minutes="180">3 hours</div>
+            <div class="dnd-dropdown-item" data-minutes="720">12 hours</div>
+            <div class="dnd-dropdown-item" 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"