Modernize in-app browser consent dialog (#8191)

* add stateful dialog control hook

* add new alf'd consent

* make secondary_inverted buttons clearer

* contingency for opening a link from another dialog

* rm old modal

* Differentiate buttons more

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/modals/InAppBrowserConsent.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useOpenLink} from '#/lib/hooks/useOpenLink'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {s} from '#/lib/styles'
-import {useModalControls} from '#/state/modals'
-import {useSetInAppBrowser} from '#/state/preferences/in-app-browser'
-import {ScrollView} from '#/view/com/modals/util'
-import {Button} from '#/view/com/util/forms/Button'
-import {Text} from '#/view/com/util/text/Text'
-
-export const snapPoints = [350]
-
-export function Component({href}: {href: string}) {
-  const pal = usePalette('default')
-  const {closeModal} = useModalControls()
-  const {_} = useLingui()
-  const setInAppBrowser = useSetInAppBrowser()
-  const openLink = useOpenLink()
-
-  const onUseIAB = React.useCallback(() => {
-    setInAppBrowser(true)
-    closeModal()
-    openLink(href, true)
-  }, [closeModal, setInAppBrowser, href, openLink])
-
-  const onUseLinking = React.useCallback(() => {
-    setInAppBrowser(false)
-    closeModal()
-    openLink(href, false)
-  }, [closeModal, setInAppBrowser, href, openLink])
-
-  return (
-    <ScrollView
-      testID="inAppBrowserConsentModal"
-      style={[s.flex1, pal.view, {paddingHorizontal: 20, paddingTop: 10}]}>
-      <Text style={[pal.text, styles.title]}>
-        <Trans>How should we open this link?</Trans>
-      </Text>
-      <Text style={pal.text}>
-        <Trans>
-          Your choice will be saved, but can be changed later in settings.
-        </Trans>
-      </Text>
-      <View style={[styles.btnContainer]}>
-        <Button
-          testID="confirmBtn"
-          type="inverted"
-          onPress={onUseIAB}
-          accessibilityLabel={_(msg`Use in-app browser`)}
-          accessibilityHint=""
-          label={_(msg`Use in-app browser`)}
-          labelContainerStyle={{justifyContent: 'center', padding: 8}}
-          labelStyle={[s.f18]}
-        />
-        <Button
-          testID="confirmBtn"
-          type="inverted"
-          onPress={onUseLinking}
-          accessibilityLabel={_(msg`Use my default browser`)}
-          accessibilityHint=""
-          label={_(msg`Use my default browser`)}
-          labelContainerStyle={{justifyContent: 'center', padding: 8}}
-          labelStyle={[s.f18]}
-        />
-        <Button
-          testID="cancelBtn"
-          type="default"
-          onPress={() => {
-            closeModal()
-          }}
-          accessibilityLabel={_(msg`Cancel`)}
-          accessibilityHint=""
-          label={_(msg`Cancel`)}
-          labelContainerStyle={{justifyContent: 'center', padding: 8}}
-          labelStyle={[s.f18]}
-        />
-      </View>
-    </ScrollView>
-  )
-}
-
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    fontWeight: '600',
-    fontSize: 24,
-    marginBottom: 12,
-  },
-  btnContainer: {
-    marginTop: 20,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    rowGap: 10,
-  },
-})

src/view/com/modals/Modal.tsx

@@ -11,7 +11,6 @@ import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as EditProfileModal from './EditProfile'
-import * as InAppBrowserConsentModal from './InAppBrowserConsent'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
@@ -76,9 +75,6 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'link-warning') {
     snapPoints = LinkWarningModal.snapPoints
     element = <LinkWarningModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'in-app-browser-consent') {
-    snapPoints = InAppBrowserConsentModal.snapPoints
-    element = <InAppBrowserConsentModal.Component {...activeModal} />
   } else {
     return null
   }

src/view/shell/index.tsx

@@ -25,6 +25,7 @@ import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, select, useTheme} from '#/alf'
 import {setSystemUITheme} from '#/alf/util/systemUI'
+import {InAppBrowserConsentDialog} from '#/components/dialogs/InAppBrowserConsent'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -151,6 +152,7 @@ function ShellInner() {
       <ModalsContainer />
       <MutedWordsDialog />
       <SigninDialog />
+      <InAppBrowserConsentDialog />
       <Lightbox />
       <PortalOutlet />
       <BottomSheetOutlet />