update and add number theory page

app/ui-numbers.js

@@ -3,10 +3,14 @@
 
   let initialized = false;
   let activeNumberValue = 0;
+  let activeNumbersView = "browse";
+  let sectionChangeListenerBound = false;
   let config = {
     getReferenceData: () => null,
     getMagickDataset: () => null,
-    ensureTarotSection: null
+    ensureTarotSection: null,
+    getActiveSection: () => "home",
+    setActiveSection: null
   };
 
   const NUMBERS_SPECIAL_BASE_VALUES = [1, 2, 3, 4];
@@ -88,6 +92,12 @@
     return typeof config.getMagickDataset === "function" ? config.getMagickDataset() : null;
   }
 
+  function getActiveSection() {
+    return typeof config.getActiveSection === "function"
+      ? config.getActiveSection()
+      : "home";
+  }
+
   function getElements() {
     return {
       countEl: document.getElementById("numbers-count"),
@@ -96,10 +106,29 @@
       detailTypeEl: document.getElementById("numbers-detail-type"),
       detailSummaryEl: document.getElementById("numbers-detail-summary"),
       detailBodyEl: document.getElementById("numbers-detail-body"),
-      specialPanelEl: document.getElementById("numbers-special-panel")
+      specialPanelEl: document.getElementById("numbers-special-panel"),
+      openNumbersBrowseEl: document.getElementById("open-numbers-browse"),
+      openNumbersTheoryEl: document.getElementById("open-numbers-theory")
     };
   }
 
+  function normalizeNumbersView(value) {
+    return value === "theory" ? "theory" : "browse";
+  }
+
+  function applyNumbersViewUiState() {
+    const { openNumbersBrowseEl, openNumbersTheoryEl } = getElements();
+    const isNumbersSectionActive = getActiveSection() === "numbers";
+
+    if (openNumbersBrowseEl) {
+      openNumbersBrowseEl.classList.toggle("is-active", isNumbersSectionActive && activeNumbersView === "browse");
+    }
+
+    if (openNumbersTheoryEl) {
+      openNumbersTheoryEl.classList.toggle("is-active", isNumbersSectionActive && activeNumbersView === "theory");
+    }
+  }
+
   function normalizeNumberValue(value) {
     const parsed = Number(value);
     if (!Number.isFinite(parsed)) {
@@ -257,6 +286,7 @@
       computeDigitalRoot,
       rankLabelToTarotMinorRank,
       ensureTarotSection: config.ensureTarotSection,
+      activeNumbersView,
       selectNumberEntry,
       NUMBERS_SPECIAL_BASE_VALUES,
       numbersSpecialFlipState,
@@ -282,6 +312,7 @@
   function ensureNumbersSection() {
     const { listEl } = getElements();
     if (!listEl) {
+      applyNumbersViewUiState();
       return;
     }
 
@@ -309,6 +340,33 @@
 
     renderNumbersList();
     renderNumberDetail(activeNumberValue);
+    applyNumbersViewUiState();
+  }
+
+  function setNumbersView(view, openNumbersSection = false) {
+    activeNumbersView = normalizeNumbersView(view);
+
+    if (openNumbersSection && typeof config.setActiveSection === "function") {
+      config.setActiveSection("numbers");
+    }
+
+    if (getActiveSection() === "numbers" || openNumbersSection) {
+      ensureNumbersSection();
+      const { detailBodyEl } = getElements();
+      if (detailBodyEl instanceof HTMLElement) {
+        detailBodyEl.scrollTop = 0;
+      }
+    } else {
+      applyNumbersViewUiState();
+    }
+  }
+
+  function showBrowseView(openNumbersSection = false) {
+    setNumbersView("browse", openNumbersSection);
+  }
+
+  function showTheoryView(openNumbersSection = false) {
+    setNumbersView("theory", openNumbersSection);
   }
 
   function init(nextConfig = {}) {
@@ -316,6 +374,15 @@
       ...config,
       ...nextConfig
     };
+
+    if (!sectionChangeListenerBound) {
+      document.addEventListener("section:changed", () => {
+        applyNumbersViewUiState();
+      });
+      sectionChangeListenerBound = true;
+    }
+
+    applyNumbersViewUiState();
   }
 
   window.TarotNumbersUi = {
@@ -323,6 +390,11 @@
     init,
     ensureNumbersSection,
     selectNumberEntry,
-    normalizeNumberValue
+    normalizeNumberValue,
+    showBrowseView,
+    showTheoryView,
+    getActiveView() {
+      return activeNumbersView;
+    }
   };
 })();