Adjust filter button

Adjust calendar controller
Adjust tabbar
2026-05-07 19:36:30 +02:00 · 2026-05-07 19:12:38 +02:00 · 2026-05-07 18:42:54 +02:00 · 2026-05-07 18:07:56 +02:00 · 2026-04-22 22:53:24 +02:00
8 changed files with 474 additions and 150 deletions
--- a/index.html
+++ b/index.html
@@ -472,9 +472,10 @@
        }
        #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;
+            height: var(--recipe-bottom-control-size, 3.9rem) !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !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,11 +499,11 @@
        #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));
+            left: var(--catalog-menu-left, 1rem);
+            right: var(--catalog-search-right, calc(1rem + var(--recipe-bottom-control-size, 3.9rem) + 0.5rem));
            bottom: 0;
            min-width: 0;
-            height: var(--recipe-control-size, 3.05rem);
+            height: var(--recipe-bottom-control-size, 3.9rem);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -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,18 +642,54 @@
            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 {
-            width: var(--recipe-control-size, 3.05rem);
-            height: var(--recipe-control-size, 3.05rem);
+        #pantry-view .recipe-bottom-action,
+        #shopping-view .recipe-bottom-action {
+            width: var(--recipe-bottom-control-size, 3.9rem);
+            height: var(--recipe-bottom-control-size, 3.9rem);
            border-radius: 999px;
-            font-size: 0.95rem;
+            font-size: 1rem;
        }
        #main-view .recipe-bottom-action i,
-        #pantry-view .recipe-bottom-action i {
-            font-size: 0.95rem;
+        #pantry-view .recipe-bottom-action i,
+        #shopping-view .recipe-bottom-action i {
+            font-size: 1rem;
            line-height: 1;
        }
+        html.is-inline-search-open #recipe-bottom-controls,
+        html.is-inline-search-open #pantry-bottom-controls {
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) !important;
+        }
+        html.is-inline-search-open #recipe-search-shell.recipe-search-field,
+        html.is-inline-search-open #recipe-search-shell.recipe-search-field:focus-within,
+        html.is-inline-search-open #pantry-search-shell.recipe-search-field,
+        html.is-inline-search-open #pantry-search-shell.recipe-search-field:focus-within {
+            left: var(--catalog-inline-search-field-left, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
+            right: var(--catalog-inline-search-field-right, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+        }
+        html.is-inline-search-open #main-view #recipe-filter-wrap,
+        html.is-inline-search-open #pantry-view #pantry-filter-bottom-wrap {
+            left: var(--catalog-inline-search-close-left, calc(100vw - 3.9rem)) !important;
+        }
+        html.is-inline-search-open #main-view .recipe-bottom-action,
+        html.is-inline-search-open #pantry-view .recipe-bottom-action {
+            width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+        }
+        html.is-inline-search-open #recipe-filter-float-controls,
+        html.is-inline-search-open #pantry-top-controls,
+        html.is-inline-search-open #shopping-top-controls {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(0.35rem) scale(0.985);
+        }
        .dark #pantry-filter-popover {
            background: rgba(var(--app-bg-rgb), 0.82) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
@@ -843,8 +886,9 @@
            --dock-gap: 0.06rem;
            --dock-radius: 999px;
            --recipe-dock-width: var(--dock-width);
-            --recipe-collapsed-dock-width: 3.05rem;
-            --recipe-collapsed-dock-height: 3.05rem;
+            --recipe-bottom-control-size: 3.9rem;
+            --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
+            --recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
            --recipe-collapsed-dock-radius: 999px;
            --recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
            display: flex;
@@ -853,6 +897,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: 1;
+            pointer-events: none;
+            transform: none;
+        }
        #app-bottom-nav .recipe-nav-toggle {
            display: none;
            position: absolute;
@@ -926,28 +975,36 @@
            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-bottom-control-size, 3.9rem);
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: stretch;
-            gap: var(--dock-gap);
-            padding: var(--dock-pad);
+            gap: 0.02rem;
+            padding: 0.28rem;
            border-radius: var(--dock-radius);
