moved to API

app/ui-settings.js

@@ -14,6 +14,7 @@
     onSettingsApplied: null,
     onSyncSkyBackground: null,
     onStatus: null,
+    onConnectionSaved: null,
     onReopenActiveSection: null,
     getActiveSection: null,
     onRenderWeek: null
@@ -30,10 +31,37 @@
       timeFormatEl: document.getElementById("time-format"),
       birthDateEl: document.getElementById("birth-date"),
       tarotDeckEl: document.getElementById("tarot-deck"),
+      apiBaseUrlEl: document.getElementById("api-base-url"),
+      apiKeyEl: document.getElementById("api-key"),
       saveSettingsEl: document.getElementById("save-settings"),
       useLocationEl: document.getElementById("use-location")
     };
   }
+  function getConnectionSettings() {
+    return window.TarotAppConfig?.getConnectionSettings?.() || {
+      apiBaseUrl: String(window.TarotAppConfig?.apiBaseUrl || "").trim(),
+      apiKey: String(window.TarotAppConfig?.apiKey || "").trim()
+    };
+  }
+
+  function syncConnectionInputs() {
+    const { apiBaseUrlEl, apiKeyEl } = getElements();
+    const connectionSettings = getConnectionSettings();
+
+    if (apiBaseUrlEl) {
+      apiBaseUrlEl.value = String(connectionSettings.apiBaseUrl || "");
+    }
+
+    if (apiKeyEl) {
+      apiKeyEl.value = String(connectionSettings.apiKey || "");
+    }
+  }
+
+  function hasConnectionChanged(previous, next) {
+    return String(previous?.apiBaseUrl || "").trim() !== String(next?.apiBaseUrl || "").trim()
+      || String(previous?.apiKey || "").trim() !== String(next?.apiKey || "").trim();
+  }
+
 
   function setStatus(text) {
     if (typeof config.onStatus === "function") {
@@ -259,6 +287,7 @@
   function applySettingsToInputs(settings) {
     const { latEl, lngEl, timeFormatEl, birthDateEl, tarotDeckEl } = getElements();
     syncTarotDeckInputOptions();
+    syncConnectionInputs();
     const normalized = normalizeSettings(settings);
     latEl.value = String(normalized.latitude);
     lngEl.value = String(normalized.longitude);
@@ -292,12 +321,22 @@
     });
   }
 
+  function getConnectionSettingsFromInputs() {
+    const { apiBaseUrlEl, apiKeyEl } = getElements();
+
+    return {
+      apiBaseUrl: String(apiBaseUrlEl?.value || "").trim(),
+      apiKey: String(apiKeyEl?.value || "").trim()
+    };
+  }
+
   function openSettingsPopup() {
     const { settingsPopupEl, openSettingsEl } = getElements();
     if (!settingsPopupEl) {
       return;
     }
 
+    applySettingsToInputs(loadSavedSettings());
     settingsPopupEl.hidden = false;
     if (openSettingsEl) {
       openSettingsEl.setAttribute("aria-expanded", "true");
@@ -319,6 +358,10 @@
   async function handleSaveSettings() {
     try {
       const settings = getSettingsFromInputs();
+      const previousConnectionSettings = getConnectionSettings();
+      const connectionSettings = getConnectionSettingsFromInputs();
+      const connectionChanged = hasConnectionChanged(previousConnectionSettings, connectionSettings);
+      const connectionResult = window.TarotAppConfig?.updateConnectionSettings?.(connectionSettings) || { didPersist: true };
       const normalized = applySettingsToInputs(settings);
       syncSky({ latitude: normalized.latitude, longitude: normalized.longitude }, true);
       const didPersist = saveSettings(normalized);
@@ -327,11 +370,13 @@
         config.onReopenActiveSection?.(config.getActiveSection());
       }
       closeSettingsPopup();
-      if (typeof config.onRenderWeek === "function") {
+      if (connectionChanged && typeof config.onConnectionSaved === "function") {
+        await config.onConnectionSaved(connectionResult, connectionSettings);
+      } else if (typeof config.onRenderWeek === "function") {
         await config.onRenderWeek();
       }
 
-      if (!didPersist) {
+      if (!didPersist || connectionResult.didPersist === false) {
         setStatus("Settings applied for this session. Browser storage is unavailable.");
       }
     } catch (error) {
@@ -419,6 +464,11 @@
         closeSettingsPopup();
       }
     });
+
+    document.addEventListener("connection:updated", () => {
+      syncConnectionInputs();
+      syncTarotDeckInputOptions();
+    });
   }
 
   function init(nextConfig = {}) {