Add Recipe to Meal Plan

[akisma]

Description

Build the UI and logic for adding recipes to meal plan slots from the recipe detail screen. Users viewing a recipe should be able to quickly assign it to a specific day and meal type. This is a core interaction for building out weekly meal plans.

Acceptance Criteria (Gherkin)

Scenario: Add recipe from detail view
  Given I am viewing recipe "Spaghetti Carbonara"
  When I tap "Add to Meal Plan"
  Then I see a date/meal picker modal
  And I can select the day and meal type

Scenario: Select existing meal plan
  Given I have meal plans "This Week" and "Next Week"
  When I tap "Add to Meal Plan"
  Then I can choose which plan to add to
  Or create a new plan

Scenario: Quick add to today
  Given I am viewing a recipe at 5pm
  When I tap "Add to Tonight's Dinner"
  Then the recipe is added to today's dinner slot

Scenario: Adjust servings on add
  Given a recipe serves 4
  When I add it to my meal plan
  Then I can adjust servings to match my needs
  And the serving count is saved with the meal item

Scenario: Already added indicator
  Given I added "Pasta" to Monday dinner
  When I view the "Pasta" recipe again
  Then I see "Planned: Mon Dinner" badge
  And "Add to Meal Plan" shows additional options

Technical Notes

Component: shopping-list/components/AddToMealPlanModal.tsx

Modal Flow:

1. Show existing meal plans (or prompt to create)
2. Week view with tappable day/meal cells
3. Servings adjustment slider
4. Confirm and add

Component Props:

interface AddToMealPlanModalProps {
  recipe: Recipe;
  visible: boolean;
  onClose: () => void;
  onAdd: (planId: string, date: Date, mealType: MealType, servings: number) => void;
}

Quick Add Logic:

• Determine time of day
• Before 10am → breakfast
• 10am-2pm → lunch
• After 2pm → dinner

Recipe Detail Integration:

// In RecipeDetailScreen
<Button 
  onPress={() => setMealPlanModalVisible(true)}
  label={existingPlannedMeals.length > 0 ? 'Add Again' : 'Add to Meal Plan'}
/>
{existingPlannedMeals.map(meal => (
  <Badge key={meal.id}>{formatMealBadge(meal)}</Badge>
))}

Dependencies

• Meal Plan CRUD Endpoints #52 Meal Plan CRUD Endpoints
• Recipe CRUD Endpoints #29 Recipe CRUD Endpoints (for recipe detail screen)