From 422b29e3f00ca99c4997fd550097d4c7cf82924f Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Mon, 6 Apr 2026 22:32:46 +0200
Subject: [PATCH] Update style

---
 index.html                 |  6 ++---
 js/ui/bottomNav.js         | 10 +++----
 js/ui/mealPlanEditor.js    | 53 ++++++++++++++++++++++++++------------
 js/views/MealPlanner.js    | 16 ++++++++++--
 js/views/RecipeDetailV2.js |  8 +++---
 5 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index b73d404..aaab774 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-60">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260406-63">
     <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-60';
+        const APP_ASSET_VERSION = '20260406-63';
         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-60';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-63';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/ui/bottomNav.js b/js/ui/bottomNav.js
index 4793f16..a709343 100644
--- a/js/ui/bottomNav.js
+++ b/js/ui/bottomNav.js
@@ -28,13 +28,13 @@ export function getBottomNavHTML() {
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
         <div class="bottom-dock">
             <div class="nav-slot">
-                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
-                    <i class="fas fa-book" aria-hidden="true"></i>
+                <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
+                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="nav-slot">
-                <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
-                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Przepisy">
+                    <i class="fas fa-search" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="nav-slot">
@@ -86,7 +86,7 @@ export function setupBottomNav({ refreshPantry } = {}) {
     });
 
     setupThemeToggle();
