Reorganizacja górnych paneli i ujednolicenie stylu filtrów

- Kalendarz: data między strzałkami zamiast napisu "Dziś", nawigacja po prawej, mniejszy komponent dopasowany do wysokości dnia
- MealPlanner/Pantry/RecipeList: spójne nagłówki z tytułem po lewej i kontrolkami po prawej
- RecipeList: nowy top bar z przyciskami filtrów i wyszukiwania wzorowany na spiżarni
- Filter popup: ujednolicony styl z popoverem spiżarni (ciemniejsze tło, jaśniejsze obramowanie, spójne chipy)
- Usunięcie przyciemnienia otoczenia przy otwieraniu filtrów
- Badge z liczbą aktywnych filtrów na przycisku, zachowujący stan po zamknięciu popupu
- Usunięcie ikon kalendarza z pigułek w spiżarni

Made-with: Cursor

js/views/MealPlanner.js

@@ -30,13 +30,11 @@ import {
     bindCalendarDayClicks,
     createCalendarTopbarHTML,
     createCalendarWeekdayHeaderHTML,
-    formatCalendarMonthYear,
-    formatCalendarSelectedDate,
     isCalendarOnToday,
     renderCollapsibleCalendar,
     syncCalendarTodayButton,
     syncCollapsibleCalendarMode,
-} from '../ui/mealCalendar.js?v=1';
+} from '../ui/mealCalendar.js?v=11';
 import {
     filterRecipesByQuery,
     renderRecipeGrid,
@@ -66,6 +64,7 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
     syncCalendarTodayButton(
         document.getElementById('cal-go-today'),
         isCalendarOnToday(mode, weekStart, monthAnchor, selected),
+        selected,
     );
 }
 
@@ -73,13 +72,15 @@ export function getMealPlannerHTML() {
     return `
     <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10">
         <div id="planner-cal-bar" class="shrink-0 bg-[#2d2e2b] border-b border-[#444442] mt-3 relative z-10">
-            ${createCalendarTopbarHTML({
-        titleId: 'cal-period-label',
+            <div class="min-h-12 px-4 pt-4 pb-3 flex items-center justify-between gap-3 min-w-0">
+                <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:#f2efe8;font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Plan posiłków</h1>
+                ${createCalendarTopbarHTML({
         prevId: 'cal-prev',
         todayId: 'cal-go-today',
         nextId: 'cal-next',
-        titleClass: 'text-[18px] font-semibold text-[#ddd6ca] leading-none tracking-[-0.03em]',
+        wrapperClass: 'flex shrink-0 items-center justify-end',
     })}
+            </div>
             <div id="calendar-swipe-zone" class="overflow-x-hidden bg-[#2d2e2b]" style="touch-action: none">
                 <div id="calendar-week-wrap" class="px-3 overflow-x-hidden bg-[#2d2e2b]" style="overflow: hidden; max-height: 10rem; opacity: 1; padding-bottom: 0.75rem">
                     ${createCalendarWeekdayHeaderHTML()}
@@ -185,17 +186,6 @@ export function getMealPlannerHTML() {
     `;
 }
 
-function updatePeriodLabel(mode, weekStart, monthAnchor, selected) {
-    const el = document.getElementById('cal-period-label');
-    if (!el) return;
-
-    if (mode === 'week') {
-        el.textContent = formatCalendarSelectedDate(selected);
-    } else {
-        el.textContent = formatCalendarMonthYear(monthAnchor);
-    }
-}
-
 function syncModeToggle(mode) {
     syncCollapsibleCalendarMode({
         mode,
@@ -1140,7 +1130,6 @@ export function setupMealPlanner() {
 
     const rerender = () => {
         syncModeToggle(state.mode);
-        updatePeriodLabel(state.mode, state.weekStart, state.monthAnchor, state.selected);
         syncTodayButton(state.mode, state.weekStart, state.monthAnchor, state.selected);
         renderCollapsibleCalendar({
             weekGridEl: weekGrid,