Unify calendar code

js/views/MealPlanner.js

@@ -1,14 +1,10 @@
 import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
-    addMonths,
-    addWeeks,
     sameDay,
-    sameMonth,
     startOfDay,
     startOfMonth,
     startOfWeekMonday,
-    weekContains,
 } from '../services/dateUtils.js';
 import {
     computeEntryNutrition,
@@ -26,17 +22,18 @@ import {
     savePlans,
 } from '../services/planStore.js?v=2';
 import {
-    CALENDAR_HANDLE_CLASS,
     CALENDAR_MONTHS_SHORT,
+    bindCollapsibleCalendarSwipeGesture,
     bindCalendarDayClicks,
+    createCollapsibleCalendarHTML,
     createCalendarTopbarHTML,
-    createCalendarWeekdayHeaderHTML,
+    formatCalendarPeriodLabel,
     isCalendarOnToday,
-    renderCalendarGrid,
     renderCollapsibleCalendar,
     syncCalendarTodayButton,
     syncCollapsibleCalendarMode,
-} from '../ui/mealCalendar.js?v=14';
+    syncCollapsibleCalendarToggleIcon,
+} from '../ui/mealCalendar.js?v=15';
 import {
     filterRecipesByQuery,
     renderRecipeGrid,
@@ -67,6 +64,9 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
         document.getElementById('cal-go-today'),
         isCalendarOnToday(mode, weekStart, monthAnchor, selected),
         selected,
+        {
+            labelText: formatCalendarPeriodLabel(mode, weekStart, monthAnchor),
+        },
     );
 }
 
@@ -81,19 +81,7 @@ export function getMealPlannerHTML() {
         wrapperClass: 'flex shrink-0 items-center justify-end',
     })}
             </div>
-            <div id="calendar-swipe-zone" class="overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="touch-action: none">
-                <div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
-                </div>
-                <div id="calendar-month-wrap" class="px-3 bg-[rgb(var(--app-bg-rgb))]" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
-                    ${createCalendarWeekdayHeaderHTML()}
-                    <div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
-                </div>
-                <button id="calendar-mode-toggle" type="button" class="w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors" aria-label="Przełącz widok kalendarza">
-                    <i id="calendar-handle-icon" class="fas fa-chevron-down text-[10px]"></i>
-                </button>
-            </div>
+            ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
         </div>
 
         <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]">
@@ -192,223 +180,7 @@ function syncModeToggle(mode) {
         weekWrapEl: document.getElementById('calendar-week-wrap'),
         monthWrapEl: document.getElementById('calendar-month-wrap'),
     });
