${createCalendarPopoverHTML({
id: 'pantry-calendar-popover',
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
popoverStyle: 'left:0; right:auto; width:var(--recipe-dock-width, calc(100% - 2rem)); opacity:0; transform:translateY(-6px) scale(0.98);',
})}
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
}
/* ══════════════════════ HORIZON SELECTOR ══════════════════════ */
function syncHorizonUI() {
ensureValidHorizonDate();
const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover');
const filterCount = document.getElementById('pantry-filter-count');
const filterPillCount = document.getElementById('pantry-filter-pill-count');
const searchWrap = document.getElementById('pantry-search-wrap');
const searchShell = document.getElementById('pantry-search-shell');
const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
const rightBtn = document.getElementById('pantry-filter-bottom-btn');
const rightIcon = document.getElementById('pantry-right-btn-icon');
const searchDot = document.getElementById('pantry-search-active-dot');
const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact');
const chevron = document.getElementById('pantry-horizon-chevron');
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
const activeFilterCount = getActivePantryFilterCount();
syncCalendarPopoverVisibility({
popup: popover,
isOpen: isCalendarOpen,
chevron,
chevronOpenTransform: 'rotate(180deg)',
chevronClosedTransform: 'rotate(0deg)',
trigger: compactPill,
openTriggerStyle: {},
closedTriggerStyle: {},
triggerImportant: true,
});
if (filterPopover) {
filterPopover.style.opacity = isFilterOpen ? '1' : '0';
filterPopover.style.transform = isFilterOpen
? 'translateX(-50%) translateY(0) scale(1)'
: 'translateX(-50%) translateY(0.5rem) scale(0.98)';
filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
}
if (filterCount) {
filterCount.textContent = String(activeFilterCount);
filterCount.classList.toggle('hidden', true);
filterCount.classList.toggle('flex', false);
}
if (filterPillCount) {
filterPillCount.textContent = String(activeFilterCount);
filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
filterPillCount.classList.toggle('flex', activeFilterCount > 0);
}
if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
if (searchShell) {
searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
}
if (rightIcon) rightIcon.className = 'fas fa-xmark';
if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
renderCalendarPopover();
renderFilterPopover();
}
function renderCalendarPopover() {
pantryCalendar?.render();
}
function bindPantryCalendarInteractions() {
pantryCalendar = initSwipePopoverCalendar({
idPrefix: 'pantry-cal',
selectionMode: 'single',
panelHandlePx: 10,
panelHandleMin: 8,
panelHandleMax: 12,
getMonthAnchor: () => calendarMonthAnchor,
setMonthAnchor: (nextMonth) => {
const nextAnchor = startOfMonth(nextMonth);
const minAnchor = startOfMonth(getToday());
if (nextAnchor.getTime() < minAnchor.getTime()) return;
calendarMonthAnchor = nextAnchor;
},
canNavigateToMonth: (nextMonth) => {
const nextAnchor = startOfMonth(nextMonth);
const minAnchor = startOfMonth(getToday());
return nextAnchor.getTime() >= minAnchor.getTime();
},
getSelectionKeys: () => dateKey(horizonEndDate),
onSelectionCommit: (selectedKey) => {
selectHorizonDate(new Date(`${selectedKey}T00:00:00`));
},
resolveDayState: (day, { inCurrentMonth }) => {
const isPast = day.getTime() < getToday().getTime();
return {
disabled: isPast,
dimmed: isPast || !inCurrentMonth,
showDot: dayHasAnyMeal(loadPlans(), day),
};
},
theme: PANTRY_CALENDAR_THEME,
});
pantryCalendar.render();
}
function filterChipHtml(kind, value, label, active) {
return `Brak wyników — zmień filtry lub wyszukiwanie.
`;
return;
}
let html = '';
// Section 1: Potrzebne (shortfalls)
if (shortfalls.length > 0) {
html += `
Brak zaplanowanych posiłków
Zaplanuj posiłki, a spiżarnia pokaże czego potrzebujesz i co masz na stanie.
` + html;
}
root.innerHTML = html;
// Bind tile clicks
root.querySelectorAll('.pv2-tile').forEach((btn) => {
btn.addEventListener('click', () => openIngredientCard(btn.dataset.id, null));
});
}
/* ══════════════════════ INGREDIENT SHEET ══════════════════════ */
function openIngredientCard(ingredientId, productId) {
ingredientCard?.open({
ingredientId,
productId,
sourceNote: 'Ze spiżarni',
onAfterChange: () => renderBoard(),
});
}
/* ══════════════════════ PUBLIC API ══════════════════════ */
export function refreshPantry() {
syncHorizonUI();
renderBoard();
ingredientCard?.refresh();
}
export function setupPantry() {
ensureFilterPopoverStyles();
if (!ingredientCard) {
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
ingredientCard.bind();
}
syncHorizonUI();
renderBoard();
// Search
document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
setPantrySearchOpen(true, { focusInput: true });
});
document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
pantrySearchQuery = event.target.value.trim();
renderBoard();
});
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
event.stopPropagation();
setPantrySearchOpen(false, { clearQuery: true });
});
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
}
});
document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
if (pantrySearchOpen) return;
closeCalendar();
toggleFilterPanel();
});
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
event.stopPropagation();
pantryFilters = { categories: [], sections: [] };
syncHorizonUI();
renderBoard();
});
document.getElementById('pantry-filter-panel-body')?.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof Element)) return;
const chip = target.closest('[data-pantry-filter-kind]');
if (!(chip instanceof Element)) return;
event.stopPropagation();
const kind = chip.getAttribute('data-pantry-filter-kind');
const value = chip.getAttribute('data-pantry-filter-value');
if (!kind || !value) return;
if (kind === 'category') {
pantryFilters = {
...pantryFilters,
categories: toggleStringFilter(pantryFilters.categories, value),
};
}
if (kind === 'section') {
pantryFilters = {
...pantryFilters,
sections: toggleStringFilter(pantryFilters.sections, value),
};
}
syncHorizonUI();
renderBoard();
});
// Horizon pill + calendar
document.getElementById('pantry-horizon-compact')?.addEventListener('click', (event) => {
event.stopPropagation();
isCalendarOpen ? closeCalendar() : openCalendar();
});
bindPantryCalendarInteractions();
if (!pantryGlobalListenersBound) {
pantryGlobalListenersBound = true;
document.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof Element)) return;
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
closeCalendar();
}
if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
closeFilter();
}
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
if (pantrySearchOpen) {
setPantrySearchOpen(false, { clearQuery: true });
return;
}
if (pantrySearchQuery) clearSearchInput();
if (isFilterOpen) closeFilter();
});
window.addEventListener('app-tab-change', () => {
if (pantrySearchOpen) setPantrySearchOpen(false);
closeFilter();
closeCalendar();
});
window.closePantrySearch = () => {
if (pantrySearchOpen) setPantrySearchOpen(false);
};
window.closePantryFilter = () => {
closeFilter();
};
}
window.refreshPantry = refreshPantry;
}