recipes: fix filter panel on category, tag, and favorites pages

Search component needs access to all recipes to filter across categories/tags/etc. Previously these pages only passed their pre-filtered subset, so selecting additional filters yielded no results. Now each page fetches allRecipes in parallel and passes it to Search, falling back to the route-specific subset when no filters are active.
2026-03-10 10:36:21 +01:00
parent 03fb0dde95
commit e427dc2d25
6 changed files with 69 additions and 23 deletions
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.server.ts
@@ -4,18 +4,19 @@ import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favori
 export const load: PageServerLoad = async ({ fetch, locals, params }) => {
    const apiBase = `/api/${params.recipeLang}`;

-    const res = await fetch(`${apiBase}/items/category/${params.category}`);
-    const items = await res.json();
-
-    // Get user favorites and session
-    const [userFavorites, session] = await Promise.all([
+    const [res, allRes, userFavorites, session] = await Promise.all([
+        fetch(`${apiBase}/items/category/${params.category}`),
+        fetch(`${apiBase}/items/all_brief`),
        getUserFavorites(fetch, locals),
        locals.auth()
    ]);

+    const [items, allRecipes] = await Promise.all([res.json(), allRes.json()]);
+
    return {
        category: params.category,
        recipes: addFavoriteStatusToRecipes(items, userFavorites),
+        allRecipes: addFavoriteStatusToRecipes(allRecipes, userFavorites),
        session
    };
 };
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
@@ -3,7 +3,6 @@
    import Search from '$lib/components/recipes/Search.svelte';
    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import { rand_array } from '$lib/js/randomize';
-    import { createSearchFilter } from '$lib/js/searchFilter.svelte';

    let { data } = $props<{ data: PageData }>();
    let current_month = new Date().getMonth() + 1;
@@ -12,7 +11,18 @@
    const label = $derived(isEnglish ? 'Recipes in Category' : 'Rezepte in Kategorie');
    const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');

-    const { filtered: filteredRecipes, handleSearchResults } = createSearchFilter(() => data.recipes);
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    function handleSearchResults(ids: Set<string>, categories: Set<string>) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.allRecipes.length;
+    }
+
+    const displayRecipes = $derived.by(() => {
+        if (!hasActiveSearch) return data.recipes;
+        return data.allRecipes.filter((r: any) => matchedRecipeIds.has(r._id));
+    });
 </script>
 <style>
 	h1 {
@@ -26,9 +36,9 @@
 </svelte:head>

 <h1>{label} <q>{data.category}</q>:</h1>
-<Search category={data.category} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+<Search category={data.category} lang={data.lang} recipes={data.allRecipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 <div class="recipe-grid">
-	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+	{#each rand_array(displayRecipes) as recipe (recipe._id)}
 		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
 </div>
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.server.ts
@@ -11,15 +11,20 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
    }

    try {
-        const res = await fetch(`${apiBase}/favorites/recipes`);
+        const [res, allRes] = await Promise.all([
+            fetch(`${apiBase}/favorites/recipes`),
+            fetch(`${apiBase}/items/all_brief`)
+        ]);
+
        if (!res.ok) {
            return {
                favorites: [],
+                allRecipes: [],
                error: 'Failed to load favorites'
            };
        }

-        const favorites = await res.json();
+        const [favorites, allRecipes] = await Promise.all([res.json(), allRes.json()]);

        // Mark all favorites with isFavorite flag for filter compatibility
        const favoritesWithFlag = favorites.map((recipe: any) => ({
@@ -27,13 +32,22 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
            isFavorite: true
        }));

+        // Get favorite IDs for marking in allRecipes
+        const favoriteIds = new Set(favoritesWithFlag.map((r: any) => r._id));
+        const allRecipesWithFavorites = allRecipes.map((recipe: any) => ({
+            ...recipe,
+            isFavorite: favoriteIds.has(recipe._id)
+        }));
+
        return {
            favorites: favoritesWithFlag,
+            allRecipes: allRecipesWithFavorites,
            session
        };
    } catch (e) {
        return {
            favorites: [],
+            allRecipes: [],
            error: 'Failed to load favorites'
        };
    }
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -2,7 +2,6 @@
    import type { PageData } from './$types';
    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
-    import { createSearchFilter } from '$lib/js/searchFilter.svelte';

    let { data } = $props<{ data: PageData }>();
    let current_month = new Date().getMonth() + 1;
@@ -29,7 +28,18 @@
        toTry: isEnglish ? 'Recipes to try' : 'Zum Ausprobieren'
    });

-    const { filtered: filteredFavorites, handleSearchResults } = createSearchFilter(() => data.favorites);
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    function handleSearchResults(ids: Set<string>, categories: Set<string>) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < (data.allRecipes?.length || data.favorites.length);
+    }
+
+    const filteredFavorites = $derived.by(() => {
+        if (!hasActiveSearch) return data.favorites;
+        return data.allRecipes.filter((r: any) => matchedRecipeIds.has(r._id));
+    });
 </script>

 <style>
