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
@@ -16,7 +16,7 @@ import {
import {
SortableContext,
useSortable,
verticalListSortingStrategy,
rectSortingStrategy,
arrayMove,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
@@ -49,6 +49,7 @@ function SortableRecipeCard({
onToggle: () => void;
dragDisabled: boolean;
}) {
const t = useTranslations("collections");
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: recipe.id,
disabled: dragDisabled,
@@ -60,7 +61,7 @@ function SortableRecipeCard({
<div
ref={setNodeRef}
style={style}
className={cn("relative", selectMode && "cursor-pointer", isDragging && "z-10 opacity-70")}
className={cn("relative group", selectMode && "cursor-pointer", isDragging && "z-10 opacity-70")}
onClick={selectMode ? onToggle : undefined}
>
{selectMode && (
@@ -74,18 +75,20 @@ function SortableRecipeCard({
</div>
)}
{!selectMode && !dragDisabled && (
// Always at least partly visible (not hover-only) — a fully hidden-until-hover
// handle is exactly what made dragging undiscoverable before.
<button
type="button"
{...attributes}
{...listeners}
className="absolute top-2 right-2 z-10 h-6 w-6 rounded-md bg-background/90 border shadow-sm flex items-center justify-center text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity"
className="absolute top-2 right-2 z-10 h-6 w-6 rounded-md bg-background/90 border shadow-sm flex items-center justify-center text-muted-foreground cursor-grab active:cursor-grabbing opacity-60 group-hover:opacity-100 hover:text-foreground hover:border-foreground/30 transition-opacity"
onClick={(e) => e.preventDefault()}
aria-label="Drag to reorder"
aria-label={t("dragToReorder")}
>
<GripVertical className="h-3.5 w-3.5" />
</button>
)}
<div className={cn("group", selectMode && "pointer-events-none", selectMode && selected && "rounded-xl ring-2 ring-primary")}>
<div className={cn(selectMode && "pointer-events-none", selectMode && selected && "rounded-xl ring-2 ring-primary")}>
{selectMode ? (
<RecipeGridCard recipe={recipe} />
) : (
@@ -207,7 +210,7 @@ export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }:
<p className="text-sm text-muted-foreground py-8 text-center">{t("noRecipeSearchResults")}</p>
) : (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext items={filtered.map((r) => r.id)} strategy={verticalListSortingStrategy}>
<SortableContext items={filtered.map((r) => r.id)} strategy={rectSortingStrategy}>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{filtered.map((recipe) => (
<SortableRecipeCard