From f4648cc38273ac524332c0819f43905c8f22447a Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 9 Apr 2026 13:03:10 +0200
Subject: [PATCH] feat(planner): show score badges for all recipes in
 RecipePicker

- +server.ts: pass topN=100 so all recipes are scored in one request
- RecipePicker: Empfohlen keeps top 5 with scoreDelta > 0; builds a
  scoreMap from all suggestions; shows green/yellow/red delta badge on
  every recipe in Alle Rezepte that has a score entry
- Extracted scoreBadge snippet to avoid duplication between sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/planner/RecipePicker.svelte  | 206 ++++++++++--------
 frontend/src/lib/planner/RecipePicker.test.ts |  78 ++++++-
 frontend/src/routes/(app)/planner/+server.ts  |   2 +-
 .../src/routes/(app)/planner/server.test.ts   |   2 +-
 4 files changed, 181 insertions(+), 107 deletions(-)

diff --git a/frontend/src/lib/planner/RecipePicker.svelte b/frontend/src/lib/planner/RecipePicker.svelte
index 1b73409..47546b0 100644
--- a/frontend/src/lib/planner/RecipePicker.svelte
+++ b/frontend/src/lib/planner/RecipePicker.svelte
@@ -21,6 +21,14 @@
 
 	let searchQuery = $state('');
 
+	let topRecommendations = $derived(
+		suggestions.filter((s) => s.scoreDelta > 0).slice(0, 5)
+	);
+
+	let scoreMap = $derived(
+		new Map(suggestions.map((s) => [s.recipe.id, s]))
+	);
+
 	let filteredRecipes = $derived(
 		searchQuery.trim() === ''
 			? allRecipes
@@ -39,6 +47,34 @@
 	}
 </script>
 
