Filtry
@@ -237,16 +198,6 @@ function formatTimeRangeSummary(minMinutes, maxMinutes) {
return `${formatTimeValue(minMinutes)} - ${formatTimeValue(maxMinutes)}`;
}
-function getChipStyle(active) {
- const background = active ? FILTER_CHIP_ACTIVE_BG : FILTER_SURFACE_SOFT;
- const color = active ? FILTER_TEXT_ACTIVE : FILTER_TEXT_SECONDARY;
- const borderRule = active ? `border:1px solid ${FILTER_BORDER};` : 'border:none;';
- const shadow = active
- ? 'box-shadow:0 1px 2px rgba(var(--overlay-rgb),0.08);'
- : 'box-shadow:none;';
- return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
function clampTimeValue(value) {
return Math.min(Math.max(value, PREP_TIME_MIN), PREP_TIME_MAX);
}
@@ -399,7 +350,7 @@ function renderSlotChips() {
wrap.innerHTML = MEAL_SLOTS.map((slot) => {
const active = localSlots.includes(slot.id);
- return `
`;
+ return `
`;
}).join('');
wrap.querySelectorAll('[data-filter-slot]').forEach((btn) => {
@@ -421,7 +372,7 @@ function renderTagChips() {
const allTags = collectAllTags();
wrap.innerHTML = allTags.map((tag) => {
const active = localTags.includes(tag.toLowerCase());
- return `
`;
+ return `
`;
}).join('');
wrap.querySelectorAll('[data-filter-tag]').forEach((btn) => {
@@ -488,6 +439,7 @@ function syncLiveFilters() {
}
export function setupFilter() {
+ ensureFilterPopoverStyles();
const rangeTrack = document.getElementById('prep-time-range-fill')?.parentElement;
const minHandle = document.getElementById('prep-time-min-handle');
const maxHandle = document.getElementById('prep-time-max-handle');
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index c75fa38..5cdb3e5 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -16,6 +16,7 @@ import {
syncCalendarPopoverVisibility,
} from '../ui/calendarPopover.js';
import { createIngredientCardController, getIngredientCardHTML } from '../ui/ingredientCard.js?v=20260417-116';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
/* ── helpers ── */
@@ -50,16 +51,6 @@ function getActivePantryFilterCount() {
return pantryFilters.categories.length + pantryFilters.sections.length;
}
-function filterChipStyle(active) {
- const background = active ? 'rgb(var(--card-rgb))' : 'rgb(var(--app-bg-rgb))';
- const color = active ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-soft-rgb))';
- const borderRule = active ? 'border:1px solid rgb(var(--border-input-rgb));' : 'border:none;';
- const shadow = active
- ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(var(--overlay-rgb),0.08);'
- : '';
- return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
-}
-
const CATEGORY_ICONS = {
pieczywo: 'fa-bread-slice',
nabial: 'fa-cheese',
@@ -101,7 +92,6 @@ const PANTRY_CALENDAR_THEME = {
let ingredientCard = null;
let horizonEndDate = addDays(startOfDay(new Date()), DEFAULT_HORIZON_DAYS - 1);
-let isSearchExpanded = false;
let isCalendarOpen = false;
let isFilterOpen = false;
let calendarMonthAnchor = startOfMonth(horizonEndDate);
@@ -170,54 +160,23 @@ export function getPantryHTML() {
return `
-
+
-
+
-
${createCalendarPopoverHTML({
id: 'pantry-calendar-popover',
calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
})}
-
-
-
-
-
-
@@ -226,6 +185,35 @@ export function getPantryHTML() {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
${getIngredientCardHTML({ idBase: 'pv2-card' })}`;
}
@@ -235,11 +223,8 @@ export function getPantryHTML() {
function syncHorizonUI() {
ensureValidHorizonDate();
- const defaultRow = document.getElementById('pantry-default-row');
- const searchShell = document.getElementById('pantry-search-shell');
const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover');
- const filterToggle = document.getElementById('pantry-filter-toggle');
const filterCount = document.getElementById('pantry-filter-count');
const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact');
@@ -247,35 +232,22 @@ function syncHorizonUI() {
if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
- const showCalendar = isCalendarOpen && !isSearchExpanded;
- const showDefault = !isSearchExpanded;
- const showFilter = isFilterOpen && showDefault;
const activeFilterCount = getActivePantryFilterCount();
- if (defaultRow) {
- defaultRow.style.opacity = showDefault ? '1' : '0';
- defaultRow.style.transform = showDefault ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
- defaultRow.style.pointerEvents = showDefault ? 'auto' : 'none';
- }
-
syncCalendarPopoverVisibility({
popup: popover,
- isOpen: showCalendar,
+ isOpen: isCalendarOpen,
chevron,
trigger: compactPill,
triggerImportant: true,
});
if (filterPopover) {
- filterPopover.style.opacity = showFilter ? '1' : '0';
- filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
- filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
- }
- if (filterToggle) {
- const isActive = showFilter || hasActivePantryFilters();
- filterToggle.style.setProperty('background', isActive ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
- filterToggle.style.setProperty('border-color', isActive ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
- filterToggle.style.setProperty('color', isActive ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
+ filterPopover.style.opacity = isFilterOpen ? '1' : '0';
+ filterPopover.style.transform = isFilterOpen
+ ? 'translateX(-50%) translateY(0) scale(1)'
+ : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
+ filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
}
if (filterCount) {
filterCount.textContent = String(activeFilterCount);
@@ -283,12 +255,6 @@ function syncHorizonUI() {
filterCount.classList.toggle('flex', activeFilterCount > 0);
}
- if (searchShell) {
- searchShell.style.opacity = isSearchExpanded ? '1' : '0';
- searchShell.style.transform = isSearchExpanded ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
- searchShell.style.pointerEvents = isSearchExpanded ? 'auto' : 'none';
- }
-
renderCalendarPopover();
renderFilterPopover();
}
@@ -377,28 +343,16 @@ function renderFilterPopover() {
`;
}
-function closeSearch() {
- const input = document.getElementById('pantry-search');
+function clearSearchInput() {
+ const input = document.getElementById('pantry-search-input');
const hadQuery = Boolean(input?.value);
if (input) {
input.value = '';
input.blur();
}
- isSearchExpanded = false;
- syncHorizonUI();
if (hadQuery) renderBoard();
}
-function openSearch() {
- isSearchExpanded = true;
- isCalendarOpen = false;
- isFilterOpen = false;
- syncHorizonUI();
- window.requestAnimationFrame(() => {
- document.getElementById('pantry-search')?.focus();
- });
-}
-
function closeCalendar() {
if (!isCalendarOpen) return;
isCalendarOpen = false;
@@ -409,7 +363,6 @@ function closeCalendar() {
function openCalendar() {
ensureValidHorizonDate();
calendarMonthAnchor = startOfMonth(horizonEndDate);
- isSearchExpanded = false;
isFilterOpen = false;
isCalendarOpen = true;
syncHorizonUI();
@@ -427,8 +380,8 @@ function closeFilter() {
function toggleFilterPanel() {
isCalendarOpen = false;
- isSearchExpanded = false;
isFilterOpen = !isFilterOpen;
+ document.getElementById('pantry-search-input')?.blur();
syncHorizonUI();
}
@@ -592,7 +545,7 @@ function renderBoard() {
const root = document.getElementById('pantry-board');
if (!root) return;
- const q = document.getElementById('pantry-search')?.value || '';
+ const q = document.getElementById('pantry-search-input')?.value || '';
const hasFilters = hasActivePantryFilters();
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
@@ -671,6 +624,8 @@ export function refreshPantry() {
}
export function setupPantry() {
+ ensureFilterPopoverStyles();
+
if (!ingredientCard) {
ingredientCard = createIngredientCardController({ idBase: 'pv2-card', defaultSourceNote: 'Ze spiżarni' });
ingredientCard.bind();
@@ -692,13 +647,17 @@ export function setupPantry() {
}
// Search
- document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
- document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
- if (event.key === 'Escape') closeSearch();
+ document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
+ document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
+ if (event.key !== 'Escape') return;
+ if (event.target.value) clearSearchInput();
+ else event.target.blur();
+ });
+ document.getElementById('pantry-search-close')?.addEventListener('click', () => clearSearchInput());
+ document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
+ event.stopPropagation();
+ toggleFilterPanel();
});
- 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', (event) => {
event.stopPropagation();
pantryFilters = { categories: [], sections: [] };
@@ -750,10 +709,25 @@ export function setupPantry() {
if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
closeCalendar();
}
- if (isFilterOpen && !target.closest('#pantry-filter-wrap')) {
+ if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) {
closeFilter();
}
});
+ document.addEventListener('keydown', (event) => {
+ if (event.key !== 'Escape') return;
+ if (isFilterOpen) closeFilter();
+ });
+ window.addEventListener('app-tab-change', () => {
+ document.getElementById('pantry-search-input')?.blur();
+ closeFilter();
+ closeCalendar();
+ });
+ window.closePantrySearch = () => {
+ document.getElementById('pantry-search-input')?.blur();
+ };
+ window.closePantryFilter = () => {
+ closeFilter();
+ };
}
window.refreshPantry = refreshPantry;