Revert "refactor: shopping list item row — direct buttons instead of "..." overflow menu"

This reverts commit 0022d807d0.

apps/web/components/meal-plan/shopping-list-view.tsx

@@ -3,7 +3,7 @@
 import { useMemo, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
-import { Check, Package, Loader2, GripVertical, Trash2, Search, Sparkles } from "lucide-react";
+import { Check, Package, Loader2, GripVertical, MoreVertical, Trash2, Search, Sparkles } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -14,7 +14,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -615,12 +624,12 @@ type ItemRowProps = {
 function ItemRow({ item, readOnly, categoryOptions, categoryLabel, tShopping, onToggle, onChangeCategory, onDeleteRequest, dragHandle }: ItemRowProps) {
   const [newCategory, setNewCategory] = useState("");
   return (
-    <div className="w-full flex items-center gap-2 px-4 py-3 hover:bg-muted/30 transition-colors">
+    <div className="w-full flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors">
       {dragHandle}
       <button
         onClick={() => onToggle(item)}
         disabled={readOnly}
-        className="flex flex-1 min-w-0 items-center gap-3 text-left disabled:cursor-default"
+        className="flex flex-1 items-center gap-3 text-left disabled:cursor-default"
       >
         <div className={cn(
           "h-5 w-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
@@ -628,7 +637,7 @@ function ItemRow({ item, readOnly, categoryOptions, categoryLabel, tShopping, on
         )}>
           {item.checked && <Check className="h-3 w-3 text-primary-foreground" />}
         </div>
-        <span className={cn("flex-1 min-w-0 truncate text-sm", item.checked && "line-through text-muted-foreground")}>
+        <span className={cn("flex-1 text-sm", item.checked && "line-through text-muted-foreground")}>
           {item.rawName}
         </span>
         {item.inPantry && (
@@ -643,63 +652,55 @@ function ItemRow({ item, readOnly, categoryOptions, categoryLabel, tShopping, on
         )}
       </button>
       {!readOnly && (
-        <div className="flex items-center gap-1 shrink-0">
+        <DropdownMenu>
-          <Select
+          <DropdownMenuTrigger className="shrink-0 rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground">
-            value={item.aisle ?? OTHER_KEY}
+            <MoreVertical className="h-4 w-4" />
-            onValueChange={(v) => onChangeCategory(item, v === OTHER_KEY ? null : v)}
+          </DropdownMenuTrigger>
-          >
+          <DropdownMenuContent align="end">
-            <SelectTrigger className="h-7 max-w-28 border-none bg-transparent px-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground [&_svg]:size-3">
+            <DropdownMenuSub>
-              <SelectValue>
+              <DropdownMenuSubTrigger>{tShopping("changeCategory")}</DropdownMenuSubTrigger>
-                {(v: string) => <span className="truncate">{v === OTHER_KEY ? tShopping("aisleOther") : categoryLabel(v)}</span>}
+              <DropdownMenuSubContent className="w-56">
-              </SelectValue>
+                {categoryOptions.map((category) => (
-            </SelectTrigger>
+                  <DropdownMenuItem key={category} onClick={() => onChangeCategory(item, category)}>
-            <SelectContent className="w-56">
+                    {categoryLabel(category)}
-              {categoryOptions.map((category) => (
+                  </DropdownMenuItem>
-                <SelectItem key={category} value={category}>{categoryLabel(category)}</SelectItem>
+                ))}
-              ))}
+                <DropdownMenuItem onClick={() => onChangeCategory(item, null)}>
-              <SelectItem value={OTHER_KEY}>{tShopping("aisleOther")}</SelectItem>
+                  {tShopping("aisleOther")}
-              <div className="flex items-center gap-1 p-1.5" onClick={(e) => e.stopPropagation()}>
+                </DropdownMenuItem>
-                <Input
+                <DropdownMenuSeparator />
-                  value={newCategory}
+                <div className="flex items-center gap-1 p-1.5" onClick={(e) => e.stopPropagation()}>
-                  onChange={(e) => setNewCategory(e.target.value)}
+                  <Input
-                  onKeyDown={(e) => {
+                    value={newCategory}
-                    if (e.key === "Enter" && newCategory.trim()) {
+                    onChange={(e) => setNewCategory(e.target.value)}
-                      onChangeCategory(item, newCategory.trim());
+                    onKeyDown={(e) => {
-                      setNewCategory("");
+                      if (e.key === "Enter" && newCategory.trim()) {
-                    }
+                        onChangeCategory(item, newCategory.trim());
-                  }}
+                        setNewCategory("");
-                  placeholder={tShopping("newCategoryPlaceholder")}
+                      }
-                  className="h-7 text-xs"
+                    }}
-                />
+                    placeholder={tShopping("newCategoryPlaceholder")}
-                <Button
+                    className="h-7 text-xs"
-                  size="sm"
+                  />
-                  variant="ghost"
+                  <Button
-                  className="h-7 shrink-0 px-2 text-xs"
+                    size="sm"
-                  disabled={!newCategory.trim()}
+                    variant="ghost"
-                  onClick={() => { onChangeCategory(item, newCategory.trim()); setNewCategory(""); }}
+                    className="h-7 shrink-0 px-2 text-xs"
-                >
+                    disabled={!newCategory.trim()}
-                  {tShopping("addCategory")}
+                    onClick={() => { onChangeCategory(item, newCategory.trim()); setNewCategory(""); }}
-                </Button>
+                  >
-              </div>
+                    {tShopping("addCategory")}
-            </SelectContent>
+                  </Button>
-          </Select>
+                </div>
-          <TooltipProvider>
+              </DropdownMenuSubContent>
-            <Tooltip>
+            </DropdownMenuSub>
-              <TooltipTrigger render={
+            <DropdownMenuSeparator />
-                <Button
+            <DropdownMenuItem variant="destructive" onClick={() => onDeleteRequest(item)}>
-                  variant="ghost"
+              <Trash2 className="h-4 w-4" />
-                  size="icon"
+              {tShopping("deleteItem")}
-                  className="h-7 w-7 text-muted-foreground hover:text-destructive"
+            </DropdownMenuItem>
-                  aria-label={tShopping("deleteItem")}
+          </DropdownMenuContent>
-                  onClick={() => onDeleteRequest(item)}
+        </DropdownMenu>
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              } />
-              <TooltipContent>{tShopping("deleteItem")}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
       )}
     </div>
   );