IMPLEMENTED: Dual-view meal planning system with scrollable daily list (default) and monthly calendar view. Users can plan meals by assigning recipes to specific days and meal types, then generate shopping lists from selected days.

• meal_plans_v2 table created with:
  • id (INTEGER PRIMARY KEY)
  • recipe_id (INTEGER FK to recipes_v1)
  • date (DATE)
  • meal_type (TEXT: 'breakfast-lunch', 'dinner')
  • notes (TEXT)
  • created_at (DATETIME)
  • updated_at (DATETIME)
  • UPDATED: Simplified to 2 meal types, allows multiple recipes per meal type
• Smart Data Migration: Automatically migrates from v1 to v2, combines breakfast/lunch, skips snacks
• Proper Constraints: Database-level validation for meal types

Complete REST API in /backend/routes/meal-plans.ts:

• ✅ GET /api/meal-plans - Get meal plans for date range
  • Query params: startDate, endDate
  • Returns meal plans with LEFT JOIN for deleted recipe handling
  • Efficient date range filtering
• ✅ POST /api/meal-plans - Create meal plan
  • Validates recipe exists before creation
  • Input validation for meal types and date formats
  • Transaction-safe atomic operations
• ✅ DELETE /api/meal-plans/:id - Remove meal plan
• ✅ PUT /api/meal-plans/:id - Update meal plan
  • Change date/meal type with validation
• ✅ POST /api/meal-plans/shopping-list - Generate shopping list from calendar
  • Supports date ranges or specific date arrays
  • Filters out deleted recipes automatically
  • Reuses existing shopping list creation logic

• MealPlanCalendar.tsx - Dual-view meal planning interface

  • ✅ Default List View: Scrollable daily cards showing planned meals
  • ✅ Calendar View: Full monthly grid with day selection
  • ✅ View Switcher: Toggle between "📝 List" and "📅 Calendar"
  • ✅ Shopping List Integration: Multi-day selection for list creation
  • ✅ Mobile-responsive: Adaptive layouts for both views

• DayMealPlan.tsx - Detailed day meal editor

  • ✅ Modal Interface: Full-screen day planning modal
  • ✅ Meal Type Sections: "Breakfast & Lunch" and "Dinner"
  • ✅ Multiple Recipes: Support for multiple recipes per meal type
  • ✅ Recipe Management: Add/remove individual recipes
  • ✅ Deleted Recipe Handling: Warning display for deleted recipes
  • ✅ Ingredient Count: Total ingredients calculation

• MealPlanSidebar.tsx - Recipe selection interface

  • ✅ Smart Filtering: Search, tags, difficulty, prep time filters
  • ✅ Recipe Metadata: Prep time, difficulty, tags display
  • ✅ Simple Success Feedback: Auto-close on successful add
  • ✅ Error Handling: Clear error messages and validation
  • ✅ Mobile Overlay: Full-screen sidebar on mobile

• App.tsx - Added 'meal-calendar' view and navigation button
• Type System - Updated shared/types.ts with meal planning interfaces

• Daily Cards: Clean cards for each day with meal plans
• Color Coding: Orange for "Breakfast & Lunch", Purple for "Dinner"
• Today Highlighting: Blue accent for current day
• Recipe Details: Prep time, difficulty badges, deleted recipe warnings
• Empty States: Engaging empty state with call-to-action

┌─────────────────────────────────────────────────┐
│  📝 List | 📅 Calendar     [Create List]        │
├─────────────────────────────────────────────────┤
│ Sun │ Mon │ Tue │ Wed │ Thu │ Fri │ Sat │       │
├─────┼─────┼─────┼─────┼─────┼─────┼─────┤       │
│  1  │  2  │  3  │  4  │  5  │  6  │  7  │       │
│B&L:2│B&L:-│B&L:1│B&L:3│B&L:-│B&L:-│B&L:1│       │
│ D:3 │ D:1 │ D:2 │ D:- │ D:2 │ D:1 │ D:2 │       │
├─────┼─────┼─────┼─────┼─────┼─────┼─────┤       │
│  8  │  9  │ ... │                         │       │
└─────┴─────┴─────┴─────────────────────────┘

Legend: B&L=Breakfast & Lunch, D=Dinner

• Responsive Grids: CSS Grid adapts to screen size
• Touch-Friendly: 44px minimum touch targets
• Modal Interfaces: Full-screen modals for editing
• Stackable Views: List view naturally stacks on mobile

1. Create database migration for meal_plans_v1 table
2. Add database queries in /backend/database/queries.ts
   • Support batch operations for multiple recipes
   • Use LEFT JOIN for recipe data to handle deleted recipes gracefully
   • Implement transaction safety using sqlite.batch() for all multi-table operations
   • Add validation queries to check recipe existence before meal plan operations
3. Create /backend/routes/meal-plans.ts with CRUD operations
   • Wrap all create/update operations in transactions
   • Return appropriate error messages when recipes don't exist
   • Handle orphaned meal plans (where recipe was deleted) in GET 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
   • Use atomic transaction for entire shopping list creation
   • Filter out meal plans with deleted recipes
   • Show warning if some recipes were skipped due to deletion
3. Integrate with existing ShoppingListCreator
   • Reuse existing transaction patterns from recipe-based shopping lists
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 | null; // Populated on fetch, null if recipe was deleted
  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

All multi-table operations will use Val Town's sqlite.batch() method:

// Example: Creating meal plan with validation
const queries = [
  // Verify recipe exists
  { sql: 'SELECT id FROM recipes_v1 WHERE id = ?', args: [recipeId] },
  // Insert meal plan if recipe exists
  { sql: 'INSERT INTO meal_plans_v1 (recipe_id, date, meal_type) VALUES (?, ?, ?)',
    args: [recipeId, date, mealType] }
];
const results = await sqlite.batch(queries);
if (!results[0].rows.length) {
  throw new Error('Recipe not found');
}

• Meal Plan Queries: Use LEFT JOIN to include orphaned meal plans:

  SELECT mp.*, r.* FROM meal_plans_v1 mp
  LEFT JOIN recipes_v1 r ON mp.recipe_id = r.id
  WHERE mp.date BETWEEN ? AND ?

• Frontend Display: Show placeholder for deleted recipes with option to remove
• Shopping List Generation: Filter out null recipes before ingredient aggregation
• Cascade Behavior: Keep meal plans when recipes are deleted (no CASCADE DELETE)

• 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
• Data integrity maintained even when recipes are deleted
• Atomic operations ensure consistent state