What is SunScope?
diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js
new file mode 100644
index 0000000..e659274
--- /dev/null
+++ b/assets/js/components/DayTabs.js
@@ -0,0 +1,445 @@
+// ------------------------------------------------------------------------
+// components/DayTabs.js - Day-tab strip, pro-prompt card, confidence
+// band bar, and filter-profile row for the UTCIForecast app.
+//
+// Extracted from app.js to keep the main component under the AI edit
+// safe-zone. All state lives in useAppState - this component is purely
+// presentational and receives everything it needs as props.
+//
+// Props:
+// days - array of day objects from buildHourlyRows
+// selectedDay - index of the active day tab
+// setSelectedDay - setter for selectedDay
+// isPro - boolean Pro status
+// FREE_DAYS - number of free days
+// proPromptDay - index of locked day that was clicked
+// setProPromptDay - setter for proPromptDay
+// proPromptSource - string key for upsell copy
+// setProPromptSource - setter for proPromptSource
+// activeProfile - current filter profile key
+// activateProfile - function to switch profile
+// activeCols - effective column set for current profile
+// visibleCols - object of col-key -> boolean visibility
+// activityOptions - dropdown options for Activities selector
+// placeOptions - dropdown options for Places selector
+// activityValue - current activity dropdown value
+// activityLabel - current activity dropdown label
+// placeValue - current place dropdown value
+// placeLabel - current place dropdown label
+// outdoorsVariant - current outdoors sub-variant key
+// setOutdoorsVariantAndSave - setter that also persists to localStorage
+// setActiveProfile - raw setter for activeProfile
+// setVisibleCols - raw setter for visibleCols
+// setIndoorMode - setter for indoorMode
+// setIndoorManaged - setter for indoorManaged
+// dayTabsRef - ref for the scrollable tab strip element
+// canScrollLeft - boolean for left-fade chevron
+// canScrollRight - boolean for right-fade chevron
+// scrollDayTabs - function(dir) to scroll strip left/right
+// ------------------------------------------------------------------------
+
+import { h, Fragment } from '../../vendor/preact.js';
+import htm from '../../vendor/htm.js';
+import { confidenceBand } from '../utils.js';
+import { FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS, profileButtonOrder, activityVariantKeys, placeVariantKeys } from '../config.js';
+import { CloudIcon, PrecipIcon, CustomSelect } from '../components.js';
+
+const html = htm.bind(h);
+
+export function DayTabs({
+ days,
+ selectedDay, setSelectedDay,
+ isPro,
+ proPromptDay, setProPromptDay,
+ proPromptSource, setProPromptSource,
+ activeProfile, activateProfile, activeCols,
+ visibleCols,
+ activityOptions, placeOptions,
+ activityValue, activityLabel,
+ placeValue, placeLabel,
+ outdoorsVariant, setOutdoorsVariantAndSave,
+ setActiveProfile, setVisibleCols,
+ setIndoorMode, setIndoorManaged,
+ dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs,
+}) {
+ return html`
+ <${Fragment}>
+
+
+
+ ${proPromptDay !== null && days[proPromptDay] && (() => {
+ const promptDate = new Date(days[proPromptDay].key + 'T00:00Z');
+ const dayName = promptDate.toLocaleDateString('en-GB', { weekday: 'long', timeZone: 'UTC' });
+ const extraPromptCopy = {
+ 'variant:sailing': {
+ title: 'Sailing is part of SunScope Extra',
+ detail: 'Extra adds specialist planning views for higher-commitment trips, including wind, exposure, UV, and wet-weather comfort for water conditions.',
+ },
+ 'profile:alltemps': {
+ title: 'Temps is part of SunScope Extra',
+ detail: 'Extra unlocks the comparison view for air, soil, concrete, vehicle, and indoor temperatures in one place.',
+ },
+ 'profile:custom': {
+ title: 'Custom columns are part of SunScope Extra',
+ detail: 'Extra lets you choose exactly which columns appear: mix and match Air, Dew, Soil, UV, UTCI and more to build your perfect view.',
+ },
+ 'variant:festival': {
+ title: 'Festival planning is part of SunScope Extra',
+ detail: 'Extra adds multi-day comfort, ground condition, exposure, and rain planning for higher-stakes outdoor trips.',
+ },
+ 'variant:wintersports': {
+ title: 'Winter Sports is part of SunScope Extra',
+ detail: 'Extra adds specialist exposure planning for snow, glare, wind, UV reflection, and cold-weather comfort.',
+ },
+ 'variant:naturist': {
+ title: 'Naturist is part of SunScope Extra',
+ detail: 'Extra adds specialist skin-exposure planning with UV, wind, humidity, precipitation, and felt-temperature detail.',
+ },
+ };
+ const promptCopy = extraPromptCopy[proPromptSource] || {
+ title: `${dayName}'s forecast is part of SunScope Extra`,
+ detail: 'Extra unlocks the full 14-day forecast, customisable columns, specialist profiles, and an ad-free view.',
+ };
+ return html`
+
+
+
+ 🔒 ${promptCopy.title}
+
+
+ ${promptCopy.detail}
+
+
+ £2 / month · cancel any time
+
+
+
+
+ Subscribe — £2/month
+
+
+ Already subscribed? Restore access →
+
+
+ Manage or cancel subscription →
+
+
+
+
`;
+ })()}
+
+ ${(() => {
+ const band = confidenceBand(selectedDay);
+ const isOutlook = selectedDay >= 7;
+ return html`
+
+
+ Day ${selectedDay + 1} of 14 · Forecast clarity: ${band.label}
+
+ ${isOutlook && html`
+
+ forecast skill is reduced — treat hourly detail as trend, not precision
+ `}
+
`;
+ })()}
+
+
+ Profile:
+ ${profileButtonOrder.slice(0, 3).map((key) => {
+ const profile = FILTER_PROFILES[key];
+ const locked = profile.proOnly && !isPro;
+ return html`
+ `;
+ })}
+
+ <${CustomSelect}
+ key="places"
+ value=${placeValue}
+ isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)}
+ noHide=${true}
+ hideLabel="🌤️ Places"
+ buttonLabel=${placeValue === 'off' ? '🌤️ Places' : `${placeLabel}`}
+ options=${placeOptions}
+ onChange=${(v) => {
+ if (v === 'off') { activateProfile('basic'); return; }
+ if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
+ setProPromptSource(`variant:${v}`);
+ setProPromptDay(0);
+ return;
+ }
+ try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
+ setActiveProfile('outdoors');
+ setOutdoorsVariantAndSave(v);
+ setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
+ setIndoorMode('off');
+ setIndoorManaged(false);
+ }}
+ />
+ <${CustomSelect}
+ key="activities"
+ value=${activityValue}
+ isOn=${activeProfile === 'farming' || (activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant))}
+ noHide=${true}
+ hideLabel="🎯 Activities"
+ buttonLabel=${activityValue === 'off' ? '🎯 Activities' : ` ${activityLabel}`}
+ options=${activityOptions}
+ onChange=${(v) => {
+ if (v === 'off') { activateProfile('basic'); return; }
+ if (v === 'farming') { activateProfile('farming'); return; }
+ if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
+ setProPromptSource(`variant:${v}`);
+ setProPromptDay(0);
+ return;
+ }
+ try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
+ setActiveProfile('outdoors');
+ setOutdoorsVariantAndSave(v);
+ setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
+ setIndoorMode('off');
+ setIndoorManaged(false);
+ }}
+ />
+
+ ${profileButtonOrder.slice(3).map((key) => {
+ const profile = FILTER_PROFILES[key];
+ const locked = profile.proOnly && !isPro;
+ return html`
+ `;
+ })}
+
+
+ `;
+}
diff --git a/assets/js/hooks/useAppState.js b/assets/js/hooks/useAppState.js
new file mode 100644
index 0000000..2f3fa04
--- /dev/null
+++ b/assets/js/hooks/useAppState.js
@@ -0,0 +1,442 @@
+// ------------------------------------------------------------------------
+// hooks/useAppState.js - All state and side-effect logic for UTCIForecast.
+//
+// Extracted from app.js to keep the main component under the AI edit
+// safe-zone. This hook owns every useState, useEffect, useCallback and
+// useRef that app.js needs, returning them as a single flat object.
+//
+// Usage in app.js:
+// const state = useAppState();
+// const { forecast, isPro, visibleCols, ... } = state;
+//
+// Reading order:
+// 1. Location + search
+// 2. Day-tab scroll refs
+// 3. Pro tier
+// 4. Profile + column visibility
+// 5. Skin, vehicle, indoor, pollen
+// 6. Table refs
+// 7. Column popup + table scroll hooks
+// 8. Geocoding search effect
+// 9. Computation - rows, days, current row
+// 10. Banner - events, snooze, slideshow
+// ------------------------------------------------------------------------
+
+import { useState, useEffect, useRef, useCallback } from '../../vendor/preact-hooks.js';
+import {
+ FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS,
+ profileButtonOrder, variantIcons,
+ activityVariantKeys, placeVariantKeys,
+} from '../config.js';
+import { utciCategory } from '../utils.js';
+import { buildHourlyRows } from '../compute.js';
+import { useForecast } from './useForecast.js';
+import { useColumnPopup } from './useColumnPopup.js';
+import { useTableScroll } from './useTableScroll.js';
+import { getActiveEvents, getLensEvent } from '../events.js';
+
+export function useAppState() {
+
+ // ── 1. LOCATION ──────────────────────────────────────────────────────
+ const [location, setLocation] = useState(() => {
+ try {
+ const saved = localStorage.getItem('sunscope_last_location');
+ if (saved) return JSON.parse(saved);
+ } catch (e) { /* ignore */ }
+ return { name: 'Pangbourne, Berkshire', lat: 51.4839, lon: -1.0725, country: 'GB' };
+ });
+
+ const setLocationAndSave = (loc) => {
+ try { localStorage.setItem('sunscope_last_location', JSON.stringify(loc)); } catch (e) { /* ignore */ }
+ setLocation(loc);
+ };
+
+ const { forecast, airQuality, loading, error, now } = useForecast(location);
+
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const [searching, setSearching] = useState(false);
+ const [selectedDay, setSelectedDay] = useState(0);
+ const [proPromptDay, setProPromptDay] = useState(null);
+ const [proPromptSource, setProPromptSource] = useState('day');
+
+ // ── 2. DAY-TAB SCROLL ────────────────────────────────────────────────
+ const dayTabsRef = useRef(null);
+ const [canScrollLeft, setCanScrollLeft] = useState(false);
+ const [canScrollRight, setCanScrollRight] = useState(false);
+
+ useEffect(() => {
+ const el = dayTabsRef.current;
+ if (!el) return;
+ const update = () => {
+ setCanScrollLeft(el.scrollLeft > 1);
+ setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+ };
+ update();
+ el.addEventListener('scroll', update, { passive: true });
+ window.addEventListener('resize', update);
+ let ro = null;
+ if (typeof ResizeObserver !== 'undefined') {
+ ro = new ResizeObserver(update);
+ ro.observe(el);
+ }
+ return () => {
+ el.removeEventListener('scroll', update);
+ window.removeEventListener('resize', update);
+ if (ro) ro.disconnect();
+ };
+ }, [forecast]);
+
+ useEffect(() => {
+ const el = dayTabsRef.current;
+ if (!el) return;
+ const activeTab = el.querySelector('.utci-day-tab.active');
+ if (!activeTab) return;
+ const elRect = el.getBoundingClientRect();
+ const tabRect = activeTab.getBoundingClientRect();
+ if (tabRect.left < elRect.left + 8) {
+ el.scrollBy({ left: tabRect.left - elRect.left - 24, behavior: 'smooth' });
+ } else if (tabRect.right > elRect.right - 8) {
+ el.scrollBy({ left: tabRect.right - elRect.right + 24, behavior: 'smooth' });
+ }
+ }, [selectedDay]);
+
+ const scrollDayTabs = (dir) => {
+ const el = dayTabsRef.current;
+ if (!el) return;
+ el.scrollBy({ left: dir * 200, behavior: 'smooth' });
+ };
+
+ // ── 3. PRO TIER ──────────────────────────────────────────────────────
+ const [isPro, setIsPro] = useState(() => {
+ const params = new URLSearchParams(window.location.search);
+ if (params.get('pro') === '1') {
+ localStorage.setItem('sunscope_pro', '1');
+ window.history.replaceState({}, '', window.location.pathname);
+ return true;
+ }
+ return localStorage.getItem('sunscope_pro') === '1';
+ });
+
+ // ── 4. PROFILE + COLUMN VISIBILITY ───────────────────────────────────
+ const [activeProfile, setActiveProfile] = useState(() => {
+ try { return localStorage.getItem('sunscope_profile') || 'basic'; } catch (e) { return 'basic'; }
+ });
+
+ const [visibleCols, setVisibleCols] = useState(() => {
+ try {
+ const saved = localStorage.getItem('sunscope_profile') || 'basic';
+ // If saved profile is outdoors. read columns from the saved variant - Beach. Running. etc.
+ // so the column buttons match the autoloaded variant on startup.
+ if (saved === 'outdoors') {
+ const savedVariant = localStorage.getItem('sunscope_outdoors_variant') || 'urban';
+ const variantCols = OUTDOORS_VARIANTS[savedVariant]?.cols
+ ?? FILTER_PROFILES.outdoors.cols;
+ return { ...variantCols };
+ }
+ return { ...(FILTER_PROFILES[saved]?.cols ?? FILTER_PROFILES.basic.cols) };
+ } catch (e) { return { ...FILTER_PROFILES.basic.cols }; }
+ });
+
+ const toggleCol = (col) => setVisibleCols(prev => ({ ...prev, [col]: !prev[col] }));
+
+ const activateProfile = (key) => {
+ const profile = FILTER_PROFILES[key];
+ try { localStorage.setItem('sunscope_profile', key); } catch (e) { /* ignore */ }
+ setActiveProfile(key);
+ if (key !== 'custom') {
+ setVisibleCols({ ...profile.cols });
+ const hasIndoor = profile.cols['indoorT'] || profile.cols['managedT'];
+ setIndoorMode(hasIndoor ? 'on' : 'off');
+ setIndoorManaged(false);
+ }
+ };
+
+ // ── 5. SKIN, VEHICLE, INDOOR, POLLEN ─────────────────────────────────
+ const [skinType, setSkinType] = useState('II');
+ const [vehicleType, setVehicleType] = useState('car');
+ const [vehicleVent, setVehicleVent] = useState(false);
+
+ const [outdoorsVariant, setOutdoorsVariant] = useState(() => {
+ try { return localStorage.getItem('sunscope_outdoors_variant') || 'urban'; } catch (e) { return 'urban'; }
+ });
+ const setOutdoorsVariantAndSave = (v) => {
+ try { localStorage.setItem('sunscope_outdoors_variant', v); } catch (e) { /* ignore */ }
+ setOutdoorsVariant(v);
+ // Sync the column toggle buttons to the variants own cols so the UI matches
+ // the autoloaded selection - eg Beach selects Dew. Sun. UV-B and Running selects RH. Pollen. UTCI.
+ const variantCols = OUTDOORS_VARIANTS[v]?.cols;
+ if (variantCols) {
+ setVisibleCols({ ...variantCols });
+ const hasIndoor = variantCols['indoorT'] || variantCols['managedT'];
+ setIndoorMode(hasIndoor ? 'on' : 'off');
+ }
+ };
+
+ const activeCols = activeProfile === 'outdoors'
+ ? (OUTDOORS_VARIANTS[outdoorsVariant]?.cols ?? FILTER_PROFILES.outdoors.cols)
+ : (FILTER_PROFILES[activeProfile]?.cols ?? FILTER_PROFILES.basic.cols);
+
+ const [buildingType, setBuildingType] = useState('brick');
+ const [indoorManaged, setIndoorManaged] = useState(false);
+ const [indoorMode, setIndoorMode] = useState(() => {
+ try {
+ const saved = localStorage.getItem('sunscope_profile') || 'basic';
+ const cols = FILTER_PROFILES[saved]?.cols ?? FILTER_PROFILES.basic.cols;
+ return (cols['indoorT'] || cols['managedT']) ? 'on' : 'off';
+ } catch (e) { return 'off'; }
+ });
+
+ const [pollenType, setPollenType] = useState(() => {
+ try { return localStorage.getItem('sunscope_pollen_type') || 'all_pollen'; } catch (e) { return 'all_pollen'; }
+ });
+ const setPollenTypeAndSave = (v) => {
+ try { localStorage.setItem('sunscope_pollen_type', v); } catch (e) { /* ignore */ }
+ setPollenType(v);
+ };
+
+ const searchTimeout = useRef(null);
+
+ // Derived selectors used by profile controls
+ const activityOptions = [
+ {
+ value: 'farming',
+ label: `${FILTER_PROFILES.farming.icon} ${FILTER_PROFILES.farming.label}`,
+ },
+ ...activityVariantKeys.map((k) => {
+ const v = OUTDOORS_VARIANTS[k];
+ return {
+ value: k,
+ label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
+ };
+ }),
+ ];
+ const placeOptions = placeVariantKeys.map((k) => {
+ const v = OUTDOORS_VARIANTS[k];
+ return {
+ value: k,
+ label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
+ };
+ });
+
+ const activityValue = activeProfile === 'farming'
+ ? 'farming'
+ : activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)
+ ? outdoorsVariant
+ : 'off';
+ const activityLabel = activityOptions.find((o) => o.value === activityValue)?.label;
+ const placeValue = activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)
+ ? outdoorsVariant
+ : 'off';
+ const placeLabel = placeOptions.find((o) => o.value === placeValue)?.label;
+
+ // ── 6. TABLE REFS ────────────────────────────────────────────────────
+ const headStickyRef = useRef(null);
+ const headTrackRef = useRef(null);
+ const headTableRef = useRef(null);
+ const bodyScrollRef = useRef(null);
+ const bodyTableRef = useRef(null);
+ const tableWrapRef = useRef(null);
+
+ // ── 7. COLUMN POPUP + TABLE SCROLL ───────────────────────────────────
+ const {
+ colPopup, colPopupRef,
+ handleThClick, handleThEnter, handleThLeave,
+ handlePopupEnter, handlePopupLeave,
+ eventTagPopup, eventTagPopupRef,
+ evSlideIndex, evTransition, evSlideTo,
+ handleEventTagClick, handleEventTagEnter, handleEventTagLeave,
+ handleEventTagPopupEnter, handleEventTagPopupLeave,
+ closePopup, closeEventTagPopup,
+ } = useColumnPopup();
+
+ const {
+ tableCanScrollLeft,
+ tableCanScrollRight,
+ handleBodyScroll,
+ } = useTableScroll({
+ headTableRef, bodyTableRef, bodyScrollRef, headTrackRef,
+ forecast, visibleCols, selectedDay, skinType, vehicleType,
+ indoorMode, indoorManaged,
+ });
+
+ // ── 8. GEOCODING SEARCH ───────────────────────────────────────────────
+ useEffect(() => {
+ if (searchQuery.length < 2) { setSearchResults([]); return; }
+ if (searchTimeout.current) clearTimeout(searchTimeout.current);
+ searchTimeout.current = setTimeout(async () => {
+ setSearching(true);
+ try {
+ const r = await fetch(
+ `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(searchQuery)}&count=6&language=en&format=json`
+ );
+ const j = await r.json();
+ setSearchResults(j.results || []);
+ } catch { setSearchResults([]); }
+ finally { setSearching(false); }
+ }, 300);
+ }, [searchQuery]);
+
+ // ── 9. COMPUTATION ───────────────────────────────────────────────────
+ const { hourlyRows, days, utcOffsetMs } = buildHourlyRows({
+ forecast, airQuality, location, vehicleType, vehicleVent, buildingType,
+ });
+
+ const visible = days[selectedDay]?.rows || [];
+
+ const nowLocalISO = new Date(now.getTime() + utcOffsetMs).toISOString().slice(0, 13);
+ const currentRow = hourlyRows.length > 0
+ ? (hourlyRows.find(row => row.iso.slice(0, 13) === nowLocalISO)
+ ?? hourlyRows.reduce((best, row) =>
+ Math.abs(row.dt - now) < Math.abs(best.dt - now) ? row : best))
+ : null;
+ const currentCat = currentRow
+ ? utciCategory(currentRow.utciAdj)
+ : { bg: '#4a4228', fg: '#ede4cc', label: 'No data' };
+
+ // ── 10. BANNER + EVENTS ───────────────────────────────────────────────
+ const [dismissedEventIds, setDismissedEventIds] = useState([]);
+
+ const BANNER_SNOOZE_HOURS = 6;
+ const BANNER_SNOOZE_MS = BANNER_SNOOZE_HOURS * 60 * 60 * 1000;
+ const BANNER_SNOOZE_KEY = id => `sunscope.banner.snoozed.${id}`;
+
+ const [bannerIndex, setBannerIndex] = useState(0);
+ const [bannerTransition, setBannerTransition] = useState(null);
+ const [bannerPrevIndex, setBannerPrevIndex] = useState(null);
+ const [bannerVisible, setBannerVisible] = useState(false);
+ const bannerIndexRef = useRef(0);
+ const bannerStageRef = useRef(null);
+
+ useEffect(() => { bannerIndexRef.current = bannerIndex; }, [bannerIndex]);
+
+ const isSnoozed = id => {
+ try {
+ const ts = localStorage.getItem(BANNER_SNOOZE_KEY(id));
+ return ts && (Date.now() - Number(ts)) < BANNER_SNOOZE_MS;
+ } catch (e) { return false; }
+ };
+
+ const todayRows = days[0]?.rows || [];
+ const activeEvents = getActiveEvents(todayRows, location)
+ .filter(ev => !dismissedEventIds.includes(ev.id) && !isSnoozed(ev.id));
+ const lensEvent = getLensEvent(activeEvents);
+ const selectedDayEvents = getActiveEvents(visible, location);
+
+ // Only show banner when events first appear - not on every re-render
+ // Using a ref to track previous length avoids re-showing during dismiss animation
+ const prevActiveEventsLenRef = useRef(0);
+ useEffect(() => {
+ const prev = prevActiveEventsLenRef.current;
+ prevActiveEventsLenRef.current = activeEvents.length;
+ if (activeEvents.length > 0 && prev === 0) setBannerVisible(true);
+ }, [activeEvents.length]);
+
+ const bannerSlideTo = useCallback((next) => {
+ const stage = bannerStageRef.current;
+ if (stage) {
+ stage.style.height = stage.offsetHeight + 'px';
+ stage.style.transition = 'height 0.45s cubic-bezier(0.4,0,0.2,1)';
+ }
+ setBannerPrevIndex(bannerIndexRef.current);
+ setBannerIndex(next);
+ setBannerTransition('crossfading');
+ setTimeout(() => {
+ if (stage) {
+ const incoming = stage.querySelector('.event-banner:not(.event-banner--outgoing)');
+ if (incoming) stage.style.height = incoming.offsetHeight + 'px';
+ }
+ }, 16);
+ setTimeout(() => {
+ setBannerTransition(null);
+ setBannerPrevIndex(null);
+ if (stage) { stage.style.height = ''; stage.style.transition = ''; }
+ }, 460);
+ }, []);
+
+ const dismissBanner = useCallback((evId) => {
+ // Do NOT write the snooze to localStorage yet. activeEvents filters out snoozed events
+ // synchronously on the very next render. so writing here would cause the banner to be
+ // unmounted before the fade animation can start - which is what made it snap closed.
+ // We snooze AFTER the animation finishes inside the setTimeout below.
+ requestAnimationFrame(() => {
+ setBannerVisible(false);
+ setTimeout(() => {
+ try { localStorage.setItem(BANNER_SNOOZE_KEY(evId), String(Date.now())); } catch (e) {}
+ setDismissedEventIds(ids => [...ids, evId]);
+ setBannerIndex(0);
+ }, 500);
+ });
+ }, []);
+
+ useEffect(() => {
+ if (activeEvents.length <= 1) { setBannerIndex(0); return; }
+ const id = setInterval(() => {
+ const next = (bannerIndexRef.current + 1) % activeEvents.length;
+ bannerSlideTo(next);
+ }, 10000);
+ return () => clearInterval(id);
+ }, [activeEvents.length, activeEvents.map(e => e.id).join(','), bannerSlideTo]);
+
+ useEffect(() => {
+ if (bannerIndex >= activeEvents.length) setBannerIndex(0);
+ }, [activeEvents.length]);
+
+ // ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
+ return {
+ // location
+ location, setLocationAndSave,
+ // forecast
+ forecast, airQuality, loading, error, now,
+ // search
+ searchQuery, setSearchQuery,
+ searchResults, setSearchResults,
+ searching,
+ // day selection
+ selectedDay, setSelectedDay,
+ proPromptDay, setProPromptDay,
+ proPromptSource, setProPromptSource,
+ // day-tab scroll
+ dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs,
+ // pro
+ isPro, setIsPro,
+ // profile
+ activeProfile, setActiveProfile,
+ activateProfile, activeCols,
+ visibleCols, setVisibleCols, toggleCol,
+ activityOptions, placeOptions,
+ activityValue, activityLabel,
+ placeValue, placeLabel,
+ // skin, vehicle, indoor, pollen
+ skinType, setSkinType,
+ vehicleType, setVehicleType,
+ vehicleVent, setVehicleVent,
+ outdoorsVariant, setOutdoorsVariantAndSave,
+ buildingType, setBuildingType,
+ indoorManaged, setIndoorManaged,
+ indoorMode, setIndoorMode,
+ pollenType, setPollenTypeAndSave,
+ // table refs
+ headStickyRef, headTrackRef, headTableRef,
+ bodyScrollRef, bodyTableRef, tableWrapRef,
+ // column popup
+ colPopup, colPopupRef,
+ handleThClick, handleThEnter, handleThLeave,
+ handlePopupEnter, handlePopupLeave,
+ eventTagPopup, eventTagPopupRef,
+ evSlideIndex, evTransition, evSlideTo,
+ handleEventTagClick, handleEventTagEnter, handleEventTagLeave,
+ handleEventTagPopupEnter, handleEventTagPopupLeave,
+ closePopup, closeEventTagPopup,
+ // table scroll
+ tableCanScrollLeft, tableCanScrollRight, handleBodyScroll,
+ // computation
+ hourlyRows, days, utcOffsetMs,
+ visible, nowLocalISO, currentRow, currentCat,
+ // banner + events
+ activeEvents, lensEvent, selectedDayEvents,
+ bannerIndex, bannerTransition, bannerPrevIndex,
+ bannerVisible, bannerStageRef,
+ bannerSlideTo, dismissBanner,
+ };
+}