feat: canvas to echarts (#5)

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#5

src/routes/weather/week/[location]/ModelSelector.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+
+	import { models } from '../../options';
+
+	interface Props {
+		selectedModel: string;
+		onModelChange: (model: string) => void;
+	}
+
+	let { selectedModel, onModelChange }: Props = $props();
+
+	let modelLabel = $derived(
+		models.find((mo) => String(mo.value) === selectedModel)?.label ?? selectedModel
+	);
+</script>
+
+<div class="mt-6 flex gap-6 md:mt-12">
+	<div class="relative w-1/2">
+		<Select.Root
+			name="model_selection"
+			type="single"
+			value={selectedModel}
+			onValueChange={(val) => {
+				if (val) onModelChange(val);
+			}}
+		>
+			<Select.Trigger
+				aria-label="Forecast model selection"
+				class="h-12 cursor-pointer pt-6 [&_svg]:mb-3"
+			>
+				{modelLabel}
+			</Select.Trigger>
+			<Select.Content preventScroll={false} class="border-border">
+				{#each models as mo (mo.value)}
+					<Select.Item class="cursor-pointer" value={mo.value}>{mo.label}</Select.Item>
+				{/each}
+			</Select.Content>
+			<Label class="absolute top-[0.35rem] left-2 z-10 px-1 text-xs text-muted-foreground">
+				Weather model
+			</Label>
+		</Select.Root>
+	</div>
+</div>