From 521ecce68fcc3d6cc376680c455d7458816d46e1 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Fri, 10 Jul 2026 11:57:20 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20shopping=20list=20rename/delete=20?=
 =?UTF-8?q?=E2=80=94=20direct=20buttons=20instead=20of=20"..."=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../shopping-list-actions-menu.tsx            | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/apps/web/components/shopping-lists/shopping-list-actions-menu.tsx b/apps/web/components/shopping-lists/shopping-list-actions-menu.tsx
index 79e7823..a2e1ce2 100644
--- a/apps/web/components/shopping-lists/shopping-list-actions-menu.tsx
+++ b/apps/web/components/shopping-lists/shopping-list-actions-menu.tsx
@@ -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">