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

app/ui-section-state.js

@@ -3,6 +3,7 @@
 
   const VALID_SECTIONS = new Set([
     "home",
+    "settings",
     "timeline",
     "calendar",
     "holidays",
@@ -87,6 +88,7 @@
     const magickDataset = getMagickDataset();
 
     const isHomeOpen = activeSection === "home";
+    const isSettingsOpen = activeSection === "settings";
     const isTimelineOpen = activeSection === "timeline";
     const isCalendarOpen = activeSection === "calendar";
     const isHolidaysOpen = activeSection === "holidays";
@@ -120,6 +122,7 @@
     const isEnochianOpen = activeSection === "enochian";
 
     setHidden(elements.timelineSectionEl, !isTimelineOpen);
+    setHidden(elements.settingsSectionEl, !isSettingsOpen);
     setHidden(elements.calendarSectionEl, !isCalendarOpen);
     setHidden(elements.holidaySectionEl, !isHolidaysOpen);
     setHidden(elements.audioCircleSectionEl, !isAudioCircleOpen);
@@ -147,6 +150,7 @@
     setHidden(elements.nowPanelEl, !isHomeOpen);
 
     setPressed(elements.openHomeEl, isHomeOpen);
+    setPressed(elements.openSettingsEl, isSettingsOpen);
     setPressed(elements.openCalendarEl, isCalendarMenuOpen);
     toggleActive(elements.openCalendarTimelineEl, isTimelineOpen);
     toggleActive(elements.openCalendarMonthsEl, isCalendarOpen);
@@ -177,15 +181,15 @@
     setPressed(elements.openGodsEl, isGodsOpen);
     setPressed(elements.openEnochianEl, isEnochianOpen);
 
-    if (!isHomeOpen) {
-      config.settingsUi?.closeSettingsPopup?.();
-    }
-
     if (isTimelineOpen) {
       renderHomeFallback();
       return;
     }
 
+    if (isSettingsOpen) {
+      return;
+    }
+
     if (isCalendarOpen) {
       ensure.ensureCalendarSection?.(referenceData, magickDataset);
       return;