Redesign menu

index.html

@@ -472,7 +472,8 @@
         }
         #recipe-bottom-controls,
         #recipe-bottom-default-actions,
-        #pantry-bottom-controls {
+        #pantry-bottom-controls,
+        #shopping-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;
@@ -483,12 +484,14 @@
             transition: opacity 160ms ease;
         }
         html.is-nav-menu-open #recipe-bottom-controls,
-        html.is-nav-menu-open #pantry-bottom-controls {
+        html.is-nav-menu-open #pantry-bottom-controls,
+        html.is-nav-menu-open #shopping-bottom-controls {
             opacity: 0;
             pointer-events: none;
         }
         html.is-nav-menu-open #recipe-bottom-controls *,
-        html.is-nav-menu-open #pantry-bottom-controls * {
+        html.is-nav-menu-open #pantry-bottom-controls *,
+        html.is-nav-menu-open #shopping-bottom-controls * {
             pointer-events: none !important;
         }
         #recipe-search-shell.recipe-search-field,
@@ -496,7 +499,7 @@
         #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);
+            left: var(--catalog-menu-left, 1rem);
             right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem));
             bottom: 0;
             min-width: 0;
@@ -578,6 +581,7 @@
         }
         #main-view .recipe-glass-btn,
         #pantry-view .recipe-glass-btn,
+        #shopping-view .recipe-glass-btn,
         #app-bottom-nav .recipe-nav-toggle {
             position: relative;
             border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -594,6 +598,7 @@
         }
         .dark #main-view .recipe-glass-btn,
         .dark #pantry-view .recipe-glass-btn,
+        .dark #shopping-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;
@@ -607,6 +612,7 @@
         }
         #main-view .recipe-glass-btn:hover,
         #pantry-view .recipe-glass-btn:hover,
+        #shopping-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));
@@ -614,6 +620,7 @@
         }
         .dark #main-view .recipe-glass-btn:hover,
         .dark #pantry-view .recipe-glass-btn:hover,
+        .dark #shopping-view .recipe-glass-btn:hover,
         .dark #app-bottom-nav .recipe-nav-toggle:hover {
             background: rgba(255, 255, 255, 0.09) !important;
         }
@@ -635,15 +642,23 @@
             right: auto !important;
             bottom: 0;
         }
+        #main-view #recipe-search-wrap,
+        #pantry-view #pantry-search-wrap {
+            left: var(--catalog-search-btn-left, calc(100vw - 7.6rem)) !important;
+            right: auto !important;
+            bottom: 0;
+        }
         #main-view .recipe-bottom-action,
-        #pantry-view .recipe-bottom-action {
+        #pantry-view .recipe-bottom-action,
+        #shopping-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,
-        #pantry-view .recipe-bottom-action i {
+        #pantry-view .recipe-bottom-action i,
+        #shopping-view .recipe-bottom-action i {
             font-size: 0.95rem;
             line-height: 1;
         }
@@ -853,6 +868,11 @@
             pointer-events: none;
             transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
         }
+        html.is-inline-search-open #app-bottom-nav {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(0.45rem) scale(0.985);
+        }
         #app-bottom-nav .recipe-nav-toggle {
             display: none;
             position: absolute;
@@ -926,16 +946,24 @@
             transform: translateY(0);
             pointer-events: auto;
         }
+        #app-bottom-nav.is-compact-tab .bottom-dock {
+            width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
+            transform: translate(
+                var(--nav-compact-translate-x, 0px),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            border-radius: 999px;
+        }
         #app-bottom-nav .bottom-dock {
             position: relative;
             box-sizing: border-box;
             width: var(--dock-width);
-            height: 3.72rem;
+            height: var(--recipe-control-size, 3.05rem);
             display: grid;
             grid-template-columns: repeat(4, minmax(0, 1fr));
             align-items: stretch;
-            gap: var(--dock-gap);
+            gap: 0.02rem;
-            padding: var(--dock-pad);
+            padding: 0.28rem;
             border-radius: var(--dock-radius);
             background: rgba(255, 255, 255, 0.2);
             background-image: none;
@@ -992,8 +1020,8 @@
             border: 0;
             background: transparent !important;
             box-shadow: none !important;
-            width: 2.18rem;
+            width: 1.82rem;
-            height: 2.18rem;
+            height: 1.82rem;
             margin: 0;
             padding: 0;
             border-radius: 999px;
