Design work on pantry

js/ui/ingredientCard.js

@@ -160,7 +160,7 @@ export function getIngredientCardHTML({
     return `
     <div id="${idBase}-overlay" class="${overlayClass}" style="${overlayStyle}">
         <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
-            <div class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
+            <div id="${idBase}-hero" class="relative w-full ${heroHeightClass} overflow-hidden" style="background:#393937;">
                 <img id="${idBase}-img" class="w-full h-full object-cover hidden" alt="" />
                 <div id="${idBase}-fallback" class="w-full h-full flex items-center justify-center">
                     <i id="${idBase}-fallback-icon" class="fas fa-box-open text-3xl" style="color:#6d6c67;"></i>
@@ -215,30 +215,41 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         state.shopDraftQty = null;
     }
 
-    function getCurrentShoppingItem(def) {
+    function getShoppingItemFor(def, product) {
         const shopping = loadShoppingState();
         const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen');
         if (!kitchen || kitchen.type !== 'kitchen') return null;
         const unit = unitLabel(def.pantryUnit);
+        const targetProductId = product?.id || '';
         return kitchen.items.find((item) => {
             if (item.checked) return false;
-            return item.ingredientId === state.ingredientId
+            return item.ingredientId === def.id
                 && item.unit === unit
-                && (item.productId || '') === (state.productId || '');
+                && (item.productId || '') === targetProductId;
         }) || null;
     }
 
     function renderHeader(def, product, pantry) {
         const hasProducts = ingredientHasProducts(def.id);
+        const isListMode = hasProducts && state.allowProductSelection && !state.productId;
+        const isBackAvailable = hasProducts && state.allowProductSelection && state.productId;
         const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-        const image = product?.image || def.image;
+        const heroEl = el('hero');
         const img = el('img');
         const fallback = el('fallback');
         const fallbackIcon = el('fallback-icon');
+
+        if (heroEl) {
+            heroEl.style.height = '';
+            heroEl.style.background = '#393937';
+        }
+
         if (img && fallback) {
+            const image = isListMode ? def.image : (product?.image || def.image);
+            const altName = isListMode ? def.name : (product?.name || def.name);
             if (image) {
                 img.src = image;
-                img.alt = product?.name || def.name;
+                img.alt = altName;
                 img.classList.remove('hidden');
                 fallback.classList.add('hidden');
             } else {
@@ -248,22 +259,20 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
             }
         }
 
-        const totalQty = getPantryTotal(def.id, pantry);
         const categoryEl = el('category');
         const nameEl = el('name');
         const subtitleEl = el('subtitle');
         const backBtn = el('back');
 
-        if (categoryEl) categoryEl.textContent = product?.brand || CATEGORY_LABELS[def.category] || def.category;
-        if (nameEl) nameEl.textContent = product?.name || def.name;
+        const displayProduct = isListMode ? null : product;
+        if (categoryEl) categoryEl.textContent = displayProduct?.brand || CATEGORY_LABELS[def.category] || def.category;
+        if (nameEl) nameEl.textContent = displayProduct?.name || def.name;
 
         if (subtitleEl) {
             let subtitle = '';
-            if (product) {
-                subtitle = [def.name, product.packLabel].filter(Boolean).join(' • ');
-            } else if (hasProducts) {
-                subtitle = `${productCountLabel(getProductsForIngredient(def.id).length)} • ${formatQtyWithUnit(totalQty, def.pantryUnit)} na stanie`;
-            } else if (def.purchasePack?.label) {
+            if (displayProduct) {
+                subtitle = [def.name, displayProduct.packLabel].filter(Boolean).join(' • ');
+            } else if (!hasProducts && def.purchasePack?.label) {
                 subtitle = def.purchasePack.label;
             }
 
@@ -276,20 +285,25 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         }
 
         if (backBtn) {
-            backBtn.classList.toggle('hidden', !(hasProducts && state.productId && state.allowProductSelection));
+            backBtn.classList.toggle('hidden', !isBackAvailable);
         }
     }
 
     function renderNutrition(def, product) {
         const wrap = el('nutrition');
         if (!wrap) return;
+        const hasProducts = ingredientHasProducts(def.id);
+        const isListMode = hasProducts && state.allowProductSelection && !state.productId;
+        if (isListMode) {
+            wrap.innerHTML = '';
+            return;
+        }
         const nutrition = product?.nutritionPer100g || def.nutritionPer100g;
         if (!nutrition) {
             wrap.innerHTML = '';
             return;
         }
 
-        const hasProducts = ingredientHasProducts(def.id);
         const unitScope = def.pantryUnit === 'ml' ? 'na 100 ml' : 'na 100 g';
         const hint = product
             ? ''
@@ -321,40 +335,11 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
             </div>`;
     }
 
-    function renderStock() {
-        const wrap = el('stock');
-        if (!wrap || !state.ingredientId) return;
-        const def = INGREDIENTS[state.ingredientId];
-        if (!def) return;
-
-        const pantry = loadPantry();
-        const hasProducts = ingredientHasProducts(state.ingredientId);
-        const product = state.productId ? PRODUCTS[state.productId] : null;
-        const totalQty = getPantryTotal(state.ingredientId, pantry);
+    function renderStockEditorInto(wrap, def, product, pantry) {
+        const totalQty = getPantryTotal(def.id, pantry);
         const unit = unitLabel(def.pantryUnit);
-
-        if (hasProducts && !product) {
-            const stockedCount = getPantryProducts(state.ingredientId, pantry).filter((i) => i.qty > 0).length;
-            const helperChip = state.allowProductSelection
-                ? '<span class="inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold shrink-0" style="background:#2f2f2d; color:#d7d2c8;">Wybierz produkt</span>'
-                : '';
-            wrap.innerHTML = `
-                <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
-                <div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
-                    <div class="flex items-start justify-between gap-3">
-                        <div class="min-w-0 flex-1">
-                            <p class="text-[10px] font-semibold uppercase tracking-wide" style="color:#9b978f;">Stan łączny</p>
-                            <p class="text-[16px] font-bold tabular-nums mt-1" style="color:#6ee7b7;">${esc(formatQty(totalQty))} ${esc(unit)}</p>
-                            <p class="text-[11px] mt-1 leading-snug" style="color:#9b978f;">${stockedCount} z ${getProductsForIngredient(state.ingredientId).length} produktów ma zapas</p>
-                        </div>
-                        ${helperChip}
-                    </div>
-                </div>`;
-            return;
-        }
-
         const qty = product
-            ? (getPantryProducts(state.ingredientId, pantry).find((i) => i.productId === state.productId)?.qty || 0)
+            ? (getPantryProducts(def.id, pantry).find((i) => i.productId === product.id)?.qty || 0)
             : totalQty;
         const { step, usesPackStep } = getQtyStepMeta(def, product);
         const packSize = product?.packSize || def.purchasePack?.amount || 0;
@@ -374,12 +359,12 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
 
         wrap.innerHTML = `
             <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Zapas</p>
-                <div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
-                    <div class="flex items-start justify-between gap-3">
-                        <div class="min-w-0 flex-1">
-                            <p class="text-[16px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(stockValueLabel)}</p>
-                            ${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:#9b978f;">${esc(stockSubLabel)}</p>` : ''}
-                        </div>
+            <div class="rounded-2xl border px-3 py-3" style="background:#393937; border-color:#444442;">
+                <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 flex-1">
+                        <p class="text-[16px] font-bold tabular-nums" style="color:#6ee7b7;">${esc(stockValueLabel)}</p>
+                        ${stockSubLabel ? `<p class="text-[11px] mt-1" style="color:#9b978f;">${esc(stockSubLabel)}</p>` : ''}
+                    </div>
                     <button type="button" class="ingredient-card-stock-toggle inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-semibold shrink-0" style="background:${state.stockEditorOpen ? '#23221e' : '#2f2f2d'}; color:${state.stockEditorOpen ? '#f2efe8' : '#d7d2c8'};">
                         ${esc(actionLabel)}
                     </button>
@@ -443,10 +428,10 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
             const nextQty = usesPackStep
                 ? normalizeQty((Number(input?.value) || 0) * step)
                 : normalizeQty(input?.value ?? state.stockDraftQty ?? qty);
-            if (state.productId) {
-                setPantryProductQty(state.ingredientId, state.productId, nextQty);
+            if (product) {
+                setPantryProductQty(def.id, product.id, nextQty);
             } else {
-                setPantryQty(state.ingredientId, nextQty);
+                setPantryQty(def.id, nextQty);
             }
             state.stockEditorOpen = false;
             state.stockDraftQty = null;
@@ -455,76 +440,13 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         });
     }
 
