Move meal plan editor action to the header

js/ui/mealPlanEditor.js

@@ -42,11 +42,15 @@ export function getMealPlanEditorHTML() {
         <div id="mpe-sheet" class="w-full bg-[#2d2e2b] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
             <div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
                 <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-3"></div>
-                <div class="flex items-center justify-between">
+                <div class="flex items-start justify-between gap-3">
                     <div class="min-w-0 flex-1">
                         <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-confirm-btn" type="button" aria-label="Dodaj do planu" class="shrink-0 mt-0.5 border h-8 px-3 rounded-full font-semibold text-[12px] transition-colors inline-flex items-center justify-center gap-1.5" style="background:#dcd6cb !important; color:#2d2e2b !important; background-image:none !important; border-color:#dcd6cb !important; box-shadow:0 2px 10px rgba(0,0,0,0.18);">
+                        <i id="mpe-confirm-icon" class="fas fa-plus text-[10px]" aria-hidden="true"></i>
+                        <span id="mpe-confirm-label">Dodaj</span>
+                    </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;">
@@ -70,19 +74,13 @@ export function getMealPlanEditorHTML() {
                 <div id="mpe-servings-row" class="mt-3"></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-24 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 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));">
                 <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="absolute bottom-0 left-0 right-0 z-[2] px-5 pb-4 flex justify-center" style="pointer-events:none; padding-bottom:calc(1.7rem + env(safe-area-inset-bottom));">
-                <button id="mpe-confirm-btn" type="button" class="border h-10 px-9 rounded-full font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="pointer-events:auto; background:#dcd6cb !important; color:#2d2e2b !important; background-image:none !important; border-color:#dcd6cb !important; box-shadow:0 4px 16px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.2);">
-                    <i id="mpe-confirm-icon" class="fas fa-calendar-plus text-[11px]" aria-hidden="true"></i>
-                    <span id="mpe-confirm-label">Dodaj do planu</span>
-                </button>
-            </div>
         </div>
     </div>
     ${getIngredientCardHTML({ idBase: 'mpe-pc' })}`;
@@ -497,12 +495,16 @@ export function setupMealPlanEditor() {
 
         document.getElementById('mpe-title').textContent = S.mode === 'edit' ? 'Edytuj posiłek' : 'Zaplanuj posiłek';
         document.getElementById('mpe-subtitle').textContent = recipe.title;
-        document.getElementById('mpe-confirm-label').textContent = S.mode === 'edit' ? 'Zapisz zmiany' : 'Dodaj do planu';
+        document.getElementById('mpe-confirm-label').textContent = S.mode === 'edit' ? 'Zapisz' : 'Dodaj';
+        const confirmBtn = document.getElementById('mpe-confirm-btn');
+        if (confirmBtn) {
+            confirmBtn.setAttribute('aria-label', S.mode === 'edit' ? 'Zapisz zmiany' : 'Dodaj do planu');
+        }
         const confirmIcon = document.getElementById('mpe-confirm-icon');
         if (confirmIcon) {
             confirmIcon.className = S.mode === 'edit'
-                ? 'fas fa-check text-[11px]'
+                ? 'fas fa-check text-[10px]'
-                : 'fas fa-calendar-plus text-[11px]';
+                : 'fas fa-plus text-[10px]';
         }
 
         renderAll();