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

src/lib/server/schema.ts

@@ -117,6 +117,7 @@ export const reservations = pgTable('reservations', {
 	itemId: text('item_id')
 		.notNull()
 		.references(() => items.id, { onDelete: 'cascade' }),
+	userId: text('user_id').references(() => users.id, { onDelete: 'set null' }),
 	reserverName: text('reserver_name'),
 	createdAt: timestamp('created_at').defaultNow().notNull()
 });
@@ -125,6 +126,10 @@ export const reservationsRelations = relations(reservations, ({ one }) => ({
 	item: one(items, {
 		fields: [reservations.itemId],
 		references: [items.id]
+	}),
+	user: one(users, {
+		fields: [reservations.userId],
+		references: [users.id]
 	})
 }));
 
@@ -154,7 +159,8 @@ export const savedWishlistsRelations = relations(savedWishlists, ({ one }) => ({
 
 export const usersRelations = relations(users, ({ many }) => ({
 	wishlists: many(wishlists),
-	savedWishlists: many(savedWishlists)
+	savedWishlists: many(savedWishlists),
+	reservations: many(reservations)
 }));
 
 export type User = typeof users.$inferSelect;