add: searchbar in the reservation view

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>

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}
+		{#if filteredItems.length > 0}
-			{#each data.wishlist.items as item}
+			{#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>