refactor: abstract edit page components and functions

src/lib/components/wishlist/ClaimWishlistSection.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { enhance } from '$app/forms';
+	import { languageStore } from '$lib/stores/language.svelte';
+
+	let {
+		isAuthenticated,
+		isOwner,
+		hasClaimed
+	}: {
+		isAuthenticated: boolean;
+		isOwner: boolean;
+		hasClaimed: boolean;
+	} = $props();
+
+	const t = $derived(languageStore.t);
+</script>
+
+{#if isAuthenticated}
+	<div class="mb-6">
+		{#if isOwner}
+			<Button
+				disabled
+				variant="outline"
+				class="w-full md:w-auto opacity-60 cursor-not-allowed"
+			>
+				{t.wishlist.youOwnThis}
+			</Button>
+			<p class="text-sm text-muted-foreground mt-2">
+				{t.wishlist.alreadyInDashboard}
+			</p>
+		{:else}
+			<form
+				method="POST"
+				action={hasClaimed ? "?/unclaimWishlist" : "?/claimWishlist"}
+				use:enhance
+			>
+				<Button
+					type="submit"
+					variant={hasClaimed ? "outline" : "default"}
+					class="w-full md:w-auto"
+				>
+					{hasClaimed ? "Unclaim Wishlist" : "Claim Wishlist"}
+				</Button>
+			</form>
+			<p class="text-sm text-muted-foreground mt-2">
+				{#if hasClaimed}
+					You have claimed this wishlist. It will appear in your dashboard.
+				{:else}
+					Claim this wishlist to add it to your dashboard for easy access.
+				{/if}
+			</p>
+		{/if}
+	</div>
+{/if}

src/lib/components/wishlist/DangerZone.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { enhance } from '$app/forms';
+	import UnlockButton from '$lib/components/ui/UnlockButton.svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
+
+	let {
+		unlocked = $bindable()
+	}: {
+		unlocked: boolean;
+	} = $props();
+
+	const t = $derived(languageStore.t);
+</script>
+
+<div class="mt-12 pt-8 border-t border-border space-y-4">
+	<div class="flex flex-col md:flex-row gap-4 justify-between items-stretch md:items-center">
+		<UnlockButton bind:unlocked />
+
+		{#if unlocked}
+			<form
+				method="POST"
+				action="?/deleteWishlist"
+				use:enhance={({ cancel }) => {
+					if (!confirm(t.wishlist.deleteConfirm)) {
+						cancel();
+						return;
+					}
+					return async ({ result }) => {
+						if (result.type === "success") {
+							window.location.href = "/dashboard";
+						}
+					};
+				}}
+			>
+				<Button
+					type="submit"
+					variant="destructive"
+					class="w-full md:w-auto"
+				>
+					{t.wishlist.deleteWishlist}
+				</Button>
+			</form>
+		{/if}
+	</div>
+</div>

src/lib/utils/wishlistUpdates.ts

@@ -0,0 +1,57 @@
+/**
+ * Utility functions for updating wishlist properties
+ */
+
+type UpdateField = {
+	[key: string]: string;
+};
+
+async function updateWishlist(field: UpdateField): Promise<boolean> {
+	const response = await fetch("?/updateWishlist", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded",
+		},
+		body: new URLSearchParams(field),
+	});
+
+	if (!response.ok) {
+		console.error(`Failed to update wishlist: ${Object.keys(field)[0]}`);
+		return false;
+	}
+	return true;
+}
+
+export async function updateTitle(title: string): Promise<boolean> {
+	return updateWishlist({ title });
+}
+
+export async function updateDescription(description: string | null): Promise<boolean> {
+	return updateWishlist({ description: description || "" });
+}
+
+export async function updateColor(color: string | null): Promise<boolean> {
+	return updateWishlist({ color: color || "" });
+}
+
+export async function updateEndDate(endDate: string | null): Promise<boolean> {
+	return updateWishlist({ endDate: endDate || "" });
+}
+
+export async function reorderItems(items: Array<{ id: string; order: number }>): Promise<boolean> {
+	const response = await fetch("?/reorderItems", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded",
+		},
+		body: new URLSearchParams({
+			items: JSON.stringify(items),
+		}),
+	});
+
+	if (!response.ok) {
+		console.error("Failed to update item order");
+		return false;
+	}
+	return true;
+}