update ui and add new audio components

app/ui-now-helpers.js

@@ -24,6 +24,21 @@
     { id: "pluto", astronomyBody: "Pluto", fallbackName: "Pluto", fallbackSymbol: "♇︎" }
   ];
 
+  const NOW_PLANET_SIGN_LAYOUT = [
+    { id: "aries", name: "Aries", symbol: "♈" },
+    { id: "libra", name: "Libra", symbol: "♎" },
+    { id: "taurus", name: "Taurus", symbol: "♉" },
+    { id: "scorpio", name: "Scorpio", symbol: "♏" },
+    { id: "gemini", name: "Gemini", symbol: "♊" },
+    { id: "sagittarius", name: "Sagittarius", symbol: "♐" },
+    { id: "cancer", name: "Cancer", symbol: "♋" },
+    { id: "capricorn", name: "Capricorn", symbol: "♑" },
+    { id: "leo", name: "Leo", symbol: "♌" },
+    { id: "aquarius", name: "Aquarius", symbol: "♒" },
+    { id: "virgo", name: "Virgo", symbol: "♍" },
+    { id: "pisces", name: "Pisces", symbol: "♓" }
+  ];
+
   function resetNowLightboxZoom() {
     if (!nowLightboxImageEl) {
       return;
@@ -302,22 +317,94 @@
     return positions;
   }
 
+  function normalizeNowSignId(sign) {
+    if (!sign) {
+      return "";
+    }
+
+    const signId = String(sign?.id || sign).trim().toLowerCase();
+    if (signId) {
+      return signId;
+    }
+
+    return String(sign?.name || "").trim().toLowerCase();
+  }
+
+  function buildNowPlanetSignBuckets(planetPositions = []) {
+    const positionsBySign = new Map();
+
+    planetPositions.forEach((position) => {
+      const signId = normalizeNowSignId(position?.sign);
+      if (!signId) {
+        return;
+      }
+
+      if (!positionsBySign.has(signId)) {
+        positionsBySign.set(signId, []);
+      }
+
+      positionsBySign.get(signId).push(position);
+    });
+
+    return NOW_PLANET_SIGN_LAYOUT.map((signMeta) => ({
+      ...signMeta,
+      positions: (positionsBySign.get(signMeta.id) || [])
+        .slice()
+        .sort((left, right) => Number(left?.degreeInSign || 0) - Number(right?.degreeInSign || 0))
+    })).filter((signBucket) => signBucket.positions.length > 0);
+  }
+
+  function formatNowPlanetEntry(position) {
+    const symbol = String(position?.symbol || "").trim();
+    const name = String(position?.name || "").trim() || "--";
+    const degree = Number(position?.degreeInSign);
+    const degreeLabel = Number.isFinite(degree) ? `${degree.toFixed(1)}°` : "--";
+
+    return `${symbol ? `${symbol} ` : ""}${name} ${degreeLabel}`.trim();
+  }
+
+  function renderNowPlanetPositions(containerEl, planetPositions = []) {
+    if (!containerEl) {
+      return;
+    }
+
+    containerEl.replaceChildren();
+
+    const positions = Array.isArray(planetPositions) ? planetPositions.filter(Boolean) : [];
+    if (!positions.length) {
+      containerEl.textContent = "--";
+      return;
+    }
+
+    buildNowPlanetSignBuckets(positions).forEach((signBucket) => {
+      const item = document.createElement("div");
+      item.className = "now-stats-planet";
+
+      const title = document.createElement("div");
+      title.className = "now-stats-planet-sign";
+      title.textContent = `${signBucket.symbol} ${signBucket.name}`;
+      item.appendChild(title);
+
+      const list = document.createElement("div");
+      list.className = "now-stats-planet-list";
+
+      signBucket.positions.forEach((position) => {
+        const entry = document.createElement("div");
+        entry.className = "now-stats-planet-entry";
+        entry.textContent = formatNowPlanetEntry(position);
+        list.appendChild(entry);
+      });
+
+      item.appendChild(list);
+      containerEl.appendChild(item);
+    });
+  }
+
   function updateNowStats(referenceData, elements, now) {
     const planetPositions = calculatePlanetPositions(referenceData, now);
 
     if (elements.nowStatsPlanetsEl) {
-      elements.nowStatsPlanetsEl.replaceChildren();
-
-      if (!planetPositions.length) {
-        elements.nowStatsPlanetsEl.textContent = "--";
-      } else {
-        planetPositions.forEach((position) => {
-          const item = document.createElement("div");
-          item.className = "now-stats-planet";
-          item.textContent = position.label;
-          elements.nowStatsPlanetsEl.appendChild(item);
-        });
-      }
+      renderNowPlanetPositions(elements.nowStatsPlanetsEl, planetPositions);
     }
 
     if (elements.nowStatsSabianEl) {
@@ -524,6 +611,7 @@
     formatCountdown,
     getDisplayTarotName,
     setNowCardImage,
+    renderNowPlanetPositions,
     updateNowStats
   };
 })();