feat: 6 new per-tier feature flags (off by default) + flag-icon locale switcher + hide BYOK when disabled (v0.74.0)

Extends the existing feature-flags system (previously 3 keys, all
default-enabled) with 6 more: recipe_import_url, recipe_import_photo,
nutrition_estimation, markdown_export, weekly_nutrition,
grocery_delivery. Each FEATURE_DEFINITIONS entry now carries its own
defaultEnabled -- the new 6 default to false, the original 3 stay
true -- so no migration/seed was needed for the "off by default"
requirement, just a per-key fallback instead of a blanket true.

Gated server-side (requireFeatureEnabledResponse, a new shared
helper avoiding six copies of the same try/catch) on: import-url,
import-photo, nutrition POST estimate, bulk markdown export, weekly
meal-plan nutrition GET, Instacart export. Gated client-side by
hiding the trigger entirely (not just disabling) on every page that
renders one: recipe detail (meal/drink pairing buttons, nutrition
panel's estimate button, markdown export), recipes list (import-URL
button, including the OS Share Target auto-import path), new-recipe
page (photo import), meal-plan page (markdown export, weekly
nutrition bar), shopping-list/collection/pantry pages (markdown
export), shopping-list page (Instacart button, now gated by both the
existing env-var check AND the tier flag).

Also: BYOK section on Settings -> AI now hidden entirely for
non-BYOK users (previously showed a locked-and-teased notice, same
inconsistency the Model Prefs fix closed yesterday). Language
switcher shows a flag icon (FlagGB/FlagFR, moved from
components/marketing to components/shared so both the logged-in
settings switcher and the logged-out marketing one can use it)
instead of plain "English"/"Français" text-only options.

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

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 keep its button visible but gated — clicking it shows an upgrade prompt instead of running.
+          Disable a feature for a tier to hide it for that tier&apos;s users (most features hide entirely; a few show a locked/upgrade state instead — see each feature&apos;s actual behavior in the app).
         </p>
       </div>
 

apps/web/components/marketing/language-switcher.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { MARKETING_LOCALE_COOKIE } from "@/lib/marketing-locale-cookie";
 import type { Locale } from "@/lib/i18n/provider";
