Add a saved recipe to the collection or the wishlist so it can be rated

A recipe was previously a dead end: you could save one and see whether your bar
could make it, but there was no way to record that you had actually drunk it.

Promoting links rather than converts. A drink is created and Recipe.sourceDrinkId
is set to point at it, so the recipe survives and then renders on that drink's
page through the relation the drink detail view already reads. The wishlist path
creates a "try later" entry tagged source=recipe and leaves the recipe alone.

Both are idempotent. Promoting an already-linked recipe returns the existing
drink with a 200 rather than creating a second one, because pressing the button
twice is a double click and not a request for a duplicate. Creation and linking
happen in one transaction - a drink that existed but was not linked back would
show no recipe and would be promoted again on the next attempt.

The logic lives in src/lib/recipe-promotion.ts and is shared by the REST route
and the MCP tool, so the ownership check, the idempotency rule and the generated
description cannot drift apart.

Adding to drinks navigates straight to the rating page: being able to rate it is
the entire point, and an unrated cocktail is easy to lose in a list of 88. There
is no Toaster mounted in this app, so the wishlist path reports inline instead.

One MCP tool with a target parameter rather than two, since the tool list is
already at the point where selection quality suffers - 23 now. Gated on
drinks:write, not bar:write: it changes the collection, not the bar.

Verified: promote to drink then rate it, idempotency on both targets, the
recipe stays linked and undeleted, invalid target, unknown recipe, unauthenticated
access, read-only tokens, and that another user's recipe is refused identically
on both the REST route and the tool without confirming the row exists.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1Ee4Mc1X1SX8HgYa52zu7

src/components/bartender/recipe-card.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState } from "react"
+import Link from "next/link"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -13,6 +14,8 @@ import {
   Trash2,
   GlassWater,
   Loader2,
+  Star,
+  Clock,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { RecipeIngredient } from "@/hooks/use-bartender"
@@ -26,15 +29,20 @@ export interface RecipeCardData {
   glassware?: string | null
   notes?: string | null
   missingCount?: number
-  sourceDrink?: { name: string; type: string } | null
+  sourceDrink?: { id: string; name: string; type: string } | null
 }
 
+export type PromoteTarget = "drink" | "wishlist"
+
 interface RecipeCardProps {
   recipe: RecipeCardData
   onSave?: (recipe: RecipeCardData) => void
   onDelete?: (id: string) => void
+  onPromote?: (id: string, target: PromoteTarget) => void
   isSaving?: boolean
   isDeleting?: boolean
+  /** Which promotion is in flight for this card, if any. */
+  promoting?: PromoteTarget | null
   saved?: boolean
 }
 
@@ -42,8 +50,10 @@ export function RecipeCard({
   recipe,
   onSave,
   onDelete,
+  onPromote,
   isSaving,
   isDeleting,
+  promoting,
   saved,
 }: RecipeCardProps) {
   const [expanded, setExpanded] = useState(false)
@@ -189,6 +199,64 @@ export function RecipeCard({
             <p className="text-sm text-muted-foreground">{recipe.notes}</p>
           </div>
         )}
+
+        {/*
+          A recipe is instructions; a drink is the thing you have an opinion
+          about. Promoting links the two rather than converting, so the recipe
+          stays here and also shows on the drink's page.
+        */}
+        {saved && recipe.id && onPromote && (
+          <div className="flex flex-wrap gap-2 border-t pt-3">
+            {recipe.sourceDrink ? (
+              <Button asChild variant="secondary" size="sm">
+                <Link href={`/rate/${recipe.sourceDrink.id}`}>
+                  <Star className="mr-1.5 h-4 w-4" />
+                  Rate this
+                </Link>
+              </Button>
+            ) : (
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={!!promoting}
+                onClick={() => onPromote(recipe.id!, "drink")}
+              >
+                {promoting === "drink" ? (
+                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                ) : (
+                  <GlassWater className="mr-1.5 h-4 w-4" />
+                )}
+                Add to my drinks
+              </Button>
+            )}
+
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={!!promoting}
+              onClick={() => onPromote(recipe.id!, "wishlist")}
+            >
+              {promoting === "wishlist" ? (
+                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+              ) : (
+                <Clock className="mr-1.5 h-4 w-4" />
+              )}
+              Try later
+            </Button>
+          </div>
+        )}
+
+        {recipe.sourceDrink && (
+          <p className="text-xs text-muted-foreground">
+            In your drinks as{" "}
+            <Link
+              href={`/drinks/${recipe.sourceDrink.id}`}
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              {recipe.sourceDrink.name}
+            </Link>
+          </p>
+        )}
       </CardContent>
     </Card>
   )

src/components/bartender/saved-recipes-tab.tsx

@@ -1,15 +1,27 @@
 "use client"
 
-import { Skeleton } from "@/components/ui/skeleton"
-import { RecipeCard } from "./recipe-card"
-import { useRecipes, useDeleteRecipe } from "@/hooks/use-bartender"
-import { BookOpen } from "lucide-react"
 import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard, type PromoteTarget } from "./recipe-card"
