\n toggleMealExpansion(mealType)}\n className={`w-full p-4 bg-${color}-50 hover:bg-${color}-100 transition-colors flex items-center justify-between`}\n >\n

\n {icon}\n

\n {getMealTypeDisplayName(mealType)}\n

\n {mealPlans.length} recipe{mealPlans.length !== 1 ? 's' : ''}\n

\n\n

\n {\n e.stopPropagation();\n onAddRecipe(mealType);\n }}\n className={`px-3 py-1 bg-${color}-600 text-white text-sm rounded-lg hover:bg-${color}-700 transition-colors`}\n >\n + Add Recipe\n \n \n {isExpanded ? '▼' : '▶'}\n \n

\n \n\n {isExpanded && (\n

\n {mealPlans.length === 0 ? (\n

No recipes planned for {getMealTypeDisplayName(mealType).toLowerCase()}

\n onAddRecipe(mealType)}\n className={`mt-2 px-4 py-2 bg-${color}-600 text-white text-sm rounded-lg hover:bg-${color}-700 transition-colors`}\n >\n Add First Recipe\n \n

\n ) : (\n

\n {mealPlans.map((mealPlan, index) => (\n \n

\n {mealPlan.recipe ? (\n <>\n

\n {mealPlan.recipe.title}\n

\n {mealPlan.recipe.description && (\n

\n {mealPlan.recipe.description}\n

\n )}\n

\n {mealPlan.recipe.servings && (\n 👥 {mealPlan.recipe.servings} servings\n )}\n {mealPlan.recipe.prepTime && (\n ⏱️ {mealPlan.recipe.prepTime}m prep\n )}\n {mealPlan.recipe.difficulty && (\n \n {mealPlan.recipe.difficulty}\n \n )}\n

\n {mealPlan.recipe.tags && mealPlan.recipe.tags.length > 0 && (\n

\n {mealPlan.recipe.tags.slice(0, 3).map(tag => (\n \n {tag}\n \n ))}\n {mealPlan.recipe.tags.length > 3 && (\n \n +{mealPlan.recipe.tags.length - 3} more\n \n )}\n

\n )}\n \n ) : (\n

⚠️ Recipe Deleted

This recipe is no longer available

\n )}\n\n {mealPlan.notes && (\n

\n Note: {mealPlan.notes}\n

\n )}\n

\n\n

\n deleteMealPlan(mealPlan.id!)}\n disabled={deletingMealPlanId === mealPlan.id}\n className=\"p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-50\"\n title=\"Remove from meal plan\"\n >\n {deletingMealPlanId === mealPlan.id ? '⏳' : '🗑️'}\n \n

\n ))}\n

\n )}\n

\n )}\n \n );\n };\n\n const getTotalIngredients = (): number => {\n if (!calendarDay) return 0;\n\n const allMealPlans = [\n ...calendarDay.meals['breakfast-lunch'],\n ...calendarDay.meals.dinner\n ];\n\n return allMealPlans.reduce((total, mealPlan) => {\n if (mealPlan.recipe && mealPlan.recipe.ingredients) {\n return total + mealPlan.recipe.ingredients.length;\n }\n return total;\n }, 0);\n };\n\n if (!isOpen || !calendarDay) return null;\n\n return (\n

\n {/* Backdrop */}\n

\n\n {/* Modal */}\n

\n {/* Header */}\n

\n {formatDate(calendarDay.date)}\n

\n {calendarDay.totalRecipeCount} recipes planned\n {getTotalIngredients()} total ingredients\n

\n \n ×\n \n

\n\n {/* Content */}\n

\n {error && (\n

⚠️

Error

{error}

\n setError(null)}\n className=\"mt-3 text-red-600 hover:text-red-800 text-sm font-medium\"\n >\n Dismiss\n \n

\n )}\n\n

\n {renderMealSection('breakfast-lunch', calendarDay.meals['breakfast-lunch'])}\n {renderMealSection('dinner', calendarDay.meals.dinner)}\n

\n\n {/* Footer */}\n

\n Click \"Add Recipe\" to plan meals for this day\n

\n \n Done\n \n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/connnolly/cardamom/code/frontend/components/DayMealPlan.tsx","extension","actionData","errors"]