Rework calendar

js/app.js

@@ -1,9 +1,9 @@
 import { getRecipeListHTML, setupRecipeList } from './views/RecipeList.js?v=2';
 import { getFilterHTML, setupFilter } from './views/Filter.js?v=2';
 import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetailV2.js?v=2';
-import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js?v=2';
+import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js?v=4';
 import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js?v=2';
-import { getMealPlanEditorHTML, setupMealPlanEditor } from './ui/mealPlanEditor.js?v=3';
+import { getMealPlanEditorHTML, setupMealPlanEditor } from './ui/mealPlanEditor.js?v=5';
 
 function getAppToastHTML() {
     return `
@@ -52,7 +52,7 @@ function setupThemeToggle() {
         if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
 
         const meta = document.querySelector('meta[name="theme-color"]');
-        if (meta) meta.setAttribute('content', isDark ? '#0d0d0d' : '#ffffff');
+        if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
     });
 }
 

js/ui/mealCalendar.js

@@ -0,0 +1,241 @@
+import {
+    addDays,
+    sameDay,
+    startOfDay,
+    startOfMonth,
+    startOfWeekMonday,
+    weekContains,
+} from '../services/dateUtils.js';
+
+export const CALENDAR_MONTHS_LONG = [
+    'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
+    'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
+];
+
+export const CALENDAR_MONTHS_SHORT = [
+    'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
+    'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
+];
+
+export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
+export const CALENDAR_DAY_ATTR = 'data-calendar-day';
+export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[#6d6c67]/75';
+
+function getCalendarDayHTML(day, meta, dayState, dayAttr) {
+    const { mode, selectedDate, inCurrentMonth } = meta;
+    const isSelected = selectedDate && sameDay(day, selectedDate);
+    const showIndicator = !!dayState.showIndicator;
+    const isDisabled = !!dayState.disabled;
+    const isDimmed = !!dayState.dimmed && !isSelected;
+    const bg = isSelected ? '#23221e' : '#2f2f2d';
+    const border = isSelected ? '#787876' : '#444442';
+    const text = isSelected ? '#f2efe8' : (isDimmed ? '#7d7a74' : '#d7d2c8');
+    const dot = isSelected ? '#f2efe8' : '#a59f92';
+    const opacity = isDimmed ? '0.72' : '1';
+    const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.3rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border 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'
+        : 'relative flex h-full w-full items-center justify-center';
+    const dotBottom = mode === 'month' ? '0.18rem' : '0.15rem';
+    const tagName = isDisabled ? 'div' : 'button';
+    const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
+
+    return `
+        <${tagName}${buttonAttrs}
+            class="${outerClass}"
+            style="background:${bg};border-color:${border};color:${text};opacity:${opacity};">
+            <span class="${innerClass}">
+                <span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
+                ${showIndicator
+        ? `<span class="absolute left-1/2 w-1 h-1 -translate-x-1/2 rounded-full opacity-75" style="bottom:${dotBottom};background:${dot};" aria-hidden="true"></span>`
+        : ''}
+            </span>
+        </${tagName}>
+    `;
+}
+
+function getMonthCells(monthAnchor) {
+    const first = startOfMonth(monthAnchor);
+    const startGrid = startOfWeekMonday(first);
+    const cells = [];
+    for (let i = 0; i < 42; i++) cells.push(addDays(startGrid, i));
+    while (cells.length > 35 && cells.slice(-7).every((day) => day.getMonth() !== first.getMonth())) {
+        cells.splice(-7);
+    }
+    return { cells, month: first.getMonth() };
+}
+
+function getDayState(day, meta, resolveDayState) {
+    if (typeof resolveDayState !== 'function') {
+        return {
+            disabled: false,
+            dimmed: meta.mode === 'month' && !meta.inCurrentMonth,
+            showIndicator: false,
+        };
+    }
+
+    const resolved = resolveDayState(day, meta) || {};
+    return {
+        disabled: !!resolved.disabled,
+        dimmed: !!resolved.dimmed,
+        showIndicator: !!resolved.showIndicator,
+    };
+}
+
+export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT) {
+    return `
+        <div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none">
+            ${labels.map((label) => `<div>${label}</div>`).join('')}
+        </div>
+    `;
+}
+
+export function createCalendarTopbarHTML({
+    titleId,
+    prevId,
+    todayId,
+    nextId,
+    wrapperClass = 'px-4 pt-4 pb-3 flex items-center gap-3',
+    titleClass = 'text-[18px] font-semibold text-gray-900 leading-none tracking-[-0.03em]',
+}) {
+    return `
+        <div class="${wrapperClass}">
+            <div class="min-w-0 flex-1">
+                <p id="${titleId}" class="${titleClass}"></p>
+            </div>
+            <div class="shrink-0 flex h-[2.3rem] items-center gap-0.5 rounded-full border px-1" style="background:#2f2f2d;border-color:#444442;">
+                <button type="button" id="${prevId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Poprzedni okres">
+                    <i class="fas fa-chevron-left text-[11px]" aria-hidden="true"></i>
+                </button>
+                <button type="button" id="${todayId}" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
+                        class="h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none text-[#d7d2c8] transition-colors hover:bg-[#3a3a37]">
+                    Dziś
+                </button>
+                <button type="button" id="${nextId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Następny okres">
+                    <i class="fas fa-chevron-right text-[11px]" aria-hidden="true"></i>
+                </button>
+            </div>
+        </div>
+    `;
+}
+
+export function formatCalendarMonthYear(date) {
+    return `${CALENDAR_MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+export function formatCalendarSelectedDate(date) {
+    return `${date.getDate()} ${CALENDAR_MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
+    const today = startOfDay(new Date());
+    if (!sameDay(selectedDate, today)) return false;
+    if (mode === 'week') return weekContains(weekStart, today);
+    return startOfMonth(monthAnchor).getTime() === startOfMonth(today).getTime();
+}
+
+export function syncCalendarTodayButton(buttonEl, isOnToday) {
+    if (!buttonEl) return;
+    const base = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none transition-colors';
+    const active = `${base} text-[#d7d2c8] hover:bg-[#3a3a37]`;
+    const dim = `${base} text-[#7d7a74] cursor-default`;
+    buttonEl.className = isOnToday ? dim : active;
+    buttonEl.disabled = isOnToday;
+}
+
+export function renderCalendarGrid({
+    gridEl,
+    mode,
+    anchorDate,
+    selectedDate,
+    resolveDayState,
+    dayAttr = CALENDAR_DAY_ATTR,
+}) {
+    if (!gridEl) return;
+
+    if (mode === 'week') {
+        const weekStart = startOfWeekMonday(anchorDate);
+        const cells = [];
+        for (let i = 0; i < 7; i++) {
+            const day = addDays(weekStart, i);
+            const meta = {
+                mode,
+                selectedDate,
+                inCurrentMonth: true,
+            };
+            cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr));
+        }
+        gridEl.innerHTML = cells.join('');
+        return;
+    }
+
+    const { cells, month } = getMonthCells(anchorDate);
+    gridEl.innerHTML = cells.map((day) => {
+        const meta = {
+            mode,
+            selectedDate,
+            inCurrentMonth: day.getMonth() === month,
+        };
+        return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr);
+    }).join('');
+}
+
+export function renderCollapsibleCalendar({
+    weekGridEl,
+    monthGridEl,
+    weekAnchorDate,
+    monthAnchorDate,
+    selectedDate,
+    resolveDayState,
+    dayAttr = CALENDAR_DAY_ATTR,
+}) {
+    renderCalendarGrid({
+        gridEl: weekGridEl,
+        mode: 'week',
+        anchorDate: weekAnchorDate,
+        selectedDate,
+        resolveDayState,
+        dayAttr,
+    });
+    renderCalendarGrid({
+        gridEl: monthGridEl,
+        mode: 'month',
+        anchorDate: monthAnchorDate,
+        selectedDate,
+        resolveDayState,
+        dayAttr,
+    });
+}
+
+export function syncCollapsibleCalendarMode({
+    mode,
+    weekWrapEl,
+    monthWrapEl,
+    handleEl,
+    activePaddingBottom = '0.75rem',
+    weekMaxHeight = '10rem',
+    monthMaxHeight = '17.25rem',
+}) {
+    if (weekWrapEl) {
+        weekWrapEl.style.maxHeight = mode === 'week' ? weekMaxHeight : '0';
+        weekWrapEl.style.opacity = mode === 'week' ? '1' : '0';
+        weekWrapEl.style.paddingBottom = mode === 'week' ? activePaddingBottom : '0';
+    }
+    if (monthWrapEl) {
+        monthWrapEl.style.maxHeight = mode === 'month' ? monthMaxHeight : '0';
+        monthWrapEl.style.opacity = mode === 'month' ? '1' : '0';
+        monthWrapEl.style.paddingBottom = mode === 'month' ? activePaddingBottom : '0';
+    }
+    if (handleEl) handleEl.className = CALENDAR_HANDLE_CLASS;
+}
+
+export function bindCalendarDayClicks(containerEl, onSelect, dayAttr = CALENDAR_DAY_ATTR) {
+    if (!containerEl || typeof onSelect !== 'function') return;
+    containerEl.addEventListener('click', (event) => {
+        const button = event.target.closest(`[${dayAttr}]`);
+        if (!button || !containerEl.contains(button)) return;
+        const ts = Number(button.getAttribute(dayAttr));
+        if (!Number.isFinite(ts)) return;
+        onSelect(new Date(ts), button, event);
+    });
+}

