+
+
+
+
-
@@ -250,6 +255,11 @@ function syncHorizonUI() {
const popover = document.getElementById('pantry-calendar-popover');
const filterPopover = document.getElementById('pantry-filter-popover');
const filterCount = document.getElementById('pantry-filter-count');
+ const searchWrap = document.getElementById('pantry-search-wrap');
+ const searchShell = document.getElementById('pantry-search-shell');
+ const rightBtn = document.getElementById('pantry-filter-bottom-btn');
+ const rightIcon = document.getElementById('pantry-right-btn-icon');
+ const searchDot = document.getElementById('pantry-search-active-dot');
const compactLabel = document.getElementById('pantry-horizon-compact-label');
const compactPill = document.getElementById('pantry-horizon-compact');
const chevron = document.getElementById('pantry-horizon-chevron');
@@ -277,9 +287,18 @@ function syncHorizonUI() {
}
if (filterCount) {
filterCount.textContent = String(activeFilterCount);
- filterCount.classList.toggle('hidden', activeFilterCount === 0);
- filterCount.classList.toggle('flex', activeFilterCount > 0);
+ filterCount.classList.toggle('hidden', pantrySearchOpen || activeFilterCount === 0);
+ filterCount.classList.toggle('flex', !pantrySearchOpen && activeFilterCount > 0);
}
+ if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
+ if (searchShell) {
+ searchShell.style.opacity = pantrySearchOpen ? '1' : '0';
+ searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
+ searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
+ }
+ if (rightIcon) rightIcon.className = `fas ${pantrySearchOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
+ if (rightBtn) rightBtn.setAttribute('aria-label', pantrySearchOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
+ if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
renderCalendarPopover();
renderFilterPopover();
@@ -370,15 +389,32 @@ function renderFilterPopover() {
}
function clearSearchInput() {
- const input = document.getElementById('pantry-search-input');
- const hadQuery = Boolean(input?.value);
- if (input) {
- input.value = '';
- input.blur();
- }
+ const hadQuery = Boolean(pantrySearchQuery);
+ pantrySearchQuery = '';
if (hadQuery) renderBoard();
}
+function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+ const hadQuery = Boolean(pantrySearchQuery);
+ pantrySearchOpen = open;
+ document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
+ if (clearQuery) pantrySearchQuery = '';
+ const input = document.getElementById('pantry-search-input');
+ if (input) {
+ if (open) {
+ input.value = pantrySearchQuery;
+ if (focusInput) {
+ input.focus();
+ input.setSelectionRange(input.value.length, input.value.length);
+ }
+ } else {
+ input.blur();
+ }
+ }
+ syncHorizonUI();
+ if (clearQuery && hadQuery) renderBoard();
+}
+
function closeCalendar() {
if (!isCalendarOpen) return;
isCalendarOpen = false;
@@ -405,9 +441,9 @@ function closeFilter() {
}
function toggleFilterPanel() {
+ if (pantrySearchOpen) return;
isCalendarOpen = false;
isFilterOpen = !isFilterOpen;
- document.getElementById('pantry-search-input')?.blur();
syncHorizonUI();
}
@@ -571,7 +607,7 @@ function renderBoard() {
const root = document.getElementById('pantry-board');
if (!root) return;
- const q = document.getElementById('pantry-search-input')?.value || '';
+ const q = pantrySearchQuery;
const hasFilters = hasActivePantryFilters();
const { shortfalls, sufficient, notPlanned } = classifyIngredients(q);
@@ -661,15 +697,25 @@ export function setupPantry() {
renderBoard();
// Search
- document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
+ document.getElementById('pantry-search-btn')?.addEventListener('click', (event) => {
+ event.stopPropagation();
+ setPantrySearchOpen(true, { focusInput: true });
+ });
+ document.getElementById('pantry-search-input')?.addEventListener('input', (event) => {
+ pantrySearchQuery = event.target.value.trim();
+ renderBoard();
+ });
document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
- if (event.target.value) clearSearchInput();
- else event.target.blur();
+ event.stopPropagation();
+ setPantrySearchOpen(false, { clearQuery: true });
});
- document.getElementById('pantry-search-close')?.addEventListener('click', () => clearSearchInput());
document.getElementById('pantry-filter-bottom-btn')?.addEventListener('click', (event) => {
event.stopPropagation();
+ if (pantrySearchOpen) {
+ setPantrySearchOpen(false, { clearQuery: true });
+ return;
+ }
toggleFilterPanel();
});
document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
@@ -729,15 +775,20 @@ export function setupPantry() {
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape') return;
+ if (pantrySearchOpen) {
+ setPantrySearchOpen(false, { clearQuery: true });
+ return;
+ }
+ if (pantrySearchQuery) clearSearchInput();
if (isFilterOpen) closeFilter();
});
window.addEventListener('app-tab-change', () => {
- document.getElementById('pantry-search-input')?.blur();
+ if (pantrySearchOpen) setPantrySearchOpen(false);
closeFilter();
closeCalendar();
});
window.closePantrySearch = () => {
- document.getElementById('pantry-search-input')?.blur();
+ if (pantrySearchOpen) setPantrySearchOpen(false);
};
window.closePantryFilter = () => {
closeFilter();
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index ea67326..b19a870 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -13,6 +13,7 @@ let filterState = {
};
let recipeListDocListenersBound = false;
+let recipeSearchOpen = false;
function matchesFilters(recipe) {
const { query, slots, tags, minMinutes, maxMinutes } = filterState;
@@ -43,29 +44,62 @@ function getFilteredRecipes() {
}
function syncRecipeScrollShadow() {
- const searchShell = document.getElementById('recipe-search-shell');
- if (searchShell) {
- searchShell.style.boxShadow = 'var(--shadow-shell)';
- }
+ syncRecipeTopbarUI();
}
function syncRecipeTopbarUI() {
+ const searchWrap = document.getElementById('recipe-search-wrap');
const searchShell = document.getElementById('recipe-search-shell');
+ const rightBtn = document.getElementById('recipe-filter-btn');
+ const rightIcon = document.getElementById('recipe-right-btn-icon');
+ const filterCount = document.getElementById('recipe-filter-count');
+ const dot = document.getElementById('recipe-search-active-dot');
+ const isOpen = recipeSearchOpen;
+ if (searchWrap) searchWrap.classList.toggle('hidden', isOpen);
if (searchShell) {
- searchShell.style.boxShadow = 'var(--shadow-shell)';
+ searchShell.style.opacity = isOpen ? '1' : '0';
+ searchShell.style.pointerEvents = isOpen ? 'auto' : 'none';
+ searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
+ }
+ if (rightIcon) {
+ rightIcon.className = `fas ${isOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
+ }
+ if (rightBtn) {
+ rightBtn.setAttribute('aria-label', isOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
+ }
+ if (filterCount) {
+ const activeCount = Number.parseInt(filterCount.textContent || '0', 10) || 0;
+ const showCount = !isOpen && activeCount > 0;
+ filterCount.classList.toggle('hidden', !showCount);
+ filterCount.classList.toggle('flex', showCount);
+ }
+ if (dot) {
+ const hasQuery = Boolean(filterState.query);
+ dot.classList.toggle('hidden', !hasQuery);
}
}
-function closeSearch() {
- const input = document.getElementById('recipe-search-input');
- const hadQuery = Boolean(input?.value);
- if (input) {
- input.value = '';
- input.blur();
+function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+ const hadQuery = Boolean(filterState.query);
+ recipeSearchOpen = open;
+ document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
+ if (clearQuery) {
+ filterState.query = '';
+ }
+ const input = document.getElementById('recipe-search-input');
+ if (input) {
+ if (open) {
+ input.value = filterState.query;
+ if (focusInput) {
+ input.focus();
+ input.setSelectionRange(input.value.length, input.value.length);
+ }
+ } else {
+ input.blur();
+ }
}
- filterState.query = '';
syncRecipeTopbarUI();
- if (hadQuery) renderGrid();
+ if (clearQuery && hadQuery) renderGrid();
}
function renderGrid() {
@@ -96,19 +130,22 @@ export function getRecipeListHTML() {
emptyTitle: 'Brak wyników',
emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
})}
-
-
+
+
+
+
+
-
@@ -137,20 +174,25 @@ export function refreshRecipeList() {
export function setupRecipeList() {
renderGrid();
+ document.getElementById('recipe-search-btn')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ setSearchOpen(true, { focusInput: true });
+ });
document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
filterState.query = e.target.value.trim();
renderGrid();
});
document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
- if (e.target.value) closeSearch();
- else e.target.blur();
+ e.stopPropagation();
+ setSearchOpen(false, { clearQuery: true });
});
-
- document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
e.stopPropagation();
- document.getElementById('recipe-search-input')?.blur();
+ if (recipeSearchOpen) {
+ setSearchOpen(false, { clearQuery: true });
+ return;
+ }
window.openFilters?.('recipes');
});
@@ -167,16 +209,18 @@ export function setupRecipeList() {
const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
if (e.key !== 'Escape') return;
if (isRecipeViewVisible) {
- document.getElementById('recipe-search-input')?.blur();
+ if (recipeSearchOpen) setSearchOpen(false, { clearQuery: true });
}
});
window.addEventListener('app-tab-change', () => {
- document.getElementById('recipe-search-input')?.blur();
+ if (recipeSearchOpen) setSearchOpen(false);
+ syncRecipeTopbarUI();
});
window.closeRecipeSearch = () => {
- document.getElementById('recipe-search-input')?.blur();
+ if (recipeSearchOpen) setSearchOpen(false);
+ syncRecipeTopbarUI();
};
}
}
diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js
index a088544..1bcf06a 100644
--- a/js/views/ShoppingList.js
+++ b/js/views/ShoppingList.js
@@ -18,6 +18,7 @@ import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
import { showAppToast } from '../ui/toast.js';
+import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';
/* ── helpers ── */
@@ -118,20 +119,13 @@ function groupByCategory(items) {
export function getShoppingListHTML() {
return `