updated settings to be more user-friendly and added a status message area to provide feedback on settings actions.

app/ui-settings.js

@@ -18,16 +18,17 @@
     onStatus: null,
     onConnectionSaved: null,
     onReopenActiveSection: null,
+    setActiveSection: null,
     getActiveSection: null,
     onRenderWeek: null
   };
 
+  let lastNonSettingsSection = "home";
+
   function getElements() {
     return {
       openSettingsEl: document.getElementById("open-settings"),
       closeSettingsEl: document.getElementById("close-settings"),
-      settingsPopupEl: document.getElementById("settings-popup"),
-      settingsPopupCardEl: document.getElementById("settings-popup-card"),
       latEl: document.getElementById("lat"),
       lngEl: document.getElementById("lng"),
       timeFormatEl: document.getElementById("time-format"),
@@ -460,28 +461,16 @@
   }
 
   function openSettingsPopup() {
-    const { settingsPopupEl, openSettingsEl } = getElements();
-    if (!settingsPopupEl) {
-      return;
+    const activeSection = typeof config.getActiveSection === "function" ? config.getActiveSection() : "home";
+    if (activeSection && activeSection !== "settings") {
+      lastNonSettingsSection = activeSection;
     }
-
     applySettingsToInputs(loadSavedSettings());
-    settingsPopupEl.hidden = false;
-    if (openSettingsEl) {
-      openSettingsEl.setAttribute("aria-expanded", "true");
-    }
+    config.setActiveSection?.("settings");
   }
 
   function closeSettingsPopup() {
-    const { settingsPopupEl, openSettingsEl } = getElements();
-    if (!settingsPopupEl) {
-      return;
-    }
-
-    settingsPopupEl.hidden = true;
-    if (openSettingsEl) {
-      openSettingsEl.setAttribute("aria-expanded", "false");
-    }
+    config.setActiveSection?.(lastNonSettingsSection || "home");
   }
 
   async function handleSaveSettings() {
@@ -502,10 +491,9 @@
       );
       const didPersist = saveSettings(normalized);
       emitSettingsUpdated(normalized);
-      if (typeof config.getActiveSection === "function" && config.getActiveSection() !== "home") {
+      if (typeof config.getActiveSection === "function" && config.getActiveSection() !== "home" && config.getActiveSection() !== "settings") {
         config.onReopenActiveSection?.(config.getActiveSection());
       }
-      closeSettingsPopup();
       if (connectionChanged && typeof config.onConnectionSaved === "function") {
         await config.onConnectionSaved(connectionResult, connectionSettings);
       } else if (typeof config.onRenderWeek === "function") {
@@ -514,6 +502,8 @@
 
       if (!didPersist || connectionResult.didPersist === false) {
         setStatus("Settings applied for this session. Browser storage is unavailable.");
+      } else {
+        setStatus("Settings saved.");
       }
     } catch (error) {
       setStatus(error?.message || "Unable to save settings.");
@@ -557,8 +547,6 @@
       useLocationEl,
       openSettingsEl,
       closeSettingsEl,
-      settingsPopupEl,
-      settingsPopupCardEl,
       latEl,
       lngEl
     } = getElements();
@@ -585,7 +573,7 @@
     if (openSettingsEl) {
       openSettingsEl.addEventListener("click", (event) => {
         event.stopPropagation();
-        if (settingsPopupEl?.hidden) {
+        if ((config.getActiveSection?.() || "home") !== "settings") {
           openSettingsPopup();
         } else {
           closeSettingsPopup();
@@ -597,25 +585,8 @@
       closeSettingsEl.addEventListener("click", closeSettingsPopup);
     }
 
-    document.addEventListener("click", (event) => {
-      const clickTarget = event.target;
-      if (!settingsPopupEl || settingsPopupEl.hidden) {
-        return;
-      }
-
-      if (!(clickTarget instanceof Node)) {
-        return;
-      }
-
-      if (settingsPopupCardEl?.contains(clickTarget) || openSettingsEl?.contains(clickTarget)) {
-        return;
-      }
-
-      closeSettingsPopup();
-    });
-
     document.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && (config.getActiveSection?.() || "home") === "settings") {
         closeSettingsPopup();
       }
     });