Move Takendown and Deactivated screens out to the shell alongside AA (#9538)

(cherry picked from commit d3923c1f2e)

src/ageAssurance/components/NoAccessScreen.tsx

@@ -122,11 +122,14 @@ export function NoAccessScreen() {
 
   return (
     <>
+      <View style={[a.util_screen_outer, a.flex_1]}>
         <ScrollView
           contentContainerStyle={[
             a.px_2xl,
             {
-            paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
+              paddingTop: isWeb
+                ? a.p_5xl.padding
+                : insets.top + a.p_2xl.padding,
               paddingBottom: 100,
             },
           ]}>
@@ -187,15 +190,15 @@ export function NoAccessScreen() {
                 </Text>
                 <Text style={[textStyles]}>
                   <Trans>
-                  In order to provide an age-appropriate experience, we need to
-                  know your birthdate. This is a one-time thing, and your data
-                  will be kept private.
+                    In order to provide an age-appropriate experience, we need
+                    to know your birthdate. This is a one-time thing, and your
+                    data will be kept private.
                   </Trans>
                 </Text>
                 <Text style={[textStyles]}>
                   <Trans>
-                  Set your birthdate below and we'll get you back to posting and
-                  exploring in no time!
+                    Set your birthdate below and we'll get you back to posting
+                    and exploring in no time!
                   </Trans>
                 </Text>
                 <Button
@@ -239,6 +242,7 @@ export function NoAccessScreen() {
             </View>
           </View>
         </ScrollView>
+      </View>
 
       <BirthDateSettingsDialog control={birthdateControl} />
 

src/screens/Deactivated.tsx

@@ -3,7 +3,6 @@ import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
@@ -15,7 +14,6 @@ import {
   useSession,
   useSessionApi,
 } from '#/state/session'
-import {useSetMinimalShellMode} from '#/state/shell'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
@@ -37,19 +35,12 @@ export function Deactivated() {
   const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
   const {setShowLoggedOut} = useLoggedOutViewControls()
   const hasOtherAccounts = accounts.length > 1
-  const setMinimalShellMode = useSetMinimalShellMode()
   const {logoutCurrentAccount} = useSessionApi()
   const agent = useAgent()
   const [pending, setPending] = React.useState(false)
   const [error, setError] = React.useState<string | undefined>()
   const queryClient = useQueryClient()
 
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(true)
-    }, [setMinimalShellMode]),
-  )
-
   const onSelectAccount = React.useCallback(
     (account: SessionAccount) => {
       if (account.did !== currentAccount?.did) {

src/screens/Takendown.tsx

@@ -1,6 +1,5 @@
 import {useMemo, useState} from 'react'
-import {Modal, View} from 'react-native'
-import {SystemBars} from 'react-native-edge-to-edge'
+import {View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {type ComAtprotoAdminDefs, ToolsOzoneReportDefs} from '@atproto/api'
@@ -15,14 +14,14 @@ import {
 } from '#/lib/constants'
 import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
 import {cleanError} from '#/lib/strings/errors'
-import {isIOS, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {Logo} from '#/view/icons/Logo'
-import {atoms as a, native, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
-import {InlineLinkText} from '#/components/Link'
+import {SimpleInlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {P, Text} from '#/components/Typography'
 
@@ -130,12 +129,7 @@ export function Takendown() {
   useEnableKeyboardController(true)
 
   return (
-    <Modal
-      visible
-      animationType={native('slide')}
-      presentationStyle="formSheet"
-      style={[web(a.util_screen_outer)]}>
-      {isIOS && <SystemBars style={{statusBar: 'light'}} />}
+    <View style={[a.util_screen_outer, a.flex_1]}>
       <KeyboardAwareScrollView style={[a.flex_1, t.atoms.bg]} centerContent>
         <View
           style={[
@@ -222,13 +216,12 @@ export function Takendown() {
               <P style={[t.atoms.text_contrast_medium]}>
                 <Trans>
                   Your account was found to be in violation of the{' '}
-                  <InlineLinkText
+                  <SimpleInlineLinkText
                     label={_(msg`Bluesky Social Terms of Service`)}
                     to="https://bsky.social/about/support/tos"
-                    style={[a.text_md, a.leading_normal]}
-                    overridePresentation>
+                    style={[a.text_md, a.leading_normal]}>
                     Bluesky Social Terms of Service
-                  </InlineLinkText>
+                  </SimpleInlineLinkText>
                   . You have been sent an email outlining the specific violation
                   and suspension period, if applicable. You can appeal this
                   decision if you believe it was made in error.
@@ -267,6 +260,6 @@ export function Takendown() {
           </View>
         </View>
       )}
-    </Modal>
+    </View>
   )
 }

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -35,10 +35,8 @@ import {
   useLoggedOutViewControls,
 } from '#/state/shell/logged-out'
 import {LoggedOut} from '#/view/com/auth/LoggedOut'
-import {Deactivated} from '#/screens/Deactivated'
 import {Onboarding} from '#/screens/Onboarding'
 import {SignupQueued} from '#/screens/SignupQueued'
-import {Takendown} from '#/screens/Takendown'
 import {atoms as a, useLayoutBreakpoints} from '#/alf'
 import {PolicyUpdateOverlay} from '#/components/PolicyUpdateOverlay'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
@@ -119,15 +117,9 @@ function NativeStackNavigator({
   if (hasSession && currentAccount?.signupQueued) {
     return <SignupQueued />
   }
-  if (hasSession && currentAccount?.status === 'takendown') {
-    return <Takendown />
-  }
   if (showLoggedOut) {
     return <LoggedOut onDismiss={() => setShowLoggedOut(false)} />
   }
-  if (currentAccount?.status === 'deactivated') {
-    return <Deactivated />
-  }
   if (onboardingState.isActive) {
     return <Onboarding />
   }

src/view/shell/index.tsx

@@ -23,6 +23,8 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {Deactivated} from '#/screens/Deactivated'
+import {Takendown} from '#/screens/Takendown'
 import {atoms as a, select, useTheme} from '#/alf'
 import {setSystemUITheme} from '#/alf/util/systemUI'
 import {AgeAssuranceRedirectDialog} from '#/components/ageAssurance/AgeAssuranceRedirectDialog'
@@ -195,6 +197,7 @@ function DrawerLayout({children}: {children: React.ReactNode}) {
 export function Shell() {
   const t = useTheme()
   const aa = useAgeAssurance()
+  const {currentAccount} = useSession()
   const fullyExpandedCount = useDialogFullyExpandedCountContext()
 
   useIntentHandler()
@@ -214,6 +217,12 @@ export function Shell() {
           navigationBar: t.name !== 'light' ? 'light' : 'dark',
         }}
       />
+      {currentAccount?.status === 'takendown' ? (
+        <Takendown />
+      ) : currentAccount?.status === 'deactivated' ? (
+        <Deactivated />
+      ) : (
+        <>
           {aa.state.access === aa.Access.None ? (
             <NoAccessScreen />
           ) : (
@@ -223,6 +232,8 @@ export function Shell() {
           )}
 
           <RedirectOverlay />
+        </>
+      )}
     </View>
   )
 }

src/view/shell/index.web.tsx

@@ -8,12 +8,15 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type NavigationProp} from '#/lib/routes/types'
+import {useSession} from '#/state/session'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {Deactivated} from '#/screens/Deactivated'
+import {Takendown} from '#/screens/Takendown'
 import {atoms as a, select, useTheme} from '#/alf'
 import {AgeAssuranceRedirectDialog} from '#/components/ageAssurance/AgeAssuranceRedirectDialog'
 import {EmailDialog} from '#/components/dialogs/EmailDialog'
@@ -141,8 +144,15 @@ function ShellInner() {
 export function Shell() {
   const t = useTheme()
   const aa = useAgeAssurance()
+  const {currentAccount} = useSession()
   return (
     <View style={[a.util_screen_outer, t.atoms.bg]}>
+      {currentAccount?.status === 'takendown' ? (
+        <Takendown />
+      ) : currentAccount?.status === 'deactivated' ? (
+        <Deactivated />
+      ) : (
+        <>
           {aa.state.access === aa.Access.None ? (
             <NoAccessScreen />
           ) : (
@@ -152,6 +162,8 @@ export function Shell() {
           )}
 
           <RedirectOverlay />
+        </>
+      )}
     </View>
   )
 }