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>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user