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>
This commit is contained in:
Arnaud
2026-07-19 19:16:03 +02:00
parent e8c687e53a
commit b1f745da66
20 changed files with 227 additions and 94 deletions
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users, Rss, UserPlus } from "lucide-react";
import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users, Rss, UserPlus, FolderOpen } from "lucide-react";
import { useTranslations } from "next-intl";
import type { RecipeResult as ExploreRecipeResult } from "@/app/(app)/explore/page";
import { RecipeGridCard, type GridCardRecipe } from "@/components/recipe/recipe-grid-card";
@@ -184,6 +184,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
const tCommon = useTranslations("common");
const tRecipe = useTranslations("recipe");
const tPeople = useTranslations("people");
const tCollections = useTranslations("collections");
const [inputValue, setInputValue] = useState(initialQuery);
const [query, setQuery] = useState(initialQuery);
@@ -512,7 +513,8 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
{/* Explore tabs — shown when no query */}
{!hasQuery && (
<>
<div className="flex gap-1 border-b">
<div className="flex items-center justify-between gap-2 border-b">
<div className="flex gap-1">
<button
onClick={() => setTab("discover")}
className={cn(
@@ -542,6 +544,14 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
{tFeed("forYou")}
</button>
</div>
<Link
href="/collections/explore"
className="pb-2 text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1.5 shrink-0"
>
<FolderOpen className="h-3.5 w-3.5" />
<span className="hidden sm:inline">{tCollections("exploreLink")}</span>
</Link>
</div>
{tab === "discover" && (
<>