Arnaud
580d5bbf2f
- Added a heart toggle to all three recipe-grid views (grid card overlay, list row, compact row), hidden while in multi-select mode. Detail page already had it; this was the other place it made sense. - recipes/page.tsx now fetches which of the current page's recipes are already favorited and passes it through. - FavoriteButton gained an optional iconClassName so the unfavorited heart reads on a photo overlay (was invisible in light mode against the dark backdrop — filled/favorited state was already fine since it's opaque red). - Fixed the floating bulk-select action bar overflowing both edges of the viewport on mobile (screenshotted: centered with no max-width, wider than the screen, clipping "Supprimer" on one side and the selected-count label on the other). Now caps to viewport width, scrolls horizontally as a fallback, and drops button text labels below sm (icon + aria-label + tooltip only), matching the icon-row convention used elsewhere. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 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,
|
|
iconClassName,
|
|
}: {
|
|
recipeId: string;
|
|
initialFavorited?: boolean;
|
|
/** Called after a successful toggle, e.g. to remove the recipe from a "Favorites" list view. */
|
|
onToggle?: (favorited: boolean) => void;
|
|
/** Extra classes for the heart icon when unfavorited — e.g. forcing a light color when the button overlays a photo. */
|
|
iconClassName?: string;
|
|
}) {
|
|
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" : iconClassName)} />
|
|
</Button>
|
|
} />
|
|
<TooltipContent>{favorited ? "Saved" : "Save"}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|