Apply liquid glass to pantry view

index.html

@@ -462,14 +462,17 @@
             background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
             pointer-events: none;
         }
-        #recipe-search-shell {
+        #recipe-search-shell,
+        #pantry-search-shell {
             isolation: auto;
         }
-        #recipe-search-shell::after {
+        #recipe-search-shell::after,
+        #pantry-search-shell::after {
             display: none;
         }
         #recipe-bottom-controls,
-        #recipe-bottom-default-actions {
+        #recipe-bottom-default-actions,
+        #pantry-bottom-controls {
             bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
             height: var(--recipe-control-size, 3.05rem) !important;
             background: transparent !important;
@@ -479,15 +482,19 @@
             -webkit-backdrop-filter: none !important;
             transition: opacity 160ms ease;
         }
-        html.is-recipes-menu-open #recipe-bottom-controls {
+        html.is-nav-menu-open #recipe-bottom-controls,
+        html.is-nav-menu-open #pantry-bottom-controls {
             opacity: 0;
             pointer-events: none;
         }
-        html.is-recipes-menu-open #recipe-bottom-controls * {
+        html.is-nav-menu-open #recipe-bottom-controls *,
+        html.is-nav-menu-open #pantry-bottom-controls * {
             pointer-events: none !important;
         }
         #recipe-search-shell.recipe-search-field,
-        #recipe-search-shell.recipe-search-field:focus-within {
+        #recipe-search-shell.recipe-search-field:focus-within,
+        #pantry-search-shell.recipe-search-field,
+        #pantry-search-shell.recipe-search-field:focus-within {
             position: absolute !important;
             left: calc(var(--catalog-menu-left, 1rem) + var(--catalog-menu-width, 3.72rem) + 0.5rem);
             right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem));
@@ -506,7 +513,9 @@
             -webkit-backdrop-filter: blur(28px) saturate(180%);
         }
         .dark #recipe-search-shell.recipe-search-field,
-        .dark #recipe-search-shell.recipe-search-field:focus-within {
+        .dark #recipe-search-shell.recipe-search-field:focus-within,
+        .dark #pantry-search-shell.recipe-search-field,
+        .dark #pantry-search-shell.recipe-search-field:focus-within {
             background: rgba(255, 255, 255, 0.04) !important;
             border: 1px solid rgba(255, 255, 255, 0.12) !important;
             box-shadow:
@@ -515,7 +524,8 @@
                 0 10px 24px rgba(0, 0, 0, 0.3),
                 0 24px 54px rgba(0, 0, 0, 0.38) !important;
         }
-        #recipe-search-input {
+        #recipe-search-input,
+        #pantry-search-input {
             appearance: none;
             -webkit-appearance: none;
             background: transparent !important;
@@ -533,10 +543,15 @@
         #recipe-search-input::-webkit-search-cancel-button,
         #recipe-search-input::-webkit-search-decoration,
         #recipe-search-input::-webkit-search-results-button,
-        #recipe-search-input::-webkit-search-results-decoration {
+        #recipe-search-input::-webkit-search-results-decoration,
+        #pantry-search-input::-webkit-search-cancel-button,
+        #pantry-search-input::-webkit-search-decoration,
+        #pantry-search-input::-webkit-search-results-button,
+        #pantry-search-input::-webkit-search-results-decoration {
             display: none;
         }
-        #recipe-search-input::placeholder {
+        #recipe-search-input::placeholder,
+        #pantry-search-input::placeholder {
             color: rgb(var(--text-dim-rgb)) !important;
             opacity: 1;
         }
@@ -544,7 +559,12 @@
         #recipe-search-close:hover,
         #recipe-search-close:focus,
         #recipe-search-close:focus-visible,
-        #recipe-search-close:active {
+        #recipe-search-close:active,
+        #pantry-search-close,
+        #pantry-search-close:hover,
+        #pantry-search-close:focus,
+        #pantry-search-close:focus-visible,
+        #pantry-search-close:active {
             appearance: none;
             -webkit-appearance: none;
             background: transparent !important;
