Adjust tabbar

index.html

@@ -662,6 +662,27 @@
             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));
+        }
         .dark #pantry-filter-popover {
             background: rgba(var(--app-bg-rgb), 0.82) !important;
             border: 1px solid rgba(255, 255, 255, 0.12) !important;
@@ -870,9 +891,9 @@
             transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
         }
         html.is-inline-search-open #app-bottom-nav {
-            opacity: 0;
+            opacity: 1;
             pointer-events: none;
-            transform: translateY(0.45rem) scale(0.985);
+            transform: none;
         }
         #app-bottom-nav .recipe-nav-toggle {
             display: none;
@@ -986,6 +1007,31 @@
                 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;
@@ -1174,6 +1220,15 @@
                     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)
+                );
+            }
         }
 
         /* Planner and common interactive surfaces */
@@ -1219,7 +1274,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260507-bottom-nav-size-tune-3';
+        const APP_ASSET_VERSION = '20260507-inline-search-dock';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 

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">
@@ -44,10 +44,15 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
 
     const TABS = ['recipes', 'planner', 'pantry', 'shopping'];
     const COLLAPSED_TABS = new Set();
-    const EXTRA_CONTROL_SLOTS = { recipes: 2, pantry: 2, shopping: 1 };
+    const EXTRA_CONTROL_SLOTS = { recipes: 1, planner: 1, pantry: 1, shopping: 1 };
-    const DOUBLE_COMPACT_TABS = new Set(['recipes', 'pantry']);
+    const DOUBLE_COMPACT_TABS = new Set();
-    const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
+    const COLLAPSED_TAB_ICON = {
-    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
+        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';
@@ -72,37 +77,47 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
         const controlSize = (isCompact ? 2.95 : 3.05) * rootFontSize;
         const bottomControlSize = controlSize * 1.28;
         const controlGap = 0.5 * rootFontSize;
+        const inlineSearchControlSize = bottomControlSize * 0.8;
         const controlsLift = 0;
         const collapsedDockWidth = bottomControlSize;
         const collapsedSlotWidth = Math.max(32, collapsedDockWidth - padLeft - padRight);
+        const inlineCollapsedSlotWidth = Math.max(28, inlineSearchControlSize - padLeft - padRight);
         const controlCluster = bottomControlSize + controlGap;
         const compactExtraWidth = (EXTRA_CONTROL_SLOTS[activeTab] || 0) * controlCluster;
-        const filterLeft = dockLeft + dockWidth - bottomControlSize;
+        const toolbarButtonLeft = dockLeft + dockWidth - bottomControlSize;
-        const searchButtonLeft = filterLeft - controlGap - bottomControlSize;
+        const searchRight = Math.max(16, nav.clientWidth - toolbarButtonLeft + controlGap);
-        const searchRight = Math.max(16, nav.clientWidth - filterLeft + 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', `${searchButtonLeft}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];
+        const nextIconClass = COLLAPSED_TAB_ICON[tab];
-        if (icon && nextIcon) {
+        if (icon && nextIconClass) {
-            icon.className = `fas ${nextIcon}`;
+            icon.className = nextIconClass;
         }
         if (button && COLLAPSED_TAB_LABEL[tab]) {
             button.setAttribute('aria-label', COLLAPSED_TAB_LABEL[tab]);
@@ -175,6 +190,17 @@ 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?.();

js/views/Pantry.js

@@ -257,6 +257,7 @@ function syncHorizonUI() {
     const filterCount = document.getElementById('pantry-filter-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');
@@ -267,6 +268,7 @@ function syncHorizonUI() {
     if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
 
     const activeFilterCount = getActivePantryFilterCount();
+    isFilterOpen = false;
 
     syncCalendarPopoverVisibility({
         popup: popover,
@@ -287,8 +289,8 @@ function syncHorizonUI() {
     }
     if (filterCount) {
         filterCount.textContent = String(activeFilterCount);
-        filterCount.classList.toggle('hidden', pantrySearchOpen || activeFilterCount === 0);
+        filterCount.classList.toggle('hidden', true);
-        filterCount.classList.toggle('flex', !pantrySearchOpen && activeFilterCount > 0);
+        filterCount.classList.toggle('flex', false);
     }
     if (searchWrap) searchWrap.classList.toggle('hidden', pantrySearchOpen);
     if (searchShell) {
@@ -296,8 +298,9 @@ function syncHorizonUI() {
         searchShell.style.pointerEvents = pantrySearchOpen ? 'auto' : 'none';
         searchShell.style.transform = pantrySearchOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
     }
-    if (rightIcon) rightIcon.className = `fas ${pantrySearchOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
+    if (rightIcon) rightIcon.className = 'fas fa-xmark';
-    if (rightBtn) rightBtn.setAttribute('aria-label', pantrySearchOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
+    if (rightBtn) rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    if (rightWrap) rightWrap.classList.toggle('hidden', !pantrySearchOpen);
     if (searchDot) searchDot.classList.toggle('hidden', !pantrySearchQuery);
 
     renderCalendarPopover();
@@ -714,9 +717,7 @@ export function setupPantry() {
         event.stopPropagation();
         if (pantrySearchOpen) {
             setPantrySearchOpen(false, { clearQuery: true });
-            return;
         }
-        toggleFilterPanel();
     });
     document.getElementById('pantry-filter-clear')?.addEventListener('click', (event) => {
         event.stopPropagation();

js/views/RecipeList.js

@@ -50,6 +50,7 @@ function syncRecipeScrollShadow() {
 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');
@@ -62,14 +63,16 @@ function syncRecipeTopbarUI() {
         searchShell.style.transform = isOpen ? 'translateY(0) scale(1)' : 'translateY(0.45rem) scale(0.98)';
     }
     if (rightIcon) {
-        rightIcon.className = `fas ${isOpen ? 'fa-xmark' : 'fa-sliders-h'}`;
+        rightIcon.className = 'fas fa-xmark';
     }
     if (rightBtn) {
-        rightBtn.setAttribute('aria-label', isOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
+        rightBtn.setAttribute('aria-label', 'Zamknij wyszukiwanie');
+    }
+    if (rightWrap) {
+        rightWrap.classList.toggle('hidden', !isOpen);
     }
     if (filterCount) {
-        const activeCount = Number.parseInt(filterCount.textContent || '0', 10) || 0;
+        const showCount = false;
-        const showCount = !isOpen && activeCount > 0;
         filterCount.classList.toggle('hidden', !showCount);
         filterCount.classList.toggle('flex', showCount);
     }
@@ -191,9 +194,7 @@ export function setupRecipeList() {
         e.stopPropagation();
         if (recipeSearchOpen) {
             setSearchOpen(false, { clearQuery: true });
-            return;
         }
-        window.openFilters?.('recipes');
     });
 
     document.getElementById('recipe-grid')?.addEventListener('click', (e) => {