2.2.1

Fix wet, windy and storms

assets/js/app.js

@@ -177,6 +177,22 @@ export function UTCIForecast() {
     skinType,
   );
 
+  // Day's events surfaced in the "Today at a glance" box. Reuses the same
+  // row shape as glanceSummary items: { icon, label, value, alert }.
+  const hhmm = (iso) => (iso ? iso.slice(11, 16) : '');
+  const eventGlanceItems = (selectedDayEvents ?? [])
+    .filter(ev => ev.type !== 'promo')
+    .map(ev => ({
+      icon: ev.emoji,
+      label: ev.title,
+      value: ev.isoRange
+        ? (ev.isoRange[0] === ev.isoRange[1]
+            ? hhmm(ev.isoRange[0])
+            : `${hhmm(ev.isoRange[0])} – ${hhmm(ev.isoRange[1])}`)
+        : (ev.nightOnly ? 'Overnight' : 'All day'),
+      alert: false,
+    }));
+
   // ─── 4. JSX RETURN ───────────────────────────────────────────────────
   // Everything below is the actual page markup, written as one big HTM
   // template. Search tips:
@@ -902,7 +918,7 @@ export function UTCIForecast() {
               </div>
             </div>
             </div>
-            ${forecast && glanceSummary && glanceSummary.length > 0 && html`
+            ${forecast && ((glanceSummary && glanceSummary.length > 0) || eventGlanceItems.length > 0) && html`
               <aside class="glance-rail">
                 <div class="insight-panel insight-panel--glance">
                   <div class="insight-panel-title">Today at a glance</div>
@@ -913,6 +929,13 @@ export function UTCIForecast() {
                       <span class="insight-value">${value}</span>
                     </div>
                   `)}
+                  ${eventGlanceItems.map(({ icon, label, value, alert }) => html`
+                    <div class=${`insight-row${alert ? ' insight-row--alert' : ''}`} key=${`ev-${label}`}>
+                      <span class="insight-icon">${icon}</span>
+                      <span class="insight-label">${label}</span>
+                      <span class="insight-value">${value}</span>
+                    </div>
+                  `)}
                 </div>
               </aside>`}
             </div>