feat: add AND/OR logic mode toggle to filter panel

- Add LogicModeToggle component to switch between AND and OR filter logic
- Enable multi-select for category and icon filters in OR mode
- Update Search component to handle both AND and OR filtering logic
- Resize Toggle component to match LogicModeToggle size (44px x 24px)
- Position logic mode toggle on the left side of filter panel
- Auto-convert arrays to single values when switching from OR to AND mode
- In OR mode: recipes match if they satisfy ANY active filter
- In AND mode: recipes must satisfy ALL active filters

src/lib/components/CategoryFilter.svelte

@@ -6,13 +6,21 @@
 		categories = [],
 		selected = null,
 		onChange = () => {},
-		lang = 'de'
+		lang = 'de',
+		useAndLogic = true
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
 	const label = $derived(isEnglish ? 'Category' : 'Kategorie');
 	const selectLabel = $derived(isEnglish ? 'Select category...' : 'Kategorie auswählen...');
 
+	// Convert selected to array for OR mode, keep as single value for AND mode
+	const selectedArray = $derived(
+		useAndLogic
+			? (selected ? [selected] : [])
+			: (Array.isArray(selected) ? selected : (selected ? [selected] : []))
+	);
+
 	let inputValue = $state('');
 	let dropdownOpen = $state(false);
 
@@ -37,9 +45,22 @@
 	}
 
 	function handleCategorySelect(category) {
-		onChange(category);
-		inputValue = '';
-		dropdownOpen = false;
+		if (useAndLogic) {
+			// AND mode: single select
+			onChange(category);
+			inputValue = '';
+			dropdownOpen = false;
+		} else {
+			// OR mode: multi-select toggle
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			if (currentSelected.includes(category)) {
+				const newSelected = currentSelected.filter(c => c !== category);
+				onChange(newSelected.length > 0 ? newSelected : null);
+			} else {
+				onChange([...currentSelected, category]);
+			}
+			inputValue = '';
+		}
 	}
 
 	function handleKeyDown(event) {
@@ -49,8 +70,7 @@
 			const matchedCat = categories.find(c => c.toLowerCase() === value.toLowerCase())
 				|| filteredCategories[0];
 			if (matchedCat) {
-				onChange(matchedCat);
-				inputValue = '';
+				handleCategorySelect(matchedCat);
 			}
 		} else if (event.key === 'Escape') {
 			dropdownOpen = false;
@@ -58,8 +78,14 @@
 		}
 	}
 
