wip: not loading themes until reload, missing in dashboard, bad alignment and scaling

src/lib/components/dashboard/WishlistCard.svelte

@@ -3,26 +3,30 @@
 	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import type { Snippet } from 'svelte';
 	import { getCardStyle } from '$lib/utils/colors';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
 
 	let {
 		title,
 		description,
 		itemCount,
 		color = null,
+		theme = null,
 		children
 	}: {
 		title: string;
 		description?: string | null;
 		itemCount: number;
 		color?: string | null;
+		theme?: string | null;
 		children?: Snippet;
 	} = $props();
 
 	const cardStyle = $derived(getCardStyle(color));
 </script>
 
-<Card style={cardStyle} class="h-full flex flex-col">
-	<CardHeader class="flex-shrink-0">
+<Card style={cardStyle} class="h-full flex flex-col relative overflow-hidden">
+	<ThemeCard themeName={theme} color={color} />
+	<CardHeader class="flex-shrink-0 relative z-10">
 		<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2">
 			<CardTitle class="text-lg flex items-center gap-2 flex-1 min-w-0">
 				<span class="truncate">{title}</span>
@@ -35,7 +39,7 @@
 			<CardDescription class="line-clamp-3 whitespace-pre-line">{description}</CardDescription>
 		{/if}
 	</CardHeader>
-	<CardContent class="space-y-2 flex-1 flex flex-col justify-end">
+	<CardContent class="space-y-2 flex-1 flex flex-col justify-end relative z-10">
 		{#if children}
 			<div>
 				{@render children()}

src/lib/components/dashboard/WishlistSection.svelte

@@ -149,6 +149,7 @@
 				description={getWishlistDescription(item)}
 				itemCount={wishlist.items?.length || 0}
 				color={wishlist.color}
+				theme={wishlist.theme}
 			>
 				{@render actions(item, unlocked)}
 			</WishlistCard>