Minor clean up for preview branch call outs (#45448)

## Context

Just happened to pass by this - refactor to use Admonition instead of
Alert + fix spacing + use InlineLink

e.g General settings while on a preview branch

### Before
<img width="795" height="364" alt="image"
src="https://github.com/user-attachments/assets/28ab66ab-bd10-408e-afb5-24e287efc705"
/>

### After
<img width="759" height="349" alt="image"
src="https://github.com/user-attachments/assets/db62925d-f2e2-4c10-9cab-ce8204f2077c"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Preview-branch notices across Settings now use a unified admonition
design with adjusted spacing for improved visual consistency.

* **Refactor**
* Standardized branch-notice layout and inline navigation links across
Addons, General, and Integrations; each notice now links directly to its
respective settings page for clearer navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/Settings/Addons/Addons.tsx

@@ -1,6 +1,6 @@
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useFlag, useParams } from 'common'
-import { AlertCircle, Lock } from 'lucide-react'
+import { Lock } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -14,6 +14,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import { PageSection } from 'ui-patterns/PageSection'
 
@@ -33,11 +34,11 @@ import {
 import { ProjectUpdateDisabledTooltip } from '@/components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip'
 import { SupportLink } from '@/components/interfaces/Support/SupportLink'
 import AlertError from '@/components/ui/AlertError'
+import { InlineLink } from '@/components/ui/InlineLink'
 import { ResourceItem } from '@/components/ui/Resource/ResourceItem'
 import { ResourceList } from '@/components/ui/Resource/ResourceList'
 import { HorizontalShimmerWithIcon } from '@/components/ui/Shimmers'
 import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
-import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
 import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
 import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
@@ -67,10 +68,7 @@ export const Addons = () => {
 
   const { data: selectedOrg } = useSelectedOrganizationQuery()
   const { data: selectedProject } = useSelectedProjectQuery()
-  const { data: parentProject } = useProjectDetailQuery({
-    ref: selectedProject?.parent_project_ref,
-  })
-  const isBranch = parentProject !== undefined
+  const isBranch = selectedProject?.parent_project_ref
 
   const { data: settings } = useProjectSettingsV2Query({ projectRef })
   const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: selectedOrg?.slug })
