Merge pull request 'update: better color support on wishlists' (#5) from update/wishlist-color-update-updates-background-and-svg-color into master

Reviewed-on: #5

drizzle/schema.ts

@@ -77,10 +77,6 @@ export const user = pgTable("user", {
 	password: text(),
 	username: text(),
 	dashboardTheme: text("dashboard_theme").default('none'),
-	dashboardColor: text("dashboard_color"),
-	lastLogin: timestamp("last_login", { mode: 'string' }),
-	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
 }, (table) => [
 	unique("user_email_unique").on(table.email),
 	unique("user_username_unique").on(table.username),

src/auth.ts

@@ -103,14 +103,6 @@ const authConfig: SvelteKitAuthConfig = {
 		signIn: '/signin'
 	},
 	callbacks: {
-		async signIn({ user }) {
-			if (user?.id) {
-				await db.update(users)
-					.set({ lastLogin: new Date() })
-					.where(eq(users.id, user.id));
-			}
-			return true;
-		},
 		async jwt({ token, user }) {
 			if (user) {
 				token.id = user.id;

src/lib/components/dashboard/LocalWishlistsSection.svelte

@@ -7,13 +7,9 @@
 	import { onMount } from 'svelte';
 
 	let {
-		isAuthenticated = false,
-		fallbackColor = null,
-		fallbackTheme = null
+		isAuthenticated = false
 	}: {
 		isAuthenticated?: boolean;
-		fallbackColor?: string | null;
-		fallbackTheme?: string | null;
 	} = $props();
 
 	const t = $derived(languageStore.t);
@@ -118,8 +114,6 @@
 	emptyActionLabel={t.dashboard.createLocalWishlist || "Create local wishlist"}
 	emptyActionHref="/"
 	showCreateButton={true}
-	fallbackColor={fallbackColor}
-	fallbackTheme={fallbackTheme}
 >
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">

src/lib/components/dashboard/WishlistCard.svelte

@@ -11,8 +11,6 @@
 		itemCount,
 		color = null,
 		theme = null,
-		fallbackColor = null,
-		fallbackTheme = null,
 		children
 	}: {
 		title: string;
@@ -20,18 +18,14 @@
 		itemCount: number;
 		color?: string | null;
 		theme?: string | null;
-		fallbackColor?: string | null;
-		fallbackTheme?: string | null;
 		children?: Snippet;
 	} = $props();
 
-	const finalColor = $derived(color || fallbackColor);
-	const finalTheme = $derived(theme || fallbackTheme);
-	const cardStyle = $derived(getCardStyle(color, fallbackColor));
+	const cardStyle = $derived(getCardStyle(color));
 </script>
 
 <Card style={cardStyle} class="h-full flex flex-col relative overflow-hidden">
-	<ThemeCard themeName={finalTheme} color={finalColor} />
+	<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">

src/lib/components/dashboard/WishlistGrid.svelte

@@ -4,8 +4,6 @@
 	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,
@@ -15,8 +13,6 @@
 		emptyDescription,
 		emptyActionLabel,
 		emptyActionHref,
-		fallbackColor = null,
-		fallbackTheme = null,
 		headerAction,
 		searchBar,
 		children
@@ -28,15 +24,11 @@
 		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) {
@@ -52,9 +44,8 @@
 	}
 </script>
 
-<Card style={cardStyle} class="relative overflow-hidden">
-	<ThemeCard themeName={fallbackTheme} color={fallbackColor} showPattern={false} />
-	<CardHeader class="relative z-10">
+<Card>
+	<CardHeader>
 		<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>
@@ -72,7 +63,7 @@
 			</div>
 		{/if}
 	</CardHeader>
-	<CardContent class="relative z-10">
+	<CardContent>
 		{#if items && items.length > 0}
 			<div
 				bind:this={scrollContainer}

src/lib/components/dashboard/WishlistSection.svelte

@@ -21,8 +21,6 @@
 		emptyActionHref,
 		showCreateButton = false,
 		hideIfEmpty = false,
-		fallbackColor = null,
-		fallbackTheme = null,
 		actions
 	}: {
 		title: string;
@@ -34,8 +32,6 @@
 		emptyActionHref?: string;
 		showCreateButton?: boolean;
 		hideIfEmpty?: boolean;
-		fallbackColor?: string | null;
-		fallbackTheme?: string | null;
 		actions: Snippet<[WishlistItem, boolean]>; // item, unlocked
 	} = $props();
 
@@ -130,8 +126,6 @@
 		{emptyDescription}
 		{emptyActionLabel}
 		{emptyActionHref}
-		{fallbackColor}
-		{fallbackTheme}
 	>
 		{#snippet headerAction()}
 			<div class="flex flex-col sm:flex-row gap-2">
@@ -156,8 +150,6 @@
 				itemCount={wishlist.items?.length || 0}
 				color={wishlist.color}
 				theme={wishlist.theme}
-				fallbackColor={fallbackColor}
-				fallbackTheme={fallbackTheme}
 			>
 				{@render actions(item, unlocked)}
 			</WishlistCard>

src/lib/components/layout/DashboardHeader.svelte

@@ -3,7 +3,6 @@
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
 	import { LanguageToggle } from '$lib/components/ui/language-toggle';
 	import ThemePicker from '$lib/components/ui/theme-picker.svelte';
-	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import { signOut } from '@auth/sveltekit/client';
 	import { languageStore } from '$lib/stores/language.svelte';
 	import { enhance } from '$app/forms';
@@ -12,27 +11,25 @@
 		userName,
 		userEmail,
 		dashboardTheme = 'none',
-		dashboardColor = null,
 		isAuthenticated = false,
-		onThemeUpdate,
-		onColorUpdate
+		onThemeUpdate
 	}: {
 		userName?: string | null;
 		userEmail?: string | null;
 		dashboardTheme?: string;
-		dashboardColor?: string | null;
 		isAuthenticated?: boolean;
 		onThemeUpdate?: (theme: string | null) => void;
-		onColorUpdate?: (color: string | null) => void;
 	} = $props();
 
 	const t = $derived(languageStore.t);
 
 	async function handleThemeChange(theme: string) {
+		// Update theme immediately for instant visual feedback
 		if (onThemeUpdate) {
 			onThemeUpdate(theme);
 		}
 
+		// Only submit to database for authenticated users
 		if (isAuthenticated) {
 			const formData = new FormData();
 			formData.append('theme', theme);
@@ -43,30 +40,6 @@
 			});
 		}
 	}
-
-	let localColor = $state(dashboardColor);
-
-	$effect(() => {
-		localColor = dashboardColor;
-	});
-
-	async function handleColorChange() {
-		if (onColorUpdate) {
-			onColorUpdate(localColor);
-		}
-
-		if (isAuthenticated) {
-			const formData = new FormData();
-			if (localColor) {
-				formData.append('color', localColor);
-			}
-
-			await fetch('?/updateDashboardColor', {
-				method: 'POST',
-				body: formData
-			});
-		}
-	}
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -79,7 +52,6 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-		<ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
 		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} />
 		<LanguageToggle />
 		<ThemeToggle />

src/lib/components/themes/ThemeCard.svelte

@@ -5,12 +5,10 @@
 
 	let {
 		themeName,
-		color,
-		showPattern = true
+		color
 	}: {
-		themeName?: string | null;
-		color?: string | null;
-		showPattern?: boolean;
+		themeName?: string;
+		color?: string;
 	} = $props();
 
 	const theme = $derived(getTheme(themeName));
@@ -20,6 +18,6 @@
 	});
 </script>
 
