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

feat(recipes): add C5 quick action buttons to RecipeCard

Browse Source 
Always-visible "Jetzt kochen" and "Zur Woche +" buttons shown
when onplan prop is provided. Restructured card to avoid nested
interactive elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-08 22:58:50 +02:00
parent 90c9ea1894
commit f5adc051e8
2 changed files with 87 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/src/lib/recipes/RecipeCard.svelte
View File

@@ -1,7 +1,11 @@
<script lang="ts"> <script lang="ts">
import type { RecipeSummary } from './types'; import type { RecipeSummary } from './types';
let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props(); let { recipe, compact = false, onplan }: {
recipe: RecipeSummary;
compact?: boolean;
onplan?: ((recipeId: string, recipeName: string) => void);
} = $props();
let metadata = $derived( let metadata = $derived(
[ [
@@ -13,48 +17,61 @@
); );
</script> </script>
<a <div class="rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]">
href="/recipes/{recipe.id}" <a href="/recipes/{recipe.id}" class="block">
class="block rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]" <div
> data-testid="image-area"
<div class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
data-testid="image-area" >
class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}" {#if recipe.heroImageUrl}
> <img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
{#if recipe.heroImageUrl} {:else}
<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" /> <div
{:else} data-testid="image-placeholder"
<div class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
data-testid="image-placeholder"
class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="text-[var(--color-text-muted)] opacity-50"
> >
<!-- plate --> <svg
<circle cx="12" cy="13" r="6" /> xmlns="http://www.w3.org/2000/svg"
<path d="M12 7V5" /> width="24"
<!-- fork tines --> height="24"
<path d="M8 3v3c0 1.1.9 2 2 2h4" /> viewBox="0 0 24 24"
</svg> fill="none"
</div> stroke="currentColor"
{/if} stroke-width="1.5"
</div> stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="text-[var(--color-text-muted)] opacity-50"
>
<!-- plate -->
<circle cx="12" cy="13" r="6" />
<path d="M12 7V5" />
<!-- fork tines -->
<path d="M8 3v3c0 1.1.9 2 2 2h4" />
</svg>
</div>
{/if}
</div>
<div class="px-2 py-1.5"> <div class="px-2 py-1.5">
<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p> <p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
{#if metadata} {#if metadata}
<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p> <p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
{/if} {/if}
</div> </div>
</a> </a>
{#if onplan}
<div class="flex gap-[5px] px-2 pb-2">
<a
href="/cook/{recipe.id}"
class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green)] text-white"
>🍳 Jetzt kochen</a>
<button
type="button"
onclick={() => onplan!(recipe.id, recipe.name)}
class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green-tint)] text-[var(--green-dark)] border border-[var(--green-light)]"
>📅 Zur Woche +</button>
</div>
{/if}
</div>

28
frontend/src/lib/recipes/RecipeCard.test.ts
View File

@@ -42,12 +42,36 @@ describe('RecipeCard', () => {
expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese'); expect(img).toHaveAttribute('alt', 'Spaghetti Bolognese');
}); });
it('wraps in a link to the recipe detail page', () => { it('has a link to the recipe detail page', () => {
render(RecipeCard, { props: { recipe: mockRecipe } }); render(RecipeCard, { props: { recipe: mockRecipe } });
const link = screen.getByRole('link'); const link = screen.getByRole('link', { name: /Spaghetti Bolognese/i });
expect(link).toHaveAttribute('href', '/recipes/recipe-1'); expect(link).toHaveAttribute('href', '/recipes/recipe-1');
}); });
it('shows Jetzt kochen link when onplan provided', () => {
render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
const cookLink = screen.getByRole('link', { name: /Jetzt kochen/i });
expect(cookLink).toHaveAttribute('href', '/cook/recipe-1');
});
it('does not show Jetzt kochen when onplan not provided', () => {
render(RecipeCard, { props: { recipe: mockRecipe } });
expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull();
});
it('shows Zur Woche + button when onplan provided', () => {
render(RecipeCard, { props: { recipe: mockRecipe, onplan: vi.fn() } });
expect(screen.getByRole('button', { name: /Zur Woche/i })).toBeTruthy();
});
it('calls onplan with recipeId and name when Zur Woche + clicked', async () => {
const onplan = vi.fn();
const user = userEvent.setup();
render(RecipeCard, { props: { recipe: mockRecipe, onplan } });
await user.click(screen.getByRole('button', { name: /Zur Woche/i }));
expect(onplan).toHaveBeenCalledWith('recipe-1', 'Spaghetti Bolognese');
});
it('applies compact image height when compact prop is true', () => { it('applies compact image height when compact prop is true', () => {
render(RecipeCard, { props: { recipe: mockRecipe, compact: true } }); render(RecipeCard, { props: { recipe: mockRecipe, compact: true } });
const imageArea = document.querySelector('[data-testid="image-area"]'); const imageArea = document.querySelector('[data-testid="image-area"]');