@@ -5,7 +5,7 @@ import {
pantryQtyStep ,
getProductsForIngredient ,
ingredientHasProducts ,
} from '../data/catalog.js?v=6 ' ;
} from '../data/catalog.js?v=8 ' ;
import { addIngredientToKitchenList , categoryLabel , loadPantry , setPantryQty , setPantryProductQty , getPantryTotal , getPantryProducts , getPantryGeneric } from '../services/pantryShopping.js?v=2' ;
import { showAppToast } from '../ui/toast.js' ;
@@ -34,6 +34,8 @@ const CATEGORY_ICONS = {
inne : 'fa-jar' ,
} ;
const SEARCH _SHELL _SHADOW = '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)' ;
/* ── state ── */
let showOnlyStock = false ;
@@ -51,86 +53,74 @@ const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
export function getPantryHTML ( ) {
return `
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24 ">
<div class="shrink-0 bg-white border-b border-gray-100 mt-3 px-4 pt-2 pb-2.5 space-y-2">
<div class="flex items-center gap-2.5 bg-gray-100 rounded-2xl px-3.5 py-2.5 focus-within:ring-2 focus-within:ring-gray-900/10 transition-all">
<i class="fas fa-search text-gray-400 text-xs"></i>
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj produktu…"
class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" />
</div>
<div id="pantry-category-chips" class="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
<div class="flex items-center justify-end">
<label class="flex items-center gap-2 cursor-pointer select-none">
<span class="text-xs font-medium text-gray-500">Tylko na stanie</span>
<button type="button" id="pantry-stock-toggle" role="switch" aria-checked="false"
class="relative w-10 h-[22px] rounded-full bg-gray-200 transition-colors duration-200 shrink-0">
<span class="absolute left-0.5 top-0.5 w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-transform duration-200"></span>
</button>
</label>
</div>
</div>
<div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important; ">
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar" >
<div id="pantry-board" class="px-4 pt-3 pb -4 space-y-2"></div >
</div >
<!-- ── product sheet ── -- >
<div id="pv2-edit-bg" class="absolute inset-0 z-[38] bg-black/40 hidden opacity-0 transition-opacity duration-200"></div >
<div id="pv2-edit-sheet" class="absolute left-0 right-0 z-[40] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] px-5 pt-2 pb-4 flex flex-col gap-2.5 max-h-[75%] min-h-0 overflow-y-auto no-scrollbar"
style="bottom: ${ BOTTOM } ;transform: ${ HIDDEN _Y } ;transition:transform 300ms cubic-bezier(.32,.72,0,1)">
<div class="w-10 h-1 bg-gray-200 rounded-full mx-auto shrink-0"></div>
<div class="shrink-0">
<h2 id="pv2-edit-name" class="text-[15px] font-bold text-gray-900 leading-snug"></h2>
<p id="pv2-edit-meta" class="text-[11px] text-gray-500"></p>
</div>
<div class="shrink-0 flex items-center gap-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Zapas</span>
<button type="button" id="pv2-edit-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
<i class="fas fa-minus text-xs"></i>
<!-- ── floating search bar ── -- >
<div class="pointer-events-none absolute inset-x-0 top-0 z-[12] px -4 pt-4" style="background:transparent !important; border:none !important;" >
<div id="pantry-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow: ${ SEARCH _SHELL _SHADOW } !important;" >
<input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; color:#ddd6ca;" >
<button id="pantry-filter-btn" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; color:#c9c3b8;" aria-label="Filtry" >
<i class="fas fa-sliders-h"></i>
</button>
<div class="flex items-baseline gap-0.5" >
<input type="number" id="pv2-edit-qty" min="0" step="1" inputmode="decimal"
class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="0" />
<span id="pv2-edit-unit" class="text-xs text-gray-400 font-medium"></span >
</div >
</div>
<!-- ── filter popup ── -- >
<div id="pantry-filter-overlay" class="absolute inset-0 z-[55] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:rgba(0,0,0,0.5) !important;">
<div id="pantry-filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.5rem] border" style="background:#393937 !important; border-color:#444442 !important; opacity:0; transform:translateY(-0.5rem) scale(0.98); transform-origin:top center; transition:opacity 180ms ease, transform 180ms ease; box-shadow:0 18px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.18);">
<div class="shrink-0 px-4 pt-3 pb-2 flex items-center justify-between" style="border-bottom:1px solid #444442;">
<p class="text-[12px] font-bold uppercase tracking-wider" style="color:#9b978f;">Filtry</p>
<button id="pantry-filter-clear" type="button" class="px-3 py-1 rounded-full border text-[11px] font-semibold transition-colors" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">Wyczyść</button>
</div>
<button type="button" id="pv2-edit-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0 ">
<i class="fas fa-plus text-xs"></i >
</button >
</div>
<div id="pv2-product-breakdown" class="shrink-0"></div>
<div class="border-t border-gray-100 shrink-0"></div>
<div class="shrink-0 space-y-1">
<div class="flex items-center gap-2">
<span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Lista</span>
<button type="button" id="pv2-shop-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
<i class="fas fa-minus text-xs"></i>
</button>
<div class="flex items-baseline gap-0.5">
<input type="number" id="pv2-shop-qty" min="1" step="1" inputmode="numeric"
class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="1" />
<span id="pv2-shop-unit" class="text-xs text-gray-400 font-medium"></span>
<div class="px-4 py-3 space-y-3 overflow-y-auto no-scrollbar" style="max-height:60vh; ">
<div >
<p class="text-[10px] font-bold uppercase tracking-wider mb-2" style="color:#9b978f;">Kategorie</p >
<div id="pantry-filter-categories" class="flex flex-wrap gap-1.5"> </div>
</div>
<button typ e="button" id="pv2-shop-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0 ">
<i class="fas fa-plus text-xs"></i >
</butto n>
<button type="button" id="pv2-shop-add" class="ml-auto shrink-0 px-3.5 py-2 rounded-xl bg-gray-900 text-white text-[11px] font-semibold hover:bg-black transition-colors active:scale-95" >
<i class="fas fa-cart-plus text-[9px] mr-1"></i>Dodaj
<div s tyl e="border-top:1px solid #444442; padding-top:0.75rem; ">
<button type="button" id="pantry-filter-stock" class="w-full flex items-center justify-between px-3 py-2 rounded-xl transition-colors" style="background:#2f2f2d;" >
<span class="text-[12px] font-semibold" style="color:#d7d2c8;">Tylko na stanie</spa n>
<span id="pantry-filter-stock-check" class="w-5 h-5 rounded-md flex items-center justify-center" style="border:1.5px solid #56534f;"></span >
</button>
</div>
</div>
</div>
</div>
<!-- ── scrollable content ── -->
<div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[4.5rem] pb-24" style="background:#2d2e2b !important;">
<div id="pantry-board" class="space-y-4"></div>
</div>
<!-- ── ingredient card popup ── -->
<div id="pv2-card-overlay" class="absolute inset-0 z-[60] bg-black/50 hidden flex items-center justify-center p-5" style="pointer-events:none;">
<div id="pv2-card" class="relative w-full max-w-xs rounded-2xl shadow-2xl overflow-hidden" style="background:#2d2e2b; pointer-events:auto; max-height:85vh; overflow-y:auto;">
<div id="pv2-card-hero" class="relative w-full h-[160px] overflow-hidden" style="background:#393937;">
<img id="pv2-card-img" class="w-full h-full object-cover hidden" alt="" />
<div id="pv2-card-fallback" class="w-full h-full flex items-center justify-center">
<i id="pv2-card-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
</div>
<button type="button" id="pv2-card-close" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
<i class="fas fa-times text-sm"></i>
</button>
</div>
<p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p >
<div class="px-4 pt-3 pb-4 space-y-3" >
<div>
<p id="pv2-card-category" class="text-[10px] font-semibold uppercase tracking-wider" style="color:#9b978f;"></p>
<h3 id="pv2-card-name" class="text-[15px] font-bold leading-snug mt-0.5" style="color:#ddd6ca;"></h3>
<p id="pv2-card-pack" class="text-[11px] mt-0.5 hidden" style="color:#9b978f;"></p>
</div>
<div id="pv2-card-nutrition"></div>
<div id="pv2-card-stock-section"></div>
<div id="pv2-card-shop-section"></div>
</div>
</div>
<div id="pv2-edit-nutrition" class="shrink-0"></div>
</div>
</div> ` ;
}
/* ══════════════════════ CATEGORY CHIPS (multi-select) ══════════════════════ */
/* ══════════════════════ FILTER POPUP ══════════════════════ */
function allCategoryKeys ( ) {
const s = new Set ( ) ;
@@ -138,31 +128,91 @@ function allCategoryKeys() {
return [ ... s ] . sort ( ( a , b ) => categoryLabel ( a ) . localeCompare ( categoryLabel ( b ) ) ) ;
}
function renderCategoryChips ( ) {
const wrap = document . getElementById ( 'pantry-category-chips' ) ;
if ( ! wrap ) return ;
let filterCloseTimer = null ;
function renderFilterCategories ( ) {
const wrap = document . getElementById ( 'pantry-filter-categories' ) ;
if ( ! wrap ) return ;
const keys = allCategoryKeys ( ) ;
wrap . innerHTML = keys . map ( k => {
const active = selectedCategories . has ( k ) ;
const icon = CATEGORY _ICONS [ k ] || 'fa-jar' ;
const cls = active
? 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-900 text-white transition-colors'
: 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors ' ;
return ` <button type="button" data-cat=" ${ esc ( k ) } " class="pv2-cat-chip ${ cls } "><i class="fas ${ icon } text-[10px]"></i> ${ esc ( categoryLabel ( k ) ) } </button> ` ;
const bg = active ? '#23221e' : '#2f2f2d' ;
const border = active ? '#787876' : '#444442' ;
const text = active ? '#f2efe8' : '#d7d2c8 ' ;
return ` <button type="button" data-cat=" ${ esc ( k ) } " class="pv2-filter-cat px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors inline-flex items-center gap-1.5" style="background: ${ bg } ; border-color: ${ border } ; color: ${ text } ; "><i class="fas ${ icon } text-[10px]"></i> ${ esc ( categoryLabel ( k ) ) } </button> ` ;
} ) . join ( '' ) ;
}
wrap . querySelectorAll ( '.pv2-cat-chip' ) . forEach ( btn => {
btn . addEventListener ( 'click' , ( ) => {
const cat = btn . dataset . cat ;
if ( selectedCategories . has ( cat ) ) selectedCategories . delete ( cat ) ;
else selectedCategories . add ( cat ) ;
renderCategoryChips ( ) ;
renderBoard ( ) ;
} ) ;
function renderFilterStockCheck ( ) {
const el = document . getElementById ( 'pantry-filter-stock-check' ) ;
if ( ! el ) return ;
el . innerHTML = showOnlyStock ? '<i class="fas fa-check text-[10px]" style="color:#6ee7b7;"></i>' : '' ;
el . style . background = showOnlyStock ? '#23221e' : 'transparent' ;
el . style . borderColor = showOnlyStock ? '#787876' : '#56534f' ;
}
function updateFilterBadge ( ) {
const btn = document . getElementById ( 'pantry-filter-btn' ) ;
if ( ! btn ) return ;
const count = selectedCategories . size + ( showOnlyStock ? 1 : 0 ) ;
btn . style . color = count > 0 ? '#6ee7b7' : '#c9c3b8' ;
}
function positionFilterPanel ( ) {
const panel = document . getElementById ( 'pantry-filter-panel' ) ;
const shell = document . getElementById ( 'pantry-search-shell' ) ;
const view = document . getElementById ( 'pantry-view' ) ;
if ( ! panel || ! shell || ! view ) return ;
const viewRect = view . getBoundingClientRect ( ) ;
const shellRect = shell . getBoundingClientRect ( ) ;
const gap = 8 ;
const margin = 12 ;
const width = Math . min ( shellRect . width , viewRect . width - margin * 2 ) ;
const top = shellRect . bottom - viewRect . top + gap ;
const left = Math . max ( margin , Math . min ( shellRect . left - viewRect . left , viewRect . width - width - margin ) ) ;
panel . style . width = ` ${ width } px ` ;
panel . style . left = ` ${ left } px ` ;
panel . style . top = ` ${ top } px ` ;
}
function openFilterPopup ( ) {
const overlay = document . getElementById ( 'pantry-filter-overlay' ) ;
const panel = document . getElementById ( 'pantry-filter-panel' ) ;
if ( ! overlay || ! panel ) return ;
clearTimeout ( filterCloseTimer ) ;
renderFilterCategories ( ) ;
renderFilterStockCheck ( ) ;
positionFilterPanel ( ) ;
overlay . classList . remove ( 'hidden' ) ;
overlay . style . pointerEvents = 'auto' ;
requestAnimationFrame ( ( ) => {
overlay . classList . add ( 'opacity-100' ) ;
panel . style . opacity = '1' ;
panel . style . transform = 'translateY(0) scale(1)' ;
} ) ;
}
function closeFilterPopup ( ) {
const overlay = document . getElementById ( 'pantry-filter-overlay' ) ;
const panel = document . getElementById ( 'pantry-filter-panel' ) ;
if ( ! overlay || ! panel ) return ;
overlay . classList . remove ( 'opacity-100' ) ;
overlay . style . pointerEvents = 'none' ;
panel . style . opacity = '0' ;
panel . style . transform = 'translateY(-0.5rem) scale(0.98)' ;
filterCloseTimer = setTimeout ( ( ) => overlay . classList . add ( 'hidden' ) , 180 ) ;
}
function isFilterOpen ( ) {
return ! document . getElementById ( 'pantry-filter-overlay' ) ? . classList . contains ( 'hidden' ) ;
}
// Keep old name for refreshPantry compatibility
function renderCategoryChips ( ) {
updateFilterBadge ( ) ;
}
/* ══════════════════════ BOARD RENDERING ══════════════════════ */
function getFilteredIds ( searchRaw ) {
@@ -175,21 +225,34 @@ function getFilteredIds(searchRaw) {
} ) . sort ( ( a , b ) => INGREDIENTS [ a ] . name . localeCompare ( INGREDIENTS [ b ] . name , 'pl' ) ) ;
}
function chip Html( id , pantry ) {
function row Html( id , pantry ) {
const def = INGREDIENTS [ id ] ;
const qty = getPantryTotal ( id , pantry ) ;
const u = unitLabel ( def . pantryUnit ) ;
const hasStock = qty > 0 ;
const icon = CATEGORY _ICONS [ def . category ] || 'fa-jar' ;
const products = getProductsForIngredient ( id ) ;
const productCount = products . length ;
if ( qty > 0 ) {
return ` <button type="button" class="pv2-chip inline-flex flex-col items-start px-3.5 py-2.5 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id=" ${ esc ( id ) } ">
<span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap"> ${ esc ( def . name ) } </span>
<span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5"> ${ Math . round ( qty ) } ${ esc ( u ) } </span>
</button> ` ;
}
const avatar = def . image
? ` <img src=" ${ esc ( def . image ) } " alt="" class="w-10 h-10 rounded-xl object-cover shrink-0"> `
: ` <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${ icon } text-sm" style="color:#6d6c67;"></i></div> ` ;
return ` <button type="button" class="pv2-chip inline-flex items-center px-3.5 py-2.5 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id=" ${ esc ( id ) } ">
<span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors"> ${ esc ( def . name ) } </span>
<i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
const qtyColor = hasStock ? '#6ee7b7' : '#6d6c67' ;
const qtyText = hasStock ? ` ${ Math . round ( qty ) } ${ esc ( u ) } ` : ` 0 ${ esc ( u ) } ` ;
let meta = esc ( categoryLabel ( def . category ) ) ;
if ( productCount > 0 ) meta += ` · ${ productCount } ${ productCount === 1 ? 'produkt' : productCount < 5 ? 'produkty' : 'produktów' } ` ;
return ` <button type="button" class="pv2-chip w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:#393937;" data-id=" ${ esc ( id ) } ">
${ avatar }
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between gap-2">
<span class="text-[13px] font-semibold truncate" style="color:#ddd6ca;"> ${ esc ( def . name ) } </span>
<span class="text-[13px] font-bold tabular-nums shrink-0" style="color: ${ qtyColor } ;"> ${ qtyText } </span>
</div>
<span class="text-[11px] block mt-0.5" style="color:#9b978f;"> ${ meta } </span>
</div>
</button> ` ;
}
@@ -220,13 +283,13 @@ function renderBoard() {
if ( visible . length === 0 ) {
root . innerHTML = showOnlyStock
? ` <div class="flex flex-col items-center justify-center py-16 text-center">
<div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
<i class="fas fa-box-open text-2xl text-gray-300 "></i>
<div class="w-16 h-16 rounded-full flex items-center justify-center mb-4" style="background:#393937;" >
<i class="fas fa-box-open text-2xl" style="color:#6d6c67; "></i>
</div>
<p class="text-sm font-semibold text-gray-700 ">Nic na stanie</p>
<p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
<p class="text-sm font-semibold" style="color:#ddd6ca; ">Nic na stanie</p>
<p class="text-xs mt-1 max-w-[220px] leading-relaxed" style="color:#9b978f;" >Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
</div> `
: ` <p class="text-sm text-gray-500 text-center py-10 ">Brak wyników — zmień wyszukiwanie lub filtry.</p> ` ;
: ` <p class="text-sm text-center py-10" style="color:#9b978f; ">Brak wyników — zmień wyszukiwanie lub filtry.</p> ` ;
return ;
}
@@ -236,41 +299,26 @@ function renderBoard() {
const icon = CATEGORY _ICONS [ cat ] || 'fa-jar' ;
html += `
<div class="mb-4 last:mb-0">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-0.5">
<p class="text-[10px] font-bold uppercase tracking-wider mb-2 px-0.5" style="color:#9b978f;" >
<i class="fas ${ icon } text-[10px] mr-1"></i> ${ esc ( categoryLabel ( cat ) ) }
</p>
<div class="flex flex-wrap gap -2"> ${ ids . map ( id => chip Html( id , pantry ) ) . join ( '' ) } </div>
<div class="space-y -2"> ${ ids . map ( id => row Html( id , pantry ) ) . join ( '' ) } </div>
</div> ` ;
}
root . innerHTML = html ;
root . querySelectorAll ( '.pv2-chip' ) . forEach ( btn => {
btn . addEventListener ( 'click' , ( ) => openEditSheet ( btn . dataset . id ) ) ;
btn . addEventListener ( 'click' , ( ) => openIngredientCard ( btn . dataset . id ) ) ;
} ) ;
}
/* ══════════════════════ STOCK TOGGLE ══════════════════════ */
function updateToggleVisuals ( ) {
const btn = document . getElementById ( 'pantry-stock-toggle' ) ;
if ( ! btn ) return ;
const thumb = btn . querySelector ( 'span' ) ;
btn . setAttribute ( 'aria-checked' , String ( showOnlyStock ) ) ;
if ( showOnlyStock ) {
btn . classList . remove ( 'bg-gray-200' ) ;
btn . classList . add ( 'bg-emerald-500' ) ;
thumb ? . classList . add ( 'translate-x-[18px]' ) ;
} else {
btn . classList . add ( 'bg-gray-200' ) ;
btn . classList . remove ( 'bg-emerald-500' ) ;
thumb ? . classList . remove ( 'translate-x-[18px]' ) ;
}
}
/* ══════════════════════ EDIT BOTTOM SHEET ══════════════════════ */
/* ══════════════════════ INGREDIENT CARD ══════════════════════ */
function openEditSheet ( ingredientId ) {
function openIngredientCard ( ingredientId ) {
const def = INGREDIENTS [ ingredientId ] ;
if ( ! def ) return ;
editingId = ingredientId ;
@@ -278,257 +326,185 @@ function openEditSheet(ingredientId) {
const pantry = loadPantry ( ) ;
const qty = getPantryTotal ( ingredientId , pantry ) ;
const u = unitLabel ( def . pantryUnit ) ;
const step = pantryQtyStep ( ingredientId ) ;
const pack = def . purchasePack ;
const icon = CATEGORY _ICONS [ def . category ] || 'fa-jar' ;
const nameEl = document . getElementById ( 'pv2-edit-name' ) ;
if ( nameEl ) nameEl . textContent = def . name ;
const metaEl = document . getElementById ( 'pv2-edit-meta ' ) ;
if ( metaEl ) {
let meta = categoryLabel ( def . category ) ;
if ( pack ) meta += ` · ${ pack . label || ` ${ pack . amount } ${ u } ` } ` ;
metaEl . textContent = meta ;
// Hero image
const img = document . getElementById ( 'pv2-card-img' ) ;
const fallback = document . getElementById ( 'pv2-card-fallback' ) ;
const fallbackIcon = document . getElementById ( 'pv2-card-fallback-icon ' ) ;
if ( def . image ) {
img . src = def . image ; img . alt = def . name ; img . classList . remove ( 'hidden' ) ; fallback . classList . add ( 'hidden' ) ;
} else {
img . classList . add ( 'hidden' ) ; fallback . classList . remove ( 'hidden' ) ;
if ( fallbackIcon ) fallbackIcon . className = ` fas ${ icon } text-3xl ` ;
}
const qtyEl = document . getElementById ( 'pv2-edit-qty' ) ;
if ( qtyEl ) qtyEl . value = qty > 0 ? String ( Math . round ( qty ) ) : '0' ;
const unit El= document . getElementById ( 'pv2-edit-unit ' ) ;
if ( unitEl ) unitEl . textContent = u ;
editShopUsesPacks = Boolean ( pack && pack . amount > 0 ) ;
editShopStep = editShopUsesPacks ? 1 : step ;
const shopQtyEl = document . getElementById ( 'pv2-shop-qty' ) ;
if ( shopQtyEl ) shopQtyEl . value = String ( editShopStep ) ;
const shopUnitEl = document . getElementById ( 'pv2-shop-unit' ) ;
if ( shopUnitEl ) shopUnitEl . textContent = editShopUsesPacks ? 'opak.' : u ;
const shopHintEl = document . getElementById ( 'pv2-shop-hint' ) ;
if ( shopHintEl ) {
if ( editShopUsesPacks ) {
const lab = pack . label || ` ${ pack . amount } ${ u } ` ;
shopHintEl . textContent = ` 1 opak. = ${ lab } ` ;
} else {
shopHintEl . textContent = '' ;
}
// Header
document . getElementById ( 'pv2-card-category' ) . textContent = categoryLabel ( def . category ) ;
document . getElementById ( 'pv2-card-name' ) . textContent = def . name ;
const pack El= document . getElementById ( 'pv2-card-pack ' ) ;
if ( def . purchasePack ) {
packEl . textContent = def . purchasePack . label || ` ${ def . purchasePack . amount } ${ u } ` ;
packEl . classList . remove ( 'hidden' ) ;
} else {
packEl . classList . add ( 'hidden' ) ;
}
// Hide main +/- when products exist (total is sum of product rows)
const hasProds = ingredientHasProducts ( ingredientId ) ;
const mainMinus = document . getElementById ( 'pv2-edit-minus' ) ;
const mainPlus = document . getElementById ( 'pv2-edit-plus' ) ;
const mainQtyInput = document . getElementById ( 'pv2-edit-qty' ) ;
if ( mainMinus ) mainMinus . classList . toggle ( 'hidden' , hasProds ) ;
if ( mainPlus ) mainPlus . classList . toggle ( 'hidden' , hasProds ) ;
if ( mainQtyInput ) mainQtyInput . readOnly = hasProds ;
// Nutrition
renderCardNutrition ( def ) ;
renderProductBreakdown ( ingredientId , pantry ) ;
renderNutritionInSheet ( def ) ;
// Stock
renderCardStock ( ingredientId , pantry ) ;
const bg = document . getElementById ( 'pv2-edit-bg' ) ;
const sheet = document . getElementById ( 'pv2-edit-sheet' ) ;
if ( ! bg || ! sheet ) return ;
bg . classList . remove ( 'hidden' ) ;
sheet . classList . remove ( 'hidden ') ;
requestAnimationFrame ( ( ) => {
bg . classList . remove ( 'opacity-0' ) ;
sheet . style . transform = 'translateY(0)' ;
} ) ;
// Shopping
renderCardShop ( ingredientId ) ;
// Show
const overlay = document . getElementById ( 'pv2-card-overlay ') ;
if ( overlay ) { overlay . classList . remove ( 'hidden' ) ; overlay . style . pointerEvents = 'auto' ; }
}
function nutritionListRow ( label , valueHtml ) {
return ` <li class="flex items-baseline justify-between gap-3 py-0.5 border-b border-gray-100/80 last:border-0">
<span class="text-gray-500 shrink-0"> ${ esc ( label ) } </span>
<span class="text-right font-semibold tabular-nums text-gray-800"> ${ valueHtml } </span>
</li> ` ;
function closeIngredientCard ( ) {
const overlay = document . getElementById ( 'pv2-card-overlay' ) ;
if ( overlay ) { overlay . classList . add ( 'hidden' ) ; overlay . style . pointerEvents = 'none' ; }
editingId = null ;
renderBoard ( ) ;
}
function renderProductBreakdown ( ingredientId , pantry ) {
const wrap = document . getElementById ( 'pv2-product-breakdow n' ) ;
function renderCardNutrition ( def ) {
const wrap = document . getElementById ( 'pv2-card-nutritio n' ) ;
if ( ! wrap ) return ;
const products = getProductsForIngredient ( ingredientId ) ;
if ( products . length === 0 ) { wrap . innerHTML = '' ; return ; }
const def = INGREDIENTS [ ingredientId ] ;
const u = unitLabel ( def . pantryUnit ) ;
const pantryProducts = getPantryProducts ( ingredientId , pantry ) ;
const generic = getPantryGeneric ( ingredientId , pantry ) ;
const productQty = ( pid ) => {
const item = pantryProducts . find ( i => i . productId === pid ) ;
return item ? item . qty : 0 ;
} ;
const rows = products . map ( p => {
const q = Math . round ( productQty ( p . id ) ) ;
return ` <div class="flex items-center gap-1.5 py-1" data-product-row=" ${ esc ( p . id ) } ">
<span class="flex-1 text-[12px] text-gray-700 truncate" title=" ${ esc ( p . name ) } "> ${ esc ( p . name ) } </span>
<button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid=" ${ esc ( p . id ) } " data-step=" ${ p . packSize } ">
<i class="fas fa-minus text-[9px]"></i>
</button>
<span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800"> ${ q } ${ esc ( u ) } </span>
<button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid=" ${ esc ( p . id ) } " data-step=" ${ p . packSize } ">
<i class="fas fa-plus text-[9px]"></i>
</button>
</div> ` ;
} ) . join ( '' ) ;
const genericRow = ` <div class="flex items-center gap-1.5 py-1" data-product-row="_generic">
<span class="flex-1 text-[12px] text-gray-500 italic truncate">Nieokreślony</span>
<button type="button" class="pv2-prod-minus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step=" ${ pantryQtyStep ( ingredientId ) } ">
<i class="fas fa-minus text-[9px]"></i>
</button>
<span class="pv2-prod-qty w-12 text-center text-[13px] font-semibold tabular-nums text-gray-800"> ${ Math . round ( generic ) } ${ esc ( u ) } </span>
<button type="button" class="pv2-prod-plus w-7 h-7 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0" data-pid="_generic" data-step=" ${ pantryQtyStep ( ingredientId ) } ">
<i class="fas fa-plus text-[9px]"></i>
</button>
</div> ` ;
const n = def . nutritionPer100g ;
if ( ! n ) { wrap . innerHTML = '' ; return ; }
const label = def . pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g' ;
wrap . innerHTML = `
<div class="space-y-0.5 px-0.5" >
<p class="text-[9px] font-semibold uppercase tracking-wide text-gray-400 mb-1">Produkty</p >
${ rows }
${ genericRow }
</div> ` ;
<p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;"> ${ esc ( label ) } </p >
<div class="grid grid-cols-4 gap-1.5" >
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<p class="text-[15px] font-bold tabular-nums leading-tight" style="color:#ddd6ca;"> ${ n . kcal } </p>
<p class="text-[9px] font-medium" style="color:#9b978f;">kcal</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight"> ${ n . protein } g</p>
<p class="text-[9px] font-medium" style="color:#9b978f;">białko</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight"> ${ n . fat } g</p>
<p class="text-[9px] font-medium" style="color:#9b978f;">tłuszcz</p>
</div>
<div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
<p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight"> ${ n . carbs } g</p>
<p class="text-[9px] font-medium" style="color:#9b978f;">węgl.</p>
</div>
</div> ` ;
}
// Bind product +/- buttons
wrap . querySelectorAll ( '. pv2-prod-plus, .pv2-prod-minus' ) . forEach ( btn => {
function renderCardStock ( ingredientId , pantry ) {
const wrap = document . getElementById ( 'pv2-card-stock-section' ) ;
if ( ! wrap ) return ;
const def = INGREDIENTS [ ingredientId ] ;
if ( ! def ) return ;
const u = unitLabel ( def . pantryUnit ) ;
const qty = getPantryTotal ( ingredientId , pantry ) ;
const products = getProductsForIngredient ( ingredientId ) ;
const hasProds = products . length > 0 ;
let html = ` <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p> ` ;
if ( hasProds ) {
const pantryProducts = getPantryProducts ( ingredientId , pantry ) ;
const generic = getPantryGeneric ( ingredientId , pantry ) ;
const productQty = ( pid ) => pantryProducts . find ( i => i . productId === pid ) ? . qty || 0 ;
html += ` <div class="rounded-xl px-3 py-2 space-y-1.5" style="background:#393937;"> ` ;
html += ` <div class="flex items-center justify-between"><span class="text-[12px] font-semibold" style="color:#9b978f;">Łącznie</span><span class="text-[13px] font-bold tabular-nums" style="color:#6ee7b7;"> ${ Math . round ( qty ) } ${ esc ( u ) } </span></div> ` ;
html += ` <div style="border-top:1px solid #444442; padding-top:0.375rem;" class="space-y-1"> ` ;
for ( const p of products ) {
const q = Math . round ( productQty ( p . id ) ) ;
html += ` <div class="flex items-center gap-1.5">
<span class="flex-1 text-[12px] truncate" style="color:#d7d2c8;"> ${ esc ( p . name ) } </span>
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid=" ${ esc ( p . id ) } " data-step=" ${ p . packSize } " data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
<span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;"> ${ q } ${ esc ( u ) } </span>
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid=" ${ esc ( p . id ) } " data-step=" ${ p . packSize } " data-dir="1"><i class="fas fa-plus text-[9px]"></i></button>
</div> ` ;
}
html += ` <div class="flex items-center gap-1.5">
<span class="flex-1 text-[12px] italic truncate" style="color:#9b978f;">Nieokreślony</span>
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step=" ${ pantryQtyStep ( ingredientId ) } " data-dir="-1"><i class="fas fa-minus text-[9px]"></i></button>
<span class="w-12 text-center text-[12px] font-semibold tabular-nums" style="color:#ddd6ca;"> ${ Math . round ( generic ) } ${ esc ( u ) } </span>
<button type="button" class="pv2-stock-btn w-7 h-7 rounded-lg flex items-center justify-center active:scale-95 shrink-0" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step=" ${ pantryQtyStep ( ingredientId ) } " data-dir="1"><i class="fas fa-plus text-[9px]"></i></button>
</div> ` ;
html += ` </div></div> ` ;
} else {
const step = pantryQtyStep ( ingredientId ) ;
html += ` <div class="flex items-center justify-center gap-3 rounded-xl px-3 py-2" style="background:#393937;">
<button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step=" ${ step } " data-dir="-1"><i class="fas fa-minus text-xs"></i></button>
<span class="text-[17px] font-bold tabular-nums" style="color:#6ee7b7;"> ${ Math . round ( qty ) } ${ esc ( u ) } </span>
<button type="button" class="pv2-stock-btn w-9 h-9 rounded-xl flex items-center justify-center active:scale-95" style="background:#2f2f2d; color:#d7d2c8;" data-pid="_generic" data-step=" ${ step } " data-dir="1"><i class="fas fa-plus text-xs"></i></button>
</div> ` ;
}
wrap . innerHTML = html ;
// Bind stock buttons
wrap . querySelectorAll ( '.pv2-stock-btn' ) . forEach ( btn => {
btn . addEventListener ( 'click' , ( ) => {
if ( ! editingId ) return ;
const pid = btn . dataset . pid ;
const step = Number ( btn . dataset . step ) || 1 ;
const isPlus = btn . classList . contains ( 'pv2-prod-plus' ) ;
const pantry = loadPantry ( ) ;
const dir = Number ( btn . dataset . dir ) ;
const p = loadPantry ( ) ;
if ( pid === '_generic' ) {
const cur = getPantryGeneric ( editingId , pantry ) ;
const next = Math . max ( 0 , cur + ( isPlus ? step : - step ) ) ;
setPantryQty ( editingId , next ) ;
const cur = getPantryGeneric ( editingId , p ) ;
setPantryQty ( editingId , Math . max ( 0 , cur + step * dir ) ) ;
} else {
const items = getPantryProducts ( editingId , pantry ) ;
const items = getPantryProducts ( editingId , p ) ;
const cur = items . find ( i => i . productId === pid ) ? . qty || 0 ;
const next = Math . max ( 0 , cur + ( isPlus ? step : - step ) ) ;
setPantryProductQty ( editingId , pid , next ) ;
setPantryProductQty ( editingId , pid , Math . max ( 0 , cur + step * dir ) ) ;
}
// Re-render breakdown and total
const freshPantry = loadPantry ( ) ;
renderProductBreakdown ( editingId , freshPantry ) ;
const totalQty = getPantryTotal ( editingId , freshPantry ) ;
setEditQty ( totalQty ) ;
renderCardStock ( editingId , loadPantry ( ) ) ;
} ) ;
} ) ;
}
function renderNutritionInSheet ( def ) {
const wrap = document . getElementById ( 'pv2-edit-nutri tion' ) ;
function renderCardShop ( ingredientId ) {
const wrap = document . getElementById ( 'pv2-card-shop-sec tion' ) ;
if ( ! wrap ) return ;
const n = def . nutritionPer100g ;
if ( ! n ) { wrap . innerHTML = '' ; return ; }
const def = INGREDIENTS [ ingredientId ] ;
if ( ! def ) return ;
const u = unitLabel ( def . pantryUnit ) ;
const pack = def . purchasePack ;
const usesPacks = Boolean ( pack && pack . amount > 0 ) ;
const hint = usesPacks ? ` 1 opak. = ${ pack . label || ` ${ pack . amount } ${ u } ` } ` : '' ;
const refLabel = def . pantryUnit === 'ml' ? '100 ml produktu' : '100 g produktu' ;
wrap . innerHTML = `
<div class="text-[10px] leading-snug mt-0.5 pt -2 border-t border-gray-100 space-y-1 ">
<p class="text-[9 px] font-semibold uppercase tracking-wide text-gray-500 px-0.5"> ${ esc ( refLabel ) } </p>
<ul class="space-y-0 rounded-lg bg-white/70 px-2 py-1 ring-1 ring-gray-100/90" >
${ nutritionListRow ( 'Energia' , ` ${ n . kcal } kcal ` ) }
${ nutritionListRow ( 'Białko' , ` ${ n . protein } g ` ) }
${ nutritionListRow ( 'Tłuszcz' , ` ${ n . fat } g ` ) }
${ nutritionListRow ( 'Węglowodany' , ` ${ n . carbs } g ` ) }
</ul>
</div> ` ;
}
<button type="button" id="pv2-card-add-list" class="w-full flex items-center justify-center gap-2 py -2.5 rounded-xl text-[13px] font-semibold transition-colors active:scale-[0.98]" style="background:#ddd6ca; color:#2d2e2b; ">
<i class="fas fa-cart-plus text-[11 px]"></i>Dodaj na listę ${ usesPacks ? ' (1 opak.)' : '' }
</button >
${ hint ? ` <p class="text-[10px] text-center mt-1" style="color:#9b978f;"> ${ esc ( hint ) } </p> ` : '' } ` ;
function closeEditSheet ( ) {
editingId = null ;
const bg = document . getElementById ( 'pv2-edit-bg' ) ;
const sheet = document . getElementById ( 'pv2-edit-sheet' ) ;
if ( sheet ) sheet . style . transform = HIDDEN _Y ;
if ( bg ) bg . classList . add ( 'opacity-0' ) ;
setTimeout ( ( ) => {
bg ? . classList . add ( 'hidden' ) ;
sheet ? . classList . add ( 'hidden' ) ;
} , 300 ) ;
renderBoard ( ) ;
}
function getEditQty ( ) {
const el = document . getElementById ( 'pv2-edit-qty' ) ;
return Math . max ( 0 , parseFloat ( String ( el ? . value ) . replace ( ',' , '.' ) ) || 0 ) ;
}
function setEditQty ( v ) {
const el = document . getElementById ( 'pv2-edit-qty' ) ;
if ( el ) el . value = String ( Math . max ( 0 , Math . round ( v ) ) ) ;
}
function applyEditQty ( newQty ) {
if ( ! editingId ) return ;
const v = Math . max ( 0 , Math . round ( Number ( newQty ) * 1000 ) / 1000 || 0 ) ;
setPantryQty ( editingId , v ) ;
setEditQty ( v ) ;
}
function readShopQty ( ) {
const el = document . getElementById ( 'pv2-shop-qty' ) ;
return Math . max ( 1 , Math . round ( parseFloat ( String ( el ? . value ) . replace ( ',' , '.' ) ) || 0 ) ) ;
}
function setShopQty ( v ) {
const el = document . getElementById ( 'pv2-shop-qty' ) ;
if ( el ) el . value = String ( Math . max ( 1 , Math . round ( Number ( v ) ) ) ) ;
document . getElementById ( 'pv2-card-add-list' ) ? . addEventListener ( 'click' , ( ) => {
if ( ! editingId ) return ;
const d = INGREDIENTS [ editingId ] ;
if ( ! d ) return ;
const uLabel = unitLabel ( d . pantryUnit ) ;
if ( usesPacks && d . purchasePack ) {
const amt = d . purchasePack . amount ;
addIngredientToKitchenList ( editingId , amt , d . purchasePack . label || ` ${ amt } ${ uLabel } ` ) ;
showAppToast ( ` Dodano 1 opak. na listę. ` ) ;
} else {
const step = pantryQtyStep ( editingId ) ;
addIngredientToKitchenList ( editingId , step ) ;
showAppToast ( ` Dodano ${ step } ${ uLabel } na listę. ` ) ;
}
window . refreshShopping ? . ( ) ;
} ) ;
}
function bindEditSheet ( ) {
document . getElementById ( 'pv2-edit-bg ' ) ? . addEventListener ( 'click' , closeEditSheet ) ;
document . getElementById ( 'pv2-edit-minus' ) ? . addEventListener ( 'click' , ( ) => {
if ( ! editingId ) return ;
applyEditQty ( Math . max ( 0 , getEditQty ( ) - pantryQtyStep ( editingId ) ) ) ;
} ) ;
document . getElementById ( 'pv2-edit-plus' ) ? . addEventListener ( 'click' , ( ) => {
if ( ! editingId ) return ;
applyEditQty ( getEditQty ( ) + pantryQtyStep ( editingId ) ) ;
} ) ;
document . getElementById ( 'pv2-edit-qty' ) ? . addEventListener ( 'change' , ( ) => {
applyEditQty ( getEditQty ( ) ) ;
} ) ;
document . getElementById ( 'pv2-shop-minus' ) ? . addEventListener ( 'click' , ( ) => {
setShopQty ( Math . max ( 1 , readShopQty ( ) - editShopStep ) ) ;
} ) ;
document . getElementById ( 'pv2-shop-plus' ) ? . addEventListener ( 'click' , ( ) => {
setShopQty ( readShopQty ( ) + editShopStep ) ;
} ) ;
document . getElementById ( 'pv2-shop-qty' ) ? . addEventListener ( 'change' , ( ) => {
setShopQty ( readShopQty ( ) ) ;
} ) ;
document . getElementById ( 'pv2-shop-add' ) ? . addEventListener ( 'click' , ( ) => {
if ( ! editingId ) return ;
const def = INGREDIENTS [ editingId ] ;
if ( ! def ) return ;
const count = readShopQty ( ) ;
const u = unitLabel ( def . pantryUnit ) ;
if ( editShopUsesPacks && def . purchasePack ) {
const packAmt = def . purchasePack . amount ;
const total = count * packAmt ;
const note = ` ${ count } × ${ def . purchasePack . label || ` ${ packAmt } ${ u } ` } ` ;
addIngredientToKitchenList ( editingId , total , note ) ;
showAppToast ( ` Dodano ${ count } op. ( ${ total } ${ u } ) na listę. ` ) ;
} else {
addIngredientToKitchenList ( editingId , count ) ;
showAppToast ( ` Dodano ${ count } ${ u } na listę. ` ) ;
}
window . refreshShopping ? . ( ) ;
document . getElementById ( 'pv2-card-close ' ) ? . addEventListener ( 'click' , closeIngredientCard ) ;
document . getElementById ( 'pv2-card-overlay' ) ? . addEventListener ( 'click' , ( e ) => {
if ( e . target . id === 'pv2-card-overlay' ) closeIngredientCard ( ) ;
} ) ;
}
@@ -540,15 +516,45 @@ export function refreshPantry() {
}
export function setupPantry ( ) {
renderCategoryChips ( ) ;
updateFilterBadge ( ) ;
renderBoard ( ) ;
bindEditSheet ( ) ;
document . getElementById ( 'pantry-search' ) ? . addEventListener ( 'input' , ( ) => renderBoard ( ) ) ;
document . getElementById ( 'pantry-stock-toggle' ) ? . addEventListener ( 'click' , ( ) => {
// Filter popup
document . getElementById ( 'pantry-filter-btn' ) ? . addEventListener ( 'click' , ( ) => {
if ( isFilterOpen ( ) ) closeFilterPopup ( ) ; else openFilterPopup ( ) ;
} ) ;
document . getElementById ( 'pantry-filter-overlay' ) ? . addEventListener ( 'click' , ( e ) => {
if ( e . target . id === 'pantry-filter-overlay' ) closeFilterPopup ( ) ;
} ) ;
document . getElementById ( 'pantry-filter-clear' ) ? . addEventListener ( 'click' , ( ) => {
selectedCategories . clear ( ) ;
showOnlyStock = false ;
renderFilterCategories ( ) ;
renderFilterStockCheck ( ) ;
updateFilterBadge ( ) ;
renderBoard ( ) ;
} ) ;
document . getElementById ( 'pantry-filter-categories' ) ? . addEventListener ( 'click' , ( e ) => {
const btn = e . target . closest ( '.pv2-filter-cat' ) ;
if ( ! btn ) return ;
const cat = btn . dataset . cat ;
if ( selectedCategories . has ( cat ) ) selectedCategories . delete ( cat ) ;
else selectedCategories . add ( cat ) ;
renderFilterCategories ( ) ;
updateFilterBadge ( ) ;
renderBoard ( ) ;
} ) ;
document . getElementById ( 'pantry-filter-stock' ) ? . addEventListener ( 'click' , ( ) => {
showOnlyStock = ! showOnlyStock ;
updateToggleVisuals ( ) ;
renderFilterStockCheck ( ) ;
updateFilterBadge ( ) ;
renderBoard ( ) ;
} ) ;
