4.9.3

Layout tweaks

assets/js/hooks/useAppState.js

@@ -637,6 +637,18 @@ export function useAppState() {
     return next;
   });
 
+  // Rotates the hourly table: off = hours down the side, on = hours along
+  // the top with the metrics down the side. Off by default — the tall
+  // layout is the one most people expect from a forecast table.
+  const [tableRotated, setTableRotated] = useState(() => {
+    try { return localStorage.getItem('sunscope_table_rotated') === '1'; } catch (e) { return false; }
+  });
+  const toggleTableRotated = () => setTableRotated(v => {
+    const next = !v;
+    try { localStorage.setItem('sunscope_table_rotated', next ? '1' : '0'); } catch (e) { /* ignore */ }
+    return next;
+  });
+
   // Table row interval: 1 = every hour, 2/3/4 = clock-aligned buckets. Default 2.
   const [tableInterval, setTableIntervalState] = useState(() => {
     try { const n = parseInt(localStorage.getItem('sunscope_table_interval'), 10); return [1, 2, 3, 4].includes(n) ? n : 2; } catch (e) { return 2; }
@@ -741,6 +753,9 @@ export function useAppState() {
     headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
     forecast, visibleCols, selectedDay, skinType, vehicleType,
     indoorMode, indoorManaged, showDecimals, showUnits,
+    // The rotated table is a single table with CSS-only sticky edges, so
+    // none of this hook's dual-table syncing applies to it.
+    rotated: tableRotated,
   });
 
   // ── 8. GEOCODING SEARCH ───────────────────────────────────────────────
@@ -888,6 +903,7 @@ export function useAppState() {
     panelOpen, openPanel, closePanel,
     showUnits, toggleShowUnits,
     tableInterval, setTableInterval,
+    tableRotated, toggleTableRotated,
     forecastView, setForecastView,
     // table refs
     headStickyRef, headTrackRef, headTableRef,