@@ -1001,7 +1029,7 @@
             align-items: center;
             justify-content: center;
             flex-direction: column;
-            gap: 0.24rem;
+            gap: 0.16rem;
             flex: 0 0 auto;
             color: rgba(var(--text-primary-rgb), 0.94);
             cursor: pointer;
@@ -1013,7 +1041,7 @@
         }
         #app-bottom-nav .nav-tab i,
         #app-bottom-nav .nav-action i {
-            font-size: 0.95rem;
+            font-size: 0.88rem;
             line-height: 1;
         }
         #app-bottom-nav .nav-label {
@@ -1048,9 +1076,9 @@
             background: var(--hover-overlay) !important;
         }
         #app-bottom-nav .nav-tab.is-active {
-            width: min(100%, 5.2rem);
+            width: min(100%, 4rem);
-            height: 2.82rem;
+            height: 2.46rem;
-            padding: 0.34rem 0.28rem 0.3rem;
+            padding: 0.24rem 0.2rem 0.22rem;
             color: rgb(var(--text-primary-rgb));
             background: rgba(var(--overlay-rgb), 0.38) !important;
             border-radius: 999px;
@@ -1062,7 +1090,19 @@
             display: none;
         }
         #app-bottom-nav .nav-tab.is-active i {
-            font-size: 0.8rem;
+            font-size: 0.78rem;
+        }
+        #app-bottom-nav .nav-tab.is-active::after {
+            font-size: 0.58rem;
+            line-height: 1.1;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+            font-size: 0.52rem;
+            line-height: 1.24;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active {
+            height: 2.54rem;
+            padding: 0.22rem 0.2rem 0.28rem;
         }
         .dark #app-bottom-nav .nav-tab.is-active {
             color: #fff;
@@ -1094,21 +1134,21 @@
             }
             #app-bottom-nav .bottom-dock {
                 width: var(--dock-width);
-                height: 3.48rem;
+                height: var(--recipe-control-size, 2.95rem);
-                gap: var(--dock-gap);
+                gap: 0.01rem;
-                padding: var(--dock-pad);
+                padding: 0.24rem;
                 border-radius: var(--dock-radius);
             }
             #app-bottom-nav .nav-tab,
             #app-bottom-nav .nav-action {
-                width: 2.02rem;
+                width: 1.7rem;
-                height: 2.02rem;
+                height: 1.7rem;
                 border-radius: 999px;
             }
             #app-bottom-nav .nav-tab.is-active {
-                width: min(100%, 4.4rem);
+                width: min(100%, 3.72rem);
-                height: 2.65rem;
+                height: 2.25rem;
-                padding: 0.3rem 0.22rem 0.27rem;
+                padding: 0.2rem 0.18rem 0.18rem;
                 border-radius: 999px;
             }
             #app-bottom-nav .nav-label {
@@ -1117,6 +1157,21 @@
             #app-bottom-nav .nav-tab.is-active::after {
                 font-size: 0.56rem;
             }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+                font-size: 0.5rem;
+                line-height: 1.24;
+            }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active {
+                height: 2.3rem;
+                padding: 0.18rem 0.18rem 0.24rem;
+            }
+            #app-bottom-nav.is-compact-tab .bottom-dock {
+                width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
+                transform: translate(
+                    var(--nav-compact-translate-x, 0px),
+                    calc(var(--recipe-controls-lift, 0px) * -1)
+                );
+            }
         }
 
         /* Planner and common interactive surfaces */

js/ui/bottomNav.js

@@ -43,10 +43,13 @@ 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_TABS = new Set();
+    const EXTRA_CONTROL_SLOTS = { recipes: 2, pantry: 2, shopping: 1 };
+    const DOUBLE_COMPACT_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 activeTab = 'planner';
     let previousTab = 'planner';
     let collapseTimer = null;
 
@@ -67,24 +70,27 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
         const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
         const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
         const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
-        const expandedDockHeight = (isCompact ? 3.48 : 3.72) * rootFontSize;
+        const expandedDockHeight = controlSize;
         const controlGap = 0.5 * rootFontSize;
         const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
         const collapsedDockWidth = controlSize;
         const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
