feat(frontend): update layout, UI components, stores, and API route

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/components/layout/NavBar.svelte

@@ -131,7 +131,7 @@
 						{#if isLoading}
 							<Skeleton class={`h-4 ${link.width} rounded`} />
 						{:else}
-							<a href={resolve(link.href)} class="font-medium text-gray-800 hover:text-primary"
+							<a href={link.href} class="font-medium text-gray-800 hover:text-primary"
 								>{link.label}</a
 							>
 						{/if}
@@ -208,7 +208,12 @@
 			tabindex="0"
 			aria-label="Close menu"
 			onclick={toggleMenu}
-			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleMenu(); } }}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					toggleMenu();
+				}
+			}}
 		></div>
 	{/if}
 
@@ -225,7 +230,7 @@
 							<Skeleton class="h-4 w-full rounded" />
 						{:else}
 							<a
-								href={resolve(link.href)}
+								href={link.href}
 								class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
 							>
 								{link.label}
@@ -324,7 +329,9 @@
 	.notification-badge {
 		opacity: 1;
 		transform: translateY(0);
-		transition: opacity 0.2s ease, transform 0.2s ease;
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease;
 	}
 
 	.open .notification-badge {

frontend/src/lib/components/ui/checkbox/checkbox.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-white shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked

frontend/src/lib/components/ui/map/MapClusterLayer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="P extends GeoJSON.GeoJsonProperties">
 	import { getContext } from "svelte";
 	import MapLibreGL from "maplibre-gl";
+	import { generateUUID } from '$lib/utils/uuid';
 
 	interface Props {
 		/** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */
@@ -40,7 +41,7 @@
 		isStyleReady: () => boolean;
 	}>("map");
 
-	const id = crypto.randomUUID();
+	const id = generateUUID();
 	const sourceId = $derived(`cluster-source-${id}`);
 	const clusterLayerId = $derived(`clusters-${id}`);
 	const clusterCountLayerId = $derived(`cluster-count-${id}`);

frontend/src/lib/components/ui/map/MapRoute.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 	import MapLibreGL from "maplibre-gl";
+	import { generateUUID } from '$lib/utils/uuid';
 
 	interface Props {
 		/** Optional unique identifier for the route layer */
@@ -35,7 +36,7 @@
 		onmouseenter,
 		onmouseleave,
 		interactive = true,
-		id = crypto.randomUUID(),
+		id = generateUUID(),
 	}: Props = $props();
 
 	const mapCtx = getContext<{