frontend/src/lib/planner/MealActionSheet.svelte

@@ -17,9 +17,10 @@
     slot: Slot;
     onswap: () => void;
     oncancel: () => void;
+    onremove?: () => void;
   }
 
-  let { open, slot, onswap, oncancel }: Props = $props();
+  let { open, slot, onswap, oncancel, onremove }: Props = $props();
 
   const meta = $derived.by(() => {
     const parts: string[] = [];
@@ -82,6 +83,16 @@
           ↻ Gericht tauschen
         </button>
 
+        {#if onremove}
+          <button
+            type="button"
+            style="width:100%;background:var(--color-error, #d9534f);border:1px solid var(--color-error, #d9534f);color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:500;border-radius:var(--radius-lg);padding:12px;text-align:center;cursor:pointer"
+            onclick={onremove}
+          >
+            ✕ Gericht entfernen
+          </button>
+        {/if}
+
         {#if slot.recipe}
           <a
             href="/recipes/{slot.recipe.id}/cook"

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

@@ -13,7 +13,8 @@ const baseProps = {
 	open: true,
 	slot,
 	onswap: vi.fn(),
-	oncancel: vi.fn()
+	oncancel: vi.fn(),
+	onremove: vi.fn()
 };
 
 describe('MealActionSheet', () => {
@@ -28,14 +29,29 @@ describe('MealActionSheet', () => {
 		expect(screen.getByText(/easy/i)).toBeTruthy();
 	});
 
-	it('renders all 4 action buttons', () => {
+	it('renders all 5 action buttons', () => {
 		render(MealActionSheet, { props: baseProps });
 		expect(screen.getByRole('button', { name: /Gericht tauschen/i })).toBeTruthy();
 		expect(screen.getByRole('link', { name: /Jetzt kochen/i })).toBeTruthy();
 		expect(screen.getByRole('link', { name: /Rezept ansehen/i })).toBeTruthy();
+		expect(screen.getByRole('button', { name: /Entfernen/i })).toBeTruthy();
 		expect(screen.getByRole('button', { name: /Abbrechen/i })).toBeTruthy();
 	});
 
+	it('clicking Entfernen calls onremove', async () => {
+		const onremove = vi.fn();
+		const user = userEvent.setup();
+		render(MealActionSheet, { props: { ...baseProps, onremove } });
+		await user.click(screen.getByRole('button', { name: /Entfernen/i }));
+		expect(onremove).toHaveBeenCalledOnce();
+	});
+
+	it('does not render Entfernen button when onremove is not provided', () => {
+		const { onremove: _, ...propsWithoutRemove } = baseProps;
+		render(MealActionSheet, { props: propsWithoutRemove });
+		expect(screen.queryByRole('button', { name: /Entfernen/i })).toBeNull();
+	});
+
 	it('Jetzt kochen links to the cook route', () => {
 		render(MealActionSheet, { props: baseProps });
 		const link = screen.getByRole('link', { name: /Jetzt kochen/i });