fix(recipes): address B2 review — tags, sort, edit link, types, a11y, tests

- RecipeHero: render tag pills, min-h-[200px/240px], fix back link styling, remove font-[400]
- IngredientList: sort by sortOrder ascending
- StepList: aria-hidden on step circles
- types.ts: add Tag, Ingredient, Step, RecipeDetail shared types
- +page.svelte: add Edit link → /recipes/[id]/edit (desktop topbar)
- Tests: tag pills, sortOrder sort, edit link, image variant, 403-as-404 documented

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/recipes/IngredientList.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	type Ingredient = {
-		ingredientId?: string;
-		name?: string;
-		quantity?: number;
-		unit?: string;
-		sortOrder?: number;
-	};
+	import type { Ingredient } from './types';
 
 	let { ingredients }: { ingredients: Ingredient[] } = $props();
+
+	const sortedIngredients = $derived(
+		[...ingredients].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+	);
 </script>
 
 <section>
@@ -18,7 +16,7 @@
 	</h2>
 
 	<ul>
-		{#each ingredients as ingredient (ingredient.ingredientId ?? ingredient.name)}
+		{#each sortedIngredients as ingredient (ingredient.ingredientId ?? ingredient.name)}
 			<li class="flex items-baseline gap-[12px] py-[8px] border-b border-[var(--color-border)] last:border-b-0">
 				{#if ingredient.quantity != null}
 					<span class="text-[13px] font-medium text-[var(--color-text)] w-[80px] shrink-0">

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

@@ -41,4 +41,17 @@ describe('IngredientList', () => {
 		render(IngredientList, { props: { ingredients: [] } });
 		expect(screen.getByText(/zutaten/i)).toBeInTheDocument();
 	});
+
+	it('renders ingredients sorted by sortOrder', () => {
+		const unsorted = [
+			{ ingredientId: 'i3', name: 'Oregano', quantity: 1, unit: 'TL', sortOrder: 3 },
+			{ ingredientId: 'i1', name: 'Spaghetti', quantity: 200, unit: 'g', sortOrder: 1 },
+			{ ingredientId: 'i2', name: 'Hackfleisch', quantity: 400, unit: 'g', sortOrder: 2 }
+		];
+		render(IngredientList, { props: { ingredients: unsorted } });
+		const spans = document.querySelectorAll('li span:last-child');
+		expect(spans[0].textContent).toBe('Spaghetti');
+		expect(spans[1].textContent).toBe('Hackfleisch');
+		expect(spans[2].textContent).toBe('Oregano');
+	});
 });

frontend/src/lib/recipes/RecipeHero.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	type RecipeHeroProps = {
-		recipe: {
-			id: string;
-			name: string;
-			serves?: number;
-			cookTimeMin?: number;
-			effort?: string;
-			heroImageUrl?: string;
-			tags: { id: string; name: string; tagType?: string }[];
-		};
+	import type { Tag } from './types';
+
+	type RecipeHeroData = {
+		id: string;
+		name: string;
+		serves?: number;
+		cookTimeMin?: number;
+		effort?: string;
+		heroImageUrl?: string;
+		tags: Tag[];
 	};
 
-	let { recipe }: RecipeHeroProps = $props();
+	let { recipe }: { recipe: RecipeHeroData } = $props();
 
 	let hasImage = $derived(!!recipe.heroImageUrl);
 
@@ -30,7 +30,7 @@
 
 <div
 	data-testid="recipe-hero"
-	class="{hasImage
+	class="min-h-[200px] md:min-h-[240px] {hasImage
 		? 'relative text-white'
 		: 'bg-[var(--green-tint)] text-[var(--color-text)]'} p-[24px] md:p-[32px]"
 >
@@ -44,9 +44,9 @@
 	{/if}
 
 	<div class="relative">
-		<a href="/recipes" class="text-sm">← Zurück</a>
+		<a href="/recipes" class="text-[13px] font-sans font-medium text-[var(--color-text-muted)]">← Zurück</a>
 
-		<h1 class="font-[var(--font-display)] text-[24px] md:text-[28px] font-[400] mt-[8px]">
+		<h1 class="font-[var(--font-display)] text-[24px] md:text-[28px] mt-[8px]">
 			{recipe.name}
 		</h1>
 
@@ -60,6 +60,9 @@
 			{#if recipe.serves != null}
 				<span class={pillBase}>{recipe.serves} Port.</span>
 			{/if}
+			{#each recipe.tags as tag (tag.id)}
+				<span class={pillBase}>{tag.name}</span>
+			{/each}
 		</div>
 
 		<a href="/cook/{recipe.id}" class={cookBtnClass}>Jetzt kochen</a>

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

@@ -63,4 +63,25 @@ describe('RecipeHero', () => {
 		render(RecipeHero, { props: { recipe: baseRecipe } });
 		expect(screen.queryByRole('img')).not.toBeInTheDocument();
 	});
+
+	it('renders tag pills', () => {
+		render(RecipeHero, {
+			props: {
+				recipe: {
+					...baseRecipe,
+					tags: [
+						{ id: 't1', name: 'Pasta' },
+						{ id: 't2', name: 'Italienisch' }
+					]
+				}
+			}
+		});
+		expect(screen.getByText('Pasta')).toBeInTheDocument();
+		expect(screen.getByText('Italienisch')).toBeInTheDocument();
+	});
+
+	it('renders no tag pills when tags array is empty', () => {
+		render(RecipeHero, { props: { recipe: { ...baseRecipe, tags: [] } } });
+		expect(screen.queryByText('Pasta')).not.toBeInTheDocument();
+	});
 });

frontend/src/lib/recipes/StepList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	type Step = { stepNumber?: number; instruction?: string };
+	import type { Step } from './types';
 
 	let { steps }: { steps: Step[] } = $props();
 
@@ -19,6 +19,7 @@
 			<li class="flex gap-[16px] items-start mb-[20px]">
 				<div
 					data-testid="step-circle"
+					aria-hidden="true"
 					class="w-[28px] h-[28px] rounded-full bg-[var(--green-dark)] text-white flex items-center justify-center shrink-0 font-sans text-[13px] font-medium"
 				>
 					{step.stepNumber}

frontend/src/lib/recipes/types.ts

@@ -5,3 +5,34 @@ export type RecipeSummary = {
 	effort?: string;
 	heroImageUrl?: string;
 };
+
+export type Tag = {
+	id: string;
+	name: string;
+	tagType?: string;
+};
+
+export type Ingredient = {
+	ingredientId?: string;
+	name?: string;
+	quantity?: number;
+	unit?: string;
+	sortOrder?: number;
+};
+
+export type Step = {
+	stepNumber?: number;
+	instruction?: string;
+};
+
+export type RecipeDetail = {
+	id: string;
+	name: string;
+	serves?: number;
+	cookTimeMin?: number;
+	effort?: string;
+	heroImageUrl?: string;
+	ingredients: Ingredient[];
+	steps: Step[];
+	tags: Tag[];
+};