From 7328b6ec4cbe040857a2a6696c3698f575fb49fd Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Wed, 22 Apr 2026 17:58:20 +0200
Subject: [PATCH] Redesign controls in recipe list

---
 index.html             | 266 +++++++++++++++++++++++++++++++++++++----
 js/ui/bottomNav.js     | 109 ++++++++++++++++-
 js/views/Filter.js     |  28 +++--
 js/views/RecipeList.js | 109 ++++++-----------
 4 files changed, 403 insertions(+), 109 deletions(-)

diff --git a/index.html b/index.html
index 22262b4..e7f26c9 100644
--- a/index.html
+++ b/index.html
@@ -405,38 +405,146 @@
             background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
             pointer-events: none;
         }
-        #recipe-topbar #recipe-search-shell {
-            min-height: 0;
-            width: 100%;
-            margin-inline: 0;
+        #recipe-search-shell {
             isolation: auto;
         }
-        #recipe-topbar #recipe-search-shell::after {
+        #recipe-search-shell::after {
             display: none;
         }
-        #recipe-topbar #recipe-search-shell,
-        #recipe-topbar #recipe-search-shell:focus-within {
-            background: rgb(var(--sunken-rgb)) !important;
-            border: 1px solid rgb(var(--border-input-rgb)) !important;
-            backdrop-filter: none;
-            -webkit-backdrop-filter: none;
-        }
-        #recipe-topbar #recipe-search-input {
-            appearance: none;
-            -webkit-appearance: none;
+        #recipe-bottom-controls,
+        #recipe-bottom-default-actions {
+            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;
             border: none !important;
             box-shadow: none !important;
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+            transition: opacity 160ms ease;
+        }
+        html.is-recipes-menu-open #recipe-bottom-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+        html.is-recipes-menu-open #recipe-bottom-controls * {
+            pointer-events: none !important;
+        }
+        #recipe-search-shell.recipe-search-field,
+        #recipe-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));
+            bottom: 0;
+            min-width: 0;
+            height: var(--recipe-control-size, 3.05rem);
+            border-radius: 1.25rem;
+            background: rgba(255, 255, 255, 0.2) !important;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            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.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #recipe-search-shell.recipe-search-field,
+        .dark #recipe-search-shell.recipe-search-field:focus-within {
+            background: rgba(255, 255, 255, 0.04) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                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.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #recipe-search-input {
+            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)) !important;
             caret-color: rgb(var(--text-body-rgb));
+            padding: 0 !important;
         }
-        #recipe-topbar #recipe-search-input::placeholder {
+        #recipe-search-input::-webkit-search-cancel-button,
+        #recipe-search-input::-webkit-search-decoration,
+        #recipe-search-input::-webkit-search-results-button,
+        #recipe-search-input::-webkit-search-results-decoration {
+            display: none;
+        }
+        #recipe-search-input::placeholder {
             color: rgb(var(--text-dim-rgb)) !important;
             opacity: 1;
         }
-        #recipe-topbar #recipe-filter-btn {
+        #recipe-search-close {
+            background: transparent !important;
+        }
+        #main-view .recipe-glass-btn,
+        #app-bottom-nav .recipe-nav-toggle {
+            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.32) !important;
+            background: rgba(255, 255, 255, 0.2) !important;
+            color: rgb(var(--text-body-rgb));
+            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.14),
+                0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #main-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;
+            color: rgb(var(--text-body-rgb));
+            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.3),
+                0 24px 54px rgba(0, 0, 0, 0.38) !important;
+        }
+        #main-view .recipe-glass-btn:hover,
+        #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(var(--overlay-rgb), 0.1) !important;
+            color: rgb(var(--text-emphasis-rgb));
+            transform: translateY(-1px);
+        }
+        .dark #main-view .recipe-glass-btn:hover,
+        .dark #app-bottom-nav .recipe-nav-toggle:hover {
+            background: rgba(255, 255, 255, 0.09) !important;
+        }
+        #main-view #recipe-search-shell.recipe-search-field:hover {
+            transform: none;
+        }
+        #recipe-filter-btn {
             border-radius: 999px;
         }