-import { FlagGB, FlagFR } from "./flag-icons";
+import { FlagGB, FlagFR } from "@/components/shared/flag-icons";
 
 const OPTIONS: { code: Locale; Flag: typeof FlagGB; label: string }[] = [
   { code: "en", Flag: FlagGB, label: "English" },

apps/web/components/pantry/pantry-page-header.tsx

@@ -9,7 +9,7 @@ import { pantryToMarkdown } from "@/lib/markdown/pantry";
 
 type PantryItem = { rawName: string; quantity: string | null; unit: string | null; expiresAt: string | null };
 
-export function PantryPageHeader({ items }: { items: PantryItem[] }) {
+export function PantryPageHeader({ items, canExportMarkdown = true }: { items: PantryItem[]; canExportMarkdown?: boolean }) {
   const t = useTranslations("pantry");
   const tCommon = useTranslations("common");
   return (
@@ -27,7 +27,7 @@ export function PantryPageHeader({ items }: { items: PantryItem[] }) {
           <Printer className="h-4 w-4" />
           {tCommon("print")}
         </a>
-        <ExportMarkdownButton markdown={pantryToMarkdown({ items })} filename="pantry" />
+        {canExportMarkdown && <ExportMarkdownButton markdown={pantryToMarkdown({ items })} filename="pantry" />}
       </div>
     </div>
   );

apps/web/components/recipe/nutrition-panel.tsx

@@ -20,9 +20,13 @@ interface NutritionPanelProps {
   recipeId: string;
   initialData?: NutritionData | null;
   initialManual?: boolean;
+  /** AI/USDA estimation feature toggled off for this tier — hides the
+   * (re-)estimate action. Previously-stored data (manual or a past
+   * estimate) still displays; there's just no button to refresh it. */
+  estimateEnabled?: boolean;
 }
 
-export function NutritionPanel({ recipeId, initialData, initialManual }: NutritionPanelProps) {
+export function NutritionPanel({ recipeId, initialData, initialManual, estimateEnabled = true }: NutritionPanelProps) {
   const t = useTranslations("nutritionPanel");
   const [nutrition, setNutrition] = useState<NutritionData | null>(initialData ?? null);
   const [manual, setManual] = useState(!!initialManual);
@@ -50,6 +54,7 @@ export function NutritionPanel({ recipeId, initialData, initialManual }: Nutriti
   }
 
   if (!nutrition && !loading) {
+    if (!estimateEnabled) return null;
     return (
       <div className="flex flex-col gap-2">
         {error && <p className="text-sm text-destructive">{error}</p>}
@@ -65,15 +70,17 @@ export function NutritionPanel({ recipeId, initialData, initialManual }: Nutriti
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
           <CardTitle className="text-base">{t("title")}</CardTitle>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleEstimate}
-            disabled={loading}
-            className="text-xs text-muted-foreground"
-          >
-            {loading ? t("estimating") : manual ? t("estimateInsteadButton") : t("reEstimateButton")}
-          </Button>
+          {estimateEnabled && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleEstimate}
+              disabled={loading}
+              className="text-xs text-muted-foreground"
+            >
+              {loading ? t("estimating") : manual ? t("estimateInsteadButton") : t("reEstimateButton")}
+            </Button>
+          )}
         </div>
         {manual && !loading && (
           <p className="text-xs text-muted-foreground">{t("manualBadge")}</p>

apps/web/components/recipe/recipes-header.tsx

@@ -88,6 +88,7 @@ export function RecipesHeader({
   initialBatchCook = "",
   initialRecipeType = "",
   sharedUrl,
+  showImportUrl = true,
 }: {
   count: number;
   initialQuery?: string;
@@ -103,6 +104,9 @@ export function RecipesHeader({
    * Auto-opens the import dialog pre-filled instead of requiring the user
    * to paste the link again. */
   sharedUrl?: string;
+  /** Tier feature flag (recipe_import_url) — hides the button and dialog
+   * entirely when off, not just disabled. */
+  showImportUrl?: boolean;
 }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -160,10 +164,12 @@ export function RecipesHeader({
               <Sparkles className="h-4 w-4" />
               {t("generate")}
             </Button>
-            <Button variant="outline" size="sm" className="gap-1.5" onClick={() => setUrlOpen(true)}>
-              <Link2 className="h-4 w-4" />
-              {t("importUrl")}
-            </Button>
+            {showImportUrl && (
+              <Button variant="outline" size="sm" className="gap-1.5" onClick={() => setUrlOpen(true)}>
+                <Link2 className="h-4 w-4" />
+                {t("importUrl")}
+              </Button>
+            )}
             <Link href="/recipes/new" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "gap-1.5")}>
               <PlusCircle className="h-4 w-4" />
               <span className="hidden sm:inline">{t("new")}</span>

apps/web/components/settings/settings-form.tsx

@@ -10,8 +10,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Switch } from "@/components/ui/switch";
 import { useTranslations } from "next-intl";
 import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";
+import { FlagGB, FlagFR } from "@/components/shared/flag-icons";
 import { AvatarUploader } from "./avatar-uploader";
 
+const LOCALE_FLAGS: Record<Locale, typeof FlagGB> = { en: FlagGB, fr: FlagFR };
+
 const USERNAME_PATTERN = /^[a-z0-9_]{3,20}$/;
 
 type UserProps = {
@@ -282,11 +285,17 @@ export function SettingsForm({ user }: { user: UserProps }) {
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {SUPPORTED_LOCALES.map((l) => (
-              <SelectItem key={l.code} value={l.code}>
-                {l.label}
-              </SelectItem>
-            ))}
+            {SUPPORTED_LOCALES.map((l) => {
+              const Flag = LOCALE_FLAGS[l.code];
+              return (
+                <SelectItem key={l.code} value={l.code}>
+                  <span className="flex items-center gap-2">
+                    <Flag className="h-3 w-4 rounded-[2px]" />
+                    {l.label}
+                  </span>
+                </SelectItem>
+              );
+            })}
           </SelectContent>
         </Select>
       </section>