diff --git a/backend/src/main/java/com/recipeapp/recipe/RecipeRepository.java b/backend/src/main/java/com/recipeapp/recipe/RecipeRepository.java index 6b7a3d0..eb81386 100644 --- a/backend/src/main/java/com/recipeapp/recipe/RecipeRepository.java +++ b/backend/src/main/java/com/recipeapp/recipe/RecipeRepository.java @@ -1,6 +1,5 @@ package com.recipeapp.recipe; -import com.recipeapp.recipe.dto.RecipeSummaryResponse; import com.recipeapp.recipe.entity.Recipe; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; @@ -17,9 +16,8 @@ public interface RecipeRepository extends JpaRepository { List findByHouseholdIdAndDeletedAtIsNull(UUID householdId); @Query(""" - SELECT new com.recipeapp.recipe.dto.RecipeSummaryResponse( - r.id, r.name, r.serves, r.cookTimeMin, r.effort, r.heroImagePreview) - FROM Recipe r + SELECT r FROM Recipe r + LEFT JOIN FETCH r.tags WHERE r.household.id = :householdId AND r.deletedAt IS NULL AND (:search IS NULL OR LOWER(r.name) LIKE LOWER(CONCAT('%', CAST(:search AS string), '%'))) @@ -27,7 +25,7 @@ public interface RecipeRepository extends JpaRepository { AND (:cookTimeMaxMin IS NULL OR r.cookTimeMin <= :cookTimeMaxMin) ORDER BY r.createdAt DESC """) - List findFiltered( + List findFiltered( @Param("householdId") UUID householdId, @Param("search") String search, @Param("effort") String effort, diff --git a/backend/src/main/java/com/recipeapp/recipe/RecipeService.java b/backend/src/main/java/com/recipeapp/recipe/RecipeService.java index 6e3084b..28e4091 100644 --- a/backend/src/main/java/com/recipeapp/recipe/RecipeService.java +++ b/backend/src/main/java/com/recipeapp/recipe/RecipeService.java @@ -42,7 +42,15 @@ public class RecipeService { @Transactional(readOnly = true) public List listRecipes(UUID householdId, String search, String effort, Integer cookTimeMaxMin, String sort, int limit, int offset) { - return recipeRepository.findFiltered(householdId, search, effort, cookTimeMaxMin, sort, limit, offset); + return recipeRepository.findFiltered(householdId, search, effort, cookTimeMaxMin, sort, limit, offset) + .stream() + .map(r -> new RecipeSummaryResponse( + r.getId(), r.getName(), r.getServes(), r.getCookTimeMin(), r.getEffort(), + r.getHeroImageUrl(), + r.getTags().stream() + .map(t -> new TagResponse(t.getId(), t.getName(), t.getTagType())) + .toList())) + .toList(); } @Transactional(readOnly = true) diff --git a/backend/src/main/java/com/recipeapp/recipe/dto/RecipeSummaryResponse.java b/backend/src/main/java/com/recipeapp/recipe/dto/RecipeSummaryResponse.java index c128982..a3fd8c2 100644 --- a/backend/src/main/java/com/recipeapp/recipe/dto/RecipeSummaryResponse.java +++ b/backend/src/main/java/com/recipeapp/recipe/dto/RecipeSummaryResponse.java @@ -1,5 +1,6 @@ package com.recipeapp.recipe.dto; +import java.util.List; import java.util.UUID; public record RecipeSummaryResponse( @@ -8,5 +9,6 @@ public record RecipeSummaryResponse( short serves, short cookTimeMin, String effort, - String heroImagePreview + String heroImageUrl, + List tags ) {} diff --git a/backend/src/test/java/com/recipeapp/recipe/RecipeControllerTest.java b/backend/src/test/java/com/recipeapp/recipe/RecipeControllerTest.java index 0a1b94b..1e79817 100644 --- a/backend/src/test/java/com/recipeapp/recipe/RecipeControllerTest.java +++ b/backend/src/test/java/com/recipeapp/recipe/RecipeControllerTest.java @@ -46,8 +46,9 @@ class RecipeControllerTest { @Test void listRecipesShouldReturn200WithPagination() throws Exception { + var tag = new TagResponse(UUID.randomUUID(), "Rind", "protein"); var summary = new RecipeSummaryResponse(RECIPE_ID, "Spaghetti Bolognese", - (short) 4, (short) 45, "medium", null); + (short) 4, (short) 45, "medium", "https://example.com/img.jpg", List.of(tag)); when(householdResolver.resolve("sarah@example.com")).thenReturn(HOUSEHOLD_ID); when(recipeService.listRecipes(eq(HOUSEHOLD_ID), isNull(), isNull(), isNull(), @@ -62,6 +63,9 @@ class RecipeControllerTest { .param("offset", "0")) .andExpect(status().isOk()) .andExpect(jsonPath("$.data[0].name").value("Spaghetti Bolognese")) + .andExpect(jsonPath("$.data[0].heroImageUrl").value("https://example.com/img.jpg")) + .andExpect(jsonPath("$.data[0].tags[0].name").value("Rind")) + .andExpect(jsonPath("$.data[0].tags[0].tagType").value("protein")) .andExpect(jsonPath("$.meta.pagination.total").value(1)) .andExpect(jsonPath("$.meta.pagination.hasMore").value(false)); } diff --git a/frontend/src/app.css b/frontend/src/app.css index 988ac1c..da8a085 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -86,4 +86,28 @@ --btn-font-size: 13px; --btn-font-weight: 500; --btn-letter-spacing: 0.04em; + + /* ── Planner flip-tile semantic tokens ──────────────────────────── */ + --color-ring-today: var(--yellow-text); + --color-ring-selected: var(--green-dark); + --opacity-dimmed: 0.38; + + /* ── Protein gradient tokens ────────────────────────────────────── */ + --gradient-protein-haehnchen: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + --gradient-protein-rind: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); + --gradient-protein-fisch: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + --gradient-protein-tofu: linear-gradient(135deg, #22c55e 0%, #15803d 100%); + --gradient-protein-vegetarisch: linear-gradient(135deg, #86efac 0%, #4ade80 100%); + --gradient-protein-schwein: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); + --gradient-protein-lamm: linear-gradient(135deg, #92400e 0%, #78350f 100%); + --gradient-protein-eier: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); + --gradient-protein-kaese: linear-gradient(135deg, #fcd34d 0%, #d97706 100%); + --gradient-protein-huelsenfruechte: linear-gradient(135deg, #a16207 0%, #854d0e 100%); + + /* ── Cuisine gradient tokens ────────────────────────────────────── */ + --gradient-cuisine-deutsch: linear-gradient(135deg, #78716c 0%, #44403c 100%); + --gradient-cuisine-asiatisch: linear-gradient(135deg, #166534 0%, #14532d 100%); + --gradient-cuisine-indisch: linear-gradient(135deg, #ca8a04 0%, #a16207 100%); + --gradient-cuisine-mexikanisch: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); + --gradient-cuisine-mediterran: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); } diff --git a/frontend/src/lib/design-system/tokens.test.ts b/frontend/src/lib/design-system/tokens.test.ts index 1928339..b33ac17 100644 --- a/frontend/src/lib/design-system/tokens.test.ts +++ b/frontend/src/lib/design-system/tokens.test.ts @@ -47,7 +47,28 @@ const requiredTokens = [ // Shadows '--shadow-card', '--shadow-raised', - '--shadow-overlay' + '--shadow-overlay', + // Planner flip-tile semantic tokens + '--color-ring-today', + '--color-ring-selected', + '--opacity-dimmed', + // Protein gradient tokens + '--gradient-protein-haehnchen', + '--gradient-protein-rind', + '--gradient-protein-fisch', + '--gradient-protein-tofu', + '--gradient-protein-vegetarisch', + '--gradient-protein-schwein', + '--gradient-protein-lamm', + '--gradient-protein-eier', + '--gradient-protein-kaese', + '--gradient-protein-huelsenfruechte', + // Cuisine gradient tokens + '--gradient-cuisine-deutsch', + '--gradient-cuisine-asiatisch', + '--gradient-cuisine-indisch', + '--gradient-cuisine-mexikanisch', + '--gradient-cuisine-mediterran' ]; describe('design token completeness', () => { diff --git a/frontend/src/lib/planner/DesktopDayTile.svelte b/frontend/src/lib/planner/DesktopDayTile.svelte new file mode 100644 index 0000000..49feea6 --- /dev/null +++ b/frontend/src/lib/planner/DesktopDayTile.svelte @@ -0,0 +1,412 @@ + + +{#if slot.recipe} +
+ +
+
+ +
+ + +
+ {dayAbbr} + + {dateNum} + +
+ + +
+

{slot.recipe.name}

+ {#if metaLine} +

{metaLine}

+ {/if} + {#if visibleTags.length > 0} +
+ {#each visibleTags as tag (tag.id)} + + {tag.name} + + {/each} +
+ {/if} +
+
+
+ + +
+
+ + +

{slot.recipe.name}

+ {#if metaLine} +

{metaLine}

+ {/if} + +
+ e.stopPropagation()}>Koch-Modus + e.stopPropagation()}>Rezept ansehen + + {#if isPlanner} + + + {#if slot.id} + + {/if} + {/if} +
+
+
+ +
+{:else} + +{/if} + + diff --git a/frontend/src/lib/planner/DesktopDayTile.test.ts b/frontend/src/lib/planner/DesktopDayTile.test.ts new file mode 100644 index 0000000..d641a9d --- /dev/null +++ b/frontend/src/lib/planner/DesktopDayTile.test.ts @@ -0,0 +1,205 @@ +import { describe, it, expect, vi } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import { userEvent } from '@testing-library/user-event'; +import DesktopDayTile from './DesktopDayTile.svelte'; +import { sanitizeForCssUrl } from './DesktopDayTile.utils'; + +const filledSlot = { + id: 's1', + slotDate: '2026-04-14', + recipe: { + id: 'r1', + name: 'Pasta Bolognese', + cookTimeMin: 45, + effort: 'mittel', + heroImageUrl: null, + tags: [{ id: 't1', name: 'Rind', tagType: 'protein' }] + } +}; + +const emptySlot = { id: null, slotDate: '2026-04-14', recipe: null }; + +describe('sanitizeForCssUrl', () => { + it('strips parentheses that could break out of url() context', () => { + expect(sanitizeForCssUrl('x);}body{display:none}/*')).not.toContain(')'); + }); + + it('strips single quotes', () => { + expect(sanitizeForCssUrl("data:image/png;base64,abc'def")).not.toContain("'"); + }); + + it('strips double quotes', () => { + expect(sanitizeForCssUrl('data:image/png;base64,abc"def')).not.toContain('"'); + }); + + it('strips backslashes', () => { + expect(sanitizeForCssUrl('data:image/png;base64,abc\\def')).not.toContain('\\'); + }); + + it('preserves a safe data URI unchanged', () => { + const safe = 'data:image/png;base64,abc123+/=='; + expect(sanitizeForCssUrl(safe)).toBe(safe); + }); +}); + +describe('DesktopDayTile — filled slot', () => { + describe('front face', () => { + it('renders recipe name on front face', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getAllByText('Pasta Bolognese').length).toBeGreaterThanOrEqual(1); + }); + + it('has data-testid="day-meal-card" on the scene element', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByTestId("day-meal-card-2026-04-14")).toBeTruthy(); + }); + + it('applies today ring when isToday', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: true, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('data-today')).toBe('true'); + }); + + it('applies selected ring when activeSlotId matches slot id', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('data-flipped')).toBe('true'); + }); + + it('dims tile when another slot is active', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 'other-slot', isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('data-dimmed')).toBe('true'); + }); + + it('is not dimmed when no slot is active', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('data-dimmed')).toBe('false'); + }); + }); + + describe('flip interaction', () => { + it('calls onflip with slot id when scene is clicked', async () => { + const onflip = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } }); + await user.click(screen.getByTestId("day-meal-card-2026-04-14")); + expect(onflip).toHaveBeenCalledWith('s1'); + }); + + it('calls onflip when Enter key is pressed on scene', async () => { + const onflip = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } }); + screen.getByTestId("day-meal-card-2026-04-14").focus(); + await user.keyboard('{Enter}'); + expect(onflip).toHaveBeenCalledWith('s1'); + }); + + it('calls onflip when Space key is pressed on scene', async () => { + const onflip = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [], onflip } }); + screen.getByTestId("day-meal-card-2026-04-14").focus(); + await user.keyboard(' '); + expect(onflip).toHaveBeenCalledWith('s1'); + }); + }); + + describe('back face (flipped state)', () => { + it('shows recipe name on back face when flipped', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + // Back face should also show recipe name + const names = screen.getAllByText('Pasta Bolognese'); + expect(names.length).toBeGreaterThanOrEqual(1); + }); + + it('shows Koch-Modus link on back face when flipped', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('link', { name: /Koch-Modus/i })).toBeTruthy(); + }); + + it('shows Rezept ansehen link on back face when flipped', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('link', { name: /Rezept ansehen/i })).toBeTruthy(); + }); + + it('shows close button on back face', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('button', { name: /Schließen/i })).toBeTruthy(); + }); + + it('calls onclose when close button clicked', async () => { + const onclose = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onclose } }); + await user.click(screen.getByRole('button', { name: /Schließen/i })); + expect(onclose).toHaveBeenCalledOnce(); + }); + + it('shows Gericht tauschen button for planner on back face', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('button', { name: /Gericht tauschen/i })).toBeTruthy(); + }); + + it('hides Gericht tauschen for non-planner', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: false, slotMap: {}, suggestions: [] } }); + expect(screen.queryByRole('button', { name: /Gericht tauschen/i })).toBeNull(); + }); + + it('calls onswap when Gericht tauschen clicked', async () => { + const onswap = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onswap } }); + await user.click(screen.getByRole('button', { name: /Gericht tauschen/i })); + expect(onswap).toHaveBeenCalledOnce(); + }); + + it('shows Entfernen button for planner when slot has id', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('button', { name: /Entfernen/i })).toBeTruthy(); + }); + + it('hides Entfernen button when slot.id is null (optimistic slot)', () => { + const slotWithoutId = { ...filledSlot, id: null }; + render(DesktopDayTile, { props: { slot: slotWithoutId, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + // flip the tile first so back face is visible + // activeSlotId must match slot.id to flip — but slot.id is null, so isFlipped = false + // The back face is still rendered in the DOM; check button is absent + expect(screen.queryByRole('button', { name: /Entfernen/i })).toBeNull(); + }); + + it('calls onremove when Entfernen clicked', async () => { + const onremove = vi.fn(); + const user = userEvent.setup(); + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [], onremove } }); + await user.click(screen.getByRole('button', { name: /Entfernen/i })); + expect(onremove).toHaveBeenCalledOnce(); + }); + + it('aria-expanded is true when flipped', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: 's1', isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('aria-expanded')).toBe('true'); + }); + + it('aria-expanded is false when not flipped', () => { + render(DesktopDayTile, { props: { slot: filledSlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + const scene = screen.getByTestId("day-meal-card-2026-04-14"); + expect(scene.getAttribute('aria-expanded')).toBe('false'); + }); + }); +}); + +describe('DesktopDayTile — empty slot', () => { + it('renders EmptyDayTile (shows Gericht wählen) for empty slot', () => { + render(DesktopDayTile, { props: { slot: emptySlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.getByRole('button', { name: /Gericht wählen/i })).toBeTruthy(); + }); + + it('does not render Koch-Modus for empty slot', () => { + render(DesktopDayTile, { props: { slot: emptySlot, isToday: false, activeSlotId: null, isPlanner: true, slotMap: {}, suggestions: [] } }); + expect(screen.queryByRole('link', { name: /Koch-Modus/i })).toBeNull(); + }); +}); diff --git a/frontend/src/lib/planner/DesktopDayTile.utils.ts b/frontend/src/lib/planner/DesktopDayTile.utils.ts new file mode 100644 index 0000000..6148bde --- /dev/null +++ b/frontend/src/lib/planner/DesktopDayTile.utils.ts @@ -0,0 +1,8 @@ +/** + * Strips characters that could break out of a CSS url() context or inject + * CSS into an inline style attribute. Safe data URIs (base64) are unaffected + * as they contain only A-Z, a-z, 0-9, +, /, = and the data: prefix. + */ +export function sanitizeForCssUrl(url: string): string { + return url.replace(/['"()\\]/g, ''); +} diff --git a/frontend/src/lib/planner/EmptyDayTile.svelte b/frontend/src/lib/planner/EmptyDayTile.svelte new file mode 100644 index 0000000..84b97a4 --- /dev/null +++ b/frontend/src/lib/planner/EmptyDayTile.svelte @@ -0,0 +1,73 @@ + + +
+ +
+ {dayAbbr} + {dateNum} +
+ + + {#if isPlanner} +
+ +
+ {/if} + + {#if topSuggestion} +
+
Vorschlag
+
+ {topSuggestion.recipe.name} + {#each reasoningTags as tag (tag.id)} + + {tag.label} + + {/each} +
+
+ {/if} +
diff --git a/frontend/src/lib/planner/EmptyDayTile.test.ts b/frontend/src/lib/planner/EmptyDayTile.test.ts new file mode 100644 index 0000000..fa52d9b --- /dev/null +++ b/frontend/src/lib/planner/EmptyDayTile.test.ts @@ -0,0 +1,88 @@ +import { describe, it, expect, vi } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import { userEvent } from '@testing-library/user-event'; +import EmptyDayTile from './EmptyDayTile.svelte'; + +const slotDate = '2026-04-14'; +const slotId = 'slot-1'; + +const topSuggestionNewProtein = { + recipe: { + id: 'r1', + name: 'Lachs mit Gemüse', + cookTimeMin: 20, + effort: 'einfach', + tags: [{ id: 't1', name: 'Fisch', tagType: 'protein' }] + }, + scoreDelta: 3.2, + hasConflict: false +}; + +const slotMapEmpty = {}; + +describe('EmptyDayTile', () => { + describe('base render', () => { + it('shows + CTA for planner', () => { + render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } }); + expect(screen.getByRole('button', { name: /Gericht wählen/i })).toBeTruthy(); + }); + + it('hides + CTA for non-planner', () => { + render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: false, slotMap: slotMapEmpty } }); + expect(screen.queryByRole('button', { name: /Gericht wählen/i })).toBeNull(); + }); + + it('calls onaddrecipe when + CTA clicked', async () => { + const onaddrecipe = vi.fn(); + const user = userEvent.setup(); + render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, onaddrecipe } }); + await user.click(screen.getByRole('button', { name: /Gericht wählen/i })); + expect(onaddrecipe).toHaveBeenCalledOnce(); + }); + + it('has data-testid="empty-day-tile"', () => { + render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } }); + expect(screen.getByTestId('empty-day-tile')).toBeTruthy(); + }); + }); + + describe('reasoning tags', () => { + it('shows no tags when no topSuggestion', () => { + render(EmptyDayTile, { props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty } }); + expect(screen.queryByTestId('reasoning-tag')).toBeNull(); + }); + + it('shows Neues Protein tag when topSuggestion has new protein', () => { + render(EmptyDayTile, { + props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein } + }); + expect(screen.getByText('Neues Protein')).toBeTruthy(); + }); + + it('shows Aufwand tag for easy suggestion', () => { + render(EmptyDayTile, { + props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein } + }); + expect(screen.getByText('Aufwand: leicht')).toBeTruthy(); + }); + + it('shows suggestion recipe name when topSuggestion provided', () => { + render(EmptyDayTile, { + props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: topSuggestionNewProtein } + }); + expect(screen.getByText('Lachs mit Gemüse')).toBeTruthy(); + }); + + it('does not show tags when suggestion has no matching conditions', () => { + const heavySuggestion = { + recipe: { id: 'r2', name: 'Roulade', cookTimeMin: 120, effort: 'aufwändig', tags: [] }, + scoreDelta: 1.0, + hasConflict: false + }; + render(EmptyDayTile, { + props: { slotDate, slotId, isPlanner: true, slotMap: slotMapEmpty, topSuggestion: heavySuggestion } + }); + expect(screen.queryByTestId('reasoning-tag')).toBeNull(); + }); + }); +}); diff --git a/frontend/src/lib/planner/RecipePickerDrawer.svelte b/frontend/src/lib/planner/RecipePickerDrawer.svelte new file mode 100644 index 0000000..4bd25da --- /dev/null +++ b/frontend/src/lib/planner/RecipePickerDrawer.svelte @@ -0,0 +1,79 @@ + + + + + + +
+ +
+