@@ -557,6 +577,7 @@
             outline: none;
         }
         #main-view .recipe-glass-btn,
+        #pantry-view .recipe-glass-btn,
         #app-bottom-nav .recipe-nav-toggle {
             position: relative;
             border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -572,6 +593,7 @@
             -webkit-backdrop-filter: blur(28px) saturate(180%);
         }
         .dark #main-view .recipe-glass-btn,
+        .dark #pantry-view .recipe-glass-btn,
         .dark #app-bottom-nav .recipe-nav-toggle {
             border: 1px solid rgba(255, 255, 255, 0.12) !important;
             background: rgba(255, 255, 255, 0.04) !important;
@@ -584,39 +606,56 @@
                 0 24px 54px rgba(0, 0, 0, 0.38) !important;
         }
         #main-view .recipe-glass-btn:hover,
+        #pantry-view .recipe-glass-btn:hover,
         #app-bottom-nav .recipe-nav-toggle:hover {
             background: rgba(var(--overlay-rgb), 0.1) !important;
             color: rgb(var(--text-emphasis-rgb));
             transform: translateY(-1px);
         }
         .dark #main-view .recipe-glass-btn:hover,
+        .dark #pantry-view .recipe-glass-btn:hover,
         .dark #app-bottom-nav .recipe-nav-toggle:hover {
             background: rgba(255, 255, 255, 0.09) !important;
         }
-        #main-view #recipe-search-shell.recipe-search-field:hover {
+        #main-view #recipe-search-shell.recipe-search-field:hover,
+        #pantry-view #pantry-search-shell.recipe-search-field:hover {
             transform: none;
         }
-        #recipe-filter-btn {
+        #recipe-filter-btn,
+        #pantry-filter-bottom-btn {
             border-radius: 999px;
         }
-        #main-view #recipe-filter-btn.recipe-bottom-action {
+        #main-view #recipe-filter-btn.recipe-bottom-action,
+        #pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
             border-radius: 999px;
         }
-        #main-view #recipe-filter-wrap {
+        #main-view #recipe-filter-wrap,
+        #pantry-view #pantry-filter-bottom-wrap {
             left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
             right: auto !important;
             bottom: 0;
         }
-        #main-view .recipe-bottom-action {
+        #main-view .recipe-bottom-action,
+        #pantry-view .recipe-bottom-action {
             width: var(--recipe-control-size, 3.05rem);
             height: var(--recipe-control-size, 3.05rem);
             border-radius: 999px;
             font-size: 0.95rem;
         }
-        #main-view .recipe-bottom-action i {
+        #main-view .recipe-bottom-action i,
+        #pantry-view .recipe-bottom-action i {
             font-size: 0.95rem;
             line-height: 1;
         }
+        .dark #pantry-filter-popover {
+            background: rgba(var(--app-bg-rgb), 0.82) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46) !important;
+        }
         #planner-picker-search-shell {
             min-height: 3rem;
             width: min(calc(100% - 0.5rem), 22.4rem);
@@ -753,8 +792,7 @@
             font-weight: 400;
             letter-spacing: -0.02em;
         }
-        #planner-picker-search::placeholder,
+        #planner-picker-search::placeholder {
-        #pantry-search::placeholder {
             color: rgba(var(--text-body-soft-rgb), 0.72) !important;
             opacity: 1;
         }
@@ -839,25 +877,25 @@
                 box-shadow 180ms ease,
                 opacity 280ms ease;
         }
-        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open):not(.is-recipes-collapsing) .recipe-nav-toggle {
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
             display: inline-flex;
             opacity: 1;
             transform: translateY(0) scale(1);
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
             display: inline-flex;
             opacity: 1;
             transform: translateY(0) scale(1);
             pointer-events: none;
         }
-        #app-bottom-nav.is-recipes-tab .recipe-nav-toggle {
+        #app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
             background: transparent !important;
             border-color: transparent !important;
             box-shadow: none !important;
             backdrop-filter: none;
             -webkit-backdrop-filter: none;
         }
