src/lib/components/wishlist/EditableItemsList.svelte

@@ -7,6 +7,8 @@
 	import { enhance } from "$app/forms";
 	import { flip } from "svelte/animate";
 	import { languageStore } from '$lib/stores/language.svelte';
+	import ThemeCard from "$lib/components/themes/ThemeCard.svelte";
+	import { getCardStyle } from "$lib/utils/colors";
 
 	let {
 		items = $bindable([]),
@@ -25,6 +27,7 @@
 	} = $props();
 
 	const t = $derived(languageStore.t);
+	const cardStyle = $derived(getCardStyle(wishlistColor));
 </script>
 
 <div class="space-y-4">
@@ -68,8 +71,9 @@
 			{/each}
 		</div>
 	{:else}
-		<Card>
-			<CardContent class="p-12">
+		<Card style={cardStyle} class="relative overflow-hidden">
+			<ThemeCard themeName={theme} color={wishlistColor} />
+			<CardContent class="p-12 relative z-10">
 				<EmptyState
 					message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}
 				/>

src/routes/wishlist/[token]/+page.svelte

@@ -7,8 +7,6 @@
 		CardTitle,
 	} from "$lib/components/ui/card";
 	import { Button } from "$lib/components/ui/button";
-	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
 	import type { PageData } from "./$types";
 	import WishlistItem from "$lib/components/wishlist/WishlistItem.svelte";
 	import ReservationButton from "$lib/components/wishlist/ReservationButton.svelte";
@@ -19,6 +17,7 @@
 	import { getCardStyle } from "$lib/utils/colors";
 	import { languageStore } from '$lib/stores/language.svelte';
 	import SearchBar from "$lib/components/ui/SearchBar.svelte";
+	import ThemeCard from "$lib/components/themes/ThemeCard.svelte";
 
 	let { data }: { data: PageData } = $props();
 
@@ -41,7 +40,6 @@
 		showDashboardLink={true}
 	/>
 
-	<!-- Header -->
 	<Card style={headerCardStyle}>
 		<CardContent class="pt-6">
 			<div class="flex flex-wrap items-start justify-between gap-4">
@@ -55,7 +53,6 @@
 				</div>
 				{#if data.isAuthenticated}
 					{#if data.isClaimed}
-						<!-- User has claimed this wishlist - show claimed status -->
 						<Button
 							variant="outline"
 							size="sm"
@@ -64,7 +61,6 @@
 							{t.wishlist.youClaimedThis}
 						</Button>
 					{:else if data.isSaved}
-						<!-- User has saved but not claimed - show unsave button -->
 						<form method="POST" action="?/unsaveWishlist" use:enhance>
 							<input
 								type="hidden"
@@ -76,7 +72,6 @@
 							</Button>
 						</form>
 					{:else}
-						<!-- Not saved - show save button -->
 						<form method="POST" action="?/saveWishlist" use:enhance={() => {
 							return async ({ update }) => {
 								await update({ reset: false });
@@ -101,12 +96,10 @@
 		</CardContent>
 	</Card>
 
-	<!-- Search Bar -->
 	{#if data.wishlist.items && data.wishlist.items.length > 0}
 		<SearchBar bind:value={searchQuery} />
 	{/if}
 
-	<!-- Items List -->
 	<div class="space-y-4">
 		{#if filteredItems.length > 0}
 			{#each filteredItems as item}
@@ -121,16 +114,18 @@
 				</WishlistItem>
 			{/each}
 		{:else if data.wishlist.items && data.wishlist.items.length > 0}
-			<Card>
-				<CardContent class="p-12">
+			<Card style={headerCardStyle} class="relative overflow-hidden">
+				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
+				<CardContent class="p-12 relative z-10">
 					<EmptyState
 						message="No wishes match your search."
 					/>
 				</CardContent>
 			</Card>
 		{:else}
-			<Card>
-				<CardContent class="p-12">
+			<Card style={headerCardStyle} class="relative overflow-hidden">
+				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
+				<CardContent class="p-12 relative z-10">
 					<EmptyState
 						message={t.wishlist.emptyWishes}
 					/>