feat(planner): DayMealCard gains onactionsheet prop for full-card mobile tap target

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/planner/DayMealCard.svelte

@@ -17,15 +17,19 @@
 		isToday = false,
 		isSelected = false,
 		readonly = false,
-		onaddrecipe
+		onaddrecipe,
+		onactionsheet
 	}: {
 		slot: Slot;
 		isToday?: boolean;
 		isSelected?: boolean;
 		readonly?: boolean;
 		onaddrecipe?: () => void;
+		onactionsheet?: () => void;
 	} = $props();
 
+	let actionSheetMode = $derived(!!onactionsheet && !!slot.recipe);
+
 	let metadata = $derived(
 		[
 			slot.recipe?.cookTimeMin != null ? `${slot.recipe.cookTimeMin} Min` : null,
@@ -44,6 +48,23 @@
 	);
 </script>
 
+{#if actionSheetMode}
+	<button
+		type="button"
+		data-testid="day-meal-card"
+		data-today={isToday}
+		data-selected={isSelected}
+		onclick={onactionsheet}
+		class="w-full text-left rounded-[var(--radius-lg)] border-2 p-4 transition-colors {borderClass}"
+	>
+		<h3 class="font-[var(--font-display)] text-[20px] font-[300] leading-tight text-[var(--color-text)]">
+			{slot.recipe!.name}
+		</h3>
+		{#if metadata}
+			<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">{metadata}</p>
+		{/if}
+	</button>
+{:else}
 	<div
 		data-testid="day-meal-card"
 		data-today={isToday}
@@ -90,3 +111,4 @@
 			{/if}
 		{/if}
 	</div>
+{/if}

frontend/src/lib/planner/DayMealCard.test.ts

@@ -81,4 +81,38 @@ describe('DayMealCard', () => {
 		render(DayMealCard, { props: { slot: { id: 's2', slotDate: '2026-03-31', recipe: null }, isToday: false, readonly: false } });
 		expect(screen.queryByRole('button', { name: /Gericht hinzufügen/i })).toBeNull();
 	});
+
+	describe('onactionsheet prop (mobile full-card tap target)', () => {
+		it('card renders as a button when onactionsheet provided and recipe exists', () => {
+			render(DayMealCard, { props: { slot, onactionsheet: vi.fn() } });
+			const card = screen.getByRole('button', { name: /Pasta Bolognese/i });
+			expect(card).toBeTruthy();
+		});
+
+		it('clicking card calls onactionsheet', async () => {
+			const onactionsheet = vi.fn();
+			const user = userEvent.setup();
+			render(DayMealCard, { props: { slot, onactionsheet } });
+			await user.click(screen.getByRole('button', { name: /Pasta Bolognese/i }));
+			expect(onactionsheet).toHaveBeenCalledOnce();
+		});
+
+		it('inline Jetzt kochen and Tauschen buttons are hidden when onactionsheet provided', () => {
+			render(DayMealCard, { props: { slot, onactionsheet: vi.fn() } });
+			expect(screen.queryByRole('link', { name: /Jetzt kochen/i })).toBeNull();
+			expect(screen.queryByRole('button', { name: /Tauschen/i })).toBeNull();
+		});
+
+		it('falls back to normal rendering when onactionsheet not provided', () => {
+			render(DayMealCard, { props: { slot, readonly: false, onaddrecipe: vi.fn() } });
+			expect(screen.queryByRole('button', { name: /Pasta Bolognese/i })).toBeNull();
+			expect(screen.getByRole('link', { name: /Jetzt kochen/i })).toBeTruthy();
+		});
+
+		it('empty slot does not render card as button even when onactionsheet provided', () => {
+			const emptySlot = { id: 's2', slotDate: '2026-03-31', recipe: null };
+			render(DayMealCard, { props: { slot: emptySlot, onactionsheet: vi.fn(), onaddrecipe: vi.fn() } });
+			expect(screen.queryByRole('button', { name: /Pasta Bolognese/i })).toBeNull();
+		});
+	});
 });