-        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .bottom-dock {
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
             width: var(--recipe-collapsed-dock-width);
             height: var(--recipe-collapsed-dock-height);
             border-radius: var(--recipe-collapsed-dock-radius);
@@ -868,21 +906,21 @@
             );
             pointer-events: auto;
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing:not(.is-recipes-menu-open) .bottom-dock {
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
             opacity: 1;
             pointer-events: auto;
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-menu-open .recipe-nav-toggle {
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
             opacity: 0;
             transform: translateY(0) scale(0.98);
             pointer-events: none;
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
             opacity: 1;
             transform: translateY(0) scale(1);
             pointer-events: none;
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-menu-open .bottom-dock {
+        #app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
             opacity: 1;
             width: var(--recipe-dock-width);
             transform: translateY(0);
@@ -938,11 +976,11 @@
             opacity: 1;
             transition: opacity 140ms ease;
         }
-        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .nav-slot {
+        #app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
             opacity: 0;
             pointer-events: none;
         }
-        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .nav-slot {
+        #app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
             opacity: 0;
             transition: none;
             pointer-events: none;

js/ui/bottomNav.js

@@ -2,8 +2,8 @@ export function getBottomNavHTML() {
     return `
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
         <div id="app-bottom-nav-dock" class="bottom-dock">
-            <button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu katalogu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
+            <button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
-                <i class="fas fa-book-open" aria-hidden="true"></i>
+                <i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
             </button>
             <div class="nav-slot">
                 <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
@@ -43,6 +43,9 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     if (!main || !planner || !pantry || !shopping || !nav) return;
 
     const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
+    const COLLAPSED_TABS = new Set(['recipes', 'pantry']);
+    const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
+    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
     let isRecipeMenuOpen = false;
     let previousTab = 'planner';
     let collapseTimer = null;
@@ -86,37 +89,51 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
         document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
     };
 
+    const updateToggleForTab = (tab) => {
+        const icon = document.getElementById('recipe-nav-toggle-icon');
+        const button = document.getElementById('recipe-nav-toggle');
+        const nextIcon = COLLAPSED_TAB_ICON[tab];
+        if (icon && nextIcon) {
+            icon.className = `fas ${nextIcon}`;
+        }
+        if (button && COLLAPSED_TAB_LABEL[tab]) {
+            button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
+        }
+    };
+
     const setRecipeMenuOpen = (open) => {
         syncRecipeNavMetrics();
         window.clearTimeout(collapseTimer);
         isRecipeMenuOpen = open;
-        nav.classList.remove('is-recipes-collapsing');
+        nav.classList.remove('is-nav-collapsing');
-        nav.classList.toggle('is-recipes-menu-open', open);
+        nav.classList.toggle('is-nav-menu-open', open);
-        document.documentElement.classList.toggle('is-recipes-menu-open', open);
+        document.documentElement.classList.toggle('is-nav-menu-open', open);
         document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
     };
 
     const apply = (tab) => {
-        const wasRecipeTab = previousTab === 'recipes';
+        const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
+        const isCollapsedTab = COLLAPSED_TABS.has(tab);
         main.classList.toggle('hidden', tab !== 'recipes');
         planner.classList.toggle('hidden', tab !== 'planner');
         pantry.classList.toggle('hidden', tab !== 'pantry');
         shopping.classList.toggle('hidden', tab !== 'shopping');
-        nav.classList.toggle('is-recipes-tab', tab === 'recipes');
+        nav.classList.toggle('is-collapsed-tab', isCollapsedTab);
+        updateToggleForTab(tab);
         syncRecipeNavMetrics();
         setRecipeMenuOpen(false);
 
-        if (tab === 'recipes' && !wasRecipeTab) {
+        if (isCollapsedTab && (!wasCollapsedTab || tab !== previousTab)) {
-            nav.classList.add('is-recipes-menu-open', 'is-recipes-collapsing');
+            nav.classList.add('is-nav-menu-open', 'is-nav-collapsing');
-            document.documentElement.classList.add('is-recipes-menu-open');
+            document.documentElement.classList.add('is-nav-menu-open');
             document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
-                        nav.classList.remove('is-recipes-menu-open');
+                        nav.classList.remove('is-nav-menu-open');
-                        document.documentElement.classList.remove('is-recipes-menu-open');
+                        document.documentElement.classList.remove('is-nav-menu-open');
                         collapseTimer = window.setTimeout(() => {
-                            nav.classList.remove('is-recipes-collapsing');
+                            nav.classList.remove('is-nav-collapsing');
                         }, 500);
                     });
                 });
@@ -147,6 +164,8 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
             e.stopPropagation();
             setRecipeMenuOpen(!isRecipeMenuOpen);
             window.closeRecipeSearch?.();
+            window.closePantrySearch?.();
+            window.closePantryFilter?.();
             window.closeFilters?.();
             return;
         }
@@ -158,7 +177,7 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     });
 
     document.addEventListener('click', (e) => {
-        if (!isRecipeMenuOpen || !nav.classList.contains('is-recipes-tab')) return;
+        if (!isRecipeMenuOpen || !nav.classList.contains('is-collapsed-tab')) return;
         if (e.composedPath().includes(nav)) return;
         setRecipeMenuOpen(false);
     });

js/ui/filterPopover.js

@@ -0,0 +1,67 @@
+const STYLE_ID = 'filter-popover-liquid-styles';
+
+export function ensureFilterPopoverStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+        .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
+            --filter-liquid-border: rgba(255, 255, 255, 0.32);
+            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
+            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
+            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
+            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
+            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.16),
+                0 22px 52px rgba(var(--overlay-rgb), 0.24);
+        }
+
+        .dark .filter-liquid-surface {
+            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
+            --filter-liquid-border: rgba(255, 255, 255, 0.12);
+            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
+            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
+            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
+            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
+            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
+            --filter-liquid-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46);
+        }
+
+        .filter-liquid-panel {
+            isolation: isolate;
+            background: var(--filter-liquid-panel-bg) !important;
+            background-image: none !important;
+            border: 1px solid var(--filter-liquid-border) !important;
+            box-shadow: var(--filter-liquid-shadow) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+ensureFilterPopoverStyles();
+
+export function filterChipStyle(active) {
+    const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
+    const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
+    const borderRule = active
+        ? 'border:1px solid var(--filter-liquid-chip-active-border);'
+        : 'border:1px solid transparent;';
+    const shadow = active
+        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
+        : 'box-shadow:none;';
+    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
+}

js/views/Filter.js

@@ -1,13 +1,16 @@
-import { RECIPES } from '../data/catalog.js?v=9';
+import { RECIPES, CATEGORY_LABELS } from '../data/catalog.js?v=9';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { applyFilters, getFilterState } from './RecipeList.js';
+import { ensureFilterPopoverStyles, filterChipStyle } from '../ui/filterPopover.js?v=1';
+
+const PANTRY_CATEGORY_ORDER = ['pieczywo', 'nabial', 'mieso_ryby', 'warzywa', 'owoce', 'suche', 'przyprawy', 'inne'];
+const PANTRY_SECTION_FILTERS = [
+    { id: 'shortfalls', label: 'Potrzebne' },
+    { id: 'sufficient', label: 'W spiżarni' },
+    { id: 'notPlanned', label: 'Poza planem' },
+];
 
 const FILTER_PANEL_TRANSITION = 'opacity 180ms ease, transform 180ms ease';
-const FILTER_SURFACE = 'var(--filter-liquid-panel-bg)';
-const FILTER_SURFACE_SOFT = 'var(--filter-liquid-chip-bg)';
-const FILTER_BORDER = 'var(--filter-liquid-border)';
-const FILTER_CHIP_ACTIVE_BG = 'var(--filter-liquid-chip-active-bg)';
-const FILTER_TEXT_SECONDARY = 'var(--filter-liquid-text-secondary)';
 const FILTER_TEXT_MUTED = 'var(--filter-liquid-text-muted)';
 const FILTER_TEXT_ACTIVE = 'var(--filter-liquid-text-active)';
 const FILTER_TRACK = 'var(--filter-liquid-track-bg)';
@@ -57,52 +60,10 @@ function collectAllTags() {
 export function getFilterHTML() {
     return `
     <style id="filter-view-styles">
-        #filter-view {
-            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
-            --filter-liquid-panel-shine: none;
-            --filter-liquid-border: rgba(255, 255, 255, 0.32);
-            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.68);
-            --filter-liquid-chip-active-bg: rgba(var(--surface-rgb), 0.92);
-            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
-            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
-            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
-            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
-            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
-            --filter-liquid-shadow:
-                inset 0 1px 0 rgba(255, 255, 255, 0.6),
-                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
-                0 8px 20px rgba(var(--overlay-rgb), 0.16),
-                0 22px 52px rgba(var(--overlay-rgb), 0.24);
-        }
-
-        .dark #filter-view {
-            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
-            --filter-liquid-border: rgba(255, 255, 255, 0.12);
-            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.08);
-            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.16);
-            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
-            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
-            --filter-liquid-shadow:
-                inset 0 1px 0 rgba(255, 255, 255, 0.24),
-                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
-                0 10px 24px rgba(0, 0, 0, 0.36),
-                0 26px 60px rgba(0, 0, 0, 0.46);
-        }
-
         #filter-view.filter-open {
             pointer-events: auto;
         }
 
