From c53aee712385f3e9b6da7e81a16ac6ae8aea26be Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 16 Feb 2026 18:46:59 +0100
Subject: [PATCH] recipes: replace Card with CompactCard + CSS grid on all
 sub-pages

Migrate all recipe sub-pages from the old fixed-size Card component
inside flex-wrap Recipes wrapper to CompactCard with responsive CSS
grid for visual consistency with the main recipes page.
---
 src/app.css                                   | 25 +++++++++
 src/lib/components/recipes/CompactCard.svelte |  3 +-
 .../components/recipes/RecipeEditor.svelte    |  1 -
 .../[recipeLang=recipeLang]/+page.svelte      | 21 -------
 .../admin/untranslated/+page.svelte           | 56 +++++++++++++++----
 .../category/[category]/+page.svelte          | 13 ++---
 .../favorites/+page.svelte                    | 11 ++--
 .../[recipeLang=recipeLang]/icon/+page.svelte |  5 --
 .../icon/[icon]/+page.svelte                  | 13 ++---
 .../search/+page.svelte                       | 11 ++--
 .../season/+page.svelte                       | 13 ++---
 .../season/[month]/+page.svelte               | 13 ++---
 .../tag/[tag]/+page.svelte                    | 13 ++---
 13 files changed, 107 insertions(+), 91 deletions(-)

diff --git a/src/app.css b/src/app.css
index c5039b5..d661373 100644
--- a/src/app.css
+++ b/src/app.css
@@ -344,3 +344,28 @@ a:focus-visible {
 		color: var(--nord0);
 	}
 }
+
+/* ============================================
+   RECIPE GRID
+   Responsive card grid used across recipe pages
+   ============================================ */
+
+.recipe-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 1.5em;
+	padding: 0 1.5em;
+	max-width: 1400px;
+	margin: 0 auto 2em;
+}
+@media (min-width: 600px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	}
+}
+@media (min-width: 1024px) {
+	.recipe-grid {
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		gap: 1.8em;
+	}
+}
diff --git a/src/lib/components/recipes/CompactCard.svelte b/src/lib/components/recipes/CompactCard.svelte
index b78b713..53bafc2 100644
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -4,6 +4,7 @@
 	let {
 		recipe,
 		current_month = 0,
+		icon_override = false,
 		isFavorite = false,
 		showFavoriteIndicator = false,
 		loading_strat = "lazy",
@@ -19,7 +20,7 @@
 		recipe.images?.[0]?.alt || recipe.name
 	);
 
-	const isInSeason = $derived(recipe.season?.includes(current_month));
+	const isInSeason = $derived(icon_override || recipe.season?.includes(current_month));
 </script>
 <style>
 .compact-card {
diff --git a/src/lib/components/recipes/RecipeEditor.svelte b/src/lib/components/recipes/RecipeEditor.svelte
index efd7635..5d2737e 100644
--- a/src/lib/components/recipes/RecipeEditor.svelte
+++ b/src/lib/components/recipes/RecipeEditor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CardAdd from '$lib/components/recipes/CardAdd.svelte';
     	import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    	import Card from '$lib/components/recipes/Card.svelte';
     	import Search from '$lib/components/recipes/Search.svelte';
 	import SeasonSelect from '$lib/components/recipes/SeasonSelect.svelte';
 	import CreateIngredientList from '$lib/components/recipes/CreateIngredientList.svelte';
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index e60c148..246d194 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -306,27 +306,6 @@
 	z-index: 10;
 }
 
-/* ─── Recipe grid ─── */
-.recipe-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: 1.5em;
-	padding: 0 1.5em;
-	max-width: 1400px;
-	margin: 0 auto 2em;
-}
-@media (min-width: 600px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-	}
-}
-@media (min-width: 1024px) {
-	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		gap: 1.8em;
-	}
-}
-
 .sentinel {
 	height: 1px;
 }
diff --git a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
index c26a509..bd9c093 100644
--- a/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/admin/untranslated/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import Recipes from '$lib/components/recipes/Recipes.svelte';
-	import Card from '$lib/components/recipes/Card.svelte';
+	import CompactCard from '$lib/components/recipes/CompactCard.svelte';
 
 	let { data } = $props<{ data: PageData }>();
 	let current_month = new Date().getMonth() + 1;
@@ -79,6 +78,31 @@ h1 {
 		color: var(--nord2);
 	}
 }
