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,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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user