fix: desktop nav ignored feature toggles; add chatbots toggle (v0.62.0)

Feature toggles (Settings -> Features) were filtered into
visibleNavItems but the desktop horizontal nav still mapped over the
raw NAV_ITEMS list, so hiding a feature only worked on mobile. Both
nav renders now read the same filtered list.

Also adds a Chatbots toggle covering the recipe cooking-chat panel
and the recipe-list cooking assistant, wired end-to-end (schema,
migration, feature-prefs lib, API route, settings form, i18n,
openapi).

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

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

@@ -35,6 +35,7 @@ import { CommentsSection } from "@/components/social/comments-section";
 import { getPublicUrl } from "@/lib/storage";
 import { cn, stripMarkdown } from "@/lib/utils";
 import { RecipeChatPanel } from "@/components/recipe/recipe-chat-panel";
+import { getFeaturePrefs } from "@/lib/feature-prefs";
 import { BatchCookSteps } from "@/components/recipe/batch-cook-steps";
 import { BatchCookDishes } from "@/components/recipe/batch-cook-dishes";
 import { KeepScreenAwake } from "@/components/recipe/keep-screen-awake";
@@ -71,7 +72,7 @@ export default async function RecipePage({ params }: Params) {
   const DIETARY_LABELS = m.recipe.dietary;
   const unitPref = (session.user as { unitPref?: string }).unitPref === "imperial" ? "imperial" : "metric";
 
-  const [recipe, ratingData, favoriteData, myRating, forkedFrom, myNote, dishCookLog, featureFlags] = await Promise.all([
+  const [recipe, ratingData, favoriteData, myRating, forkedFrom, myNote, dishCookLog, featureFlags, featurePrefs] = await Promise.all([
     db.query.recipes.findFirst({
       where: and(
         eq(recipes.id, id),
@@ -102,6 +103,7 @@ export default async function RecipePage({ params }: Params) {
       columns: { batchDishId: true, cookedAt: true },
     }),
     getFeatureFlagMatrix(),
+    getFeaturePrefs(session.user.id),
   ]);
 
   if (!recipe) notFound();
@@ -507,7 +509,7 @@ export default async function RecipePage({ params }: Params) {
       <Separator />
       <RecipeNotes recipeId={id} initialContent={myNote?.content ?? ""} />
 
-      <RecipeChatPanel recipeId={id} recipeTitle={recipe.title} />
+      {featurePrefs.chatbots && <RecipeChatPanel recipeId={id} recipeTitle={recipe.title} />}
     </div>
   );
 }

apps/web/app/(app)/recipes/page.tsx

@@ -9,6 +9,7 @@ import { RecipesEmptyState } from "@/components/recipe/recipes-empty-state";
 import { RecipesGrid } from "@/components/recipe/recipes-grid";
 import { CookingAssistantPanel } from "@/components/recipe/cooking-assistant-panel";
 import { getMessages } from "@/lib/i18n/server";
+import { getFeaturePrefs } from "@/lib/feature-prefs";
 
 export const metadata: Metadata = {};
 
@@ -40,6 +41,7 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
   const m = getMessages((session.user as { locale?: string }).locale);
+  const featurePrefs = await getFeaturePrefs(session.user.id);
 
   const { q, sort, visibility, difficulty, tag, page: pageParam, batchCook, recipeType } = await searchParams;
   const query = (q ?? "").trim().slice(0, 200);
@@ -160,7 +162,7 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
         </div>
       )}
 
-      <CookingAssistantPanel />
+      {featurePrefs.chatbots && <CookingAssistantPanel />}
     </div>
   );
 }

apps/web/app/api/v1/users/me/feature-prefs/route.ts

