From 62d3ee1dddc4d67133c1217fe13beb37c990628b Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Tue, 7 Apr 2026 14:34:26 +0200
Subject: [PATCH] Redesign meal time cards in planner

---
 index.html              |  6 ++--
 js/views/MealPlanner.js | 61 +++++++++++++++--------------------------
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index aaab774..fbf0940 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title>Recipe App - Modular</title>
-    <link rel="manifest" href="./manifest.webmanifest?v=20260406-63">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260407-66">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -524,7 +524,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260406-63';
+        const APP_ASSET_VERSION = '20260407-66';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -558,7 +558,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-63';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260407-66';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index b6dde95..4bc46f7 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -378,12 +378,6 @@ function renderDayContent(state) {
         entries.forEach((entry) => {
             if (entry?.recipeId && RECIPES[entry.recipeId]) slotKcal += computeEntryNutrition(entry).kcal;
         });
-        const kcalBadge = slotKcal > 0
-            ? `<span class="text-[10px] font-semibold text-[#f2efe8] tabular-nums shrink-0 ml-auto">${slotKcal} kcal</span>`
-            : '';
-        const countLabel = entries.length > 1
-            ? `<span class="text-[10px] font-semibold text-gray-400 tabular-nums shrink-0">${entries.length} dania</span>`
-            : '';
 
         const entryCards = entries.map((entry) => {
             const recipe = entry && entry.recipeId ? RECIPES[entry.recipeId] : null;
@@ -427,44 +421,33 @@ function renderDayContent(state) {
             </div>`;
         }).join('');
 
-        if (isSkipped) {
-            return `
-            <div class="rounded-xl bg-[#393937] overflow-hidden opacity-60" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
-                <div class="flex items-center gap-2 px-3 py-2 border-b border-[#444442] bg-[#393937]" style="background:#393937 !important;">
-                    <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#7d7a74] shrink-0" aria-hidden="true"></i>
-                    <span class="text-[13px] font-semibold text-[#9b978f] truncate min-w-0 flex-1">${slot.label}</span>
-                </div>
-                <div class="p-2.5 flex items-center justify-between">
-                    <span class="text-xs text-[#9b978f] italic"><i class="fas fa-forward text-[9px] mr-1.5"></i>Pominięto</span>
-                    <button type="button" class="planner-unskip text-[11px] font-semibold text-[#9b978f] hover:text-[#ddd6ca] px-2 py-1 rounded-lg hover:bg-[#3a3a37] transition-colors" data-slot-id="${slot.id}">Cofnij</button>
-                </div>
-            </div>`;
-        }
+        const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[#444442] text-[#9b978f] hover:text-[#ddd6ca] hover:border-[#6d6c67] hover:bg-[#3a3a37] flex items-center justify-center transition-colors shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
 
-        const addLabel = entries.length === 0 ? 'Dodaj przepis' : 'Dodaj kolejny';
-        const addClasses = entries.length === 0
-            ? 'planner-add-meal flex-1 py-2 rounded-lg border border-dashed border-[#444442] text-[13px] font-semibold text-[#d7d2c8] hover:bg-[#3a3a37] hover:border-[#6d6c67] transition-colors'
-            : 'planner-add-meal w-full py-1.5 rounded-lg border border-dashed border-[#444442] text-xs font-semibold text-[#d7d2c8] hover:bg-[#3a3a37] hover:border-[#6d6c67] transition-colors';
-
-        const skipBtn = entries.length === 0
-            ? `<button type="button" class="planner-skip-meal shrink-0 py-2 px-3 rounded-lg text-[11px] font-semibold text-[#9b978f] hover:text-[#ddd6ca] hover:bg-[#3a3a37] transition-colors" data-slot-id="${slot.id}"><i class="fas fa-forward text-[9px] mr-1"></i>Pomijam</button>`
+        const kcalPill = slotKcal > 0
+            ? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:#2d2e2b; color:#d7d2c8;">${slotKcal} kcal</span>`
             : '';
 
-        const bottomRow = entries.length === 0
-            ? `<div class="flex gap-2">${`<button type="button" class="${addClasses}" data-slot-id="${slot.id}"><i class="fas fa-plus text-[10px] mr-1 opacity-70" aria-hidden="true"></i>${addLabel}</button>`}${skipBtn}</div>`
-            : `<button type="button" class="${addClasses}" data-slot-id="${slot.id}"><i class="fas fa-plus text-[10px] mr-1 opacity-70" aria-hidden="true"></i>${addLabel}</button>`;
+        const filledCard = `
+        <div class="rounded-xl bg-[#393937] overflow-hidden" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
+            <div class="flex items-center gap-2 px-3 py-2.5 bg-[#393937]" style="background:#393937 !important;">
+                <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
+                <span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0">${slot.label}</span>
+                <span class="ml-auto"></span>
+                ${kcalPill}
+                ${addBtn}
+            </div>
+            ${entries.length > 0 ? `<div class="px-2.5 pb-2.5 space-y-2 border-t border-[#444442]" style="padding-top:0.625rem;">${entryCards}</div>` : ''}
+        </div>`;
+
+        if (entries.length > 0) return filledCard;
 
         return `
-        <div class="rounded-xl bg-[#393937] overflow-hidden" style="background:#393937 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2 border-b border-[#444442] bg-[#393937]" style="background:#393937 !important;">
-                <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#9b978f] shrink-0" aria-hidden="true"></i>
-                <span class="text-[13px] font-semibold text-[#ddd6ca] truncate min-w-0 flex-1">${slot.label}</span>
-                ${countLabel}
-                ${kcalBadge}
-            </div>
-            <div class="p-2.5 space-y-2">
-                ${entryCards}
-                ${bottomRow}
+        <div class="rounded-xl overflow-hidden" style="background:transparent !important; border:1.5px dashed #444442; box-shadow:none;" data-slot-id="${slot.id}">
+            <div class="flex items-center gap-2 px-3 py-2.5">
+                <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[#7d7a74] shrink-0" aria-hidden="true"></i>
+                <span class="text-[13px] font-semibold text-[#9b978f] truncate min-w-0">${slot.label}</span>
+                <span class="ml-auto"></span>
+                ${addBtn}
             </div>
         </div>`;
     }).join('');