+        #main-view #recipe-filter-btn.recipe-bottom-action {
+            border-radius: 1.25rem;
+        }
+        #main-view #recipe-filter-wrap {
+            left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
+            right: auto !important;
+            bottom: 0;
+        }
+        #main-view .recipe-bottom-action {
+            width: var(--recipe-control-size, 3.05rem);
+            height: var(--recipe-control-size, 3.05rem);
+            border-radius: 1.25rem;
+            font-size: 0.95rem;
+        }
+        #main-view .recipe-bottom-action i {
+            font-size: 0.95rem;
+            line-height: 1;
+        }
         #planner-picker-search-shell {
             min-height: 3rem;
             width: min(calc(100% - 0.5rem), 22.4rem);
@@ -620,24 +728,108 @@
             inset-inline: 0;
             bottom: 0;
             z-index: 30;
+            --dock-width: min(calc(100% - 2.4rem), 24.5rem);
+            --dock-pad: 0.42rem;
+            --dock-gap: 0.06rem;
+            --dock-radius: 1.68rem;
+            --recipe-dock-width: var(--dock-width);
+            --recipe-collapsed-dock-width: 3.72rem;
+            --recipe-collapsed-dock-height: 3.05rem;
+            --recipe-collapsed-dock-radius: 1.25rem;
+            --recipe-toggle-size: 3.72rem;
             display: flex;
             justify-content: center;
             padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
             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);
+        }
+        #app-bottom-nav .recipe-nav-toggle {
+            display: none;
+            position: absolute;
+            top: var(--dock-pad);
+            bottom: var(--dock-pad);
+            left: var(--dock-pad);
+            width: var(--recipe-toggle-size);
+            height: auto;
+            margin: 0;
+            padding: 0;
+            border-radius: 1.05rem;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.95rem;
+            pointer-events: auto;
+            cursor: pointer;
+            z-index: 2;
+            transition:
+                transform 220ms ease,
+                color 160ms ease,
+                background-color 160ms ease,
+                box-shadow 180ms ease,
+                opacity 280ms ease;
+        }
+        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open):not(.is-recipes-collapsing) .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
+            display: inline-flex;
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-recipes-tab .recipe-nav-toggle {
+            background: transparent !important;
+            border-color: transparent !important;
+            box-shadow: none !important;
+            backdrop-filter: none;
+            -webkit-backdrop-filter: none;
+        }
+        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .bottom-dock {
+            width: var(--recipe-collapsed-dock-width);
+            height: var(--recipe-collapsed-dock-height);
+            border-radius: var(--recipe-collapsed-dock-radius);
+            opacity: 1;
+            transform: translate(
+                calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
+                calc(var(--recipe-controls-lift, 0px) * -1)
+            );
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing:not(.is-recipes-menu-open) .bottom-dock {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-menu-open .recipe-nav-toggle {
+            opacity: 0;
+            transform: translateY(0) scale(0.98);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-menu-open .bottom-dock {
+            opacity: 1;
+            width: var(--recipe-dock-width);
+            transform: translateY(0);
+            pointer-events: auto;
         }
         #app-bottom-nav .bottom-dock {
             position: relative;
             box-sizing: border-box;
-            width: min(calc(100% - 2.4rem), 24.5rem);
+            width: var(--dock-width);
             height: 3.72rem;
             display: grid;
             grid-template-columns: repeat(4, minmax(0, 1fr));
             align-items: stretch;
-            gap: 0.06rem;
-            padding: 0.42rem;
-            border-radius: 1.68rem;
+            gap: var(--dock-gap);
+            padding: var(--dock-pad);
+            border-radius: var(--dock-radius);
             background: rgba(255, 255, 255, 0.2);
             border: 1px solid rgba(255, 255, 255, 0.32);
+            overflow: hidden;
             backdrop-filter: blur(28px) saturate(180%);
             -webkit-backdrop-filter: blur(28px) saturate(180%);
             box-shadow:
@@ -646,6 +838,13 @@
                 0 8px 20px rgba(var(--overlay-rgb), 0.16),
                 0 22px 52px rgba(var(--overlay-rgb), 0.24);
             pointer-events: auto;
+            transform-origin: left center;
+            transition:
+                opacity 220ms ease,
+                width 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                height 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
+                transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
         }
         .dark #app-bottom-nav .bottom-dock {
             background: rgba(255, 255, 255, 0.04);
@@ -662,6 +861,17 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            opacity: 1;
+            transition: opacity 140ms ease;
+        }
+        #app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .nav-slot {
+            opacity: 0;
+            pointer-events: none;
+        }
+        #app-bottom-nav.is-recipes-tab.is-recipes-collapsing .nav-slot {
+            opacity: 0;
+            transition: none;
+            pointer-events: none;
         }
         #app-bottom-nav .nav-tab,
         #app-bottom-nav .nav-action {
