From 5cc4f1002db7f8a5e2e57ac6b849f9bd869c8e12 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Wed, 9 Sep 2026 19:50:10 +0530
Subject: [PATCH] feat(web): add provider model bulk toggle

Add a toggle that disables every built-in model for a provider and enables them again once all are hidden.\n\nBuilt with Codex.
---
 .../settings/ProviderModelsSection.test.ts    | 19 +++++++-
 .../settings/ProviderModelsSection.tsx        | 43 ++++++++++++++++---
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/ProviderModelsSection.test.ts b/apps/web/src/components/settings/ProviderModelsSection.test.ts
index 83adbeb97320..cbb95472da19 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.test.ts
+++ b/apps/web/src/components/settings/ProviderModelsSection.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vite-plus/test";
 import type { ServerProviderModel } from "@t3tools/contracts";
 
-import { groupModelsForDisplay } from "./ProviderModelsSection";
+import { groupModelsForDisplay, nextHiddenModelsForBulkToggle } from "./ProviderModelsSection";
 
 function model(slug: string, isCustom = false): ServerProviderModel {
   return { slug, name: slug, isCustom, capabilities: null };
@@ -21,3 +21,20 @@ describe("groupModelsForDisplay", () => {
     expect(display.map((entry) => entry.slug)).toEqual(["c", "d", "b", "custom", "a"]);
   });
 });
+
+describe("nextHiddenModelsForBulkToggle", () => {
+  it("hides every built-in model without hiding custom models", () => {
+    const models = [model("a"), model("b"), model("custom", true)];
+
+    expect(nextHiddenModelsForBulkToggle(models, ["a"])).toEqual(["a", "b"]);
+  });
+
+  it("shows every built-in model while preserving unrelated hidden entries", () => {
+    const models = [model("a"), model("b"), model("custom", true)];
+
+    expect(nextHiddenModelsForBulkToggle(models, ["a", "b", "legacy", "custom"])).toEqual([
+      "legacy",
+      "custom",
+    ]);
+  });
+});
diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index 7866578cfa4a..505a86ff0eac 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -96,6 +96,21 @@ export function groupModelsForDisplay<
   ];
 }
 
+export function nextHiddenModelsForBulkToggle(
+  models: ReadonlyArray<Pick<ServerProviderModel, "slug" | "isCustom">>,
+  hiddenModels: ReadonlyArray<string>,
+): string[] {
+  const builtInSlugs = models.filter((model) => !model.isCustom).map((model) => model.slug);
+  const builtInSlugSet = new Set(builtInSlugs);
+  const allBuiltInModelsHidden = builtInSlugs.every((slug) => hiddenModels.includes(slug));
+
+  if (allBuiltInModelsHidden) {
+    return hiddenModels.filter((slug) => !builtInSlugSet.has(slug));
+  }
+
+  return [...new Set([...hiddenModels, ...builtInSlugs])];
+}
+
 interface ProviderModelsSectionProps {
   /** Identifier used to namespace input ids within the DOM. */
   readonly instanceId: ProviderInstanceId;
@@ -181,6 +196,8 @@ export function ProviderModelsSection({
     (model) => !model.isCustom && hiddenModelSet.has(model.slug),
   ).length;
   const builtInModels = useMemo(() => models.filter((model) => !model.isCustom), [models]);
+  const allBuiltInModelsHidden =
+    builtInModels.length > 0 && builtInModels.every((model) => hiddenModelSet.has(model.slug));
   const showFilter = models.length > FILTER_THRESHOLD;
   const normalizedFilter = filter.trim().toLowerCase();
   const isFiltering = showFilter && normalizedFilter.length > 0;
@@ -502,11 +519,27 @@ export function ProviderModelsSection({
             aria-label="Filter models"
           />
         ) : null}
-        <span className="text-xs text-muted-foreground">
-          {models.length} model{models.length === 1 ? "" : "s"}
-          {favoriteCount > 0 ? ` · ${favoriteCount} favorite${favoriteCount === 1 ? "" : "s"}` : ""}
-          {hiddenCount > 0 ? ` · ${hiddenCount} hidden` : ""}
-        </span>
+        <div className="flex items-center gap-2">
+          {builtInModels.length > 0 ? (
+            <Button
+              type="button"
+              size="xs"
+              variant="ghost-muted"
+              onClick={() =>
+                onHiddenModelsChange(nextHiddenModelsForBulkToggle(models, hiddenModels))
+              }
+            >
+              {allBuiltInModelsHidden ? "Enable all" : "Disable all"}
+            </Button>
+          ) : null}
+          <span className="text-xs text-muted-foreground">
+            {models.length} model{models.length === 1 ? "" : "s"}
+            {favoriteCount > 0
+              ? ` · ${favoriteCount} favorite${favoriteCount === 1 ? "" : "s"}`
+              : ""}
+            {hiddenCount > 0 ? ` · ${hiddenCount} hidden` : ""}
+          </span>
+        </div>
       </div>
       <div
         ref={listRef}