From 1baf5ce20e4a63ed653eb358a439913e7125b44b Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Sun, 12 Jul 2026 10:29:13 +0200
Subject: [PATCH] fix: recipe card badge placement, missing tooltips,
 untranslated label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Batch-cook indicator moved from next to the title into the icon row
  alongside favorite/visibility (all three now get a tooltip, matching
  the existing favorite-button pattern).
- Favorite button's tooltip text was hardcoded English ("Save"/
  "Saved") instead of using the translation keys already used for its
  aria-label.
- Shortened the batch-cook generate dialog's "Generating…" label
  (fr.json edited by user) — the long text was the real cause of the
  modal overlap, not the dialog structure.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/components/recipe/recipes-grid.tsx   | 62 ++++++++++++++-----
 .../web/components/social/favorite-button.tsx |  2 +-
 apps/web/messages/fr.json                     |  2 +-
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/recipe/recipes-grid.tsx b/apps/web/components/recipe/recipes-grid.tsx
index 2c231f1..eb89c73 100644
--- a/apps/web/components/recipe/recipes-grid.tsx
+++ b/apps/web/components/recipe/recipes-grid.tsx
@@ -117,12 +117,9 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="aspect-video" />
       <div className="flex flex-col flex-1 p-3 gap-1">
-        <div className="flex items-center gap-1.5">
-          <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
-            {recipe.title}
-          </h3>
-          {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
-        </div>
+        <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
+          {recipe.title}
+        </h3>
         {recipe.description && (
           <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
             {recipe.isBatchCook ? stripMarkdown(recipe.description) : recipe.description}
@@ -154,12 +151,25 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
           )}
         </div>
         <div className="flex items-center gap-1 shrink-0">
+          {recipe.isBatchCook && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+                <TooltipContent>{t("batchCookBadge")}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
           {!selectMode && (
             <StopPropagation>
               <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} />
             </StopPropagation>
           )}
-          <VisibilityIcon className="h-3 w-3" />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={<span className="p-1.5 inline-flex"><VisibilityIcon className="h-3 w-3" /></span>} />
+              <TooltipContent>{t(`visibility.${recipe.visibility}`)}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
     </div>
@@ -184,17 +194,29 @@ function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: b
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="w-28 h-20 rounded-lg" />
       <div className="flex-1 min-w-0 flex flex-col gap-1">
         <div className="flex items-start justify-between gap-2">
-          <h3 className={cn("font-semibold leading-tight line-clamp-1 text-sm flex items-center gap-1.5", !selectMode && "group-hover:text-primary")}>
+          <h3 className={cn("font-semibold leading-tight line-clamp-1 text-sm", !selectMode && "group-hover:text-primary")}>
             {recipe.title}
-            {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
           </h3>
           <div className="flex items-center gap-1 shrink-0">
+            {recipe.isBatchCook && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+                  <TooltipContent>{t("batchCookBadge")}</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
             {!selectMode && (
               <StopPropagation>
                 <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} />
               </StopPropagation>
             )}
-            <VisibilityIcon className="h-3.5 w-3.5 text-muted-foreground" />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger render={<span className="p-1.5 inline-flex"><VisibilityIcon className="h-3.5 w-3.5 text-muted-foreground" /></span>} />
+                <TooltipContent>{t(`visibility.${recipe.visibility}`)}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
         </div>
         {recipe.description && <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{recipe.isBatchCook ? stripMarkdown(recipe.description) : recipe.description}</p>}
@@ -231,9 +253,8 @@ function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected
       )}
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="w-10 h-10 rounded-md shrink-0" />
-      <h3 className={cn("font-medium text-sm truncate flex-1 min-w-0 flex items-center gap-1.5", !selectMode && "group-hover:text-primary")}>
-        <span className="truncate">{recipe.title}</span>
-        {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
+      <h3 className={cn("font-medium text-sm truncate flex-1 min-w-0", !selectMode && "group-hover:text-primary")}>
+        {recipe.title}
       </h3>
       <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Users className="h-3 w-3" />{recipe.baseServings}</span>
       {totalMins > 0 && (
@@ -245,12 +266,25 @@ function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected
       <span className="hidden md:inline text-xs text-muted-foreground shrink-0 w-16 text-right">
         {recipe.updatedAt.toLocaleDateString(locale, { month: "short", day: "numeric" })}
       </span>
+      {recipe.isBatchCook && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger render={<span className="p-1.5 inline-flex shrink-0"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+            <TooltipContent>{t("batchCookBadge")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
       {!selectMode && (
         <StopPropagation>
           <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} />
         </StopPropagation>
       )}
-      <VisibilityIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={<span className="p-1.5 inline-flex shrink-0"><VisibilityIcon className="h-3.5 w-3.5 text-muted-foreground" /></span>} />
+          <TooltipContent>{t(`visibility.${recipe.visibility}`)}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   );
 }
diff --git a/apps/web/components/social/favorite-button.tsx b/apps/web/components/social/favorite-button.tsx
index b898e8f..66bb792 100644
--- a/apps/web/components/social/favorite-button.tsx
+++ b/apps/web/components/social/favorite-button.tsx
@@ -58,7 +58,7 @@ export function FavoriteButton({
             <Heart className={cn("h-4 w-4", favorited ? "fill-red-500 text-red-500" : iconClassName)} />
           </Button>
         } />
-        <TooltipContent>{favorited ? "Saved" : "Save"}</TooltipContent>
+        <TooltipContent>{favorited ? tSocial("favoriteRemove") : tSocial("favoriteAdd")}</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/apps/web/messages/fr.json b/apps/web/messages/fr.json
index 4d44760..4b75d2c 100644
--- a/apps/web/messages/fr.json
+++ b/apps/web/messages/fr.json
@@ -553,7 +553,7 @@
     "dietaryPrefsPlaceholder": "ex : végétarien, sans crustacés",
     "anyDifficulty": "Peu importe",
     "generate": "Générer",
-    "generating": "Génération… ça peut prendre une minute",
+    "generating": "Génération…",
     "generateSuccess": "Session de batch cooking créée",
     "generateFailed": "Échec de la génération"
   },