Arnaud
8b749f432e
Every "nothing here" page had its own copy-pasted dashed-border box — icon + one muted line, inconsistent (some had a CTA, some didn't, no description text anywhere). Replaced with one shared EmptyState component: icon in a soft tinted circle, a real heading plus optional description, and primary/secondary actions (either a Link or an arbitrary action slot for things like "New Collection" that open a dialog rather than navigate). Applied to: recipes (no recipes / no search match), favorites, feed (no one followed / no new posts / trending / for-you), collections (index + detail), shopping lists, pantry, notifications, can-cook. Left the small inline "no trending"/"no recent" lines inside Explore's already-labeled sections and the notification-bell dropdown alone — different context, a full empty-state box would be heavier than the space warrants. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
import { headers } from "next/headers";
|
|
import Link from "next/link";
|
|
import { Printer, UtensilsCrossed } 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";
|
|
import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
import { collectionToMarkdown } from "@/lib/markdown/collection";
|
|
import { getMessages } from "@/lib/i18n/server";
|
|
|
|
type Params = { params: Promise<{ id: string }> };
|
|
|
|
export const metadata: Metadata = {};
|
|
|
|
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 m = getMessages((session.user as { locale?: string }).locale);
|
|
|
|
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" />
|
|
{m.collections.exportPdf}
|
|
</Link>
|
|
<ExportMarkdownButton
|
|
markdown={collectionToMarkdown({
|
|
name: col.name,
|
|
description: col.description,
|
|
recipes: col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : [])),
|
|
})}
|
|
filename={col.name}
|
|
/>
|
|
</>
|
|
)}
|
|
{isOwner && <ShareCollectionButton collectionId={id} />}
|
|
{!isOwner && col.isPublic && (
|
|
<ForkCollectionButton collectionId={id} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{col.recipes.length === 0 ? (
|
|
<EmptyState icon={UtensilsCrossed} title={m.collections.emptyCollection} compact />
|
|
) : (
|
|
<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>
|
|
);
|
|
}
|