From bc170abcdf3b8b88b92ab3ca21dbbc7b37e6dd7c Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sat, 10 Jan 2026 17:19:55 +0100
Subject: [PATCH] fix: add category and favorites filters to all recipe pages

- Move categories logic into Search component for centralization
- Add isLoggedIn prop to SeasonLayout and IconLayout components
- Fix FilterPanel CSS to properly handle hidden favorites filter
- Fix FavoritesFilter to trigger onToggle when checkbox changes
- Update Search effect to track all filter states (category, tags, icon, season, favorites)
- Hide favorites filter on favorites page while maintaining proper grid layout
- All filters now work consistently across entire site
---
 src/lib/components/FavoritesFilter.svelte     | 11 +++++-----
 src/lib/components/FilterPanel.svelte         |  5 +++--
 src/lib/components/IconLayout.svelte          |  4 +++-
 src/lib/components/Search.svelte              | 22 +++++++++++--------
 src/lib/components/SeasonLayout.svelte        |  4 +++-
 src/lib/js/categories.ts                      |  9 ++++++++
 .../[recipeLang=recipeLang]/+page.svelte      |  7 +++---
 .../category/[category]/+page.svelte          |  2 +-
 .../favorites/+page.svelte                    |  2 +-
 .../icon/[icon]/+page.svelte                  |  2 +-
 .../season/+page.svelte                       |  2 +-
 .../tag/[tag]/+page.svelte                    |  2 +-
 12 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/js/categories.ts

diff --git a/src/lib/components/FavoritesFilter.svelte b/src/lib/components/FavoritesFilter.svelte
index 23d8f47..55b9d92 100644
--- a/src/lib/components/FavoritesFilter.svelte
+++ b/src/lib/components/FavoritesFilter.svelte
@@ -14,13 +14,13 @@
 
 	let checked = $state(enabled);
 
+	// Watch for changes to checked and call onToggle
 	$effect(() => {
-		checked = enabled;
+		// Track checked as dependency
+		const currentChecked = checked;
+		// Call onToggle whenever checked changes
+		onToggle(currentChecked);
 	});
-
-	function handleChange() {
-		onToggle(checked);
-	}
 </script>
 
 <style>
@@ -69,6 +69,5 @@
 	<Toggle
 		bind:checked={checked}
 		label=""
-		onchange={handleChange}
 	/>
 </div>
diff --git a/src/lib/components/FilterPanel.svelte b/src/lib/components/FilterPanel.svelte
index f2de704..3fc1aff 100644
--- a/src/lib/components/FilterPanel.svelte
+++ b/src/lib/components/FilterPanel.svelte
@@ -17,6 +17,7 @@
 		selectedFavoritesOnly = false,
 		lang = 'de',
 		isLoggedIn = false,
+		hideFavoritesFilter = false,
 		onCategoryChange = () => {},
 		onTagToggle = () => {},
 		onIconChange = () => {},
@@ -133,7 +134,7 @@
 		<span class="arrow" class:open={filtersOpen}>▼</span>
 	</button>
 
-	<div class="filter-panel" class:open={filtersOpen} class:with-favorites={isLoggedIn} class:without-favorites={!isLoggedIn}>
+	<div class="filter-panel" class:open={filtersOpen} class:with-favorites={isLoggedIn && !hideFavoritesFilter} class:without-favorites={!isLoggedIn || hideFavoritesFilter}>
 		<CategoryFilter
 			categories={availableCategories}
 			selected={selectedCategory}
@@ -162,7 +163,7 @@
 			{months}
 		/>
 
