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>