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/settings/api-keys-manager.tsx

@@ -95,7 +95,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
       {/* Create form */}
       <form onSubmit={handleCreate} className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor="key-name">Key name</Label>
+          <Label htmlFor="key-name">{t("apiKeyNameLabel")}</Label>
           <div className="flex gap-2">
             <Input
               id="key-name"
@@ -106,7 +106,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
               required
             />
             <Button type="submit" disabled={creating || !name.trim()}>
-              {creating ? "Creating…" : "Create"}
+              {creating ? t("apiKeyCreating") : t("apiKeyCreate")}
             </Button>
           </div>
         </div>
@@ -116,14 +116,14 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
       {newKey && (
         <div className="rounded-md border border-yellow-400 bg-yellow-50 p-4 space-y-3 dark:bg-yellow-950 dark:border-yellow-700">
           <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-            Save this key — it will not be shown again.
+            {t("apiKeyRevealNotice")}
           </p>
           <div className="flex items-center gap-2">
             <code className="flex-1 rounded bg-white dark:bg-black border px-3 py-2 text-sm font-mono break-all">
               {newKey}
             </code>
             <Button type="button" variant="outline" onClick={handleCopy}>
-              {copied ? "Copied!" : "Copy"}
+              {copied ? t("copied") : t("copy")}
             </Button>
           </div>
           <Button
@@ -133,14 +133,14 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
             onClick={() => setNewKey(null)}
             className="text-muted-foreground"
           >
-            Dismiss
+            {t("dismiss")}
           </Button>
         </div>
       )}
 
       {/* Keys list */}
       {keys.length === 0 ? (
-        <p className="text-sm text-muted-foreground">No API keys yet.</p>
+        <p className="text-sm text-muted-foreground">{t("noApiKeys")}</p>
       ) : (
         <div className="divide-y rounded-md border">
           {keys.map((k) => (
@@ -148,12 +148,12 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
               <div className="min-w-0 flex-1 space-y-1">
                 <p className="text-sm font-medium truncate">{k.name}</p>
                 <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span>Created {formatDate(k.createdAt)}</span>
+                  <span>{t("createdOn", { date: formatDate(k.createdAt) })}</span>
                   <span>·</span>
                   {k.lastUsedAt ? (
-                    <span>Last used {formatDate(k.lastUsedAt)}</span>
+                    <span>{t("lastUsedOn", { date: formatDate(k.lastUsedAt) })}</span>
                   ) : (
-                    <Badge variant="secondary" className="text-xs">Never used</Badge>
+                    <Badge variant="secondary" className="text-xs">{t("neverUsed")}</Badge>
                   )}
                 </div>
               </div>
@@ -163,7 +163,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
                 size="sm"
                 onClick={() => { void handleRevoke(k.id); }}
               >
-                Revoke
+                {t("revoke")}
               </Button>
             </div>
           ))}