-    const icon = document.getElementById('calendar-handle-icon');
-    if (icon) icon.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
-}
-
-function bindCalendarSwipeGesture(state, rerender) {
-    const zone = document.getElementById('calendar-swipe-zone');
-    if (!zone) return;
-
-    const ANIMATION_MS = 260;
-
-    let startX = 0;
-    let startY = 0;
-    let ptrId = null;
-    let moved = false;
-    let axisLocked = null;
-    let suppressClickUntil = 0;
-    let animatingNav = false;
-
-    let dragWrap = null;
-    let wrapWidth = 0;
-    let prevGhost = null;
-    let nextGhost = null;
-    let prevWrapPosition = '';
-    let prevWrapOverflow = '';
-
-    const getActiveWrap = () => document.getElementById(
-        state.mode === 'week' ? 'calendar-week-wrap' : 'calendar-month-wrap',
-    );
-
-    const resolveDayStateForGhost = (day, meta) => {
-        const today = startOfDay(new Date());
-        const isSelected = sameDay(day, state.selected);
-        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(state.plans, day)
-                : dayHasAnyMeal(state.plans, day),
-        };
-    };
-
-    const buildGhost = (anchorDate, mode) => {
-        if (!dragWrap) return null;
-        const ghost = dragWrap.cloneNode(true);
-        ghost.removeAttribute('id');
-        ghost.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
-        ghost.style.position = 'absolute';
-        ghost.style.top = '0';
-        ghost.style.width = '100%';
-        ghost.style.pointerEvents = 'none';
-        ghost.setAttribute('aria-hidden', 'true');
-        let ghostGridEl = null;
-        ghost.querySelectorAll('.grid-cols-7').forEach((g) => {
-            if (!g.classList.contains('text-center')) ghostGridEl = g;
-        });
-        if (ghostGridEl) {
-            renderCalendarGrid({
-                gridEl: ghostGridEl,
-                mode,
-                anchorDate,
-                selectedDate: state.selected,
-                resolveDayState: resolveDayStateForGhost,
-            });
-        }
-        return ghost;
-    };
-
-    const activateCarousel = () => {
-        dragWrap = getActiveWrap();
-        if (!dragWrap) return;
-        wrapWidth = dragWrap.getBoundingClientRect().width || zone.getBoundingClientRect().width;
-        prevWrapPosition = dragWrap.style.position;
-        prevWrapOverflow = dragWrap.style.overflow;
-        dragWrap.style.position = 'relative';
-        dragWrap.style.overflow = 'visible';
-
-        const prevAnchor = state.mode === 'week'
-            ? addWeeks(state.weekStart, -1)
-            : addMonths(state.monthAnchor, -1);
-        const nextAnchor = state.mode === 'week'
-            ? addWeeks(state.weekStart, 1)
-            : addMonths(state.monthAnchor, 1);
-
-        prevGhost = buildGhost(prevAnchor, state.mode);
-        nextGhost = buildGhost(nextAnchor, state.mode);
-        if (prevGhost) {
-            prevGhost.style.left = `-${wrapWidth}px`;
-            dragWrap.appendChild(prevGhost);
-        }
-        if (nextGhost) {
-            nextGhost.style.left = `${wrapWidth}px`;
-            dragWrap.appendChild(nextGhost);
-        }
-        dragWrap.style.willChange = 'transform';
-        dragWrap.style.transition = 'none';
-    };
-
-    const clearCarousel = () => {
-        if (prevGhost?.parentNode) prevGhost.parentNode.removeChild(prevGhost);
-        if (nextGhost?.parentNode) nextGhost.parentNode.removeChild(nextGhost);
-        prevGhost = null;
-        nextGhost = null;
-        if (dragWrap) {
-            dragWrap.style.transition = '';
-            dragWrap.style.transform = '';
-            dragWrap.style.willChange = '';
-            dragWrap.style.position = prevWrapPosition;
-            dragWrap.style.overflow = prevWrapOverflow;
-        }
-        dragWrap = null;
-    };
-
-    const setTranslate = (x, ms) => {
-        if (!dragWrap) return;
-        dragWrap.style.transition = ms ? `transform ${ms}ms ease` : 'none';
-        dragWrap.style.transform = `translate3d(${x}px, 0, 0)`;
-    };
-
-    zone.addEventListener('pointerdown', (e) => {
-        if (ptrId !== null || animatingNav) return;
-        if (e.pointerType === 'mouse' && e.button !== 0) return;
-        startX = e.clientX;
-        startY = e.clientY;
-        ptrId = e.pointerId;
-        moved = false;
-        axisLocked = null;
-        try { zone.setPointerCapture(e.pointerId); } catch (_) {}
-    });
-
-    zone.addEventListener('pointermove', (e) => {
-        if (e.pointerId !== ptrId) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-        if (!moved && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) {
-            moved = true;
-            axisLocked = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
-            if (axisLocked === 'x') activateCarousel();
-        }
-        if (axisLocked === 'x' && dragWrap) {
-            setTranslate(dx, 0);
-        }
-    });
-
-    zone.addEventListener('pointerup', (e) => {
-        if (e.pointerId !== ptrId) return;
-        const dx = e.clientX - startX;
-        const dy = e.clientY - startY;
-        ptrId = null;
-
-        if (!moved) return;
-
-        const horizontal = axisLocked === 'x';
-
-        if (horizontal && dragWrap) {
-            if (Math.abs(dx) < 40) {
-                setTranslate(0, ANIMATION_MS);
-                setTimeout(clearCarousel, ANIMATION_MS + 20);
-                return;
-            }
-            suppressClickUntil = performance.now() + 500;
-            animatingNav = true;
-            const targetX = dx > 0 ? wrapWidth : -wrapWidth;
-            setTranslate(targetX, ANIMATION_MS);
-            setTimeout(() => {
-                if (state.mode === 'week') {
-                    state.weekStart = addWeeks(state.weekStart, dx > 0 ? -1 : 1);
-                    if (!weekContains(state.weekStart, state.selected)) {
-                        state.selected = new Date(state.weekStart);
-                    }
-                } else {
-                    state.monthAnchor = addMonths(state.monthAnchor, dx > 0 ? -1 : 1);
-                    if (!sameMonth(state.monthAnchor, state.selected)) {
-                        state.selected = startOfMonth(state.monthAnchor);
-                    }
-                }
-                clearCarousel();
-                rerender();
-                animatingNav = false;
-            }, ANIMATION_MS);
-            return;
-        }
-
-        if (!horizontal && Math.abs(dy) >= 30) {
-            let triggered = false;
-            if (state.mode === 'week' && dy > 0) {
-                state.mode = 'month';
-                state.monthAnchor = startOfMonth(state.selected);
-                triggered = true;
-            } else if (state.mode === 'month' && dy < 0) {
-                state.mode = 'week';
-                state.weekStart = startOfWeekMonday(state.selected);
-                triggered = true;
-            }
-            if (triggered) {
-                suppressClickUntil = performance.now() + 350;
-                rerender();
-            }
-        }
-    });
-
-    zone.addEventListener('click', (ev) => {
-        if (performance.now() < suppressClickUntil) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            suppressClickUntil = 0;
-        }
-    }, { capture: true });
-
-    zone.addEventListener('pointercancel', () => {
-        ptrId = null;
-        moved = false;
-        if (dragWrap) {
-            setTranslate(0, ANIMATION_MS);
-            setTimeout(clearCarousel, ANIMATION_MS + 20);
-        }
-    });
+    syncCollapsibleCalendarToggleIcon(document.getElementById('calendar-handle-icon'), mode);
 }
 
 function showPlannerToast(message) {
@@ -1291,27 +1063,29 @@ export function setupMealPlanner() {
         maxMinutes: PICKER_FILTER_MAX_MINUTES,
     };
 
+    const resolveCalendarDayState = (day, meta) => {
+        const today = startOfDay(new Date());
+        const isSelected = sameDay(day, state.selected);
+        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(state.plans, day)
+                : dayHasAnyMeal(state.plans, day),
+        };
+    };
+
     const rerender = () => {
         syncModeToggle(state.mode);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
-        const today = startOfDay(new Date());
         renderCollapsibleCalendar({
             weekGridEl: weekGrid,
             monthGridEl: monthGrid,
             weekAnchorDate: state.weekStart,
             monthAnchorDate: state.monthAnchor,
             selectedDate: state.selected,
-            resolveDayState: (day, meta) => {
-                const isSelected = sameDay(day, state.selected);
-                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(state.plans, day)
-                        : dayHasAnyMeal(state.plans, day),
-                };
-            },
+            resolveDayState: resolveCalendarDayState,
         });
         renderDayContent(state, persist);
     };