@@ -762,13 +972,19 @@
         @media (max-width: 380px) {
             #app-bottom-nav {
                 padding-inline: 0.7rem;
+                --dock-width: min(calc(100% - 1.6rem), 22.5rem);
+                --dock-pad: 0.38rem;
+                --dock-gap: 0.05rem;
+                --dock-radius: 1.56rem;
+                --recipe-collapsed-dock-height: 2.95rem;
+                --recipe-collapsed-dock-radius: 1.2rem;
             }
             #app-bottom-nav .bottom-dock {
-                width: min(calc(100% - 1.6rem), 22.5rem);
+                width: var(--dock-width);
                 height: 3.48rem;
-                gap: 0.05rem;
-                padding: 0.38rem;
-                border-radius: 1.56rem;
+                gap: var(--dock-gap);
+                padding: var(--dock-pad);
+                border-radius: var(--dock-radius);
             }
             #app-bottom-nav .nav-tab,
             #app-bottom-nav .nav-action {
diff --git a/js/ui/bottomNav.js b/js/ui/bottomNav.js
index edaa4cf..454185d 100644
--- a/js/ui/bottomNav.js
+++ b/js/ui/bottomNav.js
@@ -1,7 +1,10 @@
 export function getBottomNavHTML() {
     return `
     <nav id="app-bottom-nav" aria-label="Główna nawigacja">
-        <div class="bottom-dock">
+        <div id="app-bottom-nav-dock" class="bottom-dock">
+            <button type="button" id="recipe-nav-toggle" class="recipe-nav-toggle" aria-label="Otwórz menu katalogu" aria-expanded="false" aria-controls="app-bottom-nav-dock">
+                <i class="fas fa-book-open" aria-hidden="true"></i>
+            </button>
             <div class="nav-slot">
                 <button type="button" data-tab="planner" id="nav-planner" class="nav-tab is-active" aria-label="Planer" aria-current="page">
                     <i class="far fa-calendar-alt" aria-hidden="true"></i>
@@ -10,7 +13,7 @@ export function getBottomNavHTML() {
             </div>
             <div class="nav-slot">
                 <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab" aria-label="Katalog">
-                    <i class="fas fa-search" aria-hidden="true"></i>
+                    <i class="fas fa-book-open" aria-hidden="true"></i>
                     <span class="nav-label">Katalog</span>
                 </button>
             </div>
@@ -40,12 +43,86 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
     if (!main || !planner || !pantry || !shopping || !nav) return;
 
     const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
+    let isRecipeMenuOpen = false;
+    let previousTab = 'planner';
+    let collapseTimer = null;
+
+    const syncRecipeNavMetrics = () => {
+        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
+        const navStyles = window.getComputedStyle(nav);
+        const navPadLeft = parseFloat(navStyles.paddingLeft) || 0;
+        const navPadRight = parseFloat(navStyles.paddingRight) || 0;
+        const navContentWidth = nav.clientWidth - navPadLeft - navPadRight;
+        const isCompact = window.matchMedia('(max-width: 380px)').matches;
+        const dockInset = (isCompact ? 1.6 : 2.4) * rootFontSize;
+        const dockMax = (isCompact ? 22.5 : 24.5) * rootFontSize;
+        const dockWidth = Math.min(navContentWidth - dockInset, dockMax);
+        if (dockWidth <= 0) return;
+
+        const padLeft = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const padRight = (isCompact ? 0.38 : 0.42) * rootFontSize;
+        const columnGap = (isCompact ? 0.05 : 0.06) * rootFontSize;
+        const slotWidth = Math.max(44, (dockWidth - padLeft - padRight - (columnGap * 3)) / 4);
+        const collapsedSlotWidth = Math.max(42, Math.min(slotWidth, isCompact ? 44 : 46));
+        const collapsedDockWidth = collapsedSlotWidth + padLeft + padRight;
+        const dockLeft = navPadLeft + ((navContentWidth - dockWidth) / 2);
+        const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
+        const expandedDockHeight = (isCompact ? 3.48 : 3.72) * rootFontSize;
+        const controlGap = 0.5 * rootFontSize;
+        const controlsLift = Math.max(0, (expandedDockHeight - controlSize) / 2);
+        const filterLeft = Math.max(
+            dockLeft + collapsedDockWidth + controlGap,
+            dockLeft + dockWidth - padRight - 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`);
+        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-right', `${searchRight}px`);
+        document.documentElement.style.setProperty('--recipe-control-size', `${controlSize}px`);
+        document.documentElement.style.setProperty('--recipe-controls-lift', `${controlsLift}px`);
+    };
+
+    const setRecipeMenuOpen = (open) => {
+        syncRecipeNavMetrics();
+        window.clearTimeout(collapseTimer);
+        isRecipeMenuOpen = open;
+        nav.classList.remove('is-recipes-collapsing');
+        nav.classList.toggle('is-recipes-menu-open', open);
+        document.documentElement.classList.toggle('is-recipes-menu-open', open);
+        document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', open ? 'true' : 'false');
+    };
 
     const apply = (tab) => {
+        const wasRecipeTab = previousTab === 'recipes';
         main.classList.toggle('hidden', tab !== 'recipes');
         planner.classList.toggle('hidden', tab !== 'planner');
         pantry.classList.toggle('hidden', tab !== 'pantry');
         shopping.classList.toggle('hidden', tab !== 'shopping');
+        nav.classList.toggle('is-recipes-tab', tab === 'recipes');
+        syncRecipeNavMetrics();
+        setRecipeMenuOpen(false);
+
+        if (tab === 'recipes' && !wasRecipeTab) {
+            nav.classList.add('is-recipes-menu-open', 'is-recipes-collapsing');
+            document.documentElement.classList.add('is-recipes-menu-open');
+            document.getElementById('recipe-nav-toggle')?.setAttribute('aria-expanded', 'false');
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        nav.classList.remove('is-recipes-menu-open');
+                        document.documentElement.classList.remove('is-recipes-menu-open');
+                        collapseTimer = window.setTimeout(() => {
+                            nav.classList.remove('is-recipes-collapsing');
+                        }, 500);
+                    });
+                });
+            });
+        }
 
         if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
         if (tab === 'shopping' && typeof refreshShoppingList === 'function') refreshShoppingList();
