From 3215c87fad6cb8cd8e3d52275bfb2ee7db067c77 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 26 Dec 2025 21:47:34 +0100
Subject: [PATCH] make search component bilingual

---
 src/lib/components/IconLayout.svelte          |  3 +-
 src/lib/components/Search.svelte              | 31 ++++++++++---------
 src/lib/components/SeasonLayout.svelte        |  3 +-
 src/routes/[recipeLang]/+page.svelte          |  2 +-
 .../category/[category]/+page.svelte          |  2 +-
 .../[recipeLang]/favorites/+page.svelte       |  2 +-
 .../[recipeLang]/icon/[icon]/+page.svelte     |  2 +-
 src/routes/[recipeLang]/search/+page.svelte   |  1 +
 src/routes/[recipeLang]/season/+page.svelte   |  2 +-
 .../[recipeLang]/season/[month]/+page.svelte  |  2 +-
 .../[recipeLang]/tag/[tag]/+page.svelte       |  2 +-
 11 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/IconLayout.svelte b/src/lib/components/IconLayout.svelte
index 6f4d560..a109644 100644
--- a/src/lib/components/IconLayout.svelte
+++ b/src/lib/components/IconLayout.svelte
@@ -5,6 +5,7 @@
     export let icons
     export let active_icon
     export let routePrefix = '/rezepte'
+    export let lang = 'de'
 </script>
 
 <style>
@@ -73,7 +74,7 @@
 {/each}
 </div>
 <section>
-<Search icon={active_icon}></Search>
+<Search icon={active_icon} {lang}></Search>
 </section>
 <section>
 <slot name=recipes></slot>
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 02424a0..3059d3a 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -2,16 +2,19 @@
     import {onMount} from "svelte";
     import { browser } from '$app/environment';
     import "$lib/css/nordtheme.css";
-    
+
     // Filter props for different contexts
