@sjvair/monitor-map 4.2.0 → 5.0.0-beta.0

package/dist/lib/index.js

@@ -15,9 +15,11 @@
  * ```svelte
  * <!-- app root -->
  * <script>
- *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { configureMonitorMap, provideMonitorMapRouter } from "@sjvair/monitor-map";
  *   import { route, navigate, p, isActive, Router } from "./router";
  *
+ *   // Once at startup, before the map or the EV layer is used. The library reads no keys itself.
+ *   configureMonitorMap({ maptilerKey, nrelKey });
  *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
  * </script>
  *
@@ -25,53 +27,12 @@
  * ```
  *
  * A host that must stay light at startup imports from the subpath entries instead:
- * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `configureMonitorMap`/`provideMonitorMapRouter`/`monitorsManager` from
+ * "@sjvair/monitor-map/core" (no map), and
  * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
  * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
+export { configureMonitorMap, monitorMapConfig } from "./config.svelte.js";
 export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter } from "./router-context";
-// State managers
-export { monitorsManager } from "./monitors/monitors.svelte";
-export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
-export { evStationsManager } from "./ev-stations/ev-stations.svelte";
-export { hmsManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
-// Map integrations
-export { monitorsMapIntegration, MonitorsMapIntegration } from "./monitors/monitors-map-integration.svelte";
-export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte";
-export { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte";
-export { windMapIntegration } from "./wind/wind.svelte";
-export { baseLayerSeperator } from "./map/integrations/base-layer-seperator";
-export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
-export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
-// Components
-export { default as Map } from "./map/Map.svelte";
-export { default as MapShell } from "./map/MapShell.svelte";
-export { default as LoadScreen, loadScreenState, enable as enableLoadScreen, disable as disableLoadScreen } from "./LoadScreen.svelte";
-// Options toolbar / panel (compose these inside MapShell's `menu` snippet)
-export { default as OptionsBar } from "./options/OptionsBar.svelte";
-export { default as OptionsGroup } from "./options/OptionsGroup.svelte";
-export { default as OptionsMenu } from "./options/OptionsMenu.svelte";
-export { default as CheckboxRow } from "./options/rows/CheckboxRow.svelte";
-export { default as RadioRow } from "./options/rows/RadioRow.svelte";
-export { default as SubmenuRow } from "./options/rows/SubmenuRow.svelte";
-export { default as GroupRow } from "./options/rows/GroupRow.svelte";
-export { default as MarkerIcon } from "./options/rows/MarkerIcon.svelte";
-export { default as PollutantMenu } from "./options/menus/PollutantMenu.svelte";
-export { default as MonitorsMenu } from "./options/menus/MonitorsMenu.svelte";
-export { default as LayersMenu } from "./options/menus/LayersMenu.svelte";
-export { default as OverlaysMenu } from "./options/menus/OverlaysMenu.svelte";
-export { default as SettingsMenu } from "./options/menus/SettingsMenu.svelte";
-export { resetMapOptions } from "./options/reset-map-options";
-export { mapStyleState } from "./map/map-style-state.svelte.js";
-// Legend
-export { default as Legend } from "./legend/Legend.svelte";
-export { default as LegendBar } from "./legend/LegendBar.svelte";
-export { pollutantLegendSection, fireSmokeLegendSections } from "./legend/legend-data";
-export { FIRE_LEGEND_CATEGORIES } from "./hms/hms-fire-icon-manager";
-export { SMOKE_LEGEND } from "./hms/hms-smoke-map-integration.svelte";
-// Integration base classes (extend these to add custom map features)
-export { MapIntegration } from "./map/integrations/map-integration.svelte";
-export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte";
-export { MapIconLayerIntegration as MapGeoJSONIntegration } from "./map/integrations/map-geojson-integration.svelte";
+export { monitorsManager } from "./monitors/monitors.svelte.js";

package/dist/lib/legend/Legend.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
 	import { ChevronDownIcon, InfoIcon } from "@lucide/svelte";
-	import LegendBar from "./LegendBar.svelte";
-	import type { LegendSection } from "./legend-data";
+	import { Legend, legendSection, type MapContext } from "@sjvair/map-sdk";
 
-	let { sections }: { sections: Array<LegendSection> } = $props();
+	let { map }: { map: MapContext } = $props();
 
 	// Independent of which sections are active, so toggling a layer doesn't reset it.
 	let collapsed = $state(false);
+
+	// What map-sdk's Legend would list: a scale with levels, or a status line for a plugin that is
+	// loading or failing. The card is hidden while there is none.
+	const hasSections = $derived(
+		map.plugins.some((plugin) => {
+			const data = plugin.legend?.();
+			if (!data) return false;
+			if ("status" in data) return data.status.state !== "ready";
+			return legendSection(data, map.format) !== null;
+		})
+	);
 </script>
 
-{#if sections.length}
+{#if hasSections}
 	<div class="pointer-events-auto w-84 max-w-[calc(100vw-2rem)] rounded-md bg-white shadow">
 		<button
 			type="button"
@@ -21,20 +31,9 @@
 			<span class="flex-1 text-left">Legend</span>
 			<ChevronDownIcon size={18} class="transition-transform {collapsed ? '-rotate-90' : ''}" />
 		</button>
-		{#if !collapsed}
-			<div class="flex flex-col gap-3 border-t border-gray-200 px-4 py-3">
-				{#each sections as section (section.id)}
-					<div>
-						<p class="mb-2 text-center text-sm font-semibold">
-							{section.title}
-							{#if section.unit}
-								<span class="text-xs font-normal text-gray-500">({section.unit})</span>
-							{/if}
-						</p>
-						<LegendBar bar={section.bar} />
-					</div>
-				{/each}
-			</div>
-		{/if}
+		<!-- Kept mounted (hidden) when collapsed so the legend doesn't re-read the theme on expand. -->
+		<div class="border-t border-gray-200 px-4 py-3 {collapsed ? 'hidden' : ''}">
+			<Legend {map} order="top-first" framed={false} />
+		</div>
 	</div>
 {/if}

package/dist/lib/legend/Legend.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { LegendSection } from "./legend-data";
+import { Legend, type MapContext } from "@sjvair/map-sdk";
 type $$ComponentProps = {
-    sections: Array<LegendSection>;
+    map: MapContext;
 };
 declare const Legend: import("svelte").Component<$$ComponentProps, {}, "">;
 type Legend = ReturnType<typeof Legend>;

package/dist/lib/levels.d.ts

@@ -0,0 +1,7 @@
+import { type Level, type Scale } from "@sjvair/map-sdk/data";
+/** The color for a reading no level covers, as map-sdk draws an inactive monitor. */
+export declare const NEUTRAL_LEVEL_COLOR = "#969696";
+/** The scale level a reading falls in, or null when there is no scale or no level covers it. */
+export declare function readingLevel(value: string | number | null | undefined, scale: Scale | null): Level | null;
+/** A reading as the panel shows it: cut off to a whole number, or "–" when not a number. */
+export declare function readingDisplay(value: string | number | null | undefined): string;

package/dist/lib/levels.js

@@ -0,0 +1,19 @@
+import { levelFor, NO_LEVEL } from "@sjvair/map-sdk/data";
+/** The color for a reading no level covers, as map-sdk draws an inactive monitor. */
+export const NEUTRAL_LEVEL_COLOR = "#969696";
+/** The scale level a reading falls in, or null when there is no scale or no level covers it. */
+export function readingLevel(value, scale) {
+    if (!scale)
+        return null;
+    const level = levelFor(value, scale);
+    return level === NO_LEVEL ? null : level;
+}
+/** A reading as the panel shows it: cut off to a whole number, or "–" when not a number. */
+export function readingDisplay(value) {
+    // Number("") and Number(null) are 0, not a reading.
+    if (value === null || value === undefined || (typeof value === "string" && !value.trim())) {
+        return "–";
+    }
+    const number = Math.trunc(Number(value));
+    return Number.isFinite(number) ? number.toString() : "–";
+}

package/dist/lib/map/MapShell.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
-	import type { SomeMapIntegration } from "./integrations/types";
+	import type { MapContext } from "@sjvair/map-sdk";
 
 	export interface MapShellProps {
-		/** Map integrations to register, e.g. [monitorsMapIntegration] */
-		integrations: Array<SomeMapIntegration>;
+		/** The map to show, from `createMap()` (the monitor map uses `createLiveMap()`). */
+		map: MapContext;
 		/**
 		 * True once the caller's own data managers have finished their initial
-		 * load. The shell hides the load screen once the map is idle AND this
+		 * load. The shell hides the load screen once the map is ready AND this
 		 * is true.
 		 */
 		ready: boolean;
@@ -56,13 +56,12 @@
 
 <script lang="ts">
 	import LoadScreen, { disable as disableLoadScreen } from "../LoadScreen.svelte";
-	import Map from "./Map.svelte";
+	import { MapView } from "@sjvair/map-sdk";
 	import OptionsBar from "../options/OptionsBar.svelte";
-	import { mapManager } from "./map-manager.svelte.js";
 	import { useMonitorMapRouter } from "../router-context";
 
 	let {
-		integrations,
+		map,
 		ready,
 		loadError,
 		panelOpen,
@@ -76,28 +75,14 @@
 	}: MapShellProps = $props();
 
 	const basePath = providedBasePath ?? (routerEscapeHatch ? useMonitorMapRouter().basePath : "");
-	const TRANSITION_MS = 300;
 
 	$effect(() => {
-		// mapManager.map is only ever assigned once its own initial "load" has
-		// already fired (see initializeMap in map-manager.svelte.ts), so by the time this
-		// effect sees a non-null map, it's already safe to reveal — waiting for a
-		// further "idle" event here is unreliable since one may never fire again.
-		if (mapManager.map && ready) {
+		// `map.ready` is map-sdk's signal that the style loaded and the map went idle.
+		if (map.ready && ready) {
 			disableLoadScreen();
 		}
 	});
 
-	$effect(() => {
-		if (panelOpen) {
-			// Container width snapped to open; resize after layout settles
-			requestAnimationFrame(() => mapManager.map?.resize());
-		} else {
-			// Container width snaps back after the transform transition ends
-			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
-		}
-	});
-
 	/**
 	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
 	 * as well as navigating back
@@ -131,7 +116,15 @@
 <div class="relative flex h-full w-full flex-col md:flex-row">
 	<LoadScreen error={loadError} />
 	<div class="relative flex-1 overflow-hidden">
-		<Map {integrations} />
+		<MapView
+			{map}
+			label="Air quality monitor map"
+			controls="engine"
+			featureList={{ position: "top-right", reveal: "focus" }}
+			selectionBar={false}
+			tooltip="pointer"
+			class="h-full w-full"
+		/>
 		{@render overlays?.()}
 		{#if menu || search}
 			<OptionsBar {search}>{@render menu?.()}</OptionsBar>

package/dist/lib/map/MapShell.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from "svelte";
-import type { SomeMapIntegration } from "./integrations/types";
+import type { MapContext } from "@sjvair/map-sdk";
 export interface MapShellProps {
-    /** Map integrations to register, e.g. [monitorsMapIntegration] */
-    integrations: Array<SomeMapIntegration>;
+    /** The map to show, from `createMap()` (the monitor map uses `createLiveMap()`). */
+    map: MapContext;
     /**
      * True once the caller's own data managers have finished their initial
-     * load. The shell hides the load screen once the map is idle AND this
+     * load. The shell hides the load screen once the map is ready AND this
      * is true.
      */
     ready: boolean;

package/dist/lib/map/basemaps.d.ts

@@ -0,0 +1,25 @@
+import type { BasemapConfig } from "@sjvair/map-sdk";
+/** The basemap the map opens on, and Reset selects: Streets v4's default variant. */
+export declare function defaultBasemapId(): string;
+/**
+ * The monitor map's basemaps: every MapTiler style's variants (style URLs, so map-sdk's fallback
+ * can match a failed style by URL), opening on Streets v4, with no layers removed.
+ */
+export declare function monitorMapBasemaps(): BasemapConfig;
+export interface BasemapChoice {
+    name: string;
+    variants: Array<{
+        id: string;
+        type: string;
+        name: string;
+    }>;
+}
+/** The Basemap select's options (one per style name) and each one's Theme radios. */
+export declare function basemapChoices(): BasemapChoice[];
+/** The choice that has a variant with this id. */
+export declare function choiceForId(id: string): BasemapChoice | undefined;
+/**
+ * The variant to show after switching to the basemap named `toBaseName`: the same variant type
+ * (e.g. "DARK") as `currentId` when the new basemap offers it, otherwise its default.
+ */
+export declare function switchBasemap(currentId: string, toBaseName: string): string;

package/dist/lib/map/basemaps.js

@@ -0,0 +1,66 @@
+import { MapStyle } from "@maptiler/sdk";
+/** Every MapTiler style at its highest `_V<n>` version, sorted by name. */
+const BASEMAP_STYLES = (() => {
+    const latest = new Map();
+    for (const style of Object.values(MapStyle)) {
+        const id = style.getId();
+        const match = id.match(/^(.+?)_V(\d+)$/i);
+        const baseName = match ? match[1] : id;
+        const version = match ? parseInt(match[2], 10) : 0;
+        const existing = latest.get(baseName);
+        if (!existing || version > existing.version) {
+            latest.set(baseName, { version, style });
+        }
+    }
+    return Array.from(latest.values())
+        .map((e) => e.style)
+        .sort((a, b) => a.getName().localeCompare(b.getName()));
+})();
+/** The basemap the map opens on, and Reset selects: Streets v4's default variant. */
+export function defaultBasemapId() {
+    return MapStyle.STREETS_V4.getDefaultVariant().getId();
+}
+/**
+ * The monitor map's basemaps: every MapTiler style's variants (style URLs, so map-sdk's fallback
+ * can match a failed style by URL), opening on Streets v4, with no layers removed.
+ */
+export function monitorMapBasemaps() {
+    const seen = new Set();
+    const styles = [];
+    for (const style of BASEMAP_STYLES) {
+        for (const variant of style.getVariants()) {
+            const id = variant.getId();
+            if (seen.has(id))
+                continue;
+            seen.add(id);
+            styles.push({ id, style: variant.getExpandedStyleURL() });
+        }
+    }
+    return { styles, defaultId: defaultBasemapId(), excludedLayers: [] };
+}
+/** The Basemap select's options (one per style name) and each one's Theme radios. */
+export function basemapChoices() {
+    return BASEMAP_STYLES.map((style) => ({
+        name: style.getName(),
+        variants: style
+            .getVariants()
+            .map((variant) => ({ id: variant.getId(), type: variant.getType(), name: variant.getName() }))
+    }));
+}
+/** The choice that has a variant with this id. */
+export function choiceForId(id) {
+    return basemapChoices().find((choice) => choice.variants.some((v) => v.id === id));
+}
+/**
+ * The variant to show after switching to the basemap named `toBaseName`: the same variant type
+ * (e.g. "DARK") as `currentId` when the new basemap offers it, otherwise its default.
+ */
+export function switchBasemap(currentId, toBaseName) {
+    const target = BASEMAP_STYLES.find((style) => style.getName() === toBaseName);
+    if (!target)
+        return currentId;
+    const type = choiceForId(currentId)?.variants.find((v) => v.id === currentId)?.type;
+    if (type && target.hasVariant(type))
+        return target.getVariant(type).getId();
+    return target.getDefaultVariant().getId();
+}

package/dist/lib/map/live-map.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type MapContext } from "@sjvair/map-sdk";
+/** The monitor map's map context: a globe over space on Streets v4, with every basemap to choose. */
+export declare function createLiveMap(): MapContext;

package/dist/lib/map/live-map.svelte.js

@@ -0,0 +1,22 @@
+import { createMap } from "@sjvair/map-sdk";
+import { monitorMapBasemaps } from "./basemaps";
+import { monitorMapConfig } from "../config.svelte.js";
+/** The San Joaquin Valley view the map opens on. */
+const INITIAL_VIEW = {
+    center: [-119.7987626619462, 36.76272050981146],
+    zoom: 7,
+    bearing: 0,
+    pitch: 0
+};
+/** The monitor map's map context: a globe over space on Streets v4, with every basemap to choose. */
+export function createLiveMap() {
+    return createMap({
+        config: {
+            maptilerKey: monitorMapConfig().maptilerKey,
+            initialView: INITIAL_VIEW,
+            projection: "globe",
+            space: { preset: "milkyway" },
+            basemaps: monitorMapBasemaps()
+        }
+    });
+}

package/dist/lib/map/sync-plugins.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { MapContext, MapPlugin, PluginOptions } from "@sjvair/map-sdk";
+import { type PluginKey } from "../options/plugin-order";
+/** A plugin, or a plugin with the add options it needs (e.g. its selection mode). */
+export type PluginEntry = MapPlugin | {
+    plugin: MapPlugin;
+    options?: Omit<PluginOptions, "before">;
+};
+/**
+ * Builds a fresh plugin for each key (plugin objects are single-use). Called untracked. A key
+ * with no factory is never added, and never removed either: another `syncPlugins` call may own it.
+ */
+export type PluginFactories = Partial<Record<PluginKey, () => PluginEntry>>;
+/**
+ * Keeps `map`'s plugins in step with `wanted()`, in `DRAW_ORDER`: adds a wanted plugin below the
+ * first present plugin above it and removes one that is no longer wanted. A change to anything
+ * `deps()` reads removes and re-adds every present plugin of `factories` (e.g. `clustered`,
+ * which a plugin only takes when it is built). Call it during component setup.
+ */
+export declare function syncPlugins(map: MapContext, wanted: () => Set<PluginKey>, factories: PluginFactories, deps?: () => unknown): void;

package/dist/lib/map/sync-plugins.svelte.js

@@ -0,0 +1,52 @@
+import { untrack } from "svelte";
+import { beforeId, DRAW_ORDER } from "../options/plugin-order";
+function entryOf(entry) {
+    return "plugin" in entry ? entry : { plugin: entry };
+}
+/**
+ * Keeps `map`'s plugins in step with `wanted()`, in `DRAW_ORDER`: adds a wanted plugin below the
+ * first present plugin above it and removes one that is no longer wanted. A change to anything
+ * `deps()` reads removes and re-adds every present plugin of `factories` (e.g. `clustered`,
+ * which a plugin only takes when it is built). Call it during component setup.
+ */
+export function syncPlugins(map, wanted, factories, deps) {
+    const keys = DRAW_ORDER.filter((key) => factories[key]);
+    // Bumped when a dep changes; separate from `wanted` so an option change that leaves the
+    // wanted set as it is never rebuilds anything.
+    let generation = $state(0);
+    let built = 0;
+    if (deps) {
+        let first = true;
+        $effect(() => {
+            deps();
+            if (first)
+                first = false;
+            else
+                untrack(() => generation++);
+        });
+    }
+    $effect(() => {
+        const want = wanted();
+        const current = generation;
+        untrack(() => {
+            const rebuild = current !== built;
+            built = current;
+            // A scratch copy of the ids for this pass; nothing reads it reactively.
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const present = new Set(map.plugins.map((p) => p.id));
+            for (const key of keys) {
+                if (present.has(key) && (rebuild || !want.has(key))) {
+                    map.removePlugin(key);
+                    present.delete(key);
+                }
+            }
+            for (const key of keys) {
+                if (!want.has(key) || present.has(key))
+                    continue;
+                const { plugin, options } = entryOf(factories[key]());
+                map.addPlugin(plugin, { ...options, before: beforeId(key, present) });
+                present.add(key);
+            }
+        });
+    });
+}

package/dist/lib/monitors/components/MonitorSubscriptionManager.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { BellCheckIcon, BellOffIcon, ChevronDownIcon } from "@lucide/svelte";
-	import { getSubscriptions, subscribe, unsubscribe } from "@sjvair/sdk/account";
-	import { monitorsManager } from "../..";
+	import { subscribe, unsubscribe } from "@sjvair/sdk/account";
+	import LoadError from "../../LoadError.svelte";
+	import { monitorsManager } from "../monitors.svelte.js";
+	import { getApiToken, loadSubscriptionLevel } from "../subscriptions";
 
 	interface MonitorSubscriptionManagerProps {
 		monitorId: string;
@@ -21,38 +23,38 @@
 	let saving = $state(false);
 	let subscribedLevel: string | null = $state(null);
 
+	// The alert rows, in this order, from the PM2.5 scale; a key the scale lacks is skipped.
 	const alertLevels = $derived.by(() => {
-		if (!monitorsManager.meta) return [];
-		try {
-			return monitorsManager.meta
-				.entryType("pm25")
-				.asIter.levels!.filter((level) =>
-					ALERT_LEVEL_NAMES.includes(level.name as (typeof ALERT_LEVEL_NAMES)[number])
-				);
-		} catch {
-			return [];
-		}
+		const levels = monitorsManager.meta?.entryType("pm25").scale?.levels ?? [];
+		return ALERT_LEVEL_NAMES.flatMap((key) => levels.find((level) => level.key === key) ?? []);
 	});
 
+	let loadError = $state(false);
+	let attempt = $state(0);
+
 	$effect(() => {
-		void monitorId;
+		const id = monitorId;
+		void attempt;
 		open = false;
 		subscribedLevel = null;
-		loadSubscription();
-	});
-
-	async function loadSubscription() {
-		const id = monitorId;
+		loadError = false;
+		const controller = new AbortController();
+		const { signal } = controller;
 		loading = true;
-		try {
-			const subscriptions = await getSubscriptions(getApiToken());
-			if (id !== monitorId) return;
-			const match = subscriptions.find((s) => s.monitor === id);
-			subscribedLevel = match?.level ?? null;
-		} finally {
-			if (id === monitorId) loading = false;
-		}
-	}
+		loadSubscriptionLevel(id, { signal })
+			.then((level) => {
+				if (!signal.aborted) subscribedLevel = level;
+			})
+			.catch((error) => {
+				if (signal.aborted) return;
+				console.error("Could not load subscription status", error);
+				loadError = true;
+			})
+			.finally(() => {
+				if (!signal.aborted) loading = false;
+			});
+		return () => controller.abort();
+	});
 
 	async function handleLevelClick(level: string | null) {
 		if (saving || !level) return;
@@ -75,61 +77,59 @@
 		}
 		open = false;
 	}
-
-	function getApiToken(): string {
-		return (
-			(globalThis as unknown as Record<string, Record<string, string>>)["USER"]?.api_token ?? ""
-		);
-	}
 </script>
 
-<div class="relative select-none">
-	<button
-		class={[
-			"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
-			subscribedLevel
-				? "border-green-700 bg-green-600 hover:bg-green-700"
-				: "border-blue-600 bg-blue-500 hover:bg-blue-600"
-		]}
-		disabled={loading}
-		onclick={() => (open = !open)}
-	>
-		{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
-		<ChevronDownIcon
-			size={16}
-			class={["transition-transform duration-300", open ? "rotate-180" : ""]}
-		/>
-	</button>
+{#if loadError}
+	<LoadError message="Couldn't load your alert settings." onretry={() => attempt++} />
+{:else}
+	<div class="relative select-none">
+		<button
+			class={[
+				"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
+				subscribedLevel
+					? "border-green-700 bg-green-600 hover:bg-green-700"
+					: "border-blue-600 bg-blue-500 hover:bg-blue-600"
+			]}
+			disabled={loading}
+			onclick={() => (open = !open)}
+		>
+			{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
+			<ChevronDownIcon
+				size={16}
+				class={["transition-transform duration-300", open ? "rotate-180" : ""]}
+			/>
+		</button>
 
-	{#if open}
-		<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
-		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
-			{#if subscribedLevel}
-				<button
-					class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
-					onclick={() => handleLevelClick(subscribedLevel)}
-				>
-					Unsubscribe
-					<BellOffIcon size={14} />
-				</button>
-			{/if}
-			{#each alertLevels as level (level.name)}
-				{@const isSubscribed = level.name === subscribedLevel}
-				<button
-					class={[
-						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
-					]}
-					style="background-color: {level.color}"
-					disabled={saving}
-					onclick={!isSubscribed ? () => handleLevelClick(level.name) : null}
-				>
-					<span>{level.label}</span>
-					{#if isSubscribed}
-						<BellCheckIcon size={14} />
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-</div>
+		{#if open}
+			<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
+			<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
+				{#if subscribedLevel}
+					<button
+						class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
+						onclick={() => handleLevelClick(subscribedLevel)}
+					>
+						Unsubscribe
+						<BellOffIcon size={14} />
+					</button>
+				{/if}
+				{#each alertLevels as level (level.key)}
+					{@const isSubscribed = level.key === subscribedLevel}
+					<button
+						class={[
+							"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
+							!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
+						]}
+						style="background-color: {level.color}"
+						disabled={saving}
+						onclick={!isSubscribed ? () => handleLevelClick(level.key) : null}
+					>
+						<span>{level.label}</span>
+						{#if isSubscribed}
+							<BellCheckIcon size={14} />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}