frontend/src/lib/recipes/FilterChipRow.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  let { activeFilter, onFilter }: { activeFilter: string; onFilter: (filter: string) => void } = $props();
+
+  const chips = ['Alle', 'Leicht', 'Mittel', 'Schwer'];
+</script>
+
+<div class="flex gap-[8px] overflow-x-auto px-[16px] py-[12px] scrollbar-none">
+  {#each chips as label (label)}
+    <button
+      type="button"
+      aria-pressed={activeFilter === label}
+      onclick={() => onFilter(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)]'}"
+    >
+      {label}
+    </button>
+  {/each}
+</div>

frontend/src/lib/recipes/FilterChipRow.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import FilterChipRow from './FilterChipRow.svelte';
+
+describe('FilterChipRow', () => {
+	it('renders all effort filter chips', () => {
+		render(FilterChipRow, { props: { activeFilter: 'Alle', onFilter: vi.fn() } });
+		expect(screen.getByRole('button', { name: 'Alle' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Leicht' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Mittel' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Schwer' })).toBeInTheDocument();
+	});
+
+	it('marks active chip with aria-pressed=true', () => {
+		render(FilterChipRow, { props: { activeFilter: 'Leicht', onFilter: vi.fn() } });
+		expect(screen.getByRole('button', { name: 'Leicht' })).toHaveAttribute('aria-pressed', 'true');
+		expect(screen.getByRole('button', { name: 'Alle' })).toHaveAttribute('aria-pressed', 'false');
+	});
+
+	it('marks inactive chips with aria-pressed=false', () => {
+		render(FilterChipRow, { props: { activeFilter: 'Alle', onFilter: vi.fn() } });
+		expect(screen.getByRole('button', { name: 'Leicht' })).toHaveAttribute('aria-pressed', 'false');
+		expect(screen.getByRole('button', { name: 'Mittel' })).toHaveAttribute('aria-pressed', 'false');
+		expect(screen.getByRole('button', { name: 'Schwer' })).toHaveAttribute('aria-pressed', 'false');
+	});
+
+	it('calls onFilter with the chip label when clicked', async () => {
+		const user = userEvent.setup();
+		const onFilter = vi.fn();
+		render(FilterChipRow, { props: { activeFilter: 'Alle', onFilter } });
+
+		await user.click(screen.getByRole('button', { name: 'Leicht' }));
+		expect(onFilter).toHaveBeenCalledWith('Leicht');
+	});
+
+	it('calls onFilter with Alle when reset chip clicked', async () => {
+		const user = userEvent.setup();
+		const onFilter = vi.fn();
+		render(FilterChipRow, { props: { activeFilter: 'Leicht', onFilter } });
+
+		await user.click(screen.getByRole('button', { name: 'Alle' }));
+		expect(onFilter).toHaveBeenCalledWith('Alle');
+	});
+
+	it('active chip has green-tint styling', () => {
+		render(FilterChipRow, { props: { activeFilter: 'Mittel', onFilter: vi.fn() } });
+		const btn = screen.getByRole('button', { name: 'Mittel' });
+		expect(btn.className).toContain('bg-[var(--green-tint)]');
+	});
+});

frontend/src/lib/recipes/RecipeCard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { RecipeSummary } from './types';
+
+	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
+
+	let metadata = $derived(
+		[
+			recipe.cookTimeMin != null ? `${recipe.cookTimeMin} Min` : null,
+			recipe.effort ?? null
+		]
+			.filter(Boolean)
+			.join(' · ')
+	);
+</script>
+
+<a
+	href="/recipes/{recipe.id}"
+	class="block rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]"
+>
+	<div
+		data-testid="image-area"
+		class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
+	>
+		{#if recipe.heroImageUrl}
+			<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
+		{:else}
+			<div
+				data-testid="image-placeholder"
+				class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+					class="text-[var(--color-text-muted)] opacity-50"
+				>
+					<!-- plate -->
+					<circle cx="12" cy="13" r="6" />
+					<path d="M12 7V5" />
+					<!-- fork tines -->
+					<path d="M8 3v3c0 1.1.9 2 2 2h4" />
+				</svg>
+			</div>
+		{/if}
+	</div>
+
+	<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-[12px] text-[var(--color-text-muted)]">{metadata}</p>
+		{/if}
+	</div>
+</a>

frontend/src/lib/recipes/RecipeCard.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { userEvent } from '@testing-library/user-event';
+import RecipeCard from './RecipeCard.svelte';
+
+const mockRecipe = {
+	id: 'recipe-1',
+	name: 'Spaghetti Bolognese',
+	cookTimeMin: 30,
+	effort: 'Easy',
+	heroImageUrl: undefined
+};
+
+describe('RecipeCard', () => {
+	it('renders the recipe name', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
+	});
+
+	it('renders cook time when present', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		expect(screen.getByText(/30/)).toBeInTheDocument();
+	});
+
+	it('renders effort when present', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		expect(screen.getByText(/easy/i)).toBeInTheDocument();
+	});
+
+	it('shows placeholder when no heroImageUrl', () => {
+		render(RecipeCard, { props: { recipe: { ...mockRecipe, heroImageUrl: undefined } } });
+		expect(screen.queryByRole('img')).not.toBeInTheDocument();
+		expect(document.querySelector('[data-testid="image-placeholder"]')).toBeInTheDocument();
+	});
+
+	it('shows image when heroImageUrl is provided', () => {
+		render(RecipeCard, {
+			props: { recipe: { ...mockRecipe, heroImageUrl: '/uploads/test.jpg' } }
+		});
+		const img = screen.getByRole('img');
+		expect(img).toHaveAttribute('src', '/uploads/test.jpg');
+		expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese');
+	});
+
+	it('wraps in a link to the recipe detail page', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		const link = screen.getByRole('link');
+		expect(link).toHaveAttribute('href', '/recipes/recipe-1');
+	});
+
+	it('applies compact image height when compact prop is true', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, compact: true } });
+		const imageArea = document.querySelector('[data-testid="image-area"]');
+		expect(imageArea?.className).toContain('h-[64px]');
+	});
+
+	it('applies full image height when compact prop is false', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, compact: false } });
+		const imageArea = document.querySelector('[data-testid="image-area"]');
+		expect(imageArea?.className).toContain('h-[100px]');
+	});
+});

