Merge remote-tracking branch 'origin/main' into dialog-outlets

* origin/main:
  Modernise link warning dialog (#8243)
  rearrange settings (#8519)
  Mark translatable text in `PreferenceControls.tsx` (#8516)
  fix other case of promise.all misuse (#8505)
  Nightly source-language update
  Delete some old dialogs (#8512)
  copy tweak (#8506)
  facepalm (#8510)
  add fabric package/lock files (#8509)

.github/workflows/build-submit-android.yml

@@ -52,6 +52,10 @@ jobs:
           distribution: 'temurin'
           java-version: '17'
 
+      - name: "Use upgraded MMKV for Fabric"
+        run: |
+          sed -i 's/"react-native-mmkv": "\^2\.12\.2"/"react-native-mmkv": "^3.3.0"/' package.json
+
       - name: ⚙️ Install dependencies
         run: yarn install
 

.github/workflows/bundle-deploy-eas-update.yml

@@ -275,6 +275,10 @@ jobs:
           distribution: 'temurin'
           java-version: '17'
 
+      - name: "Use upgraded MMKV for Fabric"
+        run: |
+          sed -i 's/"react-native-mmkv": "\^2\.12\.2"/"react-native-mmkv": "^3.3.0"/' package.json
+
       - name: ⚙️ Install dependencies
         run: yarn install
 

src/Navigation.tsx

@@ -447,7 +447,7 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         name="LikesOnRepostsNotificationSettings"
         getComponent={() => LikesOnRepostsNotificationSettingsScreen}
         options={{
-          title: title(msg`Likes on your reposts notifications`),
+          title: title(msg`Likes of your reposts notifications`),
           requireAuth: true,
         }}
       />
@@ -455,7 +455,7 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         name="RepostsOnRepostsNotificationSettings"
         getComponent={() => RepostsOnRepostsNotificationSettingsScreen}
         options={{
-          title: title(msg`Reposts on your reposts notifications`),
+          title: title(msg`Reposts of your reposts notifications`),
           requireAuth: true,
         }}
       />

src/components/Link.tsx

@@ -24,6 +24,7 @@ import {Button, type ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, type TextProps} from '#/components/Typography'
 import {router} from '#/routes'
+import {useGlobalDialogsControlContext} from './dialogs/Context'
 
 /**
  * Only available within a `Link`, since that inherits from `Button`.
@@ -111,7 +112,8 @@ export function useLink({
   }
 
   const isExternal = isExternalUrl(href)
-  const {openModal, closeModal} = useModalControls()
+  const {closeModal} = useModalControls()
+  const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
 
   const onPress = React.useCallback(
@@ -132,10 +134,9 @@ export function useLink({
       }
 
       if (requiresWarning) {
-        openModal({
+        linkWarningDialogControl.open({
-          name: 'link-warning',
+          displayText,
-          text: displayText,
+          href,
-          href: href,
         })
       } else {
         if (isExternal) {
@@ -176,13 +177,13 @@ export function useLink({
       displayText,
       isExternal,
       href,
-      openModal,
       openLink,
       closeModal,
       action,
       navigation,
       overridePresentation,
       shouldProxy,
+      linkWarningDialogControl,
     ],
   )
 
@@ -195,16 +196,21 @@ export function useLink({
     )
 
     if (requiresWarning) {
-      openModal({
+      linkWarningDialogControl.open({
-        name: 'link-warning',
+        displayText,
-        text: displayText,
+        href,
-        href: href,
         share: true,
       })
     } else {
       shareUrl(href)
     }
-  }, [disableMismatchWarning, displayText, href, isExternal, openModal])
+  }, [
+    disableMismatchWarning,
+    displayText,
+    href,
+    isExternal,
+    linkWarningDialogControl,
+  ])
 
   const onLongPress = React.useCallback(
     (e: GestureResponderEvent) => {

src/components/dialogs/ChangeEmailDialog.tsx

@@ -1,259 +0,0 @@
-import {useState} from 'react'
-import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {cleanError} from '#/lib/strings/errors'
-import {useAgent, useSession} from '#/state/session'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {atoms as a, useBreakpoints, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import * as TextField from '#/components/forms/TextField'
-import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
-
-export function ChangeEmailDialog({
-  control,
-  verifyEmailControl,
-}: {
-  control: Dialog.DialogControlProps
-  verifyEmailControl: Dialog.DialogControlProps
-}) {
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <Inner verifyEmailControl={verifyEmailControl} />
-    </Dialog.Outer>
-  )
-}
-
-export function Inner({
-  verifyEmailControl,
-}: {
-  verifyEmailControl: Dialog.DialogControlProps
-}) {
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const agent = useAgent()
-  const control = Dialog.useDialogContext()
-  const {gtMobile} = useBreakpoints()
-
-  const [currentStep, setCurrentStep] = useState<
-    'StepOne' | 'StepTwo' | 'StepThree'
-  >('StepOne')
-  const [email, setEmail] = useState('')
-  const [confirmationCode, setConfirmationCode] = useState('')
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [error, setError] = useState('')
-
-  const currentEmail = currentAccount?.email || '(no email)'
-  const uiStrings = {
-    StepOne: {
-      title: _(msg`Change Your Email`),
-      message: '',
-    },
-    StepTwo: {
-      title: _(msg`Security Step Required`),
-      message: _(
-        msg`An email has been sent to your previous address, ${currentEmail}. It includes a confirmation code which you can enter below.`,
-      ),
-    },
-    StepThree: {
-      title: _(msg`Email Updated!`),
-      message: _(
-        msg`Your email address has been updated but it is not yet verified. As a next step, please verify your new email.`,
-      ),
-    },
-  }
-
-  const onRequestChange = async () => {
-    if (email === currentAccount?.email) {
-      setError(
-        _(
-          msg`The email address you entered is the same as your current email address.`,
-        ),
-      )
-      return
-    }
-    setError('')
-    setIsProcessing(true)
-    try {
-      const res = await agent.com.atproto.server.requestEmailUpdate()
-      if (res.data.tokenRequired) {
-        setCurrentStep('StepTwo')
-      } else {
-        await agent.com.atproto.server.updateEmail({email: email.trim()})
-        await agent.resumeSession(agent.session!)
-        setCurrentStep('StepThree')
-      }
-    } catch (e) {
-      setError(cleanError(String(e)))
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  const onConfirm = async () => {
-    setError('')
-    setIsProcessing(true)
-    try {
-      await agent.com.atproto.server.updateEmail({
-        email: email.trim(),
-        token: confirmationCode.trim(),
-      })
-      await agent.resumeSession(agent.session!)
-      setCurrentStep('StepThree')
-    } catch (e) {
-      setError(cleanError(String(e)))
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  const onVerify = async () => {
-    control.close(() => {
-      verifyEmailControl.open()
-    })
-  }
-
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Verify email dialog`)}
-      style={web({maxWidth: 450})}>
-      <Dialog.Close />
-      <View style={[a.gap_xl]}>
-        <View style={[a.gap_sm]}>
-          <Text style={[a.font_heavy, a.text_2xl]}>
-            {uiStrings[currentStep].title}
-          </Text>
-          {error ? (
-            <View style={[a.rounded_sm, a.overflow_hidden]}>
-              <ErrorMessage message={error} />
-            </View>
-          ) : null}
-          {currentStep === 'StepOne' ? (
-            <View>
-              <TextField.LabelText>
-                <Trans>Enter your new email address below.</Trans>
-              </TextField.LabelText>
-              <TextField.Root>
-                <TextField.Input
-                  label={_(msg`New email address`)}
-                  placeholder={_(msg`alice@example.com`)}
-                  defaultValue={email}
-                  onChangeText={setEmail}
-                  keyboardType="email-address"
-                  autoComplete="email"
-                />
-              </TextField.Root>
-            </View>
-          ) : (
-            <Text style={[a.text_md, a.leading_snug]}>
-              {uiStrings[currentStep].message}
-            </Text>
-          )}
-        </View>
-        {currentStep === 'StepTwo' ? (
-          <View>
-            <TextField.LabelText>
-              <Trans>Confirmation code</Trans>
-            </TextField.LabelText>
-            <TextField.Root>
-              <TextField.Input
-                label={_(msg`Confirmation code`)}
-                placeholder="XXXXX-XXXXX"
-                onChangeText={setConfirmationCode}
-              />
-            </TextField.Root>
-          </View>
-        ) : null}
-        <View style={[a.gap_sm, gtMobile && [a.flex_row_reverse, a.ml_auto]]}>
-          {currentStep === 'StepOne' ? (
-            <>
-              <Button
-                label={_(msg`Request change`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={isProcessing}
-                onPress={onRequestChange}>
-                <ButtonText>
-                  <Trans>Request change</Trans>
-                </ButtonText>
-                {isProcessing ? (
-                  <Loader size="sm" style={[{color: 'white'}]} />
-                ) : null}
-              </Button>
-              <Button
-                label={_(msg`I have a code`)}
-                variant="solid"
-                color="secondary"
-                size="large"
-                disabled={isProcessing}
-                onPress={() => setCurrentStep('StepTwo')}>
-                <ButtonText>
-                  <Trans>I have a code</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : currentStep === 'StepTwo' ? (
-            <>
-              <Button
-                label={_(msg`Confirm`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={isProcessing}
-                onPress={onConfirm}>
-                <ButtonText>
-                  <Trans>Confirm</Trans>
-                </ButtonText>
-                {isProcessing ? (
-                  <Loader size="sm" style={[{color: 'white'}]} />
-                ) : null}
-              </Button>
-              <Button
-                label={_(msg`Resend email`)}
-                variant="solid"
-                color="secondary"
-                size="large"
-                disabled={isProcessing}
-                onPress={() => {
-                  setConfirmationCode('')
-                  setCurrentStep('StepOne')
-                }}>
-                <ButtonText>
-                  <Trans>Resend email</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : currentStep === 'StepThree' ? (
-            <>
-              <Button
-                label={_(msg`Verify email`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                onPress={onVerify}>
-                <ButtonText>
-                  <Trans>Verify email</Trans>
-                </ButtonText>
-              </Button>
-              <Button
-                label={_(msg`Close`)}
-                variant="solid"
-                color="secondary"
-                size="large"
-                onPress={() => control.close()}>
-                <ButtonText>
-                  <Trans>Close</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : null}
-        </View>
-      </View>
-    </Dialog.ScrollableInner>
-  )
-}

src/components/dialogs/Context.tsx

@@ -17,6 +17,11 @@ type ControlsContext = {
   signinDialogControl: Control
   inAppBrowserConsentControl: StatefulControl<string>
   emailDialogControl: StatefulControl<Screen>
+  linkWarningDialogControl: StatefulControl<{
+    href: string
+    displayText: string
+    share?: boolean
+  }>
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
@@ -36,6 +41,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const signinDialogControl = Dialog.useDialogControl()
   const inAppBrowserConsentControl = useStatefulDialogControl<string>()
   const emailDialogControl = useStatefulDialogControl<Screen>()
+  const linkWarningDialogControl = useStatefulDialogControl<{
+    href: string
+    displayText: string
+    share?: boolean
+  }>()
 
   const ctx = useMemo<ControlsContext>(
     () => ({
@@ -43,12 +53,14 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       signinDialogControl,
       inAppBrowserConsentControl,
       emailDialogControl,
+      linkWarningDialogControl,
     }),
     [
       mutedWordsDialogControl,
       signinDialogControl,
       inAppBrowserConsentControl,
       emailDialogControl,
+      linkWarningDialogControl,
     ],
   )
 

src/components/dialogs/LinkWarning.tsx

@@ -0,0 +1,161 @@
+import {useCallback, useMemo} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useOpenLink} from '#/lib/hooks/useOpenLink'
+import {shareUrl} from '#/lib/sharing'
+import {isPossiblyAUrl, splitApexDomain} from '#/lib/strings/url-helpers'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
+import {useGlobalDialogsControlContext} from './Context'
+
+export function LinkWarningDialog() {
+  const {linkWarningDialogControl} = useGlobalDialogsControlContext()
+
+  return (
+    <Dialog.Outer
+      control={linkWarningDialogControl.control}
+      nativeOptions={{preventExpansion: true}}
+      webOptions={{alignCenter: true}}
+      onClose={linkWarningDialogControl.clear}>
+      <Dialog.Handle />
+      <InAppBrowserConsentInner link={linkWarningDialogControl.value} />
+    </Dialog.Outer>
+  )
+}
+
+function InAppBrowserConsentInner({
+  link,
+}: {
+  link?: {href: string; displayText: string; share?: boolean}
+}) {
+  const control = Dialog.useDialogContext()
+  const {_} = useLingui()
+  const t = useTheme()
+  const openLink = useOpenLink()
+  const {gtMobile} = useBreakpoints()
+
+  const potentiallyMisleading = useMemo(
+    () => link && isPossiblyAUrl(link.displayText),
+    [link],
+  )
+
+  const onPressVisit = useCallback(() => {
+    control.close(() => {
+      if (!link) return
+      if (link.share) {
+        shareUrl(link.href)
+      } else {
+        openLink(link.href, undefined, true)
+      }
+    })
+  }, [control, link, openLink])
+
+  const onCancel = useCallback(() => {
+    control.close()
+  }, [control])
+
+  return (
+    <Dialog.ScrollableInner
+      style={web({maxWidth: 450})}
+      label={
+        potentiallyMisleading
+          ? _(msg`Potentially misleading link warning`)
+          : _(msg`Leaving Bluesky`)
+      }>
+      <View style={[a.gap_2xl]}>
+        <View style={[a.gap_sm]}>
+          <Text style={[a.font_heavy, a.text_2xl]}>
+            {potentiallyMisleading ? (
+              <Trans>Potentially misleading link</Trans>
+            ) : (
+              <Trans>Leaving Bluesky</Trans>
+            )}
+          </Text>
+          <Text style={[t.atoms.text_contrast_high, a.text_md, a.leading_snug]}>
+            <Trans>This link is taking you to the following website:</Trans>
+          </Text>
+          {link && <LinkBox href={link.href} />}
+          {potentiallyMisleading && (
+            <Text
+              style={[t.atoms.text_contrast_high, a.text_md, a.leading_snug]}>
+              <Trans>Make sure this is where you intend to go!</Trans>
+            </Text>
+          )}
+        </View>
+        <View
+          style={[
+            a.flex_1,
+            a.gap_sm,
+            gtMobile && [a.flex_row_reverse, a.justify_start],
+          ]}>
+          <Button
+            label={link?.share ? _(msg`Share link`) : _(msg`Visit site`)}
+            accessibilityHint={_(msg`Opens link ${link?.href ?? ''}`)}
+            onPress={onPressVisit}
+            size="large"
+            variant="solid"
+            color={potentiallyMisleading ? 'secondary_inverted' : 'primary'}>
+            <ButtonText>
+              {link?.share ? (
+                <Trans>Share link</Trans>
+              ) : (
+                <Trans>Visit site</Trans>
+              )}
+            </ButtonText>
+          </Button>
+          <Button
+            label={_(msg`Go back`)}
+            onPress={onCancel}
+            size="large"
+            variant="ghost"
+            color="secondary">
+            <ButtonText>
+              <Trans>Go back</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </View>
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+function LinkBox({href}: {href: string}) {
+  const t = useTheme()
+  const [scheme, hostname, rest] = useMemo(() => {
+    try {
+      const urlp = new URL(href)
+      const [subdomain, apexdomain] = splitApexDomain(urlp.hostname)
+      return [
+        urlp.protocol + '//' + subdomain,
+        apexdomain,
+        urlp.pathname.replace(/\/$/, '') + urlp.search + urlp.hash,
+      ]
+    } catch {
+      return ['', href, '']
+    }
+  }, [href])
+  return (
+    <View
+      style={[
+        t.atoms.bg,
+        t.atoms.border_contrast_medium,
+        a.px_md,
+        {paddingVertical: 10},
+        a.rounded_sm,
+        a.border,
+      ]}>
+      <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
+        {scheme}
+        <Text style={[a.text_md, a.leading_snug, t.atoms.text, a.font_bold]}>
+          {hostname}
+        </Text>
+        {rest}
+      </Text>
+    </View>
+  )
+}

src/components/dialogs/VerifyEmailDialog.tsx

@@ -1,360 +0,0 @@
-import {useState} from 'react'
-import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {cleanError} from '#/lib/strings/errors'
-import {logger} from '#/logger'
-import {useAgent, useSession} from '#/state/session'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import * as TextField from '#/components/forms/TextField'
-import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
-import {InlineLinkText} from '#/components/Link'
-import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
-import {ChangeEmailDialog} from './ChangeEmailDialog'
-
-export function VerifyEmailDialog({
-  control,
-  onCloseWithoutVerifying,
-  onCloseAfterVerifying,
-  reasonText,
-  changeEmailControl,
-  reminder,
-}: {
-  control: Dialog.DialogControlProps
-  onCloseWithoutVerifying?: () => void
-  onCloseAfterVerifying?: () => void
-  reasonText?: string
-  /**
-   * if a changeEmailControl for a ChangeEmailDialog is not provided,
-   * this component will create one for you. Using this prop
-   * helps reduce duplication, since these dialogs are often used together.
-   */
-  changeEmailControl?: Dialog.DialogControlProps
-  reminder?: boolean
-}) {
-  const agent = useAgent()
-  const fallbackChangeEmailControl = Dialog.useDialogControl()
-
-  const [didVerify, setDidVerify] = useState(false)
-
-  return (
-    <>
-      <Dialog.Outer
-        control={control}
-        onClose={async () => {
-          if (!didVerify) {
-            onCloseWithoutVerifying?.()
-            return
-          }
-
-          try {
-            await agent.resumeSession(agent.session!)
-            onCloseAfterVerifying?.()
-          } catch (e: unknown) {
-            logger.error(String(e))
-            return
-          }
-        }}>
-        <Dialog.Handle />
-        <Inner
-          setDidVerify={setDidVerify}
-          reasonText={reasonText}
-          changeEmailControl={changeEmailControl ?? fallbackChangeEmailControl}
-          reminder={reminder}
-        />
-      </Dialog.Outer>
-      {!changeEmailControl && (
-        <ChangeEmailDialog
-          control={fallbackChangeEmailControl}
-          verifyEmailControl={control}
-        />
-      )}
-    </>
-  )
-}
-
-export function Inner({
-  setDidVerify,
-  reasonText,
-  changeEmailControl,
-  reminder,
-}: {
-  setDidVerify: (value: boolean) => void
-  reasonText?: string
-  changeEmailControl: Dialog.DialogControlProps
-  reminder?: boolean
-}) {
-  const control = Dialog.useDialogContext()
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const agent = useAgent()
-  const {gtMobile} = useBreakpoints()
-  const t = useTheme()
-
-  const [currentStep, setCurrentStep] = useState<
-    'Reminder' | 'StepOne' | 'StepTwo' | 'StepThree'
-  >(reminder ? 'Reminder' : 'StepOne')
-  const [confirmationCode, setConfirmationCode] = useState('')
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [error, setError] = useState('')
-
-  const uiStrings = {
-    Reminder: {
-      title: _(msg`Please Verify Your Email`),
-      message: _(
-        msg`Your email has not yet been verified. This is an important security step which we recommend.`,
-      ),
-    },
-    StepOne: {
-      title: _(msg`Verify Your Email`),
-      message: '',
-    },
-    StepTwo: {
-      title: _(msg`Enter Code`),
-      message: _(
-        msg`An email has been sent! Please enter the confirmation code included in the email below.`,
-      ),
-    },
-    StepThree: {
-      title: _(msg`Success!`),
-      message: _(msg`Thank you! Your email has been successfully verified.`),
-    },
-  }
-
-  const onSendEmail = async () => {
-    setError('')
-    setIsProcessing(true)
-    try {
-      await agent.com.atproto.server.requestEmailConfirmation()
-      setCurrentStep('StepTwo')
-    } catch (e: unknown) {
-      setError(cleanError(e))
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  const onVerifyEmail = async () => {
-    setError('')
-    setIsProcessing(true)
-    try {
-      await agent.com.atproto.server.confirmEmail({
-        email: (currentAccount?.email || '').trim(),
-        token: confirmationCode.trim(),
-      })
-    } catch (e: unknown) {
-      setError(cleanError(String(e)))
-      setIsProcessing(false)
-      return
-    }
-
-    setIsProcessing(false)
-    setDidVerify(true)
-    setCurrentStep('StepThree')
-  }
-
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Verify email dialog`)}
-      style={web({maxWidth: 450})}>
-      <View style={[a.gap_xl]}>
-        {currentStep === 'Reminder' && (
-          <View
-            style={[
-              a.rounded_sm,
-              a.align_center,
-              a.justify_center,
-              {height: 150},
-              t.atoms.bg_contrast_100,
-            ]}>
-            <EnvelopeIcon width={64} fill="white" />
-          </View>
-        )}
-        <View style={[a.gap_sm]}>
-          <Text style={[a.font_heavy, a.text_2xl]}>
-            {uiStrings[currentStep].title}
-          </Text>
-          {error ? (
-            <View style={[a.rounded_sm, a.overflow_hidden]}>
-              <ErrorMessage message={error} />
-            </View>
-          ) : null}
-          {currentStep === 'StepOne' ? (
-            <View>
-              {reasonText ? (
-                <View style={[a.gap_sm]}>
-                  <Text style={[a.text_md, a.leading_snug]}>{reasonText}</Text>
-                  <Text style={[a.text_md, a.leading_snug]}>
-                    Don't have access to{' '}
-                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
-                      {currentAccount?.email}
-                    </Text>
-                    ?{' '}
-                    <InlineLinkText
-                      to="#"
-                      label={_(msg`Change email address`)}
-                      style={[a.text_md, a.leading_snug]}
-                      onPress={e => {
-                        e.preventDefault()
-                        control.close(() => {
-                          changeEmailControl.open()
-                        })
-                        return false
-                      }}>
-                      <Trans>Change your email address</Trans>
-                    </InlineLinkText>
-                    .
-                  </Text>
-                </View>
-              ) : (
-                <Text style={[a.text_md, a.leading_snug]}>
-                  <Trans>
-                    You'll receive an email at{' '}
-                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
-                      {currentAccount?.email}
-                    </Text>{' '}
-                    to verify it's you.
-                  </Trans>{' '}
-                  <InlineLinkText
-                    to="#"
-                    label={_(msg`Change email address`)}
-                    style={[a.text_md, a.leading_snug]}
-                    onPress={e => {
-                      e.preventDefault()
-                      control.close(() => {
-                        changeEmailControl.open()
-                      })
-                      return false
-                    }}>
-                    <Trans>Need to change it?</Trans>
-                  </InlineLinkText>
-                </Text>
-              )}
-            </View>
-          ) : (
-            <Text style={[a.text_md, a.leading_snug]}>
-              {uiStrings[currentStep].message}
-            </Text>
-          )}
-        </View>
-        {currentStep === 'StepTwo' ? (
-          <View>
-            <TextField.LabelText>
-              <Trans>Confirmation Code</Trans>
-            </TextField.LabelText>
-            <TextField.Root>
-              <TextField.Input
-                label={_(msg`Confirmation code`)}
-                placeholder="XXXXX-XXXXX"
-                onChangeText={setConfirmationCode}
-              />
-            </TextField.Root>
-          </View>
-        ) : null}
-        <View style={[a.gap_sm, gtMobile && [a.flex_row_reverse, a.ml_auto]]}>
-          {currentStep === 'Reminder' ? (
-            <>
-              <Button
-                label={_(msg`Get started`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                onPress={() => setCurrentStep('StepOne')}>
-                <ButtonText>
-                  <Trans>Get started</Trans>
-                </ButtonText>
-              </Button>
-              <Button
-                label={_(msg`Maybe later`)}
-                accessibilityHint={_(msg`Snoozes the reminder`)}
-                variant="ghost"
-                color="secondary"
-                size="large"
-                disabled={isProcessing}
-                onPress={() => control.close()}>
-                <ButtonText>
-                  <Trans>Maybe later</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : currentStep === 'StepOne' ? (
-            <>
-              <Button
-                label={_(msg`Send confirmation email`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={isProcessing}
-                onPress={onSendEmail}>
-                <ButtonText>
-                  <Trans>Send confirmation</Trans>
-                </ButtonText>
-                {isProcessing ? (
-                  <Loader size="sm" style={[{color: 'white'}]} />
-                ) : null}
-              </Button>
-              <Button
-                label={_(msg`I have a code`)}
-                variant="solid"
-                color="secondary"
-                size="large"
-                disabled={isProcessing}
-                onPress={() => setCurrentStep('StepTwo')}>
-                <ButtonText>
-                  <Trans>I have a code</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : currentStep === 'StepTwo' ? (
-            <>
-              <Button
-                label={_(msg`Confirm`)}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={isProcessing}
-                onPress={onVerifyEmail}>
-                <ButtonText>
-                  <Trans>Confirm</Trans>
-                </ButtonText>
-                {isProcessing ? (
-                  <Loader size="sm" style={[{color: 'white'}]} />
-                ) : null}
-              </Button>
-              <Button
-                label={_(msg`Resend email`)}
-                variant="solid"
-                color="secondary"
-                size="large"
-                disabled={isProcessing}
-                onPress={() => {
-                  setConfirmationCode('')
-                  setCurrentStep('StepOne')
-                }}>
-                <ButtonText>
-                  <Trans>Resend email</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          ) : currentStep === 'StepThree' ? (
-            <Button
-              label={_(msg`Close`)}
-              variant="solid"
-              color="primary"
-              size="large"
-              onPress={() => control.close()}>
-              <ButtonText>
-                <Trans>Close</Trans>
-              </ButtonText>
-            </Button>
-          ) : null}
-        </View>
-      </View>
-    </Dialog.ScrollableInner>
-  )
-}

src/screens/Settings/InterestsSettings.tsx

@@ -113,13 +113,9 @@ function Inner({
           },
         )
         await Promise.all([
-          await qc.resetQueries({
+          qc.resetQueries({queryKey: createSuggestedStarterPacksQueryKey()}),
-            queryKey: createSuggestedStarterPacksQueryKey(),
+          qc.resetQueries({queryKey: createGetSuggestedFeedsQueryKey()}),
-          }),
+          qc.resetQueries({queryKey: createGetSuggestedUsersQueryKey({})}),
-          await qc.resetQueries({queryKey: createGetSuggestedFeedsQueryKey()}),
-          await qc.resetQueries({
-            queryKey: createGetSuggestedUsersQueryKey({}),
-          }),
         ])
 
         Toast.show(

src/screens/Settings/NotificationSettings/LikesOnRepostsNotificationSettings.tsx

@@ -38,7 +38,7 @@ export function LikesOnRepostsNotificationSettingsScreen({}: Props) {
             <SettingsList.ItemIcon icon={LikeRepostIcon} />
             <ItemTextWithSubtitle
               bold
-              titleText={<Trans>Likes on your reposts</Trans>}
+              titleText={<Trans>Likes of your reposts</Trans>}
               subtitleText={
                 <Trans>
                   Get notifications when people like posts that you've reposted.

src/screens/Settings/NotificationSettings/components/PreferenceControls.tsx

@@ -98,7 +98,7 @@ export function Inner({
     <View style={[a.px_xl, a.pt_md, a.gap_sm]}>
       <Toggle.Group
         type="checkbox"
-        label={_(`Select your preferred notification channels`)}
+        label={_(msg`Select your preferred notification channels`)}
         values={channels}
         onChange={onChangeChannels}>
         <View style={[a.gap_sm]}>
@@ -141,10 +141,12 @@ export function Inner({
       {'filter' in preference && (
         <>
           <Divider />
-          <Text style={[a.font_bold, a.text_md]}>From</Text>
+          <Text style={[a.font_bold, a.text_md]}>
+            <Trans>From</Trans>
+          </Text>
           <Toggle.Group
             type="radio"
-            label={_('Filter who you receive notifications from')}
+            label={_(msg`Filter who you receive notifications from`)}
             values={[preference.filter]}
             onChange={onChangeFilter}
             disabled={channels.length === 0}>

src/screens/Settings/NotificationSettings/index.tsx

@@ -117,6 +117,28 @@ export function NotificationSettingsScreen({}: Props) {
             </View>
           )}
           <View style={[a.gap_sm]}>
+            <SettingsList.LinkItem
+              label={_(msg`Settings for like notifications`)}
+              to={{screen: 'LikeNotificationSettings'}}
+              contentContainerStyle={[a.align_start]}>
+              <SettingsList.ItemIcon icon={HeartIcon} />
+              <ItemTextWithSubtitle
+                titleText={<Trans>Likes</Trans>}
+                subtitleText={<SettingPreview preference={settings?.like} />}
+                showSkeleton={!settings}
+              />
+            </SettingsList.LinkItem>
+            <SettingsList.LinkItem
+              label={_(msg`Settings for new follower notifications`)}
+              to={{screen: 'NewFollowerNotificationSettings'}}
+              contentContainerStyle={[a.align_start]}>
+              <SettingsList.ItemIcon icon={PersonPlusIcon} />
+              <ItemTextWithSubtitle
+                titleText={<Trans>New followers</Trans>}
+                subtitleText={<SettingPreview preference={settings?.follow} />}
+                showSkeleton={!settings}
+              />
+            </SettingsList.LinkItem>
             <SettingsList.LinkItem
               label={_(msg`Settings for reply notifications`)}
               to={{screen: 'ReplyNotificationSettings'}}
@@ -150,17 +172,6 @@ export function NotificationSettingsScreen({}: Props) {
                 showSkeleton={!settings}
               />
             </SettingsList.LinkItem>
-            <SettingsList.LinkItem
-              label={_(msg`Settings for like notifications`)}
-              to={{screen: 'LikeNotificationSettings'}}
-              contentContainerStyle={[a.align_start]}>
-              <SettingsList.ItemIcon icon={HeartIcon} />
-              <ItemTextWithSubtitle
-                titleText={<Trans>Likes</Trans>}
-                subtitleText={<SettingPreview preference={settings?.like} />}
-                showSkeleton={!settings}
-              />
-            </SettingsList.LinkItem>
             <SettingsList.LinkItem
               label={_(msg`Settings for repost notifications`)}
               to={{screen: 'RepostNotificationSettings'}}
@@ -172,17 +183,6 @@ export function NotificationSettingsScreen({}: Props) {
                 showSkeleton={!settings}
               />
             </SettingsList.LinkItem>
-            <SettingsList.LinkItem
-              label={_(msg`Settings for new follower notifications`)}
-              to={{screen: 'NewFollowerNotificationSettings'}}
-              contentContainerStyle={[a.align_start]}>
-              <SettingsList.ItemIcon icon={PersonPlusIcon} />
-              <ItemTextWithSubtitle
-                titleText={<Trans>New followers</Trans>}
-                subtitleText={<SettingPreview preference={settings?.follow} />}
-                showSkeleton={!settings}
-              />
-            </SettingsList.LinkItem>
             {/* <SettingsList.LinkItem
               label={_(msg`Settings for activity alerts`)}
               to={{screen: 'ActivityNotificationSettings'}}
@@ -199,13 +199,13 @@ export function NotificationSettingsScreen({}: Props) {
             </SettingsList.LinkItem> */}
             <SettingsList.LinkItem
               label={_(
-                msg`Settings for notifications for likes on your reposts`,
+                msg`Settings for notifications for likes of your reposts`,
               )}
               to={{screen: 'LikesOnRepostsNotificationSettings'}}
               contentContainerStyle={[a.align_start]}>
               <SettingsList.ItemIcon icon={LikeRepostIcon} />
               <ItemTextWithSubtitle
-                titleText={<Trans>Likes on your reposts</Trans>}
+                titleText={<Trans>Likes of your reposts</Trans>}
                 subtitleText={
                   <SettingPreview preference={settings?.likeViaRepost} />
                 }

src/state/modals/index.tsx

@@ -43,13 +43,6 @@ export interface ChangePasswordModal {
   name: 'change-password'
 }
 
-export interface LinkWarningModal {
-  name: 'link-warning'
-  text: string
-  href: string
-  share?: boolean
-}
-
 export type Modal =
   // Account
   | DeleteAccountModal
@@ -67,9 +60,6 @@ export type Modal =
   | WaitlistModal
   | InviteCodesModal
 
-  // Generic
-  | LinkWarningModal
-
 const ModalContext = React.createContext<{
   isModalActive: boolean
   activeModals: Modal[]

src/view/com/modals/EditProfile.tsx

@@ -1,335 +0,0 @@
-import {useCallback, useState} from 'react'
-import {
-  ActivityIndicator,
-  KeyboardAvoidingView,
-  ScrollView,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import Animated, {FadeOut} from 'react-native-reanimated'
-import {LinearGradient} from 'expo-linear-gradient'
-import {type AppBskyActorDefs} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {MAX_DESCRIPTION, MAX_DISPLAY_NAME, urls} from '#/lib/constants'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {compressIfNeeded} from '#/lib/media/manip'
-import {type PickerImage} from '#/lib/media/picker.shared'
-import {cleanError} from '#/lib/strings/errors'
-import {enforceLen} from '#/lib/strings/helpers'
-import {colors, gradients, s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
-import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
-import {useProfileUpdateMutation} from '#/state/queries/profile'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
-import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
-import {UserBanner} from '#/view/com/util/UserBanner'
-import {Admonition} from '#/components/Admonition'
-import {InlineLinkText} from '#/components/Link'
-import {useSimpleVerificationState} from '#/components/verification'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-
-const AnimatedTouchableOpacity =
-  Animated.createAnimatedComponent(TouchableOpacity)
-
-export const snapPoints = ['fullscreen']
-
-export function Component({
-  profile,
-  onUpdate,
-}: {
-  profile: AppBskyActorDefs.ProfileViewDetailed
-  onUpdate?: () => void
-}) {
-  const pal = usePalette('default')
-  const theme = useTheme()
-  const {_} = useLingui()
-  const {closeModal} = useModalControls()
-  const updateMutation = useProfileUpdateMutation()
-  const [imageError, setImageError] = useState<string>('')
-  const initialDisplayName = profile.displayName || ''
-  const [displayName, setDisplayName] = useState<string>(
-    profile.displayName || '',
-  )
-  const [description, setDescription] = useState<string>(
-    profile.description || '',
-  )
-  const [userBanner, setUserBanner] = useState<string | undefined | null>(
-    profile.banner,
-  )
-  const [userAvatar, setUserAvatar] = useState<string | undefined | null>(
-    profile.avatar,
-  )
-  const [newUserBanner, setNewUserBanner] = useState<
-    PickerImage | undefined | null
-  >()
-  const [newUserAvatar, setNewUserAvatar] = useState<
-    PickerImage | undefined | null
-  >()
-  const onPressCancel = () => {
-    closeModal()
-  }
-  const onSelectNewAvatar = useCallback(
-    async (img: PickerImage | null) => {
-      setImageError('')
-      if (img === null) {
-        setNewUserAvatar(null)
-        setUserAvatar(null)
-        return
-      }
-      try {
-        const finalImg = await compressIfNeeded(img, 1000000)
-        setNewUserAvatar(finalImg)
-        setUserAvatar(finalImg.path)
-      } catch (e: any) {
-        setImageError(cleanError(e))
-      }
-    },
-    [setNewUserAvatar, setUserAvatar, setImageError],
-  )
-
-  const onSelectNewBanner = useCallback(
-    async (img: PickerImage | null) => {
-      setImageError('')
-      if (!img) {
-        setNewUserBanner(null)
-        setUserBanner(null)
-        return
-      }
-      try {
-        const finalImg = await compressIfNeeded(img, 1000000)
-        setNewUserBanner(finalImg)
-        setUserBanner(finalImg.path)
-      } catch (e: any) {
-        setImageError(cleanError(e))
-      }
-    },
-    [setNewUserBanner, setUserBanner, setImageError],
-  )
-
-  const onPressSave = useCallback(async () => {
-    setImageError('')
-    try {
-      await updateMutation.mutateAsync({
-        profile,
-        updates: {
-          displayName,
-          description,
-        },
-        newUserAvatar,
-        newUserBanner,
-      })
-      Toast.show(_(msg({message: 'Profile updated', context: 'toast'})))
-      onUpdate?.()
-      closeModal()
-    } catch (e: any) {
-      logger.error('Failed to update user profile', {message: String(e)})
-    }
-  }, [
-    updateMutation,
-    profile,
-    onUpdate,
-    closeModal,
-    displayName,
-    description,
-    newUserAvatar,
-    newUserBanner,
-    setImageError,
-    _,
-  ])
-  const verification = useSimpleVerificationState({
-    profile,
-  })
-
-  return (
-    <KeyboardAvoidingView style={s.flex1} behavior="height">
-      <ScrollView style={[pal.view]} testID="editProfileModal">
-        <Text style={[styles.title, pal.text]}>
-          <Trans>Edit my profile</Trans>
-        </Text>
-        <View style={styles.photos}>
-          <UserBanner
-            banner={userBanner}
-            onSelectNewBanner={onSelectNewBanner}
-          />
-          <View style={[styles.avi, {borderColor: pal.colors.background}]}>
-            <EditableUserAvatar
-              size={80}
-              avatar={userAvatar}
-              onSelectNewAvatar={onSelectNewAvatar}
-            />
-          </View>
-        </View>
-        {updateMutation.isError && (
-          <View style={styles.errorContainer}>
-            <ErrorMessage message={cleanError(updateMutation.error)} />
-          </View>
-        )}
-        {imageError !== '' && (
-          <View style={styles.errorContainer}>
-            <ErrorMessage message={imageError} />
-          </View>
-        )}
-        <View style={styles.form}>
-          <View>
-            <Text style={[styles.label, pal.text]}>
-              <Trans>Display Name</Trans>
-            </Text>
-            <TextInput
-              testID="editProfileDisplayNameInput"
-              style={[styles.textInput, pal.border, pal.text]}
-              placeholder={_(msg`e.g. Alice Roberts`)}
-              placeholderTextColor={colors.gray4}
-              value={displayName}
-              onChangeText={v =>
-                setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))
-              }
-              accessible={true}
-              accessibilityLabel={_(msg`Display name`)}
-              accessibilityHint={_(msg`Edit your display name`)}
-            />
-
-            {verification.isVerified &&
-              verification.role === 'default' &&
-              displayName !== initialDisplayName && (
-                <View style={{paddingTop: 8}}>
-                  <Admonition type="error">
-                    <Trans>
-                      You are verified. You will lose your verification status
-                      if you change your display name.{' '}
-                      <InlineLinkText
-                        label={_(msg`Learn more`)}
-                        to={urls.website.blog.initialVerificationAnnouncement}>
-                        <Trans>Learn more.</Trans>
-                      </InlineLinkText>
-                    </Trans>
-                  </Admonition>
-                </View>
-              )}
-          </View>
-          <View style={s.pb10}>
-            <Text style={[styles.label, pal.text]}>
-              <Trans>Description</Trans>
-            </Text>
-            <TextInput
-              testID="editProfileDescriptionInput"
-              style={[styles.textArea, pal.border, pal.text]}
-              placeholder={_(msg`e.g. Artist, dog-lover, and avid reader.`)}
-              placeholderTextColor={colors.gray4}
-              keyboardAppearance={theme.colorScheme}
-              multiline
-              value={description}
-              onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
-              accessible={true}
-              accessibilityLabel={_(msg`Description`)}
-              accessibilityHint={_(msg`Edit your profile description`)}
-            />
-          </View>
-          {updateMutation.isPending ? (
-            <View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}>
-              <ActivityIndicator />
-            </View>
-          ) : (
-            <TouchableOpacity
-              testID="editProfileSaveBtn"
-              style={s.mt10}
-              onPress={onPressSave}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Save`)}
-              accessibilityHint={_(msg`Saves any changes to your profile`)}>
-              <LinearGradient
-                colors={[gradients.blueLight.start, gradients.blueLight.end]}
-                start={{x: 0, y: 0}}
-                end={{x: 1, y: 1}}
-                style={[styles.btn]}>
-                <Text style={[s.white, s.bold]}>
-                  <Trans>Save Changes</Trans>
-                </Text>
-              </LinearGradient>
-            </TouchableOpacity>
-          )}
-          {!updateMutation.isPending && (
-            <AnimatedTouchableOpacity
-              exiting={!isWeb ? FadeOut : undefined}
-              testID="editProfileCancelBtn"
-              style={s.mt5}
-              onPress={onPressCancel}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Cancel profile editing`)}
-              accessibilityHint=""
-              onAccessibilityEscape={onPressCancel}>
-              <View style={[styles.btn]}>
-                <Text style={[s.black, s.bold, pal.text]}>
-                  <Trans>Cancel</Trans>
-                </Text>
-              </View>
-            </AnimatedTouchableOpacity>
-          )}
-        </View>
-      </ScrollView>
-    </KeyboardAvoidingView>
-  )
-}
-
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    fontWeight: '600',
-    fontSize: 24,
-    marginBottom: 18,
-  },
-  label: {
-    fontWeight: '600',
-    paddingHorizontal: 4,
-    paddingBottom: 4,
-    marginTop: 20,
-  },
-  form: {
-    paddingHorizontal: 14,
-  },
-  textInput: {
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    fontSize: 16,
-  },
-  textArea: {
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    fontSize: 16,
-    height: 120,
-    textAlignVertical: 'top',
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 10,
-    marginBottom: 10,
-  },
-  avi: {
-    position: 'absolute',
-    top: 80,
-    left: 24,
-    width: 84,
-    height: 84,
-    borderWidth: 2,
-    borderRadius: 42,
-  },
-  photos: {
-    marginBottom: 36,
-    marginHorizontal: -14,
-  },
-  errorContainer: {marginTop: 20},
-})

src/view/com/modals/LinkWarning.tsx

@@ -1,180 +0,0 @@
-import React from 'react'
-import {SafeAreaView, StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useOpenLink} from '#/lib/hooks/useOpenLink'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {shareUrl} from '#/lib/sharing'
-import {isPossiblyAUrl, splitApexDomain} from '#/lib/strings/url-helpers'
-import {colors, s} from '#/lib/styles'
-import {isWeb} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
-import {Button} from '#/view/com/util/forms/Button'
-import {Text} from '#/view/com/util/text/Text'
-import {ScrollView} from './util'
-
-export const snapPoints = ['50%']
-
-export function Component({
-  text,
-  href,
-  share,
-}: {
-  text: string
-  href: string
-  share?: boolean
-}) {
-  const pal = usePalette('default')
-  const {closeModal} = useModalControls()
-  const {isMobile} = useWebMediaQueries()
-  const {_} = useLingui()
-  const potentiallyMisleading = isPossiblyAUrl(text)
-  const openLink = useOpenLink()
-
-  const onPressVisit = () => {
-    closeModal()
-    if (share) {
-      shareUrl(href)
-    } else {
-      openLink(href, false, true)
-    }
-  }
-
-  return (
-    <SafeAreaView style={[s.flex1, pal.view]}>
-      <ScrollView
-        testID="linkWarningModal"
-        style={[s.flex1, isMobile && {paddingHorizontal: 18}]}>
-        <View style={styles.titleSection}>
-          {potentiallyMisleading ? (
-            <>
-              <FontAwesomeIcon
-                icon="circle-exclamation"
-                color={pal.colors.text}
-                size={18}
-              />
-              <Text type="title-lg" style={[pal.text, styles.title]}>
-                <Trans>Potentially Misleading Link</Trans>
-              </Text>
-            </>
-          ) : (
-            <Text type="title-lg" style={[pal.text, styles.title]}>
-              <Trans>Leaving Bluesky</Trans>
-            </Text>
-          )}
-        </View>
-
-        <View style={{gap: 10}}>
-          <Text type="lg" style={pal.text}>
-            <Trans>This link is taking you to the following website:</Trans>
-          </Text>
-
-          <LinkBox href={href} />
-
-          {potentiallyMisleading && (
-            <Text type="lg" style={pal.text}>
-              <Trans>Make sure this is where you intend to go!</Trans>
-            </Text>
-          )}
-        </View>
-
-        <View style={[styles.btnContainer, isMobile && {paddingBottom: 40}]}>
-          <Button
-            testID="confirmBtn"
-            type="primary"
-            onPress={onPressVisit}
-            accessibilityLabel={share ? _(msg`Share Link`) : _(msg`Visit Site`)}
-            accessibilityHint={
-              share
-                ? _(msg`Shares the linked website`)
-                : _(msg`Opens the linked website`)
-            }
-            label={share ? _(msg`Share Link`) : _(msg`Visit Site`)}
-            labelContainerStyle={{justifyContent: 'center', padding: 4}}
-            labelStyle={[s.f18]}
-          />
-          <Button
-            testID="cancelBtn"
-            type="default"
-            onPress={() => {
-              closeModal()
-            }}
-            accessibilityLabel={_(msg`Cancel`)}
-            accessibilityHint={_(msg`Cancels opening the linked website`)}
-            label={_(msg`Cancel`)}
-            labelContainerStyle={{justifyContent: 'center', padding: 4}}
-            labelStyle={[s.f18]}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  )
-}
-
-function LinkBox({href}: {href: string}) {
-  const pal = usePalette('default')
-  const [scheme, hostname, rest] = React.useMemo(() => {
-    try {
-      const urlp = new URL(href)
-      const [subdomain, apexdomain] = splitApexDomain(urlp.hostname)
-      return [
-        urlp.protocol + '//' + subdomain,
-        apexdomain,
-        urlp.pathname + urlp.search + urlp.hash,
-      ]
-    } catch {
-      return ['', href, '']
-    }
-  }, [href])
-  return (
-    <View style={[pal.view, pal.border, styles.linkBox]}>
-      <Text type="lg" style={pal.textLight}>
-        {scheme}
-        <Text type="lg-bold" style={pal.text}>
-          {hostname}
-        </Text>
-        {rest}
-      </Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingBottom: isWeb ? 0 : 40,
-  },
-  titleSection: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 6,
-    paddingTop: isWeb ? 0 : 4,
-    paddingBottom: isWeb ? 14 : 10,
-  },
-  title: {
-    textAlign: 'center',
-    fontWeight: '600',
-  },
-  linkBox: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 6,
-    borderWidth: 1,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.blue3,
-  },
-  btnContainer: {
-    paddingTop: 20,
-    gap: 6,
-  },
-})

src/view/com/modals/Modal.tsx

@@ -13,7 +13,6 @@ import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
-import * as LinkWarningModal from './LinkWarning'
 import * as UserAddRemoveListsModal from './UserAddRemoveLists'
 
 const DEFAULT_SNAPPOINTS = ['90%']
@@ -68,9 +67,6 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'change-password') {
     snapPoints = ChangePasswordModal.snapPoints
     element = <ChangePasswordModal.Component />
-  } else if (activeModal?.name === 'link-warning') {
-    snapPoints = LinkWarningModal.snapPoints
-    element = <LinkWarningModal.Component {...activeModal} />
   } else {
     return null
   }

src/view/com/modals/Modal.web.tsx

@@ -12,7 +12,6 @@ import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
-import * as LinkWarningModal from './LinkWarning'
 import * as UserAddRemoveLists from './UserAddRemoveLists'
 
 export function ModalsContainer() {
@@ -65,8 +64,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <PostLanguagesSettingsModal.Component />
   } else if (modal.name === 'change-password') {
     element = <ChangePasswordModal.Component />
-  } else if (modal.name === 'link-warning') {
-    element = <LinkWarningModal.Component {...modal} />
   } else {
     return null
   }

src/view/com/util/Link.tsx

@@ -30,6 +30,7 @@ import {emitSoftReset} from '#/state/events'
 import {useModalControls} from '#/state/modals'
 import {WebAuxClickWrapper} from '#/view/com/util/WebAuxClickWrapper'
 import {useTheme} from '#/alf'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {router} from '../../../routes'
 import {PressableWithHover} from './PressableWithHover'
 import {Text} from './text/Text'
@@ -189,7 +190,8 @@ export const TextLink = memo(function TextLink({
   onBeforePress?: () => void
 } & TextProps) {
   const navigation = useNavigationDeduped()
-  const {openModal, closeModal} = useModalControls()
+  const {closeModal} = useModalControls()
+  const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
 
   if (!disableMismatchWarning && typeof text !== 'string') {
@@ -211,9 +213,8 @@ export const TextLink = memo(function TextLink({
         linkRequiresWarning(href, typeof text === 'string' ? text : '')
       if (requiresWarning) {
         e?.preventDefault?.()
-        openModal({
+        linkWarningDialogControl.open({
-          name: 'link-warning',
+          displayText: typeof text === 'string' ? text : '',
-          text: typeof text === 'string' ? text : '',
           href,
         })
       }
@@ -245,13 +246,13 @@ export const TextLink = memo(function TextLink({
       onBeforePress,
       onPressProp,
       closeModal,
-      openModal,
       navigation,
       href,
       text,
       disableMismatchWarning,
       navigationAction,
       openLink,
+      linkWarningDialogControl,
     ],
   )
   const hrefAttrs = useMemo(() => {

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -42,6 +42,7 @@ import {Takendown} from '#/screens/Takendown'
 import {atoms as a, useLayoutBreakpoints} from '#/alf'
 import {EmailDialog} from '#/components/dialogs/EmailDialog'
 import {InAppBrowserConsentDialog} from '#/components/dialogs/InAppBrowserConsent'
+import {LinkWarningDialog} from '#/components/dialogs/LinkWarning'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {SigninDialog} from '#/components/dialogs/Signin'
@@ -179,6 +180,7 @@ function NativeStackNavigator({
       <MutedWordsDialog />
       <SigninDialog />
       <EmailDialog />
+      <LinkWarningDialog />
       {!isWeb && <InAppBrowserConsentDialog />}
       <PortalOutlet />
       <BottomSheetOutlet />