@sjvair/monitor-map 3.0.7 → 3.0.8

package/dist/lib/search/Search.svelte

@@ -111,34 +111,34 @@
 
 <div
 	class={[
-		"flex flex-col bg-white shadow-md overflow-hidden transition-all duration-300 select-none",
-		collapsed ? "w-12 h-12 rounded-full" : "w-90 rounded-3xl",
+		"flex flex-col overflow-hidden bg-white shadow-md transition-all duration-300 select-none",
+		collapsed ? "h-12 w-12 rounded-full" : "w-90 rounded-3xl",
 		!collapsed && results.length ? "max-h-90" : "max-h-12"
 	]}
 	use:clickOutside
 >
-	<div class="flex items-center w-full h-12 shrink-0">
+	<div class="flex h-12 w-full shrink-0 items-center">
 		<button
-			class="w-12 h-12 shrink-0 flex items-center justify-center rounded-full bg-brand border-4 border-white"
+			class="bg-brand flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-4 border-white"
 			onclick={openSearch}
 			aria-label="Open search"
 		>
 			<SearchIcon size="24" color="#FFFFFF" />
 		</button>
-		<div class="overflow-hidden w-full h-full flex items-center">
+		<div class="flex h-full w-full items-center overflow-hidden">
 			<input
 				bind:this={inputEl}
 				bind:value={searchText}
 				oninput={debouncedSearch}
 				type="text"
 				placeholder="Search monitors or locations..."
