add: themes for wishlists and dashboards

src/lib/components/dashboard/LocalWishlistsSection.svelte

@@ -43,15 +43,25 @@
 			items: [] // We don't have item data in localStorage
 		}));
 	});
+
+	// Description depends on authentication status
+	const sectionDescription = $derived(() => {
+		if (isAuthenticated) {
+			return t.dashboard.localWishlistsAuthDescription || "Wishlists stored in your browser that haven't been claimed yet.";
+		}
+		return t.dashboard.localWishlistsDescription || "Wishlists stored in your browser. Sign in to save them permanently.";
+	});
 </script>
 
-{#if localWishlists.length > 0}
-	<WishlistSection
-		title={t.dashboard.localWishlists || "Local Wishlists"}
-		description={t.dashboard.localWishlistsDescription || "Wishlists stored in your browser. Sign in to save them permanently."}
-		items={transformedWishlists()}
-		emptyMessage=""
-	>
+<WishlistSection
+	title={t.dashboard.localWishlists || "Local Wishlists"}
+	description={sectionDescription()}
+	items={transformedWishlists()}
+	emptyMessage={t.dashboard.emptyLocalWishlists || "No local wishlists yet"}
+	emptyActionLabel={t.dashboard.createLocalWishlist || "Create local wishlist"}
+	emptyActionHref="/"
+	showCreateButton={true}
+>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
 				<Button
@@ -89,5 +99,4 @@
 				{/if}
 			</div>
 		{/snippet}
-	</WishlistSection>
-{/if}
+</WishlistSection>

src/lib/components/layout/DashboardHeader.svelte

@@ -10,32 +10,35 @@
 	let {
 		userName,
 		userEmail,
-		dashboardTheme = 'none'
+		dashboardTheme = 'none',
+		isAuthenticated = false,
+		onThemeUpdate
 	}: {
 		userName?: string | null;
 		userEmail?: string | null;
 		dashboardTheme?: string;
+		isAuthenticated?: boolean;
+		onThemeUpdate?: (theme: string | null) => void;
 	} = $props();
 
 	const t = $derived(languageStore.t);
-	const isAuthenticated = $derived(!!userName || !!userEmail);
-
-	let currentTheme = $state(dashboardTheme);
 
 	async function handleThemeChange(theme: string) {
-		currentTheme = theme;
+		// Update theme immediately for instant visual feedback
+		if (onThemeUpdate) {
+			onThemeUpdate(theme);
+		}
 
-		// Submit form to update theme
-		const formData = new FormData();
-		formData.append('theme', theme);
+		// Only submit to database for authenticated users
+		if (isAuthenticated) {
+			const formData = new FormData();
+			formData.append('theme', theme);
 
-		await fetch('?/updateDashboardTheme', {
-			method: 'POST',
-			body: formData
-		});
-
-		// Reload to apply new theme
-		window.location.reload();
+			await fetch('?/updateDashboardTheme', {
+				method: 'POST',
+				body: formData
+			});
+		}
 	}
 </script>
 
@@ -49,9 +52,7 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-		{#if isAuthenticated}
-			<ThemePicker value={currentTheme} onValueChange={handleThemeChange} />
-		{/if}
+		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} />
 		<LanguageToggle />
 		<ThemeToggle />
 		{#if isAuthenticated}