updated gui

app/ui-section-state.js

@@ -3,6 +3,7 @@
 
   const VALID_SECTIONS = new Set([
     "home",
+    "timeline",
     "calendar",
     "holidays",
     "tarot",
@@ -16,6 +17,7 @@
     "kabbalah-tree",
     "cube",
     "alphabet",
+    "alphabet-letters",
     "numbers",
     "zodiac",
     "quiz",
@@ -80,9 +82,10 @@
     const magickDataset = getMagickDataset();
 
     const isHomeOpen = activeSection === "home";
+    const isTimelineOpen = activeSection === "timeline";
     const isCalendarOpen = activeSection === "calendar";
     const isHolidaysOpen = activeSection === "holidays";
-    const isCalendarMenuOpen = isCalendarOpen || isHolidaysOpen;
+    const isCalendarMenuOpen = isTimelineOpen || isCalendarOpen || isHolidaysOpen;
     const isTarotOpen = activeSection === "tarot";
     const isAstronomyOpen = activeSection === "astronomy";
     const isPlanetOpen = activeSection === "planets";
@@ -97,11 +100,14 @@
     const isCubeOpen = activeSection === "cube";
     const isKabbalahMenuOpen = isKabbalahOpen || isKabbalahTreeOpen || isCubeOpen;
     const isAlphabetOpen = activeSection === "alphabet";
+    const isAlphabetLettersOpen = activeSection === "alphabet-letters";
+    const isAlphabetMenuOpen = isAlphabetOpen || isAlphabetLettersOpen;
     const isNumbersOpen = activeSection === "numbers";
     const isQuizOpen = activeSection === "quiz";
     const isGodsOpen = activeSection === "gods";
     const isEnochianOpen = activeSection === "enochian";
 
+    setHidden(elements.timelineSectionEl, !isTimelineOpen);
     setHidden(elements.calendarSectionEl, !isCalendarOpen);
     setHidden(elements.holidaySectionEl, !isHolidaysOpen);
     setHidden(elements.tarotSectionEl, !isTarotOpen);
@@ -115,16 +121,17 @@
     setHidden(elements.kabbalahTreeSectionEl, !isKabbalahTreeOpen);
     setHidden(elements.cubeSectionEl, !isCubeOpen);
     setHidden(elements.alphabetSectionEl, !isAlphabetOpen);
+    setHidden(elements.alphabetLettersSectionEl, !isAlphabetLettersOpen);
     setHidden(elements.numbersSectionEl, !isNumbersOpen);
     setHidden(elements.zodiacSectionEl, !isZodiacOpen);
     setHidden(elements.quizSectionEl, !isQuizOpen);
     setHidden(elements.godsSectionEl, !isGodsOpen);
     setHidden(elements.enochianSectionEl, !isEnochianOpen);
     setHidden(elements.nowPanelEl, !isHomeOpen);
-    setHidden(elements.monthStripEl, !isHomeOpen);
-    setHidden(elements.calendarEl, !isHomeOpen);
 
+    setPressed(elements.openHomeEl, isHomeOpen);
     setPressed(elements.openCalendarEl, isCalendarMenuOpen);
+    toggleActive(elements.openCalendarTimelineEl, isTimelineOpen);
     toggleActive(elements.openCalendarMonthsEl, isCalendarOpen);
     toggleActive(elements.openHolidaysEl, isHolidaysOpen);
     setPressed(elements.openTarotEl, isTarotOpen);
@@ -137,7 +144,8 @@
     setPressed(elements.openKabbalahEl, isKabbalahMenuOpen);
     toggleActive(elements.openKabbalahTreeEl, isKabbalahTreeOpen);
     toggleActive(elements.openKabbalahCubeEl, isCubeOpen);
-    setPressed(elements.openAlphabetEl, isAlphabetOpen);
+    setPressed(elements.openAlphabetEl, isAlphabetMenuOpen);
+    toggleActive(elements.openAlphabetLettersEl, isAlphabetLettersOpen);
     setPressed(elements.openNumbersEl, isNumbersOpen);
     toggleActive(elements.openZodiacEl, isZodiacOpen);
     toggleActive(elements.openNatalEl, isNatalOpen);
@@ -149,6 +157,11 @@
       config.settingsUi?.closeSettingsPopup?.();
     }
 
+    if (isTimelineOpen) {
+      renderHomeFallback();
+      return;
+    }
+
     if (isCalendarOpen) {
       ensure.ensureCalendarSection?.(referenceData, magickDataset);
       return;
@@ -198,7 +211,7 @@
       return;
     }
 
-    if (isAlphabetOpen) {
+    if (isAlphabetOpen || isAlphabetLettersOpen) {
       ensure.ensureAlphabetSection?.(magickDataset, referenceData);
       return;
     }
@@ -233,7 +246,7 @@
       return;
     }
 
-    renderHomeFallback();
+    config.homeUi?.syncNowPanelTheme?.(new Date());
   }
 
   function getActiveSection() {