ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign recipe details

Browse Source
This commit is contained in:
Rafał
2026-04-04 22:26:19 +02:00
parent bfe3074a26
commit b44b985e76
6 changed files with 206 additions and 815 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
js/views/RecipeDetailV2.js
View File

@@ -10,51 +10,79 @@ function escapeHtml(s) {
}
const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
const RD_THEME = Object.freeze({
surface: '#393937',
surfaceSoft: '#2f2f2d',
surfaceActive: '#23221e',
border: '#444442',
borderSoft: '#56534f',
borderStrong: '#787876',
textPrimary: '#ddd6ca',
textSecondary: '#d7d2c8',
textMuted: '#9b978f',
});
function forceBg(bg) {
return `background:${bg} !important; background-image:none !important; box-shadow:none !important;`;
}
function forceBgBorder(bg, border) {
return `${forceBg(bg)} border:1px solid ${border} !important;`;
}
function renderTagChip(label) {
return `<span class="px-3 py-1 rounded-full text-[11px] font-semibold inline-flex items-center" style="${forceBgBorder(RD_THEME.surfaceSoft, RD_THEME.border)} color:${RD_THEME.textSecondary} !important;">${escapeHtml(label)}</span>`;
}
function setTabButtonState(btn, active) {
if (!btn) return;
btn.style.color = active ? RD_THEME.textPrimary : RD_THEME.textMuted;
btn.style.borderBottomColor = active ? RD_THEME.borderStrong : 'transparent';
btn.style.fontWeight = active ? '600' : '500';
}
export function getRecipeDetailHTML() {
return `
<div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
<div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
<div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
<button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
<button onclick="closeRecipeDetail()" class="w-9 h-9 rounded-full border flex items-center justify-center transition-opacity opacity-95 hover:opacity-100" style="background:rgba(47,47,45,0.92) !important; backdrop-filter:none !important; border-color:#444442 !important; color:#ddd6ca !important;">
<i class="fas fa-arrow-left text-[13px]"></i>
</button>
<button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
<button id="rd-add-to-planner-btn" class="h-9 px-3 rounded-full border flex items-center justify-center gap-1.5 transition-opacity opacity-95 hover:opacity-100 text-[12px] font-semibold" style="background:rgba(47,47,45,0.92) !important; backdrop-filter:none !important; border-color:#444442 !important; color:#ddd6ca !important;">
<i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
</button>
</div>
<div id="rd-hero" class="h-[220px] shrink-0 w-full bg-[#d4d4d4] relative overflow-hidden">
<div id="rd-hero" class="h-[236px] shrink-0 w-full relative overflow-hidden" style="background:linear-gradient(180deg, #3a3937 0%, #23221e 100%) !important;">
<img id="rd-hero-img" src="" alt="" class="w-full h-full object-cover hidden">
<span id="rd-hero-label" class="absolute inset-0 flex items-center justify-center text-white font-medium text-[15px]"></span>
<div class="absolute inset-0 pointer-events-none" style="background:linear-gradient(to bottom, rgba(45,46,43,0.1), rgba(45,46,43,0.4), rgba(45,46,43,0.92));"></div>
<span id="rd-hero-label" class="absolute inset-0 z-10 flex items-center justify-center font-medium text-[15px]" style="color:#ddd6ca;"></span>
</div>
<div class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
<div class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden" style="background:#2d2e2b !important; background-image:none !important;">
<div class="mb-3 px-5 shrink-0">
<div class="flex justify-between items-start mb-2.5">
<h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
<h1 id="rd-title" class="text-xl font-bold leading-tight" style="color:#ddd6ca;"></h1>
</div>
<div id="rd-tags" class="flex flex-wrap gap-1.5 mb-3"></div>
<div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
<div class="flex gap-3.5">
<div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span id="rd-time"></span></div>
<div class="flex flex-wrap gap-2 text-[13px] font-medium">
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">
<i class="fas fa-clock text-[10px]" style="color:#9b978f;"></i>
<span id="rd-time"></span>
</div>
<div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
<button id="rd-serv-minus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
<div class="flex items-center gap-1 px-1.5">
<span id="rd-servings" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
<span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
</div>
<button id="rd-serv-plus" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border" style="background:#2f2f2d; border-color:#444442; color:#d7d2c8;">
<i class="fas fa-fire text-[10px]" style="color:#9b978f;"></i>
<span id="rd-kcal" class="tabular-nums"></span>
</div>
</div>
</div>
<div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
<button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 rd-tab-btn" data-rd-tab="ingredients">Składniki</button>
<button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 rd-tab-btn" data-rd-tab="steps">Kroki</button>
<div class="flex border-b mb-2 px-5 shrink-0" style="border-color:#444442;">
<button class="flex-1 pb-2.5 text-[13px] border-b-2 rd-tab-btn" data-rd-tab="ingredients" style="color:#ddd6ca; border-bottom-color:#787876; font-weight:600;">Składniki</button>
<button class="flex-1 pb-2.5 text-[13px] border-b-2 rd-tab-btn" data-rd-tab="steps" style="color:#9b978f; border-bottom-color:transparent; font-weight:500;">Kroki</button>
</div>
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
<div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));">
<div id="rd-tab-ingredients" class="rd-tab-content block animate-fade-in"></div>
<div id="rd-tab-steps" class="rd-tab-content hidden animate-fade-in"></div>
</div>
@@ -104,13 +132,12 @@ function populateDetail(recipeId) {
const tagsHtml = [];
for (const slotId of recipe.allowedSlots) {
const label = slotLabelMap[slotId];
if (label) tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(label)}</span>`);
if (label) tagsHtml.push(renderTagChip(label));
}
for (const tag of (recipe.tags || [])) {
tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
tagsHtml.push(renderTagChip(tag));
}
document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
document.getElementById('rd-servings').textContent = '1';
renderIngredients(recipe);
renderSteps(recipe);
@@ -118,11 +145,9 @@ function populateDetail(recipeId) {
const tabBtns = document.querySelectorAll('.rd-tab-btn');
const tabs = document.querySelectorAll('.rd-tab-content');
tabBtns.forEach((b) => {
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
setTabButtonState(b, false);
});
tabBtns[0]?.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
tabBtns[0]?.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
setTabButtonState(tabBtns[0], true);
tabs.forEach((t) => { t.classList.add('hidden'); t.classList.remove('block'); });
document.getElementById('rd-tab-ingredients')?.classList.remove('hidden');
document.getElementById('rd-tab-ingredients')?.classList.add('block');
@@ -155,6 +180,10 @@ function nutritionForAmount(ingredientId, amount, unit) {
};
}
function fmtAmt(n) {
return Number.isInteger(n) ? String(n) : String(parseFloat(n.toFixed(1)));
}
/* ── ingredients tab with inline nutrition + summary ───── */
function computeEffectiveNutritionTotals(recipe) {
@@ -178,58 +207,42 @@ function computeEffectiveNutritionTotals(recipe) {
}
function renderNutritionSummary(recipe) {
const s = currentServings;
const total = computeEffectiveNutritionTotals(recipe);
return `
<div class="mb-4 pt-1 pb-3 border-b border-gray-100">
${s > 1 ? `<p class="text-[10px] text-gray-400 font-medium mb-2">Wartości dla ${s} porcji</p>` : ''}
<div class="grid grid-cols-4 gap-3 text-center">
<div>
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.kcal}</span>
<span class="text-[10px] text-gray-500">Kalorie</span>
<div class="mb-4">
<div class="flex items-stretch gap-3">
<div class="flex-1 min-w-0">
<div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
<div class="flex-1 flex items-center">
<div class="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
<div class="grid grid-flow-col auto-cols-max gap-3 text-left">
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
<div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${total.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
</div>
</div>
</div>
</div>
</div>
<div>
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.protein} g</span>
<span class="text-[10px] text-gray-500">Białko</span>
<div class="shrink-0 w-[5.25rem]">
<div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
<div class="flex items-center pt-2">
<div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
<button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
<i class="fas fa-minus text-[10px]"></i>
</button>
<span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
<button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
<i class="fas fa-plus text-[10px]"></i>
</button>
</div>
</div>
</div>
</div>
<div>
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.carbs} g</span>
<span class="text-[10px] text-gray-500">Węglo.</span>
</div>
<div>
<span class="block text-[14px] font-bold text-gray-900 tabular-nums">${total.fat} g</span>
<span class="text-[10px] text-gray-500">Tłuszcze</span>
</div>
</div>
</div>`;
}
function renderIngredientCard(name, amount, unit, nutrition, extra) {
const displayAmount = Number.isInteger(amount) ? amount : parseFloat(amount.toFixed(1));
const macroHtml = nutrition
? `<div class="flex flex-wrap gap-x-2.5 text-[10px] text-gray-400 tabular-nums">
<span>${nutrition.protein}g B</span><span>${nutrition.fat}g T</span><span>${nutrition.carbs}g W</span>
</div>`
: '';
const kcalHtml = nutrition
? `<span class="text-[10px] font-medium text-gray-400 tabular-nums whitespace-nowrap">${nutrition.kcal} kcal</span>`
: '';
return `
<div class="${extra?.cls || 'bg-white'} rounded-xl p-2.5 border ${extra?.border || 'border-gray-200'} flex items-center gap-2.5" ${extra?.dataAttrs || ''}>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
${extra?.prefix || ''}
<span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(name)}</span>
${extra?.suffix || ''}
</div>
${macroHtml}
${extra?.badge || ''}
</div>
<div class="flex flex-col items-end shrink-0 gap-0.5">
<span class="text-[12px] font-semibold text-gray-900 tabular-nums whitespace-nowrap">${displayAmount} ${escapeHtml(unit)}</span>
${kcalHtml}
</div>
</div>`;
}
@@ -245,21 +258,24 @@ function renderIngredients(recipe) {
const effectiveDef = INGREDIENTS[effectiveId];
const effectiveName = effectiveDef?.name || effectiveId;
const scaledAmount = ing.amount * currentServings;
const nutrition = nutritionForAmount(effectiveId, scaledAmount, ing.unit);
const isSwapped = effectiveId !== origId;
const isExpanded = expandedAlternatives.has(origId);
const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
const toggleBtn = hasAlts
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : isSwapped ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(origId)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
: '';
const cardBorder = isSwapped ? 'border-amber-200' : 'border-gray-200';
const cardCls = isSwapped ? 'bg-amber-50/30' : 'bg-white';
const cardHtml = renderIngredientCard(effectiveName, scaledAmount, ing.unit, nutrition, {
suffix: toggleBtn,
border: cardBorder,
cls: cardCls,
});
let rowHtml = `<div class="rd-ing-row rounded-xl p-2.5" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
rowHtml += '<div class="flex items-center gap-2">';
rowHtml += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(effectiveName)}</span></div>`;
rowHtml += '<div class="shrink-0 flex items-center gap-2">';
rowHtml += toggleBtn;
rowHtml += `<div class="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg">
<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(scaledAmount)}</span>
<span class="text-[11px] text-gray-500">${escapeHtml(ing.unit)}</span>
</div>`;
rowHtml += '</div>';
rowHtml += '</div>';
let altListHtml = '';
if (hasAlts && isExpanded) {
@@ -268,32 +284,46 @@ function renderIngredients(recipe) {
const def = INGREDIENTS[altId];
const altName = def?.name || altId;
const isSelected = effectiveId === altId;
const isOriginal = altId === origId;
const altNutrition = nutritionForAmount(altId, scaledAmount, ing.unit);
const checkbox = `
<span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
style="border:1.5px solid #56534f; background:transparent;">
${isSelected ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
</span>`;
const nutritionLine = altNutrition
? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${altNutrition.kcal} kcal · ${altNutrition.protein}g B · ${altNutrition.fat}g T · ${altNutrition.carbs}g W</div>`
: '';
const radioDot = `<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}</div>`;
const defaultTag = isOriginal ? `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium ml-1">Domyślny</span>` : '';
return renderIngredientCard(altName, scaledAmount, ing.unit, altNutrition, {
cls: isSelected ? 'bg-gray-50' : 'bg-white hover:bg-gray-50 cursor-pointer',
border: isSelected ? 'border-gray-900 ring-1 ring-gray-900' : 'border-gray-100',
prefix: radioDot,
badge: defaultTag,
dataAttrs: `data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"`,
});
return `<button type="button" class="rd-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${escapeHtml(altName)}</div>${nutritionLine}</div>${checkbox}</div></button>`;
});
altListHtml = `
<div class="mt-1.5 space-y-1.5 rd-alt-options" data-original-id="${escapeHtml(origId)}">
<div class="mt-2 ml-1 space-y-1 rd-alt-options" data-original-id="${escapeHtml(origId)}">
${optionCards.join('')}
</div>`;
}
return `<li>${cardHtml}${altListHtml}</li>`;
rowHtml += altListHtml;
rowHtml += '</div>';
return `<li>${rowHtml}</li>`;
}).join('');
container.innerHTML = `
${renderNutritionSummary(recipe)}
<ul class="space-y-2" id="rd-ingredient-list">${rows}</ul>`;
<ul class="space-y-1.5" id="rd-ingredient-list">${rows}</ul>`;
container.querySelector('#rd-serv-minus')?.addEventListener('click', () => {
if (currentServings <= 1) return;
currentServings--;
renderIngredients(recipe);
updateKcalDisplay();
});
container.querySelector('#rd-serv-plus')?.addEventListener('click', () => {
if (currentServings >= 12) return;
currentServings++;
renderIngredients(recipe);
updateKcalDisplay();
});
container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
btn.addEventListener('click', () => {
@@ -332,16 +362,16 @@ function renderSteps(recipe) {
const steps = recipe.steps || [];
if (steps.length === 0) {
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-8">Brak kroków przygotowania.</p>';
container.innerHTML = `<p class="text-sm text-center py-8" style="color:${RD_THEME.textMuted};">Brak kroków przygotowania.</p>`;
return;
}
container.innerHTML = `
<div class="space-y-5 pb-5">
<div class="space-y-2 pb-5">
${steps.map((step, i) => `
<div class="flex gap-3">
<div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">${i + 1}</div>
<div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">${escapeHtml(step)}</p></div>
<div class="rounded-xl p-3 flex gap-3" style="${forceBg(RD_THEME.surface)} border:none !important;">
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold shrink-0" style="${forceBgBorder(RD_THEME.surfaceActive, RD_THEME.borderSoft)} color:${RD_THEME.textSecondary} !important;">${i + 1}</div>
<div class="pt-0.5"><p class="text-[13px] leading-relaxed" style="color:${RD_THEME.textSecondary};">${escapeHtml(step)}</p></div>
</div>`).join('')}
</div>`;
}
@@ -364,36 +394,12 @@ export function setupRecipeDetail() {
}
document.querySelectorAll('.rd-tab-btn').forEach((b) => {
b.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
b.classList.add('text-gray-500', 'border-transparent', 'font-medium');
setTabButtonState(b, false);
});
btn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
btn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
setTabButtonState(btn, true);
});
});
document.getElementById('rd-serv-minus')?.addEventListener('click', () => {
if (currentServings <= 1) return;
currentServings--;
document.getElementById('rd-servings').textContent = currentServings;
const recipe = RECIPES[currentRecipeId];
if (recipe) {
renderIngredients(recipe);
updateKcalDisplay();
}
});
document.getElementById('rd-serv-plus')?.addEventListener('click', () => {
if (currentServings >= 12) return;
currentServings++;
document.getElementById('rd-servings').textContent = currentServings;
const recipe = RECIPES[currentRecipeId];
if (recipe) {
renderIngredients(recipe);
updateKcalDisplay();
}
});
/* ── planner — delegate to MealPlanEditor ─────── */
document.getElementById('rd-add-to-planner-btn')?.addEventListener('click', () => {