fix: recipe version diff readability + i18n, tooltip on markdown export

- Version compare used positional (index-by-index) list alignment —
  inserting one ingredient in the middle shifted every subsequent line
  out of alignment, making the whole rest of the list look changed.
  Switch to diffArrays (LCS-based) so insertions/deletions are
  detected properly; adjacent removed+added chunks still get paired
  for word-level diffing so a single edited item doesn't render as a
  full delete+insert.
- Translated "Title"/"Description"/"Ingredients"/"Steps" diff section
  headers, "Version History" sheet title, compare/restore buttons,
  loading/empty states, and the version-detail ingredient/step count
  summary (with proper plural forms).
- formatDate() in version history was hardcoded to "en-US" regardless
  of the app's locale — now uses the session locale.
- ExportMarkdownButton had no hover tooltip (bare title attribute) —
  wrap it in the same Tooltip pattern every other icon button in the
  toolbar uses.

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

apps/web/components/recipe/version-history-button.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
+import { useLocale } from "@/lib/i18n/provider";
 import { History, RotateCcw, ChevronDown, GitCompare } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -45,11 +46,6 @@ type VersionDetail = {
   snapshotData: SnapshotData;
 };
 
-function formatDate(dateStr: string): string {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-}
-
 export function VersionHistoryButton({
   recipeId,
   currentSnapshot,
@@ -59,7 +55,12 @@ export function VersionHistoryButton({
 }) {
   const t = useTranslations("recipe");
   const tForm = useTranslations("recipeForm");
+  const { locale } = useLocale();
   const router = useRouter();
+
+  function formatDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+  }
   const [open, setOpen] = useState(false);
   const [versions, setVersions] = useState<VersionSummary[]>([]);
   const [loading, setLoading] = useState(false);
@@ -116,7 +117,7 @@ export function VersionHistoryButton({
         body: JSON.stringify({ action: "restore" }),
       });
       if (res.ok) {
-        toast.success(`Recipe restored to version ${version.version}`);
+        toast.success(t("versionRestored", { version: version.version }));
         setOpen(false);
         router.refresh();
       } else {
@@ -142,16 +143,16 @@ export function VersionHistoryButton({
       <Sheet open={open} onOpenChange={handleOpen}>
         <SheetContent>
         <SheetHeader>
-          <SheetTitle>Version History</SheetTitle>
+          <SheetTitle>{t("versionHistoryTitle")}</SheetTitle>
         </SheetHeader>
 
         <div className="p-2 mt-6 space-y-2">
           {loading && (
-            <p className="text-sm text-muted-foreground">Loading versions...</p>
+            <p className="text-sm text-muted-foreground">{t("versionsLoading")}</p>
           )}
 
           {!loading && versions.length === 0 && (
-            <p className="text-sm text-muted-foreground">No versions yet. Versions are saved automatically when you edit this recipe.</p>
+            <p className="text-sm text-muted-foreground">{t("versionsEmpty")}</p>
           )}
 
           {versions.map((v) => {
@@ -196,7 +197,7 @@ export function VersionHistoryButton({
                       onClick={() => void handleCompare(v)}
                     >
                       <GitCompare className="h-3 w-3" />
-                      Compare
+                      {t("versionCompare")}
                     </Button>
                     <Button
                       variant="outline"
@@ -206,7 +207,7 @@ export function VersionHistoryButton({
                       onClick={() => void handleRestore(v)}
                     >
                       <RotateCcw className="h-3 w-3" />
-                      Restore
+                      {t("versionRestore")}
                     </Button>
                   </div>
                 </div>
@@ -214,11 +215,13 @@ export function VersionHistoryButton({
                 {isExpanded && (
                   <div className="px-3 pb-3 text-sm text-muted-foreground border-t pt-2">
                     {!detail ? (
-                      <p>Loading...</p>
+                      <p>{t("versionDetailLoading")}</p>
                     ) : (
                       <p>
-                        {detail.snapshotData.ingredients.length} ingredient{detail.snapshotData.ingredients.length !== 1 ? "s" : ""},{" "}
-                        {detail.snapshotData.steps.length} step{detail.snapshotData.steps.length !== 1 ? "s" : ""}
+                        {t("versionDetailSummary", {
+                          ingredients: detail.snapshotData.ingredients.length,
+                          steps: detail.snapshotData.steps.length,
+                        })}
                       </p>
                     )}
                   </div>
@@ -234,7 +237,7 @@ export function VersionHistoryButton({
       <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
-            {comparingId ? `Compare v${expandedData[comparingId]?.version} with current` : "Compare"}
+            {comparingId ? t("versionCompareWith", { version: expandedData[comparingId]?.version ?? "" }) : t("versionCompare")}
           </DialogTitle>
         </DialogHeader>
         {comparingId && expandedData[comparingId] && (