From 6d6194df37966ee306c2ff0801fae8b92c3f06d0 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Thu, 7 May 2026 19:12:38 +0200
Subject: [PATCH] Adjust calendar controller

---
 index.html               | 32 +++++++++++++++++++-------------
 js/ui/calendarPopover.js |  8 +++++++-
 js/views/Pantry.js       | 13 ++++++++-----
 js/views/ShoppingList.js | 15 +++++++++------
 4 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 50f5df4..3401d8d 100644
--- a/index.html
+++ b/index.html
@@ -683,6 +683,12 @@
             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 #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;
@@ -987,17 +993,17 @@
             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:
@@ -1033,14 +1039,14 @@
             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;
@@ -1127,7 +1133,7 @@
             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),
@@ -1153,7 +1159,7 @@
         }
         .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;
@@ -1274,7 +1280,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260507-inline-search-dock';
+        const APP_ASSET_VERSION = '20260507-hide-calendar-pill-on-search';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
diff --git a/js/ui/calendarPopover.js b/js/ui/calendarPopover.js
index 3c7ce21..4904952 100644
--- 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,
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index 57b0a72..1a02189 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -193,22 +193,23 @@ 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="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));">
                 <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',
     })}
             </div>
         </div>
 
         <!-- ── scrollable content ── -->
-        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 1.15rem);">
+        <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>
 
@@ -274,6 +275,8 @@ function syncHorizonUI() {
         popup: popover,
         isOpen: isCalendarOpen,
         chevron,
+        chevronOpenTransform: 'rotate(180deg)',
+        chevronClosedTransform: 'rotate(0deg)',
         trigger: compactPill,
         openTriggerStyle: {},
         closedTriggerStyle: {},
diff --git a/js/views/ShoppingList.js b/js/views/ShoppingList.js
index 037d98a..a5b92c1 100644
--- a/js/views/ShoppingList.js
+++ b/js/views/ShoppingList.js
@@ -119,27 +119,28 @@ 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;">
-        <!-- ── floating range pill ── -->
-        <div id="shopping-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="shopping-range-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); position:relative;">
+        <!-- ── 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>
+                    <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>
 
         <!-- ── scrollable list ── -->
-        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-32" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
+        <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>
 
@@ -209,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,
     });