@@ -60,17 +137,45 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
                 else btn.removeAttribute('aria-current');
             }
         });
+
+        window.dispatchEvent(new CustomEvent('app-tab-change', { detail: { tab } }));
+        previousTab = tab;
     };
 
     nav.addEventListener('click', (e) => {
+        const toggle = e.target.closest('#recipe-nav-toggle');
+        if (toggle) {
+            e.stopPropagation();
+            setRecipeMenuOpen(!isRecipeMenuOpen);
+            window.closeRecipeSearch?.();
+            window.closeFilters?.();
+            return;
+        }
+
         const btn = e.target.closest('.nav-tab[data-tab]');
         if (!btn || btn.hasAttribute('disabled')) return;
         const tab = btn.getAttribute('data-tab');
         if (TABS.includes(tab)) apply(tab);
     });
 
+    document.addEventListener('click', (e) => {
+        if (!isRecipeMenuOpen || !nav.classList.contains('is-recipes-tab')) return;
+        if (e.composedPath().includes(nav)) return;
+        setRecipeMenuOpen(false);
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isRecipeMenuOpen) setRecipeMenuOpen(false);
+    });
+
+    window.addEventListener('resize', syncRecipeNavMetrics);
+
     apply('planner');
 
+    window.switchAppTab = (tab) => {
+        if (TABS.includes(tab)) apply(tab);
+    };
+
     window.refreshStockViews = () => {
         if (typeof refreshPantry === 'function') refreshPantry();
     };