frontend/src/lib/recipes/RecipeGrid.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import RecipeCard from './RecipeCard.svelte';
+	import type { RecipeSummary } from './types';
+
+	let { recipes }: { recipes: RecipeSummary[] } = $props();
+</script>
+
+{#if recipes.length > 0}
+	<div data-testid="recipe-grid" class="grid grid-cols-2 lg:grid-cols-4 gap-[8px] lg:gap-[12px] p-[16px]">
+		{#each recipes as recipe (recipe.id)}
+			<RecipeCard {recipe} compact={true} />
+		{/each}
+	</div>
+{:else}
+	<div class="flex flex-col items-center justify-center py-[48px] px-[24px] text-center">
+		<p class="text-[var(--color-text-muted)] text-[14px] mb-[16px]">Noch keine Rezepte vorhanden.</p>
+		<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>
+{/if}

frontend/src/lib/recipes/RecipeGrid.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import RecipeGrid from './RecipeGrid.svelte';
+
+const mockRecipes = [
+	{ id: 'r1', name: 'Spaghetti Bolognese', cookTimeMin: 30, effort: 'Easy' },
+	{ id: 'r2', name: 'Chicken Curry', cookTimeMin: 45, effort: 'Medium' },
+	{ id: 'r3', name: 'Caesar Salad', cookTimeMin: 15, effort: 'Easy' }
+];
+
+describe('RecipeGrid', () => {
+	it('renders a card for each recipe', () => {
+		render(RecipeGrid, { props: { recipes: mockRecipes } });
+		expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
+		expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
+		expect(screen.getByText('Caesar Salad')).toBeInTheDocument();
+	});
+
+	it('renders 3 links for 3 recipes', () => {
+		render(RecipeGrid, { props: { recipes: mockRecipes } });
+		expect(screen.getAllByRole('link')).toHaveLength(3);
+	});
+
+	it('shows empty state when recipes array is empty', () => {
+		render(RecipeGrid, { props: { recipes: [] } });
+		expect(screen.getByText(/keine rezepte/i)).toBeInTheDocument();
+	});
+
+	it('empty state links to recipe creation', () => {
+		render(RecipeGrid, { props: { recipes: [] } });
+		const addLink = screen.getByRole('link', { name: /rezept hinzufügen/i });
+		expect(addLink).toHaveAttribute('href', '/recipes/new');
+	});
+
+	it('grid has 2-col mobile and 4-col desktop classes', () => {
+		render(RecipeGrid, { props: { recipes: mockRecipes } });
+		const grid = document.querySelector('[data-testid="recipe-grid"]');
+		expect(grid?.className).toContain('grid-cols-2');
+		expect(grid?.className).toContain('lg:grid-cols-4');
+	});
+});

frontend/src/lib/recipes/types.ts

@@ -0,0 +1,7 @@
+export type RecipeSummary = {
+	id: string;
+	name: string;
+	cookTimeMin?: number;
+	effort?: string;
+	heroImageUrl?: string;
+};

frontend/src/routes/(app)/recipes/+page.server.ts

@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { apiClient } from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	const api = apiClient(fetch);
+	const { data, error } = await api.GET('/v1/recipes', {});
+
+	if (error || !data?.data) {
+		return { recipes: [] };
+	}
+
+	return {
+		recipes: data.data.map((r) => ({
+			id: r.id!,
+			name: r.name!,
+			cookTimeMin: r.cookTimeMin,
+			effort: r.effort,
+			heroImageUrl: r.heroImageUrl
+		}))
+	};
+};

frontend/src/routes/(app)/recipes/+page.svelte

@@ -1 +1,47 @@
-<h1 class="text-2xl font-medium p-6">Rezepte</h1>
+<script lang="ts">
+	import FilterChipRow from '$lib/recipes/FilterChipRow.svelte';
+	import RecipeGrid from '$lib/recipes/RecipeGrid.svelte';
+	import type { RecipeSummary } from '$lib/recipes/types';
+
+	let { data }: { data: { recipes: RecipeSummary[] } } = $props();
+
+	let searchQuery = $state('');
+	let activeFilter = $state('Alle');
+
+	const effortMap: Record<string, string> = {
+		Leicht: 'Easy',
+		Mittel: 'Medium',
+		Schwer: 'Hard'
+	};
+
+	let filteredRecipes = $derived(
+		data.recipes
+			.filter((r) => {
+				if (activeFilter === 'Alle') return true;
+				return r.effort === effortMap[activeFilter];
+			})
+			.filter((r) => r.name.toLowerCase().includes(searchQuery.toLowerCase()))
+	);
+</script>
+
+<svelte:head>
+	<title>Rezepte — Mealplan</title>
+</svelte:head>
+
+<div class="p-6 space-y-4">
+	<div class="flex items-center justify-between">
+		<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
+		type="search"
+		placeholder="Suchen…"
+		class="input"
+		bind:value={searchQuery}
+	/>
+
+	<FilterChipRow {activeFilter} onFilter={(f) => (activeFilter = f)} />
+
+	<RecipeGrid recipes={filteredRecipes} />
+</div>

frontend/src/routes/(app)/recipes/page.server.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('$env/dynamic/private', () => ({
+	env: { BACKEND_URL: 'http://localhost:8080' }
+}));
+
+const mockGet = vi.fn();
+vi.mock('$lib/server/api', () => ({
+	apiClient: () => ({ GET: mockGet })
+}));
+
+describe('recipe library page — load', () => {
+	let load: any;
+
+	beforeEach(async () => {
+		mockGet.mockReset();
+		vi.resetModules();
+		const mod = await import('./+page.server');
+		load = mod.load;
+	});
+
+	const mockRecipes = [
+		{ id: 'r1', name: 'Spaghetti', cookTimeMin: 30, effort: 'Easy' },
+		{ id: 'r2', name: 'Curry', cookTimeMin: 45, effort: 'Medium' }
+	];
+
+	it('fetches recipes from GET /v1/recipes', async () => {
+		mockGet.mockResolvedValue({ data: { data: mockRecipes }, error: undefined });
+		await load({ fetch: vi.fn() } as any);
+		expect(mockGet).toHaveBeenCalledWith('/v1/recipes', expect.any(Object));
+	});
+
+	it('returns recipes in data', async () => {
+		mockGet.mockResolvedValue({ data: { data: mockRecipes }, error: undefined });
+		const result = await load({ fetch: vi.fn() } as any);
+		expect(result.recipes).toHaveLength(2);
+		expect(result.recipes[0].name).toBe('Spaghetti');
+	});
+
+	it('returns empty array when API fails', async () => {
+		mockGet.mockResolvedValue({ data: undefined, error: { status: 500 } });
+		const result = await load({ fetch: vi.fn() } as any);
+		expect(result.recipes).toEqual([]);
+	});
+});

frontend/src/routes/(app)/recipes/page.test.ts

@@ -0,0 +1,99 @@
+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';
+
+const mockData = {
+	recipes: [
+		{ id: 'r1', name: 'Spaghetti Bolognese', cookTimeMin: 30, effort: 'Easy' },
+		{ id: 'r2', name: 'Chicken Curry', cookTimeMin: 45, effort: 'Medium' },
+		{ id: 'r3', name: 'Gemüsesuppe', cookTimeMin: 20, effort: 'Easy' }
+	]
+};
+
+describe('recipe library page', () => {
+	it('renders all recipe cards initially', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByText('Spaghetti Bolognese')).toBeInTheDocument();
+		expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
+		expect(screen.getByText('Gemüsesuppe')).toBeInTheDocument();
+	});
+
+	it('renders the page title', () => {
+		render(Page, { props: { data: mockData } });
+		expect(document.title).toBe('Rezepte — Mealplan');
+	});
+
+	it('renders a link to add a new recipe', () => {
+		render(Page, { props: { data: mockData } });
+		const addLink = screen.getByRole('link', { name: /rezept hinzufügen/i });
+		expect(addLink).toHaveAttribute('href', '/recipes/new');
+	});
+
+	it('filters recipes by search term', async () => {
+		const user = userEvent.setup();
+		render(Page, { props: { data: mockData } });
+
+		const searchInput = screen.getByPlaceholderText(/suchen/i);
+		await user.type(searchInput, 'Curry');
+
+		expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
+		expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
+	});
+
+	it('filters recipes by effort chip', async () => {
+		const user = userEvent.setup();
+		render(Page, { props: { data: mockData } });
+
+		await user.click(screen.getByRole('button', { name: 'Mittel' }));
+
+		expect(screen.getByText('Chicken Curry')).toBeInTheDocument();
+		expect(screen.queryByText('Spaghetti Bolognese')).not.toBeInTheDocument();
+	});
+
+	it('shows empty state when no recipes match search', async () => {
+		const user = userEvent.setup();
+		render(Page, { props: { data: mockData } });
+
+		const searchInput = screen.getByPlaceholderText(/suchen/i);
+		await user.type(searchInput, 'xyznotexist');
+
+		expect(screen.getByText(/keine rezepte/i)).toBeInTheDocument();
+	});
+
+	it('renders filter chips', () => {
+		render(Page, { props: { data: mockData } });
+		expect(screen.getByRole('button', { name: 'Alle' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Leicht' })).toBeInTheDocument();
+	});
+
+	it('renders empty state page when no recipes at all', () => {
+		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();
+	});
+});