\n \n {dayNumber}\n \n {isSelected && (\n

\n \n

\n )}\n

\n\n {day.totalRecipeCount > 0 && (\n

\n {day.meals['breakfast-lunch'].length > 0 && (\n

\n \n {day.meals['breakfast-lunch'].length}\n \n

\n )}\n {day.meals.dinner.length > 0 && (\n

\n \n {day.meals.dinner.length}\n \n

\n )}\n

\n )}\n \n );\n };\n\n const renderHeader = () => (\n <>\n {/* Mobile Header */}\n

\n \n ← Back\n \n

Meal Planning

{/* Spacer for centering */}\n

\n\n {/* View Switcher and Action Button on Mobile */}\n

\n setViewType('list')}\n className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n viewType === 'list'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600'\n }`}\n >\n 📝 List\n \n setViewType('calendar')}\n className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n viewType === 'calendar'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600'\n }`}\n >\n 📅 Calendar\n \n

\n\n {isSelectionMode ? (\n

\n \n {selectedDays.size} selected\n \n \n Create\n \n {\n setIsSelectionMode(false);\n setSelectedDays(new Set());\n }}\n className=\"px-3 py-1.5 bg-gray-300 text-gray-700 rounded-lg text-sm font-medium\"\n >\n Cancel\n \n

\n ) : (\n setIsSelectionMode(true)}\n className=\"px-3 py-1.5 bg-blue-500 text-white rounded-lg text-sm font-medium flex items-center space-x-1\"\n >\n \n List\n \n )}\n

\n\n {/* Desktop Header */}\n

\n \n ← Back\n \n

Meal Planning

\n\n {/* View Switcher */}\n

\n setViewType('list')}\n className={`px-3 py-1 text-sm font-medium rounded-md transition-colors ${\n viewType === 'list'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n 📝 List\n \n setViewType('calendar')}\n className={`px-3 py-1 text-sm font-medium rounded-md transition-colors ${\n viewType === 'calendar'\n ? 'bg-white text-gray-900 shadow-sm'\n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n 📅 Calendar\n \n

\n\n

\n {isSelectionMode ? (\n <>\n \n {selectedDays.size} day{selectedDays.size !== 1 ? 's' : ''} selected\n \n \n Create List\n \n {\n setIsSelectionMode(false);\n setSelectedDays(new Set());\n }}\n className=\"px-4 py-2 bg-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n \n ) : (\n setIsSelectionMode(true)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors\"\n >\n 🛒 Create Shopping List\n \n )}\n

\n \n );\n\n const renderCalendarNavigation = () => (\n

\n navigateMonth('prev')}\n className=\"p-2 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors\"\n >\n ←\n \n\n

\n {currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}\n

\n\n navigateMonth('next')}\n className=\"p-2 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors\"\n >\n →\n \n

\n );\n\n const renderWeekHeader = () => (\n

\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (\n

\n {day}\n

\n ))}\n

\n );\n\n const renderListView = () => {\n const days = getDaysForList();\n\n return (\n

\n {days.map(day => (\n {\n if (isSelectionMode) {\n const newSelected = new Set(selectedDays);\n if (newSelected.has(day.date)) {\n newSelected.delete(day.date);\n } else {\n newSelected.add(day.date);\n }\n setSelectedDays(newSelected);\n } else {\n setSelectedCalendarDay(day);\n setIsDayModalOpen(true);\n }\n }}\n >\n {/* Day Header */}\n

\n {new Date(day.date).toLocaleDateString('en-US', {\n weekday: 'short',\n month: 'short',\n day: 'numeric'\n })}\n {isToday(day.date) && Today}\n

\n {day.totalRecipeCount} recipe{day.totalRecipeCount !== 1 ? 's' : ''}\n

\n\n

\n {isSelectionMode && (\n

\n {selectedDays.has(day.date) && (\n \n )}\n

\n )}\n

\n\n {/* Meals - Simplified for mobile */}\n

\n {/* Breakfast & Lunch */}\n

\n \n 🍳\n Breakfast & Lunch\n \n {!isSelectionMode && (\n {\n e.stopPropagation();\n setSelectedDateForRecipe(day.date);\n setSelectedMealTypeForRecipe('breakfast-lunch');\n setIsSidebarOpen(true);\n }}\n className=\"text-xs px-3 py-1.5 bg-orange-600 text-white rounded-full font-medium hover:bg-orange-700 transition-colors\"\n >\n + Add\n \n )}\n

\n {day.meals['breakfast-lunch'].length > 0 ? (\n day.meals['breakfast-lunch'].map((mealPlan, index) => (\n

\n \n {mealPlan.recipe ? mealPlan.recipe.title : '⚠️ Recipe deleted'}\n \n {mealPlan.recipe && mealPlan.recipe.prepTime && (\n \n {mealPlan.recipe.prepTime}m\n \n )}\n

\n ))\n ) : (\n

No meals planned

\n )}\n

\n\n {/* Dinner */}\n

\n \n 🌙\n Dinner\n \n {!isSelectionMode && (\n {\n e.stopPropagation();\n setSelectedDateForRecipe(day.date);\n setSelectedMealTypeForRecipe('dinner');\n setIsSidebarOpen(true);\n }}\n className=\"text-xs px-3 py-1.5 bg-purple-600 text-white rounded-full font-medium hover:bg-purple-700 transition-colors\"\n >\n + Add\n \n )}\n

\n {day.meals.dinner.length > 0 ? (\n day.meals.dinner.map((mealPlan, index) => (\n

\n \n {mealPlan.recipe ? mealPlan.recipe.title : '⚠️ Recipe deleted'}\n \n {mealPlan.recipe && mealPlan.recipe.prepTime && (\n \n {mealPlan.recipe.prepTime}m\n \n )}\n

\n ))\n ) : (\n

No meals planned

\n )}\n

\n ))}\n\n {/* Floating Action Button for Mobile */}\n {!isSelectionMode && (\n

\n setIsSelectionMode(true)}\n className=\"w-14 h-14 bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-blue-700 transition-colors\"\n aria-label=\"Create Shopping List\"\n >\n \n \n

\n )}\n

\n );\n };\n\n if (loading) {\n return (\n

\n {renderHeader()}\n

\n Loading meal plans...\n

\n );\n }\n\n return (\n

\n {renderHeader()}\n\n {error && (\n

⚠️

Error

{error}

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

\n )}\n\n {viewType === 'list' ? (\n <>\n {renderListView()}\n {isSelectionMode && (\n

\n Tap days to select for shopping list\n

\n )}\n \n ) : (\n \n {renderCalendarNavigation()}\n

\n {/* Simplified week header for mobile */}\n

\n {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(day => (\n

\n {day}\n

\n ))}\n

\n {renderWeekHeader()}\n

\n\n

\n {calendarDays.map(day => renderDayCard(day))}\n

\n\n

\n {/* Desktop legend */}\n

\n Legend:\n \n

\n B&L = Breakfast & Lunch\n \n \n

\n D = Dinner\n \n

\n\n {isSelectionMode ? (\n

\n Click days to select for shopping list\n

\n ) : (\n

\n Click a day to view and edit meal plans\n

\n )}\n

\n\n {/* Mobile legend */}\n

\n \n \n Breakfast/Lunch\n \n \n \n Dinner\n \n

\n {isSelectionMode ? (\n

\n Tap days to select\n

\n ) : (\n

\n Tap a day to view meals\n

\n )}\n

\n )}\n\n {/* Day Detail Modal */}\n {\n setIsDayModalOpen(false);\n setSelectedCalendarDay(null);\n }}\n onAddRecipe={handleAddRecipeToDay}\n onMealPlanUpdated={handleMealPlanUpdated}\n />\n\n {/* Recipe Selection Sidebar */}\n {\n setIsSidebarOpen(false);\n setSelectedDateForRecipe(null);\n setSelectedMealTypeForRecipe(null);\n }}\n onRecipeAdded={handleRecipeAdded}\n />\n \n );\n}","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/connnolly/cardamom/code/frontend/components/MealPlanCalendar.tsx","extension","actionData","errors"]