From 7484646598023733ecc5ab988186c804db08e8ae Mon Sep 17 00:00:00 2001
From: taogaetz <59668529+taogaetz@users.noreply.github.com>
Date: Sun, 14 Sep 2025 15:52:48 -0400
Subject: [PATCH] disable searchbar when user has no access

---
 src/lib/components/SearchBar.svelte | 20 +++++++++++++-------
 src/routes/+layout.svelte           |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 382f2ab..a866266 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -4,13 +4,14 @@
 
 	export let recipes: any[] = [];
 	export let placeholder: string = 'Search recipes...';
+	export let disabled: boolean = false;
 
 	let searchTerm = '';
 	let filteredRecipes: any[] = [];
 	let showResults = false;
 
 	function handleSearch() {
-		if (!searchTerm.trim()) {
+		if (disabled || !searchTerm.trim()) {
 			filteredRecipes = [];
 			showResults = false;
 			return;
@@ -34,7 +35,7 @@
 	}
 
 	function handleInputFocus() {
-		if (searchTerm.trim()) {
+		if (!disabled && searchTerm.trim()) {
 			showResults = true;
 		}
 	}
@@ -61,7 +62,9 @@
 
 <div class="relative w-full max-w-lg" bind:this={searchContainer}>
 	<div
-		class="relative flex items-center rounded-xl border-2 border-transparent bg-white shadow-sm transition-all duration-200 focus-within:border-primary focus-within:shadow-lg"
+		class="relative flex items-center rounded-xl border-2 border-transparent bg-white shadow-sm transition-all duration-200 {disabled
+			? 'cursor-not-allowed opacity-50'
+			: 'focus-within:border-primary focus-within:shadow-lg'}"
 	>
 		<svg
 			class="pointer-events-none absolute left-4 text-gray-400"
@@ -81,9 +84,12 @@
 			on:input={handleSearch}
 			on:focus={handleInputFocus}
 			{placeholder}
-			class="w-full border-none bg-transparent px-4 py-3.5 pl-12 text-base text-gray-900 outline-none placeholder:text-gray-400"
+			{disabled}
+			class="w-full border-none bg-transparent px-4 py-3.5 pl-12 text-base text-gray-900 outline-none placeholder:text-gray-400 {disabled
+				? 'cursor-not-allowed'
+				: ''}"
 		/>
-		{#if searchTerm}
+		{#if searchTerm && !disabled}
 			<button
 				class="absolute right-3 cursor-pointer rounded border-none bg-none p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
 				aria-label="Clear search"
@@ -106,7 +112,7 @@
 		{/if}
 	</div>
 
-	{#if showResults && filteredRecipes.length > 0}
+	{#if showResults && filteredRecipes.length > 0 && !disabled}
 		<div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2">
 			<div class="mx-auto max-w-7xl px-5">
 				<div class="rounded-xl border border-gray-200 bg-white shadow-2xl">
@@ -146,7 +152,7 @@
 				</div>
 			</div>
 		</div>
-	{:else if showResults && searchTerm.trim()}
+	{:else if showResults && searchTerm.trim() && !disabled}
 		<div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2">
 			<div class="mx-auto max-w-7xl px-5">
 				<div class="rounded-xl border border-gray-200 bg-white shadow-2xl">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e404177..31684c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,7 +23,7 @@
 					<img src={logo} alt="Chef Bible" class="w-20" />
 				</a>
 			</div>
-			<SearchBar recipes={data.recipes} />
+			<SearchBar recipes={data.recipes} disabled={!data.hasAccess} />
 			<a
 				href={data.authenticated ? '/recipe/new' : '#'}
 				class="btn font-extrabold btn-lg btn-primary {!data.authenticated