add: user lock on reservations

src/lib/components/wishlist/ReservationButton.svelte

@@ -7,12 +7,25 @@
 		itemId: string;
 		isReserved: boolean;
 		reserverName?: string | null;
+		reservationUserId?: string | null;
+		currentUserId?: string | null;
 	}
 
-	let { itemId, isReserved, reserverName }: Props = $props();
+	let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props();
 
 	let showReserveForm = $state(false);
 	let name = $state('');
+	let showCancelConfirmation = $state(false);
+
+	const canCancel = $derived(() => {
+		if (!isReserved) return false;
+		if (reservationUserId) {
+			return currentUserId === reservationUserId;
+		}
+		return true;
+	});
+
+	const isAnonymousReservation = $derived(!reservationUserId);
 </script>
 
 {#if isReserved}
@@ -23,12 +36,52 @@
 				by {reserverName}
 			{/if}
 		</div>
-		<form method="POST" action="?/unreserve" use:enhance>
-			<input type="hidden" name="itemId" value={itemId} />
-			<Button type="submit" variant="outline" size="sm">
-				Cancel Reservation
-			</Button>
-		</form>
+		{#if canCancel()}
+			{#if showCancelConfirmation}
+				<div class="flex flex-col gap-2 items-end">
+					<p class="text-sm text-muted-foreground">
+						Cancel this reservation?
+					</p>
+					<div class="flex gap-2">
+						<form method="POST" action="?/unreserve" use:enhance={() => {
+							return async ({ update }) => {
+								showCancelConfirmation = false;
+								await update();
+							};
+						}}>
+							<input type="hidden" name="itemId" value={itemId} />
+							<Button type="submit" variant="destructive" size="sm">
+								Yes, Cancel
+							</Button>
+						</form>
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							onclick={() => (showCancelConfirmation = false)}
+						>
+							No, Keep It
+						</Button>
+					</div>
+				</div>
+			{:else if isAnonymousReservation}
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onclick={() => (showCancelConfirmation = true)}
+				>
+					Cancel Reservation
+				</Button>
+			{:else}
+				<form method="POST" action="?/unreserve" use:enhance>
+					<input type="hidden" name="itemId" value={itemId} />
+					<Button type="submit" variant="outline" size="sm">
+						Cancel Reservation
+					</Button>
+				</form>
+			{/if}
+		{/if}
 	</div>
 {:else if showReserveForm}
 	<form