-	function handleRemove() {
-		onChange(null);
+	function handleRemove(category) {
+		if (useAndLogic) {
+			onChange(null);
+		} else {
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			const newSelected = currentSelected.filter(c => c !== category);
+			onChange(newSelected.length > 0 ? newSelected : null);
+		}
 	}
 </script>
 
@@ -188,7 +214,7 @@
 				{#each filteredCategories as category}
 					<TagChip
 						tag={category}
-						selected={false}
+						selected={selectedArray.includes(category)}
 						removable={false}
 						onToggle={() => handleCategorySelect(category)}
 					/>
@@ -197,15 +223,17 @@
 		{/if}
 	</div>
 
-	<!-- Selected category display below -->
-	{#if selected}
+	<!-- Selected categories display below -->
+	{#if selectedArray.length > 0}
 		<div class="selected-category">
-			<TagChip
-				tag={selected}
-				selected={true}
-				removable={true}
-				onToggle={handleRemove}
-			/>
+			{#each selectedArray as category}
+				<TagChip
+					tag={category}
+					selected={true}
+					removable={true}
+					onToggle={() => handleRemove(category)}
+				/>
+			{/each}
 		</div>
 	{/if}
 </div>

src/lib/components/FavoritesFilter.svelte

@@ -14,20 +14,20 @@
 
 	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>
 	.filter-section {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: 0.3rem;
 		max-width: 100%;
 		align-items: center;
 	}
@@ -69,6 +69,5 @@
 	<Toggle
 		bind:checked={checked}
 		label=""
-		onchange={handleChange}
 	/>
 </div>

src/lib/components/FilterPanel.svelte

@@ -5,6 +5,7 @@
 	import IconFilter from './IconFilter.svelte';
 	import SeasonFilter from './SeasonFilter.svelte';
 	import FavoritesFilter from './FavoritesFilter.svelte';
+	import LogicModeToggle from './LogicModeToggle.svelte';
 
 	let {
 		availableCategories = [],
@@ -15,13 +16,16 @@
 		selectedIcon = null,
 		selectedSeasons = [],
 		selectedFavoritesOnly = false,
+		useAndLogic = true,
 		lang = 'de',
 		isLoggedIn = false,
+		hideFavoritesFilter = false,
 		onCategoryChange = () => {},
 		onTagToggle = () => {},
 		onIconChange = () => {},
 		onSeasonChange = () => {},
-		onFavoritesToggle = () => {}
+		onFavoritesToggle = () => {},
+		onLogicModeToggle = () => {}
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
@@ -84,11 +88,11 @@
 	}
 
 	.filter-panel.with-favorites {
-		grid-template-columns: 120px 120px 1fr 160px 90px;
+		grid-template-columns: 110px 120px 120px 1fr 160px 90px;
 	}
 
 	.filter-panel.without-favorites {
-		grid-template-columns: 120px 120px 1fr 160px;
+		grid-template-columns: 110px 120px 120px 1fr 160px;
 	}
 
 	@media (max-width: 968px) {
@@ -133,12 +137,19 @@
 		<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}>
+		<LogicModeToggle
+			{useAndLogic}
+			onToggle={onLogicModeToggle}
+			{lang}
+		/>
+
 		<CategoryFilter
 			categories={availableCategories}
 			selected={selectedCategory}
 			onChange={onCategoryChange}
 			{lang}
+			{useAndLogic}
 		/>
 
 		<IconFilter
@@ -146,6 +157,7 @@
 			selected={selectedIcon}
 			onChange={onIconChange}
 			{lang}
+			{useAndLogic}
 		/>
 
 		<TagFilter
@@ -162,7 +174,7 @@
 			{months}
 		/>
 
-		{#if isLoggedIn}
+		{#if isLoggedIn && !hideFavoritesFilter}
 			<FavoritesFilter
 				enabled={selectedFavoritesOnly}
 				onToggle={onFavoritesToggle}

src/lib/components/IconFilter.svelte

@@ -6,13 +6,21 @@
 		availableIcons = [],
 		selected = null,
 		onChange = () => {},
-		lang = 'de'
+		lang = 'de',
+		useAndLogic = true
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
 	const label = 'Icon';
 	const selectLabel = $derived(isEnglish ? 'Select icon...' : 'Icon auswählen...');
 
+	// Convert selected to array for OR mode, keep as single value for AND mode
+	const selectedArray = $derived(
+		useAndLogic
+			? (selected ? [selected] : [])
+			: (Array.isArray(selected) ? selected : (selected ? [selected] : []))
+	);
+
 	let inputValue = $state('');
 	let dropdownOpen = $state(false);
 
@@ -37,9 +45,22 @@
 	}
 
 	function handleIconSelect(icon) {
-		onChange(icon);
-		inputValue = '';
-		dropdownOpen = false;
+		if (useAndLogic) {
+			// AND mode: single select
+			onChange(icon);
+			inputValue = '';
+			dropdownOpen = false;
+		} else {
+			// OR mode: multi-select toggle
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			if (currentSelected.includes(icon)) {
+				const newSelected = currentSelected.filter(i => i !== icon);
+				onChange(newSelected.length > 0 ? newSelected : null);
+			} else {
+				onChange([...currentSelected, icon]);
+			}
+			inputValue = '';
+		}
 	}
 
 	function handleKeyDown(event) {
@@ -49,8 +70,14 @@
 		}
 	}
 
-	function handleRemove() {
-		onChange(null);
+	function handleRemove(icon) {
+		if (useAndLogic) {
+			onChange(null);
+		} else {
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			const newSelected = currentSelected.filter(i => i !== icon);
+			onChange(newSelected.length > 0 ? newSelected : null);
+		}
 	}
 </script>
 
@@ -180,7 +207,7 @@
 				{#each filteredIcons as icon}
 					<TagChip
 						tag={icon}
-						selected={false}
+						selected={selectedArray.includes(icon)}
 						removable={false}
 						onToggle={() => handleIconSelect(icon)}
 					/>
@@ -189,15 +216,17 @@
 		{/if}
 	</div>
 
-	<!-- Selected icon display below -->
-	{#if selected}
+	<!-- Selected icons display below -->
+	{#if selectedArray.length > 0}
 		<div class="selected-icon">
-			<TagChip
-				tag={selected}
-				selected={true}
-				removable={true}
-				onToggle={handleRemove}
-			/>
+			{#each selectedArray as icon}
+				<TagChip
+					tag={icon}
+					selected={true}
+					removable={true}
+					onToggle={() => handleRemove(icon)}
+				/>
+			{/each}
 		</div>
 	{/if}
 </div>

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

src/lib/components/LogicModeToggle.svelte

@@ -0,0 +1,145 @@
+<script>
+	import "$lib/css/nordtheme.css";
+
+	let {
+		useAndLogic = true,
+		onToggle = () => {},
+		lang = 'de'
+	} = $props();
+
+	const isEnglish = $derived(lang === 'en');
+	const label = $derived(isEnglish ? 'Filter Mode' : 'Filter-Modus');
+	const andLabel = $derived(isEnglish ? 'AND' : 'UND');
+	const orLabel = $derived(isEnglish ? 'OR' : 'ODER');
+
+	let checked = $state(useAndLogic);
+
+	// Watch for changes to checked and call onToggle
+	$effect(() => {
+		const currentChecked = checked;
+		onToggle(currentChecked);
+	});
+</script>
+
+<style>
+	.filter-section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		max-width: 100%;
+		align-items: center;
+	}
+
+	@media (max-width: 968px) {
+		.filter-section {
+			max-width: 500px;
+			gap: 0.3rem;
+			align-items: flex-start;
+			margin: 0 auto;
+			width: 100%;
+		}
+	}
+
+	.filter-label {
+		font-size: 0.9rem;
+		color: var(--nord2);
+		font-weight: 600;
+		margin-bottom: 0.25rem;
+		text-align: center;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.filter-label {
+			color: var(--nord6);
+		}
+	}
+
+	@media (max-width: 968px) {
+		.filter-label {
+			font-size: 0.85rem;
+			text-align: left;
+		}
+	}
+
+	.toggle-container {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.85rem;
+		color: var(--nord4);
+		font-weight: 600;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.toggle-container {
+			color: var(--nord6);
+		}
+	}
+
+	.toggle-switch {
+		position: relative;
+		width: 44px;
+		height: 24px;
+		background: var(--nord10);
+		border-radius: 24px;
+		cursor: pointer;
+		transition: background 0.3s ease;
+	}
+
+	.toggle-switch.or-mode {
+		background: var(--nord13);
+	}
+
+	.toggle-knob {
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: white;
+		top: 2px;
+		left: 2px;
+		transition: transform 0.3s ease;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	.toggle-switch.or-mode .toggle-knob {
+		transform: translateX(20px);
+	}
+
+	.mode-label {
+		min-width: 40px;
+		text-align: center;
+	}
+
+	.mode-label.active {
+		color: var(--nord10);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.mode-label.active {
+			color: var(--nord8);
+		}
+	}
+
+	.toggle-switch.or-mode + .mode-label.or {
+		color: var(--nord13);
+	}
+</style>
+
+<div class="filter-section">
+	<div class="filter-label">{label}</div>
+	<div class="toggle-container">
+		<span class="mode-label" class:active={checked}>{andLabel}</span>
+		<div
+			class="toggle-switch"
+			class:or-mode={!checked}
+			onclick={() => checked = !checked}
+			role="button"
+			tabindex="0"
+			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); checked = !checked; } }}
+		>
+			<div class="toggle-knob"></div>
+		</div>
+		<span class="mode-label or" class:active={!checked}>{orLabel}</span>
+	</div>
+</div>

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({
@@ -39,6 +42,7 @@
     let selectedIcon = $state(null);
     let selectedSeasons = $state([]);
     let selectedFavoritesOnly = $state(false);
+    let useAndLogic = $state(true);
 
     // Initialize from props (for backwards compatibility)
     $effect(() => {
@@ -52,38 +56,61 @@
     // Apply non-text filters (category, tags, icon, season)
     function applyNonTextFilters(recipeList) {
         return recipeList.filter(recipe => {
-            // Category filter
-            if (selectedCategory && recipe.category !== selectedCategory) {
-                return false;
-            }
-
-            // Multi-tag AND logic: recipe must have ALL selected tags
-            if (selectedTags.length > 0) {
-                const recipeTags = recipe.tags || [];
-                if (!selectedTags.every(tag => recipeTags.includes(tag))) {
+            if (useAndLogic) {
+                // AND mode: recipe must satisfy ALL active filters
+                // Category filter (single value in AND mode)
+                if (selectedCategory && recipe.category !== selectedCategory) {
                     return false;
                 }
-            }
 
-            // Icon filter
-            if (selectedIcon && recipe.icon !== selectedIcon) {
-                return false;
-            }
+                // Multi-tag AND logic: recipe must have ALL selected tags
+                if (selectedTags.length > 0) {
+                    const recipeTags = recipe.tags || [];
+                    if (!selectedTags.every(tag => recipeTags.includes(tag))) {
+                        return false;
+                    }
+                }
 
-            // Season filter: recipe in any selected season
-            if (selectedSeasons.length > 0) {
-                const recipeSeasons = recipe.season || [];
-                if (!selectedSeasons.some(s => recipeSeasons.includes(s))) {
+                // Icon filter (single value in AND mode)
+                if (selectedIcon && recipe.icon !== selectedIcon) {
                     return false;
                 }
-            }
 
-            // Favorites filter
-            if (selectedFavoritesOnly && !recipe.isFavorite) {
-                return false;
-            }
+                // Season filter: recipe in any selected season
+                if (selectedSeasons.length > 0) {
+                    const recipeSeasons = recipe.season || [];
+                    if (!selectedSeasons.some(s => recipeSeasons.includes(s))) {
+                        return false;
+                    }
+                }
 
-            return true;
+                // Favorites filter
+                if (selectedFavoritesOnly && !recipe.isFavorite) {
+                    return false;
+                }
+
+                return true;
+            } else {
+                // OR mode: recipe must satisfy AT LEAST ONE active filter
+                const categoryArray = Array.isArray(selectedCategory) ? selectedCategory : (selectedCategory ? [selectedCategory] : []);
+                const iconArray = Array.isArray(selectedIcon) ? selectedIcon : (selectedIcon ? [selectedIcon] : []);
+
+                const hasActiveFilters = categoryArray.length > 0 || selectedTags.length > 0 || iconArray.length > 0 || selectedSeasons.length > 0 || selectedFavoritesOnly;
+
+                // If no filters active, return all
+                if (!hasActiveFilters) {
+                    return true;
+                }
+
+                // Check if recipe matches any filter
+                const matchesCategory = categoryArray.length > 0 ? categoryArray.includes(recipe.category) : false;
+                const matchesTags = selectedTags.length > 0 ? selectedTags.some(tag => (recipe.tags || []).includes(tag)) : false;
+                const matchesIcon = iconArray.length > 0 ? iconArray.includes(recipe.icon) : false;
+                const matchesSeasons = selectedSeasons.length > 0 ? selectedSeasons.some(s => (recipe.season || []).includes(s)) : false;
+                const matchesFavorites = selectedFavoritesOnly ? recipe.isFavorite : false;
+
+                return matchesCategory || matchesTags || matchesIcon || matchesSeasons || matchesFavorites;
+            }
         });
     }
 
@@ -158,10 +185,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 +196,32 @@
         } 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 handleLogicModeToggle(useAnd) {
+        useAndLogic = useAnd;
+
+        // When switching to AND mode, convert arrays to single values
+        if (useAnd) {
+            if (Array.isArray(selectedCategory)) {
+                selectedCategory = selectedCategory.length > 0 ? selectedCategory[0] : null;
+            }
+            if (Array.isArray(selectedIcon)) {
+                selectedIcon = selectedIcon.length > 0 ? selectedIcon[0] : null;
+            }
+        }
     }
 
     function handleSubmit(event) {
@@ -202,11 +238,17 @@
         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;
+            const andLogic = useAndLogic;
 
             // Set debounce timer
             const timer = setTimeout(() => {
@@ -355,12 +397,15 @@ scale: 0.8 0.8;
     {selectedIcon}
     {selectedSeasons}
     {selectedFavoritesOnly}
+    {useAndLogic}
     {lang}
     {isLoggedIn}
+    hideFavoritesFilter={favoritesOnly}
     onCategoryChange={handleCategoryChange}
     onTagToggle={handleTagToggle}
     onIconChange={handleIconChange}
     onSeasonChange={handleSeasonChange}
     onFavoritesToggle={handleFavoritesToggle}
+    onLogicModeToggle={handleLogicModeToggle}
   />
 </div>

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

src/lib/components/Toggle.svelte

@@ -30,10 +30,10 @@
 .toggle-wrapper input[type="checkbox"] {
 	appearance: none;
 	-webkit-appearance: none;
-	width: 51px;
-	height: 31px;
+	width: 44px;
+	height: 24px;
 	background: var(--nord2);
-	border-radius: 31px;
+	border-radius: 24px;
 	position: relative;
 	cursor: pointer;
 	transition: background 0.3s ease;
@@ -55,8 +55,8 @@
 .toggle-wrapper input[type="checkbox"]::before {
 	content: '';
 	position: absolute;
-	width: 27px;
-	height: 27px;
+	width: 20px;
+	height: 20px;
 	border-radius: 50%;
 	top: 2px;
 	left: 2px;

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

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

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}

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>

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}

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}

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}