-{#if showPattern && theme.pattern !== 'none'}
+{#if theme.pattern !== 'none'}
 	<CardPattern pattern={theme.pattern} color={patternColor} opacity={PATTERN_OPACITY} />
 {/if}

src/lib/components/themes/svgs/BottomPattern.svelte

@@ -16,15 +16,17 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
+		class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden"
 		style="
 			mask-image: url({patternPath});
+			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			mask-repeat: no-repeat;
-			mask-position: left bottom;
+			-webkit-mask-size: cover;
+			mask-repeat: repeat;
+			-webkit-mask-repeat: repeat;
 			background-color: {color};
 			opacity: {opacity};
-			height: 100vh;
+			height: 200px;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/CardPattern.svelte

@@ -16,15 +16,18 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
+		class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
 		style="
 			mask-image: url({patternPath});
+			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			mask-repeat: no-repeat;
-			mask-position: right bottom;
+			-webkit-mask-size: cover;
+			mask-repeat: repeat;
+			-webkit-mask-repeat: repeat;
 			background-color: {color};
 			opacity: {opacity};
-			width: 100%;
+			width: 200px;
+			height: 200px;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/TopPattern.svelte

@@ -16,16 +16,17 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="fixed top-0 right-0 left-0 pointer-events-none z-0"
+		class="absolute top-0 left-0 right-0 pointer-events-none overflow-hidden"
 		style="
 			mask-image: url({patternPath});
 			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			mask-repeat: no-repeat;
-			mask-position: right top;
+			-webkit-mask-size: cover;
+			mask-repeat: repeat;
+			-webkit-mask-repeat: repeat;
 			background-color: {color};
 			opacity: {opacity};
-			height: 100vh;
+			height: 200px;
 		"
 	/>
 {/if}

src/lib/components/ui/ColorPicker.svelte

@@ -18,7 +18,7 @@
 	};
 
 	const iconSizeClasses = {
-		sm: 'w-4 h-4',
+		sm: 'w-3 h-3',
 		md: 'w-4 h-4',
 		lg: 'w-5 h-5'
 	};

src/lib/components/wishlist/AddItemForm.svelte

@@ -8,18 +8,12 @@
 	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import { enhance } from '$app/forms';
 	import { languageStore } from '$lib/stores/language.svelte';
-	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		onSuccess?: () => void;
-		wishlistColor?: string | null;
-		wishlistTheme?: string | null;
 	}
 
