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-diff-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { diffWords } from "diff";
+import { diffWords, diffArrays } from "diff";
+import { useTranslations } from "next-intl";
 
 export type DiffSnapshot = {
   title: string;
@@ -40,62 +41,95 @@ function TextDiff({ before, after }: { before: string; after: string }) {
 }
 
 function ListDiff({ before, after }: { before: string[]; after: string[] }) {
-  const max = Math.max(before.length, after.length);
+  const changes = diffArrays(before, after);
-  const rows = [];
+  const rows: React.ReactNode[] = [];
-  for (let i = 0; i < max; i++) {
+  let key = 0;
-    const b = before[i];
+
-    const a = after[i];
+  for (let i = 0; i < changes.length; i++) {
-    if (b === undefined) {
+    const change = changes[i]!;
-      rows.push(
+
-        <div key={i} className="bg-green-500/10 rounded px-2 py-1 text-sm text-green-700 dark:text-green-400">
+    // A removed chunk immediately followed by an added chunk is usually an
-          + {a}
+    // edit, not a delete+insert — word-diff matching pairs so a one-word
-        </div>
+    // tweak doesn't render as an unreadable full remove + full add.
-      );
+    if (change.removed && changes[i + 1]?.added) {
-    } else if (a === undefined) {
+      const removedItems = change.value;
-      rows.push(
+      const addedItems = changes[i + 1]!.value;
-        <div key={i} className="bg-red-500/10 rounded px-2 py-1 text-sm text-red-700 dark:text-red-400 line-through">
+      const pairCount = Math.min(removedItems.length, addedItems.length);
-          − {b}
+
-        </div>
+      for (let j = 0; j < pairCount; j++) {
-      );
+        rows.push(
-    } else if (b === a) {
+          <div key={key++} className="rounded px-2 py-1">
-      rows.push(
+            <TextDiff before={removedItems[j]!} after={addedItems[j]!} />
-        <div key={i} className="px-2 py-1 text-sm text-muted-foreground">
+          </div>
-          {b}
+        );
-        </div>
+      }
-      );
+      for (let j = pairCount; j < removedItems.length; j++) {
-    } else {
+        rows.push(
-      rows.push(
+          <div key={key++} className="bg-red-500/10 rounded px-2 py-1 text-sm text-red-700 dark:text-red-400 line-through">
-        <div key={i} className="rounded px-2 py-1">
+            − {removedItems[j]}
-          <TextDiff before={b} after={a} />
+          </div>
-        </div>
+        );
-      );
+      }
+      for (let j = pairCount; j < addedItems.length; j++) {
+        rows.push(
+          <div key={key++} className="bg-green-500/10 rounded px-2 py-1 text-sm text-green-700 dark:text-green-400">
+            + {addedItems[j]}
+          </div>
+        );
+      }
+      i++; // consumed the paired "added" chunk too
+      continue;
+    }
+
+    for (const item of change.value) {
+      if (change.added) {
+        rows.push(
+          <div key={key++} className="bg-green-500/10 rounded px-2 py-1 text-sm text-green-700 dark:text-green-400">
+            + {item}
+          </div>
+        );
+      } else if (change.removed) {
+        rows.push(
+          <div key={key++} className="bg-red-500/10 rounded px-2 py-1 text-sm text-red-700 dark:text-red-400 line-through">
+            − {item}
+          </div>
+        );
+      } else {
+        rows.push(
+          <div key={key++} className="px-2 py-1 text-sm text-muted-foreground">
+            {item}
+          </div>
+        );
+      }
     }
   }
+
   return <div className="space-y-1">{rows}</div>;
 }
 
 export function VersionDiffView({ before, after }: { before: DiffSnapshot; after: DiffSnapshot }) {
+  const t = useTranslations("recipe");
   return (
     <div className="space-y-6">
       <section className="space-y-2">
-        <h3 className="text-sm font-semibold text-muted-foreground">Title</h3>
+        <h3 className="text-sm font-semibold text-muted-foreground">{t("diffTitleLabel")}</h3>
         <TextDiff before={before.title} after={after.title} />
       </section>
 
       {(before.description || after.description) && (
         <section className="space-y-2">
-          <h3 className="text-sm font-semibold text-muted-foreground">Description</h3>
+          <h3 className="text-sm font-semibold text-muted-foreground">{t("diffDescriptionLabel")}</h3>
           <TextDiff before={before.description ?? ""} after={after.description ?? ""} />
         </section>
       )}
 
       <section className="space-y-2">
-        <h3 className="text-sm font-semibold text-muted-foreground">Ingredients</h3>
+        <h3 className="text-sm font-semibold text-muted-foreground">{t("diffIngredientsLabel")}</h3>
         <ListDiff before={before.ingredients.map(ingredientLine)} after={after.ingredients.map(ingredientLine)} />
       </section>
 
       <section className="space-y-2">
-        <h3 className="text-sm font-semibold text-muted-foreground">Steps</h3>
+        <h3 className="text-sm font-semibold text-muted-foreground">{t("diffStepsLabel")}</h3>
         <ListDiff before={before.steps.map(stepLine)} after={after.steps.map(stepLine)} />
       </section>
     </div>

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" : ""},{" "}
+                        {t("versionDetailSummary", {
-                        {detail.snapshotData.steps.length} step{detail.snapshotData.steps.length !== 1 ? "s" : ""}
+                          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] && (

apps/web/components/shared/export-markdown-button.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export function ExportMarkdownButton({
   markdown,
@@ -43,11 +44,18 @@ export function ExportMarkdownButton({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger render={
+      <TooltipProvider>
-        <Button variant="ghost" size="icon" title={t("exportMarkdown")}>
+        <Tooltip>
-          <FileDown className="h-4 w-4" />
+          <TooltipTrigger render={
-        </Button>
+            <DropdownMenuTrigger render={
-      } />
+              <Button variant="ghost" size="icon">
+                <FileDown className="h-4 w-4" />
+              </Button>
+            } />
+          } />
+          <TooltipContent>{t("exportMarkdown")}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => { void handleCopy(); }}>
           <Copy className="h-4 w-4" />

apps/web/messages/en.json

@@ -113,6 +113,19 @@
     "urlImportFetchFailed": "Failed to import recipe",
     "urlImportSaveFailed": "Failed to save imported recipe",
     "urlImportSuccess": "Recipe imported! Review before publishing.",
+    "diffTitleLabel": "Title",
+    "diffDescriptionLabel": "Description",
+    "diffIngredientsLabel": "Ingredients",
+    "diffStepsLabel": "Steps",
+    "versionHistoryTitle": "Version History",
+    "versionsLoading": "Loading versions...",
+    "versionsEmpty": "No versions yet. Versions are saved automatically when you edit this recipe.",
+    "versionCompare": "Compare",
+    "versionCompareWith": "Compare v{version} with current",
+    "versionRestore": "Restore",
+    "versionRestored": "Recipe restored to version {version}",
+    "versionDetailLoading": "Loading...",
+    "versionDetailSummary": "{ingredients, plural, one {1 ingredient} other {{ingredients} ingredients}}, {steps, plural, one {1 step} other {{steps} steps}}",
     "analyzingPhoto": "Analyzing photo…",
     "pairMealTooltip": "Pair meal",
     "historyTooltip": "History",

apps/web/messages/fr.json

@@ -113,6 +113,19 @@
     "urlImportFetchFailed": "Échec de l'importation de la recette",
     "urlImportSaveFailed": "Échec de l'enregistrement de la recette importée",
     "urlImportSuccess": "Recette importée ! Vérifiez-la avant de la publier.",
+    "diffTitleLabel": "Titre",
+    "diffDescriptionLabel": "Description",
+    "diffIngredientsLabel": "Ingrédients",
+    "diffStepsLabel": "Étapes",
+    "versionHistoryTitle": "Historique des versions",
+    "versionsLoading": "Chargement des versions...",
+    "versionsEmpty": "Aucune version pour l'instant. Les versions sont enregistrées automatiquement lorsque vous modifiez cette recette.",
+    "versionCompare": "Comparer",
+    "versionCompareWith": "Comparer v{version} avec la version actuelle",
+    "versionRestore": "Restaurer",
+    "versionRestored": "Recette restaurée à la version {version}",
+    "versionDetailLoading": "Chargement...",
+    "versionDetailSummary": "{ingredients, plural, one {1 ingrédient} other {{ingredients} ingrédients}}, {steps, plural, one {1 étape} other {{steps} étapes}}",
     "analyzingPhoto": "Analyse de la photo…",
     "pairMealTooltip": "Accorder un plat",
     "historyTooltip": "Historique",