From ab662691312e83eb289d2d3de8a760bcda983aed Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 9 Apr 2026 11:46:25 +0200
Subject: [PATCH] feat(planner): lazy-fetch variety suggestions in RecipePicker
 for empty slots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Derives activePickerDate from mobile pickerOpen/selectedDay and desktop
recipe-picker panel state, then uses $effect to fetch /planner?planId&date
on demand — wires suggestions and isLoading into both RecipePicker instances.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/(app)/planner/+page.svelte     | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/(app)/planner/+page.svelte b/frontend/src/routes/(app)/planner/+page.svelte
index ba03be8..bf055d1 100644
--- a/frontend/src/routes/(app)/planner/+page.svelte
+++ b/frontend/src/routes/(app)/planner/+page.svelte
@@ -63,6 +63,15 @@
 	let swapSheetOpen = $state(false);
 	let swapLoading = $state(false);
 
+	const activePickerDate = $derived(
+		pickerOpen ? selectedDay
+		: panelState.kind === 'recipe-picker' ? panelState.date
+		: null
+	);
+
+	let suggestions: any[] = $state([]);
+	let isLoadingSuggestions = $state(false);
+
 	// Recipes already in any slot this week — used for ⚠ overlap warnings
 	let currentWeekRecipeIds = $derived(
 		new Set<string>(slots.filter((s: any) => s.recipe?.id).map((s: any) => s.recipe.id))
@@ -91,6 +100,20 @@
 	let undoVisible = $state(false);
 	let undoMessage = $state('');
 
+	$effect(() => {
+		if (!activePickerDate || !weekPlan?.id) {
+			suggestions = [];
+			isLoadingSuggestions = false;
+			return;
+		}
+		isLoadingSuggestions = true;
+		fetch(`/planner?planId=${weekPlan.id}&date=${activePickerDate}`)
+			.then((r) => r.json())
+			.then((d) => { suggestions = d.suggestions ?? []; })
+			.catch(() => { suggestions = []; })
+			.finally(() => { isLoadingSuggestions = false; });
+	});
+
 	function handleSelectDay(day: string) {
 		selectedDay = day;
 		panelState = { kind: 'day-detail', date: day };
@@ -282,9 +305,9 @@
 			planId={weekPlan?.id ?? ''}
 			date={selectedDay}
 			dateLabel={formatDayLabel(selectedDay)}
-			currentVarietyScore={varietyScore?.score ?? 0}
-			suggestions={[]}
+			suggestions={suggestions}
 			allRecipes={data.recipes}
+			isLoading={isLoadingSuggestions}
 			onpick={handleRecipePick}
 		/>
 	</BottomSheet>
@@ -560,9 +583,9 @@
 							planId={weekPlan?.id ?? ''}
 							date={pickerDate}
 							dateLabel={formatDayLabel(pickerDate)}
-							currentVarietyScore={varietyScore?.score ?? 0}
-							suggestions={[]}
+							suggestions={suggestions}
 							allRecipes={data.recipes}
+							isLoading={isLoadingSuggestions}
 							onpick={handleRecipePick}
 						/>
 					</div>