feat: enable live search on all recipe pages
All checks were successful
CI / update (push) Successful in 1m9s
All checks were successful
CI / update (push) Successful in 1m9s
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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user