UI fixes

js/views/MealPlanner.js

@@ -3,6 +3,7 @@ import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addMonths,
     addWeeks,
+    sameDay,
     sameMonth,
     startOfDay,
     startOfMonth,
@@ -90,9 +91,9 @@ export function getMealPlannerHTML() {
                     ${createCalendarWeekdayHeaderHTML()}
                     <div id="calendar-month-grid" class="grid grid-cols-7 gap-1.5"></div>
                 </div>
-                <div id="calendar-drag-handle" class="flex items-center justify-center pb-2 pt-0.5">
-                    <span id="calendar-handle-icon" class="${CALENDAR_HANDLE_CLASS}" aria-hidden="true"></span>
-                </div>
+                <button id="calendar-mode-toggle" type="button" class="w-full flex items-center justify-center py-1 pb-2 pt-0.5 text-[rgb(var(--text-faint-rgb))] hover:text-[rgb(var(--text-body-soft-rgb))] transition-colors" aria-label="Przełącz widok kalendarza">
+                    <i id="calendar-handle-icon" class="fas fa-chevron-down text-[10px]"></i>
+                </button>
             </div>
         </div>
 
@@ -191,8 +192,9 @@ function syncModeToggle(mode) {
         mode,
         weekWrapEl: document.getElementById('calendar-week-wrap'),
         monthWrapEl: document.getElementById('calendar-month-wrap'),
-        handleEl: document.getElementById('calendar-handle-icon'),
     });
+    const icon = document.getElementById('calendar-handle-icon');
+    if (icon) icon.className = mode === 'month' ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
 }
 
 function bindCalendarSwipeGesture(state, rerender) {
@@ -1131,18 +1133,24 @@ export function setupMealPlanner() {
     const rerender = () => {
         syncModeToggle(state.mode);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
+        const today = startOfDay(new Date());
         renderCollapsibleCalendar({
             weekGridEl: weekGrid,
             monthGridEl: monthGrid,
             weekAnchorDate: state.weekStart,
             monthAnchorDate: state.monthAnchor,
             selectedDate: state.selected,
-            resolveDayState: (day, meta) => ({
-                dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
-                showIndicator: meta.mode === 'month'
-                    ? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
-                    : dayHasAnyMeal(state.plans, day),
-            }),
+            resolveDayState: (day, meta) => {
+                const isSelected = sameDay(day, state.selected);
+                const isPast = day.getTime() < today.getTime();
+                return {
+                    disabled: isPast && !isSelected,
+                    dimmed: (isPast || (meta.mode === 'month' && !meta.inCurrentMonth)) && !isSelected,
+                    showIndicator: meta.mode === 'month'
+                        ? meta.inCurrentMonth && dayHasAnyMeal(state.plans, day)
+                        : dayHasAnyMeal(state.plans, day),
+                };
+            },
         });
         renderDayContent(state, persist);
     };
@@ -1422,6 +1430,17 @@ export function setupMealPlanner() {
 
     bindCalendarSwipeGesture(state, rerender);
 
+    document.getElementById('calendar-mode-toggle')?.addEventListener('click', () => {
+        if (state.mode === 'week') {
+            state.mode = 'month';
+            state.monthAnchor = startOfMonth(state.selected);
+        } else {
+            state.mode = 'week';
+            state.weekStart = startOfWeekMonday(state.selected);
+        }
+        rerender();
+    });
+
     requestAnimationFrame(() => {
         const ww = document.getElementById('calendar-week-wrap');
         const mw = document.getElementById('calendar-month-wrap');