+ Rezept wählen +

+ +
+ + +
+ {#if open} + + {/if} +
+
diff --git a/frontend/src/lib/planner/RecipePickerDrawer.test.ts b/frontend/src/lib/planner/RecipePickerDrawer.test.ts new file mode 100644 index 0000000..49c4329 --- /dev/null +++ b/frontend/src/lib/planner/RecipePickerDrawer.test.ts @@ -0,0 +1,81 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import { userEvent } from '@testing-library/user-event'; +import RecipePickerDrawer from './RecipePickerDrawer.svelte'; + +const baseProps = { + open: true, + slotDate: '2026-04-14', + planId: 'plan-1', + suggestions: [], + allRecipes: [ + { id: 'r1', name: 'Pasta Bolognese', cookTimeMin: 45, effort: 'mittel' }, + { id: 'r2', name: 'Lachs', cookTimeMin: 20, effort: 'einfach' } + ], + isLoading: false, + onpick: vi.fn(), + onclose: vi.fn() +}; + +describe('RecipePickerDrawer', () => { + beforeEach(() => vi.clearAllMocks()); + describe('visibility', () => { + it('renders drawer content when open=true', () => { + render(RecipePickerDrawer, { props: baseProps }); + expect(screen.getByTestId('recipe-picker-drawer')).toBeTruthy(); + }); + + it('drawer is not visible when open=false', () => { + render(RecipePickerDrawer, { props: { ...baseProps, open: false } }); + const drawer = screen.getByTestId('recipe-picker-drawer'); + // Drawer exists in DOM but should be off-screen / aria-hidden + expect(drawer.getAttribute('aria-hidden')).toBe('true'); + }); + + it('renders recipe list inside drawer', () => { + render(RecipePickerDrawer, { props: baseProps }); + expect(screen.getByText('Pasta Bolognese')).toBeTruthy(); + }); + }); + + describe('backdrop', () => { + it('renders backdrop when open', () => { + render(RecipePickerDrawer, { props: baseProps }); + expect(screen.getByTestId('drawer-backdrop')).toBeTruthy(); + }); + + it('calls onclose when backdrop is clicked', async () => { + const onclose = vi.fn(); + const user = userEvent.setup(); + render(RecipePickerDrawer, { props: { ...baseProps, onclose } }); + await user.click(screen.getByTestId('drawer-backdrop')); + expect(onclose).toHaveBeenCalledOnce(); + }); + }); + + describe('close button', () => { + it('renders a close button inside the drawer', () => { + render(RecipePickerDrawer, { props: baseProps }); + expect(screen.getByRole('button', { name: /schließen|close/i })).toBeTruthy(); + }); + + it('calls onclose when close button clicked', async () => { + const onclose = vi.fn(); + const user = userEvent.setup(); + render(RecipePickerDrawer, { props: { ...baseProps, onclose } }); + await user.click(screen.getByRole('button', { name: /schließen|close/i })); + expect(onclose).toHaveBeenCalledOnce(); + }); + }); + + describe('recipe picking', () => { + it('calls onpick when a recipe is selected', async () => { + const onpick = vi.fn(); + const user = userEvent.setup(); + render(RecipePickerDrawer, { props: { ...baseProps, onpick } }); + const pickButtons = screen.getAllByRole('button', { name: /Wählen/i }); + await user.click(pickButtons[0]); + expect(onpick).toHaveBeenCalledOnce(); + }); + }); +}); diff --git a/frontend/src/lib/planner/reasoningTags.test.ts b/frontend/src/lib/planner/reasoningTags.test.ts new file mode 100644 index 0000000..9099f96 --- /dev/null +++ b/frontend/src/lib/planner/reasoningTags.test.ts @@ -0,0 +1,106 @@ +import { describe, it, expect } from 'vitest'; +import { computeReasoningTags, type ReasoningTag } from './reasoningTags'; + +// SlotMap fixture helpers +const emptySlotMap = {}; + +const slotMapWithChicken = { + '2026-04-07': { id: 's1', slotDate: '2026-04-07', recipe: { id: 'r1', name: 'Chicken curry', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] } }, +}; + +const slotMapWithBeefAndChicken = { + '2026-04-07': { id: 's1', slotDate: '2026-04-07', recipe: { id: 'r1', name: 'Steak', tags: [{ id: 't2', name: 'Rind', tagType: 'protein' }] } }, + '2026-04-08': { id: 's2', slotDate: '2026-04-08', recipe: { id: 'r2', name: 'Chicken', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] } }, +}; + +const fishRecipe = { id: 'r3', name: 'Lachs', cookTimeMin: 20, effort: 'einfach', tags: [{ id: 't3', name: 'Fisch', tagType: 'protein' }] }; +const chickenRecipe = { id: 'r1', name: 'Chicken curry', cookTimeMin: 45, effort: 'mittel', tags: [{ id: 't1', name: 'Hähnchen', tagType: 'protein' }] }; +const easyRecipe = { id: 'r4', name: 'Salat', cookTimeMin: 15, effort: 'einfach', tags: [] }; +const heavyRecipe = { id: 'r5', name: 'Roulade', cookTimeMin: 90, effort: 'aufwändig', tags: [] }; + +describe('computeReasoningTags', () => { + describe('Neues Protein tag', () => { + it('returns Neues Protein tag when recipe protein is not in week', () => { + const tags = computeReasoningTags(slotMapWithChicken, fishRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).toContain('neues-protein'); + }); + + it('does not return Neues Protein when recipe protein is already in week', () => { + const tags = computeReasoningTags(slotMapWithChicken, chickenRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).not.toContain('neues-protein'); + }); + + it('returns Neues Protein when recipe has protein tag and slotMap is empty', () => { + const tags = computeReasoningTags(emptySlotMap, fishRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).toContain('neues-protein'); + }); + + it('does not return Neues Protein when recipe has no protein tag', () => { + const tags = computeReasoningTags(emptySlotMap, easyRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).not.toContain('neues-protein'); + }); + }); + + describe('Aufwand: leicht tag', () => { + it('returns Aufwand tag when cookTimeMin is less than 30', () => { + const tags = computeReasoningTags(emptySlotMap, easyRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).toContain('aufwand-leicht'); + }); + + it('returns Aufwand tag when effort is einfach regardless of cookTime', () => { + const recipe = { ...fishRecipe, cookTimeMin: 45 }; + const tags = computeReasoningTags(emptySlotMap, recipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).toContain('aufwand-leicht'); + }); + + it('does not return Aufwand tag for heavy recipe', () => { + const tags = computeReasoningTags(emptySlotMap, heavyRecipe); + const tagTypes = tags.map((t: ReasoningTag) => t.id); + expect(tagTypes).not.toContain('aufwand-leicht'); + }); + + it('returns Aufwand tag exactly at cookTimeMin 29', () => { + const recipe = { ...heavyRecipe, cookTimeMin: 29, effort: undefined }; + const tags = computeReasoningTags(emptySlotMap, recipe); + expect(tags.map((t: ReasoningTag) => t.id)).toContain('aufwand-leicht'); + }); + + it('does not return Aufwand tag at cookTimeMin 30 with non-easy effort', () => { + const recipe = { ...heavyRecipe, cookTimeMin: 30, effort: 'mittel' }; + const tags = computeReasoningTags(emptySlotMap, recipe); + expect(tags.map((t: ReasoningTag) => t.id)).not.toContain('aufwand-leicht'); + }); + }); + + describe('ReasoningTag shape', () => { + it('each tag has id, label, and color', () => { + const tags = computeReasoningTags(emptySlotMap, fishRecipe); + for (const tag of tags) { + expect(tag).toHaveProperty('id'); + expect(tag).toHaveProperty('label'); + expect(tag).toHaveProperty('color'); + } + }); + }); + + describe('multiple tags', () => { + it('returns multiple tags when multiple conditions are true', () => { + const recipe = { id: 'r6', name: 'Easy fish', cookTimeMin: 20, effort: 'einfach', tags: [{ id: 't3', name: 'Fisch', tagType: 'protein' }] }; + const tags = computeReasoningTags(slotMapWithBeefAndChicken, recipe); + const tagIds = tags.map((t: ReasoningTag) => t.id); + expect(tagIds).toContain('neues-protein'); + expect(tagIds).toContain('aufwand-leicht'); + }); + + it('returns empty array when no conditions are true', () => { + const tags = computeReasoningTags(slotMapWithChicken, { ...chickenRecipe, cookTimeMin: 60, effort: 'aufwändig' }); + expect(tags).toHaveLength(0); + }); + }); +}); diff --git a/frontend/src/lib/planner/reasoningTags.ts b/frontend/src/lib/planner/reasoningTags.ts new file mode 100644 index 0000000..b14fbad --- /dev/null +++ b/frontend/src/lib/planner/reasoningTags.ts @@ -0,0 +1,38 @@ +import type { Recipe, Slot, SlotMap } from '$lib/planner/types'; + +export interface ReasoningTag { + id: 'neues-protein' | 'aufwand-leicht'; + label: string; + color: 'green' | 'yellow'; +} + +export function computeReasoningTags(slotMap: SlotMap, recipe: Recipe): ReasoningTag[] { + const tags: ReasoningTag[] = []; + + // Neues Protein: recipe has a protein tag not already present in any filled slot + const recipeProtein = recipe.tags?.find((t) => t.tagType === 'protein')?.name; + if (recipeProtein) { + const weekProteins = new Set(); + for (const slot of Object.values(slotMap)) { + if (slot.recipe) { + for (const tag of slot.recipe.tags ?? []) { + if (tag.tagType === 'protein' && tag.name) { + weekProteins.add(tag.name); + } + } + } + } + if (!weekProteins.has(recipeProtein)) { + tags.push({ id: 'neues-protein', label: 'Neues Protein', color: 'green' }); + } + } + + // Aufwand: leicht — cookTimeMin < 30 OR effort is 'einfach'/'leicht' + const isEasyEffort = recipe.effort === 'einfach' || recipe.effort === 'leicht'; + const isQuick = recipe.cookTimeMin != null && recipe.cookTimeMin < 30; + if (isEasyEffort || isQuick) { + tags.push({ id: 'aufwand-leicht', label: 'Aufwand: leicht', color: 'yellow' }); + } + + return tags; +} diff --git a/frontend/src/lib/planner/types.ts b/frontend/src/lib/planner/types.ts index 1dae0f5..ff9ff96 100644 --- a/frontend/src/lib/planner/types.ts +++ b/frontend/src/lib/planner/types.ts @@ -1,10 +1,26 @@ +export interface TagItem { + id?: string; + name?: string; + tagType?: string; +} + export interface Recipe { id: string; name: string; effort?: string; cookTimeMin?: number; + heroImageUrl?: string | null; + tags?: TagItem[]; } +export interface Slot { + id?: string | null; + slotDate?: string; + recipe?: Recipe | null; +} + +export type SlotMap = Record; + export interface Suggestion { recipe: Recipe; scoreDelta: number; diff --git a/frontend/src/routes/(app)/planner/+page.server.ts b/frontend/src/routes/(app)/planner/+page.server.ts index 602dc39..15f6c15 100644 --- a/frontend/src/routes/(app)/planner/+page.server.ts +++ b/frontend/src/routes/(app)/planner/+page.server.ts @@ -2,6 +2,7 @@ import type { PageServerLoad, Actions } from './$types'; import { apiClient } from '$lib/server/api'; import { getWeekStart } from '$lib/planner/week'; import { addSlotAction, updateSlotAction, deleteSlotAction } from '$lib/server/slotActions'; +import type { TagItem } from '$lib/planner/types'; export const load: PageServerLoad = async ({ fetch, url }) => { const weekParam = url.searchParams.get('week'); @@ -21,7 +22,8 @@ export const load: PageServerLoad = async ({ fetch, url }) => { name: r.name!, cookTimeMin: r.cookTimeMin, effort: r.effort, - heroImageUrl: r.heroImageUrl + heroImageUrl: r.heroImageUrl, + tags: (r.tags ?? []).map((t: TagItem) => ({ id: t.id, name: t.name, tagType: t.tagType })) })); if (weekPlanResult.error || !weekPlanResult.data?.id) { diff --git a/frontend/src/routes/(app)/planner/+page.svelte b/frontend/src/routes/(app)/planner/+page.svelte index a64bccd..7ed61cd 100644 --- a/frontend/src/routes/(app)/planner/+page.svelte +++ b/frontend/src/routes/(app)/planner/+page.svelte @@ -5,7 +5,9 @@ import VarietyScoreCard from '$lib/planner/VarietyScoreCard.svelte'; import WeekStrip from '$lib/planner/WeekStrip.svelte'; import DayMealCard from '$lib/planner/DayMealCard.svelte'; + import DesktopDayTile from '$lib/planner/DesktopDayTile.svelte'; import RecipePicker from '$lib/planner/RecipePicker.svelte'; + import RecipePickerDrawer from '$lib/planner/RecipePickerDrawer.svelte'; import MealActionSheet from '$lib/planner/MealActionSheet.svelte'; import BottomSheet from '$lib/components/BottomSheet.svelte'; import UndoBar from '$lib/planner/UndoBar.svelte'; @@ -23,7 +25,20 @@ let days = $derived(weekDays(weekStart)); let slots = $derived(weekPlan?.slots ?? []); - let slotMap = $derived(Object.fromEntries(slots.map((s: any) => [s.slotDate, s]))); + // SlotRecipe from the API has no tags — merge from data.recipes by id + const recipeById = $derived( + Object.fromEntries((data.recipes ?? []).map((r: any) => [r.id, r])) + ); + let slotMap = $derived( + Object.fromEntries( + slots.map((s: any) => [ + s.slotDate, + s.recipe + ? { ...s, recipe: { ...s.recipe, tags: recipeById[s.recipe.id]?.tags ?? [] } } + : s + ]) + ) + ); // Default selected day: today if in this week, else first day // We read data.weekStart once synchronously here (before reactivity kicks in) to seed the initial value. @@ -49,35 +64,27 @@ let weekRange = $derived(formatWeekRange(weekStart)); - // Desktop right panel state machine - type PanelState = - | { kind: 'idle' } - | { kind: 'day-detail'; date: string } - | { kind: 'recipe-picker'; date: string }; - - let panelState = $state({ kind: 'idle' }); - // Mobile bottom sheet for RecipePicker (empty slot) and swap flow let pickerOpen = $state(false); let actionSheetOpen = $state(false); let swapSheetOpen = $state(false); let swapLoading = $state(false); + // Desktop flip tile + drawer state (page-owned per Kai's architecture decision) + let activeSlotId = $state(null); + let drawerOpen = $state(false); + let drawerSlotId = $state(null); + const activePickerDate = $derived( pickerOpen ? selectedDay : swapSheetOpen ? selectedDay - : panelState.kind === 'recipe-picker' ? panelState.date + : drawerOpen && drawerSlotId ? drawerSlotId : null ); let suggestions: Suggestion[] = $state([]); let isLoadingSuggestions = $state(false); - // Recipes already in any slot this week — used for ⚠ overlap warnings - let currentWeekRecipeIds = $derived( - new Set(slots.filter((s: any) => s.recipe?.id).map((s: any) => s.recipe.id)) - ); - // Hidden form field bindings let addPlanId = $state(''); let addSlotDate = $state(''); @@ -115,9 +122,23 @@ return () => controller.abort(); }); + // Single Escape key handler — priority: drawer > flip (Kai architecture decision) + $effect(() => { + function handleKeydown(e: KeyboardEvent) { + if (e.key !== 'Escape') return; + if (drawerOpen) { + drawerOpen = false; + drawerSlotId = null; + } else if (activeSlotId) { + activeSlotId = null; + } + } + window.addEventListener('keydown', handleKeydown); + return () => window.removeEventListener('keydown', handleKeydown); + }); + function handleSelectDay(day: string) { selectedDay = day; - panelState = { kind: 'day-detail', date: day }; } async function navigateWeek(direction: 'prev' | 'next' | 'today') { @@ -130,14 +151,13 @@ } async function handleRecipePick(recipeId: string, recipeName: string) { - // Capture date before modifying panel state - const date = panelState.kind === 'recipe-picker' ? panelState.date : selectedDay; + // Drawer date takes priority (desktop), then mobile picker date + const date = drawerOpen && drawerSlotId ? drawerSlotId : selectedDay; - // Close pickers + // Close all pickers pickerOpen = false; - if (panelState.kind === 'recipe-picker') { - panelState = { kind: 'idle' }; - } + drawerOpen = false; + drawerSlotId = null; const existingSlot = slotMap[date]; @@ -196,17 +216,39 @@ swapLoading = false; } - function closePanelToIdle() { - panelState = { kind: 'idle' }; + // Desktop tile handlers + function handleTileFlip(slotId: string) { + activeSlotId = slotId; } - function closePanelToDayDetail() { - if (panelState.kind === 'recipe-picker') { - panelState = { kind: 'day-detail', date: panelState.date }; - } else { - panelState = { kind: 'idle' }; - } + function handleTileClose() { + activeSlotId = null; } + + function handleTileSwap(slotDate: string) { + activeSlotId = null; + drawerSlotId = slotDate; + drawerOpen = true; + } + + async function handleTileRemove(slot: any) { + activeSlotId = null; + await handleRemoveMeal(slot); + } + + function handleEmptyTileAdd(slotDate: string) { + drawerSlotId = slotDate; + drawerOpen = true; + } + + const drawerSlot = $derived(drawerSlotId ? (slotMap[drawerSlotId] ?? null) : null); + const drawerReplacingMeta = $derived( + drawerSlot?.recipe + ? [drawerSlot.recipe.cookTimeMin ? `${drawerSlot.recipe.cookTimeMin} Min` : null, drawerSlot.recipe.effort ?? null] + .filter(Boolean) + .join(' · ') + : null + ); @@ -369,7 +411,7 @@ - + - {#if isPlanner} - - {/if}
- +