Add MCP setup screen (#22468)

## Summary

- Add a first-tab MCP setup experience under MCP & APIs with quick
install cards, manual configuration, client logos, and HTTPS gating for
Claude install links.
- Rename API/Webhooks settings surfaces to MCP & APIs and update related
icons, permissions, breadcrumbs, and command menu entries.
- Add the Tabler sparkle-2 icon wrapper and MCP setup visual assets.

## Screenshots

| Before | After |
| --- | --- |
| ![Before: APIs & Webhooks MCP
tab](https://gist.githubusercontent.com/Bonapara/f8a97d31fbc3cab2771d18cbacd53d4c/raw/5838d123bc3aae3df0d37507b3e69135bec86444/before-mcp-settings.png)
| <img alt="image"
src="https://github.com/user-attachments/assets/a6ae2ae6-322b-4370-b9b6-0a3d73ff7fa7"
/> |

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22468?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx

@@ -23,6 +23,7 @@ import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { SETTINGS_API_WEBHOOKS_TABS } from '~/pages/settings/api-webhooks/constants/SettingsApiWebhooksTabs';
 import { SettingsDatabaseEventsForm } from '@/settings/components/SettingsDatabaseEventsForm';
 
 const DELETE_WEBHOOK_MODAL_ID = 'delete-webhook-modal';
@@ -81,8 +82,13 @@ export const SettingsDevelopersWebhookForm = ({
             href: getSettingsPath(SettingsPath.General),
           },
           {
-            children: t`APIs & Webhooks`,
-            href: getSettingsPath(SettingsPath.ApiWebhooks),
+            children: t`MCP & APIs`,
+            href: getSettingsPath(
+              SettingsPath.ApiWebhooks,
+              undefined,
+              undefined,
+              SETTINGS_API_WEBHOOKS_TABS.TABS_IDS.WEBHOOKS,
+            ),
           },
           { children: isCreationMode ? t`New` : getTitle() },
         ]}
@@ -90,7 +96,15 @@ export const SettingsDevelopersWebhookForm = ({
           <SaveAndCancelButtons
             isSaveDisabled={!canSave}
             isCancelDisabled={formConfig.formState.isSubmitting}
-            onCancel={() => navigate(SettingsPath.ApiWebhooks)}
+            onCancel={() =>
+              navigate(
+                SettingsPath.ApiWebhooks,
+                undefined,
+                undefined,
+                undefined,
+                SETTINGS_API_WEBHOOKS_TABS.TABS_IDS.WEBHOOKS,
+              )
+            }
             onSave={formConfig.handleSubmit(handleSave)}
           />
         }

packages/twenty-front/src/modules/settings/developers/hooks/useWebhookForm.ts

@@ -26,6 +26,7 @@ import {
   UpdateWebhookDocument,
 } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { SETTINGS_API_WEBHOOKS_TABS } from '~/pages/settings/api-webhooks/constants/SettingsApiWebhooksTabs';
 
 type UseWebhookFormProps = {
   webhookId?: string;
@@ -109,6 +110,11 @@ export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
       navigate(
         createdWebhook ? SettingsPath.WebhookDetail : SettingsPath.ApiWebhooks,
         createdWebhook ? { webhookId: createdWebhook.id } : undefined,
+        undefined,
+        undefined,
+        createdWebhook
+          ? undefined
+          : SETTINGS_API_WEBHOOKS_TABS.TABS_IDS.WEBHOOKS,
       );
     } catch (error) {
       enqueueErrorSnackBar({
@@ -197,7 +203,13 @@ export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
         message: t`Webhook deleted successfully`,
       });
 
-      navigate(SettingsPath.ApiWebhooks);
+      navigate(
+        SettingsPath.ApiWebhooks,
+        undefined,
+        undefined,
+        undefined,
+        SETTINGS_API_WEBHOOKS_TABS.TABS_IDS.WEBHOOKS,
+      );
     } catch (error) {
       enqueueErrorSnackBar({
         apolloError: CombinedGraphQLErrors.is(error) ? error : undefined,