-	let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
-
-	const cardStyle = $derived(getCardStyle(wishlistColor, null));
+	let { onSuccess }: Props = $props();
 
 	const t = $derived(languageStore.t);
 
@@ -59,12 +53,11 @@
 	}
 </script>
 
-<Card style={cardStyle} class="relative overflow-hidden">
-	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
-	<CardHeader class="relative z-10">
+<Card>
+	<CardHeader>
 		<CardTitle>{t.form.addNewWish}</CardTitle>
 	</CardHeader>
-	<CardContent class="relative z-10">
+	<CardContent>
 		<form
 			method="POST"
 			action="?/addItem"

src/lib/components/wishlist/EditItemForm.svelte

@@ -9,8 +9,6 @@
 	import { enhance } from '$app/forms';
 	import type { Item } from '$lib/server/schema';
 	import { languageStore } from '$lib/stores/language.svelte';
-	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
-	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		item: Item;
@@ -20,13 +18,9 @@
 		currentPosition?: number;
 		totalItems?: number;
 		onPositionChange?: (newPosition: number) => void;
-		wishlistColor?: string | null;
-		wishlistTheme?: string | null;
 	}
 
-	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange, wishlistColor = null, wishlistTheme = null }: Props = $props();
-
-	const cardStyle = $derived(getCardStyle(wishlistColor, null));
+	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange }: Props = $props();
 
 	const t = $derived(languageStore.t);
 
@@ -66,12 +60,11 @@
 	}
 </script>
 
-<Card style={cardStyle} class="relative overflow-hidden">
-	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
-	<CardHeader class="relative z-10">
+<Card>
+	<CardHeader>
 		<CardTitle>{t.wishlist.editWish}</CardTitle>
 	</CardHeader>
-	<CardContent class="relative z-10">
+	<CardContent>
 		<form
 			method="POST"
 			action="?/updateItem"

src/lib/components/wishlist/EditableItemsList.svelte

@@ -7,8 +7,6 @@
 	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([]),
@@ -27,7 +25,6 @@
 	} = $props();
 
 	const t = $derived(languageStore.t);
-	const cardStyle = $derived(getCardStyle(wishlistColor));
 </script>
 
 <div class="space-y-4">
@@ -71,9 +68,8 @@
 			{/each}
 		</div>
 	{:else}
-		<Card style={cardStyle} class="relative overflow-hidden">
-			<ThemeCard themeName={theme} color={wishlistColor} />
-			<CardContent class="p-12 relative z-10">
+		<Card>
+			<CardContent class="p-12">
 				<EmptyState
 					message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}
 				/>

