feat(web): add per-integration enable/disable toggle (#2364)

Co-authored-by: Carlos Florencio <carlosmflorencio@gmail.com>

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

@@ -4,10 +4,10 @@ import { useState, useCallback } from "react";
 import { IconBrandGithub, IconPlus, IconTrashX } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { Card, CardContent } from "@kandev/ui/card";
-import { Separator } from "@kandev/ui/separator";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import { useToast } from "@/components/toast-provider";
 import { SettingsSection } from "@/components/settings/settings-section";
+import { GitHubEnabledControl } from "@/components/github/github-enabled-control";
 import { GitHubAutomationSettings, GitHubPersonalSettings } from "./github-status";
 import { GitHubCallbackNotice } from "./github-callback-notice";
 import { ReviewWatchTable } from "./review-watch-table";
@@ -242,30 +242,30 @@ function useIssueWatchActions(workspaceId?: string | null) {
   };
 }
 
+/** Top-of-page GitHub settings: title + enable toggle, callback notice, and workspace credentials. */
 export function GitHubConnectionSection({ workspaceId }: { workspaceId: string }) {
   const { t } = useTranslation();
   return (
     <>
-      <div>
-        <h2
-          className="text-2xl font-bold flex items-center gap-2"
-          data-testid="github-integration-heading"
-        >
-          <IconBrandGithub className="h-6 w-6" />
-          {t("github:githubIntegration")}
-        </h2>
-        <p className="text-sm text-muted-foreground mt-1">
-          {t("github:chooseTheAutomationAndPersonalIdentities")}
-        </p>
-      </div>
-      <Separator />
-      <GitHubCallbackNotice workspaceId={workspaceId} />
       <SettingsSection
         discoveryTargetId={INTEGRATION_SETTINGS_TARGETS.github}
-        title={t("github:workspaceGithubAccess")}
-        description={t("github:credentialUsedForRepositorySyncWatches")}
+        icon={<IconBrandGithub className="h-5 w-5" />}
+        title={t("github:githubIntegration")}
+        titleTestId="github-integration-heading"
+        description={t("github:chooseTheAutomationAndPersonalIdentities")}
+        action={<GitHubEnabledControl />}
       >
-        <GitHubAutomationSettings workspaceId={workspaceId} />
+        <GitHubCallbackNotice workspaceId={workspaceId} />
+        <SettingsSection
+          title={t("github:workspaceGithubAccess")}
+          description={t("github:credentialUsedForRepositorySyncWatches")}
+        >
+          <Card data-testid="github-workspace-access-card">
+            <CardContent className="pt-6">
+              <GitHubAutomationSettings workspaceId={workspaceId} />
+            </CardContent>
+          </Card>
+        </SettingsSection>
       </SettingsSection>
       <div className="pr-16 sm:pr-0">
         <GitHubPersonalSettings workspaceId={workspaceId} />
@@ -298,6 +298,7 @@ type GitHubIntegrationPageProps = {
   workspaceId?: string;
 };
 
+/** GitHub's own settings page: resolves the active workspace, then renders its connection, review/issue watch, repo-scope, and automation sections. */
 export function GitHubIntegrationPage({ workspaceId }: GitHubIntegrationPageProps = {}) {
   return (
     <TooltipProvider>