From 402cb015dfca25e6df2e85df7026545980daf177 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 2 Jan 2026 20:25:43 +0100
Subject: [PATCH] feat: enable live search on all recipe pages

Previously, live client-side search only worked on the main /rezepte and /recipes pages. All other pages (category, tag, favorites, search results, icon, and season pages) fell back to server-side search with form submission.

Now all recipe pages support live filtering as users type, providing consistent UX across the site.
---
 src/lib/components/IconLayout.svelte          |  4 ++-
 src/lib/components/SeasonLayout.svelte        |  4 ++-
 .../category/[category]/+page.svelte          | 22 +++++++++++--
 .../favorites/+page.svelte                    | 28 ++++++++++++++--
 .../icon/[icon]/+page.svelte                  | 22 +++++++++++--
 .../search/+page.server.ts                    | 24 ++++++++++----
 .../search/+page.svelte                       | 32 +++++++++++++++++--
 .../season/+page.svelte                       | 22 +++++++++++--
 .../season/[month]/+page.svelte               | 22 +++++++++++--
 .../tag/[tag]/+page.svelte                    | 22 +++++++++++--
 10 files changed, 177 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/IconLayout.svelte b/src/lib/components/IconLayout.svelte
index a1096446..4cbf1033 100644
--- a/src/lib/components/IconLayout.svelte
+++ b/src/lib/components/IconLayout.svelte
@@ -6,6 +6,8 @@
     export let active_icon
     export let routePrefix = '/rezepte'
     export let lang = 'de'
+    export let recipes = []
+    export let onSearchResults = (ids, categories) => {}
 </script>
 
 <style>
@@ -74,7 +76,7 @@
 {/each}
 </div>
 <section>
-<Search icon={active_icon} {lang}></Search>
+<Search icon={active_icon} {lang} {recipes} {onSearchResults}></Search>
 </section>
 <section>
 <slot name=recipes></slot>
diff --git a/src/lib/components/SeasonLayout.svelte b/src/lib/components/SeasonLayout.svelte
index 099943f6..2085e7fe 100644
--- a/src/lib/components/SeasonLayout.svelte
+++ b/src/lib/components/SeasonLayout.svelte
@@ -7,6 +7,8 @@
     export let active_index;
     export let routePrefix = '/rezepte';
     export let lang = 'de';
+    export let recipes = []
+    export let onSearchResults = (ids, categories) => {}
 
 </script>
 <style>
@@ -43,7 +45,7 @@ a.month:hover,
 {/each}
 </div>
 <section>
-<Search season={active_index + 1} {lang}></Search>
+<Search season={active_index + 1} {lang} {recipes} {onSearchResults}></Search>
 </section>
 <section>
 <slot name=recipes></slot>
diff --git a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
index 41178ae7..f479ef4b 100644
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
@@ -9,6 +9,24 @@
 
     const isEnglish = $derived(data.lang === 'en');
     const label = $derived(isEnglish ? 'Recipes in Category' : 'Rezepte in Kategorie');
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.recipes.length;
+    }
+
+    // Filter recipes based on search
+    const filteredRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.recipes;
+        }
+        return data.recipes.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
 <style>
 	h1 {
@@ -17,10 +35,10 @@
 	}
 </style>
 <h1>{label} <q>{data.category}</q>:</h1>
-<Search category={data.category} lang={data.lang}></Search>
+<Search category={data.category} lang={data.lang} recipes={data.recipes} onSearchResults={handleSearchResults}></Search>
 <section>
 <Recipes>
-	{#each rand_array(data.recipes) as recipe}
+	{#each rand_array(filteredRecipes) as recipe}
 		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
 </Recipes>
diff --git a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
index bcb9c566..ff4c700a 100644
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -27,6 +27,24 @@
             : 'Besuche ein Rezept und klicke auf das Herz-Symbol, um es zu deinen Favoriten hinzuzufügen.',
         recipesLink: isEnglish ? 'recipe' : 'Rezept'
     });
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.favorites.length;
+    }
+
+    // Filter recipes based on search
+    const filteredFavorites = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.favorites;
+        }
+        return data.favorites.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
 
 <style>
