add: color selection on dashboard

src/routes/dashboard/+page.svelte

@@ -24,7 +24,21 @@
 		}
 	}
 
+	// For anonymous users, get color from localStorage
+	function getInitialColor() {
+		if (data.isAuthenticated) {
+			return data.user?.dashboardColor || null;
+		} else {
+			// Anonymous user - get from localStorage
+			if (typeof window !== 'undefined') {
+				return localStorage.getItem('dashboardColor') || null;
+			}
+			return null;
+		}
+	}
+
 	let currentTheme = $state(getInitialTheme());
+	let currentColor = $state(getInitialColor());
 
 	// Save to localStorage when theme changes for anonymous users
 	function handleThemeUpdate(theme: string | null) {
@@ -35,6 +49,19 @@
 		}
 	}
 
+	// Save to localStorage when color changes for anonymous users
+	function handleColorUpdate(color: string | null) {
+		currentColor = color;
+
+		if (!data.isAuthenticated && typeof window !== 'undefined') {
+			if (color) {
+				localStorage.setItem('dashboardColor', color);
+			} else {
+				localStorage.removeItem('dashboardColor');
+			}
+		}
+	}
+
 	const t = $derived(languageStore.t);
 
 	// Only owned wishlists for "My Wishlists"
@@ -58,17 +85,23 @@
 	});
 </script>
 
-<PageContainer theme={currentTheme} themeColor={null}>
+<PageContainer theme={currentTheme} themeColor={currentColor}>
 	<DashboardHeader
 		userName={data.user?.name}
 		userEmail={data.user?.email}
 		dashboardTheme={currentTheme}
+		dashboardColor={currentColor}
 		isAuthenticated={data.isAuthenticated}
 		onThemeUpdate={handleThemeUpdate}
+		onColorUpdate={handleColorUpdate}
 	/>
 
 	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
-	<LocalWishlistsSection isAuthenticated={data.isAuthenticated} />
+	<LocalWishlistsSection
+		isAuthenticated={data.isAuthenticated}
+		fallbackColor={currentColor}
+		fallbackTheme={currentTheme}
+	/>
 
 	{#if data.isAuthenticated}
 		<!-- My Wishlists Section -->
@@ -80,6 +113,8 @@
 		emptyActionLabel={t.dashboard.emptyWishlistsAction}
 		emptyActionHref="/"
 		showCreateButton={true}
+		fallbackColor={currentColor}
+		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
@@ -135,6 +170,8 @@
 		emptyMessage={t.dashboard.emptyClaimedWishlists}
 		emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
 		hideIfEmpty={true}
+		fallbackColor={currentColor}
+		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
@@ -189,6 +226,8 @@
 		items={savedWishlists()}
 		emptyMessage={t.dashboard.emptySavedWishlists}
 		emptyDescription={t.dashboard.emptySavedWishlistsDescription}
+		fallbackColor={currentColor}
+		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(saved, unlocked)}
 			<div class="flex gap-2 flex-wrap">