-    apply('recipes');
+    apply('planner');
 
     window.refreshStockViews = () => {
         if (typeof refreshPantry === 'function') refreshPantry();
diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index 6d24895..6a7b500 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -46,9 +46,6 @@ export function getMealPlanEditorHTML() {
                         <h2 id="mpe-title" class="text-[15px] font-bold text-gray-900 leading-tight"></h2>
                         <p id="mpe-subtitle" class="text-[11px] text-gray-500 mt-0.5 truncate"></p>
                     </div>
-                    <button id="mpe-close-btn" type="button" class="shrink-0 w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors ml-3">
-                        <i class="fas fa-times text-xs"></i>
-                    </button>
                 </div>
             </div>
             <div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
@@ -74,17 +71,16 @@ export function getMealPlanEditorHTML() {
                 </div>
                 <div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
             </div>
-            <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
+            <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-16 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
                 <div id="mpe-ing-section" class="mb-4">
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
                     <div id="mpe-ing-list" class="space-y-1.5"></div>
                     <div id="mpe-add-area" class="mt-2"></div>
                 </div>
             </div>
-            <div id="mpe-footer-wrap" class="relative z-[1] shrink-0 px-5 pt-2 pb-3 flex justify-center bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
-                <div id="mpe-footer-shadow" class="pointer-events-none absolute inset-x-0 -top-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
-                <button id="mpe-confirm-btn" type="button" class="border text-white px-4 py-3 rounded-xl font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important; border-color:#444442 !important;">
-                    <i class="fas fa-check text-xs"></i> <span id="mpe-confirm-label">Dodaj do planu</span>
+            <div id="mpe-footer-wrap" class="absolute bottom-0 left-0 right-0 z-[2] px-5 pb-3 flex justify-center" style="pointer-events:none; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
+                <button id="mpe-confirm-btn" type="button" class="border text-white px-6 py-3 rounded-full font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; border-color:#444442 !important; box-shadow:0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);">
+                    <span id="mpe-confirm-label">Dodaj do planu</span>
                 </button>
             </div>
         </div>
@@ -247,8 +243,8 @@ export function setupMealPlanEditor() {
         el.innerHTML = `
             <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;">
+                <div class="flex items-start">
+                    <div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
                         <button type="button" id="mpe-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>
@@ -287,7 +283,7 @@ export function setupMealPlanEditor() {
             const disp = base * S.servings;
             const modified = id in S.overrides;
 
-            const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
+            const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
 
             const shuffleBtn = hasAlts
                 ? `<button type="button" class="mpe-shuffle 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-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
@@ -332,7 +328,7 @@ export function setupMealPlanEditor() {
             const def = INGREDIENTS[a.ingredientId];
             const name = def?.name || a.ingredientId;
             const disp = a.amount * S.servings;
-            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
+            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<div class="flex items-center gap-2">`;
             html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
@@ -374,7 +370,7 @@ export function setupMealPlanEditor() {
                     <input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
                     <button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
                 </div>
-                <div class="max-h-40 overflow-y-auto space-y-0.5 no-scrollbar" id="mpe-add-results">
+                <div class="max-h-40 overflow-y-auto space-y-1 no-scrollbar" id="mpe-add-results">
                     ${avail.length === 0
                         ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
                         : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
@@ -413,7 +409,7 @@ export function setupMealPlanEditor() {
             <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="rounded-xl border px-3 py-2" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
                         <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">${n.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">${n.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>
@@ -542,14 +538,39 @@ export function setupMealPlanEditor() {
 
         savePlans(plans);
         closeEditor();
-        showAppToast(S.mode === 'edit' ? 'Zapisano zmiany!' : 'Dodano do planera!');
         window.refreshPlanner?.();
     }
 
     /* ── Event bindings ───────────────────────────── */
 
-    document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
     overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
+
+    /* ── Swipe-to-dismiss ────────────────────────── */
+    const header = sheet?.children[0];
+    if (header && sheet) {
+        let startY = 0, currentY = 0, dragging = false;
+        header.addEventListener('touchstart', (e) => {
+            startY = e.touches[0].clientY;
+            currentY = 0;
+            dragging = true;
+            sheet.style.transition = 'none';
+        }, { passive: true });
+        header.addEventListener('touchmove', (e) => {
+            if (!dragging) return;
+            currentY = Math.max(0, e.touches[0].clientY - startY);
+            sheet.style.transform = `translateY(${currentY}px)`;
+        }, { passive: true });
+        header.addEventListener('touchend', () => {
+            if (!dragging) return;
+            dragging = false;
+            sheet.style.transition = 'transform 300ms cubic-bezier(0.32,0.72,0,1)';
+            if (currentY > 120) {
+                closeEditor();
+            } else {
+                sheet.style.transform = 'translateY(0)';
+            }
+        });
+    }
     document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
     bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
         S.date = date;
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index 5ddc27a..b503531 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -60,7 +60,7 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
 export function getMealPlannerHTML() {
     return `
     <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10 pb-24">
-        <div class="shrink-0 bg-[#2d2e2b] border-b border-[#444442] mt-3">
+        <div id="planner-cal-bar" class="shrink-0 bg-[#2d2e2b] border-b border-[#444442] mt-3 relative z-10">
             ${createCalendarTopbarHTML({
         titleId: 'cal-period-label',
         prevId: 'cal-prev',
@@ -88,7 +88,7 @@ export function getMealPlannerHTML() {
                 <div class="h-full 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="w-full rounded-xl border px-3 py-2.5" style="border-color:#444442 !important;">
+                        <div class="w-full rounded-xl border px-3 py-2.5" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
                             <div class="grid grid-cols-4 gap-3 text-left">
                                 <div class="min-w-0">
                                     <span id="planner-nutrition-kcal" class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">—</span>
@@ -801,6 +801,18 @@ export function setupMealPlanner() {
         rerender();
     };
 
+    /* ── calendar scroll shadow ─────────────────── */
+    const plannerScroll = document.getElementById('planner-scroll');
+    const calBar = document.getElementById('planner-cal-bar');
+    if (plannerScroll && calBar) {
+        const shadow = document.createElement('div');
+        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
+        calBar.appendChild(shadow);
+        plannerScroll.addEventListener('scroll', () => {
+            shadow.style.opacity = plannerScroll.scrollTop > 2 ? '1' : '0';
+        });
+    }
+
     bindCalendarDayClicks(weekGrid, (date) => {
         state.selected = date;
         rerender();
diff --git a/js/views/RecipeDetailV2.js b/js/views/RecipeDetailV2.js
index 0372713..7edf859 100644
--- a/js/views/RecipeDetailV2.js
+++ b/js/views/RecipeDetailV2.js
@@ -217,7 +217,7 @@ function renderNutritionSummary(recipe) {
                     <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="rounded-xl border px-3 py-2" style="background:#2f2f2d !important; border-color:#444442 !important; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
                                 <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>
@@ -231,8 +231,8 @@ function renderNutritionSummary(recipe) {
                 <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;">
+                        <div class="flex items-start">
+                            <div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
                                 <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>
@@ -260,7 +260,7 @@ function renderIngredients(recipe) {
         const effectiveName = effectiveDef?.name || effectiveId;
         const scaledAmount = ing.amount * currentServings;
         const isExpanded = expandedAlternatives.has(origId);
-        const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
+        const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
 
         const toggleBtn = hasAlts
             ? `<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>`