Add admonition RE ipv4 addon for connect if direct connection selected (#45511)

## Context

Adds an admonition in the Connect sheet to inform users about the IPv4
addon if direct connection is selected and project doesn't have the IPv4
addon

Decided to place it below the copy prompt CTA since it's technically a
secondary action (users with IPv6 networks wouldn't need this)

<img width="755" height="707" alt="image"
src="https://github.com/user-attachments/assets/f1d29a56-db5f-4807-9545-a862434fea8f"
/>


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

* **New Features**
* Displays contextual guidance in direct connection mode when the IPv4
add-on is not enabled, including quick-access links to configure IPv4
settings and to open IPv4 documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>

apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx

@@ -1,6 +1,9 @@
 import { useParams } from 'common'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import { useMemo, useRef } from 'react'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import type {
@@ -14,11 +17,13 @@ import { ConnectSheetStep } from './ConnectSheetStep'
 import { CopyPromptAdmonition } from './CopyPromptAdmonition'
 import { getConnectionStrings } from './DatabaseSettings.utils'
 import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
+import { DocsButton } from '@/components/ui/DocsButton'
 import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
 import { usePgbouncerConfigQuery } from '@/data/database/pgbouncer-config-query'
 import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
 import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
+import { DOCS_URL } from '@/lib/constants'
 import { pluckObjectFields } from '@/lib/helpers'
 
 interface ConnectStepsSectionProps {
@@ -145,9 +150,25 @@ function StepContent({
 }
 
 export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsSectionProps) {
+  const { ref } = useParams()
   const stepsContainerRef = useRef<HTMLDivElement | null>(null)
   const connectionStringPooler = useConnectionStringPooler()
 
+  const { data: ipv4Addon } = useProjectAddonsQuery(
+    { projectRef: ref },
+    {
+      select: (data) => {
+        const selectedAddons = data?.selected_addons ?? []
+        return selectedAddons.find((addon) => addon.type === 'ipv4')
+      },
+    }
+  )
+  const showIpv4AddonNotice =
+    state.mode === 'direct' &&
+    !ipv4Addon &&
+    (state.connectionMethod === 'direct' ||
+      (state.connectionMethod === 'transaction' && !state.useSharedPooler))
+
   if (steps.length === 0) return null
 
   return (
@@ -157,6 +178,20 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
 
         <CopyPromptAdmonition stepsContainerRef={stepsContainerRef} />
 
+        {showIpv4AddonNotice && (
+          <Admonition
+            type="default"
+            title={`${state.connectionMethod === 'direct' ? 'Direct connections use' : 'Transaction pooler uses'} IPv6 by default`}
+            description="Enable the dedicated IPv4 address add-on to connect from IPv4-only networks"
+            actions={[
+              <Button asChild key="addon" type="default">
+                <Link href={`/project/${ref}/settings/addons?panel=ipv4`}>Enable IPv4 add-on</Link>
+              </Button>,
+              <DocsButton key="docs" href={`${DOCS_URL}/guides/platform/ipv4-address`} />,
+            ]}
+          />
+        )}
+
         <div className="mt-6" ref={stepsContainerRef}>
           {steps.map((step, index) => (
             <ConnectSheetStep