fix: mobile layout fixes, i18n coverage, and recipe share link

Mobile:
- Recipes search bar full-width on mobile instead of capped narrow
- Cook mode ingredients panel stacks above the step instead of
  squeezing it into a narrow column
- Version history Compare/Restore buttons wrap onto their own row
- Recipe edit ingredient fields wrap instead of forcing horizontal
  scroll on narrow viewports

i18n: translates remaining hardcoded strings across recipes
filter/sort, adapt-recipe and AI variations dialogs, the full
settings section (sidebar + 6 sub-pages + BYOK/model-prefs/
API-keys/webhooks managers), explore tab, collections (new/fork/
share dialogs), meal planning (planner, AI generation phases, new
shopping list, shared-plan view), photo import, recipe bulk-select
toolbar, and recipe action-button tooltips. Also fixes the recipes
page subtitle, which wasn't just unworded but missing its {count}
interpolation entirely — it always rendered as the bare word
"results" regardless of how many recipes existed.

Feature: adds a ShareRecipeButton that copies the public /r/{id}
link to the clipboard, with a notice when the recipe isn't Public
yet.

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

apps/web/components/social/new-collection-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
@@ -11,6 +12,9 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 
 export function NewCollectionButton() {
+  const t = useTranslations("collections");
+  const tSocial = useTranslations("social");
+  const tCommon = useTranslations("common");
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
@@ -27,9 +31,9 @@ export function NewCollectionButton() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ name: name.trim(), description: description.trim() || undefined, isPublic }),
       });
-      if (!res.ok) { toast.error("Failed to create"); return; }
+      if (!res.ok) { toast.error(t("createFailed")); return; }
       const { id } = await res.json() as { id: string };
-      toast.success("Collection created");
+      toast.success(tSocial("collectionCreated"));
       setOpen(false);
       setName(""); setDescription(""); setIsPublic(false);
       router.push(`/collections/${id}`);
@@ -42,27 +46,27 @@ export function NewCollectionButton() {
   return (
     <>
       <Button size="sm" onClick={() => setOpen(true)}>
-        <Plus className="h-4 w-4" /> New collection
+        <Plus className="h-4 w-4" /> {t("new")}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-md">
-          <DialogHeader><DialogTitle>New collection</DialogTitle></DialogHeader>
+          <DialogHeader><DialogTitle>{t("newTitle")}</DialogTitle></DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="col-name">Name</Label>
-              <Input id="col-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Weekend dinners" />
+              <Label htmlFor="col-name">{t("nameLabel")}</Label>
+              <Input id="col-name" value={name} onChange={(e) => setName(e.target.value)} placeholder={t("namePlaceholder")} />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="col-desc">Description</Label>
-              <Textarea id="col-desc" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder="Optional…" />
+              <Label htmlFor="col-desc">{t("descriptionLabel")}</Label>
+              <Textarea id="col-desc" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder={t("descriptionPlaceholder")} />
             </div>
             <label className="flex items-center gap-2 text-sm cursor-pointer">
               <input type="checkbox" checked={isPublic} onChange={(e) => setIsPublic(e.target.checked)} className="rounded" />
-              Make public
+              {t("makePublic")}
             </label>
             <div className="flex gap-2 justify-end">
-              <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-              <Button onClick={create} disabled={!name.trim() || saving}>{saving ? "Creating…" : "Create"}</Button>
+              <Button variant="outline" onClick={() => setOpen(false)}>{tCommon("cancel")}</Button>
+              <Button onClick={create} disabled={!name.trim() || saving}>{saving ? t("creating") : t("create")}</Button>
             </div>
           </div>
         </DialogContent>