@sjvair/monitor-map 3.0.7 → 3.0.8

package/dist/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/dist/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/dist/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/dist/lib/MonitorMapLayout.svelte

@@ -22,6 +22,7 @@
 	import { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
 	import MapLegend from "./MapLegend.svelte";
 	import Search from "./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/dist/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/dist/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/dist/lib/components/ui/button/button.svelte.d.ts

@@ -3,62 +3,62 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements
 import { type VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        icon: "size-8";
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
+        "icon-lg": "size-9";
     };
 }, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        icon: "size-8";
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
+        "icon-lg": "size-9";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        icon: "size-8";
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
+        "icon-lg": "size-9";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/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/dist/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/dist/lib/hms/hms-smoke-map-integration.svelte.js

@@ -21,19 +21,23 @@ class HMSSmokeMapIntegration extends MapGeoJSONIntegration {
             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/dist/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/dist/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/dist/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/dist/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} />