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
This commit is contained in:
2026-04-16 00:17:41 +02:00
parent d3a68a80eb
commit 4d7a1a12ae
7 changed files with 553 additions and 170 deletions

View File

@@ -20,12 +20,10 @@ import {
bindCalendarDayClicks,
createCalendarTopbarHTML,
createCalendarWeekdayHeaderHTML,
formatCalendarMonthYear,
formatCalendarSelectedDate,
isCalendarOnToday,
renderCalendarGrid,
syncCalendarTodayButton,
} from './mealCalendar.js?v=1';
} from './mealCalendar.js?v=11';
import { createIngredientCardController, getIngredientCardHTML } from './ingredientCard.js?v=20260410-107';
function esc(s) {
@@ -56,11 +54,10 @@ export function getMealPlanEditorHTML() {
<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;">
<div id="mpe-cal-section" class="hidden">
${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',
wrapperClass: 'mb-2 flex items-center justify-end gap-3',
})}
${createCalendarWeekdayHeaderHTML()}
<div id="mpe-cal-grid" class="grid grid-cols-7 gap-1.5"></div>
@@ -174,21 +171,20 @@ export function setupMealPlanEditor() {
wrap.classList.remove('hidden');
sec.classList.remove('hidden');
const grid = document.getElementById('mpe-cal-grid');
const title = document.getElementById('mpe-cal-title');
const todayBtn = document.getElementById('mpe-cal-today');
const icon = document.getElementById('mpe-cal-toggle-icon');
if (!grid || !title) return;
if (!grid) return;
const today = startOfDay(new Date());
const plans = loadPlans();
const mode = S.calExpanded ? 'month' : 'week';
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),
S.date,
);
renderCalendarGrid({