Files
Epicure/apps/web/components/collections/fork-collection-button.tsx
T
Arnaud b1f745da66 fix: batch of collections/i18n/translate-button fixes (v0.53.1)
- Drag-reorder used verticalListSortingStrategy on a multi-column grid,
  which computes wrong transforms for grid reflow — swapped to
  rectSortingStrategy so cards actually animate live while dragging.
- Grip handle was rendered as a sibling of (not a descendant of) the
  `group` element its `group-hover:opacity-100` depended on, so it was
  permanently invisible. Fixed the DOM nesting and made it always
  partially visible instead of hover-only.
- common.edit was missing from both locales (not just French) —
  edit-collection-dialog.tsx was the first caller to hit it.
- Root cause of "generated in my language but Translate still shows":
  generate-meal, meal-plan/generate, and adapt never set recipes.language
  on the row they inserted, so the button's `!recipe.language || ...`
  check always fell back to "show it". Fixed at all three insert sites.
- Translate dialog was entirely hardcoded English (title, description,
  language names, buttons) despite i18n keys already existing for most of
  it — now uses them, plus new translated language-name keys.
- Recipe tags now render on the recipe detail page (previously grid-card
  only).
- Collection header actions converted to icon-only + tooltip, matching
  the recipe page's pattern instead of icon+label buttons.
- Collections list search now also matches recipe titles inside each
  collection, not just the collection's own name/description.
- Explore page links to /collections/explore next to its tabs.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-19 19:16:03 +02:00

47 lines
1.6 KiB
TypeScript

"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { GitFork } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { toast } from "sonner";
export function ForkCollectionButton({ collectionId }: { collectionId: string }) {
const t = useTranslations("collections");
const tSocial = useTranslations("social");
const [forking, setForking] = useState(false);
const router = useRouter();
async function handleFork() {
setForking(true);
try {
const res = await fetch(`/api/v1/collections/${collectionId}/fork`, { method: "POST" });
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? t("forkFailed"));
}
const { id } = await res.json() as { id: string };
toast.success(tSocial("collectionForked"));
router.push(`/collections/${id}`);
} catch (err) {
toast.error(err instanceof Error ? err.message : t("forkFailed"));
setForking(false);
}
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={
<Button variant="ghost" size="icon" onClick={() => { void handleFork(); }} disabled={forking} aria-label={t("forkCollection")}>
<GitFork className="h-4 w-4" />
</Button>
} />
<TooltipContent>{forking ? t("forking") : t("forkCollection")}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}