src/lib/components/dashboard/LocalWishlistsSection.svelte

@@ -15,34 +15,87 @@
 	const t = $derived(languageStore.t);
 
 	let localWishlists = $state<LocalWishlist[]>([]);
+	let enrichedWishlists = $state<any[]>([]);
 
-	// Load local wishlists on mount (client-side only)
-	onMount(() => {
+	// Load local wishlists on mount and fetch their data from server
+	onMount(async () => {
 		localWishlists = getLocalWishlists();
+
+		// Fetch full wishlist data for each local wishlist
+		const promises = localWishlists.map(async (local) => {
+			try {
+				const response = await fetch(`/api/wishlist/${local.ownerToken}`);
+				if (response.ok) {
+					const data = await response.json();
+					return {
+						...data,
+						isFavorite: local.isFavorite || false
+					};
+				}
+			} catch (error) {
+				console.error('Failed to fetch wishlist data:', error);
+			}
+			// Fallback to local data if fetch fails
+			return {
+				id: local.ownerToken,
+				title: local.title,
+				ownerToken: local.ownerToken,
+				publicToken: local.publicToken,
+				createdAt: local.createdAt,
+				isFavorite: local.isFavorite || false,
+				items: [],
+				theme: null,
+				color: null
+			};
+		});
+
+		enrichedWishlists = await Promise.all(promises);
 	});
 
-	function handleForget(ownerToken: string) {
+	async function refreshEnrichedWishlists() {
+		const promises = localWishlists.map(async (local) => {
+			try {
+				const response = await fetch(`/api/wishlist/${local.ownerToken}`);
+				if (response.ok) {
+					const data = await response.json();
+					return {
+						...data,
+						isFavorite: local.isFavorite || false
+					};
+				}
+			} catch (error) {
+				console.error('Failed to fetch wishlist data:', error);
+			}
+			return {
+				id: local.ownerToken,
+				title: local.title,
+				ownerToken: local.ownerToken,
+				publicToken: local.publicToken,
+				createdAt: local.createdAt,
+				isFavorite: local.isFavorite || false,
+				items: [],
+				theme: null,
+				color: null
+			};
+		});
+
+		enrichedWishlists = await Promise.all(promises);
+	}
+
+	async function handleForget(ownerToken: string) {
 		forgetLocalWishlist(ownerToken);
 		localWishlists = getLocalWishlists();
+		await refreshEnrichedWishlists();
 	}
 
-	function handleToggleFavorite(ownerToken: string) {
+	async function handleToggleFavorite(ownerToken: string) {
 		toggleLocalFavorite(ownerToken);
 		localWishlists = getLocalWishlists();
+		await refreshEnrichedWishlists();
 	}
 
-	// Transform LocalWishlist to match the format expected by WishlistSection
-	const transformedWishlists = $derived(() => {
-		return localWishlists.map(w => ({
-			id: w.ownerToken,
-			title: w.title,
-			ownerToken: w.ownerToken,
-			publicToken: w.publicToken,
-			createdAt: w.createdAt,
-			isFavorite: w.isFavorite || false,
-			items: [] // We don't have item data in localStorage
-		}));
-	});
+	// Use enriched wishlists which have full data including theme and color
+	const transformedWishlists = $derived(() => enrichedWishlists);
 
 	// Description depends on authentication status
 	const sectionDescription = $derived(() => {

src/lib/utils/themes.ts

@@ -44,8 +44,13 @@ export function getTheme(themeName?: string | null): Theme {
 
 /**
  * Get color from a CSS color string or class
- * For now, we'll use currentColor which inherits from the parent
+ * Returns the provided color or a default primary color
  */
 export function getThemeColor(color?: string | null): string {
-	return color || 'currentColor';
+	// Use the provided color, or default to a visible color
+	if (color && color !== 'null' && color !== '') {
+		return color;
+	}
+	// Default to a blue color (can't use CSS variables in SVG fill)
+	return '#3b82f6';
 }

src/routes/api/wishlist/[token]/+server.ts

@@ -0,0 +1,38 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { db } from '$lib/server/db';
+import { wishlists } from '$lib/server/schema';
+import { eq, or } from 'drizzle-orm';
+
+export const GET: RequestHandler = async ({ params }) => {
+	const { token } = params;
+
+	// Find wishlist by either ownerToken or publicToken
+	const wishlist = await db.query.wishlists.findFirst({
+		where: or(
+			eq(wishlists.ownerToken, token),
+			eq(wishlists.publicToken, token)
+		),
+		with: {
+			items: {
+				orderBy: (items, { asc }) => [asc(items.order)]
+			}
+		}
+	});
+
+	if (!wishlist) {
+		return json({ error: 'Wishlist not found' }, { status: 404 });
+	}
+
+	// Return only the necessary fields
+	return json({
+		id: wishlist.id,
+		title: wishlist.title,
+		ownerToken: wishlist.ownerToken,
+		publicToken: wishlist.publicToken,
+		createdAt: wishlist.createdAt,
+		theme: wishlist.theme,
+		color: wishlist.color,
+		items: wishlist.items || []
+	});
+};

src/routes/dashboard/+page.svelte

@@ -58,7 +58,7 @@
 	});
 </script>
 
-<PageContainer theme={currentTheme} themeColor="#3b82f6">
+<PageContainer theme={currentTheme} themeColor={null}>
 	<DashboardHeader
 		userName={data.user?.name}
 		userEmail={data.user?.email}