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/admin/feature-flags-form.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Switch } from "@/components/ui/switch";
+
+type Tier = "free" | "pro" | "family";
+
+type FeatureDef = { key: string; label: string; description: string };
+
+type Matrix = Record<string, Record<Tier, boolean>>;
+
+const TIER_LABELS: Record<Tier, string> = { free: "Free", pro: "Pro", family: "Family" };
+const TIERS: Tier[] = ["free", "pro", "family"];
+
+export function FeatureFlagsForm({
+  features,
+  initialMatrix,
+}: {
+  features: FeatureDef[];
+  initialMatrix: Matrix;
+}) {
+  const [matrix, setMatrix] = useState<Matrix>(initialMatrix);
+  const [saving, setSaving] = useState<string | null>(null);
+
+  async function toggle(featureKey: string, tier: Tier, enabled: boolean) {
+    const cellKey = `${featureKey}:${tier}`;
+    setSaving(cellKey);
+    const prev = matrix[featureKey]![tier];
+    setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: enabled } }));
+    try {
+      const res = await fetch("/api/v1/admin/feature-flags", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ featureKey, tier, enabled }),
+      });
+      if (!res.ok) throw new Error();
+    } catch {
+      setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: prev } }));
+      toast.error("Failed to update feature flag");
+    } finally {
+      setSaving(null);
+    }
+  }
+
+  return (
+    <section className="rounded-xl border p-6 space-y-4">
+      <div>
+        <h2 className="font-semibold text-lg">Feature Toggles</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Disable a feature for a tier to keep its button visible but gated — clicking it shows an upgrade prompt instead of running.
+        </p>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left border-b">
+              <th className="py-2 pr-4 font-medium text-muted-foreground">Feature</th>
+              {TIERS.map((tier) => (
+                <th key={tier} className="py-2 px-4 font-medium text-muted-foreground text-center">{TIER_LABELS[tier]}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((f) => (
+              <tr key={f.key} className="border-b last:border-0">
+                <td className="py-3 pr-4">
+                  <p className="font-medium">{f.label}</p>
+                  <p className="text-xs text-muted-foreground">{f.description}</p>
+                </td>
+                {TIERS.map((tier) => (
+                  <td key={tier} className="py-3 px-4 text-center">
+                    <Switch
+                      checked={matrix[f.key]?.[tier] ?? true}
+                      disabled={saving === `${f.key}:${tier}`}
+                      onCheckedChange={(checked) => { void toggle(f.key, tier, checked); }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

apps/web/components/premium/upgrade-dialog.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { Sparkles } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+
+export function UpgradeDialog({
+  open,
+  onOpenChange,
+  featureKey,
+  featureLabel,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  featureKey: string;
+  featureLabel: string;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            A Pro feature
+          </DialogTitle>
+          <DialogDescription>
+            {featureLabel} is available on the Pro plan (€4.99/mo). Free accounts don&apos;t include it.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="sm:justify-start">
+          <Link
+            href={`/support?upgrade=${encodeURIComponent(featureKey)}`}
+            className={cn(buttonVariants({ variant: "default" }))}
+          >
+            I&apos;m interested — let us know
+          </Link>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf } from "lucide-react";
+import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf, Lock } from "lucide-react";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
+import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
 
 type Drink = {
   name: string;
@@ -45,9 +46,10 @@ const TYPE_LABEL_KEY: Record<Drink["type"], string> = {
   hot: "drinksTypeHot",
 };
 
-export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
+export function DrinkPairingButton({ recipeId, locked = false }: { recipeId: string; locked?: boolean }) {
   const t = useTranslations("recipe");
   const [open, setOpen] = useState(false);
+  const [upgradeOpen, setUpgradeOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [drinks, setDrinks] = useState<Drink[]>([]);
 
@@ -72,6 +74,10 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
   }
 
   function handleOpen() {
+    if (locked) {
+      setUpgradeOpen(true);
+      return;
+    }
     setOpen(true);
     if (drinks.length === 0) suggest();
   }
@@ -81,14 +87,22 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={handleOpen} aria-label={t("drinksTooltip")}>
+            <Button variant="ghost" size="icon" onClick={handleOpen} aria-label={t("drinksTooltip")} className="relative">
               <Wine 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("drinksTooltip")}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
 
+      <UpgradeDialog
+        open={upgradeOpen}
+        onOpenChange={setUpgradeOpen}
+        featureKey="drink_pairing"
+        featureLabel="Drink pairing"
+      />
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>

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>

apps/web/components/recipe/variations-button.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { GitBranch } from "lucide-react";
+import { GitBranch, Lock } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { VariationsDialog } from "./variations-dialog";
+import { UpgradeDialog } from "@/components/premium/upgrade-dialog";
 
 export function VariationsButton({
   recipeId,
@@ -15,6 +16,7 @@ export function VariationsButton({
   cookMins,
   ingredients,
   steps,
+  locked = false,
 }: {
   recipeId: string;
   baseServings: number;
@@ -23,17 +25,26 @@ export function VariationsButton({
   cookMins?: number | null;
   ingredients: Array<{ rawName: string; quantity?: string | number | null; unit?: string | null; note?: string | null; order: number }>;
   steps: Array<{ instruction: string; timerSeconds?: number | null; order: number }>;
+  locked?: boolean;
 }) {
   const t = useTranslations("recipe");
   const [open, setOpen] = useState(false);
+  const [upgradeOpen, setUpgradeOpen] = useState(false);
 
   return (
     <>
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("variationsTooltip")}>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => (locked ? setUpgradeOpen(true) : setOpen(true))}
+              aria-label={t("variationsTooltip")}
+              className="relative"
+            >
               <GitBranch 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("variationsTooltip")}</TooltipContent>
@@ -50,6 +61,12 @@ export function VariationsButton({
         open={open}
         onOpenChange={setOpen}
       />
+      <UpgradeDialog
+        open={upgradeOpen}
+        onOpenChange={setUpgradeOpen}
+        featureKey="recipe_variations"
+        featureLabel="Recipe variations"
+      />
     </>
   );
 }

apps/web/components/support/support-manager.tsx

@@ -60,11 +60,17 @@ function isImage(contentType: string) {
   return contentType.startsWith("image/");
 }
 
-export function SupportManager({ initialTickets }: { initialTickets: Ticket[] }) {
+export function SupportManager({
+  initialTickets,
+  prefill,
+}: {
+  initialTickets: Ticket[];
+  prefill?: { type: TicketType; title: string };
+}) {
   const t = useTranslations("support");
   const [tickets, setTickets] = useState<Ticket[]>(initialTickets);
-  const [type, setType] = useState<TicketType>("bug");
-  const [title, setTitle] = useState("");
+  const [type, setType] = useState<TicketType>(prefill?.type ?? "bug");
+  const [title, setTitle] = useState(prefill?.title ?? "");
   const [description, setDescription] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);