diff --git a/js/views/Filter.js b/js/views/Filter.js
index a3cd5dd..d86b80d 100644
--- a/js/views/Filter.js
+++ b/js/views/Filter.js
@@ -18,7 +18,7 @@ const PREP_TIME_STEP = 5;
 const PREP_TIME_MIN_GAP = PREP_TIME_STEP;
 const FILTER_CONTEXTS = {
     recipes: {
-        anchorShellId: 'recipe-topbar',
+        anchorShellId: 'recipe-bottom-controls',
         buttonId: 'recipe-filter-btn',
         getState: () => getFilterState(),
         applyState: (nextState) => applyFilters(nextState),
@@ -247,13 +247,20 @@ function positionFilterPanel() {
     const gap = 8;
     const margin = 12;
     const width = Math.min(anchorRect.width, viewRect.width - margin * 2);
-    const top = Math.max(margin, anchorRect.bottom - viewRect.top + gap);
+    const spaceBelow = viewRect.bottom - anchorRect.bottom - margin;
+    const preferredMaxHeight = Math.min(420, viewRect.height - margin * 2);
+    const spaceAbove = anchorRect.top - viewRect.top - gap - margin;
+    const opensUpward = spaceBelow < 260 && anchorRect.top - viewRect.top > spaceBelow;
+    const maxHeight = opensUpward
+        ? Math.max(220, Math.min(preferredMaxHeight, spaceAbove))
+        : Math.max(220, viewRect.height - Math.max(margin, anchorRect.bottom - viewRect.top + gap) - margin);
+    const top = opensUpward
+        ? Math.max(margin, anchorRect.top - viewRect.top - gap - maxHeight)
+        : Math.max(margin, anchorRect.bottom - viewRect.top + gap);
     const left = Math.max(
         margin,
         Math.min(anchorRect.left - viewRect.left, viewRect.width - width - margin),
     );
-    const maxHeight = Math.max(220, viewRect.height - top - margin);
-
     panel.style.width = `${width}px`;
     panel.style.left = `${left}px`;
     panel.style.top = `${top}px`;
@@ -373,9 +380,16 @@ function syncPanelCount() {
 
     if (button) {
         const highlight = isFilterPanelOpen() || count > 0;
-        button.style.setProperty('background', highlight ? 'rgb(var(--sunken-rgb))' : 'rgb(var(--card-rgb))', 'important');
-        button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
-        button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
+        const isRecipeGlassButton = buttonId === 'recipe-filter-btn';
+        if (isRecipeGlassButton && !highlight) {
+            button.style.removeProperty('background');
+            button.style.removeProperty('border-color');
+            button.style.removeProperty('color');
+        } else {
+            button.style.setProperty('background', highlight ? 'rgba(var(--overlay-rgb), 0.12)' : 'rgb(var(--card-rgb))', 'important');
+            button.style.setProperty('border-color', highlight ? 'rgb(var(--border-input-rgb))' : 'rgb(var(--border-card-rgb))', 'important');
+            button.style.setProperty('color', highlight ? 'rgb(var(--text-emphasis-rgb))' : 'rgb(var(--text-body-rgb))', 'important');
+        }
     }
 
     const badge = button?.querySelector('[id$="-filter-count"]');
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 176df36..cb35b10 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -12,7 +12,6 @@ let filterState = {
     maxMinutes: DEFAULT_MAX_MINUTES,
 };
 
-let isSearchExpanded = false;
 let recipeListDocListenersBound = false;
 
 function matchesFilters(recipe) {
@@ -51,21 +50,8 @@ function syncRecipeScrollShadow() {
 }
 
 function syncRecipeTopbarUI() {
-    const defaultRow = document.getElementById('recipe-default-row');
     const searchShell = document.getElementById('recipe-search-shell');
-
-    const showSearch = isSearchExpanded;
-
-    if (defaultRow) {
-        defaultRow.style.opacity = showSearch ? '0' : '1';
-        defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
-        defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
-    }
-
     if (searchShell) {
-        searchShell.style.opacity = showSearch ? '1' : '0';
-        searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
-        searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
         searchShell.style.boxShadow = 'var(--shadow-shell)';
     }
 }
@@ -78,20 +64,10 @@ function closeSearch() {
         input.blur();
     }
     filterState.query = '';
-    isSearchExpanded = false;
     syncRecipeTopbarUI();
     if (hadQuery) renderGrid();
 }
 
-function openSearch() {
-    isSearchExpanded = true;
-    window.closeFilters?.();
-    syncRecipeTopbarUI();
-    window.requestAnimationFrame(() => {
-        document.getElementById('recipe-search-input')?.focus();
-    });
-}
-
 function renderGrid() {
     const grid = document.getElementById('recipe-grid');
     const emptyState = document.getElementById('recipe-empty-state');
@@ -111,44 +87,32 @@ function renderGrid() {
 export function getRecipeListHTML() {
     return `
     <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
-            <div class="pointer-events-auto relative z-[1] w-full">
-                <div id="recipe-topbar" class="relative min-h-12">
-
-                    <div id="recipe-default-row" class="flex min-h-12 items-center justify-end gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
-                        <div id="recipe-filter-wrap" class="relative shrink-0">
-                            <button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
-                                <i class="fas fa-sliders-h text-[12px]" 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:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
-                            </button>
-                        </div>
-
-                        <button type="button" id="recipe-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));" aria-label="Szukaj">
-                            <i class="fas fa-search text-[13px]" aria-hidden="true"></i>
-                        </button>
-                    </div>
-
-                    <div id="recipe-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
-                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
-                        <input type="search" id="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="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
-                        <button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
-                            <i class="fas fa-xmark text-[13px]"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         ${getRecipeGridSectionHTML({
         scrollId: 'recipe-scroll',
         gridId: 'recipe-grid',
         emptyStateId: 'recipe-empty-state',
-        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-[5.35rem] pb-24 bg-[rgb(var(--app-bg-rgb))]',
+        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-4 pb-24 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">
+                <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="background:transparent !important; border:none; color:rgb(var(--text-dim-rgb)); box-shadow: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>
+                    <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:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
+                </button>
+            </div>
+        </div>
     </div>
     `;
 }
@@ -178,18 +142,15 @@ export function setupRecipeList() {
         renderGrid();
     });
     document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') closeSearch();
+        if (e.key !== 'Escape') return;
+        if (e.target.value) closeSearch();
+        else e.target.blur();
     });
 
-    document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
     document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());
-
     document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
         e.stopPropagation();
-        if (isSearchExpanded) {
-            isSearchExpanded = false;
-            syncRecipeTopbarUI();
-        }
+        document.getElementById('recipe-search-input')?.blur();
         window.openFilters?.('recipes');
     });
 
@@ -200,24 +161,22 @@ export function setupRecipeList() {
         if (recipeId) window.openRecipeDetail?.(recipeId);
     });
 
-    const recipeScroll = document.getElementById('recipe-scroll');
-    const recipeTopBar = document.getElementById('recipe-top-bar');
-    if (recipeScroll && recipeTopBar) {
-        const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
-        recipeTopBar.appendChild(shadow);
-        recipeScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
-        });
-    }
-
     if (!recipeListDocListenersBound) {
         recipeListDocListenersBound = true;
         document.addEventListener('keydown', (e) => {
-            if (e.key !== 'Escape' || !isSearchExpanded) return;
-            if (!document.getElementById('main-view')?.classList.contains('hidden')) {
-                closeSearch();
+            const isRecipeViewVisible = !document.getElementById('main-view')?.classList.contains('hidden');
+            if (e.key !== 'Escape') return;
+            if (isRecipeViewVisible) {
+                document.getElementById('recipe-search-input')?.blur();
             }
         });
+
+        window.addEventListener('app-tab-change', () => {
+            document.getElementById('recipe-search-input')?.blur();
+        });
+
+        window.closeRecipeSearch = () => {
+            document.getElementById('recipe-search-input')?.blur();
+        };
     }
 }