-    function productRowHtml(ingredientId, productId, pantry, selectedProductId) {
-        const def = INGREDIENTS[ingredientId];
-        const product = PRODUCTS[productId];
-        const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
-        const qty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
-        const isSelected = selectedProductId === productId;
-        return `<button type="button" class="ingredient-card-product-row w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors active:scale-[0.99]" style="background:${isSelected ? '#23221e' : '#393937'}; border:${isSelected ? '1px solid #787876' : '1px solid transparent'};" data-product-id="${esc(productId)}">
-            ${mediaHtml(product.image || def.image, icon)}
-            <div class="flex-1 min-w-0">
-                <div class="flex items-center justify-between gap-2">
-                    <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
-                    <span class="text-[12px] font-bold tabular-nums shrink-0" style="color:${qty > 0 ? '#ddd6ca' : '#6d6c67'};">${esc(formatQty(qty))} ${esc(unitLabel(def.pantryUnit))}</span>
-                </div>
-                <div class="flex items-center gap-2 mt-0.5">
-                    ${compactMetaText(product.packLabel || '', 'muted')}
-                    ${isSelected ? compactMetaText('wybrany', 'success') : ''}
-                </div>
-            </div>
-            <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
-        </button>`;
-    }
-
-    function renderProducts() {
-        const wrap = el('products');
-        if (!wrap || !state.ingredientId) return;
-        if (!ingredientHasProducts(state.ingredientId) || !state.allowProductSelection) {
-            wrap.innerHTML = '';
-            return;
-        }
-
-        const pantry = loadPantry();
-        const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
-        const selectedProductId = state.selectedProductId || state.productId;
-        const subtitle = state.productId
-            ? 'Wróć lub wybierz inny wariant.'
-            : 'Wybierz wariant, aby zobaczyć szczegóły.';
-
-        wrap.innerHTML = `
-            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
-            <p class="text-[10px] mb-1.5" style="color:#9b978f;">${esc(subtitle)}</p>
-            <div class="space-y-1.5">
-                ${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, selectedProductId)).join('')}
-            </div>`;
-
-        wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
-            btn.addEventListener('click', () => {
-                const nextProductId = btn.dataset.productId || null;
-                state.productId = nextProductId;
-                state.selectedProductId = nextProductId;
-                resetInlineEditors();
-                if (nextProductId) state.onProductChange?.(nextProductId);
-                render();
-                state.onAfterChange?.();
-            });
-        });
-    }
-
-    function renderShop() {
-        const wrap = el('shop');
-        if (!wrap || !state.ingredientId) return;
-        const def = INGREDIENTS[state.ingredientId];
-        if (!def) return;
-
-        const product = state.productId ? PRODUCTS[state.productId] : null;
+    function renderShopEditorInto(wrap, def, product) {
         const { step, usesPackStep } = getQtyStepMeta(def, product);
         const packSize = product?.packSize || def.purchasePack?.amount;
         const packLabel = product?.packLabel || def.purchasePack?.label;
         const usesPacks = Boolean(packSize && packSize > 0);
         const defaultAmount = step;
-        const shoppingItem = getCurrentShoppingItem(def);
+        const shoppingItem = getShoppingItemFor(def, product);
         const hasShoppingItem = Boolean(shoppingItem);
         const shoppingAmount = shoppingItem?.amount || 0;
         const draftQty = state.shopEditorOpen
@@ -542,7 +464,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
             ? formatPreciseQty(draftQty / step)
             : formatPreciseQty(draftQty);
         const shopInputUnit = usesPackStep ? 'opak.' : unitLabel(def.pantryUnit);
-        const actionLabel = state.shopEditorOpen ? 'Anuluj' : 'Zmień';
+        const actionLabel = state.shopEditorOpen ? 'Anuluj' : (hasShoppingItem ? 'Zmień' : 'Dodaj');
 
         wrap.innerHTML = `
             <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Lista zakupów</p>
@@ -632,14 +554,14 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
             } else if (nextAmount > 0) {
                 const note = usesPacks ? (packLabel || `${formatQty(packSize)} ${unitLabel(def.pantryUnit)}`) : undefined;
                 const line = {
-                    ingredientId: state.ingredientId,
+                    ingredientId: def.id,
                     amount: nextAmount,
                     unit: unitLabel(def.pantryUnit),
                     name: product?.name || def.name,
                     category: def.category,
                     sourceNote: note || state.sourceNote || defaultSourceNote,
                 };
-                if (state.productId) line.productId = state.productId;
+                if (product) line.productId = product.id;
                 addOrMergeShoppingLines([line]);
                 toastText = `Dodano ${product?.name || def.name}.`;
             }
@@ -652,6 +574,111 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
         });
     }
 
+    function renderStock() {
+        const wrap = el('stock');
+        if (!wrap || !state.ingredientId) return;
+        const def = INGREDIENTS[state.ingredientId];
+        if (!def) return;
+
+        const hasProducts = ingredientHasProducts(state.ingredientId);
+        const isListMode = hasProducts && state.allowProductSelection && !state.productId;
+        if (isListMode) {
+            wrap.innerHTML = '';
+            return;
+        }
+
+        const pantry = loadPantry();
+        const product = state.productId ? PRODUCTS[state.productId] : null;
+        renderStockEditorInto(wrap, def, product, pantry);
+    }
+
+    function productRowHtml(ingredientId, productId, pantry, kitchenItems) {
+        const def = INGREDIENTS[ingredientId];
+        const product = PRODUCTS[productId];
+        const icon = CATEGORY_ICONS[def.category] || 'fa-jar';
+        const unit = unitLabel(def.pantryUnit);
+        const pantryQty = getPantryProducts(ingredientId, pantry).find((i) => i.productId === productId)?.qty || 0;
+        const shoppingItem = kitchenItems.find((item) => !item.checked
+            && item.ingredientId === ingredientId
+            && item.unit === unit
+            && (item.productId || '') === productId);
+        const shoppingAmount = shoppingItem?.amount || 0;
+
+        const pantryLabel = pantryQty > 0 ? `${formatQty(pantryQty)} ${unit}` : '—';
+        const pantryColor = pantryQty > 0 ? '#ddd6ca' : '#6d6c67';
+        const shoppingLabel = shoppingAmount > 0 ? `${formatQty(shoppingAmount)} ${unit}` : '';
+
+        return `<button type="button" class="ingredient-card-product-row 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; border:1px solid transparent;" data-product-id="${esc(productId)}">
+            ${mediaHtml(product.image || def.image, icon)}
+            <div class="flex-1 min-w-0">
+                <span class="text-[13px] font-semibold truncate block" style="color:#ddd6ca;">${esc(product.name)}</span>
+                ${product.packLabel ? `<span class="text-[10px] block mt-0.5" style="color:#9b978f;">${esc(product.packLabel)}</span>` : ''}
+            </div>
+            <div class="flex flex-col items-end gap-0.5 shrink-0 tabular-nums">
+                <span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:${pantryColor};">
+                    <i class="fas fa-box text-[9px]" style="color:#8f8b84;"></i>${esc(pantryLabel)}
+                </span>
+                ${shoppingLabel ? `<span class="text-[11px] font-semibold inline-flex items-center gap-1" style="color:#ddd6ca;">
+                    <i class="fas fa-cart-shopping text-[9px]" style="color:#8f8b84;"></i>${esc(shoppingLabel)}
+                </span>` : ''}
+            </div>
+            <i class="fas fa-chevron-right text-[10px] shrink-0" style="color:#8f8b84;"></i>
+        </button>`;
+    }
+
+    function renderProducts() {
+        const wrap = el('products');
+        if (!wrap || !state.ingredientId) return;
+        const hasProducts = ingredientHasProducts(state.ingredientId);
+        const isListMode = hasProducts && state.allowProductSelection && !state.productId;
+        if (!isListMode) {
+            wrap.innerHTML = '';
+            return;
+        }
+
+        const pantry = loadPantry();
+        const products = sortProductsByStock(getProductsForIngredient(state.ingredientId), getPantryProducts(state.ingredientId, pantry));
+        const shopping = loadShoppingState();
+        const kitchen = shopping.lists.find((list) => list.id === KITCHEN_LIST_ID && list.type === 'kitchen');
+        const kitchenItems = (kitchen && kitchen.type === 'kitchen') ? kitchen.items : [];
+
+        wrap.innerHTML = `
+            <p class="text-[9px] font-semibold uppercase tracking-wide mb-1.5" style="color:#9b978f;">Produkty</p>
+            <div class="space-y-1.5">
+                ${products.map((product) => productRowHtml(state.ingredientId, product.id, pantry, kitchenItems)).join('')}
+            </div>`;
+
+        wrap.querySelectorAll('.ingredient-card-product-row').forEach((btn) => {
+            btn.addEventListener('click', () => {
+                const nextProductId = btn.dataset.productId || null;
+                if (!nextProductId) return;
+                state.productId = nextProductId;
+                state.selectedProductId = nextProductId;
+                resetInlineEditors();
+                state.onProductChange?.(nextProductId);
+                render();
+                state.onAfterChange?.();
+            });
+        });
+    }
+
+    function renderShop() {
+        const wrap = el('shop');
+        if (!wrap || !state.ingredientId) return;
+        const def = INGREDIENTS[state.ingredientId];
+        if (!def) return;
+
+        const hasProducts = ingredientHasProducts(state.ingredientId);
+        const isListMode = hasProducts && state.allowProductSelection && !state.productId;
+        if (isListMode) {
+            wrap.innerHTML = '';
+            return;
+        }
+
+        const product = state.productId ? PRODUCTS[state.productId] : null;
+        renderShopEditorInto(wrap, def, product);
+    }
+
     function render() {
         if (!state.ingredientId) return;
         const def = INGREDIENTS[state.ingredientId];