partially refactor components to ui package

components/ToggleSelect.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	let {
+		name,
+		selected = false,
+		children,
+		onclick,
+		ontoggle
+	}: {
+		name?: string;
+		selected?: boolean;
+		children: Snippet;
+		onclick?: MouseEventHandler<HTMLButtonElement>;
+		ontoggle?: (selected: boolean) => void;
+	} = $props();
+
+	const handleToggleSelectClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+		selected = !selected; // update state
+		ontoggle?.(selected); // send event to parent
+		onclick?.(event); // pass onclick handler through
+	};
+</script>
+
+{#if name}
+	<input type="hidden" value={selected} {name} />
+{/if}
+
+<button
+	class="rounded-3xl border px-6 py-2.5 font-medium transition-colors {selected
+		? 'border-secondary bg-primary text-background hover:bg-primary-600'
+		: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100'}"
+	onclick={handleToggleSelectClick}
+>
+	{@render children()}
+</button>