refactor: shopping list rename/delete — direct buttons instead of "..." menu

This was the actual menu being reported (a prior fix mistakenly targeted
the per-item category dropdown instead, reverted). Replaced the single
MoreVertical dropdown trigger (rename + delete hidden behind it) with two
directly visible icon buttons + tooltips, matching the recipe detail
page's icon-row convention. Used on both the shopping-lists index rows
and the list detail page header, unchanged at both call sites since only
the component's internals changed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-10 11:57:20 +02:00
parent 5d2cad255c
commit 521ecce68f
@@ -3,15 +3,10 @@
import { useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { MoreVertical, Pencil, Trash2 } from "lucide-react"; import { Pencil, Trash2 } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@@ -96,30 +91,45 @@ export function ShoppingListActionsMenu({ listId, name, onRenamed, onDeleted, re
} }
} }
// Rows on the index page are wrapped in a Link — stop the click from bubbling to it
// and prevent the anchor's default navigation.
function stopRowNavigation(e: React.MouseEvent) {
e.preventDefault();
e.stopPropagation();
}
return ( return (
<> <>
<DropdownMenu> <TooltipProvider>
<DropdownMenuTrigger <div className={cn("flex items-center gap-1", className)}>
aria-label={t("actionsMenuLabel")} <Tooltip>
className={cn(buttonVariants({ variant: "ghost", size: "icon" }), className)} <TooltipTrigger render={
onClick={(e: React.MouseEvent) => { <Button
// Rows on the index page are wrapped in a Link — stop the click variant="ghost"
// from bubbling to it and prevent the anchor's default navigation. size="icon"
e.preventDefault(); aria-label={t("rename")}
e.stopPropagation(); onClick={(e: React.MouseEvent) => { stopRowNavigation(e); openRename(); }}
}} >
> <Pencil className="h-4 w-4" />
<MoreVertical className="h-4 w-4" /> </Button>
</DropdownMenuTrigger> } />
<DropdownMenuContent align="end"> <TooltipContent>{t("rename")}</TooltipContent>
<DropdownMenuItem onClick={openRename}> </Tooltip>
<Pencil className="h-4 w-4 mr-2" /> {t("rename")} <Tooltip>
</DropdownMenuItem> <TooltipTrigger render={
<DropdownMenuItem variant="destructive" onClick={() => setDeleteOpen(true)}> <Button
<Trash2 className="h-4 w-4 mr-2" /> {tCommon("delete")} variant="ghost"
</DropdownMenuItem> size="icon"
</DropdownMenuContent> aria-label={tCommon("delete")}
</DropdownMenu> onClick={(e: React.MouseEvent) => { stopRowNavigation(e); setDeleteOpen(true); }}
>
<Trash2 className="h-4 w-4" />
</Button>
} />
<TooltipContent>{tCommon("delete")}</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
<Dialog open={renameOpen} onOpenChange={setRenameOpen}> <Dialog open={renameOpen} onOpenChange={setRenameOpen}>
<DialogContent className="max-w-md"> <DialogContent className="max-w-md">