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/shopping-lists-page-content.tsx

@@ -26,6 +26,7 @@ type Props = {
 
 export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
   const t = useTranslations("shoppingLists");
+  const ts = useTranslations("shareDialog");
 
   return (
     <div className="space-y-6">
@@ -69,7 +70,7 @@ export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
 
       {sharedLists.length > 0 && (
         <div className="space-y-3 max-w-lg">
-          <h2 className="text-sm font-semibold text-muted-foreground">Shared with you</h2>
+          <h2 className="text-sm font-semibold text-muted-foreground">{t("sharedWithYou")}</h2>
           {sharedLists.map((list) => (
             <Link
               key={list.id}
@@ -79,7 +80,7 @@ export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
               <div className="space-y-1">
                 <h3 className="font-semibold">{list.name}</h3>
                 <p className="text-sm text-muted-foreground">
-                  {list.ownerName} · {list.role}
+                  {list.ownerName} · {ts(list.role)}
                 </p>
               </div>
             </Link>