js/ui/mealPlanEditor.js

@@ -6,7 +6,6 @@ import {
     sameDay,
     sameMonth,
     startOfDay,
-    startOfMonth,
     startOfWeekMonday,
 } from '../services/dateUtils.js';
 import {
@@ -15,16 +14,23 @@ import {
     newPlanEntryId,
     savePlans,
 } from '../services/planStore.js';
+import { dayHasAnyMeal } from '../services/planIngredients.js';
 import { showAppToast } from './toast.js';
+import {
+    bindCalendarDayClicks,
+    createCalendarTopbarHTML,
+    createCalendarWeekdayHeaderHTML,
+    formatCalendarMonthYear,
+    formatCalendarSelectedDate,
+    isCalendarOnToday,
+    renderCalendarGrid,
+    syncCalendarTodayButton,
+} from './mealCalendar.js?v=1';
 
 function esc(s) {
     return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
-const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
-const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
-const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
-const WEEKDAYS_LONG = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
 const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 
 /* ── HTML template ──────────────────────────────────── */
@@ -47,16 +53,15 @@ export function getMealPlanEditorHTML() {
             </div>
             <div id="mpe-body" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 py-3">
                 <div id="mpe-cal-section" class="hidden mb-4">
-                    <div class="flex items-center gap-1 mb-2">
-                        <button id="mpe-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
-                        <p id="mpe-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
-                        <button id="mpe-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
-                    </div>
-                    <div class="flex items-center justify-center mb-2">
-                        <button id="mpe-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden"><i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś</button>
-                    </div>
-                    <div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}</div>
-                    <div id="mpe-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
+                    ${createCalendarTopbarHTML({
+        titleId: 'mpe-cal-title',
+        prevId: 'mpe-cal-prev',
+        todayId: 'mpe-cal-today',
+        nextId: 'mpe-cal-next',
+        wrapperClass: 'mb-2 flex items-center gap-3',
+    })}
+                    ${createCalendarWeekdayHeaderHTML()}
+                    <div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
                     <button id="mpe-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors"><i id="mpe-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i></button>
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
                     <div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
@@ -142,19 +147,6 @@ export function setupMealPlanEditor() {
 
     /* ── Calendar ──────────────────────────────────── */
 
-    function calCell(d, today, month) {
-        const sel = S.date && sameDay(d, S.date);
-        const past = d.getTime() < today.getTime();
-        const other = d.getMonth() !== month;
-        let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
-        if (sel) cls += 'bg-gray-900 text-white ';
-        else if (past || other) cls += 'text-gray-300 ';
-        else cls += 'text-gray-800 hover:bg-gray-100 ';
-        if (!sel && !past && !other && sameDay(d, today)) cls += 'ring-1 ring-inset ring-gray-900 ';
-        const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
-        return (past && !sel) ? `<div class="${cls}">${inner}</div>` : `<button type="button" class="mpe-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
-    }
-
     function renderCal() {
         const sec = document.getElementById('mpe-cal-section');
         if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
@@ -165,34 +157,34 @@ export function setupMealPlanEditor() {
         const icon = document.getElementById('mpe-cal-toggle-icon');
         if (!grid || !title) return;
         const today = startOfDay(new Date());
+        const plans = loadPlans();
+        const mode = S.calExpanded ? 'month' : 'week';
 
-        if (S.calExpanded) {
-            const ms = startOfMonth(S.calDate);
-            title.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
-            icon.className = 'fas fa-chevron-up text-[10px]';
-            const first = startOfWeekMonday(ms);
-            const cells = [];
-            let d = new Date(first);
-            for (let i = 0; i < 42; i++) { cells.push(new Date(d)); d = addDays(d, 1); }
-            while (cells.length > 7 && cells.slice(-7).every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
-            grid.innerHTML = cells.map((c) => calCell(c, today, ms.getMonth())).join('');
-            todayBtn?.classList.toggle('hidden', sameMonth(today, S.calDate));
-        } else {
-            const ws = startOfWeekMonday(S.calDate);
-            title.textContent = `${MONTHS_LONG[S.calDate.getMonth()]} ${S.calDate.getFullYear()}`;
-            icon.className = 'fas fa-chevron-down text-[10px]';
-            const cells = [];
-            for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
-            grid.innerHTML = cells.map((c) => calCell(c, today, S.calDate.getMonth())).join('');
-            todayBtn?.classList.toggle('hidden', sameDay(startOfWeekMonday(today), ws));
+        title.textContent = S.calExpanded ? formatCalendarMonthYear(S.calDate) : formatCalendarSelectedDate(S.date);
+        if (icon) {
+            icon.className = S.calExpanded ? 'fas fa-chevron-up text-[10px]' : 'fas fa-chevron-down text-[10px]';
         }
+        syncCalendarTodayButton(
+            todayBtn,
+            isCalendarOnToday(mode, startOfWeekMonday(S.calDate), S.calDate, S.date),
+        );
 
-        grid.querySelectorAll('.mpe-cal-day').forEach((btn) => {
-            btn.addEventListener('click', () => {
-                S.date = new Date(Number(btn.dataset.ts));
-                S.calDate = new Date(S.date);
-                renderCal();
-            });
+        renderCalendarGrid({
+            gridEl: grid,
+            mode,
+            anchorDate: S.calDate,
+            selectedDate: S.date,
+            resolveDayState: (day, meta) => {
+                const isSelected = S.date && sameDay(day, S.date);
+                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(plans, day)
+                        : dayHasAnyMeal(plans, day),
+                };
+            },
         });
     }
 
@@ -475,6 +467,11 @@ export function setupMealPlanEditor() {
     document.getElementById('mpe-close-btn')?.addEventListener('click', closeEditor);
     overlay?.addEventListener('click', (e) => { if (e.target === overlay) closeEditor(); });
     document.getElementById('mpe-confirm-btn')?.addEventListener('click', handleConfirm);
+    bindCalendarDayClicks(document.getElementById('mpe-cal-grid'), (date) => {
+        S.date = date;
+        S.calDate = new Date(date);
+        renderCal();
+    });
 
     document.getElementById('mpe-cal-prev')?.addEventListener('click', () => {
         if (!S.showCal) return;

js/views/MealPlanner.js

@@ -4,7 +4,6 @@ import {
     addDays,
     addMonths,
     addWeeks,
-    sameDay,
     sameMonth,
     startOfDay,
     startOfMonth,
@@ -26,12 +25,20 @@ import {
     newPlanEntryId,
     savePlans,
 } from '../services/planStore.js';
+import {
+    CALENDAR_HANDLE_CLASS,
+    CALENDAR_MONTHS_SHORT,
+    bindCalendarDayClicks,
+    createCalendarTopbarHTML,
+    createCalendarWeekdayHeaderHTML,
+    formatCalendarMonthYear,
+    formatCalendarSelectedDate,
+    isCalendarOnToday,
+    renderCollapsibleCalendar,
+    syncCalendarTodayButton,
+    syncCollapsibleCalendarMode,
+} from '../ui/mealCalendar.js?v=1';
 
-const MONTHS_SHORT = [
-    'sty', 'lut', 'mar', 'kwi', 'maj', 'cze',
-    'lip', 'sie', 'wrz', 'paź', 'lis', 'gru',
-];
-const WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
 const WEEKDAYS_LONG = [
     'Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota',
 ];
@@ -44,58 +51,34 @@ function recipesForSlot(slotId) {
     return Object.values(RECIPES).filter((r) => r.allowedSlots.includes(slotId));
 }
 
-function isCalendarOnToday(mode, weekStart, monthAnchor, selected) {
-    const today = startOfDay(new Date());
-    if (!sameDay(selected, today)) return false;
-    if (mode === 'week') return weekContains(weekStart, today);
-    return sameMonth(monthAnchor, today);
-}
-
 function syncTodayButton(mode, weekStart, monthAnchor, selected) {
-    const btn = document.getElementById('cal-go-today');
-    if (!btn) return;
-    const onToday = isCalendarOnToday(mode, weekStart, monthAnchor, selected);
-    const active = 'h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors';
-    const dim = 'h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-100 bg-gray-50 px-2 text-[10px] font-semibold text-gray-400 shadow-none cursor-default transition-colors';
-    btn.className = onToday ? dim : active;
-    btn.disabled = onToday;
+    syncCalendarTodayButton(
+        document.getElementById('cal-go-today'),
+        isCalendarOnToday(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-gray-50 z-10 pb-24">
         <div class="shrink-0 bg-white border-b border-gray-200 mt-3">
-            <div class="px-3 pt-2 pb-1.5 flex items-center gap-1">
-                <button type="button" id="cal-prev" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors" aria-label="Poprzedni okres">
-                    <i class="fas fa-chevron-left text-xs" aria-hidden="true"></i>
-                </button>
-                <p id="cal-period-label" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
-                <button type="button" id="cal-next" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors" aria-label="Następny okres">
-                    <i class="fas fa-chevron-right text-xs" aria-hidden="true"></i>
-                </button>
-            </div>
-            <div class="px-3 pb-2 flex items-center justify-center">
-                <button type="button" id="cal-go-today" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
-                        class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors">
-                    <i class="fas fa-calendar-day text-[9px] opacity-70" aria-hidden="true"></i>
-                    Dziś
-                </button>
-            </div>
-            <div id="calendar-swipe-zone" style="touch-action: pan-x">
-                <div id="calendar-week-wrap" class="px-3 pb-1" style="overflow: hidden; max-height: 10rem; opacity: 1">
-                    <div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
-                        ${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
-                    </div>
-                    <div id="calendar-week-grid" class="grid grid-cols-7 gap-0.5"></div>
+            ${createCalendarTopbarHTML({
+        titleId: 'cal-period-label',
+        prevId: 'cal-prev',
+        todayId: 'cal-go-today',
+        nextId: 'cal-next',
+    })}
+            <div id="calendar-swipe-zone" class="overflow-x-hidden" style="touch-action: none">
+                <div id="calendar-week-wrap" class="px-3 overflow-x-hidden" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
+                    ${createCalendarWeekdayHeaderHTML()}
+                    <div id="calendar-week-grid" class="grid grid-cols-7 gap-1.5 max-w-full overflow-x-hidden"></div>
                 </div>
-                <div id="calendar-month-wrap" class="px-3 pb-1" style="overflow: hidden; max-height: 0; opacity: 0">
-                    <div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
-                        ${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
-                    </div>
-                    <div id="calendar-month-grid" class="grid grid-cols-7 gap-0.5"></div>
+                <div id="calendar-month-wrap" class="px-3" style="overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0">
+                    ${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">
-                    <i id="calendar-handle-icon" class="fas fa-chevron-down text-[8px] text-gray-300" aria-hidden="true"></i>
+                    <span id="calendar-handle-icon" class="${CALENDAR_HANDLE_CLASS}" aria-hidden="true"></span>
                 </div>
             </div>
         </div>
@@ -199,105 +182,23 @@ export function getMealPlannerHTML() {
     `;
 }
 
-function renderWeekGrid(weekStart, selected, plans) {
-    const grid = document.getElementById('calendar-week-grid');
-    if (!grid) return;
-
-    const cells = [];
-    for (let i = 0; i < 7; i++) {
-        const day = addDays(weekStart, i);
-        const isSel = selected && sameDay(day, selected);
-        const isToday = sameDay(day, new Date());
-        const hasMeals = dayHasAnyMeal(plans, day);
-        cells.push(`
-            <button type="button" data-planner-day="${day.getTime()}"
-                class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
-                ${isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100'}
-                ${isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
-                <span>${day.getDate()}</span>
-                ${hasMeals ? `<span class="w-1 h-1 rounded-full ${isSel ? 'bg-white' : 'bg-gray-900'} opacity-80" aria-hidden="true"></span>` : '<span class="w-1 h-1" aria-hidden="true"></span>'}
-            </button>
-        `);
-    }
-    grid.innerHTML = cells.join('');
-}
-
-function renderMonthGrid(monthAnchor, selected, plans) {
-    const grid = document.getElementById('calendar-month-grid');
-    if (!grid) return;
-
-    const first = startOfMonth(monthAnchor);
-    const startGrid = startOfWeekMonday(first);
-    const cells = [];
-    for (let i = 0; i < 42; i++) {
-        const day = addDays(startGrid, i);
-        const inMonth = day.getMonth() === first.getMonth();
-        const isSel = selected && sameDay(day, selected);
-        const isToday = sameDay(day, new Date());
-        const hasMeals = inMonth && dayHasAnyMeal(plans, day);
-        cells.push(`
-            <button type="button" data-planner-day="${day.getTime()}"
-                class="flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight
-                ${!inMonth ? 'text-gray-300' : (isSel ? 'bg-gray-900 text-white' : 'text-gray-800 hover:bg-gray-100')}
-                ${inMonth && isToday && !isSel ? 'ring-1 ring-inset ring-gray-900' : ''}">
-                <span>${day.getDate()}</span>
-                ${inMonth && hasMeals ? `<span class="w-1 h-1 rounded-full ${isSel ? 'bg-white' : 'bg-gray-900'} opacity-80" aria-hidden="true"></span>` : '<span class="w-1 h-1" aria-hidden="true"></span>'}
-            </button>
-        `);
-    }
-    grid.innerHTML = cells.join('');
-}
-
-function updatePeriodLabel(mode, weekStart, monthAnchor) {
+function updatePeriodLabel(mode, weekStart, monthAnchor, selected) {
     const el = document.getElementById('cal-period-label');
     if (!el) return;
 
     if (mode === 'week') {
-        const end = addDays(weekStart, 6);
-        const y = weekStart.getFullYear();
-        if (weekStart.getMonth() === end.getMonth()) {
-            el.textContent = `${weekStart.getDate()}–${end.getDate()} ${MONTHS_SHORT[weekStart.getMonth()]} ${y}`;
-        } else {
-            el.textContent = `${weekStart.getDate()} ${MONTHS_SHORT[weekStart.getMonth()]} – ${end.getDate()} ${MONTHS_SHORT[end.getMonth()]} ${y}`;
-        }
+        el.textContent = formatCalendarSelectedDate(selected);
     } else {
-        const m = monthAnchor.getMonth();
-        const y = monthAnchor.getFullYear();
-        const monthLong = [
-            'Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec',
-            'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień',
-        ][m];
-        el.textContent = `${monthLong} ${y}`;
+        el.textContent = formatCalendarMonthYear(monthAnchor);
     }
 }
 
 function syncModeToggle(mode) {
-    const weekWrap = document.getElementById('calendar-week-wrap');
-    const monthWrap = document.getElementById('calendar-month-wrap');
-    const handleIcon = document.getElementById('calendar-handle-icon');
-
-    if (weekWrap) {
-        weekWrap.style.maxHeight = mode === 'week' ? '10rem' : '0';
-        weekWrap.style.opacity = mode === 'week' ? '1' : '0';
-    }
-    if (monthWrap) {
-        monthWrap.style.maxHeight = mode === 'month' ? '25rem' : '0';
-        monthWrap.style.opacity = mode === 'month' ? '1' : '0';
-    }
-    if (handleIcon) {
-        handleIcon.className = mode === 'week'
-            ? 'fas fa-chevron-down text-[8px] text-gray-300'
-            : 'fas fa-chevron-up text-[8px] text-gray-300';
-    }
-}
-
-function bindDayClicks(container, state, rerender) {
-    container?.addEventListener('click', (e) => {
-        const btn = e.target.closest('[data-planner-day]');
-        if (!btn) return;
-        const ts = Number(btn.getAttribute('data-planner-day'));
-        state.selected = new Date(ts);
-        rerender();
+    syncCollapsibleCalendarMode({
+        mode,
+        weekWrapEl: document.getElementById('calendar-week-wrap'),
+        monthWrapEl: document.getElementById('calendar-month-wrap'),
+        handleEl: document.getElementById('calendar-handle-icon'),
     });
 }
 
@@ -448,7 +349,7 @@ function renderDayContent(state) {
     const heading = document.getElementById('planner-day-heading');
     if (heading) {
         const wd = WEEKDAYS_LONG[sel.getDay()];
-        heading.textContent = `${wd}, ${sel.getDate()} ${MONTHS_SHORT[sel.getMonth()]}`;
+        heading.textContent = `${wd}, ${sel.getDate()} ${CALENDAR_MONTHS_SHORT[sel.getMonth()]}`;
     }
 
     const dayPlan = getDayPlan(state.plans, sel);
@@ -753,7 +654,7 @@ function renderIngredientsSheet(state) {
 
     if (titleEl) {
         const wd = WEEKDAYS_LONG[state.selected.getDay()];
-        titleEl.textContent = `${wd}, ${state.selected.getDate()} ${MONTHS_SHORT[state.selected.getMonth()]} — składniki`;
+        titleEl.textContent = `${wd}, ${state.selected.getDate()} ${CALENDAR_MONTHS_SHORT[state.selected.getMonth()]} — składniki`;
     }
     if (subEl) subEl.textContent = 'Porównanie potrzeb z zapasami w spiżarni.';
 
@@ -845,7 +746,7 @@ function renderIngredientsSheet(state) {
             <div class="space-y-2">
                 ${upcoming.map((day) => {
                     const wd = WEEKDAYS_LONG[day.date.getDay()];
-                    const label = `${wd}, ${day.date.getDate()} ${MONTHS_SHORT[day.date.getMonth()]}`;
+                    const label = `${wd}, ${day.date.getDate()} ${CALENDAR_MONTHS_SHORT[day.date.getMonth()]}`;
                     const shorts = day.items.filter((it) => !it.enough);
                     return `<div class="rounded-xl border border-amber-200/80 bg-amber-50/50 p-3">
                         <p class="text-[12px] font-semibold text-amber-900">
@@ -912,10 +813,21 @@ export function setupMealPlanner() {
 
     const rerender = () => {
         syncModeToggle(state.mode);
-        updatePeriodLabel(state.mode, state.weekStart, state.monthAnchor);
+        updatePeriodLabel(state.mode, state.weekStart, state.monthAnchor, state.selected);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
-        renderWeekGrid(state.weekStart, state.selected, state.plans);
-        renderMonthGrid(state.monthAnchor, state.selected, state.plans);
+        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),
+            }),
+        });
         renderDayContent(state);
     };
 
@@ -924,8 +836,14 @@ export function setupMealPlanner() {
         rerender();
     };
 
-    bindDayClicks(weekGrid?.parentElement, state, rerender);
-    bindDayClicks(monthGrid?.parentElement, state, rerender);
+    bindCalendarDayClicks(weekGrid, (date) => {
+        state.selected = date;
+        rerender();
+    });
+    bindCalendarDayClicks(monthGrid, (date) => {
+        state.selected = date;
+        rerender();
+    });
 
     document.getElementById('cal-prev')?.addEventListener('click', () => {
         if (state.mode === 'week') {
@@ -1117,7 +1035,7 @@ export function setupMealPlanner() {
         }
         copyList.innerHTML = days.map((d) => {
             const wd = WEEKDAYS_LONG[d.getDay()];
-            const label = `${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
+            const label = `${wd}, ${d.getDate()} ${CALENDAR_MONTHS_SHORT[d.getMonth()]}`;
             const hasMeals = dayHasAnyMeal(state.plans, d);
             const badge = hasMeals ? '<span class="text-[10px] text-amber-600 font-semibold">ma posiłki</span>' : '';
             return `<button type="button" class="planner-copy-target w-full flex items-center justify-between gap-2 p-3 rounded-xl border border-gray-200 bg-gray-50/80 hover:border-gray-900 hover:bg-white transition-all text-left" data-target-ts="${d.getTime()}">