-		{#if isLoggedIn}
+		{#if isLoggedIn && !hideFavoritesFilter}
 			<FavoritesFilter
 				enabled={selectedFavoritesOnly}
 				onToggle={onFavoritesToggle}
diff --git a/src/lib/components/IconLayout.svelte b/src/lib/components/IconLayout.svelte
index 084b65b..179c357 100644
--- a/src/lib/components/IconLayout.svelte
+++ b/src/lib/components/IconLayout.svelte
@@ -10,6 +10,7 @@
         routePrefix = '/rezepte',
         lang = 'de',
         recipes = [],
+        isLoggedIn = false,
         onSearchResults = (ids, categories) => {},
         recipesSlot
     }: {
@@ -18,6 +19,7 @@
         routePrefix?: string,
         lang?: string,
         recipes?: any[],
+        isLoggedIn?: boolean,
         onSearchResults?: (ids: any[], categories: any[]) => void,
         recipesSlot?: Snippet
     } = $props();
@@ -89,7 +91,7 @@
 {/each}
 </div>
 <section>
-<Search icon={active_icon} {lang} {recipes} {onSearchResults}></Search>
+<Search icon={active_icon} {lang} {recipes} {isLoggedIn} {onSearchResults}></Search>
 </section>
 <section>
 {@render recipesSlot?.()}
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index a7c2117..f6a7b97 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -3,6 +3,7 @@
     import { browser } from '$app/environment';
     import "$lib/css/nordtheme.css";
     import FilterPanel from './FilterPanel.svelte';
+    import { getCategories } from '$lib/js/categories';
 
     // Filter props for different contexts
     let {
@@ -13,11 +14,13 @@
         favoritesOnly = false,
         lang = 'de',
         recipes = [],
-        categories = [],
         onSearchResults = (matchedIds, matchedCategories) => {},
         isLoggedIn = false
     } = $props();
 
+    // Generate categories internally based on language
+    const categories = $derived(getCategories(lang));
+
     const isEnglish = $derived(lang === 'en');
     const searchResultsUrl = $derived(isEnglish ? '/recipes/search' : '/rezepte/search');
     const labels = $derived({
@@ -158,10 +161,9 @@
         }
     }
 
-    // Filter change handlers
+    // Filter change handlers - the effect will automatically trigger search
     function handleCategoryChange(newCategory) {
         selectedCategory = newCategory;
-        performSearch(searchQuery);
     }
 
     function handleTagToggle(tag) {
@@ -170,22 +172,18 @@
         } else {
             selectedTags = [...selectedTags, tag];
         }
-        performSearch(searchQuery);
     }
 
     function handleIconChange(newIcon) {
         selectedIcon = newIcon;
-        performSearch(searchQuery);
     }
 
     function handleSeasonChange(newSeasons) {
         selectedSeasons = newSeasons;
-        performSearch(searchQuery);
     }
 
     function handleFavoritesToggle(enabled) {
         selectedFavoritesOnly = enabled;
-        performSearch(searchQuery);
     }
 
     function handleSubmit(event) {
@@ -202,11 +200,16 @@
         performSearch('');
     }
 
