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/shopping-lists/share-shopping-list-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { UserPlus, X } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -40,6 +41,9 @@ interface Props {
 }
 
 export function ShareShoppingListButton({ listId }: Props) {
+  const t = useTranslations("shoppingLists");
+  const ts = useTranslations("shareDialog");
+  const tCommon = useTranslations("common");
   const [open, setOpen] = useState(false);
   const [email, setEmail] = useState("");
   const [role, setRole] = useState<Role>("viewer");
@@ -55,7 +59,7 @@ export function ShareShoppingListButton({ listId }: Props) {
       const data = await res.json() as Member[];
       setMembers(data);
     } catch {
-      toast.error("Could not load members");
+      toast.error(ts("loadMembersFailed"));
     } finally {
       setLoading(false);
     }
@@ -73,7 +77,7 @@ export function ShareShoppingListButton({ listId }: Props) {
 
   async function handleInvite() {
     if (!email.trim()) {
-      toast.error("Enter an email address");
+      toast.error(ts("enterEmail"));
       return;
     }
     setInviting(true);
@@ -83,14 +87,14 @@ export function ShareShoppingListButton({ listId }: Props) {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ email: email.trim(), role }),
       });
-      if (res.status === 409) { toast.error("Already a member"); return; }
-      if (res.status === 404) { toast.error("User not found"); return; }
-      if (!res.ok) { toast.error("Could not invite user"); return; }
-      toast.success("Invitation sent");
+      if (res.status === 409) { toast.error(ts("alreadyMember")); return; }
+      if (res.status === 404) { toast.error(ts("userNotFound")); return; }
+      if (!res.ok) { toast.error(ts("inviteFailed")); return; }
+      toast.success(ts("invitationSent"));
       setEmail("");
       await fetchMembers();
     } catch {
-      toast.error("Could not invite user");
+      toast.error(ts("inviteFailed"));
     } finally {
       setInviting(false);
     }
@@ -102,11 +106,11 @@ export function ShareShoppingListButton({ listId }: Props) {
         `/api/v1/shopping-lists/${listId}/members?memberId=${memberId}`,
         { method: "DELETE" },
       );
-      if (!res.ok) { toast.error("Could not remove member"); return; }
+      if (!res.ok) { toast.error(ts("removeMemberFailed")); return; }
       setMembers((prev) => prev.filter((m) => m.id !== memberId));
-      toast.success("Member removed");
+      toast.success(ts("memberRemoved"));
     } catch {
-      toast.error("Could not remove member");
+      toast.error(ts("removeMemberFailed"));
     }
   }
 
@@ -114,22 +118,22 @@ export function ShareShoppingListButton({ listId }: Props) {
     <>
       <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
         <UserPlus className="h-4 w-4" />
-        Share
+        {tCommon("share")}
       </Button>
 
       <Dialog open={open} onOpenChange={handleOpenChange}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Share shopping list</DialogTitle>
+            <DialogTitle>{t("shareTitle")}</DialogTitle>
             <DialogDescription>
-              Invite household members to view or edit this list.
+              {t("shareDescription")}
             </DialogDescription>
           </DialogHeader>
 
           <div className="flex gap-2 mt-2">
             <Input
               type="email"
-              placeholder="Email address"
+              placeholder={ts("emailPlaceholder")}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
@@ -140,21 +144,21 @@ export function ShareShoppingListButton({ listId }: Props) {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="viewer">Viewer</SelectItem>
-                <SelectItem value="editor">Editor</SelectItem>
+                <SelectItem value="viewer">{ts("viewer")}</SelectItem>
+                <SelectItem value="editor">{ts("editor")}</SelectItem>
               </SelectContent>
             </Select>
             <Button onClick={() => void handleInvite()} disabled={inviting}>
-              Invite
+              {ts("invite")}
             </Button>
           </div>
 
           <div className="mt-4 space-y-2">
             {loading && (
-              <p className="text-sm text-muted-foreground">Loading members…</p>
+              <p className="text-sm text-muted-foreground">{ts("loadingMembers")}</p>
             )}
             {!loading && members.length === 0 && (
-              <p className="text-sm text-muted-foreground">No members yet.</p>
+              <p className="text-sm text-muted-foreground">{ts("noMembers")}</p>
             )}
             {members.map((m) => (
               <div
@@ -170,7 +174,7 @@ export function ShareShoppingListButton({ listId }: Props) {
                   )}
                 </div>
                 <Badge variant={m.role === "editor" ? "default" : "secondary"}>
-                  {m.role}
+                  {ts(m.role)}
                 </Badge>
                 <Button
                   variant="ghost"