Meal Plan UI Screen

[akisma]

Description

Create the main Meal Plan screen for the mobile app. This screen displays a weekly calendar view showing planned meals, allows users to add/edit/remove recipes from slots, and provides actions to generate shopping lists. This is the central hub for meal planning activities.

Acceptance Criteria (Gherkin)

Scenario: View weekly meal plan
  Given I navigate to the Meal Plan tab
  Then I see a 7-day calendar view
  And each day shows breakfast, lunch, dinner, and snack slots
  And planned recipes are displayed in their slots

Scenario: Navigate between weeks
  Given I am viewing the current week
  When I swipe left or tap "Next Week"
  Then I see the next week's meal plan

Scenario: Tap empty slot to add
  Given I see an empty dinner slot for Tuesday
  When I tap the slot
  Then I see recipe search/browse to add to that slot

Scenario: Tap filled slot to view options
  Given "Chicken Tacos" is in Wednesday dinner
  When I tap the slot
  Then I see options: View Recipe, Edit Servings, Move to Different Day, Remove

Scenario: Generate shopping list action
  Given I have meals planned for the week
  When I tap "Generate Shopping List"
  Then a shopping list is created with consolidated ingredients
  And I am navigated to view it

Technical Notes

Screen Location: shopping-list/app/(tabs)/meal-plan.tsx

Screen Components:

• WeekNavigator: Week selector with left/right arrows
• DayColumn: Single day with meal slots
• MealSlot: Single meal slot (can contain multiple recipes)
• MealRecipeCard: Small recipe card in a slot

Layout Options:

1. Week View (default): 7 columns, scrollable horizontally
2. Day View: Single day expanded, swipe between days
3. List View: Sequential list of all planned meals

State Management:

interface MealPlanState {
  currentPlan: MealPlan | null;
  currentWeekStart: Date;
  items: MealPlanItem[];
  isLoading: boolean;
}

// Use React Query for data fetching
const { data: weekData } = useQuery(
  ['mealPlan', planId, weekStart],
  () => mealPlanApi.getWeekView(planId, weekStart)
);

Drag and Drop (stretch):

• Allow dragging recipe cards between slots
• Visual feedback during drag
• API call to update on drop

Empty State:

• When no meal plan exists, prompt to create one
• When plan is empty, show "Tap + to add your first meal"

Dependencies

• Meal Plan CRUD Endpoints #52 Meal Plan CRUD Endpoints
• Add Recipe to Meal Plan #53 Add Recipe to Meal Plan
• Multi-Recipe Consolidation #54 Multi-Recipe Consolidation