From d165e5992ace62daebbbb73bb80eeaf36f83ac28 Mon Sep 17 00:00:00 2001 From: rasmusq Date: Fri, 28 Nov 2025 13:03:13 +0100 Subject: [PATCH] fix: missing theme on local wishlists in dashboard page --- .../dashboard/LocalWishlistsSection.svelte | 85 +++++++++++++++---- src/lib/utils/themes.ts | 9 +- src/routes/api/wishlist/[token]/+server.ts | 38 +++++++++ src/routes/dashboard/+page.svelte | 2 +- 4 files changed, 115 insertions(+), 19 deletions(-) create mode 100644 src/routes/api/wishlist/[token]/+server.ts diff --git a/src/lib/components/dashboard/LocalWishlistsSection.svelte b/src/lib/components/dashboard/LocalWishlistsSection.svelte index ba96c01..6eb21a3 100644 --- a/src/lib/components/dashboard/LocalWishlistsSection.svelte +++ b/src/lib/components/dashboard/LocalWishlistsSection.svelte @@ -15,34 +15,87 @@ const t = $derived(languageStore.t); let localWishlists = $state([]); + let enrichedWishlists = $state([]); - // Load local wishlists on mount (client-side only) - onMount(() => { + // Load local wishlists on mount and fetch their data from server + onMount(async () => { localWishlists = getLocalWishlists(); + + // Fetch full wishlist data for each local wishlist + const promises = localWishlists.map(async (local) => { + try { + const response = await fetch(`/api/wishlist/${local.ownerToken}`); + if (response.ok) { + const data = await response.json(); + return { + ...data, + isFavorite: local.isFavorite || false + }; + } + } catch (error) { + console.error('Failed to fetch wishlist data:', error); + } + // Fallback to local data if fetch fails + return { + id: local.ownerToken, + title: local.title, + ownerToken: local.ownerToken, + publicToken: local.publicToken, + createdAt: local.createdAt, + isFavorite: local.isFavorite || false, + items: [], + theme: null, + color: null + }; + }); + + enrichedWishlists = await Promise.all(promises); }); - function handleForget(ownerToken: string) { + async function refreshEnrichedWishlists() { + const promises = localWishlists.map(async (local) => { + try { + const response = await fetch(`/api/wishlist/${local.ownerToken}`); + if (response.ok) { + const data = await response.json(); + return { + ...data, + isFavorite: local.isFavorite || false + }; + } + } catch (error) { + console.error('Failed to fetch wishlist data:', error); + } + return { + id: local.ownerToken, + title: local.title, + ownerToken: local.ownerToken, + publicToken: local.publicToken, + createdAt: local.createdAt, + isFavorite: local.isFavorite || false, + items: [], + theme: null, + color: null + }; + }); + + enrichedWishlists = await Promise.all(promises); + } + + async function handleForget(ownerToken: string) { forgetLocalWishlist(ownerToken); localWishlists = getLocalWishlists(); + await refreshEnrichedWishlists(); } - function handleToggleFavorite(ownerToken: string) { + async function handleToggleFavorite(ownerToken: string) { toggleLocalFavorite(ownerToken); localWishlists = getLocalWishlists(); + await refreshEnrichedWishlists(); } - // Transform LocalWishlist to match the format expected by WishlistSection - const transformedWishlists = $derived(() => { - return localWishlists.map(w => ({ - id: w.ownerToken, - title: w.title, - ownerToken: w.ownerToken, - publicToken: w.publicToken, - createdAt: w.createdAt, - isFavorite: w.isFavorite || false, - items: [] // We don't have item data in localStorage - })); - }); + // Use enriched wishlists which have full data including theme and color + const transformedWishlists = $derived(() => enrichedWishlists); // Description depends on authentication status const sectionDescription = $derived(() => { diff --git a/src/lib/utils/themes.ts b/src/lib/utils/themes.ts index 63e49e3..c8c2ed6 100644 --- a/src/lib/utils/themes.ts +++ b/src/lib/utils/themes.ts @@ -44,8 +44,13 @@ export function getTheme(themeName?: string | null): Theme { /** * Get color from a CSS color string or class - * For now, we'll use currentColor which inherits from the parent + * Returns the provided color or a default primary color */ export function getThemeColor(color?: string | null): string { - return color || 'currentColor'; + // Use the provided color, or default to a visible color + if (color && color !== 'null' && color !== '') { + return color; + } + // Default to a blue color (can't use CSS variables in SVG fill) + return '#3b82f6'; } diff --git a/src/routes/api/wishlist/[token]/+server.ts b/src/routes/api/wishlist/[token]/+server.ts new file mode 100644 index 0000000..f84afd7 --- /dev/null +++ b/src/routes/api/wishlist/[token]/+server.ts @@ -0,0 +1,38 @@ +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; +import { db } from '$lib/server/db'; +import { wishlists } from '$lib/server/schema'; +import { eq, or } from 'drizzle-orm'; + +export const GET: RequestHandler = async ({ params }) => { + const { token } = params; + + // Find wishlist by either ownerToken or publicToken + const wishlist = await db.query.wishlists.findFirst({ + where: or( + eq(wishlists.ownerToken, token), + eq(wishlists.publicToken, token) + ), + with: { + items: { + orderBy: (items, { asc }) => [asc(items.order)] + } + } + }); + + if (!wishlist) { + return json({ error: 'Wishlist not found' }, { status: 404 }); + } + + // Return only the necessary fields + return json({ + id: wishlist.id, + title: wishlist.title, + ownerToken: wishlist.ownerToken, + publicToken: wishlist.publicToken, + createdAt: wishlist.createdAt, + theme: wishlist.theme, + color: wishlist.color, + items: wishlist.items || [] + }); +}; diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte index c02fc1d..e29f516 100644 --- a/src/routes/dashboard/+page.svelte +++ b/src/routes/dashboard/+page.svelte @@ -58,7 +58,7 @@ }); - +