-            background: rgba(255, 255, 255, 0.2);
-            background-image: none;
-            border: 1px solid rgba(255, 255, 255, 0.32);
+            background: rgba(255, 255, 255, 0.2) !important;
+            background-image: none !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
            overflow: hidden;
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            box-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);
+                0 8px 20px rgba(var(--overlay-rgb), 0.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
            pointer-events: auto;
            transform-origin: left center;
            transition:
@@ -957,15 +1014,40 @@
                border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
        }
+        html.is-inline-search-open #app-bottom-nav .bottom-dock {
+            width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8));
+            border-radius: 999px;
+            transform: translate(
+                calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) - var(--recipe-dock-width)) / 2),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            pointer-events: auto;
+        }
+        html.is-inline-search-open #app-bottom-nav .recipe-nav-toggle {
+            display: inline-flex;
+            width: var(--recipe-inline-toggle-size, var(--recipe-toggle-size));
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            background: transparent !important;
+            border-color: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+            -webkit-backdrop-filter: none;
+        }
+        html.is-inline-search-open #app-bottom-nav .nav-slot {
+            opacity: 0;
+            pointer-events: none;
+        }
        .dark #app-bottom-nav .bottom-dock {
-            background: rgba(255, 255, 255, 0.04);
-            background-image: none;
-            border: 1px solid rgba(255, 255, 255, 0.12);
+            background: rgba(255, 255, 255, 0.04) !important;
+            background-image: none !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);
+                0 10px 24px rgba(0, 0, 0, 0.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
        }
        #app-bottom-nav .nav-slot {
            min-width: 0;
@@ -992,8 +1074,8 @@
            border: 0;
            background: transparent !important;
            box-shadow: none !important;
-            width: 2.18rem;
-            height: 2.18rem;
+            width: 2.33rem;
+            height: 2.33rem;
            margin: 0;
            padding: 0;
            border-radius: 999px;
@@ -1001,7 +1083,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 +1095,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,11 +1130,11 @@
            background: var(--hover-overlay) !important;
        }
        #app-bottom-nav .nav-tab.is-active {
-            width: min(100%, 5.2rem);
-            height: 2.82rem;
-            padding: 0.34rem 0.28rem 0.3rem;
+            width: min(100%, 4rem);
+            height: 3.15rem;
+            padding: 0.32rem 0.22rem 0.28rem;
            color: rgb(var(--text-primary-rgb));
-            background: rgba(var(--overlay-rgb), 0.38) !important;
+            background: rgba(var(--overlay-rgb), 0.24) !important;
            border-radius: 999px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
@@ -1062,11 +1144,23 @@
            display: none;
        }
        #app-bottom-nav .nav-tab.is-active i {
-            font-size: 0.8rem;
+            font-size: 0.88rem;
+        }
+        #app-bottom-nav .nav-tab.is-active::after {
+            font-size: 0.66rem;
+            line-height: 1.1;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+            font-size: 0.62rem;
+            line-height: 1.24;
+        }
+        #app-bottom-nav.is-double-compact .nav-tab.is-active {
+            height: 3.25rem;
+            padding: 0.28rem 0.2rem 0.32rem;
        }
        .dark #app-bottom-nav .nav-tab.is-active {
            color: #fff;
-            background: rgba(0, 0, 0, 0.42) !important;
+            background: rgba(0, 0, 0, 0.26) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
@@ -1088,34 +1182,59 @@
                --dock-pad: 0.38rem;
                --dock-gap: 0.05rem;
                --dock-radius: 999px;
-                --recipe-collapsed-dock-width: 2.95rem;
-                --recipe-collapsed-dock-height: 2.95rem;
+                --recipe-bottom-control-size: 3.78rem;
+                --recipe-collapsed-dock-width: var(--recipe-bottom-control-size);
+                --recipe-collapsed-dock-height: var(--recipe-bottom-control-size);
                --recipe-collapsed-dock-radius: 999px;
            }
            #app-bottom-nav .bottom-dock {
                width: var(--dock-width);
-                height: 3.48rem;
-                gap: var(--dock-gap);
-                padding: var(--dock-pad);
+                height: var(--recipe-bottom-control-size, 3.78rem);
+                gap: 0.01rem;
+                padding: 0.24rem;
                border-radius: var(--dock-radius);
            }
            #app-bottom-nav .nav-tab,
            #app-bottom-nav .nav-action {
