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>
This commit is contained in:
Arnaud
@@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { UserPlus, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
type Role = "viewer" | "editor";
|
||||
|
||||
interface Member {
|
||||
id: string;
|
||||
userId: string;
|
||||
role: Role;
|
||||
createdAt: string;
|
||||
user: {
|
||||
name: string;
|
||||
username: string | null;
|
||||
avatarUrl: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
weekStart: string;
|
||||
}
|
||||
|
||||
export function ShareMealPlanButton({ weekStart }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [role, setRole] = useState<Role>("viewer");
|
||||
const [members, setMembers] = useState<Member[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [inviting, setInviting] = useState(false);
|
||||
|
||||
async function fetchMembers() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/meal-plans/${weekStart}/members`);
|
||||
if (!res.ok) throw new Error("Failed to load members");
|
||||
const data = await res.json() as Member[];
|
||||
setMembers(data);
|
||||
} catch {
|
||||
toast.error("Could not load members");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOpenChange(next: boolean) {
|
||||
setOpen(next);
|
||||
if (next) {
|
||||
void fetchMembers();
|
||||
} else {
|
||||
setEmail("");
|
||||
setRole("viewer");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInvite() {
|
||||
if (!email.trim()) {
|
||||
toast.error("Enter an email address");
|
||||
return;
|
||||
}
|
||||
setInviting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/meal-plans/${weekStart}/members`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: email.trim(), role }),
|
||||
});
|
||||
if (res.status === 409) { toast.error("Already a member"); return; }
|
||||
if (res.status === 404) { toast.error("User not found"); return; }
|
||||
if (!res.ok) { toast.error("Could not invite user"); return; }
|
||||
toast.success("Invitation sent");
|
||||
setEmail("");
|
||||
await fetchMembers();
|
||||
} catch {
|
||||
toast.error("Could not invite user");
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemove(memberId: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/v1/meal-plans/${weekStart}/members?memberId=${memberId}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!res.ok) { toast.error("Could not remove member"); return; }
|
||||
setMembers((prev) => prev.filter((m) => m.id !== memberId));
|
||||
toast.success("Member removed");
|
||||
} catch {
|
||||
toast.error("Could not remove member");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Share
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Share this week's plan</DialogTitle>
|
||||
<DialogDescription>
|
||||
Invite household members to view or edit this week's meal plan.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Select value={role} onValueChange={(v) => setRole(v as Role)}>
|
||||
<SelectTrigger className="w-28">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="viewer">Viewer</SelectItem>
|
||||
<SelectItem value="editor">Editor</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button onClick={() => void handleInvite()} disabled={inviting}>
|
||||
Invite
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
{loading && (
|
||||
<p className="text-sm text-muted-foreground">Loading members…</p>
|
||||
)}
|
||||
{!loading && members.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No members yet.</p>
|
||||
)}
|
||||
{members.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{m.user.name}</span>
|
||||
{m.user.username && (
|
||||
<span className="text-muted-foreground ml-1">
|
||||
@{m.user.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={m.role === "editor" ? "default" : "secondary"}>
|
||||
{m.role}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 shrink-0"
|
||||
onClick={() => void handleRemove(m.id)}
|
||||
aria-label="Remove member"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
type Day = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";
|
||||
type MealType = "breakfast" | "lunch" | "dinner" | "snack";
|
||||
|
||||
const DAYS: Day[] = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
|
||||
const MEAL_TYPES: MealType[] = ["breakfast", "lunch", "dinner", "snack"];
|
||||
|
||||
type Entry = {
|
||||
id: string;
|
||||
day: Day;
|
||||
mealType: MealType;
|
||||
servings: number;
|
||||
recipe: { id: string; title: string } | null;
|
||||
};
|
||||
|
||||
type UserRecipe = { id: string; title: string };
|
||||
|
||||
export function SharedMealPlanView({
|
||||
mealPlanId,
|
||||
initialEntries,
|
||||
userRecipes,
|
||||
canEdit,
|
||||
}: {
|
||||
mealPlanId: string;
|
||||
initialEntries: Entry[];
|
||||
userRecipes: UserRecipe[];
|
||||
canEdit: boolean;
|
||||
}) {
|
||||
const [entries, setEntries] = useState<Entry[]>(initialEntries);
|
||||
const [addingCell, setAddingCell] = useState<string | null>(null);
|
||||
|
||||
function cellKey(day: Day, mealType: MealType) {
|
||||
return `${day}-${mealType}`;
|
||||
}
|
||||
|
||||
async function addEntry(day: Day, mealType: MealType, recipeId: string) {
|
||||
const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ day, mealType, recipeId, servings: 2 }),
|
||||
});
|
||||
if (!res.ok) { toast.error("Could not add recipe"); return; }
|
||||
const { id } = await res.json() as { id: string };
|
||||
const recipe = userRecipes.find((r) => r.id === recipeId) ?? null;
|
||||
setEntries((prev) => [
|
||||
...prev.filter((e) => !(e.day === day && e.mealType === mealType)),
|
||||
{ id, day, mealType, servings: 2, recipe },
|
||||
]);
|
||||
setAddingCell(null);
|
||||
}
|
||||
|
||||
async function removeEntry(entry: Entry) {
|
||||
const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries?entryId=${entry.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) { toast.error("Could not remove entry"); return; }
|
||||
setEntries((prev) => prev.filter((e) => e.id !== entry.id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse text-sm min-w-[640px]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-2 text-muted-foreground font-medium"></th>
|
||||
{DAYS.map((day) => (
|
||||
<th key={day} className="text-left p-2 text-muted-foreground font-medium capitalize">{day}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MEAL_TYPES.map((mealType) => (
|
||||
<tr key={mealType} className="border-t">
|
||||
<td className="p-2 text-muted-foreground font-medium capitalize align-top">{mealType}</td>
|
||||
{DAYS.map((day) => {
|
||||
const entry = entries.find((e) => e.day === day && e.mealType === mealType);
|
||||
const key = cellKey(day, mealType);
|
||||
return (
|
||||
<td key={key} className="p-2 align-top min-w-[120px]">
|
||||
{entry ? (
|
||||
<div className="flex items-start justify-between gap-1 rounded-lg border p-2">
|
||||
<span className="text-xs">{entry.recipe?.title ?? "—"}</span>
|
||||
{canEdit && (
|
||||
<Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => void removeEntry(entry)}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : canEdit ? (
|
||||
addingCell === key ? (
|
||||
<Select onValueChange={(v) => void addEntry(day, mealType, v as string)}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="Pick recipe" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{userRecipes.map((r) => (
|
||||
<SelectItem key={r.id} value={r.id}>{r.title}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<button
|
||||
className="w-full h-8 rounded-lg border border-dashed text-xs text-muted-foreground hover:bg-muted/30"
|
||||
onClick={() => setAddingCell(key)}
|
||||
>
|
||||
+ Add
|
||||
</button>
|
||||
)
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -20,9 +20,11 @@ type Item = {
|
||||
export function ShoppingListView({
|
||||
listId,
|
||||
initialItems,
|
||||
readOnly = false,
|
||||
}: {
|
||||
listId: string;
|
||||
initialItems: Item[];
|
||||
readOnly?: boolean;
|
||||
}) {
|
||||
const t = useTranslations("mealPlan");
|
||||
const tShopping = useTranslations("shoppingLists");
|
||||
@@ -54,6 +56,7 @@ export function ShoppingListView({
|
||||
}
|
||||
|
||||
async function toggleItem(item: Item) {
|
||||
if (readOnly) return;
|
||||
const next = !item.checked;
|
||||
setItems((prev) => prev.map((i) => i.id === item.id ? { ...i, checked: next } : i));
|
||||
await fetch(`/api/v1/shopping-lists/${listId}/items/${item.id}`, {
|
||||
@@ -97,7 +100,8 @@ export function ShoppingListView({
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => toggleItem(item)}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted/30 text-left transition-colors"
|
||||
disabled={readOnly}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted/30 text-left transition-colors disabled:cursor-default disabled:hover:bg-transparent"
|
||||
>
|
||||
<div className={cn(
|
||||
"h-5 w-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
|
||||
|
||||
Reference in New Issue
Block a user