fix: translate remaining pantry UI (print button, manager, print page)

pantry-page-header's Print button, the pantry-manager add/remove
form (item name, qty, unit, expiry badges), and the print/pantry
page (title, column headers, item count, empty state, footer) were
all hardcoded English.

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

apps/web/app/print/pantry/page.tsx

@@ -2,10 +2,12 @@ import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
 import { db, pantryItems, eq, asc } from "@epicure/db";
 import { PrintTrigger } from "@/components/recipe/print-trigger";
+import { getMessages, formatMessage } from "@/lib/i18n/server";
 
 export default async function PantryPrintPage() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
+  const m = getMessages((session.user as { locale?: string }).locale);
 
   const items = await db.query.pantryItems.findMany({
     where: eq(pantryItems.userId, session.user.id),
@@ -49,18 +51,18 @@ export default async function PantryPrintPage() {
 
       <PrintTrigger />
 
-      <h1>Pantry</h1>
+      <h1>{m.pantry.title}</h1>
-      <p className="subtitle">{items.length} item{items.length !== 1 ? "s" : ""}</p>
+      <p className="subtitle">{formatMessage(items.length === 1 ? m.pantry.printItemCountSingular : m.pantry.printItemCountPlural, { count: items.length })}</p>
 
       {items.length === 0 ? (
-        <p style={{ color: "#888" }}>No items in pantry.</p>
+        <p style={{ color: "#888" }}>{m.pantry.noItems}</p>
       ) : (
         <table>
           <thead>
             <tr>
-              <th>Item</th>
+              <th>{m.pantry.colItem}</th>
-              <th>Quantity</th>
+              <th>{m.pantry.colQuantity}</th>
-              <th>Expires</th>
+              <th>{m.pantry.colExpires}</th>
             </tr>
           </thead>
           <tbody>
@@ -75,7 +77,7 @@ export default async function PantryPrintPage() {
                   <td className={expiryClass}>
                     {exp
                       ? daysLeft !== null && daysLeft < 0
-                        ? `Expired ${Math.abs(daysLeft)}d ago`
+                        ? formatMessage(m.pantry.expiredDaysAgo, { days: Math.abs(daysLeft) })
                         : exp.toLocaleDateString("en", { month: "short", day: "numeric", year: "numeric" })
                       : "—"}
                   </td>
@@ -86,7 +88,7 @@ export default async function PantryPrintPage() {
         </table>
       )}
 
-      <footer>Printed from Epicure</footer>
+      <footer>{m.print.footer}</footer>
     </>
   );
 }

apps/web/components/meal-plan/pantry-manager.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Plus, Trash2, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -20,6 +21,7 @@ function daysUntilExpiry(dateStr: string): number {
 }
 
 export function PantryManager({ initialItems }: { initialItems: PantryItem[] }) {
+  const t = useTranslations("pantry");
   const [items, setItems] = useState<PantryItem[]>(initialItems);
   const [name, setName] = useState("");
   const [quantity, setQuantity] = useState("");
@@ -41,7 +43,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
           expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
         }),
       });
-      if (!res.ok) { toast.error("Failed to add"); return; }
+      if (!res.ok) { toast.error(t("addFailed")); return; }
       const { id } = await res.json() as { id: string };
       setItems((prev) => [...prev, { id, rawName: name.trim(), quantity: quantity || null, unit: unit || null, expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null }]);
       setName(""); setQuantity(""); setUnit(""); setExpiresAt("");