@@ -88,7 +98,7 @@ h1{

 <p class="to-try-link"><a href="/{data.recipeLang}/to-try">{labels.toTry} &rarr;</a></p>

-<Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+<Search favoritesOnly={true} lang={data.lang} recipes={data.allRecipes || data.favorites} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>

 {#if data.error}
    <p class="empty-state">{labels.errorLoading} {data.error}</p>
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.server.ts
@@ -4,18 +4,19 @@ import { getUserFavorites, addFavoriteStatusToRecipes } from "$lib/server/favori
 export const load: PageServerLoad = async ({ fetch, locals, params }) => {
    const apiBase = `/api/${params.recipeLang}`;

-    const res_tag = await fetch(`${apiBase}/items/tag/${params.tag}`);
-    const items_tag = await res_tag.json();
-
-    // Get user favorites and session
-    const [userFavorites, session] = await Promise.all([
+    const [res_tag, allRes, userFavorites, session] = await Promise.all([
+        fetch(`${apiBase}/items/tag/${params.tag}`),
+        fetch(`${apiBase}/items/all_brief`),
        getUserFavorites(fetch, locals),
        locals.auth()
    ]);

+    const [items_tag, allRecipes] = await Promise.all([res_tag.json(), allRes.json()]);
+
    return {
        tag: params.tag,
        recipes: addFavoriteStatusToRecipes(items_tag, userFavorites),
+        allRecipes: addFavoriteStatusToRecipes(allRecipes, userFavorites),
        session
    };
 };
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
@@ -3,7 +3,6 @@
    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
    import Search from '$lib/components/recipes/Search.svelte';
    import { rand_array } from '$lib/js/randomize';
-    import { createSearchFilter } from '$lib/js/searchFilter.svelte';

    let { data } = $props<{ data: PageData }>();
    let current_month = new Date().getMonth() + 1;
@@ -12,7 +11,18 @@
    const label = $derived(isEnglish ? 'Recipes with Keyword' : 'Rezepte mit Stichwort');
    const siteTitle = $derived(isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte');

-    const { filtered: filteredRecipes, handleSearchResults } = createSearchFilter(() => data.recipes);
+    let matchedRecipeIds = $state(new Set());
+    let hasActiveSearch = $state(false);
+
+    function handleSearchResults(ids: Set<string>, categories: Set<string>) {
+        matchedRecipeIds = ids;
+        hasActiveSearch = ids.size < data.allRecipes.length;
+    }
+
+    const displayRecipes = $derived.by(() => {
+        if (!hasActiveSearch) return data.recipes;
+        return data.allRecipes.filter((r: any) => matchedRecipeIds.has(r._id));
+    });
 </script>
 <style>
 	h1 {
@@ -26,9 +36,9 @@
 </svelte:head>

 <h1>{label} <q>{data.tag}</q>:</h1>
-<Search tag={data.tag} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+<Search tag={data.tag} lang={data.lang} recipes={data.allRecipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 <div class="recipe-grid">
-	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+	{#each rand_array(displayRecipes) as recipe (recipe._id)}
 		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
 </div>