@@ -196,20 +194,18 @@ export const Addons = () => {
     <PageContainer size="default">
       <PageSection className="last:pb-0 gap-0">
         {isBranch && (
-          <Alert_Shadcn_ variant="default" className="mt-6">
-            <AlertCircle strokeWidth={2} />
-            <AlertTitle_Shadcn_>
-              You are currently on a preview branch of your project
-            </AlertTitle_Shadcn_>
-            <AlertDescription_Shadcn_>
-              Updating add-ons here will only apply to this preview branch. To manage add-ons for
-              your main branch, please visit the{' '}
-              <Link href={`/project/${parentProject.ref}/settings/general`} className="text-brand">
-                main branch
-              </Link>
-              .
-            </AlertDescription_Shadcn_>
-          </Alert_Shadcn_>
+          <Admonition
+            type="default"
+            className="mb-4"
+            title="You are currently on a preview branch of your project"
+          >
+            Updating add-ons here will only apply to this preview branch. To manage add-ons for your
+            main branch, please visit the{' '}
+            <InlineLink href={`/project/${selectedProject.parent_project_ref}/settings/addons`}>
+              main branch
+            </InlineLink>
+            .
+          </Admonition>
         )}
 
         {isLoading && (

apps/studio/components/interfaces/Settings/General/General.tsx

@@ -1,12 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
-  Alert_Shadcn_,
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
   Button,
   Card,
   CardContent,
@@ -15,8 +11,8 @@ import {
   FormControl,
   FormField,
   Input_Shadcn_,
-  WarningIcon,
 } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
@@ -30,6 +26,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import * as z from 'zod'
 
 import { ProjectAccessSection } from './ProjectAccessSection'
+import { InlineLink } from '@/components/ui/InlineLink'
 import { useProjectUpdateMutation } from '@/data/projects/project-update-mutation'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -83,23 +80,18 @@ export const General = () => {
         </PageSectionMeta>
         <PageSectionContent>
           {isBranch && (
-            <Alert_Shadcn_ variant="default">
-              <WarningIcon />
-              <AlertTitle_Shadcn_>
-                You are currently on a preview branch of your project
-              </AlertTitle_Shadcn_>
-              <AlertDescription_Shadcn_>
-                Certain settings are not available while you're on a preview branch. To adjust your
-                project settings, you may return to your{' '}
-                <Link
-                  href={`/project/${project?.parent_project_ref}/settings/general`}
-                  className="text-brand"
-                >
-                  main branch
-                </Link>
-                .
-              </AlertDescription_Shadcn_>
-            </Alert_Shadcn_>
+            <Admonition
+              type="default"
+              className="mb-4"
+              title="You are currently on a preview branch of your project"
+            >
+              Certain settings are not available while you're on a preview branch. To adjust your
+              project settings, you may return to your{' '}
+              <InlineLink href={`/project/${project?.parent_project_ref}/settings/general`}>
+                main branch
+              </InlineLink>
+              .
+            </Admonition>
           )}
 
           {project === undefined ? (

apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx

@@ -1,12 +1,11 @@
-import Link from 'next/link'
-import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, WarningIcon } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 import { AWSPrivateLinkSection } from './AWSPrivateLink/AWSPrivateLinkSection'
 import { GitHubSection } from './GithubIntegration/GithubSection'
 import { VercelSection } from './VercelIntegration/VercelSection'
 import { SidePanelVercelProjectLinker } from '@/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker'
 import { ScaffoldContainer, ScaffoldDivider } from '@/components/layouts/Scaffold'
-import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
+import { InlineLink } from '@/components/ui/InlineLink'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { BASE_PATH } from '@/lib/constants'
@@ -21,9 +20,8 @@ export const IntegrationImageHandler = ({ title }: { title: 'vercel' | 'github'
   )
 }
 
-const IntegrationSettings = () => {
+export const IntegrationSettings = () => {
   const { data: project } = useSelectedProjectQuery()
-  const { data: parentProject } = useProjectDetailQuery({ ref: project?.parent_project_ref })
   const isBranch = project?.parent_project_ref !== undefined
 
   const showVercelIntegration = useIsFeatureEnabled('integrations:vercel')
@@ -36,22 +34,21 @@ const IntegrationSettings = () => {
     <>
       {isBranch && (
         <ScaffoldContainer>
-          <Alert_Shadcn_ variant="default" className="mt-6">
-            <WarningIcon />
-            <AlertTitle_Shadcn_>
-              You are currently on a preview branch of your project
-            </AlertTitle_Shadcn_>
-            <AlertDescription_Shadcn_>
-              To adjust your project's integration settings, you may return to your{' '}
-              <Link href={`/project/${parentProject?.ref}/settings/general`} className="text-brand">
-                main branch
-              </Link>
-              .
-            </AlertDescription_Shadcn_>
-          </Alert_Shadcn_>
+          <Admonition
+            type="default"
+            className="mt-6"
+            title="You are currently on a preview branch of your project"
+          >
+            To adjust your project's integration settings, you may return to your{' '}
+            <InlineLink href={`/project/${project.parent_project_ref}/settings/integrations`}>
+              main branch
+            </InlineLink>
+            .
+          </Admonition>
         </ScaffoldContainer>
       )}
       <GitHubSection />
+
       {showVercelIntegration && (
         <>
           <ScaffoldDivider />
@@ -59,6 +56,7 @@ const IntegrationSettings = () => {
           <SidePanelVercelProjectLinker />
         </>
       )}
+
       {showAWSPrivateLink && (
         <>
           <ScaffoldDivider />
@@ -68,5 +66,3 @@ const IntegrationSettings = () => {
     </>
   )
 }
-
-export default IntegrationSettings

apps/studio/pages/project/[ref]/settings/integrations.tsx

@@ -1,5 +1,5 @@
-import IntegrationSettings from '@/components/interfaces/Settings/Integrations/IntegrationsSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { IntegrationSettings } from '@/components/interfaces/Settings/Integrations/IntegrationsSettings'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,