From 6f902098a8fee636b04244466d77fdb6430c3468 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Thu, 7 May 2026 19:36:30 +0200
Subject: [PATCH] Adjust filter button

---
 index.html             |  3 ++-
 js/views/Filter.js     |  6 +++---
 js/views/Pantry.js     | 30 ++++++++++++++++++++++++++----
 js/views/RecipeList.js | 27 +++++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 3401d8d..66b44e2 100644
--- a/index.html
+++ b/index.html
@@ -683,6 +683,7 @@
             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;
@@ -1280,7 +1281,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260507-hide-calendar-pill-on-search';
+        const APP_ASSET_VERSION = '20260507-pantry-calendar-full-width';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
diff --git a/js/views/Filter.js b/js/views/Filter.js
index e19471b..bee1264 100644
--- 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');
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index 1a02189..78f5847 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -195,7 +195,7 @@ export function getPantryHTML() {
 
         <!-- ── 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="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));">
+            <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-up text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
@@ -204,8 +204,15 @@ export function getPantryHTML() {
         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 ── -->
@@ -214,7 +221,7 @@ export function getPantryHTML() {
         </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-bottom-control-size, 3.9rem) + 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));">
@@ -256,6 +263,7 @@ 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');
@@ -269,7 +277,6 @@ function syncHorizonUI() {
     if (compactLabel) compactLabel.textContent = formatHorizonLabel(horizonEndDate);
 
     const activeFilterCount = getActivePantryFilterCount();
-    isFilterOpen = false;
 
     syncCalendarPopoverVisibility({
         popup: popover,
@@ -295,6 +302,11 @@ function syncHorizonUI() {
         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';
@@ -403,6 +415,10 @@ function clearSearchInput() {
 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');
@@ -722,6 +738,12 @@ export function setupPantry() {
             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) => {
         event.stopPropagation();
         pantryFilters = { categories: [], sections: [] };
@@ -773,7 +795,7 @@ 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();
             }
         });
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 0520c50..f4a1896 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -43,6 +43,12 @@ function getFilteredRecipes() {
     return Object.values(RECIPES).filter(matchesFilters);
 }
 
+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();
 }
@@ -54,6 +60,7 @@ function syncRecipeTopbarUI() {
     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);
@@ -76,6 +83,12 @@ function syncRecipeTopbarUI() {
         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);
@@ -85,6 +98,7 @@ function syncRecipeTopbarUI() {
 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 = '';
@@ -153,6 +167,14 @@ export function getRecipeListHTML() {
                 </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>
     `;
 }
@@ -196,6 +218,11 @@ export function setupRecipeList() {
             setSearchOpen(false, { clearQuery: true });
         }
     });
+    document.getElementById('recipe-filter-float-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (recipeSearchOpen) return;
+        window.openFilters?.('recipes');
+    });
 
     document.getElementById('recipe-grid')?.addEventListener('click', (e) => {
         const card = e.target.closest('.recipe-browser-card');