-                width: 2.02rem;
-                height: 2.02rem;
+                width: 2.18rem;
+                height: 2.18rem;
                border-radius: 999px;
            }
            #app-bottom-nav .nav-tab.is-active {
-                width: min(100%, 4.4rem);
-                height: 2.65rem;
-                padding: 0.3rem 0.22rem 0.27rem;
+                width: min(100%, 3.72rem);
+                height: 2.88rem;
+                padding: 0.24rem 0.18rem 0.2rem;
                border-radius: 999px;
            }
            #app-bottom-nav .nav-label {
                font-size: 0.56rem;
            }
            #app-bottom-nav .nav-tab.is-active::after {
-                font-size: 0.56rem;
+                font-size: 0.62rem;
+            }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active::after {
+                font-size: 0.58rem;
+                line-height: 1.24;
+            }
+            #app-bottom-nav.is-double-compact .nav-tab.is-active {
+                height: 2.94rem;
+                padding: 0.22rem 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)
+                );
+            }
+            html.is-inline-search-open #app-bottom-nav.is-compact-tab .bottom-dock,
+            html.is-inline-search-open #app-bottom-nav .bottom-dock {
+                width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
+                height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8));
+                transform: translate(
+                    calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)) - var(--recipe-dock-width)) / 2),
+                    calc(var(--recipe-controls-lift, 0px) * -1)
+                );
            }
        }

@@ -1162,7 +1281,7 @@
    </div>

    <script>
-        const APP_ASSET_VERSION = '20260421-nav-labels';
+        const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
        const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
        const APP_VERSION_QUERY_KEY = 'appv';

