feat: add Notifications settings tab

muxplex/frontend/app.js

@@ -1038,6 +1038,29 @@ function openSettings() {
   const gridColumnsEl = $('setting-grid-columns');
   if (gridColumnsEl) gridColumnsEl.value = String(settings.gridColumns);
 
+  // Populate Notifications tab from display settings
+  const bellSoundEl = $('setting-bell-sound');
+  if (bellSoundEl) bellSoundEl.checked = !!settings.bellSound;
+
+  // Update notification permission status text/button
+  const statusEl = $('notification-status-text');
+  const reqBtn = $('notification-request-btn');
+  if (statusEl && reqBtn) {
+    if (typeof Notification === 'undefined') {
+      statusEl.textContent = 'Not supported';
+      reqBtn.disabled = true;
+    } else if (Notification.permission === 'granted') {
+      statusEl.textContent = 'Granted';
+      reqBtn.disabled = true;
+    } else if (Notification.permission === 'denied') {
+      statusEl.textContent = 'Denied (check browser settings)';
+      reqBtn.disabled = true;
+    } else {
+      statusEl.textContent = 'Not requested';
+      reqBtn.disabled = false;
+    }
+  }
+
   // Populate Sessions tab from server settings
   loadServerSettings().then(function(ss) {
     // Default session dropdown
@@ -1329,6 +1352,41 @@ function bindStaticEventListeners() {
       patchServerSetting('hidden_sessions', hidden);
     });
   }
+
+  // Notifications settings — bell sound toggle persists to display settings localStorage
+  on($('setting-bell-sound'), 'change', function() {
+    var el = $('setting-bell-sound');
+    if (!el) return;
+    var ds = loadDisplaySettings();
+    ds.bellSound = el.checked;
+    saveDisplaySettings(ds);
+  });
+
+  // Notifications settings — permission request button
+  on($('notification-request-btn'), 'click', function() {
+    if (typeof Notification === 'undefined') return;
+    Notification.requestPermission().then(function(permission) {
+      _notificationPermission = permission;
+      var ds = loadDisplaySettings();
+      ds.notificationPermission = permission;
+      saveDisplaySettings(ds);
+      // Update UI state
+      var statusEl = $('notification-status-text');
+      var reqBtn = $('notification-request-btn');
+      if (statusEl && reqBtn) {
+        if (permission === 'granted') {
+          statusEl.textContent = 'Granted';
+          reqBtn.disabled = true;
+        } else if (permission === 'denied') {
+          statusEl.textContent = 'Denied (check browser settings)';
+          reqBtn.disabled = true;
+        } else {
+          statusEl.textContent = 'Not requested';
+          reqBtn.disabled = false;
+        }
+      }
+    });
+  });
 }
 
 // ─── Test-only helpers ────────────────────────────────────────────────────────

muxplex/frontend/index.html

@@ -139,7 +139,19 @@
             <input type="checkbox" id="setting-auto-open" class="settings-checkbox" checked />
           </div>
         </div>
-        <div class="settings-panel hidden" data-tab="notifications"></div>
+        <div class="settings-panel hidden" data-tab="notifications">
+          <div class="settings-field">
+            <label class="settings-label" for="setting-bell-sound">Bell Sound</label>
+            <input type="checkbox" id="setting-bell-sound" class="settings-checkbox" />
+          </div>
+          <div class="settings-field">
+            <label class="settings-label">Desktop Notifications</label>
+            <div class="settings-notification-status">
+              <span id="notification-status-text" class="settings-status-text">Not requested</span>
+              <button id="notification-request-btn" class="settings-action-btn">Request Permission</button>
+            </div>
+          </div>
+        </div>
         <div class="settings-panel hidden" data-tab="new-session"></div>
       </div>
     </div>

muxplex/frontend/style.css

@@ -1091,6 +1091,41 @@ body {
   cursor: pointer;
 }
 
+/* ============================================================
+   Notifications tab controls
+   ============================================================ */
+
+.settings-notification-status {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.settings-status-text {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.settings-action-btn {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+
+.settings-action-btn:hover {
+  border-color: var(--accent);
+}
+
+.settings-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* ============================================================
    Responsive overlay sidebar at <960px
    ============================================================ */