From a90e8ba9d21b98d12694570e19952a752cb66ce7 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Fri, 17 Apr 2026 20:52:49 +0200
Subject: [PATCH] Use SVGs in pantry list

---
 index.html                 |  2 +-
 js/ui/ingredientCard.js    |  4 ++--
 js/ui/mealPlanEditor.js    |  2 +-
 js/views/Pantry.js         | 28 +++++++++++++++-------------
 js/views/RecipeDetailV2.js |  2 +-
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 3c79fdb..eece0ce 100644
--- a/index.html
+++ b/index.html
@@ -624,7 +624,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260417-svg2';
+        const APP_ASSET_VERSION = '20260417-svg6';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
diff --git a/js/ui/ingredientCard.js b/js/ui/ingredientCard.js
index cf14c11..91550ca 100644
--- a/js/ui/ingredientCard.js
+++ b/js/ui/ingredientCard.js
@@ -162,7 +162,7 @@ export function getIngredientCardHTML({
         <div id="${idBase}" class="${cardClass}" style="${cardStyle}">
             <div class="relative px-4 pt-4 pb-2">
                 <div class="flex items-start gap-3 pr-10">
-                    <div id="${idBase}-hero" class="relative w-16 h-16 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:#393937;">
+                    <div id="${idBase}-hero" class="relative w-20 h-20 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden" style="background:#393937;">
                         <img id="${idBase}-img" class="w-full h-full hidden" alt="" />
                         <div id="${idBase}-fallback" class="absolute inset-0 flex items-center justify-center">
                             <i id="${idBase}-fallback-icon" class="fas fa-box-open text-2xl" style="color:#6d6c67;"></i>
@@ -254,7 +254,7 @@ export function createIngredientCardController({ idBase, defaultSourceNote = 'Ze
                 const isSvg = image.endsWith('.svg');
                 img.classList.toggle('object-contain', isSvg);
                 img.classList.toggle('object-cover', !isSvg);
-                img.style.padding = isSvg ? '6px' : '';
+                img.style.padding = isSvg ? '4px' : '';
                 img.classList.remove('hidden');
                 fallback.classList.add('hidden');
             } else {
diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index 34f10c7..f4d986b 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -24,7 +24,7 @@ import {
     renderCalendarGrid,
     syncCalendarTodayButton,
 } from './mealCalendar.js?v=11';
-import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-115';
+import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260417-116';
 
 function esc(s) {
     return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index 6434ca8..54a5283 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -13,7 +13,7 @@ import {
     renderCalendarGrid,
     syncCalendarTodayButton,
 } from '../ui/mealCalendar.js?v=11';
-import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-115';
+import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
 
 /* ── helpers ── */
 
@@ -550,6 +550,7 @@ function classifyIngredients(searchQuery) {
                 name: def.name,
                 qty: getPantryTotal(id, pantry),
                 unit: def.pantryUnit,
+                image: def.image || null,
                 icon: CATEGORY_ICONS[def.category] || 'fa-jar',
             };
         })
@@ -560,14 +561,19 @@ function classifyIngredients(searchQuery) {
 
 /* ══════════════════════ TILE RENDERING ══════════════════════ */
 
+function tileIconHtml(item) {
+    if (item.image) {
+        return `<div class="w-6 h-6 rounded-md shrink-0 overflow-hidden" style="background:#2f2f2d;"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain" style="padding:1px;"></div>`;
+    }
+    return `<div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;"><i class="fas ${item.icon} text-[11px]" style="color:#7d7a74;"></i></div>`;
+}
+
 function shortfallTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
         <div class="flex items-center gap-1.5 min-w-0">
-            <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
-                <i class="fas ${item.icon} text-[11px]" style="color:${SHORTFALL_ACCENT};"></i>
-            </div>
+            ${tileIconHtml(item)}
             <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
         </div>
         <div class="w-full flex items-center gap-2">
@@ -582,11 +588,9 @@ function shortfallTileHtml(item) {
 function sufficientTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
         <div class="flex items-center gap-1.5 min-w-0">
-            <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
-                <i class="fas ${item.icon} text-[11px]" style="color:#6ee7b7;"></i>
-            </div>
+            ${tileIconHtml(item)}
             <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:#ddd6ca;">${esc(item.name)}</p>
         </div>
         <div class="w-full flex items-center gap-2">
@@ -602,10 +606,8 @@ function notPlannedChipHtml(item) {
     const hasStock = item.qty > 0;
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 6rem; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
-        <div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:#2f2f2d;">
-            <i class="fas ${item.icon} text-[11px]" style="color:#7d7a74;"></i>
-        </div>
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:#393937; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.28);" data-id="${esc(item.ingredientId)}">
+        ${tileIconHtml(item)}
         <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? '#b7ada1' : '#9b978f'};">${esc(item.name)}</p>
         <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? '#9b978f' : '#6d6c67'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>
     </button>`;
diff --git a/js/views/RecipeDetailV2.js b/js/views/RecipeDetailV2.js
index 638b522..f317986 100644
--- a/js/views/RecipeDetailV2.js
+++ b/js/views/RecipeDetailV2.js
@@ -1,5 +1,5 @@
 import { RECIPES, INGREDIENTS, PRODUCTS } from '../data/catalog.js?v=9';
-import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-115';
+import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
 
 function escapeHtml(s) {
     return String(s)