--- a/js/ui/bottomNav.js
+++ b/js/ui/bottomNav.js
@@ -3,7 +3,7 @@ export function getBottomNavHTML() {
    <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" aria-expanded="false" aria-controls="app-bottom-nav-dock">
-                <i id="recipe-nav-toggle-icon" class="fas fa-book-open" aria-hidden="true"></i>
+                <i id="recipe-nav-toggle-icon" class="far fa-calendar-alt" 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,10 +43,18 @@ 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' };
+    const COLLAPSED_TABS = new Set();
+    const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
+    const DOUBLE_COMPACT_TABS = new Set();
+    const COLLAPSED_TAB_ICON = {
+        recipes: 'fas fa-book-open',
+        planner: 'far fa-calendar-alt',
+        pantry: 'fas fa-warehouse',
+        shopping: 'fas fa-cart-shopping',
+    };
+    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu', planner: 'Otwórz menu', pantry: 'Otwórz menu', shopping: 'Otwórz menu' };
    let isRecipeMenuOpen = false;
+    let activeTab = 'planner';
    let previousTab = 'planner';
    let collapseTimer = null;

@@ -67,35 +75,49 @@ 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 bottomControlSize = controlSize * 1.28;
        const controlGap = 0.5 * rootFontSize;
-        const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
-        const collapsedDockWidth = controlSize;
+        const inlineSearchControlSize = bottomControlSize * 0.8;
+        const controlsLift = 0;
+        const collapsedDockWidth = bottomControlSize;
        const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
-        const filterLeft = Math.max(
-            dockLeft + collapsedDockWidth + controlGap,
-            dockLeft + dockWidth - padRight - controlSize,
-        );
-        const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
+        const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
+        const controlCluster = bottomControlSize + controlGap;
+        const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
+        const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
+        const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
+        const inlineSearchCloseLeft = dockLeft + dockWidth - inlineSearchControlSize;
+        const inlineSearchFieldLeft = dockLeft + inlineSearchControlSize + controlGap;
+        const inlineSearchFieldRight = Math.max(16, nav.clientWidth - inlineSearchCloseLeft + 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('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
+        nav.style.setProperty('--recipe-inline-toggle-size', `${inlineCollapsedSlotWidth}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-filter-left', `${toolbarButtonLeft}px`);
+        document.documentElement.style.setProperty('--catalog-search-btn-left', `${toolbarButtonLeft}px`);
        document.documentElement.style.setProperty('--catalog-search-right', `${searchRight}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-close-left', `${inlineSearchCloseLeft}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-field-left', `${inlineSearchFieldLeft}px`);
+        document.documentElement.style.setProperty('--catalog-inline-search-field-right', `${inlineSearchFieldRight}px`);
        document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
+        document.documentElement.style.setProperty('--recipe-bottom-control-size', `${bottomControlSize}px`);
+        document.documentElement.style.setProperty('--recipe-inline-search-control-size', `${inlineSearchControlSize}px`);
        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}`;
+        const nextIconClass = COLLAPSED_TAB_ICON[tab];
+        if (icon && nextIconClass) {
+            icon.className = nextIconClass;
        }
        if (button && COLLAPSED_TAB_LABEL[tab]) {
            button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
@@ -115,11 +137,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);
@@ -163,10 +190,23 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
        const toggle = e.target.closest('#recipe-nav-toggle');
        if (toggle) {
            e.stopPropagation();
+            const wasInlineSearchOpen = document.documentElement.classList.contains('is-inline-search-open');
+            if (wasInlineSearchOpen) {
+                setRecipeMenuOpen(false);
+                window.closeRecipeSearch?.();
+                window.closePantrySearch?.();
+                window.closePantryFilter?.();
+                window.closeShoppingCalendar?.();
+                window.closeShoppingBoughtPopup?.();
+                window.closeFilters?.();
+                return;
+            }
            setRecipeMenuOpen(!isRecipeMenuOpen);
            window.closeRecipeSearch?.();
            window.closePantrySearch?.();
            window.closePantryFilter?.();
+            window.closeShoppingCalendar?.();
+            window.closeShoppingBoughtPopup?.();
            window.closeFilters?.();
            return;
        }
--- a/js/ui/calendarPopover.js
+++ b/js/ui/calendarPopover.js
@@ -151,6 +151,8 @@ export function syncCalendarPopoverVisibility({
    popup,
    isOpen,
    chevron,
+    chevronOpenTransform = 'rotate(180deg)',
+    chevronClosedTransform = 'rotate(0deg)',
    trigger,
    openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
    closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
@@ -164,7 +166,7 @@ export function syncCalendarPopoverVisibility({
    }

    const chevronEl = byId(chevron);
-    if (chevronEl) chevronEl.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+    if (chevronEl) chevronEl.style.transform = isOpen ? chevronOpenTransform : chevronClosedTransform;

    setStyles(
        byId(trigger),
@@ -215,6 +217,8 @@ export function createCalendarPopoverController({
    viewportId,
    triggerId,
    chevronId,
+    chevronOpenTransform,
+    chevronClosedTransform,
    getCalendar,
    openTriggerStyle = DEFAULT_OPEN_TRIGGER_STYLE,
    closedTriggerStyle = DEFAULT_CLOSED_TRIGGER_STYLE,
@@ -228,6 +232,8 @@ export function createCalendarPopoverController({
            popup: popupId,
            isOpen,
            chevron: chevronId,
+            chevronOpenTransform,
+            chevronClosedTransform,
            trigger: triggerId,
            openTriggerStyle,
            closedTriggerStyle,
--- a/js/views/Filter.js
+++ b/js/views/Filter.js
@@ -21,8 +21,8 @@ const PREP_TIME_STEP = 5;
 const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
 const FILTER_CONTEXTS = {
    recipes: {
-        anchorShellId: 'recipe-bottom-controls',
-        buttonId: 'recipe-filter-btn',
+        anchorShellId: 'recipe-filter-float-btn',
+        buttonId: 'recipe-filter-float-btn',
        getState: () => getFilterState(),
        applyState: (nextState) => applyFilters(nextState),
        showSlots: true,
@@ -408,7 +408,7 @@ function syncPanelCount() {

    if (button) {
        const highlight = isFilterPanelOpen() || count > 0;
-        const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
+        const isRecipeGlassButton = button.classList.contains('recipe-glass-btn');
        if (isRecipeGlassButton) {
            button.style.removeProperty('background');
            button.style.removeProperty('border-color');
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -83,7 +83,7 @@ export function getMealPlannerHTML() {
            ${createCollapsibleCalendarHTML({ idPrefix: 'calendar' })}
        </div>

-        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-24 bg-[rgb(var(--app-bg-rgb))]">
+        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-32 bg-[rgb(var(--app-bg-rgb))]">
            <div id="planner-summary-card" class="mb-3">
                <div class="h-full flex flex-col" style="background:rgb(var(--app-bg-rgb)) !important; background-image:none !important; box-shadow:none !important;">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
--- a/js/views/Pantry.js
+++ b/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: [],
@@ -191,27 +193,35 @@ export function getPantryHTML() {
        }
    </style>

-        <!-- ── floating horizon pill — mirrors bottom search-field structure ── -->
-        <div id="pantry-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 id="pantry-horizon-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);">
+        <!-- ── floating horizon pill above bottom nav ── -->
+        <div id="pantry-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="pantry-horizon-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:var(--catalog-menu-left, 1rem); width:calc(var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width) - 0.5rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
                <button type="button" id="pantry-horizon-compact" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3">
                    <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>
+                    <i id="pantry-horizon-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                </button>
                ${createCalendarPopoverHTML({
        id: 'pantry-calendar-popover',
        calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
+        popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
+        popoverStyle: 'left:0; right:auto; width:var(--recipe-dock-width, calc(100% - 2rem)); opacity:0; transform:translateY(-6px) scale(0.98);',
    })}
            </div>
+            <div id="pantry-filter-pill-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
+                <button type="button" id="pantry-filter-pill-btn" class="recipe-glass-btn w-full h-full rounded-full 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-pill-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>

        <!-- ── 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" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
            <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 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-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 1.15rem); 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));">
@@ -221,19 +231,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-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-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <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 +263,13 @@ function syncHorizonUI() {
    const popover = document.getElementById('pantry-calendar-popover');
    const filterPopover = document.getElementById('pantry-filter-popover');
    const filterCount = document.getElementById('pantry-filter-count');
+    const filterPillCount = document.getElementById('pantry-filter-pill-count');
+    const searchWrap = document.getElementById('pantry-search-wrap');
+    const searchShell = document.getElementById('pantry-search-shell');
+    const rightWrap = document.getElementById('pantry-filter-bottom-wrap');
+    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');
@@ -262,6 +282,8 @@ function syncHorizonUI() {
        popup: popover,
        isOpen: isCalendarOpen,
        chevron,
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
        trigger: compactPill,
        openTriggerStyle: {},
        closedTriggerStyle: {},
@@ -277,9 +299,24 @@ function syncHorizonUI() {
    }
    if (filterCount) {
        filterCount.textContent = String(activeFilterCount);
-        filterCount.classList.toggle('hidden', activeFilterCount === 0);
-        filterCount.classList.toggle('flex', activeFilterCount > 0);
+        filterCount.classList.toggle('hidden', true);
+        filterCount.classList.toggle('flex', false);
    }
+    if (filterPillCount) {
+        filterPillCount.textContent = String(activeFilterCount);
+        filterPillCount.classList.toggle('hidden', activeFilterCount === 0);
+        filterPillCount.classList.toggle('flex', 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 fa-xmark';
+    if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
+    if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);

    renderCalendarPopover();
    renderFilterPopover();
@@ -370,13 +407,34 @@ function renderFilterPopover() {
 }

 function clearSearchInput() {
+    const hadQuery = Boolean(pantrySearchQuery);
+    pantrySearchQuery = '';
+    if (hadQuery) renderBoard();
+}
+
+function setPantrySearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+    const hadQuery = Boolean(pantrySearchQuery);
+    pantrySearchOpen = open;
+    if (open) {
+        isCalendarOpen = false;
+        isFilterOpen = false;
+    }
+    document.documentElement.classList.toggle('is-inline-search-open', pantrySearchOpen);
+    if (clearQuery) pantrySearchQuery = '';
    const input = document.getElementById('pantry-search-input');
-    const hadQuery = Boolean(input?.value);
    if (input) {
-        input.value = '';
+        if (open) {
+            input.value = pantrySearchQuery;
+            if (focusInput) {
+                input.focus();
+                input.setSelectionRange(input.value.length, input.value.length);
+            }
+        } else {
            input.blur();
        }
-    if (hadQuery) renderBoard();
+    }
+    syncHorizonUI();
+    if (clearQuery && hadQuery) renderBoard();
 }

 function closeCalendar() {
@@ -405,9 +463,9 @@ function closeFilter() {
 }

 function toggleFilterPanel() {
+    if (pantrySearchOpen) return;
    isCalendarOpen = false;
    isFilterOpen = !isFilterOpen;
-    document.getElementById('pantry-search-input')?.blur();
    syncHorizonUI();
 }

@@ -571,7 +629,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 +719,29 @@ 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 });
+        }
+    });
+    document.getElementById('pantry-filter-pill-btn')?.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (pantrySearchOpen) return;
+        closeCalendar();
        toggleFilterPanel();
    });
    document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
@@ -723,21 +795,26 @@ export function setupPantry() {
            if (isCalendarOpen && !target.closest('#pantry-horizon-wrap, #pantry-horizon-compact')) {
                closeCalendar();
            }
-            if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-bottom-btn')) {
+            if (isFilterOpen && !target.closest('#pantry-filter-popover, #pantry-filter-pill-btn')) {
                closeFilter();
            }
        });
        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();
--- 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;
@@ -42,30 +43,80 @@ function getFilteredRecipes() {
    return Object.values(RECIPES).filter(matchesFilters);
 }

-function syncRecipeScrollShadow() {
-    const searchShell = document.getElementById('recipe-search-shell');
-    if (searchShell) {
-        searchShell.style.boxShadow = 'var(--shadow-shell)';
+function getActiveRecipeFilterCount() {
+    let count = filterState.slots.length + filterState.tags.length;
+    if (filterState.minMinutes > DEFAULT_MIN_MINUTES || filterState.maxMinutes < DEFAULT_MAX_MINUTES) count += 1;
+    return count;
 }
+
+function syncRecipeScrollShadow() {
+    syncRecipeTopbarUI();
 }

 function syncRecipeTopbarUI() {
+    const searchWrap = document.getElementById('recipe-search-wrap');
    const searchShell = document.getElementById('recipe-search-shell');
+    const rightWrap = document.getElementById('recipe-filter-wrap');
+    const rightBtn = document.getElementById('recipe-filter-btn');
+    const rightIcon = document.getElementById('recipe-right-btn-icon');
+    const filterCount = document.getElementById('recipe-filter-count');
+    const floatingFilterCount = document.getElementById('recipe-filter-float-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 fa-xmark';
+    }
+    if (rightBtn) {
+        rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    }
+    if (rightWrap) {
+        rightWrap.classList.toggle('hidden', !isOpen);
+    }
+    if (filterCount) {
+        const showCount = false;
+        filterCount.classList.toggle('hidden', !showCount);
+        filterCount.classList.toggle('flex', showCount);
+    }
+    if (floatingFilterCount) {
+        const activeCount = getActiveRecipeFilterCount();
+        floatingFilterCount.textContent = String(activeCount);
+        floatingFilterCount.classList.toggle('hidden', activeCount === 0);
+        floatingFilterCount.classList.toggle('flex', activeCount > 0);
+    }
+    if (dot) {
+        const hasQuery = Boolean(filterState.query);
+        dot.classList.toggle('hidden', !hasQuery);
    }
 }

-function closeSearch() {
+function setSearchOpen(open, { clearQuery = false, focusInput = false } = {}) {
+    const hadQuery = Boolean(filterState.query);
+    recipeSearchOpen = open;
+    if (open) window.closeFilters?.();
+    document.documentElement.classList.toggle('is-inline-search-open', recipeSearchOpen);
+    if (clearQuery) {
+        filterState.query = '';
+    }
    const input = document.getElementById('recipe-search-input');
-    const hadQuery = Boolean(input?.value);
    if (input) {
-        input.value = '';
+        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() {
@@ -91,28 +142,39 @@ export function getRecipeListHTML() {
        scrollId: 'recipe-scroll',
        gridId: 'recipe-grid',
        emptyStateId: 'recipe-empty-state',
-        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[rgb(var(--app-bg-rgb))]',
+        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-32 bg-[rgb(var(--app-bg-rgb))]',
        gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
        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-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-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[34] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <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>
        </div>
+        <div id="recipe-filter-float-controls" class="pointer-events-none absolute inset-x-0 z-[33] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="recipe-filter-float-wrap" class="pointer-events-auto absolute bottom-0" style="--bottom-filter-pill-width:var(--recipe-bottom-control-size, 3.9rem); left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--bottom-filter-pill-width)); width:var(--bottom-filter-pill-width); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86));">
+                <button type="button" id="recipe-filter-float-btn" class="recipe-glass-btn w-full h-full rounded-full 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="recipe-filter-float-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>
    `;
 }
@@ -137,20 +199,28 @@ 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 });
+        }
+    });
+    document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (recipeSearchOpen) return;
        window.openFilters?.('recipes');
    });

