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/app/(app)/collections/[id]/page.tsx

@@ -1,11 +1,15 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
+import Link from "next/link";
+import { Printer } from "lucide-react";
 import { auth } from "@/lib/auth/server";
 import { db, collections, eq, and, or } from "@epicure/db";
 import { RecipeCard } from "@/components/recipe/recipe-card";
 import { ForkCollectionButton } from "@/components/collections/fork-collection-button";
 import { ShareCollectionButton } from "@/components/collections/share-collection-button";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 type Params = { params: Promise<{ id: string }> };
 
@@ -30,7 +34,7 @@ export default async function CollectionPage({ params }: Params) {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between gap-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{col.name}</h1>
           {col.description && <p className="text-muted-foreground mt-1">{col.description}</p>}
@@ -38,7 +42,13 @@ export default async function CollectionPage({ params }: Params) {
             {col.recipes.length} recipe{col.recipes.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          {col.recipes.length > 0 && (
+            <Link href={`/print/collection/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+              <Printer className="h-4 w-4" />
+              Export as PDF
+            </Link>
+          )}
           {isOwner && <ShareCollectionButton collectionId={id} />}
           {!isOwner && col.isPublic && (
             <ForkCollectionButton collectionId={id} />

apps/web/app/(app)/meal-plan/page.tsx

@@ -3,9 +3,10 @@ import { headers } from "next/headers";
 import Link from "next/link";
 import { ChevronLeft, ChevronRight, ShoppingCart, Printer } from "lucide-react";
 import { auth } from "@/lib/auth/server";
-import { db, mealPlans, recipes, eq, and, desc } from "@epicure/db";
+import { db, mealPlans, mealPlanMembers, recipes, eq, and, desc } from "@epicure/db";
 import { buttonVariants } from "@/components/ui/button";
 import { MealPlanner } from "@/components/meal-plan/meal-planner";
+import { ShareMealPlanButton } from "@/components/meal-plan/share-meal-plan-button";
 import { WeeklyNutritionBar } from "@/components/nutrition/weekly-nutrition-bar";
 import { cn } from "@/lib/utils";
 
@@ -47,7 +48,7 @@ export default async function MealPlanPage({
   const sunday = addWeeks(monday, 1);
   sunday.setDate(sunday.getDate() - 1);
 
-  const [plan, userRecipes] = await Promise.all([
+  const [plan, userRecipes, sharedMemberships] = await Promise.all([
     db.query.mealPlans.findFirst({
       where: and(eq(mealPlans.userId, session.user.id), eq(mealPlans.weekStart, weekStart)),
       with: {
@@ -61,6 +62,10 @@ export default async function MealPlanPage({
       orderBy: desc(recipes.updatedAt),
       columns: { id: true, title: true },
     }),
+    db.query.mealPlanMembers.findMany({
+      where: eq(mealPlanMembers.userId, session.user.id),
+      with: { mealPlan: { with: { user: true } } },
+    }),
   ]);
 
   const entries = (plan?.entries ?? []).map((e) => ({
@@ -76,12 +81,13 @@ export default async function MealPlanPage({
 
   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">Meal Plan</h1>
           <p className="text-muted-foreground mt-1">{label}</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <ShareMealPlanButton weekStart={weekStart} />
           <Link href="/shopping-lists" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
             <ShoppingCart className="h-4 w-4" />
             Shopping lists
@@ -101,6 +107,26 @@ export default async function MealPlanPage({
 
       <WeeklyNutritionBar weekStart={weekStart} />
       <MealPlanner weekStart={weekStart} initialEntries={entries} userRecipes={userRecipes} />
+
+      {sharedMemberships.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="text-sm font-semibold text-muted-foreground">Shared with you</h2>
+          <div className="space-y-2 max-w-lg">
+            {sharedMemberships.map((m) => (
+              <Link
+                key={m.id}
+                href={`/meal-plan/shared/${m.mealPlan.id}`}
+                className="flex items-center justify-between rounded-xl border p-4 hover:shadow-sm transition-shadow"
+              >
+                <div>
+                  <p className="font-medium">{`${m.mealPlan.user?.name ?? "Unknown"}'s plan`}</p>
+                  <p className="text-sm text-muted-foreground">Week of {m.mealPlan.weekStart} · {m.role}</p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

apps/web/app/(app)/meal-plan/shared/[mealPlanId]/page.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, mealPlans, recipes, eq, desc } from "@epicure/db";
+import { getMealPlanAccessById, canWriteMealPlan } from "@/lib/meal-plan-access";
+import { SharedMealPlanView } from "@/components/meal-plan/shared-meal-plan-view";
+
+type Params = { params: Promise<{ mealPlanId: string }> };
+
+export const metadata: Metadata = { title: "Shared Meal Plan" };
+
+export default async function SharedMealPlanPage({ params }: Params) {
+  const { mealPlanId } = await params;
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+
+  const access = await getMealPlanAccessById(mealPlanId, session.user.id);
+  if (!access) notFound();
+
+  const plan = await db.query.mealPlans.findFirst({
+    where: eq(mealPlans.id, mealPlanId),
+    with: { entries: { with: { recipe: true } }, user: true },
+  });
+  if (!plan) notFound();
+
+  const userRecipes = await db.query.recipes.findMany({
+    where: eq(recipes.authorId, session.user.id),
+    orderBy: desc(recipes.updatedAt),
+    columns: { id: true, title: true },
+  });
+
+  const canEdit = canWriteMealPlan(access.role);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">{`${plan.user?.name ?? "Shared"}'s Meal Plan`}</h1>
+        <p className="text-muted-foreground mt-1">Week of {plan.weekStart} · {access.role}</p>
+      </div>
+      <SharedMealPlanView
+        mealPlanId={mealPlanId}
+        canEdit={canEdit}
+        userRecipes={userRecipes}
+        initialEntries={plan.entries.map((e) => ({
+          id: e.id,
+          day: e.day,
+          mealType: e.mealType,
+          servings: e.servings,
+          recipe: e.recipe ? { id: e.recipe.id, title: e.recipe.title } : null,
+        }))}
+      />
+    </div>
+  );
+}

apps/web/app/(app)/recipes/[id]/page.tsx

@@ -149,7 +149,23 @@ export default async function RecipePage({ params }: Params) {
               }))}
             />
             <PrintButton recipeId={id} />
-            <VersionHistoryButton recipeId={id} />
+            <VersionHistoryButton
+              recipeId={id}
+              currentSnapshot={{
+                title: recipe.title,
+                description: recipe.description,
+                ingredients: recipe.ingredients.map((ing) => ({
+                  rawName: ing.rawName,
+                  quantity: ing.quantity,
+                  unit: ing.unit,
+                  note: ing.note,
+                })),
+                steps: recipe.steps.map((s) => ({
+                  instruction: s.instruction,
+                  timerSeconds: s.timerSeconds,
+                })),
+              }}
+            />
             <Tooltip>
               <TooltipTrigger render={
                 <Link href={`/recipes/${id}/edit`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>

apps/web/app/(app)/recipes/can-cook/page.tsx

@@ -8,6 +8,14 @@ import { CanCookContent } from "@/components/recipe/can-cook-content";
 
 export const metadata: Metadata = { title: "What can I cook?" };
 
+const EXPIRING_WITHIN_DAYS = 3;
+
+function isExpiringSoon(expiresAt: Date | null): boolean {
+  if (!expiresAt) return false;
+  const days = Math.ceil((expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
+  return days >= 0 && days <= EXPIRING_WITHIN_DAYS;
+}
+
 export default async function CanCookPage() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
@@ -27,6 +35,12 @@ export default async function CanCookPage() {
 
   const pantryKeys = new Set(pantry.map((p) => p.rawName.toLowerCase()));
 
+  const expiringSoonKeys = new Set(
+    pantry
+      .filter((p) => isExpiringSoon(p.expiresAt))
+      .map((p) => p.rawName.toLowerCase())
+  );
+
   const scored = userRecipes
     .filter((r) => r.ingredients.length > 0)
     .map((recipe) => {
@@ -37,6 +51,9 @@ export default async function CanCookPage() {
         .filter((ing) => !pantryKeys.has(ing.rawName.toLowerCase()))
         .map((ing) => ing.rawName)
         .slice(0, 5);
+      const usesExpiring = recipe.ingredients
+        .filter((ing) => expiringSoonKeys.has(ing.rawName.toLowerCase()))
+        .map((ing) => ing.rawName);
       const total = recipe.ingredients.length;
       const cover = recipe.photos?.find((p) => p.isCover) ?? recipe.photos?.[0];
       return {
@@ -50,9 +67,15 @@ export default async function CanCookPage() {
         total,
         pct: Math.round((matched / total) * 100),
         missing,
+        usesExpiring,
       };
     })
-    .sort((a, b) => b.pct - a.pct);
+    .sort((a, b) => {
+      if (a.usesExpiring.length > 0 !== b.usesExpiring.length > 0) {
+        return a.usesExpiring.length > 0 ? -1 : 1;
+      }
+      return b.pct - a.pct;
+    });
 
   return <CanCookContent pantryCount={pantry.length} scored={scored} />;
 }

apps/web/app/(app)/shopping-lists/[id]/page.tsx

@@ -4,10 +4,13 @@ import { headers } from "next/headers";
 import Link from "next/link";
 import { Printer } from "lucide-react";
 import { auth } from "@/lib/auth/server";
-import { db, shoppingLists, eq, and } from "@epicure/db";
+import { db, shoppingLists, eq } from "@epicure/db";
 import { ShoppingListView } from "@/components/meal-plan/shopping-list-view";
+import { ShareShoppingListButton } from "@/components/shopping-lists/share-shopping-list-button";
+import { GroceryExportButton } from "@/components/shopping-lists/grocery-export-button";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { getShoppingListAccess, canWriteShoppingList } from "@/lib/shopping-list-access";
 
 type Params = { params: Promise<{ id: string }> };
 
@@ -18,29 +21,39 @@ export default async function ShoppingListPage({ params }: Params) {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
 
+  const access = await getShoppingListAccess(id, session.user.id);
+  if (!access) notFound();
+
   const list = await db.query.shoppingLists.findFirst({
-    where: and(eq(shoppingLists.id, id), eq(shoppingLists.userId, session.user.id)),
+    where: eq(shoppingLists.id, id),
     with: { items: { orderBy: (t, { asc }) => [asc(t.aisle), asc(t.rawName)] } },
   });
-
   if (!list) notFound();
 
+  const canEdit = canWriteShoppingList(access.role);
+  const instacartEnabled = process.env["NEXT_PUBLIC_GROCERY_PROVIDER"] === "instacart";
+
   return (
     <div className="space-y-6 max-w-lg">
-      <div className="flex items-start justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{list.name}</h1>
           <p className="text-muted-foreground mt-1">
             {list.items.length} items{list.generatedAt ? " · Generated from meal plan" : ""}
           </p>
         </div>
-        <Link href={`/print/shopping-list/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-          <Printer className="h-4 w-4" />
-          Print
-        </Link>
+        <div className="flex flex-wrap items-center gap-2">
+          <GroceryExportButton listId={id} instacartEnabled={instacartEnabled} />
+          {access.role === "owner" && <ShareShoppingListButton listId={id} />}
+          <Link href={`/print/shopping-list/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+            <Printer className="h-4 w-4" />
+            Print
+          </Link>
+        </div>
       </div>
       <ShoppingListView
         listId={id}
+        readOnly={!canEdit}
         initialItems={list.items.map((i) => ({
           id: i.id,
           rawName: i.rawName,

apps/web/app/(app)/shopping-lists/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
-import { db, shoppingLists, eq, desc } from "@epicure/db";
+import { db, shoppingLists, shoppingListMembers, eq, desc } from "@epicure/db";
 import { ShoppingListsPageContent } from "@/components/shopping-lists/shopping-lists-page-content";
 
 export const metadata: Metadata = { title: "Shopping Lists" };
@@ -10,11 +10,17 @@ export default async function ShoppingListsPage() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
 
-  const lists = await db.query.shoppingLists.findMany({
-    where: eq(shoppingLists.userId, session.user.id),
-    orderBy: desc(shoppingLists.createdAt),
-    with: { items: { columns: { id: true, checked: true } } },
-  });
+  const [lists, memberships] = await Promise.all([
+    db.query.shoppingLists.findMany({
+      where: eq(shoppingLists.userId, session.user.id),
+      orderBy: desc(shoppingLists.createdAt),
+      with: { items: { columns: { id: true, checked: true } } },
+    }),
+    db.query.shoppingListMembers.findMany({
+      where: eq(shoppingListMembers.userId, session.user.id),
+      with: { list: { with: { user: true } } },
+    }),
+  ]);
 
   return (
     <ShoppingListsPageContent
@@ -25,6 +31,12 @@ export default async function ShoppingListsPage() {
         totalItems: list.items.length,
         checkedItems: list.items.filter((i) => i.checked).length,
       }))}
+      sharedLists={memberships.map((m) => ({
+        id: m.list.id,
+        name: m.list.name,
+        ownerName: m.list.user?.name ?? "Unknown",
+        role: m.role,
+      }))}
     />
   );
 }