+import {
+  useRecipes,
+  useDeleteRecipe,
+  usePromoteRecipe,
+} from "@/hooks/use-bartender"
+import { BookOpen } from "lucide-react"
 
 export function SavedRecipesTab() {
+  const router = useRouter()
   const { data, isLoading, error } = useRecipes()
   const deleteRecipe = useDeleteRecipe()
+  const promoteRecipe = usePromoteRecipe()
   const [deletingId, setDeletingId] = useState<string | null>(null)
+  const [promoting, setPromoting] = useState<{ id: string; target: PromoteTarget } | null>(null)
+  // There is no Toaster mounted in this app, so feedback is inline.
+  const [notice, setNotice] = useState<string | null>(null)
+  const [promoteError, setPromoteError] = useState<string | null>(null)
 
   const recipes = data?.recipes || []
 
@@ -23,6 +35,36 @@ export function SavedRecipesTab() {
     })
   }
 
+  function handlePromote(id: string, target: PromoteTarget) {
+    setNotice(null)
+    setPromoteError(null)
+    setPromoting({ id, target })
+
+    promoteRecipe.mutate(
+      { id, target },
+      {
+        onSuccess: (result) => {
+          if (result.target === "drink" && result.drink) {
+            // Straight to the rating page - being able to rate it is the whole
+            // point of adding it, and the drink is otherwise unrated and easy
+            // to lose track of.
+            router.push(`/rate/${result.drink.id}`)
+            return
+          }
+          setNotice(
+            result.existing
+              ? `${result.item?.name} is already on your wishlist.`
+              : `Added ${result.item?.name} to your wishlist.`
+          )
+        },
+        onError: (err: Error) => {
+          setPromoteError(err.message || "Could not add that. Please try again.")
+        },
+        onSettled: () => setPromoting(null),
+      }
+    )
+  }
+
   if (isLoading) {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -58,25 +100,46 @@ export function SavedRecipesTab() {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      {recipes.map((recipe) => (
-        <RecipeCard
-          key={recipe.id}
-          recipe={{
-            id: recipe.id,
-            title: recipe.title,
-            ingredients: recipe.ingredients,
-            steps: recipe.steps,
-            garnish: recipe.garnish,
-            glassware: recipe.glassware,
-            notes: recipe.notes,
-            sourceDrink: recipe.sourceDrink,
-          }}
-          onDelete={handleDelete}
-          isDeleting={deletingId === recipe.id}
-          saved
-        />
-      ))}
+    <div className="space-y-4">
+      {notice && (
+        <div className="rounded-md bg-primary/10 p-3 text-sm">
+          {notice}{" "}
+          <Link
+            href="/wishlist"
+            className="text-primary underline-offset-4 hover:underline"
+          >
+            View wishlist
+          </Link>
+        </div>
+      )}
+      {promoteError && (
+        <div className="rounded-md bg-destructive/10 p-3">
+          <p className="text-sm text-destructive">{promoteError}</p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {recipes.map((recipe) => (
+          <RecipeCard
+            key={recipe.id}
+            recipe={{
+              id: recipe.id,
+              title: recipe.title,
+              ingredients: recipe.ingredients,
+              steps: recipe.steps,
+              garnish: recipe.garnish,
+              glassware: recipe.glassware,
+              notes: recipe.notes,
+              sourceDrink: recipe.sourceDrink,
+            }}
+            onDelete={handleDelete}
+            onPromote={handlePromote}
+            isDeleting={deletingId === recipe.id}
+            promoting={promoting?.id === recipe.id ? promoting.target : null}
+            saved
+          />
+        ))}
+      </div>
     </div>
   )
 }