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

This reverts commit 0022d807d00533a1c1374263bce66bde55583281.
---
 .../meal-plan/shopping-list-view.tsx          | 125 +++++++++---------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/apps/web/components/meal-plan/shopping-list-view.tsx b/apps/web/components/meal-plan/shopping-list-view.tsx
index a484ead..7f42b86 100644
--- a/apps/web/components/meal-plan/shopping-list-view.tsx
+++ b/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">
-          <Select
-            value={item.aisle ?? OTHER_KEY}
-            onValueChange={(v) => onChangeCategory(item, v === OTHER_KEY ? null : v)}
-          >
-            <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">
-              <SelectValue>
-                {(v: string) => <span className="truncate">{v === OTHER_KEY ? tShopping("aisleOther") : categoryLabel(v)}</span>}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent className="w-56">
-              {categoryOptions.map((category) => (
-                <SelectItem key={category} value={category}>{categoryLabel(category)}</SelectItem>
-              ))}
-              <SelectItem value={OTHER_KEY}>{tShopping("aisleOther")}</SelectItem>
-              <div className="flex items-center gap-1 p-1.5" onClick={(e) => e.stopPropagation()}>
-                <Input
-                  value={newCategory}
-                  onChange={(e) => setNewCategory(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && newCategory.trim()) {
-                      onChangeCategory(item, newCategory.trim());
-                      setNewCategory("");
-                    }
-                  }}
-                  placeholder={tShopping("newCategoryPlaceholder")}
-                  className="h-7 text-xs"
-                />
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="h-7 shrink-0 px-2 text-xs"
-                  disabled={!newCategory.trim()}
-                  onClick={() => { onChangeCategory(item, newCategory.trim()); setNewCategory(""); }}
-                >
-                  {tShopping("addCategory")}
-                </Button>
-              </div>
-            </SelectContent>
-          </Select>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger render={
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-destructive"
-                  aria-label={tShopping("deleteItem")}
-                  onClick={() => onDeleteRequest(item)}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              } />
-              <TooltipContent>{tShopping("deleteItem")}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger className="shrink-0 rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground">
+            <MoreVertical className="h-4 w-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>{tShopping("changeCategory")}</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="w-56">
+                {categoryOptions.map((category) => (
+                  <DropdownMenuItem key={category} onClick={() => onChangeCategory(item, category)}>
+                    {categoryLabel(category)}
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuItem onClick={() => onChangeCategory(item, null)}>
+                  {tShopping("aisleOther")}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <div className="flex items-center gap-1 p-1.5" onClick={(e) => e.stopPropagation()}>
+                  <Input
+                    value={newCategory}
+                    onChange={(e) => setNewCategory(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && newCategory.trim()) {
+                        onChangeCategory(item, newCategory.trim());
+                        setNewCategory("");
+                      }
+                    }}
+                    placeholder={tShopping("newCategoryPlaceholder")}
+                    className="h-7 text-xs"
+                  />
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 shrink-0 px-2 text-xs"
+                    disabled={!newCategory.trim()}
+                    onClick={() => { onChangeCategory(item, newCategory.trim()); setNewCategory(""); }}
+                  >
+                    {tShopping("addCategory")}
+                  </Button>
+                </div>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive" onClick={() => onDeleteRequest(item)}>
+              <Trash2 className="h-4 w-4" />
+              {tShopping("deleteItem")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       )}
     </div>
   );