-        const filterLeft = Math.max(
+        const controlCluster = controlSize + controlGap;
-            dockLeft + collapsedDockWidth + controlGap,
+        const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
-            dockLeft + dockWidth - padRight - controlSize,
+        const filterLeft = dockLeft + dockWidth - controlSize;
-        );
+        const searchButtonLeft = filterLeft - controlGap - controlSize;
         const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
 
         nav.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
         nav.style.setProperty('--recipe-collapsed-dock-width', `${collapsedDockWidth}px`);
         nav.style.setProperty('--recipe-toggle-size', `${collapsedSlotWidth}px`);
+        nav.style.setProperty('--nav-compact-extra-width', `${compactExtraWidth}px`);
+        nav.style.setProperty('--nav-compact-translate-x', `${compactExtraWidth * -0.5}px`);
         document.documentElement.style.setProperty('--recipe-dock-width', `${dockWidth}px`);
         document.documentElement.style.setProperty('--catalog-menu-left', `${dockLeft}px`);
         document.documentElement.style.setProperty('--catalog-menu-width', `${collapsedDockWidth}px`);
         document.documentElement.style.setProperty('--catalog-filter-left', `${filterLeft}px`);
+        document.documentElement.style.setProperty('--catalog-search-btn-left', `${searchButtonLeft}px`);
         document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
         document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
         document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
@@ -115,11 +121,16 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     const apply = (tab) => {
         const wasCollapsedTab = COLLAPSED_TABS.has(previousTab);
         const isCollapsedTab = COLLAPSED_TABS.has(tab);
+        const isCompactTab = (EXTRA_CONTROL_SLOTS[tab] || 0) > 0;
+        const isDoubleCompact = DOUBLE_COMPACT_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-collapsed-tab', isCollapsedTab);
+        nav.classList.toggle('is-compact-tab', isCompactTab);
+        nav.classList.toggle('is-double-compact', isDoubleCompact);
+        activeTab = tab;
         updateToggleForTab(tab);
         syncRecipeNavMetrics();
         setRecipeMenuOpen(false);
@@ -167,6 +178,8 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
             window.closeRecipeSearch?.();
             window.closePantrySearch?.();
             window.closePantryFilter?.();
+            window.closeShoppingCalendar?.();
+            window.closeShoppingBoughtPopup?.();
             window.closeFilters?.();
             return;
         }

js/views/Pantry.js

@@ -97,6 +97,8 @@ let isFilterOpen = false;
 let calendarMonthAnchor = startOfMonth(horizonEndDate);
 let pantryGlobalListenersBound = false;
 let pantryCalendar = null;
+let pantrySearchQuery = '';
+let pantrySearchOpen = false;
 let pantryFilters = {
     categories: [],
     sections: [],
@@ -206,7 +208,7 @@ export function getPantryHTML() {
         </div>
 
         <!-- ── scrollable content ── -->
-        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem);">
+        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
             <div id="pantry-board"></div>
         </div>
 
@@ -221,19 +223,22 @@ export function getPantryHTML() {
             <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-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] 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">
+            <div id="pantry-search-wrap" class="pointer-events-auto absolute bottom-0">
+                <button type="button" id="pantry-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj w spiżarni">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <span id="pantry-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+            <div id="pantry-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
                 <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>
+                    <i id="pantry-right-btn-icon" 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>
@@ -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('hidden', pantrySearchOpen || activeFilterCount === 0);
-        filterCount.classList.toggle('flex', 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(pantrySearchQuery);
-    const hadQuery = Boolean(input?.value);
+    pantrySearchQuery = '';
-    if (input) {
-        input.value = '';
-        input.blur();
-    }
     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();
+        event.stopPropagation();
-        else event.target.blur();
+        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();

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');
+    syncRecipeTopbarUI();
-    if (searchShell) {
-        searchShell.style.boxShadow = 'var(--shadow-shell)';
-    }
 }
 
 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() {
+function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
-    const input = document.getElementById('recipe-search-input');
+    const hadQuery = Boolean(filterState.query);
-    const hadQuery = Boolean(input?.value);
+    recipeSearchOpen = open;
-    if (input) {
+    document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
-        input.value = '';
+    if (clearQuery) {
-        input.blur();
+        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',
     })}
-        <div id="recipe-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="recipe-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] 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="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-auto absolute bottom-0 flex items-center gap-2 px-3">
+            <div id="recipe-search-wrap" class="pointer-events-auto absolute bottom-0">
+                <button type="button" id="recipe-search-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Szukaj przepisów">
+                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <span id="recipe-search-active-dot" class="hidden absolute -top-1 -right-1 w-[0.65rem] h-[0.65rem] rounded-full" style="background:rgb(var(--text-emphasis-rgb)); border:1px solid rgba(255,255,255,0.42); box-shadow:0 2px 6px rgba(var(--overlay-rgb),0.22);"></span>
+                </button>
+            </div>
+            <div id="recipe-search-shell" class="recipe-glass-btn recipe-search-field pointer-events-none absolute bottom-0 flex items-center gap-2 px-3" style="opacity:0; transform:translateY(0.45rem) scale(0.98); transition:opacity 0.2s ease, transform 0.2s ease;">
                 <i class="fas fa-search shrink-0" aria-hidden="true"></i>
                 <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
                     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="recipe-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="recipe-filter-wrap" class="pointer-events-auto absolute bottom-0 right-4">
                 <button type="button" id="recipe-filter-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>
