fix: remove lock-icon overlay from variations button, show Pro badge in tooltip instead (v0.78.3)

The lock icon overlapping the branch icon looked bad. Button is visible again when locked (not hidden) — click opens the upgrade dialog, tooltip shows a small "Pro" badge instead of an icon overlay.

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

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

@@ -232,27 +232,26 @@ export default async function RecipePage({ params }: Params) {
                 ingredients={recipe.ingredients.map((ing) => ({ rawName: ing.rawName }))}
               />
             )}
-            {!locked.variations && (
-              <VariationsButton
-                recipeId={id}
-                baseServings={recipe.baseServings}
-                difficulty={recipe.difficulty}
-                prepMins={recipe.prepMins}
-                cookMins={recipe.cookMins}
-                ingredients={recipe.ingredients.map((ing) => ({
-                  rawName: ing.rawName,
-                  quantity: ing.quantity,
-                  unit: ing.unit,
-                  note: ing.note,
-                  order: ing.order,
-                }))}
-                steps={recipe.steps.map((s) => ({
-                  instruction: s.instruction,
-                  timerSeconds: s.timerSeconds,
-                  order: s.order,
-                }))}
-              />
-            )}
+            <VariationsButton
+              recipeId={id}
+              baseServings={recipe.baseServings}
+              difficulty={recipe.difficulty}
+              prepMins={recipe.prepMins}
+              cookMins={recipe.cookMins}
+              ingredients={recipe.ingredients.map((ing) => ({
+                rawName: ing.rawName,
+                quantity: ing.quantity,
+                unit: ing.unit,
+                note: ing.note,
+                order: ing.order,
+              }))}
+              steps={recipe.steps.map((s) => ({
+                instruction: s.instruction,
+                timerSeconds: s.timerSeconds,
+                order: s.order,
+              }))}
+              locked={locked.variations}
+            />
             <ForkRecipeButton recipeId={id} variant={isOwner ? "duplicate" : "fork"} />
             <ShareRecipeButton recipeId={id} visibility={recipe.visibility} />
             <SaveOfflineButton recipeId={id} recipeTitle={recipe.title} />

apps/web/components/admin/feature-flags-form.tsx

@@ -48,7 +48,7 @@ export function FeatureFlagsForm({
       <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 hide it entirely for that tier&apos;s users.
+          Disable a feature for a tier to hide it for that tier&apos;s users (most features hide entirely; recipe variations instead shows a &quot;Pro&quot; badge in its tooltip and opens an upgrade prompt — see each feature&apos;s actual behavior in the app).
         </p>
       </div>
 

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

@@ -4,8 +4,10 @@ import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { GitBranch } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 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 +17,7 @@ export function VariationsButton({
   cookMins,
   ingredients,
   steps,
+  locked = false,
 }: {
   recipeId: string;
   baseServings: number;
@@ -23,20 +26,30 @@ 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")}
+            >
               <GitBranch className="h-4 w-4" />
             </Button>
           } />
-          <TooltipContent>{t("variationsTooltip")}</TooltipContent>
+          <TooltipContent className="flex items-center gap-1.5">
+            {t("variationsTooltip")}
+            {locked && <Badge variant="secondary" className="text-[10px] px-1 py-0 leading-4">Pro</Badge>}
+          </TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <VariationsDialog
@@ -50,6 +63,12 @@ export function VariationsButton({
         open={open}
         onOpenChange={setOpen}
       />
+      <UpgradeDialog
+        open={upgradeOpen}
+        onOpenChange={setUpgradeOpen}
+        featureKey="recipe_variations"
+        featureLabel="Recipe variations"
+      />
     </>
   );
 }

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.78.2";
+export const APP_VERSION = "0.78.3";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.78.3",
+    date: "2026-07-24 15:00",
+    fixed: [
+      "Recipe variations button: removed the small lock icon that overlapped the branch icon when the feature was locked for your tier. The button is visible again (clicking opens an upgrade prompt) and the tooltip now shows a \"Pro\" badge instead.",
+    ],
+  },
   {
     version: "0.78.2",
     date: "2026-07-24 14:30",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.78.2",
+  "version": "0.78.3",
   "private": true,
   "scripts": {
     "dev": "next dev",