Arnaud
e5d1080fb9
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>
92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import { ShoppingCart } from "lucide-react";
|
|
import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";
|
|
|
|
type ShoppingListItem = {
|
|
id: string;
|
|
name: string;
|
|
generatedAt: string | null;
|
|
totalItems: number;
|
|
checkedItems: number;
|
|
};
|
|
|
|
type SharedListItem = {
|
|
id: string;
|
|
name: string;
|
|
ownerName: string;
|
|
role: "viewer" | "editor";
|
|
};
|
|
|
|
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 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>
|
|
</div>
|
|
<NewShoppingListButton />
|
|
</div>
|
|
|
|
{lists.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
|
|
<ShoppingCart className="h-12 w-12 text-muted-foreground/40" />
|
|
<p className="text-muted-foreground text-sm">{t("empty")}</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 max-w-lg">
|
|
{lists.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">
|
|
<h2 className="font-semibold">{list.name}</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{list.totalItems === 0
|
|
? t("listEmpty")
|
|
: t("items", { checked: list.checkedItems, total: list.totalItems })}
|
|
{list.generatedAt && ` · ${t("generated")}`}
|
|
</p>
|
|
</div>
|
|
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-bold">
|
|
{list.totalItems === 0 ? "—" : `${Math.round((list.checkedItems / list.totalItems) * 100)}%`}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</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>
|
|
);
|
|
}
|