@@ -11,6 +11,7 @@ const PutSchema = z.object({
   shoppingLists: z.boolean().optional(),
   collections: z.boolean().optional(),
   messages: z.boolean().optional(),
+  chatbots: z.boolean().optional(),
 });
 
 export async function GET() {

apps/web/components/layout/nav.tsx

@@ -52,7 +52,7 @@ export function Nav() {
   // backend default — avoids a flash of items disappearing on load for the
   // (much more common) case where a user hasn't hidden anything.
   const [featurePrefs, setFeaturePrefs] = useState<FeaturePrefs>({
-    nutrition: true, pantry: true, mealPlan: true, shoppingLists: true, collections: true, messages: true,
+    nutrition: true, pantry: true, mealPlan: true, shoppingLists: true, collections: true, messages: true, chatbots: true,
   });
 
   useEffect(() => {
@@ -121,7 +121,7 @@ export function Nav() {
           <span>Epicure</span>
         </Link>
         <nav className="hidden md:flex items-center gap-1">
-          {NAV_ITEMS.map(({ href, key, icon: Icon }) => (
+          {visibleNavItems.map(({ href, key, icon: Icon }) => (
             <Link
               key={href}
               href={href}

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

@@ -7,7 +7,7 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import type { FeatureKey, FeaturePrefs } from "@/lib/feature-prefs";
 
-const FEATURES: FeatureKey[] = ["nutrition", "pantry", "mealPlan", "shoppingLists", "collections", "messages"];
+const FEATURES: FeatureKey[] = ["nutrition", "pantry", "mealPlan", "shoppingLists", "collections", "messages", "chatbots"];
 
 export function FeatureTogglesForm() {
   const t = useTranslations("settingsForm.featureToggles");

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.61.0";
+export const APP_VERSION = "0.62.0";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,16 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.62.0",
+    date: "2026-07-20 23:45",
+    added: [
+      "Settings → Features: new Chatbots toggle — hides both the recipe cooking-chat panel and the recipe-list cooking assistant when off.",
+    ],
+    fixed: [
+      "Feature toggles (Settings → Features) were only respected by the mobile hamburger menu — the desktop horizontal nav still showed every item regardless of your saved preferences. Both now read the same visibility list.",
+    ],
+  },
   {
     version: "0.61.0",
     date: "2026-07-20 23:15",

apps/web/lib/feature-prefs.ts

@@ -1,11 +1,11 @@
 import { db, userFeaturePrefs, eq } from "@epicure/db";
 
-export type FeatureKey = "nutrition" | "pantry" | "mealPlan" | "shoppingLists" | "collections" | "messages";
+export type FeatureKey = "nutrition" | "pantry" | "mealPlan" | "shoppingLists" | "collections" | "messages" | "chatbots";
 
 export type FeaturePrefs = Record<FeatureKey, boolean>;
 
 const DEFAULT_PREFS: FeaturePrefs = {
-  nutrition: true, pantry: true, mealPlan: true, shoppingLists: true, collections: true, messages: true,
+  nutrition: true, pantry: true, mealPlan: true, shoppingLists: true, collections: true, messages: true, chatbots: true,
 };
 
 /** No row yet means every feature defaults to on — same default the DB columns encode. */
@@ -15,5 +15,6 @@ export async function getFeaturePrefs(userId: string): Promise<FeaturePrefs> {
   return {
     nutrition: row.nutrition, pantry: row.pantry, mealPlan: row.mealPlan,
     shoppingLists: row.shoppingLists, collections: row.collections, messages: row.messages,
+    chatbots: row.chatbots,
   };
 }

apps/web/lib/openapi.ts

@@ -478,11 +478,12 @@ export function generateOpenApiSpec(): object {
   }));
   const FeaturePrefsRef = registry.register("FeaturePrefs", z.object({
     nutrition: z.boolean(), pantry: z.boolean(), mealPlan: z.boolean(),
-    shoppingLists: z.boolean(), collections: z.boolean(), messages: z.boolean(),
+    shoppingLists: z.boolean(), collections: z.boolean(), messages: z.boolean(), chatbots: z.boolean(),
   }).describe("Purely cosmetic — hides the feature from the user's own nav. Never restricts access to the underlying pages/routes."));
   const UpdateFeaturePrefsRef = registry.register("UpdateFeaturePrefs", z.object({
     nutrition: z.boolean().optional(), pantry: z.boolean().optional(), mealPlan: z.boolean().optional(),
     shoppingLists: z.boolean().optional(), collections: z.boolean().optional(), messages: z.boolean().optional(),
+    chatbots: z.boolean().optional(),
   }));
 
   const NutritionGoalsRef2 = registry.register("NutritionGoalsMe", z.object({

apps/web/messages/en.json

@@ -1428,7 +1428,9 @@
       "collections": "Collections",
       "collectionsDescription": "Organize recipes into collections.",
       "messages": "Messages",
-      "messagesDescription": "Direct messages with other cooks."
+      "messagesDescription": "Direct messages with other cooks.",
+      "chatbots": "Chatbots",
+      "chatbotsDescription": "AI cooking assistant and recipe chat."
     },
     "profile": "Profile",
     "changePhoto": "Change photo",

apps/web/messages/fr.json

@@ -1419,7 +1419,9 @@
       "collections": "Collections",
       "collectionsDescription": "Organisez vos recettes en collections.",
       "messages": "Messages",
-      "messagesDescription": "Messages directs avec d'autres cuisiniers."
+      "messagesDescription": "Messages directs avec d'autres cuisiniers.",
+      "chatbots": "Chatbots",
+      "chatbotsDescription": "Assistant de cuisine et chat sur les recettes."
     },
     "profile": "Profil",
     "changePhoto": "Changer la photo",

apps/web/package.json

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