-    // Debounced search effect - only triggers search 100ms after user stops typing
+    // Debounced search effect - triggers search when query or filters change
     $effect(() => {
         if (browser && recipes.length > 0) {
-            // Read searchQuery to track it as a dependency
+            // Read all dependencies to track them
             const query = searchQuery;
+            const cat = selectedCategory;
+            const tags = selectedTags;
+            const icn = selectedIcon;
+            const seasons = selectedSeasons;
+            const favsOnly = selectedFavoritesOnly;
 
             // Set debounce timer
             const timer = setTimeout(() => {
@@ -357,6 +360,7 @@ scale: 0.8 0.8;
     {selectedFavoritesOnly}
     {lang}
     {isLoggedIn}
+    hideFavoritesFilter={favoritesOnly}
     onCategoryChange={handleCategoryChange}
     onTagToggle={handleTagToggle}
     onIconChange={handleIconChange}
diff --git a/src/lib/components/SeasonLayout.svelte b/src/lib/components/SeasonLayout.svelte
index bd5bf75..4e7d338 100644
--- a/src/lib/components/SeasonLayout.svelte
+++ b/src/lib/components/SeasonLayout.svelte
@@ -10,6 +10,7 @@
         routePrefix = '/rezepte',
         lang = 'de',
         recipes = [],
+        isLoggedIn = false,
         onSearchResults = (ids, categories) => {},
         recipesSlot
     }: {
@@ -18,6 +19,7 @@
         routePrefix?: string,
         lang?: string,
         recipes?: any[],
+        isLoggedIn?: boolean,
         onSearchResults?: (ids: any[], categories: any[]) => void,
         recipesSlot?: Snippet
     } = $props();
@@ -58,7 +60,7 @@ a.month:hover,
 {/each}
 </div>
 <section>
-<Search season={active_index + 1} {lang} {recipes} {onSearchResults}></Search>
+<Search season={active_index + 1} {lang} {recipes} {isLoggedIn} {onSearchResults}></Search>
 </section>
 <section>
 {@render recipesSlot?.()}
diff --git a/src/lib/js/categories.ts b/src/lib/js/categories.ts
new file mode 100644
index 0000000..f8f2700
--- /dev/null
+++ b/src/lib/js/categories.ts
@@ -0,0 +1,9 @@
+/**
+ * Get the list of recipe categories based on language
+ */
+export function getCategories(lang: string): string[] {
+	const isEnglish = lang === 'en';
+	return isEnglish
+		? ["Main course", "Noodle", "Bread", "Dessert", "Soup", "Side dish", "Salad", "Cake", "Breakfast", "Sauce", "Ingredient", "Drink", "Spread", "Biscuits", "Snack"]
+		: ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Snack"];
+}
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 59b3674..f666109 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -5,6 +5,7 @@
     	import Card from '$lib/components/Card.svelte';
     	import Search from '$lib/components/Search.svelte';
 	import LazyCategory from '$lib/components/LazyCategory.svelte';
+	import { getCategories } from '$lib/js/categories';
     	let { data } = $props<{ data: PageData }>();
     	let current_month = new Date().getMonth() + 1;
 
@@ -21,9 +22,7 @@
 	}
 
 	const isEnglish = $derived(data.lang === 'en');
-	const categories = $derived(isEnglish
-		? ["Main course", "Noodle", "Bread", "Dessert", "Soup", "Side dish", "Salad", "Cake", "Breakfast", "Sauce", "Ingredient", "Drink", "Spread", "Biscuits", "Snack"]
-		: ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Frühstück", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli", "Snack"]);
+	const categories = $derived(getCategories(data.lang));
 
 	// Pre-compute category-to-recipes Map for O(1) lookups
 	const recipesByCategory = $derived.by(() => {
@@ -101,7 +100,7 @@ h1{
 <h1>{labels.title}</h1>
 <p class=subheading>{labels.subheading}</p>
 
-<Search lang={data.lang} recipes={data.all_brief} categories={categories} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
+<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 
 {#if seasonRecipes.length > 0}
 	<LazyCategory title={labels.inSeason} eager={true}>
diff --git a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
index 8cd1c24..4be8486 100644
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
@@ -35,7 +35,7 @@
 	}
 </style>
 <h1>{label} <q>{data.category}</q>:</h1>
-<Search category={data.category} lang={data.lang} recipes={data.recipes} onSearchResults={handleSearchResults}></Search>
+<Search category={data.category} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 <section>
 <Recipes>
 	{#each rand_array(filteredRecipes) as recipe}
diff --git a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
index aa89106..06e961c 100644
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -79,7 +79,7 @@ h1{
     {/if}
 </p>
 
-<Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} onSearchResults={handleSearchResults}></Search>
+<Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 
 {#if data.error}
     <p class="empty-state">{labels.errorLoading} {data.error}</p>
diff --git a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
index 2edf44d..5bf1caf 100644
--- a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
@@ -26,7 +26,7 @@
         return data.season.filter(r => matchedRecipeIds.has(r._id));
     });
 </script>
-<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
+<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
 		<Recipes>
 			{#each rand_array(filteredRecipes) as recipe}
diff --git a/src/routes/[recipeLang=recipeLang]/season/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
index a02064b..091c1b1 100644
--- a/src/routes/[recipeLang=recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
@@ -34,7 +34,7 @@
     });
 </script>
 
-<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
+<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
 		<Recipes>
 			{#each rand_array(filteredRecipes) as recipe}
diff --git a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
index b6d8c56..238873d 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
@@ -35,7 +35,7 @@
 	}
 </style>
 <h1>{label} <q>{data.tag}</q>:</h1>
-<Search tag={data.tag} lang={data.lang} recipes={data.recipes} onSearchResults={handleSearchResults}></Search>
+<Search tag={data.tag} lang={data.lang} recipes={data.recipes} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
 <section>
 <Recipes>
 	{#each rand_array(filteredRecipes) as recipe}