fix: batch of collections/i18n/translate-button fixes (v0.53.1)

- Drag-reorder used verticalListSortingStrategy on a multi-column grid,
  which computes wrong transforms for grid reflow — swapped to
  rectSortingStrategy so cards actually animate live while dragging.
- Grip handle was rendered as a sibling of (not a descendant of) the
  `group` element its `group-hover:opacity-100` depended on, so it was
  permanently invisible. Fixed the DOM nesting and made it always
  partially visible instead of hover-only.
- common.edit was missing from both locales (not just French) —
  edit-collection-dialog.tsx was the first caller to hit it.
- Root cause of "generated in my language but Translate still shows":
  generate-meal, meal-plan/generate, and adapt never set recipes.language
  on the row they inserted, so the button's `!recipe.language || ...`
  check always fell back to "show it". Fixed at all three insert sites.
- Translate dialog was entirely hardcoded English (title, description,
  language names, buttons) despite i18n keys already existing for most of
  it — now uses them, plus new translated language-name keys.
- Recipe tags now render on the recipe detail page (previously grid-card
  only).
- Collection header actions converted to icon-only + tooltip, matching
  the recipe page's pattern instead of icon+label buttons.
- Collections list search now also matches recipe titles inside each
  collection, not just the collection's own name/description.
- Explore page links to /collections/explore next to its tabs.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/collections/collection-recipes-grid.tsx