src/lib/components/wishlist/WishlistHeader.svelte

@@ -132,7 +132,6 @@
 		<ColorPicker
 			bind:color={wishlistColor}
 			onchange={() => onColorUpdate(wishlistColor)}
-			size="sm"
 		/>
 	</div>
 </div>

src/lib/server/schema.ts

@@ -13,11 +13,7 @@ export const users = pgTable('user', {
 	image: text('image'),
 	password: text('password'),
 	username: text('username').unique(),
-	dashboardTheme: text('dashboard_theme').default('none'),
-	dashboardColor: text('dashboard_color'),
-	lastLogin: timestamp('last_login', { mode: 'date' }),
-	createdAt: timestamp('created_at').defaultNow().notNull(),
-	updatedAt: timestamp('updated_at').defaultNow().notNull()
+	dashboardTheme: text('dashboard_theme').default('none')
 });
 
 export const accounts = pgTable(

src/lib/utils/themes.ts

@@ -1,6 +1,6 @@
 import { themeStore } from '$lib/stores/theme.svelte';
 
-export type ThemePattern = 'snow' | 'none';
+export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
 
 export interface Theme {
 	name: string;
@@ -13,8 +13,16 @@ export const AVAILABLE_THEMES: Record<string, Theme> = {
 		pattern: 'none'
 	},
 	waves: {
-		name: 'Snow',
-		pattern: 'snow'
+		name: 'Waves',
+		pattern: 'waves'
+	},
+	geometric: {
+		name: 'Geometric',
+		pattern: 'geometric'
+	},
+	dots: {
+		name: 'Dots',
+		pattern: 'dots'
 	}
 };
 

src/routes/dashboard/+page.server.ts

@@ -85,7 +85,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(wishlists)
-			.set({ isFavorite: !isFavorite, updatedAt: new Date() })
+			.set({ isFavorite: !isFavorite })
 			.where(eq(wishlists.id, wishlistId));
 
 		return { success: true };
@@ -171,23 +171,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(users)
-			.set({ dashboardTheme: theme, updatedAt: new Date() })
-			.where(eq(users.id, session.user.id));
-
-		return { success: true };
-	},
-
-	updateDashboardColor: async ({ request, locals }) => {
-		const session = await locals.auth();
-		if (!session?.user?.id) {
-			throw redirect(303, '/signin');
-		}
-
-		const formData = await request.formData();
-		const color = formData.get('color') as string | null;
-
-		await db.update(users)
-			.set({ dashboardColor: color, updatedAt: new Date() })
+			.set({ dashboardTheme: theme })
 			.where(eq(users.id, session.user.id));
 
 		return { success: true };

src/routes/dashboard/+page.svelte

@@ -24,21 +24,7 @@
 		}
 	}
 
-	// For anonymous users, get color from localStorage
-	function getInitialColor() {
-		if (data.isAuthenticated) {
-			return data.user?.dashboardColor || null;
-		} else {
-			// Anonymous user - get from localStorage
-			if (typeof window !== 'undefined') {
-				return localStorage.getItem('dashboardColor') || null;
-			}
-			return null;
-		}
-	}
-
 	let currentTheme = $state(getInitialTheme());
-	let currentColor = $state(getInitialColor());
 
 	// Save to localStorage when theme changes for anonymous users
 	function handleThemeUpdate(theme: string | null) {
@@ -49,19 +35,6 @@
 		}
 	}
 
-	// Save to localStorage when color changes for anonymous users
-	function handleColorUpdate(color: string | null) {
-		currentColor = color;
-
-		if (!data.isAuthenticated && typeof window !== 'undefined') {
-			if (color) {
-				localStorage.setItem('dashboardColor', color);
-			} else {
-				localStorage.removeItem('dashboardColor');
-			}
-		}
-	}
-
 	const t = $derived(languageStore.t);
 
 	// Only owned wishlists for "My Wishlists"
@@ -85,23 +58,17 @@
 	});
 </script>
 
-<PageContainer theme={currentTheme} themeColor={currentColor}>
+<PageContainer theme={currentTheme} themeColor={null}>
 	<DashboardHeader
 		userName={data.user?.name}
 		userEmail={data.user?.email}
 		dashboardTheme={currentTheme}
