Swipeable calendar

js/ui/mealPlanEditor.js

@@ -18,12 +18,13 @@ import { dayHasAnyMeal, autoSelectProducts, saveLastProductSelection } from '../
 import { loadPantry } from '../services/pantryShopping.js?v=2';
 import {
     bindCalendarDayClicks,
+    bindCalendarHorizontalSwipe,
     createCalendarTopbarHTML,
     createCalendarWeekdayHeaderHTML,
     isCalendarOnToday,
     renderCalendarGrid,
     syncCalendarTodayButton,
-} from './mealCalendar.js?v=11';
+} from './mealCalendar.js?v=14';
 import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-116';
 
 function esc(s) {
@@ -54,9 +55,7 @@ export function getMealPlanEditorHTML() {
             <div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[rgb(var(--app-bg-rgb))]" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important;">
                 <div id="mpe-cal-section" class="hidden">
                     ${createCalendarTopbarHTML({
-        prevId: 'mpe-cal-prev',
         todayId: 'mpe-cal-today',
-        nextId: 'mpe-cal-next',
         wrapperClass: 'mb-2 flex items-center justify-end gap-3',
     })}
                     ${createCalendarWeekdayHeaderHTML()}
@@ -618,15 +617,44 @@ export function setupMealPlanEditor() {
         renderCal();
     });
 
-    document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
-        if (!S.showCal) return;
-        S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
-        renderCal();
-    });
-    document.getElementById('mpe-cal-next')?.addEventListener('click', () => {
-        if (!S.showCal) return;
-        S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
-        renderCal();
+    bindCalendarHorizontalSwipe(document.getElementById('mpe-cal-grid'), {
+        onPrev: () => {
+            if (!S.showCal) return;
+            S.calDate = S.calExpanded ? addMonths(S.calDate, -1) : addDays(S.calDate, -7);
+            renderCal();
+        },
+        onNext: () => {
+            if (!S.showCal) return;
+            S.calDate = S.calExpanded ? addMonths(S.calDate, 1) : addDays(S.calDate, 7);
+            renderCal();
+        },
+        renderGhost: (ghostGrid, direction) => {
+            if (!S.showCal) return false;
+            const sign = direction === 'prev' ? -1 : 1;
+            const mode = S.calExpanded ? 'month' : 'week';
+            const anchor = S.calExpanded
+                ? addMonths(S.calDate, sign)
+                : addDays(S.calDate, 7 * sign);
+            const today = startOfDay(new Date());
+            const plans = loadPlans();
+            renderCalendarGrid({
+                gridEl: ghostGrid,
+                mode,
+                anchorDate: anchor,
+                selectedDate: S.date,
+                resolveDayState: (day, meta) => {
+                    const isSelected = S.date && sameDay(day, S.date);
+                    const isPast = day.getTime() < today.getTime();
+                    return {
+                        disabled: isPast && !isSelected,
+                        dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
+                        showIndicator: meta.mode === 'month'
+                            ? meta.inCurrentMonth && dayHasAnyMeal(plans, day)
+                            : dayHasAnyMeal(plans, day),
+                    };
+                },
+            });
+        },
     });
     document.getElementById('mpe-cal-today')?.addEventListener('click', () => {
         const today = startOfDay(new Date());