marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(planner): replace Variationskonflikt with red delta badge

Browse Source 
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>
This commit is contained in:
Marcel Raddatz
2026-04-09 12:50:03 +02:00
committed by marcel
parent e9dc04b2a5
commit da21a12222
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/planner/RecipePicker.svelte
View File

@@ -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>

7
frontend/src/lib/planner/RecipePicker.test.ts
View File

@@ -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', () => {