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
+40 -33
View File
@@ -14,6 +14,7 @@ import { EditCollectionDialog } from "@/components/collections/edit-collection-d
import { DeleteCollectionDialog } from "@/components/collections/delete-collection-dialog";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
import { EmptyState } from "@/components/shared/empty-state";
@@ -71,40 +72,46 @@ export default async function CollectionPage({ params }: Params) {
</div>
)}
</div>
<div className="flex flex-wrap items-center gap-2">
{recipeList.length > 0 && (
<>
<Link href={`/print/collection/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
<Printer className="h-4 w-4" />
{m.collections.exportPdf}
</Link>
<ExportMarkdownButton
markdown={collectionToMarkdown({
name: col.name,
description: col.description,
recipes: recipeList,
})}
filename={col.name}
<TooltipProvider>
<div className="flex flex-wrap items-center gap-1">
{recipeList.length > 0 && (
<>
<Tooltip>
<TooltipTrigger render={
<Link href={`/print/collection/${id}`} target="_blank" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
<Printer className="h-4 w-4" />
</Link>
} />
<TooltipContent>{m.collections.exportPdf}</TooltipContent>
</Tooltip>
<ExportMarkdownButton
markdown={collectionToMarkdown({
name: col.name,
description: col.description,
recipes: recipeList,
})}
filename={col.name}
/>
</>
)}
{isOwner && <GenerateMealDialog collectionId={id} />}
{isOwner && <ShareCollectionButton collectionId={id} />}
{isOwner && (
<EditCollectionDialog
collectionId={id}
initialName={col.name}
initialDescription={col.description}
initialNotes={col.notes}
initialTags={col.tags}
initialIsPublic={col.isPublic}
/>
</>
)}
{isOwner && <GenerateMealDialog collectionId={id} />}
{isOwner && <ShareCollectionButton collectionId={id} />}
{isOwner && (
<EditCollectionDialog
collectionId={id}
initialName={col.name}
initialDescription={col.description}
initialNotes={col.notes}
initialTags={col.tags}
initialIsPublic={col.isPublic}
/>
)}
{isOwner && <DeleteCollectionDialog collectionId={id} />}
{!isOwner && col.isPublic && (
<ForkCollectionButton collectionId={id} />
)}
</div>
)}
{isOwner && <DeleteCollectionDialog collectionId={id} />}
{!isOwner && col.isPublic && (
<ForkCollectionButton collectionId={id} />
)}
</div>
</TooltipProvider>
</div>
{recipeList.length === 0 ? (
+12 -1
View File
@@ -19,7 +19,18 @@ export default async function CollectionsPage({
const query = q?.trim();
const where = query
? and(eq(collections.userId, session.user.id), or(ilike(collections.name, `%${query}%`), ilike(collections.description, `%${query}%`)))
? and(
eq(collections.userId, session.user.id),
or(
ilike(collections.name, `%${query}%`),
ilike(collections.description, `%${query}%`),
sql`exists (
select 1 from collection_recipes cr
inner join recipes r on r.id = cr.recipe_id
where cr.collection_id = ${collections.id} and r.title ilike ${`%${query}%`}
)`
)
)
: eq(collections.userId, session.user.id);
const [userCollections, countRows] = await Promise.all([