@@ -61,16 +79,20 @@ h1{
     {/if}
 </p>
 
-<Search favoritesOnly={true} lang={data.lang}></Search>
+<Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} onSearchResults={handleSearchResults}></Search>
 
 {#if data.error}
     <p class="empty-state">{labels.errorLoading} {data.error}</p>
-{:else if data.favorites.length > 0}
+{:else if filteredFavorites.length > 0}
     <Recipes>
-        {#each data.favorites as recipe}
+        {#each filteredFavorites as recipe}
             <Card {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
         {/each}
     </Recipes>
+{:else if data.favorites.length > 0}
+    <div class="empty-state">
+        <p>{isEnglish ? 'No matching favorites found.' : 'Keine passenden Favoriten gefunden.'}</p>
+    </div>
 {:else}
     <div class="empty-state">
         <p>{labels.emptyState1}</p>
diff --git a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
index 90c0fa31..3c4f8309 100644
--- a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
@@ -7,10 +7,28 @@
     import Search from '$lib/components/Search.svelte';
     let { data }: { data: PageData } = $props();
     import { rand_array } from '$lib/js/randomize';
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.season.length;
+    }
+
+    // Filter recipes based on search
+    const filteredRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.season;
+        }
+        return data.season.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
-<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang}>
+<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 <Recipes slot=recipes>
-	{#each rand_array(data.season) as recipe}
+	{#each rand_array(filteredRecipes) as recipe}
 		<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
 </Recipes>
diff --git a/src/routes/[recipeLang=recipeLang]/search/+page.server.ts b/src/routes/[recipeLang=recipeLang]/search/+page.server.ts
index f8b3c155..85283bfd 100644
--- a/src/routes/[recipeLang=recipeLang]/search/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/search/+page.server.ts
@@ -1,6 +1,7 @@
 import type { PageServerLoad } from './$types';
+import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favorites";
 
-export const load: PageServerLoad = async ({ url, fetch, params }) => {
+export const load: PageServerLoad = async ({ url, fetch, params, locals }) => {
     const isEnglish = params.recipeLang === 'recipes';
     const apiBase = isEnglish ? '/api/recipes' : '/api/rezepte';
 
@@ -19,15 +20,23 @@ export const load: PageServerLoad = async ({ url, fetch, params }) => {
     if (icon) apiUrl.searchParams.set('icon', icon);
     if (season) apiUrl.searchParams.set('season', season);
     if (favoritesOnly) apiUrl.searchParams.set('favorites', 'true');
-    
+
     try {
-        const response = await fetch(apiUrl.toString());
-        const results = await response.json();
-        
+        // Fetch both search results and all recipes for live search
+        const [searchResponse, allRecipesResponse, userFavorites] = await Promise.all([
+            fetch(apiUrl.toString()),
+            fetch(`${apiBase}/items/all_brief`),
+            getUserFavorites(fetch, locals)
+        ]);
+
+        const results = await searchResponse.json();
+        const allRecipes = await allRecipesResponse.json();
+
         return {
             query,
-            results: response.ok ? results : [],
-            error: response.ok ? null : results.error || 'Search failed',
+            results: searchResponse.ok ? addFavoriteStatusToRecipes(results, userFavorites) : [],
+            allRecipes: addFavoriteStatusToRecipes(allRecipes, userFavorites),
+            error: searchResponse.ok ? null : results.error || 'Search failed',
             filters: {
                 category,
                 tag,
@@ -40,6 +49,7 @@ export const load: PageServerLoad = async ({ url, fetch, params }) => {
         return {
             query,
             results: [],
+            allRecipes: [],
             error: 'Search failed',
             filters: {
                 category,
diff --git a/src/routes/[recipeLang=recipeLang]/search/+page.svelte b/src/routes/[recipeLang=recipeLang]/search/+page.svelte
index 40d09435..a7216365 100644
--- a/src/routes/[recipeLang=recipeLang]/search/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/search/+page.svelte
@@ -26,6 +26,26 @@
         noResults: isEnglish ? 'No recipes found.' : 'Keine Rezepte gefunden.',
         tryOther: isEnglish ? 'Try different search terms.' : 'Versuche es mit anderen Suchbegriffen.'
     });
+
+    // Search state for live filtering
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.allRecipes.length;
+    }
+
+    // Filter recipes based on live search
+    const displayedRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            // No active search - show server-side results
+            return data.results;
+        }
+        // Active search - show client-side filtered results
+        return data.allRecipes.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
 
 <style>
@@ -71,25 +91,31 @@
     season={data.filters.season}
     favoritesOnly={data.filters.favoritesOnly}
     lang={data.lang}
+    recipes={data.allRecipes}
+    onSearchResults={handleSearchResults}
 />
 
 {#if data.error}
     <div class="search-info">
         <p>{labels.searchError} {data.error}</p>
     </div>
+{:else if hasActiveSearch}
+    <div class="search-info">
+        <p>{displayedRecipes.length} {labels.resultsFor} "{data.query}"</p>
+    </div>
 {:else if data.query}
     <div class="search-info">
         <p>{data.results.length} {labels.resultsFor} "{data.query}"</p>
     </div>
 {/if}
 
-{#if data.results.length > 0}
+{#if displayedRecipes.length > 0}
     <Recipes>
-        {#each data.results as recipe}
+        {#each displayedRecipes as recipe}
             <Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
         {/each}
     </Recipes>
-{:else if data.query && !data.error}
+{:else if (data.query || hasActiveSearch) && !data.error}
     <div class="search-info">
         <p>{labels.noResults}</p>
         <p>{labels.tryOther}</p>
diff --git a/src/routes/[recipeLang=recipeLang]/season/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
index dc3fa395..03d1f593 100644
--- a/src/routes/[recipeLang=recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
@@ -14,11 +14,29 @@
     const months = $derived(isEnglish
         ? ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
         : ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.season.length;
+    }
+
+    // Filter recipes based on search
+    const filteredRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.season;
+        }
+        return data.season.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
 
-<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang}>
+<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 <Recipes slot=recipes>
-	{#each rand_array(data.season) as recipe}
+	{#each rand_array(filteredRecipes) as recipe}
 		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
 </Recipes>
diff --git a/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
index 7d74b074..22b29cc6 100644
--- a/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
@@ -13,10 +13,28 @@
         : ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
 
     import { rand_array } from '$lib/js/randomize';
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.season.length;
+    }
+
+    // Filter recipes based on search
+    const filteredRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.season;
+        }
+        return data.season.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
-<SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang}>
+<SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 <Recipes slot=recipes>
-	{#each rand_array(data.season) as recipe}
+	{#each rand_array(filteredRecipes) as recipe}
 		<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
 </Recipes>
diff --git a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
index 30a539d6..846d78f2 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
@@ -9,6 +9,24 @@
 
     const isEnglish = $derived(data.lang === 'en');
     const label = $derived(isEnglish ? 'Recipes with Keyword' : 'Rezepte mit Stichwort');
+
+    // Search state
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    // Handle search results from Search component
+    function handleSearchResults(ids, categories) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.recipes.length;
+    }
+
+    // Filter recipes based on search
+    const filteredRecipes = $derived.by(() => {
+        if (!hasActiveSearch) {
+            return data.recipes;
+        }
+        return data.recipes.filter(r => matchedRecipeIds.has(r._id));
+    });
 </script>
 <style>
 	h1 {
@@ -17,10 +35,10 @@
 	}
 </style>
 <h1>{label} <q>{data.tag}</q>:</h1>
-<Search tag={data.tag} lang={data.lang}></Search>
+<Search tag={data.tag} lang={data.lang} recipes={data.recipes} onSearchResults={handleSearchResults}></Search>
 <section>
 <Recipes>
-	{#each rand_array(data.recipes) as recipe}
+	{#each rand_array(filteredRecipes) as recipe}
 		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
 	{/each}
 	</Recipes>