Update features and dependencies

apps/web/components/meal-plan/meal-planner.tsx

@@ -7,6 +7,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useTranslations } from "next-intl";
 
 type Day = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";
@@ -130,6 +131,7 @@ export function MealPlanner({
   const [aiServings, setAiServings] = useState("2");
   const [usePantry, setUsePantry] = useState(true);
   const [pantryMode, setPantryMode] = useState(false);
+  const [aiDifficulty, setAiDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
   const t = useTranslations("mealPlan");
 
   async function generateWithAi() {
@@ -154,6 +156,7 @@ export function MealPlanner({
           servings: parseInt(aiServings) || 2,
           usePantry,
           pantryMode,
+          difficulty: aiDifficulty || undefined,
         }),
       });
       if (!res.ok) {
@@ -235,7 +238,7 @@ export function MealPlanner({
     <>
       {/* AI Generate button */}
       <div className="flex justify-end mb-4">
-        <Button variant="outline" size="sm" onClick={() => setShowAiModal(true)} className="gap-2">
+        <Button variant="ghost" size="sm" onClick={() => setShowAiModal(true)} className="gap-2">
           <Sparkles className="h-4 w-4" />
           {t("generateWithAi")}
         </Button>
@@ -329,16 +332,32 @@ export function MealPlanner({
                   disabled={aiGenerating}
                 />
               </div>
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium">{t("servings")}</label>
-                <Input
-                  type="number"
-                  min={1}
-                  max={20}
-                  value={aiServings}
-                  onChange={(e) => setAiServings(e.target.value)}
-                  disabled={aiGenerating}
-                />
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium">{t("servings")}</label>
+                  <Input
+                    type="number"
+                    min={1}
+                    max={20}
+                    value={aiServings}
+                    onChange={(e) => setAiServings(e.target.value)}
+                    disabled={aiGenerating}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium">Difficulty</label>
+                  <Select value={aiDifficulty} onValueChange={(v) => setAiDifficulty(v as typeof aiDifficulty)} disabled={aiGenerating}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Any" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">Any</SelectItem>
+                      <SelectItem value="easy">Easy</SelectItem>
+                      <SelectItem value="medium">Medium</SelectItem>
+                      <SelectItem value="hard">Hard</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
               <div className="space-y-2">
                 <label className="flex items-center gap-2 cursor-pointer select-none">