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:
@@ -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 ? (
|
||||
|
||||
@@ -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([
|
||||
|
||||
@@ -353,6 +353,14 @@ export default async function RecipePage({ params }: Params) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recipe.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{recipe.tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cover photo */}
|
||||
|
||||
Reference in New Issue
Block a user