+                    <i id="recipe-right-btn-icon" class="fas fa-sliders-h" aria-hidden="true"></i>
                     <span id="recipe-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>
@@ -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();
+        e.stopPropagation();
-        else e.target.blur();
+        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();
         };
     }
 }

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 `
     <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-
+        <!-- ── floating range pill ── -->
-        <!-- ── header ── -->
+        <div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24]" style="top:1rem; 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 class="shrink-0 px-4 pt-5 pb-0">
+            <div id="shopping-range-wrap" class="pointer-events-auto absolute top-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--recipe-control-size, 3.05rem); position:relative;">
-
+                <button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
-            <!-- title row + pill + bought button (position:relative anchors the popups) -->
-            <div class="flex items-center justify-end gap-2 mb-4" style="position:relative;">
-                <button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
                     <span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
                     <i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                 </button>
-                <button type="button" id="sl-bought-btn" class="relative h-10 w-10 rounded-full flex items-center justify-center transition-all shrink-0" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);" aria-label="Kupione">
-                    <i class="fas fa-check text-[13px]" style="color:rgb(var(--text-body-rgb));"></i>
-                    <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
-                </button>
 
                 <!-- popup calendar (absolute, overlays content below) -->
                 ${createCalendarPopoverHTML({
@@ -141,10 +135,24 @@ export function getShoppingListHTML() {
         weekdays: WEEKDAY_SHORT,
     }),
     })}
+        </div>
+        </div>
 
-                <!-- popup bought (absolute, overlays content below) -->
+        <!-- ── scrollable list ── -->
-                <div id="sl-bought-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
+        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
-                    <div class="rounded-[1.35rem] px-3 py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
+            <div id="sl-board"></div>
+        </div>
+
+        <div id="shopping-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="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-control-size, 3.05rem));">
+                <button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
+                    <i class="fas fa-check" aria-hidden="true"></i>
+                    <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
+                </button>
+
+                <!-- popup bought (absolute, overlays content above controls) -->
+                <div id="sl-bought-popup" style="position:absolute; bottom:calc(100% + 0.5rem); right:0; width:min(calc(100vw - 1.5rem), 22rem); z-index:50; pointer-events:none; opacity:0; transform:translateY(6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
+                    <div class="filter-liquid-surface filter-liquid-panel rounded-[1.35rem] px-3 py-3">
                         <div class="flex items-center justify-between mb-2 px-1">
                             <span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span>
                             <button type="button" id="sl-clear-session" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
@@ -156,11 +164,6 @@ export function getShoppingListHTML() {
                 </div>
             </div>
         </div>
-
-        <!-- ── scrollable list ── -->
-        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
-            <div id="sl-board"></div>
-        </div>
     </div>`;
 }
 
@@ -255,7 +258,7 @@ function closeBoughtPopup() {
     if (popup) {
         popup.style.pointerEvents = 'none';
         popup.style.opacity = '0';
-        popup.style.transform = 'translateY(-6px) scale(0.98)';
+        popup.style.transform = 'translateY(6px) scale(0.98)';
     }
     if (btn) {
         btn.style.background = 'rgb(var(--card-rgb))';
@@ -576,6 +579,8 @@ export function refreshShoppingList() {
 }
 
 export function setupShoppingList() {
+    ensureFilterPopoverStyles();
+
     if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());
 
     updatePillLabel();
@@ -616,5 +621,7 @@ export function setupShoppingList() {
         renderAll();
     });
 
+    window.closeShoppingCalendar = () => closeCalendar();
+    window.closeShoppingBoughtPopup = () => closeBoughtPopup();
     window.refreshShoppingList = refreshShoppingList;
 }