-		dashboardColor={currentColor}
 		isAuthenticated={data.isAuthenticated}
 		onThemeUpdate={handleThemeUpdate}
-		onColorUpdate={handleColorUpdate}
 	/>
 
 	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
-	<LocalWishlistsSection
-		isAuthenticated={data.isAuthenticated}
-		fallbackColor={currentColor}
-		fallbackTheme={currentTheme}
-	/>
+	<LocalWishlistsSection isAuthenticated={data.isAuthenticated} />
 
 	{#if data.isAuthenticated}
 		<!-- My Wishlists Section -->
@@ -113,8 +80,6 @@
 		emptyActionLabel={t.dashboard.emptyWishlistsAction}
 		emptyActionHref="/"
 		showCreateButton={true}
-		fallbackColor={currentColor}
-		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
@@ -170,8 +135,6 @@
 		emptyMessage={t.dashboard.emptyClaimedWishlists}
 		emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
 		hideIfEmpty={true}
-		fallbackColor={currentColor}
-		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(wishlist, unlocked)}
 			<div class="flex gap-2 flex-wrap">
@@ -226,8 +189,6 @@
 		items={savedWishlists()}
 		emptyMessage={t.dashboard.emptySavedWishlists}
 		emptyDescription={t.dashboard.emptySavedWishlistsDescription}
-		fallbackColor={currentColor}
-		fallbackTheme={currentTheme}
 	>
 		{#snippet actions(saved, unlocked)}
 			<div class="flex gap-2 flex-wrap">

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

@@ -7,6 +7,8 @@
 		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";
@@ -17,7 +19,6 @@
 	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();
 
@@ -40,6 +41,7 @@
 		showDashboardLink={true}
 	/>
 
+	<!-- Header -->
 	<Card style={headerCardStyle}>
 		<CardContent class="pt-6">
 			<div class="flex flex-wrap items-start justify-between gap-4">
@@ -53,6 +55,7 @@
 				</div>
 				{#if data.isAuthenticated}
 					{#if data.isClaimed}
+						<!-- User has claimed this wishlist - show claimed status -->
 						<Button
 							variant="outline"
 							size="sm"
@@ -61,6 +64,7 @@
 							{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"
@@ -72,6 +76,7 @@
 							</Button>
 						</form>
 					{:else}
+						<!-- Not saved - show save button -->
 						<form method="POST" action="?/saveWishlist" use:enhance={() => {
 							return async ({ update }) => {
 								await update({ reset: false });
@@ -96,10 +101,12 @@
 		</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}
@@ -114,18 +121,16 @@
 				</WishlistItem>
 			{/each}
 		{:else if data.wishlist.items && data.wishlist.items.length > 0}
-			<Card style={headerCardStyle} class="relative overflow-hidden">
-				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
-				<CardContent class="p-12 relative z-10">
+			<Card>
+				<CardContent class="p-12">
 					<EmptyState
 						message="No wishes match your search."
 					/>
 				</CardContent>
 			</Card>
 		{:else}
-			<Card style={headerCardStyle} class="relative overflow-hidden">
-				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
-				<CardContent class="p-12 relative z-10">
+			<Card>
+				<CardContent class="p-12">
 					<EmptyState
 						message={t.wishlist.emptyWishes}
 					/>

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

@@ -155,7 +155,7 @@
 
 	{#if showAddForm}
 		<div bind:this={addFormElement}>
-			<AddItemForm onSuccess={handleItemAdded} wishlistColor={currentColor} wishlistTheme={currentTheme} />
+			<AddItemForm onSuccess={handleItemAdded} />
 		</div>
 	{/if}
 
@@ -169,8 +169,6 @@
 				currentPosition={items.findIndex(item => item.id === editingItem.id) + 1}
 				totalItems={items.length}
 				onPositionChange={handlePositionChange}
-				wishlistColor={currentColor}
-				wishlistTheme={currentTheme}
 			/>
 		</div>
 	{/if}

static/themes/dots/bgbottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/dots/bgtop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/dots/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgbottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgtop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/bgbottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/bgtop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/item.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>