use prompt component

src/components/BotAccountInfoDialog.tsx

@@ -1,12 +1,13 @@
-import {Modal, Pressable, View} from 'react-native'
+import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 
-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
+import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 import {navigate} from '#/Navigation'
 
@@ -24,88 +25,6 @@ export function BotAccountInfoDialog({
 }
 
 export function BotAccountOwnAlert({
-  visible,
-  onClose,
-}: {
-  visible: boolean
-  onClose: (cb?: () => void) => void
-}) {
-  const {_} = useLingui()
-  const t = useTheme()
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={() => onClose()}
-      accessibilityLabel={_(msg`Automated account`)}
-      accessibilityViewIsModal>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Close`)}
-        onPress={() => onClose()}
-        style={[
-          a.flex_1,
-          a.justify_center,
-          a.align_center,
-          a.px_xl,
-          {backgroundColor: 'rgba(0,0,0,0.5)'},
-        ]}>
-        <Pressable
-          accessibilityRole="button"
-          onPress={e => e.stopPropagation()}
-          style={[
-            t.atoms.bg,
-            a.w_full,
-            {borderRadius: 48},
-            a.p_2xl,
-            {maxWidth: 280},
-          ]}>
-          <View style={[a.align_center, a.gap_md]}>
-            <View style={[t.atoms.shadow_sm]}>
-              <RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
-            </View>
-
-            <Text style={[a.text_md, a.text_center, a.py_sm]}>
-              <Trans>
-                You have marked this account as automated. You can remove it at
-                any time from your account settings.
-              </Trans>
-            </Text>
-
-            <Button
-              label={_(msg`Okay`)}
-              onPress={() => onClose()}
-              color="primary"
-              size="large"
-              style={[a.w_full]}>
-              <ButtonText>
-                <Trans>Okay</Trans>
-              </ButtonText>
-            </Button>
-            <Button
-              label={_(msg`Open settings`)}
-              onPress={() => {
-                onClose(() => {
-                  navigate('AutomationLabelSettings')
-                })
-              }}
-              color="secondary"
-              size="large"
-              style={[a.w_full]}>
-              <ButtonText>
-                <Trans>Open settings</Trans>
-              </ButtonText>
-            </Button>
-          </View>
-        </Pressable>
-      </Pressable>
-    </Modal>
-  )
-}
-
-export function BotAccountOwnAlertWeb({
   control,
 }: {
   control: Dialog.DialogControlProps
@@ -114,30 +33,20 @@ export function BotAccountOwnAlertWeb({
   const t = useTheme()
 
   return (
-    <Dialog.Outer control={control} webOptions={{alignCenter: true}}>
-      <Dialog.ScrollableInner
-        label={_(msg`Automated account`)}
-        style={web([{maxWidth: 320, borderRadius: 36}])}>
-        <View style={[a.align_center, a.gap_2xl, a.py_md]}>
-          <View style={[t.atoms.shadow_sm]}>
+    <Prompt.Outer control={control} type="alert">
+      <Prompt.Content>
+        <View style={[a.align_center, a.pb_sm]}>
           <RobotIcon width={48} fill={t.atoms.text_contrast_medium.color} />
         </View>
-          <Text style={[a.text_md, a.text_center]}>
+        <Prompt.DescriptionText>
           <Trans>
-              You have marked this account as automated. You can remove it at
-              any time from your account settings.
+            You have marked this account as automated. You can remove it at any
+            time from your account settings.
           </Trans>
-          </Text>
-          <Button
-            label={_(msg`Okay`)}
-            onPress={() => control.close()}
-            color="primary"
-            size="large"
-            style={[a.w_full]}>
-            <ButtonText>
-              <Trans>Okay</Trans>
-            </ButtonText>
-          </Button>
+        </Prompt.DescriptionText>
+      </Prompt.Content>
+      <Prompt.Actions>
+        <Prompt.Action cta={_(msg`Okay`)} onPress={() => {}} color="primary" />
         <Button
           label={_(msg`Open settings`)}
           onPress={() => {
@@ -146,17 +55,13 @@ export function BotAccountOwnAlertWeb({
             })
           }}
           color="secondary"
-            size="large"
-            variant="ghost"
-            style={[a.w_full]}>
+          size="large">
           <ButtonText>
             <Trans>Open settings</Trans>
           </ButtonText>
         </Button>
-        </View>
-        <Dialog.Close />
-      </Dialog.ScrollableInner>
-    </Dialog.Outer>
+      </Prompt.Actions>
+    </Prompt.Outer>
   )
 }
 

src/components/BotBadge.tsx

@@ -1,21 +1,18 @@
-import {useState} from 'react'
 import {View} from 'react-native'
 import {type ComAtprotoLabelDefs} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAnalytics} from '#/analytics'
-import {IS_NATIVE} from '#/env'
 import {isBotAccount} from '#/lib/bots'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {
   BotAccountInfoDialog,
   BotAccountOwnAlert,
-  BotAccountOwnAlertWeb,
 } from '#/components/BotAccountInfoDialog'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robot'
+import {useAnalytics} from '#/analytics'
 
 export function BotBadge({
   profile,
@@ -53,7 +50,6 @@ export function BotBadgeButton({
   const {_} = useLingui()
   const {gtPhone} = useBreakpoints()
   const control = useDialogControl()
-  const [alertVisible, setAlertVisible] = useState(false)
 
   if (!isBotAccount(profile)) {
     return null
@@ -66,8 +62,6 @@ export function BotBadgeButton({
     dimensions = 14
   }
 
-  const useNativeAlert = isMe && IS_NATIVE
-
   return (
     <>
       <Button
@@ -76,11 +70,7 @@ export function BotBadgeButton({
         onPress={evt => {
           evt.preventDefault()
           ax.metric('bot:badge:click', {})
-          if (useNativeAlert) {
-            setAlertVisible(true)
-          } else {
           control.open()
-          }
         }}>
         {({hovered}) => (
           <View
@@ -101,16 +91,8 @@ export function BotBadgeButton({
           </View>
         )}
       </Button>
-      {useNativeAlert ? (
-        <BotAccountOwnAlert
-          visible={alertVisible}
-          onClose={cb => {
-            setAlertVisible(false)
-            cb?.()
-          }}
-        />
-      ) : isMe ? (
-        <BotAccountOwnAlertWeb control={control} />
+      {isMe ? (
+        <BotAccountOwnAlert control={control} />
       ) : (
         <BotAccountInfoDialog control={control} />
       )}