+{#snippet scoreBadge(recipeId: string, delta: number, hasConflict: boolean)}
+	{#if delta > 0}
+		<span
+			data-testid="badge-{recipeId}"
+			data-type="good"
+			style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
+		>
+			↑ +{delta.toFixed(1)} Punkte
+		</span>
+	{:else if hasConflict}
+		<span
+			data-testid="badge-{recipeId}"
+			data-type="bad"
+			style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--red-tint, #fdecea); color: var(--color-error, #d9534f);"
+		>
+			↓ {delta.toFixed(1)} Punkte
+		</span>
+	{:else}
+		<span
+			data-testid="badge-{recipeId}"
+			data-type="neutral"
+			style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
+		>
+			= {delta.toFixed(1)} Punkte
+		</span>
+	{/if}
+{/snippet}
+
 <div style="background: var(--color-page); font-family: var(--font-sans);">
 	<!-- Header -->
 	<div style="padding: 10px 12px 6px; border-bottom: 1px solid var(--color-border);">
@@ -81,107 +117,91 @@
 				</div>
 			{/each}
 		</div>
-	{:else if suggestions.length > 0}
-		<div
-			style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
-		>
-			Empfohlen · Beste Abwechslung
-		</div>
-
-		{#each suggestions as suggestion (suggestion.recipe.id)}
-			{@const meta = recipeMetadata(suggestion.recipe)}
+	{:else if topRecommendations.length > 0}
+		<div data-testid="empfohlen-section">
 			<div
-				style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
+				style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
 			>
-				<div style="flex: 1; min-width: 0;">
-					<p
-						style="font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--color-text); margin: 0;"
-					>
-						{suggestion.recipe.name}
-					</p>
-					{#if meta}
-						<p style="font-size: 9px; color: var(--color-text-muted); margin: 1px 0 0;">
-							{meta}
-						</p>
-					{/if}
-					{#if (suggestion.scoreDelta ?? 0) > 0}
-						<span
-							data-testid="badge-{suggestion.recipe.id}"
-							data-type="good"
-							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
-						>
-							↑ +{(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
-						</span>
-					{:else if suggestion.hasConflict}
-						<span
-							data-testid="badge-{suggestion.recipe.id}"
-							data-type="bad"
-							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--red-tint, #fdecea); color: var(--color-error, #d9534f);"
-						>
-							↓ {(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
-						</span>
-					{:else}
-						<span
-							data-testid="badge-{suggestion.recipe.id}"
-							data-type="neutral"
-							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
-						>
-							= {(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
-						</span>
-					{/if}
-				</div>
-				<button
-					type="button"
-					aria-label="Wählen"
-					onclick={() => onpick(suggestion.recipe.id, suggestion.recipe.name)}
-					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
-				>
-					+ Wählen
-				</button>
+				Empfohlen · Beste Abwechslung
 			</div>
-		{/each}
+
+			{#each topRecommendations as suggestion (suggestion.recipe.id)}
+				{@const meta = recipeMetadata(suggestion.recipe)}
+				<div
+					style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
+				>
+					<div style="flex: 1; min-width: 0;">
+						<p
+							style="font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--color-text); margin: 0;"
+						>
+							{suggestion.recipe.name}
+						</p>
+						{#if meta}
+							<p style="font-size: 9px; color: var(--color-text-muted); margin: 1px 0 0;">
+								{meta}
+							</p>
+						{/if}
+						{@render scoreBadge(suggestion.recipe.id, suggestion.scoreDelta ?? 0, suggestion.hasConflict)}
+					</div>
+					<button
+						type="button"
+						aria-label="Wählen"
+						onclick={() => onpick(suggestion.recipe.id, suggestion.recipe.name)}
+						style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
+					>
+						+ Wählen
+					</button>
+				</div>
+			{/each}
+		</div>
 	{/if}
 
 	<!-- Alle Rezepte section -->
-	<div
-		style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
-	>
-		Alle Rezepte
-	</div>
+	<div data-testid="alle-rezepte-section">
+		<div
+			style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
+		>
+			Alle Rezepte
+		</div>
 
-	{#if filteredRecipes.length === 0}
-		<p style="padding: 10px 12px; font-size: 11px; color: var(--color-text-muted); margin: 0;">
-			Keine Treffer
-		</p>
-	{:else}
-		{#each filteredRecipes as recipe (recipe.id)}
-			{@const meta = recipeMetadata(recipe)}
-			<div
-				style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
-			>
-				<div style="flex: 1; min-width: 0;">
-					<p
-						style="font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--color-text); margin: 0;"
-					>
-						{recipe.name}
-					</p>
-					{#if meta}
-						<p style="font-size: 9px; color: var(--color-text-muted); margin: 1px 0 0;">
-							{meta}
-						</p>
-					{/if}
-				</div>
-				<button
-					type="button"
-					aria-label="Wählen"
-					onclick={() => onpick(recipe.id, recipe.name)}
-					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
+		{#if filteredRecipes.length === 0}
+			<p style="padding: 10px 12px; font-size: 11px; color: var(--color-text-muted); margin: 0;">
+				Keine Treffer
+			</p>
+		{:else}
+			{#each filteredRecipes as recipe (recipe.id)}
+				{@const meta = recipeMetadata(recipe)}
+				{@const score = scoreMap.get(recipe.id)}
+				<div
+					style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
 				>
-					+ Wählen
-				</button>
-			</div>
-		{/each}
-	{/if}
+					<div style="flex: 1; min-width: 0;">
+						<p
+							style="font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--color-text); margin: 0;"
+						>
+							{recipe.name}
+						</p>
+						{#if meta}
+							<p style="font-size: 9px; color: var(--color-text-muted); margin: 1px 0 0;">
+								{meta}
+							</p>
+						{/if}
+						{#if score}
+							{@render scoreBadge(recipe.id, score.scoreDelta ?? 0, score.hasConflict)}
+						{/if}
+					</div>
+					<button
+						type="button"
+						aria-label="Wählen"
+						onclick={() => onpick(recipe.id, recipe.name)}
+						style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
+					>
+						+ Wählen
+					</button>
+				</div>
+			{/each}
+		{/if}
+	</div>
 </div>
 
 <style>
diff --git a/frontend/src/lib/planner/RecipePicker.test.ts b/frontend/src/lib/planner/RecipePicker.test.ts
index 6bdfbca..3036488 100644
--- a/frontend/src/lib/planner/RecipePicker.test.ts
+++ b/frontend/src/lib/planner/RecipePicker.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import RecipePicker from './RecipePicker.svelte';
 
@@ -34,10 +34,12 @@ describe('RecipePicker', () => {
 		expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
 	});
 
-	it('shows all suggestion recipe names', () => {
+	it('shows only positive-delta suggestions in Empfohlen', () => {
 		render(RecipePicker, { props: baseProps });
+		// s1 (scoreDelta=1.5) appears in Empfohlen
 		expect(screen.getByText('Lachsfilet')).toBeTruthy();
-		expect(screen.getByText('Hähnchen-Curry')).toBeTruthy();
+		// s2 (scoreDelta=-1.5) is excluded from Empfohlen; not in allRecipes either → absent
+		expect(screen.queryByText('Hähnchen-Curry')).toBeNull();
 	});
 
 	it('shows green badge when hasConflict is false', () => {
@@ -47,10 +49,15 @@ describe('RecipePicker', () => {
 		expect(badge.getAttribute('data-type')).toBe('good');
 	});
 
-	it('shows red delta badge when hasConflict is true', () => {
-		render(RecipePicker, { props: baseProps });
-		// Hähnchen-Curry: hasConflict = true, scoreDelta = -1.5 → red badge with delta
-		const badge = screen.getByTestId('badge-s2');
+	it('shows red delta badge in Alle Rezepte when hasConflict is true', () => {
+		// r2 is in allRecipes; scoring it negative via suggestions → red badge in Alle Rezepte
+		const withR2Scored = [
+			...suggestions,
+			{ recipe: { id: 'r2', name: 'Spaghetti Carbonara', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.5, hasConflict: true }
+		];
+		render(RecipePicker, { props: { ...baseProps, suggestions: withR2Scored } });
+		const alleRezepte = screen.getByTestId('alle-rezepte-section');
+		const badge = within(alleRezepte).getByTestId('badge-r2');
 		expect(badge.getAttribute('data-type')).toBe('bad');
 		expect(badge.textContent).toContain('-1.5');
 	});
@@ -87,8 +94,8 @@ describe('RecipePicker', () => {
 		const onpick = vi.fn();
 		render(RecipePicker, { props: { ...baseProps, onpick } });
 		const buttons = screen.getAllByRole('button', { name: /Wählen/i });
-		// First 2 are suggestions, rest are allRecipes
-		await userEvent.click(buttons[2]);
+		// First 1 is the positive-delta suggestion (s1), rest are allRecipes
+		await userEvent.click(buttons[1]);
 		expect(onpick).toHaveBeenCalledWith('r1', 'Beef Bourguignon');
 	});
 
@@ -99,16 +106,63 @@ describe('RecipePicker', () => {
 		expect(screen.getByText(/Keine Treffer/i)).toBeTruthy();
 	});
 
-	it('shows yellow neutral badge when scoreDelta is zero', () => {
+	it('shows yellow neutral badge in Alle Rezepte when scoreDelta is zero', () => {
+		// r1 is in allRecipes; scoring it neutral via suggestions → yellow badge in Alle Rezepte
 		const neutralSuggestions = [
-			{ recipe: { id: 'sn', name: 'Neutrales Rezept', effort: 'easy', cookTimeMin: 20 }, scoreDelta: 0.0, hasConflict: false }
+			{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: 0.0, hasConflict: false }
 		];
 		render(RecipePicker, { props: { ...baseProps, suggestions: neutralSuggestions } });
-		const badge = screen.getByTestId('badge-sn');
+		const alleRezepte = screen.getByTestId('alle-rezepte-section');
+		const badge = within(alleRezepte).getByTestId('badge-r1');
 		expect(badge.getAttribute('data-type')).toBe('neutral');
 		expect(badge.textContent).toContain('0.0');
 	});
 
+	it('Empfohlen shows only positive-delta suggestions, capped at 5', () => {
+		const sixImproving = Array.from({ length: 6 }, (_, i) => ({
+			recipe: { id: `imp${i}`, name: `Improving ${i}`, effort: 'easy' as const, cookTimeMin: 20 },
+			scoreDelta: 1.0,
+			hasConflict: false
+		}));
+		render(RecipePicker, { props: { ...baseProps, suggestions: sixImproving } });
+		const empfohlen = screen.getByTestId('empfohlen-section');
+		const buttons = empfohlen.querySelectorAll('button');
+		expect(buttons).toHaveLength(5);
+	});
+
+	it('Empfohlen excludes neutral and negative suggestions', () => {
+		const mixed = [
+			{ recipe: { id: 'pos', name: 'Positiv', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 1.0, hasConflict: false },
+			{ recipe: { id: 'neu', name: 'Neutral', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: 0.0, hasConflict: false },
+			{ recipe: { id: 'neg', name: 'Negativ', effort: 'easy' as const, cookTimeMin: 20 }, scoreDelta: -1.0, hasConflict: true }
+		];
+		render(RecipePicker, { props: { ...baseProps, suggestions: mixed } });
+		const empfohlen = screen.getByTestId('empfohlen-section');
+		expect(empfohlen.textContent).toContain('Positiv');
+		expect(empfohlen.textContent).not.toContain('Neutral');
+		expect(empfohlen.textContent).not.toContain('Negativ');
+	});
+
+	it('shows score badge inside Alle Rezepte for a recipe that has a matching suggestion', () => {
+		// r1 is in allRecipes; scoreDelta=-0.3 → not in Empfohlen (needs >0), but scoreMap provides badge
+		const withR1Scored = [
+			...suggestions,
+			{ recipe: { id: 'r1', name: 'Beef Bourguignon', effort: 'hard' as const, cookTimeMin: 150 }, scoreDelta: -0.3, hasConflict: true }
+		];
+		render(RecipePicker, { props: { ...baseProps, suggestions: withR1Scored } });
+		const alleRezepte = screen.getByTestId('alle-rezepte-section');
+		const badge = within(alleRezepte).getByTestId('badge-r1');
+		expect(badge.getAttribute('data-type')).toBe('bad');
+	});
+
+	it('shows no badge in Alle Rezepte for recipes with no suggestion score', () => {
+		// r2 and r3 have no suggestion entry
+		render(RecipePicker, { props: baseProps });
+		const alleRezepte = screen.getByTestId('alle-rezepte-section');
+		expect(within(alleRezepte).queryByTestId('badge-r2')).toBeNull();
+		expect(within(alleRezepte).queryByTestId('badge-r3')).toBeNull();
+	});
+
 	it('shows loading skeleton instead of Empfohlen section when isLoading is true', () => {
 		render(RecipePicker, { props: { ...baseProps, isLoading: true } });
 		expect(screen.getByTestId('suggestions-loading')).toBeTruthy();
diff --git a/frontend/src/routes/(app)/planner/+server.ts b/frontend/src/routes/(app)/planner/+server.ts
index af3aa80..8a116f1 100644
--- a/frontend/src/routes/(app)/planner/+server.ts
+++ b/frontend/src/routes/(app)/planner/+server.ts
@@ -14,7 +14,7 @@ export const GET: RequestHandler = async ({ fetch, url }) => {
 	try {
 		const api = apiClient(fetch);
 		const { data } = await api.GET('/v1/week-plans/{id}/suggestions', {
-			params: { path: { id: planId }, query: { slotDate: date } }
+			params: { path: { id: planId }, query: { slotDate: date, topN: 100 } }
 		});
 
 		const suggestions = (data?.suggestions ?? []).sort(
diff --git a/frontend/src/routes/(app)/planner/server.test.ts b/frontend/src/routes/(app)/planner/server.test.ts
index cd5bbd2..bd98219 100644
--- a/frontend/src/routes/(app)/planner/server.test.ts
+++ b/frontend/src/routes/(app)/planner/server.test.ts
@@ -51,7 +51,7 @@ describe('GET /planner — suggestions route handler', () => {
 		const body = await response.json();
 
 		expect(mockGet).toHaveBeenCalledWith('/v1/week-plans/{id}/suggestions', expect.objectContaining({
-			params: { path: { id: PLAN_UUID }, query: { slotDate: DATE } }
+			params: { path: { id: PLAN_UUID }, query: { slotDate: DATE, topN: 100 } }
 		}));
 		expect(body.suggestions).toHaveLength(2);
 		// sorted by scoreDelta desc: 0.0 before -1.5