@@ -53,7 +55,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
   async function remove(id: string) {
     const res = await fetch(`/api/v1/pantry/${id}`, { method: "DELETE" });
     if (res.ok) setItems((prev) => prev.filter((i) => i.id !== id));
-    else toast.error("Failed to remove");
+    else toast.error(t("removeFailed"));
   }
 
   const sorted = [...items].sort((a, b) => {
@@ -67,18 +69,18 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
     <div className="space-y-6 max-w-2xl">
       {/* Add form */}
       <div className="flex gap-2 flex-wrap">
-        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Item name" className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
+        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("itemNamePlaceholder")} className="flex-1 min-w-[160px]" onKeyDown={(e) => e.key === "Enter" && add()} />
-        <Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder="Qty" className="w-20" />
+        <Input value={quantity} onChange={(e) => setQuantity(e.target.value)} placeholder={t("qtyPlaceholder")} className="w-20" />
-        <Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="Unit" className="w-20" />
+        <Input value={unit} onChange={(e) => setUnit(e.target.value)} placeholder={t("unitPlaceholder")} className="w-20" />
         <Input type="date" value={expiresAt} onChange={(e) => setExpiresAt(e.target.value)} className="w-36" />
         <Button onClick={add} disabled={!name.trim() || adding} size="sm">
-          <Plus className="h-4 w-4" /> Add
+          <Plus className="h-4 w-4" /> {t("add")}
         </Button>
       </div>
 
       {/* Item list */}
       {items.length === 0 ? (
-        <p className="text-muted-foreground text-sm">No pantry items yet.</p>
+        <p className="text-muted-foreground text-sm">{t("empty")}</p>
       ) : (
         <div className="rounded-xl border divide-y">
           {sorted.map((item) => {
@@ -91,11 +93,11 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
                   <div className="flex items-center gap-2">
                     <span className="font-medium text-sm">{item.rawName}</span>
                     {item.quantity && <span className="text-xs text-muted-foreground">{item.quantity}{item.unit ? ` ${item.unit}` : ""}</span>}
-                    {expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expired</span>}
+                    {expired && <span className="text-xs text-destructive flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expired")}</span>}
-                    {expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />Expires in {days}d</span>}
+                    {expiring && !expired && <span className="text-xs text-orange-500 flex items-center gap-1"><AlertTriangle className="h-3 w-3" />{t("expiresInDays", { days })}</span>}
                   </div>
                   {item.expiresAt && !expired && !expiring && (
-                    <p className="text-xs text-muted-foreground">Expires {new Date(item.expiresAt).toLocaleDateString()}</p>
+                    <p className="text-xs text-muted-foreground">{t("expiresOn", { date: new Date(item.expiresAt).toLocaleDateString() })}</p>
                   )}
                 </div>
                 <button onClick={() => remove(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">

apps/web/components/pantry/pantry-page-header.tsx

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 
 export function PantryPageHeader() {
   const t = useTranslations("pantry");
+  const tCommon = useTranslations("common");
   return (
     <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
       <div>
@@ -20,7 +21,7 @@ export function PantryPageHeader() {
         </Link>
         <a href="/print/pantry" target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
           <Printer className="h-4 w-4" />
-          Print
+          {tCommon("print")}
         </a>
       </div>
     </div>

apps/web/messages/en.json

@@ -506,7 +506,24 @@
   "pantry": {
     "title": "Pantry",
     "subtitle": "Track what you have on hand",
-    "canCook": "What can I cook?"
+    "canCook": "What can I cook?",
+    "itemNamePlaceholder": "Item name",
+    "qtyPlaceholder": "Qty",
+    "unitPlaceholder": "Unit",
+    "add": "Add",
+    "addFailed": "Failed to add",
+    "removeFailed": "Failed to remove",
+    "empty": "No pantry items yet.",
+    "expired": "Expired",
+    "expiresInDays": "Expires in {days}d",
+    "expiresOn": "Expires {date}",
+    "printItemCountSingular": "{count} item",
+    "printItemCountPlural": "{count} items",
+    "noItems": "No items in pantry.",
+    "colItem": "Item",
+    "colQuantity": "Quantity",
+    "colExpires": "Expires",
+    "expiredDaysAgo": "Expired {days}d ago"
   },
   "feed": {
     "title": "Feed",

apps/web/messages/fr.json

@@ -494,7 +494,24 @@
   "pantry": {
     "title": "Garde-manger",
     "subtitle": "Suivez ce que vous avez en stock",
-    "canCook": "Que puis-je cuisiner ?"
+    "canCook": "Que puis-je cuisiner ?",
+    "itemNamePlaceholder": "Nom de l'article",
+    "qtyPlaceholder": "Qté",
+    "unitPlaceholder": "Unité",
+    "add": "Ajouter",
+    "addFailed": "Échec de l'ajout",
+    "removeFailed": "Échec de la suppression",
+    "empty": "Aucun article dans le garde-manger.",
+    "expired": "Expiré",
+    "expiresInDays": "Expire dans {days}j",
+    "expiresOn": "Expire le {date}",
+    "printItemCountSingular": "{count} article",
+    "printItemCountPlural": "{count} articles",
+    "noItems": "Aucun article dans le garde-manger.",
+    "colItem": "Article",
+    "colQuantity": "Quantité",
+    "colExpires": "Expire",
+    "expiredDaysAgo": "Expiré il y a {days}j"
   },
   "feed": {
     "title": "Fil d'actualité",