Update features and dependencies

apps/web/app/(app)/recipes/[id]/page.tsx

@@ -13,18 +13,21 @@ import { PrintButton } from "@/components/recipe/print-button";
 import { VersionHistoryButton } from "@/components/recipe/version-history-button";
 import { DeleteRecipeButton } from "@/components/recipe/delete-recipe-button";
 import { NutritionPanel } from "@/components/recipe/nutrition-panel";
+import { GenerateContentButton } from "@/components/recipe/generate-content-button";
 import { auth } from "@/lib/auth/server";
 import { db, recipes, ratings, favorites, avg } from "@epicure/db";
 import { and, eq, count } from "@epicure/db";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { ServingScaler } from "@/components/recipe/serving-scaler";
 import { FavoriteButton } from "@/components/social/favorite-button";
 import { RatingStars } from "@/components/social/rating-stars";
 import { CommentsSection } from "@/components/social/comments-section";
 import { getPublicUrl } from "@/lib/storage";
 import { cn } from "@/lib/utils";
+import { RecipeChatPanel } from "@/components/recipe/recipe-chat-panel";
 
 type Params = { params: Promise<{ id: string }> };
 
@@ -86,14 +89,30 @@ export default async function RecipePage({ params }: Params) {
       {/* Header */}
       <div className="space-y-4">
         <h1 className="text-3xl font-bold tracking-tight">{recipe.title}</h1>
+        <TooltipProvider>
         <div className="flex items-center gap-2 overflow-x-auto pb-0.5 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+            {recipe.steps.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger render={
+                  <Link href={`/recipes/${id}/cook`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
+                    <Play className="h-4 w-4" />
+                  </Link>
+                } />
+                <TooltipContent>Cook</TooltipContent>
+              </Tooltip>
+            )}
             <FavoriteButton recipeId={id} initialFavorited={isFavorited} />
             <MealPairingButton recipeId={id} />
             <DrinkPairingButton recipeId={id} />
             {recipe.visibility === "public" && (
-              <Link href={`/r/${id}`} target="_blank" className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}>
-                <ExternalLink className="h-4 w-4" />
-              </Link>
+              <Tooltip>
+                <TooltipTrigger render={
+                  <Link href={`/r/${id}`} target="_blank" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
+                    <ExternalLink className="h-4 w-4" />
+                  </Link>
+                } />
+                <TooltipContent>View publicly</TooltipContent>
+              </Tooltip>
             )}
             {recipe.ingredients.length > 0 && (
               <AddToShoppingListButton
@@ -107,7 +126,9 @@ export default async function RecipePage({ params }: Params) {
                 }))}
               />
             )}
-            <TranslateButton recipeId={id} />
+            {(!recipe.language || recipe.language !== (session.user as { locale?: string }).locale) && (
+              <TranslateButton recipeId={id} />
+            )}
             {recipe.ingredients.length > 0 && (
               <AdaptRecipeButton
                 recipeId={id}
@@ -133,20 +154,19 @@ export default async function RecipePage({ params }: Params) {
                 order: s.order,
               }))}
             />
-            {recipe.steps.length > 0 && (
-              <Link href={`/recipes/${id}/cook`} className={cn(buttonVariants({ variant: "default", size: "sm" }))}>
-                <Play className="h-4 w-4" />
-                Cook
-              </Link>
-            )}
             <PrintButton recipeId={id} />
             <VersionHistoryButton recipeId={id} />
-            <Link href={`/recipes/${id}/edit`} className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-              <Pencil className="h-4 w-4" />
-              Edit
-            </Link>
+            <Tooltip>
+              <TooltipTrigger render={
+                <Link href={`/recipes/${id}/edit`} className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
+                  <Pencil className="h-4 w-4" />
+                </Link>
+              } />
+              <TooltipContent>Edit</TooltipContent>
+            </Tooltip>
             <DeleteRecipeButton recipeId={id} />
         </div>
+        </TooltipProvider>
 
         {avgScore !== null && (
           <div className="flex items-center gap-2">
@@ -210,6 +230,24 @@ export default async function RecipePage({ params }: Params) {
 
       <Separator />
 
+      {/* Empty state */}
+      {recipe.ingredients.length === 0 && recipe.steps.length === 0 && (
+        <div className="flex flex-col items-center gap-4 py-12 text-center">
+          <p className="text-muted-foreground">No ingredients or steps yet.</p>
+          <div className="flex items-center gap-2">
+            <GenerateContentButton
+              recipeId={id}
+              title={recipe.title}
+              description={recipe.description}
+            />
+            <Link href={`/recipes/${id}/edit`} className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+              <Pencil className="h-4 w-4" />
+              Edit manually
+            </Link>
+          </div>
+        </div>
+      )}
+
       {/* Serving scaler + ingredients */}
       {recipe.ingredients.length > 0 && (
         <div className="space-y-4">
@@ -285,6 +323,8 @@ export default async function RecipePage({ params }: Params) {
           <CommentsSection recipeId={id} currentUserId={session.user.id} />
         </>
       )}
+
+      <RecipeChatPanel recipeId={id} recipeTitle={recipe.title} />
     </div>
   );
 }