-        #filter-panel {
-            isolation: isolate;
-            background: ${FILTER_SURFACE} !important;
-            background-image: none !important;
-            border: 1px solid ${FILTER_BORDER} !important;
-            box-shadow: var(--filter-liquid-shadow) !important;
-            backdrop-filter: blur(28px) saturate(180%);
-            -webkit-backdrop-filter: blur(28px) saturate(180%);
-        }
-
         #filter-panel::before {
             display: none;
         }
@@ -141,8 +102,8 @@ export function getFilterHTML() {
                 0 4px 12px rgba(0,0,0,0.34);
         }
     </style>
-    <div id="filter-view" class="absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
+    <div id="filter-view" class="filter-liquid-surface absolute inset-0 z-[70] hidden opacity-0 transition-opacity duration-150" style="pointer-events:none; background:transparent !important; background-image:none !important;" aria-hidden="true">
-        <div id="filter-panel" class="absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
+        <div id="filter-panel" class="filter-liquid-panel absolute flex flex-col overflow-hidden rounded-[1.35rem]" style="opacity:0; transform:translateY(0.65rem) scale(0.98); transform-origin:bottom center; transition:${FILTER_PANEL_TRANSITION}; width:min(calc(100% - 1.5rem), 22rem);">
             <div class="shrink-0 px-3 pt-3 pb-2 flex items-center justify-between gap-3">
                 <p class="text-[11px] font-semibold leading-none" style="color:${FILTER_TEXT_ACTIVE};">Filtry</p>
                 <button id="filter-clear-btn" type="button" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:${FILTER_TEXT_MUTED};">Wyczyść</button>
