From 0663d688c69e712a0f8e4c822bcbe44781fcff6d Mon Sep 17 00:00:00 2001
From: Cascade Bot <bot@cascade.dev>
Date: Tue, 17 Mar 2026 15:09:03 +0000
Subject: [PATCH] feat(dashboard): move webhook buttons below collapsible curl
 blocks

---
 .../components/projects/integration-form.tsx  | 46 ++++++++++---------
 .../projects/pm-wizard-common-steps.tsx       | 46 ++++++++++---------
 .../projects/pm-wizard-trello-steps.tsx       | 12 ++---
 3 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/web/src/components/projects/integration-form.tsx b/web/src/components/projects/integration-form.tsx
index df4be0cb..44d77551 100644
--- a/web/src/components/projects/integration-form.tsx
+++ b/web/src/components/projects/integration-form.tsx
@@ -246,6 +246,30 @@ function GitHubWebhookSection({ projectId }: { projectId: string }) {
 				</div>
 			)}
 
+			{/* curl instructions for manual GitHub webhook creation (collapsible) */}
+			<details className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-900/50 dark:bg-blue-900/20">
+				<summary className="flex items-start gap-2 cursor-pointer list-none">
+					<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+					<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
+						Manual webhook creation (alternative: if the button below doesn't work)
+					</p>
+				</summary>
+				<div className="space-y-2 mt-2">
+					<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
+						Use the following curl command to create the GitHub webhook manually. Requires a token
+						with <code>admin:repo_hook</code> scope.
+					</p>
+					<div className="relative rounded-md bg-muted border pl-6">
+						<div className="absolute top-2 right-2">
+							<CopyButton text={githubCurlCommand} />
+						</div>
+						<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
+							{githubCurlCommand}
+						</pre>
+					</div>
+				</div>
+			</details>
+
 			{/* Create webhook button */}
 			<div className="space-y-2">
 				<button
@@ -270,28 +294,6 @@ function GitHubWebhookSection({ projectId }: { projectId: string }) {
 					</p>
 				)}
 			</div>
-
-			{/* curl instructions for manual GitHub webhook creation */}
-			<div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 space-y-2 dark:border-blue-900/50 dark:bg-blue-900/20">
-				<div className="flex items-start gap-2">
-					<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
-					<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
-						Manual webhook creation (if the button above doesn't work)
-					</p>
-				</div>
-				<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
-					Use the following curl command to create the GitHub webhook manually. Requires a token
-					with <code>admin:repo_hook</code> scope.
-				</p>
-				<div className="relative rounded-md bg-muted border pl-6">
-					<div className="absolute top-2 right-2">
-						<CopyButton text={githubCurlCommand} />
-					</div>
-					<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
-						{githubCurlCommand}
-					</pre>
-				</div>
-			</div>
 		</div>
 	);
 }
diff --git a/web/src/components/projects/pm-wizard-common-steps.tsx b/web/src/components/projects/pm-wizard-common-steps.tsx
index ed755e1b..330ff73a 100644
--- a/web/src/components/projects/pm-wizard-common-steps.tsx
+++ b/web/src/components/projects/pm-wizard-common-steps.tsx
@@ -178,6 +178,30 @@ export function WebhookStep({
 				</div>
 			)}
 
+			{/* curl instructions for manual webhook creation (collapsible) */}
+			<details className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-900/50 dark:bg-blue-900/20">
+				<summary className="flex items-start gap-2 cursor-pointer list-none">
+					<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+					<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
+						Manual webhook creation (alternative: if the button below doesn't work)
+					</p>
+				</summary>
+				<div className="space-y-2 mt-2">
+					<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
+						Use the following curl command to create the {providerName} webhook manually with your
+						own credentials:
+					</p>
+					<div className="relative rounded-md bg-muted border pl-6">
+						<div className="absolute top-2 right-2">
+							<CopyButton text={curlCommand} />
+						</div>
+						<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
+							{curlCommand}
+						</pre>
+					</div>
+				</div>
+			</details>
+
 			<div className="space-y-2">
 				<div className="flex items-center gap-2">
 					<button
@@ -210,28 +234,6 @@ export function WebhookStep({
 					</p>
 				)}
 			</div>
-
-			{/* curl instructions for manual webhook creation */}
-			<div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 space-y-2 dark:border-blue-900/50 dark:bg-blue-900/20">
-				<div className="flex items-start gap-2">
-					<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
-					<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
-						Manual webhook creation (if the button above doesn't work)
-					</p>
-				</div>
-				<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
-					Use the following curl command to create the {providerName} webhook manually with your own
-					credentials:
-				</p>
-				<div className="relative rounded-md bg-muted border pl-6">
-					<div className="absolute top-2 right-2">
-						<CopyButton text={curlCommand} />
-					</div>
-					<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
-						{curlCommand}
-					</pre>
-				</div>
-			</div>
 		</div>
 	);
 }
diff --git a/web/src/components/projects/pm-wizard-trello-steps.tsx b/web/src/components/projects/pm-wizard-trello-steps.tsx
index 29cdd380..d381f370 100644
--- a/web/src/components/projects/pm-wizard-trello-steps.tsx
+++ b/web/src/components/projects/pm-wizard-trello-steps.tsx
@@ -84,6 +84,12 @@ export function TrelloCredentialsStep({
 
 	return (
 		<div className="space-y-4">
+			{state.isEditing && state.hasStoredCredentials && !state.trelloApiKey && (
+				<div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
+					<CheckCircle2 className="h-4 w-4 shrink-0" />
+					Credentials stored — enter new values below to replace them.
+				</div>
+			)}
 			<p className="text-xs text-muted-foreground">
 				Enter your Trello API credentials. These will be saved securely to the project.
 			</p>
@@ -109,12 +115,6 @@ export function TrelloCredentialsStep({
 					</a>
 				</p>
 			</div>
-			{state.isEditing && state.hasStoredCredentials && !state.trelloApiKey && (
-				<div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
-					<CheckCircle2 className="h-4 w-4 shrink-0" />
-					Credentials stored — enter new values above to replace them.
-				</div>
-			)}
 			<div className="space-y-2">
 				<Label>Authorization</Label>
 				{state.trelloToken ? (