feat(recipes): add C5 quick action buttons to RecipeCard

Always-visible "Jetzt kochen" and "Zur Woche +" buttons shown
when onplan prop is provided. Restructured card to avoid nested
interactive elements.

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

frontend/src/lib/recipes/RecipeCard.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { RecipeSummary } from './types';
 
-	let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
+	let { recipe, compact = false, onplan }: {
+		recipe: RecipeSummary;
+		compact?: boolean;
+		onplan?: ((recipeId: string, recipeName: string) => void);
+	} = $props();
 
 	let metadata = $derived(
 		[
@@ -13,10 +17,8 @@
 	);
 </script>
 
-<a
+<div class="rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]">
-	href="/recipes/{recipe.id}"
+	<a href="/recipes/{recipe.id}" class="block">
-	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]'}"
@@ -57,4 +59,19 @@
 				<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
 			{/if}
 		</div>
-</a>
+	</a>
+
+	{#if onplan}
+		<div class="flex gap-[5px] px-2 pb-2">
+			<a
+				href="/cook/{recipe.id}"
+				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green)] text-white"
+			>🍳 Jetzt kochen</a>
+			<button
+				type="button"
+				onclick={() => onplan!(recipe.id, recipe.name)}
+				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green-tint)] text-[var(--green-dark)] border border-[var(--green-light)]"
+			>📅 Zur Woche +</button>
+		</div>
+	{/if}
+</div>

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

@@ -42,12 +42,36 @@ describe('RecipeCard', () => {
 		expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese');
 	});
 
-	it('wraps in a link to the recipe detail page', () => {
+	it('has a link to the recipe detail page', () => {
 		render(RecipeCard, { props: { recipe: mockRecipe } });
-		const link = screen.getByRole('link');
+		const link = screen.getByRole('link', { name: /Spaghetti Bolognese/i });
 		expect(link).toHaveAttribute('href', '/recipes/recipe-1');
 	});
 
+	it('shows Jetzt kochen link when onplan provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
+		const cookLink = screen.getByRole('link', { name: /Jetzt kochen/i });
+		expect(cookLink).toHaveAttribute('href', '/cook/recipe-1');
+	});
+
+	it('does not show Jetzt kochen when onplan not provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe } });
+		expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull();
+	});
+
+	it('shows Zur Woche + button when onplan provided', () => {
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
+		expect(screen.getByRole('button', { name: /Zur Woche/i })).toBeTruthy();
+	});
+
+	it('calls onplan with recipeId and name when Zur Woche + clicked', async () => {
+		const onplan = vi.fn();
+		const user = userEvent.setup();
+		render(RecipeCard, { props: { recipe: mockRecipe, onplan } });
+		await user.click(screen.getByRole('button', { name: /Zur Woche/i }));
+		expect(onplan).toHaveBeenCalledWith('recipe-1', 'Spaghetti Bolognese');
+	});
+
 	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"]');