@@ -1559,7 +1333,30 @@ export function setupMealPlanner() {
         rerender();
     };
 
-    bindCalendarSwipeGesture(state, rerender);
+    bindCollapsibleCalendarSwipeGesture({
+        zoneEl: document.getElementById('calendar-swipe-zone'),
+        weekWrapEl: document.getElementById('calendar-week-wrap'),
+        monthWrapEl: document.getElementById('calendar-month-wrap'),
+        getMode: () => state.mode,
+        setMode: (mode) => {
+            state.mode = mode;
+        },
+        getWeekAnchor: () => state.weekStart,
+        setWeekAnchor: (date) => {
+            state.weekStart = startOfWeekMonday(date);
+        },
+        getMonthAnchor: () => state.monthAnchor,
+        setMonthAnchor: (date) => {
+            state.monthAnchor = startOfMonth(date);
+        },
+        getSelectedDate: () => state.selected,
+        setSelectedDate: (date) => {
+            state.selected = startOfDay(date);
+        },
+        rerender,
+        resolveDayState: resolveCalendarDayState,
+        selectOnNavigateOutside: false,
+    });
 
     document.getElementById('calendar-mode-toggle')?.addEventListener('click', () => {
         if (state.mode === 'week') {

js/views/Pantry.js

@@ -10,6 +10,11 @@ import {
     createSwipePopoverCalendarHTML,
     initSwipePopoverCalendar,
 } from '../ui/swipePopoverCalendar.js';
+import {
+    createCalendarPopoverHTML,
+    stabilizeSwipeCalendarLayout,
+    syncCalendarPopoverVisibility,
+} from '../ui/calendarPopover.js';
 import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
 
 /* ── helpers ── */
@@ -202,9 +207,10 @@ export function getPantryHTML() {
                     </div>
 
 
-                    <div id="pantry-calendar-popover" class="absolute left-0 right-0 top-full mt-2 rounded-[1.35rem] py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
-                        ${createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' })}
-                    </div>
+                    ${createCalendarPopoverHTML({
+        id: 'pantry-calendar-popover',
+        calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
+    })}
 
                     <div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
                         <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
@@ -254,19 +260,13 @@ function syncHorizonUI() {
         defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
     }
 
-    if (compactPill) {
-        compactPill.style.setProperty('background', showCalendar ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
-        compactPill.style.setProperty('border-color', showCalendar ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
-    }
-
-    if (popover) {
-        popover.style.opacity = showCalendar ? '1' : '0';
-        popover.style.transform = showCalendar ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
-        popover.style.pointerEvents = showCalendar ? 'auto' : 'none';
-    }
-    if (chevron) {
-        chevron.style.transform = showCalendar ? 'rotate(180deg)' : 'rotate(0deg)';
-    }
+    syncCalendarPopoverVisibility({
+        popup: popover,
+        isOpen: showCalendar,
+        chevron,
+        trigger: compactPill,
+        triggerImportant: true,
+    });
 
     if (filterPopover) {
         filterPopover.style.opacity = showFilter ? '1' : '0';
@@ -415,9 +415,9 @@ function openCalendar() {
     isFilterOpen = false;
     isCalendarOpen = true;
     syncHorizonUI();
-    requestAnimationFrame(() => {
-        pantryCalendar?.reapplyLayout();
-        pantryCalendar?.resetTrackPosition();
+    stabilizeSwipeCalendarLayout({
+        calendar: pantryCalendar,
+        viewport: 'pantry-cal-viewport',
     });
 }
 

js/views/ShoppingList.js

@@ -16,6 +16,7 @@ import { aggregateSelectedDaysIngredientNeed } from '../services/planIngredients
 import { loadPlans, dateKey } from '../services/planStore.js?v=2';
 import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
 import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
+import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
 import { showAppToast } from '../ui/toast.js';
 
 /* ── helpers ── */
@@ -64,6 +65,7 @@ let expandedAmount = 0;
 let calendarOpen = false;
 let calendarMonth = startOfMonth(new Date());
 let shoppingCalendar = null;
+let shoppingCalendarPopover = null;
 
 /* ── day helpers ── */
 
@@ -133,14 +135,13 @@ export function getShoppingListHTML() {
                 </button>
 
                 <!-- popup calendar (absolute, overlays content below) -->
-                <div id="sl-calendar-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
-                    <div class="rounded-[1.35rem] py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
-                        ${createSwipePopoverCalendarHTML({
+                ${createCalendarPopoverHTML({
+        id: 'sl-calendar-popup',
+        calendarHTML: createSwipePopoverCalendarHTML({
         idPrefix: 'sl-cal',
         weekdays: WEEKDAY_SHORT,
+    }),
     })}
-                    </div>
-                </div>
 
                 <!-- popup bought (absolute, overlays content below) -->
                 <div id="sl-bought-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
@@ -201,6 +202,14 @@ function initShoppingCalendar() {
             dot: 'rgb(var(--text-faint-rgb))',
         },
     });
+    shoppingCalendarPopover = createCalendarPopoverController({
+        popupId: 'sl-calendar-popup',
+        viewportId: 'sl-cal-viewport',
+        triggerId: 'sl-range-pill',
+        chevronId: 'sl-range-chevron',
+        getCalendar: () => shoppingCalendar,
+        hideViewportDuringLayout: true,
+    });
 }
 
 function updatePillLabel() {
@@ -212,64 +221,12 @@ function openCalendar() {
     if (boughtPopupOpen) closeBoughtPopup();
     calendarOpen = true;
     calendarMonth = startOfMonth(new Date());
-    const popup = document.getElementById('sl-calendar-popup');
-    const viewport = document.getElementById('sl-cal-viewport');
-    const chevron = document.getElementById('sl-range-chevron');
-    const pill = document.getElementById('sl-range-pill');
-    if (popup) {
-        popup.style.pointerEvents = 'auto';
-        popup.style.opacity = '1';
-        popup.style.transform = 'translateY(0) scale(1)';
-    }
-    if (chevron) chevron.style.transform = 'rotate(180deg)';
-    if (pill) {
-        pill.style.background = 'rgb(var(--sunken-rgb))';
-        pill.style.borderColor = 'rgb(var(--border-input-rgb))';
-    }
-    if (viewport) {
-        viewport.style.opacity = '0';
-        viewport.style.visibility = 'hidden';
-        viewport.style.transition = 'opacity 120ms ease';
-    }
-    shoppingCalendar?.render();
-    // Compute geometry while hidden; reveal only after stable layout.
-    const ensureStableCalendarLayout = (attempt = 0) => {
-        const vw = viewport ? (viewport.clientWidth || viewport.getBoundingClientRect().width) : 0;
-        if (vw < 8 && attempt < 8) {
-            requestAnimationFrame(() => ensureStableCalendarLayout(attempt + 1));
-            return;
-        }
-        shoppingCalendar?.reapplyLayout();
-        shoppingCalendar?.resetTrackPosition();
-        requestAnimationFrame(() => {
-            shoppingCalendar?.reapplyLayout();
-            shoppingCalendar?.resetTrackPosition();
-            if (viewport) {
-                viewport.style.visibility = 'visible';
-                viewport.style.opacity = '1';
-            }
-        });
-    };
-    requestAnimationFrame(() => ensureStableCalendarLayout());
+    shoppingCalendarPopover?.open();
 }
 
 function closeCalendar() {
     calendarOpen = false;
-    const popup = document.getElementById('sl-calendar-popup');
-    const chevron = document.getElementById('sl-range-chevron');
-    const pill = document.getElementById('sl-range-pill');
-    if (popup) {
-        popup.style.pointerEvents = 'none';
-        popup.style.opacity = '0';
-        popup.style.transform = 'translateY(-6px) scale(0.98)';
-    }
-    if (chevron) chevron.style.transform = '';
-    if (pill) {
-        pill.style.background = 'rgb(var(--card-rgb))';
-        pill.style.borderColor = 'rgb(var(--border-card-rgb))';
-    }
-    shoppingCalendar?.clearPendingRange?.();
-    shoppingCalendar?.resetTrackPosition();
+    shoppingCalendarPopover?.close({ clearPendingRange: true });
 }
 
 function toggleCalendar() {
@@ -327,11 +284,11 @@ function activeItemHtml(item) {
     const stepAmt = isExpanded ? expandedAmount : Math.max(step, Math.round(item.shortfall / step) * step);
 
     return `
-    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--success-rgb)); box-shadow:var(--shadow-card);">
-        <div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end">
+    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
+        <div class="sl-swipe-bg-buy absolute inset-0 flex items-center pr-5 justify-end" style="background:rgb(var(--success-rgb)); opacity:0;">
             <i class="fas fa-check text-white text-lg"></i>
         </div>
-        <div class="sl-swipe-inner rounded-xl" style="background:rgb(var(--card-rgb)); position:relative;"
+        <div class="sl-swipe-inner" style="background:rgb(var(--card-rgb)); position:relative;"
             data-id="${esc(item.ingredientId)}" data-unit="${esc(item.unit)}" data-shortfall="${item.shortfall}">
             <div class="sl-item-main flex items-center gap-3 py-1.5 px-3 cursor-pointer select-none">
                 ${mediaHtml}
@@ -371,11 +328,11 @@ function boughtItemHtml(entry) {
         : `<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${icon} text-xs" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
 
     return `
-    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="background:rgb(var(--danger-rgb)); box-shadow:var(--shadow-card);">
-        <div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start">
+    <div class="sl-swipe-wrap relative rounded-xl mb-1.5 overflow-hidden" style="box-shadow:var(--shadow-card);">
+        <div class="sl-swipe-bg-undo absolute inset-0 flex items-center pl-5 justify-start" style="background:rgb(var(--danger-rgb)); opacity:0;">
             <i class="fas fa-rotate-left text-white text-lg"></i>
         </div>
-        <div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3 rounded-xl" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
+        <div class="sl-swipe-inner flex items-center gap-3 py-1.5 px-3" style="background:rgb(var(--card-rgb)); position:relative;" data-entry-id="${esc(entry.id)}">
             ${mediaHtml}
             <div class="flex-1 min-w-0">
                 <span class="block text-[13px] font-medium leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(entry.name)}</span>
@@ -390,6 +347,10 @@ function boughtItemHtml(entry) {
 function attachSwipe(container, opts) {
     const inner = container.querySelector('.sl-swipe-inner');
     if (!inner) return;
+    const bgBuy = container.querySelector('.sl-swipe-bg-buy');
+    const bgUndo = container.querySelector('.sl-swipe-bg-undo');
+    const showBg = (el) => { if (el) el.style.opacity = '1'; };
+    const hideBgs = () => { if (bgBuy) bgBuy.style.opacity = '0'; if (bgUndo) bgUndo.style.opacity = '0'; };
     let startX = 0, startY = 0, dx = 0, tracking = false, decided = false, goingH = false;
 
     container.addEventListener('pointerdown', (e) => {
@@ -408,10 +369,10 @@ function attachSwipe(container, opts) {
             decided = true;
             goingH = Math.abs(ddx) > Math.abs(ddy);
         }
-        if (!goingH) { tracking = false; inner.style.transform = ''; return; }
+        if (!goingH) { tracking = false; inner.style.transform = ''; hideBgs(); return; }
         dx = ddx;
-        if (dx > 0 && opts.onRight) inner.style.transform = `translateX(${Math.min(dx, 90)}px)`;
-        else if (dx < 0 && opts.onLeft) inner.style.transform = `translateX(${Math.max(dx, -90)}px)`;
+        if (dx > 0 && opts.onRight) { inner.style.transform = `translateX(${Math.min(dx, 90)}px)`; showBg(bgBuy); }
+        else if (dx < 0 && opts.onLeft) { inner.style.transform = `translateX(${Math.max(dx, -90)}px)`; showBg(bgUndo); }
     });
 
     const finish = () => {
@@ -427,6 +388,7 @@ function attachSwipe(container, opts) {
             setTimeout(opts.onLeft, 180);
         } else {
             inner.style.transform = '';
+            hideBgs();
         }
         dx = 0;
     };
@@ -436,6 +398,7 @@ function attachSwipe(container, opts) {
         tracking = false;
         inner.style.transition = 'transform 0.2s ease';
         inner.style.transform = '';
+        hideBgs();
         dx = 0;
     });
 }