-				class="h-full px-2 text-sm bg-transparent border-none outline-none w-full"
+				class="h-full w-full border-none bg-transparent px-2 text-sm outline-none"
 				tabindex={collapsed ? -1 : 0}
 			/>
 			{#if searchText && !collapsed}
 				<button
 					onclick={clearSearch}
-					class="px-2 text-gray-400 hover:text-gray-600 text-xl leading-none cursor-pointer"
+					class="cursor-pointer px-2 text-xl leading-none text-gray-400 hover:text-gray-600"
 					aria-label="Clear search">×</button
 				>
 			{/if}
@@ -146,7 +146,7 @@
 	</div>
 	<div
 		class={[
-			"overflow-y-auto transition-all duration-300 divide-y divide-gray-100",
+			"divide-y divide-gray-100 overflow-y-auto transition-all duration-300",
 			!collapsed ? "max-h-80" : "max-h-0"
 		]}
 	>
@@ -154,30 +154,30 @@
 			{#if result.type === "monitor"}
 				<button
 					onclick={() => selectMonitor(result)}
-					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
 				>
 					{#if result.logo.url}
 						<img
 							src={result.logo.url}
 							alt={result.logo.alt}
-							class="w-10 h-10 object-contain mr-3 shrink-0"
+							class="mr-3 h-10 w-10 shrink-0 object-contain"
 						/>
 					{/if}
-					<span class="text-sm truncate">{result.monitor.name}</span>
+					<span class="truncate text-sm">{result.monitor.name}</span>
 				</button>
 			{:else}
 				{@const comma = result.feature.place_name.indexOf(",")}
 				<button
 					onclick={() => selectGeocode(result)}
-					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
 				>
-					<span class="svg-icon location-on bg-brand w-6 h-6 shrink-0 mr-3"></span>
+					<span class="svg-icon location-on bg-brand mr-3 h-6 w-6 shrink-0"></span>
 					<div class="min-w-0">
-						<p class="text-sm font-medium truncate">
+						<p class="truncate text-sm font-medium">
 							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}
 						</p>
 						{#if comma >= 0}
-							<p class="text-xs text-muted-foreground truncate">
+							<p class="text-muted-foreground truncate text-xs">
 								{result.feature.place_name.substring(comma + 1).trim()}
 							</p>
 						{/if}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build:local": "PROD_MODE=local vite build",
@@ -31,54 +31,54 @@
 		"**/*.css"
 	],
 	"peerDependencies": {
+		"@internationalized/date": "^3.12.3",
 		"@sveltejs/enhanced-img": "^0.11.0",
+		"bits-ui": "^2.18.1",
 		"sv-router": "^0.16.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.1.0",
 		"@eslint/js": "^10.0.1",
-		"@fontsource-variable/inter": "^5.2.8",
+		"@fontsource-variable/inter": "^5.3.0",
 		"@sveltejs/enhanced-img": "^0.11.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
-		"@tailwindcss/vite": "^4.3.2",
-		"@types/node": "^26.1.1",
-		"eslint": "^10.6.0",
+		"@tailwindcss/vite": "^4.3.3",
+		"@types/node": "^26.1.2",
+		"eslint": "^10.8.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.20.0",
-		"globals": "^17.7.0",
-		"postcss": "^8.5.16",
-		"prettier": "^3.9.4",
+		"eslint-plugin-svelte": "^3.22.0",
+		"globals": "^17.9.0",
+		"postcss": "^8.5.25",
+		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
-		"prettier-plugin-tailwindcss": "^0.8.0",
-		"shadcn-svelte": "^1.4.0",
-		"svelte": "^5.56.4",
-		"svelte-check": "^4.7.2",
-		"tailwindcss": "^4.3.2",
+		"prettier-plugin-tailwindcss": "^0.8.1",
+		"shadcn-svelte": "^1.5.0",
+		"svelte": "^5.56.8",
+		"svelte-check": "^4.7.4",
+		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.63.0",
-		"vite": "^8.1.3"
+		"typescript-eslint": "^8.66.0",
+		"vite": "^8.2.0"
 	},
 	"dependencies": {
-		"@internationalized/date": "^3.12.2",
-		"@lucide/svelte": "^1.23.0",
-		"@maptiler/sdk": "^4.0.2",
+		"@lucide/svelte": "^1.28.0",
+		"@maptiler/sdk": "^4.1.0",
 		"@maptiler/weather": "^3.1.1",
-		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^3.0.2",
+		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^3.0.3",
 		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
 		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
-		"@turf/area": "^7.3.5",
-		"@turf/clusters-dbscan": "^7.3.5",
-		"@turf/helpers": "^7.3.5",
+		"@turf/area": "^7.4.0",
+		"@turf/clusters-dbscan": "^7.4.0",
+		"@turf/helpers": "^7.4.0",
 		"@types/geojson": "^7946.0.16",
-		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
 		"color2k": "^2.0.4",
 		"date-fns": "^4.4.0",
 		"tailwind-merge": "^3.6.0",
-		"tailwind-variants": "^3.2.2",
+		"tailwind-variants": "^3.3.1",
 		"uplot": "^1.6.32"
 	},
 	"keywords": [

package/src/lib/LoadScreen.svelte

@@ -39,7 +39,7 @@
 			<enhanced:img
 				src="./assets/logos/sjvair-parts/sjvair-icon.webp"
 				alt="SJVAir Icon"
-				class="icon inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
+				class="icon inline-block h-24! w-auto! object-contain transition-all duration-500 ease-out"
 				class:translate-x-0={loadScreenState.entered}
 				class:-translate-x-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -48,7 +48,7 @@
 			<enhanced:img
 				src="./assets/logos/sjvair-parts/sjvair-sjv.webp"
 				alt="SJV"
-				class="sjv inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
+				class="sjv inline-block h-24! w-auto! object-contain transition-all duration-500 ease-out"
 				class:translate-y-0={loadScreenState.entered}
 				class:-translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -57,7 +57,7 @@
 			<enhanced:img
 				src="./assets/logos/sjvair-parts/sjvair-air.webp"
 				alt="Air"
-				class="air inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
+				class="air inline-block h-24! w-auto! object-contain transition-all duration-500 ease-out"
 				class:translate-y-0={loadScreenState.entered}
 				class:translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}

package/src/lib/MapLegend.svelte

@@ -9,7 +9,7 @@
 	<HMSFireLegend />
 </div>
 -->
-<div class="flex flex-col gap-1 pointer-events-none pl-4 pb-4">
+<div class="pointer-events-none flex flex-col gap-1 pb-4 pl-4">
 	<HMSFireLegend />
 	<MonitorMarkersLegend />
 </div>

package/src/lib/MonitorDetailPanel.svelte

@@ -78,7 +78,7 @@
 	</span>
 {/snippet}
 
-<div class="flex h-full w-full flex-col overflow-y-auto bg-white">
+<div class="tall:overflow-y-hidden flex h-full w-full flex-col overflow-y-auto bg-white">
 	<div
 		class="flex flex-col items-center justify-center gap-8 border-b border-gray-200 p-4 shadow-lg"
 	>
@@ -107,7 +107,7 @@
 		{/if}
 	</div>
 
-	<div class="flex flex-col items-center gap-12 overflow-y-auto p-5 pt-10">
+	<div class="tall:overflow-y-auto flex flex-col items-center gap-12 p-5 pt-10">
 		{#if monitor}
 			<div class="flex w-full justify-around">
 				{#if tempData}
@@ -123,7 +123,9 @@
 				{/if}
 			</div>
 
-			<MonitorWidgetModal monitorId={monitor.id} />
+			<div class="tall:block hidden">
+				<MonitorWidgetModal monitorId={monitor.id} />
+			</div>
 			<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 			{#if (globalThis as any).USER?.is_authenticated}
 				<MonitorSubscriptionManager monitorId={monitor.id} />

package/src/lib/MonitorMapLayout.svelte

@@ -22,6 +22,7 @@
 	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
 	import MapLegend from "$lib/MapLegend.svelte";
 	import Search from "$lib/search/Search.svelte";
+	import { searchParams } from "sv-router";
 	import { useMonitorMapRouter } from "./router-context";
 
 	interface Props {
@@ -53,6 +54,28 @@
 
 	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
 
+	// Keep monitorsManager.pollutant and the "pollutant" URL param in sync, both directions.
+	// init() only seeds pollutant on the manager's first-ever initialization; this effect is what
+	// applies a later "?pollutant=" change (e.g. navigating in from elsewhere) to an already-running manager.
+	$effect(() => {
+		const urlPollutant = route.search.pollutant;
+		if (
+			monitorsManager.initialized &&
+			(urlPollutant === "pm25" || urlPollutant === "o3") &&
+			monitorsManager.pollutant !== urlPollutant
+		) {
+			monitorsManager.pollutant = urlPollutant;
+		}
+	});
+
+	// ...and the reverse: reflect UI-driven pollutant changes (e.g. the display-options toggle) back to the URL.
+	$effect(() => {
+		const pollutant = monitorsManager.pollutant;
+		if (pollutant && searchParams.get("pollutant") !== pollutant) {
+			searchParams.set("pollutant", pollutant);
+		}
+	});
+
 	$effect(() => {
 		if (mapManager.map && monitorsManager.initialized) {
 			mapManager.map.once("idle", () => disableLoadScreen());
@@ -108,11 +131,14 @@
 	);
 </script>
 
+<!--
 <div class="shell" class:panel-open={panelOpen}>
+  -->
+<div class="relative flex h-full w-full flex-col md:flex-row">
 	<LoadScreen />
 	<div class="relative flex-1 overflow-hidden">
 		<Map {integrations} />
-		<div class="z-10 absolute bottom-0 left-0 pointer-events-none">
+		<div class="pointer-events-none absolute bottom-0 left-0 z-10">
 			<MapLegend />
 		</div>
 		<div class="absolute top-4 left-4 z-10">
@@ -129,65 +155,21 @@
 			</div>
 		</div>
 	</div>
-	<div class="panel-container">
-		<div class="panel-content">
+	<div
+		class={[
+			"panel-containr w-full shrink-0 overflow-hidden",
+			panelOpen ? "h-1/2 md:h-full md:w-1/3" : "md:w-0"
+		]}
+	>
+		<div
+			class={[
+				"panel-contet h-full duration-300 ease-in-out",
+				panelOpen
+					? "translate-y-0 md:translate-x-0"
+					: "translate-y-full md:translate-x-full md:translate-y-0"
+			]}
+		>
 			{@render children()}
 		</div>
 	</div>
 </div>
-
-<style>
-	.shell {
-		display: flex;
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-
-	.panel-container {
-		flex-shrink: 0;
-		overflow: hidden;
-		width: 0;
-	}
-
-	.shell.panel-open .panel-container {
-		width: 33.333vw;
-	}
-
-	.panel-content {
-		width: 33.333vw;
-		height: 100%;
-		transform: translateX(100%);
-		transition: transform 300ms ease-in-out;
-	}
-
-	.shell.panel-open .panel-content {
-		transform: translateX(0);
-	}
-
-	@media (max-width: 768px) {
-		.shell {
-			flex-direction: column;
-		}
-
-		.panel-container {
-			width: 100vw;
-			height: 0;
-		}
-
-		.shell.panel-open .panel-container {
-			width: 100vw;
-			height: 50vh;
-		}
-
-		.panel-content {
-			width: 100vw;
-			height: 50vh;
-			transform: translateY(100%);
-		}
-
-		.shell.panel-open .panel-content {
-			transform: translateY(0);
-		}
-	}
-</style>

package/src/lib/collocation-sites/collocations-map-integration.svelte.ts

@@ -2,10 +2,7 @@ import { type Popup, type MapLayerEventType, type Map as MaptilerMap } from "@ma
 import type { Geometry } from "geojson";
 import { mapManager } from "$lib/map/map.svelte";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
-import {
-	CollocationIconManager,
-	getCollocationIconId
-} from "./collocations-icon-manager.svelte";
+import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";
 import { collocationSitesManager } from "./collocations.svelte";
 import { monitorsManager } from "$lib/monitors/monitors.svelte";

package/src/lib/components/MapLayersDisplayOptions.svelte

@@ -13,12 +13,12 @@
 
 <DisplayOption>
 	<p class="text-lg font-bold whitespace-nowrap underline">Map Layers</p>
-	<div class="flex gap-1 items-center">
+	<div class="flex items-center gap-1">
 		<WindIcon size="16" />
 		<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
 	</div>
 	{#if monitorsManager.pollutant === "pm25"}
-		<div class="flex gap-1 items-center">
+		<div class="flex items-center gap-1">
 			<CrosshairIcon size="16" color="#4A5FC6" />
 			<ToggleSwitch
 				id="collocation-sites"
@@ -27,14 +27,14 @@
 			></ToggleSwitch>
 		</div>
 	{/if}
-	<div class="flex gap-1 items-center">
+	<div class="flex items-center gap-1">
 		{#if fireIcon}
 			<img class="w-4" src={fireIcon.image.src} alt={fireIcon.image.alt} />
 		{/if}
 		<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
 		></ToggleSwitch>
 	</div>
-	<div class="flex gap-1 items-center">
+	<div class="flex items-center gap-1">
 		<WavesVerticalIcon size="16" />
 		<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
 		></ToggleSwitch>

package/src/lib/components/SegmentedControl.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { searchParams } from "sv-router";
-	import { untrack } from "svelte";
-
 	interface SegmentedControlProps {
 		segmentLabel?: string;
 		options: Array<{ label: string; value: string }>;
@@ -19,12 +16,6 @@
 		const checked = inner.querySelector<HTMLInputElement>("input:checked");
 		if (!checked) return;
 
-		// FIXME: this shouldn't live in this file
-		const pollutant = untrack(() => searchParams.get("pollutant"));
-		if (pollutant !== checked.value) {
-			untrack(() => searchParams.set("pollutant", checked.value));
-		}
-
 		const fontSize = parseFloat(getComputedStyle(inner).fontSize);
 		const padding = fontSize; // 1em
 		const label = checked.closest("label") as HTMLLabelElement;

package/src/lib/ev-stations/components/EvStationsDisplayOptions.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <DisplayOption>
-	<p class="whitespace-nowrap text-lg font-bold underline">EV Stations</p>
+	<p class="text-lg font-bold whitespace-nowrap underline">EV Stations</p>
 	<div class="mb-2 w-full text-xs">
 		<div class="w-fit">
 			<ToggleSwitch
@@ -17,7 +17,7 @@
 			/>
 		</div>
 	</div>
-	<label for="ev-lvl2" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl2" class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
 		<input
 			type="checkbox"
 			id="ev-lvl2"
@@ -30,7 +30,7 @@
 		/>
 		Level 2
 	</label>
-	<label for="ev-lvl3" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl3" class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
 		<input
 			type="checkbox"
 			id="ev-lvl3"

package/src/lib/hms/components/HMSFireLegend.svelte

@@ -5,12 +5,12 @@
 </script>
 
 {#if hmsFireMapIntegration.enabled && hmsFireMapIntegration.features.length > 0}
-	<div class="flex flex-col bg-white rounded shadow w-fit p-1">
-		<p class="text-center whitespace-nowrap font-semibold">Fire Points</p>
+	<div class="flex w-fit flex-col rounded bg-white p-1 shadow">
+		<p class="text-center font-semibold whitespace-nowrap">Fire Points</p>
 		<div class="flex flex-col">
 			{#each hmsFireMapIntegration.icons.iter as [, icon], idx (idx)}
-				<div class="flex gap-1 items-center">
-					<div class="size-9 flex justify-center items-center">
+				<div class="flex items-center gap-1">
+					<div class="flex size-9 items-center justify-center">
 						<img src={icon.image.src} alt={icon.image.alt} />
 					</div>
 					<span>{levels[idx]} MW</span>

package/src/lib/hms/hms-smoke-map-integration.svelte.ts

@@ -32,19 +32,23 @@ class HMSSmokeMapIntegration extends MapGeoJSONIntegration<SmokeProperties> {
 			source: this.referenceId,
 			layout: {},
 			paint: {
-				"fill-color": ["match", ["get", "density"],
-					"light", "#bfc8c3",
-					"medium", "#757b78",
+				"fill-color": [
+					"match",
+					["get", "density"],
+					"light",
+					"#bfc8c3",
+					"medium",
+					"#757b78",
 					"#333634"
 				],
-				"fill-opacity": ["match", ["get", "density"],
-					"light", 0.2,
-					"medium", 0.3,
-					0.4
-				],
-				"fill-outline-color": ["match", ["get", "density"],
-					"light", "#bfc8c3",
-					"medium", "#757b78",
+				"fill-opacity": ["match", ["get", "density"], "light", 0.2, "medium", 0.3, 0.4],
+				"fill-outline-color": [
+					"match",
+					["get", "density"],
+					"light",
+					"#bfc8c3",
+					"medium",
+					"#757b78",
 					"#333634"
 				]
 			}

package/src/lib/map/Menu.svelte

@@ -44,19 +44,20 @@
 		class:w-0={isOpen}
 		class:h-0={isOpen}
 		class:opacity-0={isOpen}
-		class="relative size-10 transition-all flex justify-center items-center"
+		class="relative flex size-10 items-center justify-center transition-all"
 		aria-label="Display Options"
 	>
 		<SlidersHorizontalIcon size="24" />
 	</button>
 	<div
-		class:h-55={isOpen}
-		class:w-135={isOpen}
-		class="relative flex h-0 w-0 items-center justify-center overflow-x-hidden overflow-y-scroll transition-all duration-250"
+		class={[
+			"relative flex max-w-[90vw] items-center justify-center overflow-x-hidden overflow-y-scroll transition-all duration-250",
+			isOpen ? "h-55 w-135" : "h-0 w-0"
+		]}
 	>
 		<div
 			data-trigger
-			class="absolute top-0 left-0 flex h-fit w-full items-start justify-between gap-4 p-2 flex-wrap"
+			class="xs:justify-between absolute top-0 left-0 flex h-fit w-full flex-wrap items-start gap-2 p-2 sm:justify-evenly md:justify-between md:gap-4"
 		>
 			{@render children?.()}
 		</div>

package/src/lib/monitors/components/MonitorMarkersLegend.svelte

@@ -7,17 +7,17 @@
 	);
 </script>
 
-<div class="min-w-50 flex flex-col bg-white rounded shadow py-[0.5em] px-[1.5em]">
-	<p class="text-center whitespace-nowrap font-semibold">
+<div class="flex min-w-50 flex-col rounded bg-white px-[1.5em] py-[0.5em] shadow">
+	<p class="text-center font-semibold whitespace-nowrap">
 		{label} Concentration
 	</p>
 	<div class="map-legend-bar inline-block h-[1.5em]">&nbsp;</div>
-	<div class="flex mb-[1.5em]">
-		<div class="w-1/5 shrink-0 h-[0.5em] border-l border-black">
+	<div class="mb-[1.5em] flex">
+		<div class="h-[0.5em] w-1/5 shrink-0 border-l border-black">
 			<span class="relative top-[0.5em] right-[0.3em]">0</span>
 		</div>
 		{#each values as value, idx (idx)}
-			<div class="w-1/5 shrink-0 h-[0.5em] border-l border-black last:relative last:right-px">
+			<div class="h-[0.5em] w-1/5 shrink-0 border-l border-black last:relative last:right-px">
 				<span class="relative top-[0.5em] {idx >= 3 ? 'right-[0.8em]' : 'right-[0.5em]'}"
 					>{value}</span
 				>

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

@@ -45,7 +45,7 @@
 		const id = monitorId;
 		loading = true;
 		try {
-			const subscriptions = await getSubscriptions("");
+			const subscriptions = await getSubscriptions(getApiToken());
 			if (id !== monitorId) return;
 			const match = subscriptions.find((s) => s.monitor === id);
 			subscribedLevel = match?.level ?? null;
@@ -54,17 +54,18 @@
 		}
 	}
 
-	async function handleLevelClick(levelName: string | null) {
-		if (saving || !levelName) return;
+	async function handleLevelClick(level: string | null) {
+		if (saving || !level) return;
 		saving = true;
 		const previous = subscribedLevel;
+		const apiToken = getApiToken();
 		try {
-			if (levelName === subscribedLevel) {
-				await unsubscribe({ monitorId, apiToken: "", level: levelName });
+			if (level === subscribedLevel) {
+				await unsubscribe({ monitorId, apiToken, level });
 				subscribedLevel = null;
 			} else {
-				await subscribe({ monitorId, apiToken: "", level: levelName });
-				subscribedLevel = levelName;
+				await subscribe({ monitorId, apiToken, level });
+				subscribedLevel = level;
 			}
 		} catch {
 			subscribedLevel = previous;
@@ -74,6 +75,12 @@
 		}
 		open = false;
 	}
+
+	function getApiToken(): string {
+		return (
+			(globalThis as unknown as Record<string, Record<string, string>>)["USER"]?.api_token ?? ""
+		);
+	}
 </script>
 
 <div class="relative select-none">
@@ -99,7 +106,7 @@
 		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
 			{#if subscribedLevel}
 				<button
-					class="cursor-pointer px-4 py-2 text-sm rounded-t w-full flex items-center justify-between border border-black/30 hover:bg-[#F5F5F3]"
+					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
@@ -111,7 +118,7 @@
 				<button
 					class={[
 						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "first:rounded-t hover:brightness-90 cursor-pointer" : ""
+						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
 					]}
 					style="background-color: {level.color}"
 					disabled={saving}

package/src/lib/monitors/components/MonitorsDisplayOptions.svelte

@@ -68,7 +68,7 @@
 
 	{#each monitorDisplayOptions as [id, option] (option.label)}
 		{@const inputId = `${id}-monitor-display-option`}
-		<label for={inputId} class="flex gap-1 cursor-pointer whitespace-nowrap select-none">
+		<label for={inputId} class="flex cursor-pointer gap-1 whitespace-nowrap select-none">
 			<input type="checkbox" id={inputId} name={option.label} bind:checked={option.value} />
 			{#if option.icon}
 				<img class="w-3" src={option.icon.image.src} alt={option.icon.image.alt} />