feat: live updates on shared meal plans

Two separate components (the owner's own week view and collaborators'
shared view) hit two different API surfaces for the same underlying
entries, so neither ever saw the other's edits without a manual
reload. Both now poll a new lean GET on their respective entries
routes every 4s, merged with the same dirty-until-ref guard used for
shopping lists so a poll can't stomp an in-flight local edit.

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

apps/web/components/meal-plan/shared-meal-plan-view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { Trash2 } from "lucide-react";
@@ -38,6 +38,40 @@ export function SharedMealPlanView({
   const [entries, setEntries] = useState<Entry[]>(initialEntries);
   const [addingCell, setAddingCell] = useState<string | null>(null);
 
+  // Live updates: other collaborators (or the owner, via the separate
+  // MealPlanner component on their own /meal-plan page) can edit this same
+  // plan — poll and merge, guarding this tab's own in-flight edits, same
+  // pattern as shopping-list-view.tsx.
+  const dirtyUntilRef = useRef<Map<string, number>>(new Map());
+  const pendingDeleteIdsRef = useRef<Set<string>>(new Set());
+  const DIRTY_MS = 4000;
+
+  const markDirty = useCallback((id: string) => {
+    dirtyUntilRef.current.set(id, Date.now() + DIRTY_MS);
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries`)
+        .then((res) => (res.ok ? res.json() : null))
+        .then((data: { entries: Entry[] } | null) => {
+          if (!data) return;
+          const now = Date.now();
+          setEntries((prev) => {
+            const prevById = new Map(prev.map((e) => [e.id, e]));
+            return data.entries
+              .filter((s) => !pendingDeleteIdsRef.current.has(s.id))
+              .map((s) => {
+                const dirty = (dirtyUntilRef.current.get(s.id) ?? 0) > now;
+                return dirty ? (prevById.get(s.id) ?? s) : s;
+              });
+          });
+        })
+        .catch(() => {});
+    }, 4000);
+    return () => clearInterval(interval);
+  }, [mealPlanId]);
+
   function cellKey(day: Day, mealType: MealType) {
     return `${day}-${mealType}`;
   }
@@ -50,6 +84,7 @@ export function SharedMealPlanView({
     });
     if (!res.ok) { toast.error(t("addFailed")); return; }
     const { id } = await res.json() as { id: string };
+    markDirty(id);
     const recipe = userRecipes.find((r) => r.id === recipeId) ?? null;
     setEntries((prev) => [
       ...prev.filter((e) => !(e.day === day && e.mealType === mealType)),
@@ -59,10 +94,15 @@ export function SharedMealPlanView({
   }
 
   async function removeEntry(entry: Entry) {
+    pendingDeleteIdsRef.current.add(entry.id);
     const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries?entryId=${entry.id}`, {
       method: "DELETE",
     });
-    if (!res.ok) { toast.error(t("removeFailed")); return; }
+    if (!res.ok) {
+      pendingDeleteIdsRef.current.delete(entry.id);
+      toast.error(t("removeFailed"));
+      return;
+    }
     setEntries((prev) => prev.filter((e) => e.id !== entry.id));
   }