Arnaud
a5661ef882
Favoriting already worked (heart toggle on the recipe detail page, DB table, API route) but there was nowhere to see what you'd favorited — the actual missing piece behind "add a favorites feature". - New /recipes/favorites page: paginated grid of favorited recipes (cover photo, difficulty, time, author), sorted by most-recently favorited. A previously-favorited recipe stays visible even if the author later goes private, matching the existing private-accounts scope decision (existing access isn't revoked, only new discovery is affected). - Unfavoriting from that page removes the card immediately — added an optional onToggle callback to FavoriteButton for this. - Added a lightweight "My Recipes / Favorites" tab pair at the top of /recipes linking between the two, rather than a new top-level nav item (nav is already at 8 entries). Deliberately out of scope: favorite toggles on the main recipe grid, feed cards, or search/explore results — favoriting your own recipes is odd UX, and wiring session-aware favorited state into the public (unauthenticated) search route is a separate, bigger change. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Heart } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function FavoriteButton({
|
|
recipeId,
|
|
initialFavorited = false,
|
|
onToggle,
|
|
}: {
|
|
recipeId: string;
|
|
initialFavorited?: boolean;
|
|
/** Called after a successful toggle, e.g. to remove the recipe from a "Favorites" list view. */
|
|
onToggle?: (favorited: boolean) => void;
|
|
}) {
|
|
const tCommon = useTranslations("common");
|
|
const tSocial = useTranslations("social");
|
|
const [favorited, setFavorited] = useState(initialFavorited);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function toggle() {
|
|
const next = !favorited;
|
|
setFavorited(next);
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/v1/recipes/${recipeId}/favorite`, {
|
|
method: next ? "POST" : "DELETE",
|
|
});
|
|
if (!res.ok) throw new Error();
|
|
onToggle?.(next);
|
|
} catch {
|
|
setFavorited(!next);
|
|
toast.error(tCommon("updateFailed"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={toggle}
|
|
disabled={loading}
|
|
aria-label={favorited ? tSocial("favoriteRemove") : tSocial("favoriteAdd")}
|
|
>
|
|
<Heart className={cn("h-4 w-4", favorited && "fill-red-500 text-red-500")} />
|
|
</Button>
|
|
} />
|
|
<TooltipContent>{favorited ? "Saved" : "Save"}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|