fix(i18n): translate remaining recipe card/detail strings, localize AI responses

Recipe cards, the recipe detail page, and meal planner still rendered raw
"{n} servings"/"{n}m cook"/"{n} srv" text and untranslated difficulty labels
outside the earlier i18n pass. Also wires the user's locale into AI features
that previously always answered in English regardless of app language:
recipe chat, ingredient substitution, recipe ideas, and generate-from-idea.
The recipe-language picker in the AI generate dialog now defaults to the
user's locale instead of always defaulting to English.

apps/web/components/recipe/ai-generate-dialog.tsx

@@ -18,6 +18,7 @@ import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
+import { useLocale } from "@/lib/i18n/provider";
 
 const LANGUAGES = [
   { code: "en", label: "English" },
@@ -72,11 +73,12 @@ export function AiGenerateDialog({
 }) {
   const t = useTranslations("ai.generate");
   const router = useRouter();
+  const locale = useLocale();
   const [tab, setTab] = useState<Tab>("describe");
 
   // describe tab
   const [prompt, setPrompt] = useState("");
-  const [language, setLanguage] = useState("en");
+  const [language, setLanguage] = useState(locale);
   const [difficulty, setDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
 
   // photo tab

apps/web/components/recipe/generate-content-button.tsx

@@ -7,6 +7,7 @@ import { Sparkles, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
+import { useLocale } from "@/lib/i18n/provider";
 
 type GeneratedRecipe = {
   ingredients: Array<{ rawName: string; quantity?: number; unit?: string; note?: string }>;
@@ -24,6 +25,7 @@ export function GenerateContentButton({
 }) {
   const t = useTranslations("ai.generate");
   const router = useRouter();
+  const locale = useLocale();
   const [busy, setBusy] = useState(false);
 
   async function generate() {
@@ -36,7 +38,7 @@ export function GenerateContentButton({
       const genRes = await fetch("/api/v1/ai/generate", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ prompt }),
+        body: JSON.stringify({ prompt, language: locale }),
       });
 
       if (!genRes.ok) {

apps/web/components/recipe/recipe-card.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { Clock, Users, Lock, Globe, Link2 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
@@ -30,6 +31,7 @@ const DIFFICULTY_COLOR = {
 } as const;
 
 export function RecipeCard({ recipe }: { recipe: Recipe }) {
+  const t = useTranslations("recipe");
   const cover = recipe.photos?.find((p) => p.isCover) ?? recipe.photos?.[0];
   const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
   const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
@@ -68,12 +70,12 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
             {totalMins > 0 && (
               <span className="flex items-center gap-1">
                 <Clock className="h-3 w-3" />
-                {totalMins}m
+                {t("total", { mins: totalMins })}
               </span>
             )}
             {recipe.difficulty && (
               <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4">
-                {recipe.difficulty}
+                {t(`difficulty.${recipe.difficulty}`)}
               </Badge>
             )}
           </div>

apps/web/components/recipe/recipes-grid.tsx

@@ -45,6 +45,7 @@ function SelectableRecipeCard({
   selectMode: boolean;
   onToggle: (id: string) => void;
 }) {
+  const t = useTranslations("recipe");
   const cover = recipe.photos?.find((p) => p.isCover) ?? recipe.photos?.[0];
   const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
   const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
@@ -139,12 +140,12 @@ function SelectableRecipeCard({
           {totalMins > 0 && (
             <span className="flex items-center gap-1">
               <Clock className="h-3 w-3" />
-              {totalMins}m
+              {t("total", { mins: totalMins })}
             </span>
           )}
           {recipe.difficulty && (
             <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">
-              {recipe.difficulty}
+              {t(`difficulty.${recipe.difficulty}`)}
             </Badge>
           )}
         </div>