Adjust tabbar

2026-05-07 18:42:54 +02:00
parent 544df5175d
commit 68e5227db1
4 changed files with 111 additions and 28 deletions
--- 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">
@@ -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 DOUBLE_COMPACT_TABS = new Set(['recipes', 'pantry']);
-    const COLLAPSED_TAB_ICON = { recipes: 'fa-book-open', pantry: 'fa-warehouse' };
-    const COLLAPSED_TAB_LABEL = { recipes: 'Otwórz menu katalogu', pantry: 'Otwórz menu spiżarni' };
+    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';
@@ -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 searchButtonLeft = filterLeft - controlGap - bottomControlSize;
-        const searchRight = Math.max(16, nav.clientWidth - filterLeft + controlGap);
+        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-search-btn-left', `${searchButtonLeft}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]);
@@ -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?.();
--- a/js/views/Pantry.js
+++ b/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('flex', !pantrySearchOpen && activeFilterCount > 0);
+        filterCount.classList.toggle('hidden', true);
+        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 (rightBtn) rightBtn.setAttribute('aria-label', pantrySearchOpen ? 'Zamknij wyszukiwanie' : 'Otwórz filtry');
+    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();
@@ -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();
--- a/js/views/RecipeList.js
+++ b/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 = !isOpen && activeCount > 0;
+        const showCount = false;
        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) => {