From 6bf50f67ad687178421961b85df58d2de7eabf46 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Wed, 8 Apr 2026 22:53:17 +0200
Subject: [PATCH] Restructure recipe grid

---
 index.html                 | 89 +++++++++++++++++++++++++++++++++-----
 js/ui/recipeGrid.js        | 14 +++---
 js/ui/recipeSearchField.js |  2 +-
 js/views/MealPlanner.js    |  6 +--
 js/views/RecipeList.js     |  6 ++-
 5 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index a11c9f6..91bfa1f 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title>Recipe App - Modular</title>
-    <link rel="manifest" href="./manifest.webmanifest?v=20260408-82">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260408-97">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -233,9 +233,16 @@
         }
         #main-view,
         #main-view > div:last-child,
-        #recipe-grid {
+        #recipe-grid,
+        #planner-picker-grid {
             background: #2d2e2b !important;
         }
+        #recipe-grid,
+        #planner-picker-grid {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 0.5rem !important;
+            align-items: stretch;
+        }
         #planner-view,
         #planner-view > div:first-child,
         #planner-scroll,
@@ -255,24 +262,82 @@
         }
 
         /* Cards and sheets */
-        #recipe-grid > * {
+        #recipe-grid > *,
+        #planner-picker-grid > * {
             background: #393937 !important;
             border: none !important;
             border-radius: 1.75rem !important;
             box-shadow: none !important;
             transition: transform 180ms ease, box-shadow 180ms ease !important;
         }
-        #recipe-grid > *:hover {
+        #recipe-grid > .recipe-list-card,
+        #planner-picker-grid > .recipe-list-card {
+            border-radius: 1.25rem !important;
+            height: 11.9rem;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-media,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-media {
+            height: 5.25rem;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-body,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-body {
+            padding: 0.58rem;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-title,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-title {
+            display: -webkit-box;
+            min-height: 2.76rem;
+            margin-bottom: 0.55rem;
+            font-size: 0.66rem;
+            font-weight: 400 !important;
+            line-height: 0.92rem;
+            overflow: hidden;
+            text-decoration: none !important;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-meta,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-meta {
+            margin-bottom: 0.45rem;
+            gap: 0.2rem;
+            font-size: 0.58rem;
+            line-height: 0.78rem;
+            flex-wrap: nowrap;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-meta > div,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-meta > div {
+            min-width: 0;
+            white-space: nowrap;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-meta i,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-meta i {
+            font-size: 0.52rem;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-labels,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-labels {
+            gap: 0.25rem;
+        }
+        #recipe-grid > .recipe-list-card .recipe-browser-card-label,
+        #planner-picker-grid > .recipe-list-card .recipe-browser-card-label {
+            padding: 0.14rem 0.36rem;
+            font-size: 0.54rem;
+            line-height: 0.72rem;
+        }
+        #recipe-grid > *:hover,
+        #planner-picker-grid > *:hover {
             transform: translateY(-2px);
             box-shadow: none !important;
         }
-        #recipe-grid > * img {
+        #recipe-grid > * img,
+        #planner-picker-grid > * img {
             transition: transform 240ms ease;
         }
-        #recipe-grid > *:hover img {
+        #recipe-grid > *:hover img,
+        #planner-picker-grid > *:hover img {
             transform: scale(1.04);
         }
         #recipe-grid > * > div:first-child::after,
+        #planner-picker-grid > * > div:first-child::after,
         #rd-hero::after {
             content: '';
             position: absolute;
@@ -295,7 +360,9 @@
                 0 5px 10px rgba(0, 0, 0, 0.16),
                 0 14px 22px rgba(0, 0, 0, 0.24),
                 0 22px 34px rgba(0, 0, 0, 0.18),
-                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+                inset 0 1px 0 rgba(255, 255, 255, 0.04),
+                inset 0 2px 6px rgba(0, 0, 0, 0.16),
+                inset 0 -1px 2px rgba(255, 255, 255, 0.02) !important;
             backdrop-filter: blur(24px);
             -webkit-backdrop-filter: blur(24px);
         }
@@ -322,7 +389,9 @@
                 0 6px 12px rgba(0, 0, 0, 0.18),
                 0 16px 24px rgba(0, 0, 0, 0.24),
                 0 24px 36px rgba(0, 0, 0, 0.18),
-                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+                inset 0 1px 0 rgba(255, 255, 255, 0.05),
+                inset 0 2px 7px rgba(0, 0, 0, 0.18),
+                inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
         }
         #recipe-search-input,
         #planner-picker-search {
