UI fixes

js/ui/mealCalendar.js

@@ -37,11 +37,11 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
     let borderClass = 'border';
 
     if (isSelected) {
-        bg = theme.selectedBg || 'rgb(var(--sunken-rgb))';
+        bg = theme.selectedBg || 'rgb(var(--card-rgb))';
         borderColor = theme.selectedBorder || 'rgb(var(--border-input-rgb))';
         text = theme.selectedText || 'rgb(var(--text-emphasis-rgb))';
     } else if (isDimmed) {
-        bg = theme.dimmedBg ?? theme.bg ?? defaultBg;
+        bg = theme.dimmedBg ?? 'transparent';
         text = theme.dimText || 'rgb(var(--text-faint-rgb))';
         borderClass = 'border-0';
     } else {
@@ -52,7 +52,7 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
 
     const dot = isSelected ? (theme.selectedDot || 'rgb(var(--text-emphasis-rgb))') : (theme.dot || 'rgb(var(--text-faint-rgb))');
     const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
-    const borderStyle = isDimmed ? 'border:none;' : `border-color:${borderColor};`;
+    const borderStyle = borderColor ? `border-color:${borderColor};` : 'border:none;';
     const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
     const innerClass = mode === 'month'
         ? 'relative flex h-full w-full flex-col items-center justify-center'

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');

js/views/Pantry.js

@@ -726,7 +726,8 @@ export function setupPantry() {
     document.getElementById('pantry-search-toggle')?.addEventListener('click', () => openSearch());
     document.getElementById('pantry-search-close')?.addEventListener('click', () => closeSearch());
     document.getElementById('pantry-filter-toggle')?.addEventListener('click', () => toggleFilterPanel());
-    document.getElementById('pantry-filter-clear')?.addEventListener('click', () => {
+    document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
+        event.stopPropagation();
         pantryFilters = { categories: [], sections: [] };
         syncHorizonUI();
         renderBoard();
@@ -738,6 +739,8 @@ export function setupPantry() {
         const chip = target.closest('[data-pantry-filter-kind]');
         if (!(chip instanceof Element)) return;
 
+        event.stopPropagation();
+
         const kind = chip.getAttribute('data-pantry-filter-kind');
         const value = chip.getAttribute('data-pantry-filter-value');
         if (!kind || !value) return;