From da21a12222f9d00bef2b5d2263447e596419f4dd Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 9 Apr 2026 12:50:03 +0200
Subject: [PATCH] feat(planner): replace Variationskonflikt with red delta
 badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows the actual score delta (e.g. "↓ -1.5 Punkte") in red instead of a
generic ⚠ Variationskonflikt label, letting users compare the cost of each
recipe to make an informed swap decision.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/planner/RecipePicker.svelte  | 6 +++---
 frontend/src/lib/planner/RecipePicker.test.ts | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/planner/RecipePicker.svelte b/frontend/src/lib/planner/RecipePicker.svelte
index ec9196d..5f3f90e 100644
--- a/frontend/src/lib/planner/RecipePicker.svelte
+++ b/frontend/src/lib/planner/RecipePicker.svelte
@@ -115,10 +115,10 @@
 					{:else if suggestion.hasConflict}
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
-							data-type="warning"
-							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);"
+							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);"
 						>
-							⚠ Variationskonflikt
+							↓ {(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
 						</span>
 					{/if}
 				</div>
diff --git a/frontend/src/lib/planner/RecipePicker.test.ts b/frontend/src/lib/planner/RecipePicker.test.ts
index d34476b..7e44fe3 100644
--- a/frontend/src/lib/planner/RecipePicker.test.ts
+++ b/frontend/src/lib/planner/RecipePicker.test.ts
@@ -47,11 +47,12 @@ describe('RecipePicker', () => {
 		expect(badge.getAttribute('data-type')).toBe('good');
 	});
 
-	it('shows yellow badge when hasConflict is true', () => {
+	it('shows red delta badge when hasConflict is true', () => {
 		render(RecipePicker, { props: baseProps });
-		// Hähnchen-Curry: hasConflict = true → yellow badge
+		// Hähnchen-Curry: hasConflict = true, scoreDelta = -1.5 → red badge with delta
 		const badge = screen.getByTestId('badge-s2');
-		expect(badge.getAttribute('data-type')).toBe('warning');
+		expect(badge.getAttribute('data-type')).toBe('bad');
+		expect(badge.textContent).toContain('-1.5');
 	});
 
 	it('shows Alle Rezepte section', () => {