Apply liquid glass to pantry items

js/views/Pantry.js

@@ -158,6 +158,37 @@ function photoStripMedia(image, icon, accentBg) {
 
 export function getPantryHTML() {
     return `
+    <style id="pantry-view-styles">
+        .pv2-tile {
+            background: rgba(var(--surface-rgb), 0.62) !important;
+            border: 1px solid rgba(255, 255, 255, 0.26) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.48),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.04),
+                0 1px 2px rgba(var(--overlay-rgb), 0.06),
+                0 6px 14px rgba(var(--overlay-rgb), 0.1) !important;
+            backdrop-filter: blur(18px) saturate(160%);
+            -webkit-backdrop-filter: blur(18px) saturate(160%);
+        }
+
+        .dark .pv2-tile {
+            background: rgba(255, 255, 255, 0.06) !important;
+            border-color: rgba(255, 255, 255, 0.1) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.18),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 2px 4px rgba(0, 0, 0, 0.24),
+                0 8px 18px rgba(0, 0, 0, 0.3) !important;
+        }
+
+        .pv2-track {
+            background: rgba(var(--overlay-rgb), 0.12);
+        }
+
+        .dark .pv2-track {
+            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) ── -->
@@ -489,12 +520,12 @@ function tileIconHtml(item, size = 'sm') {
 function shortfallTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item, 'lg')}
         <div class="flex-1 min-w-0 flex flex-col gap-1">
             <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
             <div class="flex items-center gap-2">
-                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
                     <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
                 </div>
                 <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -506,12 +537,12 @@ function shortfallTileHtml(item) {
 function sufficientTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item, 'lg')}
         <div class="flex-1 min-w-0 flex flex-col gap-1">
             <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
             <div class="flex items-center gap-2">
-                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                <div class="pv2-track flex-1 h-1 rounded-full overflow-hidden">
                     <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
                 </div>
                 <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
@@ -524,7 +555,7 @@ function notPlannedChipHtml(item) {
     const hasStock = item.qty > 0;
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-1.5 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%;" data-id="${esc(item.ingredientId)}">
         ${tileIconHtml(item)}
         <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:${hasStock ? 'rgb(var(--text-muted-rgb))' : 'rgb(var(--text-dim-rgb))'};">${esc(item.name)}</p>
         <span class="text-[10px] font-semibold tabular-nums shrink-0 ml-auto" style="color:${hasStock ? 'rgb(var(--text-dim-rgb))' : 'rgb(var(--text-subdued-rgb))'};">${esc(formatQty(item.qty))} ${esc(unitLabel(item.unit))}</span>