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/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>