Update features and dependencies

apps/web/components/recipe/add-to-shopping-list-button.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { ShoppingCart, Loader2, Plus, Check } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import {
   Dialog,
   DialogContent,
@@ -111,10 +112,16 @@ export function AddToShoppingListButton({
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-        <ShoppingCart className="h-4 w-4" />
-        Add to list
-      </Button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+              <ShoppingCart className="h-4 w-4" />
+            </Button>
+          } />
+          <TooltipContent>Add to list</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-lg">
@@ -134,13 +141,13 @@ export function AddToShoppingListButton({
               <Label className="shrink-0">Servings</Label>
               <div className="flex items-center gap-2">
                 <Button
-                  type="button" variant="outline" size="icon" className="h-7 w-7"
+                  type="button" variant="ghost" size="icon" className="h-7 w-7"
                   onClick={() => setServings((s) => Math.max(1, s - 1))}
                   disabled={servings <= 1}
                 >−</Button>
                 <span className="w-8 text-center font-medium">{servings}</span>
                 <Button
-                  type="button" variant="outline" size="icon" className="h-7 w-7"
+                  type="button" variant="ghost" size="icon" className="h-7 w-7"
                   onClick={() => setServings((s) => s + 1)}
                 >+</Button>
               </div>
@@ -206,7 +213,7 @@ export function AddToShoppingListButton({
             <p className="text-xs text-muted-foreground">{items.length} ingredient{items.length !== 1 ? "s" : ""} will be added.</p>
 
             <div className="flex gap-2 justify-end">
-              <Button variant="outline" onClick={() => setOpen(false)} disabled={adding}>Cancel</Button>
+              <Button variant="ghost" onClick={() => setOpen(false)} disabled={adding}>Cancel</Button>
               <Button onClick={handleAdd} disabled={adding || loadingLists || (mode === "existing" && !selectedListId)}>
                 {adding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
                 {adding ? "Adding…" : "Add ingredients"}