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:
@@ -3,15 +3,10 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { MoreVertical, Pencil, Trash2 } from "lucide-react";
|
||||
import { Pencil, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import {
|
||||
AlertDialog,
|
||||
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 (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
aria-label={t("actionsMenuLabel")}
|
||||
className={cn(buttonVariants({ variant: "ghost", size: "icon" }), className)}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
// Rows on the index page are wrapped in a Link — stop the click
|
||||
// from bubbling to it and prevent the anchor's default navigation.
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={openRename}>
|
||||
<Pencil className="h-4 w-4 mr-2" /> {t("rename")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem variant="destructive" onClick={() => setDeleteOpen(true)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" /> {tCommon("delete")}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<TooltipProvider>
|
||||
<div className={cn("flex items-center gap-1", className)}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label={t("rename")}
|
||||
onClick={(e: React.MouseEvent) => { stopRowNavigation(e); openRename(); }}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
} />
|
||||
<TooltipContent>{t("rename")}</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label={tCommon("delete")}
|
||||
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}>
|
||||
<DialogContent className="max-w-md">
|
||||
|
||||
Reference in New Issue
Block a user