add: better search and better delete locking mechanism

src/lib/components/dashboard/WishlistGrid.svelte

@@ -14,6 +14,7 @@
 		emptyActionLabel,
 		emptyActionHref,
 		headerAction,
+		searchBar,
 		children
 	}: {
 		title: string;
@@ -24,6 +25,7 @@
 		emptyActionLabel?: string;
 		emptyActionHref?: string;
 		headerAction?: Snippet;
+		searchBar?: Snippet;
 		children: Snippet<[any]>;
 	} = $props();
 
@@ -53,6 +55,11 @@
 				{@render headerAction()}
 			{/if}
 		</div>
+		{#if searchBar}
+			<div class="mt-4">
+				{@render searchBar()}
+			</div>
+		{/if}
 	</CardHeader>
 	<CardContent>
 		{#if items && items.length > 0}

src/lib/components/ui/SearchBar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { languageStore } from '$lib/stores/language.svelte';
+
+	let {
+		value = $bindable(''),
+		placeholder = languageStore.t.dashboard.searchPlaceholder
+	}: {
+		value: string;
+		placeholder?: string;
+	} = $props();
+</script>
+
+<Input
+	type="search"
+	{placeholder}
+	bind:value
+/>

src/lib/components/ui/UnlockButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Lock, LockOpen } from 'lucide-svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
+
+	let {
+		unlocked = $bindable(false)
+	}: {
+		unlocked: boolean;
+	} = $props();
+
+	const t = $derived(languageStore.t);
+
+	function handleClick() {
+		unlocked = !unlocked;
+	}
+</script>
+
+<Button
+	onclick={handleClick}
+	variant={unlocked ? "default" : "outline"}
+	class="w-full md:w-auto"
+>
+	{#if unlocked}
+		<Lock class="mr-2 h-4 w-4" />
+		{t.wishlist.lockEditing}
+	{:else}
+		<LockOpen class="mr-2 h-4 w-4" />
+		{t.wishlist.unlockEditing}
+	{/if}
+</Button>