From ad3634cf980e1e810174c201517021b7cb60cdf0 Mon Sep 17 00:00:00 2001
From: rasmusq <rasmus@rasmusq.com>
Date: Tue, 25 Nov 2025 22:05:20 +0100
Subject: [PATCH] add: searchbar in the reservation view

---
 .../wishlist/EditableItemsList.svelte         |  2 +-
 src/routes/wishlist/[token]/+page.svelte      | 33 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/wishlist/EditableItemsList.svelte b/src/lib/components/wishlist/EditableItemsList.svelte
index cb06820..1ef8374 100644
--- a/src/lib/components/wishlist/EditableItemsList.svelte
+++ b/src/lib/components/wishlist/EditableItemsList.svelte
@@ -67,7 +67,7 @@
 		<Card>
 			<CardContent class="p-12">
 				<EmptyState
-					message={t.wishlist.noItems + ". " + t.wishlist.addFirstItem + "!"}
+					message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}
 				/>
 			</CardContent>
 		</Card>
diff --git a/src/routes/wishlist/[token]/+page.svelte b/src/routes/wishlist/[token]/+page.svelte
index e0fa431..e026e14 100644
--- a/src/routes/wishlist/[token]/+page.svelte
+++ b/src/routes/wishlist/[token]/+page.svelte
@@ -17,12 +17,22 @@
 	import EmptyState from "$lib/components/layout/EmptyState.svelte";
 	import { enhance } from "$app/forms";
 	import { getCardStyle } from "$lib/utils/colors";
+	import { languageStore } from '$lib/stores/language.svelte';
 
 	let { data }: { data: PageData } = $props();
 
 	let showSaveForm = $state(false);
+	let searchQuery = $state('');
 
+	const t = $derived(languageStore.t);
 	const headerCardStyle = $derived(getCardStyle(data.wishlist.color));
+
+	const filteredItems = $derived(
+		data.wishlist.items?.filter(item =>
+			item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			item.description?.toLowerCase().includes(searchQuery.toLowerCase())
+		) || []
+	);
 </script>
 
 <PageContainer maxWidth="4xl">
@@ -112,10 +122,19 @@
 		</Card>
 	{/if}
 
+	<!-- Search Bar -->
+	{#if data.wishlist.items && data.wishlist.items.length > 0}
+		<Input
+			type="search"
+			placeholder={t.dashboard.searchPlaceholder}
+			bind:value={searchQuery}
+		/>
+	{/if}
+
 	<!-- Items List -->
 	<div class="space-y-4">
-		{#if data.wishlist.items && data.wishlist.items.length > 0}
-			{#each data.wishlist.items as item}
+		{#if filteredItems.length > 0}
+			{#each filteredItems as item}
 				<WishlistItem {item}>
 					<ReservationButton
 						itemId={item.id}
@@ -124,11 +143,19 @@
 					/>
 				</WishlistItem>
 			{/each}
+		{:else if data.wishlist.items && data.wishlist.items.length > 0}
+			<Card>
+				<CardContent class="p-12">
+					<EmptyState
+						message="No wishes match your search."
+					/>
+				</CardContent>
+			</Card>
 		{:else}
 			<Card>
 				<CardContent class="p-12">
 					<EmptyState
-						message="This wishlist doesn't have any items yet."
+						message={t.wishlist.emptyWishes}
 					/>
 				</CardContent>
 			</Card>