Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add category and favorites filters to all recipe pages

Browse Source 
- 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
This commit is contained in:
Alexander Bocken
2026-01-10 17:19:55 +01:00
parent 7ab3482850
commit bc170abcdf
12 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/FavoritesFilter.svelte
View File

@@ -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>

5
src/lib/components/FilterPanel.svelte
View File

@@ -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}

4
src/lib/components/IconLayout.svelte
View File

@@ -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?.()}

22
src/lib/components/Search.svelte
View File

@@ -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}

4
src/lib/components/SeasonLayout.svelte
View File

@@ -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?.()}

9
src/lib/js/categories.ts Normal file
View File

@@ -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"];
}

7
src/routes/[recipeLang=recipeLang]/+page.svelte
View File

@@ -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}>

2
src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
View File

@@ -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}

2
src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
View File

@@ -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>

2
src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
View File

@@ -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}

2
src/routes/[recipeLang=recipeLang]/season/+page.svelte
View File

@@ -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}

2
src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
View File

@@ -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}