Arnaud
eb424d8c04
Mobile:
- Recipes search bar full-width on mobile instead of capped narrow
- Cook mode ingredients panel stacks above the step instead of
squeezing it into a narrow column
- Version history Compare/Restore buttons wrap onto their own row
- Recipe edit ingredient fields wrap instead of forcing horizontal
scroll on narrow viewports
i18n: translates remaining hardcoded strings across recipes
filter/sort, adapt-recipe and AI variations dialogs, the full
settings section (sidebar + 6 sub-pages + BYOK/model-prefs/
API-keys/webhooks managers), explore tab, collections (new/fork/
share dialogs), meal planning (planner, AI generation phases, new
shopping list, shared-plan view), photo import, recipe bulk-select
toolbar, and recipe action-button tooltips. Also fixes the recipes
page subtitle, which wasn't just unworded but missing its {count}
interpolation entirely — it always rendered as the bare word
"results" regardless of how many recipes existed.
Feature: adds a ShareRecipeButton that copies the public /r/{id}
link to the clipboard, with a notice when the recipe isn't Public
yet.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
93 lines
3.2 KiB
TypeScript
93 lines
3.2 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");
|
|
const ts = useTranslations("shareDialog");
|
|
|
|
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">{t("sharedWithYou")}</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} · {ts(list.role)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|