From 9bb6293d9f2a747f7a2302f00a2e5a93403ff197 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 3 Apr 2026 09:53:32 +0200
Subject: [PATCH] =?UTF-8?q?fix(recipes):=20address=20review=20feedback=20?=
 =?UTF-8?q?=E2=80=94=20shared=20type,=20design=20system=20tokens,=20test?=
 =?UTF-8?q?=20coverage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract RecipeSummary type to $lib/recipes/types.ts (was duplicated in 3 files)
- Fix +page.svelte header link: replace Skeleton UI classes with design system tokens
- Fix h1: use font-[var(--font-display)] and correct size
- Fix FilterChipRow: text-[11px] → text-[13px] + tracking-[0.04em] per design system
- Fix RecipeCard metadata: text-[11px] → text-[12px] for readability
- Remove unused imports (vi, beforeEach, afterEach) from page.test.ts
- Add combined search + effort filter test
- Add reset-to-Alle filter test

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/recipes/FilterChipRow.svelte |  2 +-
 frontend/src/lib/recipes/RecipeCard.svelte    | 10 ++-----
 frontend/src/lib/recipes/RecipeGrid.svelte    |  3 +--
 frontend/src/lib/recipes/types.ts             |  7 +++++
 .../src/routes/(app)/recipes/+page.svelte     | 13 +++------
 .../src/routes/(app)/recipes/page.test.ts     | 27 ++++++++++++++++++-
 6 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/lib/recipes/types.ts

diff --git a/frontend/src/lib/recipes/FilterChipRow.svelte b/frontend/src/lib/recipes/FilterChipRow.svelte
index 571e48b..bac6cae 100644
--- a/frontend/src/lib/recipes/FilterChipRow.svelte
+++ b/frontend/src/lib/recipes/FilterChipRow.svelte
@@ -10,7 +10,7 @@
       type="button"
       aria-pressed={activeFilter === label}
       onclick={() => onFilter(label)}
-      class="font-sans text-[11px] font-medium px-[14px] py-[5px] rounded-[12px] border cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)] {activeFilter === label
+      class="font-sans text-[13px] font-medium tracking-[0.04em] px-[14px] py-[5px] rounded-[12px] border cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)] {activeFilter === label
         ? 'bg-[var(--green-tint)] text-[var(--green-dark)] border-[var(--green-light)]'
         : 'bg-[var(--color-surface)] text-[var(--color-text-muted)] border-[var(--color-border)]'}"
     >
diff --git a/frontend/src/lib/recipes/RecipeCard.svelte b/frontend/src/lib/recipes/RecipeCard.svelte
index 97f9d81..8140373 100644
--- a/frontend/src/lib/recipes/RecipeCard.svelte
+++ b/frontend/src/lib/recipes/RecipeCard.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-	type RecipeSummary = {
-		id: string;
-		name: string;
-		cookTimeMin?: number;
-		effort?: string;
-		heroImageUrl?: string;
-	};
+	import type { RecipeSummary } from './types';
 
 	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
 
@@ -60,7 +54,7 @@
 	<div class="px-2 py-1.5">
 		<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
 		{#if metadata}
-			<p class="text-[11px] text-[var(--color-text-muted)]">{metadata}</p>
+			<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
 		{/if}
 	</div>
 </a>
diff --git a/frontend/src/lib/recipes/RecipeGrid.svelte b/frontend/src/lib/recipes/RecipeGrid.svelte
index ac713ff..1c35c17 100644
--- a/frontend/src/lib/recipes/RecipeGrid.svelte
+++ b/frontend/src/lib/recipes/RecipeGrid.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import RecipeCard from './RecipeCard.svelte';
-
-	type RecipeSummary = { id: string; name: string; cookTimeMin?: number; effort?: string; heroImageUrl?: string };
+	import type { RecipeSummary } from './types';
 
 	let { recipes }: { recipes: RecipeSummary[] } = $props();
 </script>
diff --git a/frontend/src/lib/recipes/types.ts b/frontend/src/lib/recipes/types.ts
new file mode 100644
index 0000000..9d8284b
--- /dev/null
+++ b/frontend/src/lib/recipes/types.ts
@@ -0,0 +1,7 @@
+export type RecipeSummary = {
+	id: string;
+	name: string;
+	cookTimeMin?: number;
+	effort?: string;
+	heroImageUrl?: string;
+};
diff --git a/frontend/src/routes/(app)/recipes/+page.svelte b/frontend/src/routes/(app)/recipes/+page.svelte
index 36632de..3b7a089 100644
--- a/frontend/src/routes/(app)/recipes/+page.svelte
+++ b/frontend/src/routes/(app)/recipes/+page.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
 	import FilterChipRow from '$lib/recipes/FilterChipRow.svelte';
 	import RecipeGrid from '$lib/recipes/RecipeGrid.svelte';
-
-	type RecipeSummary = {
-		id: string;
-		name: string;
-		cookTimeMin?: number;
-		effort?: string;
-		heroImageUrl?: string;
-	};
+	import type { RecipeSummary } from '$lib/recipes/types';
 
 	let { data }: { data: { recipes: RecipeSummary[] } } = $props();
 
@@ -37,8 +30,8 @@
 
 <div class="p-6 space-y-4">
 	<div class="flex items-center justify-between">
-		<h1 class="text-2xl font-medium">Rezepte</h1>
-		<a href="/recipes/new" class="btn variant-filled-primary">Rezept hinzufügen</a>
+		<h1 class="font-[var(--font-display)] text-[28px] font-medium text-[var(--color-text)]">Rezepte</h1>
+		<a href="/recipes/new" class="font-sans text-[13px] font-medium tracking-[0.04em] rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-white">Rezept hinzufügen</a>
 	</div>
 
 	<input
diff --git a/frontend/src/routes/(app)/recipes/page.test.ts b/frontend/src/routes/(app)/recipes/page.test.ts
index b55545e..8fe49fc 100644
--- a/frontend/src/routes/(app)/recipes/page.test.ts
+++ b/frontend/src/routes/(app)/recipes/page.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import { userEvent } from '@testing-library/user-event';
 import Page from './+page.svelte';
@@ -71,4 +71,29 @@ describe('recipe library page', () => {
 		render(Page, { props: { data: { recipes: [] } } });
 		expect(screen.getByText(/keine rezepte/i)).toBeInTheDocument();
 	});
+
+	it('applies search and effort filter together', async () => {
+		const user = userEvent.setup();
+		render(Page, { props: { data: mockData } });
+
+		await user.click(screen.getByRole('button', { name: 'Leicht' }));
+		const searchInput = screen.getByPlaceholderText(/suchen/i);
+		await user.type(searchInput, 'Gemüse');
+
+		expect(screen.getByText('Gemüsesuppe')).toBeInTheDocument();
+		expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
+		expect(screen.queryByText('Chicken Curry')).not.toBeInTheDocument();
+	});
+
+	it('resets to all recipes when Alle chip is clicked', async () => {
+		const user = userEvent.setup();
+		render(Page, { props: { data: mockData } });
+
+		await user.click(screen.getByRole('button', { name: 'Mittel' }));
+		expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
+
+		await user.click(screen.getByRole('button', { name: 'Alle' }));
+		expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
+		expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
+	});
 });