+
+{/snippet}
diff --git a/src/routes/weather/hero.svelte.ts b/src/routes/weather/hero.svelte.ts
new file mode 100644
index 0000000..cf90360
--- /dev/null
+++ b/src/routes/weather/hero.svelte.ts
@@ -0,0 +1,20 @@
+import { getContext } from 'svelte';
+
+import type { Snippet } from 'svelte';
+
+interface HeroContext {
+ setActions: (snippet: Snippet | null) => void;
+}
+
+/**
+ * Renders a page's own controls into the shared location row that lives in
+ * `weather/+layout.svelte`. The row itself stays mounted across navigation;
+ * only the controls swap, and they are cleared when the page unmounts.
+ */
+export function useHeroActions(actions: Snippet): void {
+ const hero = getContext
{@render children()}
-
-
-
+{/snippet}
diff --git a/src/routes/weather/compare/[location]/+page.svelte b/src/routes/weather/compare/[location]/+page.svelte
index 8e09e2e..c328477 100644
--- a/src/routes/weather/compare/[location]/+page.svelte
+++ b/src/routes/weather/compare/[location]/+page.svelte
@@ -28,6 +28,7 @@
fetchModelComparison
} from '$lib/services/weather';
+ import { useHeroActions } from '../../hero.svelte';
import { findModel, hourly, modelGroups } from '../../options';
import { defaultParameters } from '../../options';
import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
@@ -52,6 +53,8 @@
let { data }: { data: PageData } = $props();
+ useHeroActions(heroActions);
+
// the URL is the source of truth: location comes from the load function,
// which is also correct on hydrated prerendered pages. The persisted store
// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -280,28 +283,8 @@
});
-
-
-
- .toLowerCase()}.svg)
-
-
+
+{#snippet heroActions()}
-
-
- - {location.name} -
-- {#if location.admin1}{location.admin1}, - {/if}{location.country ?? ''}·14-day ensemble forecast -
-
-
-
-
-
-
+
+{#snippet heroActions()}
-
-
- - {location.name} -
-- {#if location.admin1}{location.admin1}, - {/if}{location.country ?? ''}·Model comparison -
-
@@ -345,7 +328,7 @@
{/each}
-
-
-
-
-
-
-
- - {location.name} -
-- {#if location.admin1}{location.admin1}, - {/if}{location.country ?? ''}·Historical weather -
-
-
-
-
-
+
+{#snippet heroActions()}
{#if result}
-
-
- - {location.name} -
-- {#if location.admin1}{location.admin1}, - {/if}{location.country ?? ''}·Seasonal outlook -
-
{/if}
-
+{/snippet}
diff --git a/src/routes/weather/week/[location]/+page.svelte b/src/routes/weather/week/[location]/+page.svelte
index f3324d5..e616a66 100644
--- a/src/routes/weather/week/[location]/+page.svelte
+++ b/src/routes/weather/week/[location]/+page.svelte
@@ -23,6 +23,7 @@
humanizeWeatherError
} from '$lib/services/weather';
+ import { useHeroActions } from '../../hero.svelte';
import { defaultParameters } from '../../options';
import { computeDayNightWeatherCodes } from '../../utils/weather-codes';
import DailyStripSticky from './DailyStripSticky.svelte';
@@ -37,6 +38,8 @@
let { data }: { data: PageData } = $props();
+ useHeroActions(heroActions);
+
let params = $state({
models: ['best_match'],
...defaultParameters
@@ -56,6 +59,14 @@
// arrives (no layout shift)
let enabledChartCount = $derived($storedChartLayout.filter((p) => p.variables.length > 0).length);
+ // Height the hourly table will occupy once it renders, so its placeholder
+ // reserves exactly that and nothing below it jumps. The table is a header row
+ // plus one row per enabled variable, so the count drives the estimate.
+ const TABLE_HEADER_PX = 96;
+ const TABLE_ROW_PX = 57;
+ let enabledTableRows = $derived(Object.values($storedVariablePrefs.table).filter(Boolean).length);
+ let tableSkeletonHeight = $derived(TABLE_HEADER_PX + enabledTableRows * TABLE_ROW_PX);
+
// Request only the hourly variables the table rows and meteograms actually
// show, so unused variables are never fetched. weather_code is always
// included: the day cards / strip derive their day- and night-period icons
@@ -200,45 +211,24 @@
+
+{#snippet heroActions()}
+
+ {
+ params.models = [model];
+ storedModel.set(model);
+ // a new model may not support the extended / past range
+ forecastDays = 7;
+ pastDays = 0;
+ }}
+ />
+
+{/snippet}
+
-
- (variableSidebarOpen = false)} />
{#if loadError}
@@ -314,19 +304,20 @@
the strip's sentinel view-timeline so the sticky strip (a sibling of
the sentinel) can scrub its collapse from it. -->
+
+
+
{/if}
diff --git a/src/routes/weather/week/[location]/ChartCustomizer.svelte b/src/routes/weather/week/[location]/ChartCustomizer.svelte
index 9170cf2..4c42210 100644
--- a/src/routes/weather/week/[location]/ChartCustomizer.svelte
+++ b/src/routes/weather/week/[location]/ChartCustomizer.svelte
@@ -1,7 +1,13 @@
-
-
- .toLowerCase()}.svg)
-
-
-
-
-
- - {location.name} -
-- {#if location.admin1}{location.admin1}, - {/if}{location.country ?? ''}·7-day forecast -
-
- {
- params.models = [model];
- storedModel.set(model);
- // a new model may not support the extended / past range
- forecastDays = 7;
- pastDays = 0;
- }}
- />
-
-
- {#if fetchedDaily}
- (forecastDays = 15)}
- canExtendPast={pastDays < 3}
- onExtendPast={() => (pastDays = 3)}
- {locationRoute}
- />
- {/if}
+
+ (forecastDays = 15)}
+ canExtendPast={pastDays < 3}
+ onExtendPast={() => (pastDays = 3)}
+ {locationRoute}
+ />
{#if fetchedHourly && fetchedDaily}
(variableSidebarOpen = true)}
/>
{:else}
-
+
+ in:fade={{ duration: 200 }}
+ class="-mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
+ >
+
{/if}
{#if fetchedHourly}
+
+
+
+
+
+
+
+
+
+
+
+
+
+