@@ -16,7 +16,7 @@ import {
 import {
   SortableContext,
   useSortable,
-  verticalListSortingStrategy,
+  rectSortingStrategy,
   arrayMove,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -49,6 +49,7 @@ function SortableRecipeCard({
   onToggle: () => void;
   dragDisabled: boolean;
 }) {
+  const t = useTranslations("collections");
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: recipe.id,
     disabled: dragDisabled,
@@ -60,7 +61,7 @@ function SortableRecipeCard({
     <div
       ref={setNodeRef}
       style={style}
-      className={cn("relative", selectMode && "cursor-pointer", isDragging && "z-10 opacity-70")}
+      className={cn("relative group", selectMode && "cursor-pointer", isDragging && "z-10 opacity-70")}
       onClick={selectMode ? onToggle : undefined}
     >
       {selectMode && (
@@ -74,18 +75,20 @@ function SortableRecipeCard({
         </div>
       )}
       {!selectMode && !dragDisabled && (
+        // Always at least partly visible (not hover-only) — a fully hidden-until-hover
+        // handle is exactly what made dragging undiscoverable before.
         <button
           type="button"
           {...attributes}
           {...listeners}
-          className="absolute top-2 right-2 z-10 h-6 w-6 rounded-md bg-background/90 border shadow-sm flex items-center justify-center text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity"
+          className="absolute top-2 right-2 z-10 h-6 w-6 rounded-md bg-background/90 border shadow-sm flex items-center justify-center text-muted-foreground cursor-grab active:cursor-grabbing opacity-60 group-hover:opacity-100 hover:text-foreground hover:border-foreground/30 transition-opacity"
           onClick={(e) => e.preventDefault()}
-          aria-label="Drag to reorder"
+          aria-label={t("dragToReorder")}
         >
           <GripVertical className="h-3.5 w-3.5" />
         </button>
       )}
-      <div className={cn("group", selectMode && "pointer-events-none", selectMode && selected && "rounded-xl ring-2 ring-primary")}>
+      <div className={cn(selectMode && "pointer-events-none", selectMode && selected && "rounded-xl ring-2 ring-primary")}>
         {selectMode ? (
           <RecipeGridCard recipe={recipe} />
         ) : (
@@ -207,7 +210,7 @@ export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }:
         <p className="text-sm text-muted-foreground py-8 text-center">{t("noRecipeSearchResults")}</p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={filtered.map((r) => r.id)} strategy={verticalListSortingStrategy}>
+          <SortableContext items={filtered.map((r) => r.id)} strategy={rectSortingStrategy}>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
               {filtered.map((recipe) => (
                 <SortableRecipeCard

apps/web/components/collections/delete-collection-dialog.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -41,10 +42,16 @@ export function DeleteCollectionDialog({ collectionId }: { collectionId: string
 
   return (
     <>
-      <Button variant="outline" size="sm" className="gap-1.5 text-destructive hover:text-destructive" onClick={() => setOpen(true)}>
-        <Trash2 className="h-4 w-4" />
-        {tCommon("delete")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" className="text-destructive hover:text-destructive" onClick={() => setOpen(true)} aria-label={tCommon("delete")}>
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{tCommon("delete")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent>

apps/web/components/collections/edit-collection-dialog.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { Pencil, Tag, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
@@ -88,10 +89,16 @@ export function EditCollectionDialog({
 
   return (
     <>
-      <Button variant="outline" size="sm" className="gap-1.5" onClick={() => setOpen(true)}>
-        <Pencil className="h-4 w-4" />
-        {tCommon("edit")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={tCommon("edit")}>
+              <Pencil className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{tCommon("edit")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-lg">

apps/web/components/collections/fork-collection-button.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { GitFork } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from "sonner";
 
 export function ForkCollectionButton({ collectionId }: { collectionId: string }) {
@@ -31,9 +32,15 @@ export function ForkCollectionButton({ collectionId }: { collectionId: string })
   }
 
   return (
-    <Button variant="outline" size="sm" onClick={() => { void handleFork(); }} disabled={forking} className="gap-2 shrink-0">
-      <GitFork className="h-4 w-4" />
-      {forking ? t("forking") : t("forkCollection")}
-    </Button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={
+          <Button variant="ghost" size="icon" onClick={() => { void handleFork(); }} disabled={forking} aria-label={t("forkCollection")}>
+            <GitFork className="h-4 w-4" />
+          </Button>
+        } />
+        <TooltipContent>{forking ? t("forking") : t("forkCollection")}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

apps/web/components/collections/generate-meal-dialog.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { ChefHat, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -67,10 +68,16 @@ export function GenerateMealDialog({ collectionId }: { collectionId: string }) {
 
   return (
     <>
-      <Button variant="outline" size="sm" className="gap-1.5" onClick={() => setOpen(true)}>
-        <ChefHat className="h-4 w-4" />
-        {t("generateMeal")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("generateMeal")}>
+              <ChefHat className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{t("generateMeal")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className="max-w-lg">

apps/web/components/collections/share-collection-button.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -116,10 +117,16 @@ export function ShareCollectionButton({ collectionId }: Props) {
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
-        <UserPlus className="h-4 w-4 mr-2" />
-        {tCommon("share")}
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => handleOpenChange(true)} aria-label={tCommon("share")}>
+              <UserPlus className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>{tCommon("share")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={handleOpenChange}>
         <DialogContent className="sm:max-w-md">

apps/web/components/recipe/translate-button.tsx

@@ -17,24 +17,15 @@ import {
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
-const LANGUAGES = [
-  { code: "French", label: "French" },
-  { code: "Spanish", label: "Spanish" },
-  { code: "German", label: "German" },
-  { code: "Italian", label: "Italian" },
-  { code: "Portuguese", label: "Portuguese" },
-  { code: "English", label: "English" },
-  { code: "Japanese", label: "Japanese" },
-  { code: "Chinese", label: "Chinese" },
-  { code: "Arabic", label: "Arabic" },
-  { code: "Dutch", label: "Dutch" },
-  { code: "Polish", label: "Polish" },
-  { code: "Russian", label: "Russian" },
-];
+const LANGUAGE_CODES = [
+  "French", "Spanish", "German", "Italian", "Portuguese", "English",
+  "Japanese", "Chinese", "Arabic", "Dutch", "Polish", "Russian",
+] as const;
 
 export function TranslateButton({ recipeId }: { recipeId: string }) {
   const t = useTranslations("ai.translate");
   const tRecipe = useTranslations("recipe");
+  const tCommon = useTranslations("common");
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [targetLanguage, setTargetLanguage] = useState("French");
@@ -82,46 +73,44 @@ export function TranslateButton({ recipeId }: { recipeId: string }) {
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <Languages className="h-5 w-5 text-primary" />
-              Translate Recipe
+              {t("title")}
             </DialogTitle>
-            <DialogDescription>
-              AI will translate the title, description, ingredients, and steps. Quantities and units are preserved.
-            </DialogDescription>
+            <DialogDescription>{t("description")}</DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label>Target language</Label>
+              <Label>{t("targetLanguage")}</Label>
               <Select value={targetLanguage} onValueChange={(v) => v && setTargetLanguage(v)} disabled={translating}>
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {LANGUAGES.map((l) => (
-                    <SelectItem key={l.code} value={l.code}>{l.label}</SelectItem>
+                  {LANGUAGE_CODES.map((code) => (
+                    <SelectItem key={code} value={code}>{t(`languages.${code}`)}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
 
             {translating && (
-              <p className="text-sm text-muted-foreground">This may take 20–30 seconds…</p>
+              <p className="text-sm text-muted-foreground">{t("wait")}</p>
             )}
 
             <div className="flex gap-2 justify-end">
               <Button variant="outline" onClick={() => setOpen(false)} disabled={translating}>
-                Cancel
+                {tCommon("cancel")}
               </Button>
               <Button onClick={handleTranslate} disabled={translating}>
                 {translating ? (
                   <>
                     <Loader2 className="h-4 w-4 animate-spin" />
-                    Translating…
+                    {t("translating")}
                   </>
                 ) : (
                   <>
                     <Languages className="h-4 w-4" />
-                    Translate
+                    {t("button")}
                   </>
                 )}
               </Button>

apps/web/components/search/explore-page-content.tsx

@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users, Rss, UserPlus } from "lucide-react";
+import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users, Rss, UserPlus, FolderOpen } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type { RecipeResult as ExploreRecipeResult } from "@/app/(app)/explore/page";
 import { RecipeGridCard, type GridCardRecipe } from "@/components/recipe/recipe-grid-card";
@@ -184,6 +184,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
   const tCommon = useTranslations("common");
   const tRecipe = useTranslations("recipe");
   const tPeople = useTranslations("people");
+  const tCollections = useTranslations("collections");
 
   const [inputValue, setInputValue] = useState(initialQuery);
   const [query, setQuery] = useState(initialQuery);
@@ -512,7 +513,8 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
       {/* Explore tabs — shown when no query */}
       {!hasQuery && (
         <>
-          <div className="flex gap-1 border-b">
+          <div className="flex items-center justify-between gap-2 border-b">
+          <div className="flex gap-1">
             <button
               onClick={() => setTab("discover")}
               className={cn(
@@ -542,6 +544,14 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
               {tFeed("forYou")}
             </button>
           </div>
+          <Link
+            href="/collections/explore"
+            className="pb-2 text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1.5 shrink-0"
+          >
+            <FolderOpen className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">{tCollections("exploreLink")}</span>
+          </Link>
+          </div>
 
           {tab === "discover" && (
             <>