wishlist/src/routes/dashboard/+page.svelte

<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import type { PageData } from './$types';
	import PageContainer from '$lib/components/layout/PageContainer.svelte';
	import DashboardHeader from '$lib/components/layout/DashboardHeader.svelte';
	import WishlistSection from '$lib/components/dashboard/WishlistSection.svelte';
	import LocalWishlistsSection from '$lib/components/dashboard/LocalWishlistsSection.svelte';
	import { enhance } from '$app/forms';
	import { Star } from 'lucide-svelte';
	import { languageStore } from '$lib/stores/language.svelte';

	let { data }: { data: PageData } = $props();

	// For anonymous users, get theme from localStorage
	function getInitialTheme() {
		if (data.isAuthenticated) {
			return data.user?.dashboardTheme || 'none';
		} else {
			// Anonymous user - get from localStorage
			if (typeof window !== 'undefined') {
				return localStorage.getItem('dashboardTheme') || 'none';
			}
			return 'none';
		}
	}

	let currentTheme = $state(getInitialTheme());

	// Save to localStorage when theme changes for anonymous users
	function handleThemeUpdate(theme: string | null) {
		currentTheme = theme || 'none';

		if (!data.isAuthenticated && typeof window !== 'undefined') {
			localStorage.setItem('dashboardTheme', currentTheme);
		}
	}

	const t = $derived(languageStore.t);

	// Only owned wishlists for "My Wishlists"
	const myWishlists = $derived(() => data.wishlists || []);

	// Claimed wishlists (those with ownerToken, meaning they were claimed via edit link)
	const claimedWishlists = $derived(() => {
		return (data.savedWishlists || [])
			.filter(saved => saved.wishlist?.ownerToken)
			.map(saved => ({
				...saved.wishlist,
				isFavorite: saved.isFavorite,
				isClaimed: true,
				savedId: saved.id
			}));
	});

	// Saved wishlists are those WITHOUT ownerToken (saved from public view only)
	const savedWishlists = $derived(() => {
		return (data.savedWishlists || []).filter(saved => !saved.wishlist?.ownerToken);
	});
</script>

<PageContainer theme={currentTheme} themeColor={null}>
	<DashboardHeader
		userName={data.user?.name}
		userEmail={data.user?.email}
		dashboardTheme={currentTheme}
		isAuthenticated={data.isAuthenticated}
		onThemeUpdate={handleThemeUpdate}
	/>

	<!-- Local Wishlists Section (for anonymous and authenticated users) -->
	<LocalWishlistsSection isAuthenticated={data.isAuthenticated} />

	{#if data.isAuthenticated}
		<!-- My Wishlists Section -->
		<WishlistSection
		title={t.dashboard.myWishlists}
		description={t.dashboard.myWishlistsDescription}
		items={myWishlists()}
		emptyMessage={t.dashboard.emptyWishlists}
		emptyActionLabel={t.dashboard.emptyWishlistsAction}
		emptyActionHref="/"
		showCreateButton={true}
	>
		{#snippet actions(wishlist, unlocked)}
			<div class="flex gap-2 flex-wrap">
				<form method="POST" action="?/toggleFavorite" use:enhance={() => {
					return async ({ update }) => {
						await update({ reset: false });
					};
				}}>
					<input type="hidden" name="wishlistId" value={wishlist.id} />
					<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
					<Button type="submit" size="sm" variant="outline">
						<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
					</Button>
				</form>
				<Button
					size="sm"
					onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
				>
					{t.dashboard.manage}
				</Button>
				<Button
					size="sm"
					variant="outline"
					onclick={() => {
						navigator.clipboard.writeText(
							`${window.location.origin}/wishlist/${wishlist.publicToken}`
						);
					}}
				>
					{t.dashboard.copyLink}
				</Button>
				{#if unlocked}
					<form method="POST" action="?/deleteWishlist" use:enhance={() => {
						return async ({ update }) => {
							await update({ reset: false });
						};
					}}>
						<input type="hidden" name="wishlistId" value={wishlist.id} />
						<Button type="submit" size="sm" variant="destructive">
							{t.dashboard.delete}
						</Button>
					</form>
				{/if}
			</div>
		{/snippet}
	</WishlistSection>

	<!-- Claimed Wishlists Section -->
	<WishlistSection
		title={t.dashboard.claimedWishlists}
		description={t.dashboard.claimedWishlistsDescription}
		items={claimedWishlists()}
		emptyMessage={t.dashboard.emptyClaimedWishlists}
		emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
		hideIfEmpty={true}
	>
		{#snippet actions(wishlist, unlocked)}
			<div class="flex gap-2 flex-wrap">
				<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
					return async ({ update }) => {
						await update({ reset: false });
					};
				}}>
					<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
					<input type="hidden" name="isFavorite" value={wishlist.isFavorite} />
					<Button type="submit" size="sm" variant="outline">
						<Star class={wishlist.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
					</Button>
				</form>
				<Button
					size="sm"
					onclick={() => (window.location.href = `/wishlist/${wishlist.ownerToken}/edit`)}
				>
					{t.dashboard.manage}
				</Button>
				<Button
					size="sm"
					variant="outline"
					onclick={() => {
						navigator.clipboard.writeText(
							`${window.location.origin}/wishlist/${wishlist.publicToken}`
						);
					}}
				>
					{t.dashboard.copyLink}
				</Button>
				{#if unlocked}
					<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
						return async ({ update }) => {
							await update({ reset: false });
						};
					}}>
						<input type="hidden" name="savedWishlistId" value={wishlist.savedId} />
						<Button type="submit" size="sm" variant="destructive">
							{t.dashboard.unclaim}
						</Button>
					</form>
				{/if}
			</div>
		{/snippet}
	</WishlistSection>

	<!-- Saved Wishlists Section -->
	<WishlistSection
		title={t.dashboard.savedWishlists}
		description={t.dashboard.savedWishlistsDescription}
		items={savedWishlists()}
		emptyMessage={t.dashboard.emptySavedWishlists}
		emptyDescription={t.dashboard.emptySavedWishlistsDescription}
	>
		{#snippet actions(saved, unlocked)}
			<div class="flex gap-2 flex-wrap">
				<form method="POST" action="?/toggleSavedFavorite" use:enhance={() => {
					return async ({ update }) => {
						await update({ reset: false });
					};
				}}>
					<input type="hidden" name="savedWishlistId" value={saved.id} />
					<input type="hidden" name="isFavorite" value={saved.isFavorite} />
					<Button type="submit" size="sm" variant="outline">
						<Star class={saved.isFavorite ? "fill-yellow-500 text-yellow-500" : ""} />
					</Button>
				</form>
				<Button
					size="sm"
					onclick={() => (window.location.href = `/wishlist/${saved.wishlist.publicToken}`)}
				>
					{t.dashboard.viewWishlist}
				</Button>
				{#if unlocked}
					<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
						return async ({ update }) => {
							await update({ reset: false });
						};
					}}>
						<input type="hidden" name="savedWishlistId" value={saved.id} />
						<Button type="submit" size="sm" variant="destructive">
							{t.dashboard.unsave}
						</Button>
					</form>
				{/if}
			</div>
		{/snippet}
	</WishlistSection>
	{/if}
</PageContainer>