Add a calendar view that allows users to plan meals by placing recipes on specific days, then generate shopping lists from selected calendar days. This will be an optional entry point into the shopping list creation process.

Create new tables for meal planning:

• meal_plans_v1 table:
  • id (INTEGER PRIMARY KEY)
  • recipe_id (INTEGER FK to recipes_v1)
  • date (DATE)
  • meal_type (TEXT: 'breakfast', 'lunch', 'dinner', 'snack')
  • notes (TEXT)
  • created_at (DATETIME)
  • updated_at (DATETIME)
  • Note: NO unique constraint - allows multiple recipes per meal type per day

New routes in /backend/routes/meal-plans.ts:

• GET /api/meal-plans - Get meal plans for date range
  • Query params: startDate, endDate
  • Returns array of meal plans with populated recipe data
• POST /api/meal-plans - Add recipe to calendar
  • Body: { recipeId, date, mealType, notes? }
  • Allows multiple recipes for same meal type
• DELETE /api/meal-plans/:id - Remove specific recipe from calendar
• PUT /api/meal-plans/:id - Update meal plan (change date/meal type)
• POST /api/meal-plans/shopping-list - Create shopping list from date range
  • Body: { startDate, endDate } or { dates: [...] }
  • Collects all recipes from selected dates

• MealPlanCalendar.tsx - Main calendar view component

  • Month view with week rows
  • Each day shows meal slots with recipe count badges
  • Support multiple recipes per meal type
  • Click to view/edit day's meals
  • Mobile-responsive grid layout

• DayMealPlan.tsx - Single day's meal plan

  • Shows all recipes for each meal type (as a list)
  • Add/remove individual recipes
  • Quick view of total ingredients needed
  • Collapsible sections for each meal type

• MealPlanSidebar.tsx - Recipe selector sidebar

  • Searchable list of recipes
  • Click to add to selected day/meal
  • Filter by tags, prep time, etc.
  • Mobile: slides in as overlay

• App.tsx - Add 'meal-calendar' view type and navigation
• ShoppingListCreator.tsx - Add option to create from calendar selection

┌─────────────────────────────────────────────────┐
│  < November 2025 >            [Create List] [⚙️] │
├─────────────────────────────────────────────────┤
│ Sun │ Mon │ Tue │ Wed │ Thu │ Fri │ Sat │       │
├─────┼─────┼─────┼─────┼─────┼─────┼─────┤       │
│  1  │  2  │  3  │  4  │  5  │  6  │  7  │  [R]  │
│ B:2 │ B:- │ B:1 │ B:3 │ B:- │ B:- │ B:1 │  [e]  │
│ L:1 │ L:2 │ L:- │ L:2 │ L:1 │ L:- │ L:3 │  [c]  │
│ D:3 │ D:1 │ D:2 │ D:- │ D:2 │ D:1 │ D:2 │  [i]  │
├─────┼─────┼─────┼─────┼─────┼─────┼─────┤  [p]  │
│  8  │  9  │ ... │                         │  [e]  │
│     │     │     │                         │  [s]  │
└─────┴─────┴─────┴─────────────────────────┴───────┘

Legend: B=Breakfast, L=Lunch, D=Dinner
Numbers = Recipe count, - = No recipes

• Stack days vertically
• Swipeable week view
• Collapsible meal sections
• Bottom sheet for recipe selection
• Floating action button for quick add

1. Create database migration for meal_plans_v1 table
2. Add database queries in /backend/database/queries.ts
   • Support batch operations for multiple recipes
3. Create /backend/routes/meal-plans.ts with CRUD operations
4. Add route to main backend index

1. Create MealPlanCalendar.tsx with basic month view
2. Implement day selection and navigation
3. Add meal slot display with recipe counts
4. Mobile-responsive CSS Grid layout

1. Create MealPlanSidebar.tsx for recipe selection
2. Implement click-to-add functionality
3. Add DayMealPlan.tsx for detailed day view
4. Support adding multiple recipes to same meal

1. Add calendar selection mode (multi-select days)
2. Create "Generate Shopping List from Calendar" flow
3. Integrate with existing ShoppingListCreator
4. Show which recipes come from which days
5. Handle duplicate recipes across days

• Use CSS Grid with grid-template-columns: repeat(auto-fit, minmax(...))
• Implement touch gestures for mobile navigation
• Create responsive breakpoints (mobile < 768px, tablet < 1024px)
• Bottom sheet pattern for recipe selection on mobile
• Ensure all interactions work with touch (no hover-only features)

export interface MealPlan {
  id?: number;
  recipeId: number;
  recipe?: Recipe; // Populated on fetch
  date: string; // YYYY-MM-DD
  mealType: 'breakfast' | 'lunch' | 'dinner' | 'snack';
  notes?: string;
  createdAt?: string;
  updatedAt?: string;
}

export interface CalendarDay {
  date: string;
  meals: {
    breakfast: MealPlan[];  // Array to support multiple recipes
    lunch: MealPlan[];
    dinner: MealPlan[];
    snack: MealPlan[];
  };
  isSelected?: boolean;
  totalRecipeCount: number;
}

export interface MealPlanDateRange {
  startDate: string;
  endDate: string;
}

1. Main nav: Add "Meal Calendar" option
2. From Calendar: "Create Shopping List" → Select days → Generate list
3. From Shopping List Creator: Tab for "From Calendar" vs "From Recipes"
4. Quick actions: "Plan this recipe" button on recipe view

• Touch targets: Minimum 44x44px for all interactive elements
• Swipe navigation: Between months and weeks
• Responsive grid: Days stack on small screens
• Progressive disclosure: Expand/collapse meal details
• Offline support: Cache meal plans locally
• Performance: Lazy load recipes, virtualize long lists

• Visual meal planning interface
• Support for meal prep (multiple recipes per meal)
• Efficient shopping for multiple days
• Flexibility for varying meal sizes/occasions
• Mobile-friendly for grocery shopping