Files
Epicure/apps/web/app/(app)/collections/[id]/page.tsx
T
Arnaud e5d1080fb9 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>
2026-07-02 12:13:00 +02:00

73 lines
2.8 KiB
TypeScript

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 }> };
export const metadata: Metadata = { title: "Collection" };
export default async function CollectionPage({ params }: Params) {
const { id } = await params;
const session = await auth.api.getSession({ headers: await headers() });
if (!session) return null;
const col = await db.query.collections.findFirst({
where: and(
eq(collections.id, id),
or(eq(collections.userId, session.user.id), eq(collections.isPublic, true))
),
with: { recipes: { with: { recipe: { with: { photos: true } } } } },
});
if (!col) notFound();
const isOwner = col.userId === session.user.id;
return (
<div className="space-y-6">
<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>}
<p className="text-sm text-muted-foreground mt-1">
{col.recipes.length} recipe{col.recipes.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
</p>
</div>
<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} />
)}
</div>
</div>
{col.recipes.length === 0 ? (
<div className="flex items-center justify-center h-48 border-2 border-dashed rounded-xl">
<p className="text-muted-foreground text-sm">No recipes in this collection yet.</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{col.recipes.map(({ recipe }) => (
recipe && <RecipeCard key={recipe.id} recipe={recipe} />
))}
</div>
)}
</div>
);
}