@@ -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 `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
+        return `<button type="button" data-filter-slot="${escapeHtml(slot.id)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(slot.label)}</button>`;
     }).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 `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${getChipStyle(active)}">${escapeHtml(tag)}</button>`;
+        return `<button type="button" data-filter-tag="${escapeHtml(tag)}" class="px-3 py-2 rounded-full text-[11px] font-semibold transition-colors" style="${filterChipStyle(active)}">${escapeHtml(tag)}</button>`;
     }).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');

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 `
     <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
 
-        <!-- ── floating top bar ── -->
+        <!-- ── floating top bar (calendar only) ── -->
         <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
             <div class="pointer-events-auto relative z-[1] w-full">
                 <div id="pantry-topbar" class="relative min-h-12">
-                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
+                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2">
                         <div id="pantry-horizon-wrap" class="relative shrink">
                             <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
                                 <span id="pantry-horizon-compact-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
                                 <i id="pantry-horizon-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                             </button>
                         </div>
-
-                        <div id="pantry-filter-wrap" class="relative shrink-0">
-                            <button type="button" id="pantry-filter-toggle" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));">
-                                <i class="fas fa-sliders-h text-[12px]"></i>
-                                <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
-                            </button>
-
-                            <div id="pantry-filter-popover" class="absolute right-0 top-full mt-2 w-[19rem] max-w-[calc(100vw-2rem)] rounded-[1.35rem] px-3 py-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-6px) scale(0.98);">
-                                <div class="flex items-center justify-between gap-3 px-0.5 pb-3">
-                                    <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
-                                    <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
-                                        Wyczyść
-                                    </button>
                     </div>
-                                <div id="pantry-filter-panel-body" class="space-y-4"></div>
-                            </div>
-                        </div>
-
-                        <button type="button" id="pantry-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));">
-                            <i class="fas fa-search text-[13px]"></i>
-                        </button>
-                    </div>
-
 
                     ${createCalendarPopoverHTML({
         id: 'pantry-calendar-popover',
         calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
     })}
-
-                    <div id="pantry-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
-                        <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj w spiżarni…"
-                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
-                        <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
                 </div>
             </div>
         </div>
@@ -226,6 +185,35 @@ export function getPantryHTML() {
         <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
             <div id="pantry-board"></div>
         </div>
+
+        <!-- ── floating bottom controls (search + filter) ── -->
+        <div id="pantry-filter-popover" class="filter-liquid-surface filter-liquid-panel absolute z-[25] pointer-events-none rounded-[1.35rem] px-3 pt-3 pb-3 transition-all duration-200" style="left:50%; width:min(calc(100% - 1.5rem), 22rem); transform:translateX(-50%) translateY(0.5rem) scale(0.98); transform-origin:bottom center; bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-control-size, 3.05rem) + 0.75rem); opacity:0;">
+            <div class="flex items-center justify-between gap-3 px-0.5 pb-2">
+                <p class="text-[11px] font-semibold leading-none" style="color:rgb(var(--text-emphasis-rgb));">Filtry</p>
+                <button type="button" id="pantry-filter-clear" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
+                    Wyczyść
+                </button>
+            </div>
+            <div id="pantry-filter-panel-body" class="space-y-4"></div>
+        </div>
+
+        <div id="pantry-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
+                <i class="fas fa-search shrink-0" aria-hidden="true"></i>
+                <input type="search" id="pantry-search-input" autocomplete="off" placeholder="Szukaj w spiżarni…"
+                    class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:rgb(var(--text-body-rgb)); margin:0; padding:0 !important;">
+                <button type="button" id="pantry-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="appearance:none; -webkit-appearance:none; background:transparent !important; background-color:transparent !important; background-image:none !important; border:none !important; color:rgb(var(--text-dim-rgb)); box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+                    <i class="fas fa-xmark text-[13px]"></i>
+                </button>
+            </div>
+
+            <div id="pantry-filter-bottom-wrap" class="pointer-events-auto absolute bottom-0 right-4">
+                <button type="button" id="pantry-filter-bottom-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Otwórz filtry">
+                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
+                    <span id="pantry-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgba(var(--text-emphasis-rgb),0.86); background-image:none !important; border:1px solid rgba(255,255,255,0.42); color:rgb(var(--app-bg-rgb)); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+        </div>
     </div>
     ${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.opacity = isFilterOpen ? '1' : '0';
-        filterPopover.style.transform = showFilter ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)';
+        filterPopover.style.transform = isFilterOpen
-        filterPopover.style.pointerEvents = showFilter ? 'auto' : 'none';
+            ? 'translateX(-50%) translateY(0) scale(1)'
-    }
+            : 'translateX(-50%) translateY(0.5rem) scale(0.98)';
-    if (filterToggle) {
+        filterPopover.style.pointerEvents = isFilterOpen ? 'auto' : 'none';
-        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');
     }
     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() {
+function clearSearchInput() {
-    const input = document.getElementById('pantry-search');
+    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-input')?.addEventListener('input', () => renderBoard());
-    document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {
+    document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') closeSearch();
+        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;