feat: implement remaining TODO.md feature ideas + fix mobile headers

Implements the six previously-unscoped feature ideas plus a mobile
layout fix reported via screenshot:

- Mobile: Recipes/Collections/Pantry/Meal Plan/Shopping Lists headers
  now stack and wrap instead of clipping buttons on narrow viewports.
- Recipe diff/compare view: word/list diff against any past version,
  next to Restore in version history.
- Shared meal plans & shopping lists: new shoppingListMembers/
  mealPlanMembers tables (viewer/editor roles, mirrors
  collectionMembers), share dialogs, membership-checked routes.
- PDF cookbook export: /print/collection/[id] renders a whole
  collection with page breaks, using the existing print-CSS pattern
  instead of adding a PDF rendering dependency.
- Grocery delivery handoff: shopping lists can copy-as-text (works
  today) or send to Instacart once INSTACART_API_KEY is configured
  (stub adapter — real API needs a partner agreement).
- Personalized "For You" feed tab: ranks public recipes by tag/
  dietary overlap with the user's favorited/highly-rated history.
- PWA: added manifest.json + icons on top of the existing service
  worker so the app is installable; cook-mode pages were already
  cached for offline use.

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

apps/web/components/shopping-lists/grocery-export-button.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { ShoppingBag, Copy, ExternalLink } from "lucide-react";
+import { toast } from "sonner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import type { GroceryExportPayload } from "@/lib/grocery-export";
+import { groceryExportToText } from "@/lib/grocery-export";
+
+interface Props {
+  listId: string;
+  /** Set when NEXT_PUBLIC_GROCERY_PROVIDER=instacart — otherwise only "copy as text" is offered. */
+  instacartEnabled: boolean;
+}
+
+export function GroceryExportButton({ listId, instacartEnabled }: Props) {
+  const [loading, setLoading] = useState(false);
+
+  async function fetchPayload(): Promise<GroceryExportPayload | null> {
+    const res = await fetch(`/api/v1/shopping-lists/${listId}/export`);
+    if (!res.ok) {
+      toast.error("Could not build export");
+      return null;
+    }
+    return res.json() as Promise<GroceryExportPayload>;
+  }
+
+  async function handleCopy() {
+    setLoading(true);
+    try {
+      const payload = await fetchPayload();
+      if (!payload) return;
+      await navigator.clipboard.writeText(groceryExportToText(payload));
+      toast.success("List copied to clipboard");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleInstacart() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/shopping-lists/${listId}/export/instacart`, { method: "POST" });
+      if (!res.ok) {
+        toast.error("Instacart isn't configured yet");
+        return;
+      }
+      const { url } = await res.json() as { url: string };
+      window.open(url, "_blank");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={
+        <Button variant="outline" size="sm" disabled={loading}>
+          <ShoppingBag className="h-4 w-4" />
+          Send to grocery delivery
+        </Button>
+      } />
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => void handleCopy()}>
+          <Copy className="h-4 w-4" />
+          Copy list as text
+        </DropdownMenuItem>
+        {instacartEnabled && (
+          <DropdownMenuItem onClick={() => void handleInstacart()}>
+            <ExternalLink className="h-4 w-4" />
+            Send to Instacart
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/web/components/shopping-lists/share-shopping-list-button.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { UserPlus, X } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+
+type Role = "viewer" | "editor";
+
+interface Member {
+  id: string;
+  userId: string;
+  role: Role;
+  createdAt: string;
+  user: {
+    name: string;
+    username: string | null;
+    avatarUrl: string | null;
+  };
+}
+
+interface Props {
+  listId: string;
+}
+
+export function ShareShoppingListButton({ listId }: Props) {
+  const [open, setOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<Role>("viewer");
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [inviting, setInviting] = useState(false);
+
+  async function fetchMembers() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/shopping-lists/${listId}/members`);
+      if (!res.ok) throw new Error("Failed to load members");
+      const data = await res.json() as Member[];
+      setMembers(data);
+    } catch {
+      toast.error("Could not load members");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next);
+    if (next) {
+      void fetchMembers();
+    } else {
+      setEmail("");
+      setRole("viewer");
+    }
+  }
+
+  async function handleInvite() {
+    if (!email.trim()) {
+      toast.error("Enter an email address");
+      return;
+    }
+    setInviting(true);
+    try {
+      const res = await fetch(`/api/v1/shopping-lists/${listId}/members`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email.trim(), role }),
+      });
+      if (res.status === 409) { toast.error("Already a member"); return; }
+      if (res.status === 404) { toast.error("User not found"); return; }
+      if (!res.ok) { toast.error("Could not invite user"); return; }
+      toast.success("Invitation sent");
+      setEmail("");
+      await fetchMembers();
+    } catch {
+      toast.error("Could not invite user");
+    } finally {
+      setInviting(false);
+    }
+  }
+
+  async function handleRemove(memberId: string) {
+    try {
+      const res = await fetch(
+        `/api/v1/shopping-lists/${listId}/members?memberId=${memberId}`,
+        { method: "DELETE" },
+      );
+      if (!res.ok) { toast.error("Could not remove member"); return; }
+      setMembers((prev) => prev.filter((m) => m.id !== memberId));
+      toast.success("Member removed");
+    } catch {
+      toast.error("Could not remove member");
+    }
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
+        <UserPlus className="h-4 w-4" />
+        Share
+      </Button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Share shopping list</DialogTitle>
+            <DialogDescription>
+              Invite household members to view or edit this list.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex gap-2 mt-2">
+            <Input
+              type="email"
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
+              className="flex-1"
+            />
+            <Select value={role} onValueChange={(v) => setRole(v as Role)}>
+              <SelectTrigger className="w-28">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="viewer">Viewer</SelectItem>
+                <SelectItem value="editor">Editor</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button onClick={() => void handleInvite()} disabled={inviting}>
+              Invite
+            </Button>
+          </div>
+
+          <div className="mt-4 space-y-2">
+            {loading && (
+              <p className="text-sm text-muted-foreground">Loading members…</p>
+            )}
+            {!loading && members.length === 0 && (
+              <p className="text-sm text-muted-foreground">No members yet.</p>
+            )}
+            {members.map((m) => (
+              <div
+                key={m.id}
+                className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
+              >
+                <div className="flex-1 min-w-0">
+                  <span className="font-medium truncate">{m.user.name}</span>
+                  {m.user.username && (
+                    <span className="text-muted-foreground ml-1">
+                      @{m.user.username}
+                    </span>
+                  )}
+                </div>
+                <Badge variant={m.role === "editor" ? "default" : "secondary"}>
+                  {m.role}
+                </Badge>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0"
+                  onClick={() => void handleRemove(m.id)}
+                  aria-label="Remove member"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

apps/web/components/shopping-lists/shopping-lists-page-content.tsx

@@ -12,16 +12,24 @@ type ShoppingListItem = {
   checkedItems: number;
 };
 
-type Props = {
-  lists: ShoppingListItem[];
+type SharedListItem = {
+  id: string;
+  name: string;
+  ownerName: string;
+  role: "viewer" | "editor";
 };
 
-export function ShoppingListsPageContent({ lists }: Props) {
+type Props = {
+  lists: ShoppingListItem[];
+  sharedLists?: SharedListItem[];
+};
+
+export function ShoppingListsPageContent({ lists, sharedLists = [] }: Props) {
   const t = useTranslations("shoppingLists");
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
           <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
@@ -58,6 +66,26 @@ export function ShoppingListsPageContent({ lists }: Props) {
           ))}
         </div>
       )}
+
+      {sharedLists.length > 0 && (
+        <div className="space-y-3 max-w-lg">
+          <h2 className="text-sm font-semibold text-muted-foreground">Shared with you</h2>
+          {sharedLists.map((list) => (
+            <Link
+              key={list.id}
+              href={`/shopping-lists/${list.id}`}
+              className="flex items-center justify-between rounded-xl border p-4 hover:shadow-sm transition-shadow"
+            >
+              <div className="space-y-1">
+                <h3 className="font-semibold">{list.name}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {list.ownerName} · {list.role}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   );
 }