@@ -167,16 +237,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();
        };
    }
 }
--- 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,33 +119,41 @@ 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;">
-
-        <!-- ── header ── -->
-        <div class="shrink-0 px-4 pt-5 pb-0">
-
-            <!-- 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);">
+        <!-- ── floating range pill above bottom nav ── -->
+        <div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24] transition-all duration-200" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem) + var(--recipe-bottom-control-size, 3.9rem) + 0.65rem); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="shopping-range-wrap" class="pointer-events-auto absolute bottom-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)); 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">
                    <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>
+                    <i id="sl-range-chevron" class="fas fa-chevron-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                </button>

-                <!-- popup calendar (absolute, overlays content below) -->
+                <!-- popup calendar (absolute, overlays content above) -->
                ${createCalendarPopoverHTML({
        id: 'sl-calendar-popup',
        calendarHTML: createSwipePopoverCalendarHTML({
        idPrefix: 'sl-cal',
        weekdays: WEEKDAY_SHORT,
    }),
+        popoverClass: 'absolute left-0 right-0 bottom-full mb-2 z-[50] transition-all duration-200 pointer-events-none',
    })}
+        </div>
+        </div>

-                <!-- popup bought (absolute, overlays content below) -->
-                <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 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);">
+        <!-- ── scrollable list ── -->
+        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:1rem; scroll-padding-top:1rem; padding-bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-bottom-control-size, 3.9rem) + var(--bottom-calendar-pill-height, calc(var(--recipe-control-size, 3.05rem) * 0.86)) + 2.25rem);">
+            <div id="sl-board"></div>
+        </div>
+
+        <div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.9rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-bottom-control-size, 3.9rem); 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-bottom-control-size, 3.9rem));">
+                <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 +165,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>`;
 }

@@ -206,6 +210,8 @@ function initShoppingCalendar() {
        viewportId: 'sl-cal-viewport',
        triggerId: 'sl-range-pill',
        chevronId: 'sl-range-chevron',
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
        getCalendar: () => shoppingCalendar,
        hideViewportDuringLayout: true,
    });
@@ -255,7 +261,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 +582,8 @@ export function refreshShoppingList() {
 }

 export function setupShoppingList() {
+    ensureFilterPopoverStyles();
+
    if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());

    updatePillLabel();
@@ -616,5 +624,7 @@ export function setupShoppingList() {
        renderAll();
    });

+    window.closeShoppingCalendar = () => closeCalendar();
+    window.closeShoppingBoughtPopup = () => closeBoughtPopup();
    window.refreshShoppingList = refreshShoppingList;
 }
Author	SHA1	Message	Date
ulfrxdev	6f902098a8	Adjust filter button All checks were successful Build and Deploy / build-and-push (push) Successful in 31s Details	2026-05-07 19:36:30 +02:00
ulfrxdev	6d6194df37	Adjust calendar controller	2026-05-07 19:12:38 +02:00
ulfrxdev	68e5227db1	Adjust tabbar	2026-05-07 18:42:54 +02:00
ulfrxdev	544df5175d	Adjust height of the tab bar	2026-05-07 18:07:56 +02:00
ulfrxdev	53a7212dfe	Redesign menu All checks were successful Build and Deploy / build-and-push (push) Successful in 27s Details	2026-04-22 22:53:24 +02:00