From e5827a803723906079beac27bbcbebb009e7d908 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Mon, 30 Mar 2026 00:29:38 -0700
Subject: [PATCH] refactor: extract _updateNotificationUI helper, use const,
 fix double query

- Extract shared _updateNotificationUI(statusEl, reqBtn, permission) helper
  to remove duplicated notification status UI update logic from openSettings
  and the requestPermission click handler
- Replace var with const for local bindings in new Notifications handlers
- Use this.checked in bell sound change handler instead of re-querying
  the DOM element that was already looked up for addEventListener
---
 muxplex/frontend/app.js | 60 ++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js
index 50a1e3b..e5bf2c6 100644
--- a/muxplex/frontend/app.js
+++ b/muxplex/frontend/app.js
@@ -1019,6 +1019,28 @@ function onDisplaySettingChange() {
   applyDisplaySettings(ds);
 }
 
+/**
+ * Update notification UI controls to reflect the current permission state.
+ * @param {Element} statusEl  - The status text element.
+ * @param {Element} reqBtn    - The request-permission button.
+ * @param {string}  permission - Notification.permission value, or 'unsupported'.
+ */
+function _updateNotificationUI(statusEl, reqBtn, permission) {
+  if (permission === 'granted') {
+    statusEl.textContent = 'Granted';
+    reqBtn.disabled = true;
+  } else if (permission === 'denied') {
+    statusEl.textContent = 'Denied (check browser settings)';
+    reqBtn.disabled = true;
+  } else if (permission === 'unsupported') {
+    statusEl.textContent = 'Not supported';
+    reqBtn.disabled = true;
+  } else {
+    statusEl.textContent = 'Not requested';
+    reqBtn.disabled = false;
+  }
+}
+
 /**
  * Open the settings dialog.
  * Sets _settingsOpen, calls dialog.showModal(), removes hidden from backdrop,
@@ -1046,19 +1068,8 @@ function openSettings() {
   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;
-    }
+    const permission = typeof Notification === 'undefined' ? 'unsupported' : Notification.permission;
+    _updateNotificationUI(statusEl, reqBtn, permission);
   }
 
   // Populate Sessions tab from server settings
@@ -1355,10 +1366,8 @@ function bindStaticEventListeners() {
 
   // 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;
+    const ds = loadDisplaySettings();
+    ds.bellSound = this.checked;
     saveDisplaySettings(ds);
   });
 
@@ -1367,23 +1376,14 @@ function bindStaticEventListeners() {
     if (typeof Notification === 'undefined') return;
     Notification.requestPermission().then(function(permission) {
       _notificationPermission = permission;
-      var ds = loadDisplaySettings();
+      const ds = loadDisplaySettings();
       ds.notificationPermission = permission;
       saveDisplaySettings(ds);
       // Update UI state
-      var statusEl = $('notification-status-text');
-      var reqBtn = $('notification-request-btn');
+      const statusEl = $('notification-status-text');
+      const 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;
-        }
+        _updateNotificationUI(statusEl, reqBtn, permission);
       }
     });
   });