add: color selection on dashboard

src/lib/components/layout/DashboardHeader.svelte

@@ -3,6 +3,7 @@
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
 	import { LanguageToggle } from '$lib/components/ui/language-toggle';
 	import ThemePicker from '$lib/components/ui/theme-picker.svelte';
+	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import { signOut } from '@auth/sveltekit/client';
 	import { languageStore } from '$lib/stores/language.svelte';
 	import { enhance } from '$app/forms';
@@ -11,25 +12,27 @@
 		userName,
 		userEmail,
 		dashboardTheme = 'none',
+		dashboardColor = null,
 		isAuthenticated = false,
-		onThemeUpdate
+		onThemeUpdate,
+		onColorUpdate
 	}: {
 		userName?: string | null;
 		userEmail?: string | null;
 		dashboardTheme?: string;
+		dashboardColor?: string | null;
 		isAuthenticated?: boolean;
 		onThemeUpdate?: (theme: string | null) => void;
+		onColorUpdate?: (color: string | null) => void;
 	} = $props();
 
 	const t = $derived(languageStore.t);
 
 	async function handleThemeChange(theme: string) {
-		// Update theme immediately for instant visual feedback
 		if (onThemeUpdate) {
 			onThemeUpdate(theme);
 		}
 
-		// Only submit to database for authenticated users
 		if (isAuthenticated) {
 			const formData = new FormData();
 			formData.append('theme', theme);
@@ -40,6 +43,30 @@
 			});
 		}
 	}
+
+	let localColor = $state(dashboardColor);
+
+	$effect(() => {
+		localColor = dashboardColor;
+	});
+
+	async function handleColorChange() {
+		if (onColorUpdate) {
+			onColorUpdate(localColor);
+		}
+
+		if (isAuthenticated) {
+			const formData = new FormData();
+			if (localColor) {
+				formData.append('color', localColor);
+			}
+
+			await fetch('?/updateDashboardColor', {
+				method: 'POST',
+				body: formData
+			});
+		}
+	}
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -52,6 +79,7 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+		<ColorPicker bind:color={localColor} onchange={handleColorChange} />
 		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} />
 		<LanguageToggle />
 		<ThemeToggle />