+.card-wrapper {
+	position: relative;
+}
+.translation-badge {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	padding: 0.4rem 0.8rem;
+	border-radius: 4px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	z-index: 3;
+	color: var(--nord0);
+	pointer-events: none;
+}
+.translation-badge.none {
+	background-color: var(--nord14);
+}
+.translation-badge.pending {
+	background-color: var(--nord13);
+}
+.translation-badge.needs_update {
+	background-color: var(--nord12);
+}
 .empty-state {
 	text-align: center;
 	margin-top: 3rem;
@@ -121,16 +145,26 @@ h1 {
 		</div>
 	</div>
 
-	<Recipes>
-		{#each data.untranslated as recipe}
-			<Card
-				{recipe}
-				{current_month}
-				routePrefix="/{data.recipeLang}"
-				translationStatus={recipe.translationStatus}
-			></Card>
+	<div class="recipe-grid">
+		{#each data.untranslated as recipe (recipe._id)}
+			<div class="card-wrapper">
+				<CompactCard
+					{recipe}
+					{current_month}
+					routePrefix="/{data.recipeLang}"
+				/>
+				<div class="translation-badge {recipe.translationStatus || 'none'}">
+					{#if recipe.translationStatus === 'pending'}
+						Freigabe ausstehend
+					{:else if recipe.translationStatus === 'needs_update'}
+						Aktualisierung erforderlich
+					{:else}
+						Keine Übersetzung
+					{/if}
+				</div>
+			</div>
 		{/each}
-	</Recipes>
+	</div>
 {:else}
 	<div class="empty-state">
 		<p>Alle Rezepte sind übersetzt!</p>
diff --git a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
index 5f1bdfc..b7095c5 100644
--- a/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/[category]/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     import { rand_array } from '$lib/js/randomize';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
 
@@ -28,10 +27,8 @@
 
 <h1>{label} <q>{data.category}</q>:</h1>
 <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}
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+<div class="recipe-grid">
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
-</Recipes>
-</section>
+</div>
diff --git a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
index 5927dc0..ae3285d 100644
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
 
@@ -69,11 +68,11 @@ h1{
 {#if data.error}
     <p class="empty-state">{labels.errorLoading} {data.error}</p>
 {:else if filteredFavorites.length > 0}
-    <Recipes>
-        {#each filteredFavorites as recipe}
-            <Card {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+    <div class="recipe-grid">
+        {#each filteredFavorites as recipe (recipe._id)}
+            <CompactCard {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
         {/each}
-    </Recipes>
+    </div>
 {:else if data.favorites.length > 0}
     <div class="empty-state">
         <p>{isEnglish ? 'No matching favorites found.' : 'Keine passenden Favoriten gefunden.'}</p>
diff --git a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
index 30f044e..fa94b28 100644
--- a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
     let { data } = $props<{ data: PageData }>();
 
     const isEnglish = $derived(data.lang === 'en');
diff --git a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
index babe0b5..45dd175 100644
--- a/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/[icon]/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import IconLayout from '$lib/components/recipes/IconLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     let { data } = $props<{ data: PageData }>();
     import { rand_array } from '$lib/js/randomize';
 
@@ -36,10 +33,10 @@
 
 <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}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </IconLayout>
diff --git a/src/routes/[recipeLang=recipeLang]/search/+page.svelte b/src/routes/[recipeLang=recipeLang]/search/+page.svelte
index 790f150..aa3c098 100644
--- a/src/routes/[recipeLang=recipeLang]/search/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/search/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     let { data } = $props<{ data: PageData }>();
     let current_month = new Date().getMonth() + 1;
 
@@ -115,11 +114,11 @@
 {/if}
 
 {#if displayedRecipes.length > 0}
-    <Recipes>
-        {#each displayedRecipes as recipe}
-            <Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}"></Card>
+    <div class="recipe-grid">
+        {#each displayedRecipes as recipe (recipe._id)}
+            <CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
         {/each}
-    </Recipes>
+    </div>
 {:else if (data.query || hasActiveSearch) && !data.error}
     <div class="search-info">
         <p>{labels.noResults}</p>
diff --git a/src/routes/[recipeLang=recipeLang]/season/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
index 52e8d04..7b06f9f 100644
--- a/src/routes/[recipeLang=recipeLang]/season/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte'
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     let { data } = $props<{ data: PageData }>();
     let current_month = new Date().getMonth() + 1
     import { rand_array } from '$lib/js/randomize';
@@ -43,10 +40,10 @@
 
 <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}
-				<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>
diff --git a/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte b/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
index f83ca13..e686362 100644
--- a/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/season/[month]/+page.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
     import SeasonLayout from '$lib/components/recipes/SeasonLayout.svelte';
-    import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
-    import Search from '$lib/components/recipes/Search.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     let { data } = $props<{ data: PageData }>();
 
     const isEnglish = $derived(data.lang === 'en');
@@ -41,10 +38,10 @@
 
 <SeasonLayout active_index={data.month -1} {months} routePrefix="/{data.recipeLang}" lang={data.lang} recipes={data.season} onSearchResults={handleSearchResults}>
 	{#snippet recipesSlot()}
-		<Recipes>
-			{#each rand_array(filteredRecipes) as recipe}
-				<Card {recipe} icon_override=true isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+		<div class="recipe-grid">
+			{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+				<CompactCard {recipe} icon_override={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 			{/each}
-		</Recipes>
+		</div>
 	{/snippet}
 </SeasonLayout>
diff --git a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
index aa003dd..6ba1699 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/[tag]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    import Recipes from '$lib/components/recipes/Recipes.svelte';
-    import Card from '$lib/components/recipes/Card.svelte';
+    import CompactCard from '$lib/components/recipes/CompactCard.svelte';
     import Search from '$lib/components/recipes/Search.svelte';
     import { rand_array } from '$lib/js/randomize';
     import { createSearchFilter } from '$lib/js/searchFilter.svelte';
@@ -28,10 +27,8 @@
 
 <h1>{label} <q>{data.tag}</q>:</h1>
 <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}
-		<Card {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
+<div class="recipe-grid">
+	{#each rand_array(filteredRecipes) as recipe (recipe._id)}
+		<CompactCard {recipe} {current_month} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}" />
 	{/each}
-	</Recipes>
-</section>
+</div>