add: color selection on dashboard

src/routes/dashboard/+page.server.ts

@@ -174,6 +174,22 @@ export const actions: Actions = {
 			.set({ dashboardTheme: theme })
 			.where(eq(users.id, session.user.id));
 
+		return { success: true };
+	},
+
+	updateDashboardColor: async ({ request, locals }) => {
+		const session = await locals.auth();
+		if (!session?.user?.id) {
+			throw redirect(303, '/signin');
+		}
+
+		const formData = await request.formData();
+		const color = formData.get('color') as string | null;
+
+		await db.update(users)
+			.set({ dashboardColor: color })
+			.where(eq(users.id, session.user.id));
+
 		return { success: true };
 	}
 };

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">