Arnaud
1baf5ce20e
- Batch-cook indicator moved from next to the title into the icon row
alongside favorite/visibility (all three now get a tooltip, matching
the existing favorite-button pattern).
- Favorite button's tooltip text was hardcoded English ("Save"/
"Saved") instead of using the translation keys already used for its
aria-label.
- Shortened the batch-cook generate dialog's "Generating…" label
(fr.json edited by user) — the long text was the real cause of the
modal overlap, not the dialog structure.
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 ? tSocial("favoriteRemove") : tSocial("favoriteAdd")}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|