rasmusq/wishlist
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

update: improve dashboard and distinction between saved and claimed wishlists

Browse Source
This commit is contained in:
rasmusq
2025-11-26 00:37:30 +01:00
parent f5f204b51a
commit 911f9c4936
5 changed files with 161 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/routes/dashboard/+page.svelte
View File

@@ -16,14 +16,20 @@
const t = $derived(languageStore.t);
let myWishlistsUnlocked = $state(false);
let claimedWishlistsUnlocked = $state(false);
let savedWishlistsUnlocked = $state(false);
let myWishlistsSearch = $state('');
let claimedWishlistsSearch = $state('');
let savedWishlistsSearch = $state('');
// Combine owned and claimed wishlists for "My Wishlists"
// Only owned wishlists for "My Wishlists" (exclude claimed)
const allMyWishlists = $derived(() => {
const owned = data.wishlists || [];
// Only include claimed wishlists (those with ownerToken, meaning they were claimed via edit link)
return owned;
});
// Claimed wishlists (those with ownerToken, meaning they were claimed via edit link)
const allClaimedWishlists = $derived(() => {
const claimed = (data.savedWishlists || [])
.filter(saved => saved.wishlist?.ownerToken) // Has edit access
.map(saved => ({
@@ -32,7 +38,7 @@
isClaimed: true,
savedId: saved.id
}));
return [...owned, ...claimed];
return claimed;
});
const sortedWishlists = $derived(() => {
@@ -61,6 +67,32 @@
});
});
const sortedClaimedWishlists = $derived(() => {
const filtered = claimedWishlistsSearch.trim()
? allClaimedWishlists().filter(w =>
w.title.toLowerCase().includes(claimedWishlistsSearch.toLowerCase()) ||
w.description?.toLowerCase().includes(claimedWishlistsSearch.toLowerCase())
)
: allClaimedWishlists();
return [...filtered].sort((a, b) => {
if (a.isFavorite && !b.isFavorite) return -1;
if (!a.isFavorite && b.isFavorite) return 1;
const aHasEndDate = !!a.endDate;
const bHasEndDate = !!b.endDate;
if (aHasEndDate && !bHasEndDate) return -1;
if (!aHasEndDate && bHasEndDate) return 1;
if (aHasEndDate && bHasEndDate) {
return new Date(a.endDate!).getTime() - new Date(b.endDate!).getTime();
}
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
});
});
// Saved wishlists are those WITHOUT ownerToken (saved from public view only)
const sortedSavedWishlists = $derived(() => {
const filtered = savedWishlistsSearch.trim()
@@ -155,33 +187,18 @@
color={wishlist.color}
>
<div class="flex gap-2 flex-wrap">
{#if wishlist.isClaimed}
<!-- For claimed wishlists, use saved favorite toggle -->
<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>
{:else}
<!-- For owned wishlists, use regular favorite toggle -->
<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>
{/if}
<!-- For owned wishlists, use regular favorite toggle -->
<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`)}
@@ -199,23 +216,86 @@
>
{t.dashboard.copyLink}
</Button>
{#if wishlist.isClaimed && myWishlistsUnlocked}
<!-- Add unclaim button for claimed wishlists -->
<form method="POST" action="?/unsaveWishlist" use:enhance={() => {
</div>
</WishlistCard>
{/snippet}
</WishlistGrid>
{#if allClaimedWishlists().length > 0}
<WishlistGrid
title={t.dashboard.claimedWishlists}
description={t.dashboard.claimedWishlistsDescription}
items={sortedClaimedWishlists() || []}
emptyMessage={t.dashboard.emptyClaimedWishlists}
emptyDescription={t.dashboard.emptyClaimedWishlistsDescription}
>
{#snippet headerAction()}
<div class="flex flex-col sm:flex-row gap-2">
<UnlockButton bind:unlocked={claimedWishlistsUnlocked} />
</div>
{/snippet}
{#snippet searchBar()}
{#if allClaimedWishlists().length > 0}
<SearchBar bind:value={claimedWishlistsSearch} />
{/if}
{/snippet}
{#snippet children(wishlist)}
<WishlistCard
title={wishlist.title}
description={getWishlistDescription(wishlist)}
itemCount={wishlist.items?.length || 0}
color={wishlist.color}
>
<div class="flex gap-2 flex-wrap">
<!-- For claimed wishlists, use saved favorite toggle -->
<form method="POST" action="?/toggleSavedFavorite" 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.unsave}
<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>
{/if}
</div>
</WishlistCard>
{/snippet}
</WishlistGrid>
<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 claimedWishlistsUnlocked}
<!-- Add unclaim button for claimed wishlists -->
<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.unsave}
</Button>
</form>
{/if}
</div>
</WishlistCard>
{/snippet}
</WishlistGrid>
{/if}
<WishlistGrid
title={t.dashboard.savedWishlists}