-    export let category = null;
-    export let tag = null;
-    export let icon = null;
-    export let season = null;
-    export let favoritesOnly = false;
-    export let searchResultsUrl = '/rezepte/search';
-    
-    let searchQuery = '';
+    let { category = null, tag = null, icon = null, season = null, favoritesOnly = false, lang = 'de' } = $props();
+
+    const isEnglish = $derived(lang === 'en');
+    const searchResultsUrl = $derived(isEnglish ? '/recipes/search' : '/rezepte/search');
+    const labels = $derived({
+        placeholder: isEnglish ? 'Search...' : 'Suche...',
+        searchTitle: isEnglish ? 'Search' : 'Suchen',
+        clearTitle: isEnglish ? 'Clear search' : 'Sucheintrag löschen'
+    });
+
+    let searchQuery = $state('');
     
     // Build search URL with current filters
     function buildSearchUrl(query) {
@@ -190,15 +193,15 @@ scale: 0.8 0.8;
   {#if season}<input type="hidden" name="season" value={season} />{/if}
   {#if favoritesOnly}<input type="hidden" name="favorites" value="true" />{/if}
   
-  <input type="text" id="search" name="q" placeholder="Suche..." bind:value={searchQuery}>
-  
+  <input type="text" id="search" name="q" placeholder={labels.placeholder} bind:value={searchQuery}>
+
   <!-- Submit button (visible by default, hidden when JS loads) -->
   <button type="submit" id="submit-search" class="search-button" style="display: flex;">
-	  <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" style="width: 100%; height: 100%;"><title>Suchen</title><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"></path></svg>
+	  <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" style="width: 100%; height: 100%;"><title>{labels.searchTitle}</title><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"></path></svg>
   </button>
-  
+
   <!-- Clear button (hidden by default, shown when JS loads) -->
   <button type="button" id="clear-search" class="search-button js-only" style="display: none;" on:click={clearSearch}>
-	  <svg  xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Sucheintrag löschen</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+	  <svg  xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>{labels.clearTitle}</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
   </button>
 </form>
diff --git a/src/lib/components/SeasonLayout.svelte b/src/lib/components/SeasonLayout.svelte
index a60f382..099943f 100644
--- a/src/lib/components/SeasonLayout.svelte
+++ b/src/lib/components/SeasonLayout.svelte
@@ -6,6 +6,7 @@
     let month : number;
     export let active_index;
     export let routePrefix = '/rezepte';
+    export let lang = 'de';
 
 </script>
 <style>
@@ -42,7 +43,7 @@ a.month:hover,
 {/each}
 </div>
 <section>
-<Search season={active_index + 1}></Search>
+<Search season={active_index + 1} {lang}></Search>
 </section>
 <section>
 <slot name=recipes></slot>
diff --git a/src/routes/[recipeLang]/+page.svelte b/src/routes/[recipeLang]/+page.svelte
index 8e775a0..25710bb 100644
--- a/src/routes/[recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang]/+page.svelte
@@ -49,7 +49,7 @@ h1{
 <h1>{labels.title}</h1>
 <p class=subheading>{labels.subheading}</p>
 
-<Search></Search>
+<Search lang={data.lang}></Search>
 
 <MediaScroller title={labels.inSeason}>
 {#each data.season as recipe}
diff --git a/src/routes/[recipeLang]/category/[category]/+page.svelte b/src/routes/[recipeLang]/category/[category]/+page.svelte
index c2a366d..41178ae 100644
--- a/src/routes/[recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang]/category/[category]/+page.svelte
@@ -17,7 +17,7 @@
 	}
 </style>
 <h1>{label} <q>{data.category}</q>:</h1>
-<Search category={data.category}></Search>
+<Search category={data.category} lang={data.lang}></Search>
 <section>
 <Recipes>
 	{#each rand_array(data.recipes) as recipe}
diff --git a/src/routes/[recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang]/favorites/+page.svelte
index 6ba20fc..bcb9c56 100644
--- a/src/routes/[recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang]/favorites/+page.svelte
@@ -61,7 +61,7 @@ h1{
     {/if}
 </p>
 
-<Search favoritesOnly={true}></Search>
+<Search favoritesOnly={true} lang={data.lang}></Search>
 
 {#if data.error}
     <p class="empty-state">{labels.errorLoading} {data.error}</p>
diff --git a/src/routes/[recipeLang]/icon/[icon]/+page.svelte b/src/routes/[recipeLang]/icon/[icon]/+page.svelte
index 79b0058..90c0fa3 100644
--- a/src/routes/[recipeLang]/icon/[icon]/+page.svelte
+++ b/src/routes/[recipeLang]/icon/[icon]/+page.svelte
@@ -8,7 +8,7 @@
     let { data }: { data: PageData } = $props();
     import { rand_array } from '$lib/js/randomize';
 </script>
-<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}">
+<IconLayout icons={data.icons} active_icon={data.icon} routePrefix="/{data.recipeLang}" lang={data.lang}>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
diff --git a/src/routes/[recipeLang]/search/+page.svelte b/src/routes/[recipeLang]/search/+page.svelte
index 3bd4056..40d0943 100644
--- a/src/routes/[recipeLang]/search/+page.svelte
+++ b/src/routes/[recipeLang]/search/+page.svelte
@@ -70,6 +70,7 @@
     icon={data.filters.icon}
     season={data.filters.season}
     favoritesOnly={data.filters.favoritesOnly}
+    lang={data.lang}
 />
 
 {#if data.error}
diff --git a/src/routes/[recipeLang]/season/+page.svelte b/src/routes/[recipeLang]/season/+page.svelte
index 0fe72b3..dc3fa39 100644
--- a/src/routes/[recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang]/season/+page.svelte
@@ -16,7 +16,7 @@
         : ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
 </script>
 
-<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}">
+<SeasonLayout active_index={current_month-1} {months} routePrefix="/{data.recipeLang}" lang={data.lang}>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
diff --git a/src/routes/[recipeLang]/season/[month]/+page.svelte b/src/routes/[recipeLang]/season/[month]/+page.svelte
index 7410a4c..7d74b07 100644
--- a/src/routes/[recipeLang]/season/[month]/+page.svelte
+++ b/src/routes/[recipeLang]/season/[month]/+page.svelte
@@ -14,7 +14,7 @@
 
     import { rand_array } from '$lib/js/randomize';
 </script>
-<SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}">
+<SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang}>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
diff --git a/src/routes/[recipeLang]/tag/[tag]/+page.svelte b/src/routes/[recipeLang]/tag/[tag]/+page.svelte
index 52895f8..30a539d 100644
--- a/src/routes/[recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang]/tag/[tag]/+page.svelte
@@ -17,7 +17,7 @@
 	}
 </style>
 <h1>{label} <q>{data.tag}</q>:</h1>
-<Search tag={data.tag}></Search>
+<Search tag={data.tag} lang={data.lang}></Search>
 <section>
 <Recipes>
 	{#each rand_array(data.recipes) as recipe}