@@ -531,7 +600,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260408-82';
+        const APP_ASSET_VERSION = '20260408-97';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -565,7 +634,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260408-82';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260408-97';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/ui/recipeGrid.js b/js/ui/recipeGrid.js
index 89aaf03..be924e9 100644
--- a/js/ui/recipeGrid.js
+++ b/js/ui/recipeGrid.js
@@ -34,21 +34,21 @@ function renderRecipeCard(recipe, { showSlotLabels = true, cardClassName = '' }
 
     return `
         <button type="button" data-recipe-id="${escapeHtml(recipe.id)}" class="${className} rounded-xl overflow-hidden flex flex-col bg-[#393937] cursor-pointer text-left transition-shadow" style="background:#393937 !important; border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.28) !important;">
-            <div class="h-32 bg-[#d4d4d4] relative overflow-hidden">
+            <div class="recipe-browser-card-media h-32 bg-[#d4d4d4] relative overflow-hidden">
                 ${recipe.image
                     ? `<img src="${escapeHtml(recipe.image)}" alt="${escapeHtml(recipe.title)}" class="w-full h-full object-cover">`
                     : `<span class="absolute inset-0 flex items-center justify-center text-white font-medium text-xs">${escapeHtml(recipe.thumbLabel)}</span>`}
             </div>
-            <div class="p-3 flex flex-col flex-1">
-                <h3 class="text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
-                <div class="mt-auto">
-                    <div class="flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2">
+            <div class="recipe-browser-card-body p-3 flex flex-col flex-1">
+                <h3 class="recipe-browser-card-title text-sm font-medium underline decoration-1 underline-offset-2 text-[#f1ede4] mb-3 line-clamp-2">${escapeHtml(recipe.title)}</h3>
+                <div class="recipe-browser-card-footer mt-auto">
+                    <div class="recipe-browser-card-meta flex items-center justify-between text-[11px] text-[#c2bcb2] font-medium mb-2">
                         <div class="flex items-center gap-1"><i class="fas fa-clock text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.minutes} min</span></div>
                         <div class="flex items-center gap-1"><i class="fas fa-fire text-[#8f8b84]" aria-hidden="true"></i><span>${recipe.nutritionPerServing.kcal} kcal</span></div>
                     </div>
                     ${labels.length > 0
-                        ? `<div class="flex flex-wrap gap-1">
-                            ${labels.map((label) => `<span class="px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
+                        ? `<div class="recipe-browser-card-labels flex flex-wrap gap-1">
+                            ${labels.map((label) => `<span class="recipe-browser-card-label px-2 py-0.5 bg-[#2f2f2d] text-[#d7d2c8] text-[10px] rounded-md font-medium">${escapeHtml(label)}</span>`).join('')}
                         </div>`
                         : ''}
                 </div>
diff --git a/js/ui/recipeSearchField.js b/js/ui/recipeSearchField.js
index 13e151e..7026c03 100644
--- a/js/ui/recipeSearchField.js
+++ b/js/ui/recipeSearchField.js
@@ -1,5 +1,5 @@
 export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
-    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
+    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 2px 6px rgba(0,0,0,0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';
 
 function escapeHtml(s) {
     return String(s)
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index bc45fe9..232fbb0 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -146,7 +146,7 @@ export function getMealPlannerHTML() {
             </div>
         </div>
         <div id="planner-picker-scroll" class="relative min-h-0 flex-1 overflow-y-auto px-4 pt-28 pb-8 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
-            <div id="planner-picker-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
+            <div id="planner-picker-grid" class="grid grid-cols-3 gap-2 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
             <div id="planner-picker-empty-state" class="hidden flex flex-col items-center justify-center py-16 text-center">
                 <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                     <i class="fas fa-search text-2xl text-gray-300" aria-hidden="true"></i>
@@ -492,7 +492,7 @@ function renderDayContent(state, onMealRemoved = null) {
                                     : `<span class="w-full h-full flex items-center justify-center text-white text-[8px] font-medium">${escapeHtml(recipe.thumbLabel)}</span>`}
                             </div>
                             <div class="min-w-0">
-                                <div class="flex items-center"><p class="text-[13px] font-bold text-[#ddd6ca] truncate underline decoration-1 underline-offset-2">${escapeHtml(recipe.title)}</p>${customDot}</div>
+                                <div class="flex items-center"><p class="text-[13px] font-normal text-[#ddd6ca] truncate">${escapeHtml(recipe.title)}</p>${customDot}</div>
                                 <p class="text-[11px] text-[#9b978f] mt-0.5 tabular-nums">
                                     <i class="fas fa-clock text-[#7d7a74] mr-0.5" aria-hidden="true"></i>${recipe.minutes} min
                                     <span class="mx-1.5 text-[#6d6c67]">·</span>
@@ -772,7 +772,7 @@ function renderPickerGrid(slotId, plans, query = '') {
         emptyStateEl: emptyState,
         recipes: sorted,
         showSlotLabels: false,
-        cardClassName: 'planner-picker-recipe-card',
+        cardClassName: 'recipe-list-card',
     });
 }
 
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index 708a4f7..4a804bf 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -58,6 +58,8 @@ function renderGrid() {
         gridEl: grid,
         emptyStateEl: emptyState,
         recipes: getFilteredRecipes(),
+        showSlotLabels: false,
+        cardClassName: 'recipe-list-card',
     });
     requestAnimationFrame(syncRecipeScrollShadow);
 }
@@ -82,8 +84,8 @@ export function getRecipeListHTML() {
         scrollId: 'recipe-scroll',
         gridId: 'recipe-grid',
         emptyStateId: 'recipe-empty-state',
-        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]',
-        gridClassName: 'grid grid-cols-2 gap-3 bg-[#2d2e2b]',
+        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-24 pb-24 bg-[#2d2e2b]',
+        gridClassName: 'grid grid-cols-3 gap-2 bg-[#2d2e2b]',
         emptyTitle: 'Brak wyników',
         emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
     })}