Design changes to pantry

js/views/Pantry.js

@@ -74,7 +74,7 @@ const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'w
 const DEFAULT_HORIZON_DAYS = 7;
 const SHORTFALL_ACCENT = 'rgb(var(--danger-rgb))';
 const PANTRY_CALENDAR_THEME = {
-    bg: 'rgb(var(--app-bg-rgb))',
+    bg: 'rgba(255,255,255,0.08)',
     border: 'rgb(var(--card-raised-rgb))',
     text: 'rgb(var(--text-body-soft-rgb))',
     dimText: 'rgb(var(--text-faint-rgb))',
@@ -158,6 +158,7 @@ function photoStripMedia(image, icon, accentBg) {
 
 export function getPantryHTML() {
     return `
+    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
     <style id="pantry-view-styles">
         .pv2-tile {
             background: rgba(var(--surface-rgb), 0.62) !important;
@@ -189,31 +190,23 @@ export function getPantryHTML() {
             background: rgba(255, 255, 255, 0.1);
         }
     </style>
-    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
 
-        <!-- ── floating top bar (calendar only) ── -->
-        <div id="pantry-topbar-outer" 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="pantry-topbar" class="relative min-h-12">
-                    <div id="pantry-default-row" class="flex min-h-12 items-center justify-end gap-2">
-                        <div id="pantry-horizon-wrap" class="relative shrink">
-                            <button type="button" id="pantry-horizon-compact" class="min-w-0 max-w-[12rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important;">
-                                <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>
-                            </button>
-                        </div>
-                    </div>
-
-                    ${createCalendarPopoverHTML({
+        <!-- ── 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);">
+                <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>
+                </button>
+                ${createCalendarPopoverHTML({
         id: 'pantry-calendar-popover',
         calendarHTML: createSwipePopoverCalendarHTML({ idPrefix: 'pantry-cal' }),
     })}
-                </div>
             </div>
         </div>
 
         <!-- ── scrollable content ── -->
-        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-[5.35rem] pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
+        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem);">
             <div id="pantry-board"></div>
         </div>
 
@@ -270,6 +263,8 @@ function syncHorizonUI() {
         isOpen: isCalendarOpen,
         chevron,
         trigger: compactPill,
+        openTriggerStyle: {},
+        closedTriggerStyle: {},
         triggerImportant: true,
     });
 
@@ -509,8 +504,8 @@ function classifyIngredients(searchQuery) {
 /* ══════════════════════ TILE RENDERING ══════════════════════ */
 
 function tileIconHtml(item, size = 'sm') {
-    const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
-    const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
+    const wrap = size === 'lg' ? 'w-11 h-11' : 'w-7 h-7';
+    const iconSize = size === 'lg' ? 'text-[22px]' : 'text-[15px]';
     if (item.image) {
         return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
     }
@@ -665,18 +660,6 @@ export function setupPantry() {
     syncHorizonUI();
     renderBoard();
 
-    // Scroll shadow under top bar
-    const pantryScroll = document.getElementById('pantry-scroll');
-    const topbarOuter = document.getElementById('pantry-topbar-outer');
-    if (pantryScroll && topbarOuter) {
-        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;';
-        topbarOuter.appendChild(shadow);
-        pantryScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
-        });
-    }
-
     // Search
     document.getElementById('pantry-search-input')?.addEventListener('input', () => renderBoard());
     document.getElementById('pantry-search-input')?.addEventListener('keydown', (event) => {