add: color selection on dashboard

src/lib/components/dashboard/WishlistGrid.svelte

@@ -4,6 +4,8 @@
 	import EmptyState from '$lib/components/layout/EmptyState.svelte';
 	import type { Snippet } from 'svelte';
 	import { flip } from 'svelte/animate';
+	import { getCardStyle } from '$lib/utils/colors';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
 
 	let {
 		title,
@@ -13,6 +15,8 @@
 		emptyDescription,
 		emptyActionLabel,
 		emptyActionHref,
+		fallbackColor = null,
+		fallbackTheme = null,
 		headerAction,
 		searchBar,
 		children
@@ -24,11 +28,15 @@
 		emptyDescription?: string;
 		emptyActionLabel?: string;
 		emptyActionHref?: string;
+		fallbackColor?: string | null;
+		fallbackTheme?: string | null;
 		headerAction?: Snippet;
 		searchBar?: Snippet;
 		children: Snippet<[any]>;
 	} = $props();
 
+	const cardStyle = $derived(getCardStyle(fallbackColor, null));
+
 	let scrollContainer: HTMLElement | null = null;
 
 	function handleWheel(event: WheelEvent) {
@@ -44,8 +52,9 @@
 	}
 </script>
 
-<Card>
-	<CardHeader>
+<Card style={cardStyle} class="relative overflow-hidden">
+	<ThemeCard themeName={fallbackTheme} color={fallbackColor} />
+	<CardHeader class="relative z-10">
 		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
 			<div class="flex-1 min-w-0">
 				<CardTitle>{title}</CardTitle>
@@ -63,7 +72,7 @@
 			</div>
 		{/if}
 	</CardHeader>
-	<CardContent>
+	<CardContent class="relative z-10">
 		{#if items && items.length > 0}
 			<div
 				bind:this={scrollContainer}