feat: per-tier feature toggles for recipe variations/pairings (v0.50.0)

Admins can now disable specific AI features per tier from Admin > Tier
Limits — new feature_flags table (feature x tier -> enabled, defaulting
to true so adding a new gated feature never needs a backfill).

Covers recipe variations, drink pairing, and meal pairing to start.
When disabled for a user's tier, the button stays visible (with a small
lock badge) but opens an upgrade dialog instead of running; the API
route rejects the call server-side either way (requireFeatureEnabled,
re-reads tier from the DB rather than trusting the session's cache,
same rationale as checkAndIncrementTierLimit).

The upgrade dialog is informational only — no Stripe checkout exists
yet (STRIPE_PLAN.md is still just a plan) — its CTA links to /support
prefilled as an upgrade-interest suggestion.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/recipe/meal-pairing-button.tsx

@@ -4,7 +4,8 @@ import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
-import { UtensilsCrossed, Sparkles, Loader2, ChefHat, Salad, Wine, Cake, Sandwich, Soup, Check } from "lucide-react";
+import { UtensilsCrossed, Sparkles, Loader2, ChefHat, Salad, Wine, Cake, Sandwich, Soup, Check, Lock } from "lucide-react";
+import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -54,10 +55,11 @@ const DIFFICULTY_VARIANT = {
   hard: "destructive",
 } as const;
 
-export function MealPairingButton({ recipeId }: { recipeId: string }) {
+export function MealPairingButton({ recipeId, locked = false }: { recipeId: string; locked?: boolean }) {
   const t = useTranslations("recipe");
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [upgradeOpen, setUpgradeOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [selected, setSelected] = useState<Set<number>>(new Set());
   const [generatingProgress, setGeneratingProgress] = useState<{ current: number; total: number } | null>(null);
@@ -141,14 +143,32 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => { setOpen(true); if (pairings.length === 0) suggest(); }} aria-label={t("pairMealTooltip")}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                if (locked) { setUpgradeOpen(true); return; }
+                setOpen(true);
+                if (pairings.length === 0) suggest();
+              }}
+              aria-label={t("pairMealTooltip")}
+              className="relative"
+            >
               <UtensilsCrossed className="h-4 w-4" />
+              {locked && <Lock className="h-2.5 w-2.5 absolute bottom-1 right-1 text-muted-foreground" />}
             </Button>
           } />
           <TooltipContent>{t("pairMealTooltip")}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
+      <UpgradeDialog
+        open={upgradeOpen}
+        onOpenChange={setUpgradeOpen}
+        featureKey="meal_pairing"
+        featureLabel="Meal pairing"
+      />
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-5xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>