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

+101 -97

src/ageAssurance/components/NoAccessScreen.tsx

··· 122 122 123 123 return ( 124 124 <> 125 - <ScrollView 126 - contentContainerStyle={[ 127 - a.px_2xl, 128 - { 129 - paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding, 130 - paddingBottom: 100, 131 - }, 132 - ]}> 133 - <View 134 - style={[ 135 - a.mx_auto, 136 - a.w_full, 137 - web({ 138 - maxWidth: 380, 139 - paddingTop: gtPhone ? '8vh' : undefined, 140 - }), 125 + <View style={[a.util_screen_outer, a.flex_1]}> 126 + <ScrollView 127 + contentContainerStyle={[ 128 + a.px_2xl, 141 129 { 142 - gap: 32, 130 + paddingTop: isWeb 131 + ? a.p_5xl.padding 132 + : insets.top + a.p_2xl.padding, 133 + paddingBottom: 100, 143 134 }, 144 135 ]}> 145 - <View style={[a.align_start]}> 146 - <AgeAssuranceBadge /> 147 - </View> 136 + <View 137 + style={[ 138 + a.mx_auto, 139 + a.w_full, 140 + web({ 141 + maxWidth: 380, 142 + paddingTop: gtPhone ? '8vh' : undefined, 143 + }), 144 + { 145 + gap: 32, 146 + }, 147 + ]}> 148 + <View style={[a.align_start]}> 149 + <AgeAssuranceBadge /> 150 + </View> 151 + 152 + {hasDeclaredAge ? ( 153 + <> 154 + {isAARegion ? ( 155 + <> 156 + <View style={[a.gap_lg]}> 157 + <Text style={[textStyles]}> 158 + <Trans>Hey there!</Trans> 159 + </Text> 160 + <Text style={[textStyles]}> 161 + <Trans> 162 + You are accessing Bluesky from a region that legally 163 + requires us to verify your age before allowing you to 164 + access the app. 165 + </Trans> 166 + </Text> 167 + 168 + {!isBlocked && birthdateUpdateText} 169 + </View> 148 170 149 - {hasDeclaredAge ? ( 150 - <> 151 - {isAARegion ? ( 152 - <> 171 + <AccessSection /> 172 + </> 173 + ) : ( 153 174 <View style={[a.gap_lg]}> 154 175 <Text style={[textStyles]}> 155 - <Trans>Hey there!</Trans> 156 - </Text> 157 - <Text style={[textStyles]}> 158 176 <Trans> 159 - You are accessing Bluesky from a region that legally 160 - requires us to verify your age before allowing you to 161 - access the app. 177 + Unfortunately, the birthdate you have saved to your 178 + profile makes you too young to access Bluesky. 162 179 </Trans> 163 180 </Text> 164 181 165 - {!isBlocked && birthdateUpdateText} 182 + {birthdateUpdateText} 166 183 </View> 184 + )} 185 + </> 186 + ) : ( 187 + <View style={[a.gap_lg]}> 188 + <Text style={[textStyles]}> 189 + <Trans>Hi there!</Trans> 190 + </Text> 191 + <Text style={[textStyles]}> 192 + <Trans> 193 + In order to provide an age-appropriate experience, we need 194 + to know your birthdate. This is a one-time thing, and your 195 + data will be kept private. 196 + </Trans> 197 + </Text> 198 + <Text style={[textStyles]}> 199 + <Trans> 200 + Set your birthdate below and we'll get you back to posting 201 + and exploring in no time! 202 + </Trans> 203 + </Text> 204 + <Button 205 + color="primary" 206 + size="large" 207 + label={_(msg`Click here to update your birthdate`)} 208 + onPress={() => birthdateControl.open()}> 209 + <ButtonText> 210 + <Trans>Add your birthdate</Trans> 211 + </ButtonText> 212 + </Button> 167 213 168 - <AccessSection /> 169 - </> 170 - ) : ( 171 - <View style={[a.gap_lg]}> 172 - <Text style={[textStyles]}> 214 + {isUsingAppPassword && ( 215 + <Admonition type="info"> 173 216 <Trans> 174 - Unfortunately, the birthdate you have saved to your 175 - profile makes you too young to access Bluesky. 217 + Hmm, it looks like you're logged in with an{' '} 218 + <Span style={[a.italic]}>App Password</Span>. To set your 219 + birthdate, you'll need to log in with your main account 220 + password, or ask whomever controls this account to do so. 176 221 </Trans> 177 - </Text> 222 + </Admonition> 223 + )} 224 + </View> 225 + )} 178 226 179 - {birthdateUpdateText} 180 - </View> 181 - )} 182 - </> 183 - ) : ( 184 - <View style={[a.gap_lg]}> 185 - <Text style={[textStyles]}> 186 - <Trans>Hi there!</Trans> 187 - </Text> 188 - <Text style={[textStyles]}> 227 + <View style={[a.pt_lg, a.gap_xl]}> 228 + <Logo width={120} textFill={t.atoms.text.color} /> 229 + <Text style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}> 189 230 <Trans> 190 - In order to provide an age-appropriate experience, we need to 191 - know your birthdate. This is a one-time thing, and your data 192 - will be kept private. 231 + To log out,{' '} 232 + <SimpleInlineLinkText 233 + label={_(msg`Click here to log out`)} 234 + {...createStaticClick(() => { 235 + onPressLogout() 236 + })}> 237 + click here 238 + </SimpleInlineLinkText> 239 + . 193 240 </Trans> 194 241 </Text> 195 - <Text style={[textStyles]}> 196 - <Trans> 197 - Set your birthdate below and we'll get you back to posting and 198 - exploring in no time! 199 - </Trans> 200 - </Text> 201 - <Button 202 - color="primary" 203 - size="large" 204 - label={_(msg`Click here to update your birthdate`)} 205 - onPress={() => birthdateControl.open()}> 206 - <ButtonText> 207 - <Trans>Add your birthdate</Trans> 208 - </ButtonText> 209 - </Button> 210 - 211 - {isUsingAppPassword && ( 212 - <Admonition type="info"> 213 - <Trans> 214 - Hmm, it looks like you're logged in with an{' '} 215 - <Span style={[a.italic]}>App Password</Span>. To set your 216 - birthdate, you'll need to log in with your main account 217 - password, or ask whomever controls this account to do so. 218 - </Trans> 219 - </Admonition> 220 - )} 221 242 </View> 222 - )} 223 - 224 - <View style={[a.pt_lg, a.gap_xl]}> 225 - <Logo width={120} textFill={t.atoms.text.color} /> 226 - <Text style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}> 227 - <Trans> 228 - To log out,{' '} 229 - <SimpleInlineLinkText 230 - label={_(msg`Click here to log out`)} 231 - {...createStaticClick(() => { 232 - onPressLogout() 233 - })}> 234 - click here 235 - </SimpleInlineLinkText> 236 - . 237 - </Trans> 238 - </Text> 239 243 </View> 240 - </View> 241 - </ScrollView> 244 + </ScrollView> 245 + </View> 242 246 243 247 <BirthDateSettingsDialog control={birthdateControl} /> 244 248

-9

src/screens/Deactivated.tsx

··· 3 3 import {useSafeAreaInsets} from 'react-native-safe-area-context' 4 4 import {msg, Trans} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 - import {useFocusEffect} from '@react-navigation/native' 7 6 import {useQueryClient} from '@tanstack/react-query' 8 7 9 8 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher' ··· 15 14 useSession, 16 15 useSessionApi, 17 16 } from '#/state/session' 18 - import {useSetMinimalShellMode} from '#/state/shell' 19 17 import {useLoggedOutViewControls} from '#/state/shell/logged-out' 20 18 import {Logo} from '#/view/icons/Logo' 21 19 import {atoms as a, useTheme} from '#/alf' ··· 37 35 const {onPressSwitchAccount, pendingDid} = useAccountSwitcher() 38 36 const {setShowLoggedOut} = useLoggedOutViewControls() 39 37 const hasOtherAccounts = accounts.length > 1 40 - const setMinimalShellMode = useSetMinimalShellMode() 41 38 const {logoutCurrentAccount} = useSessionApi() 42 39 const agent = useAgent() 43 40 const [pending, setPending] = React.useState(false) 44 41 const [error, setError] = React.useState<string | undefined>() 45 42 const queryClient = useQueryClient() 46 - 47 - useFocusEffect( 48 - React.useCallback(() => { 49 - setMinimalShellMode(true) 50 - }, [setMinimalShellMode]), 51 - ) 52 43 53 44 const onSelectAccount = React.useCallback( 54 45 (account: SessionAccount) => {

+9 -16

src/screens/Takendown.tsx

··· 1 1 import {useMemo, useState} from 'react' 2 - import {Modal, View} from 'react-native' 3 - import {SystemBars} from 'react-native-edge-to-edge' 2 + import {View} from 'react-native' 4 3 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' 5 4 import {useSafeAreaInsets} from 'react-native-safe-area-context' 6 5 import {type ComAtprotoAdminDefs, ToolsOzoneReportDefs} from '@atproto/api' ··· 15 14 } from '#/lib/constants' 16 15 import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController' 17 16 import {cleanError} from '#/lib/strings/errors' 18 - import {isIOS, isWeb} from '#/platform/detection' 17 + import {isWeb} from '#/platform/detection' 19 18 import {useAgent, useSession, useSessionApi} from '#/state/session' 20 19 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' 21 20 import {Logo} from '#/view/icons/Logo' 22 - import {atoms as a, native, useBreakpoints, useTheme, web} from '#/alf' 21 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 23 22 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 24 23 import * as TextField from '#/components/forms/TextField' 25 - import {InlineLinkText} from '#/components/Link' 24 + import {SimpleInlineLinkText} from '#/components/Link' 26 25 import {Loader} from '#/components/Loader' 27 26 import {P, Text} from '#/components/Typography' 28 27 ··· 130 129 useEnableKeyboardController(true) 131 130 132 131 return ( 133 - <Modal 134 - visible 135 - animationType={native('slide')} 136 - presentationStyle="formSheet" 137 - style={[web(a.util_screen_outer)]}> 138 - {isIOS && <SystemBars style={{statusBar: 'light'}} />} 132 + <View style={[a.util_screen_outer, a.flex_1]}> 139 133 <KeyboardAwareScrollView style={[a.flex_1, t.atoms.bg]} centerContent> 140 134 <View 141 135 style={[ ··· 222 216 <P style={[t.atoms.text_contrast_medium]}> 223 217 <Trans> 224 218 Your account was found to be in violation of the{' '} 225 - <InlineLinkText 219 + <SimpleInlineLinkText 226 220 label={_(msg`Bluesky Social Terms of Service`)} 227 221 to="https://bsky.social/about/support/tos" 228 - style={[a.text_md, a.leading_normal]} 229 - overridePresentation> 222 + style={[a.text_md, a.leading_normal]}> 230 223 Bluesky Social Terms of Service 231 - </InlineLinkText> 224 + </SimpleInlineLinkText> 232 225 . You have been sent an email outlining the specific violation 233 226 and suspension period, if applicable. You can appeal this 234 227 decision if you believe it was made in error. ··· 267 260 </View> 268 261 </View> 269 262 )} 270 - </Modal> 263 + </View> 271 264 ) 272 265 }

-8

src/view/shell/createNativeStackNavigatorWithAuth.tsx

··· 35 35 useLoggedOutViewControls, 36 36 } from '#/state/shell/logged-out' 37 37 import {LoggedOut} from '#/view/com/auth/LoggedOut' 38 - import {Deactivated} from '#/screens/Deactivated' 39 38 import {Onboarding} from '#/screens/Onboarding' 40 39 import {SignupQueued} from '#/screens/SignupQueued' 41 - import {Takendown} from '#/screens/Takendown' 42 40 import {atoms as a, useLayoutBreakpoints} from '#/alf' 43 41 import {PolicyUpdateOverlay} from '#/components/PolicyUpdateOverlay' 44 42 import {BottomBarWeb} from './bottom-bar/BottomBarWeb' ··· 119 117 if (hasSession && currentAccount?.signupQueued) { 120 118 return <SignupQueued /> 121 119 } 122 - if (hasSession && currentAccount?.status === 'takendown') { 123 - return <Takendown /> 124 - } 125 120 if (showLoggedOut) { 126 121 return <LoggedOut onDismiss={() => setShowLoggedOut(false)} /> 127 - } 128 - if (currentAccount?.status === 'deactivated') { 129 - return <Deactivated /> 130 122 } 131 123 if (onboardingState.isActive) { 132 124 return <Onboarding />

+18 -7

src/view/shell/index.tsx

··· 23 23 import {Lightbox} from '#/view/com/lightbox/Lightbox' 24 24 import {ModalsContainer} from '#/view/com/modals/Modal' 25 25 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 26 + import {Deactivated} from '#/screens/Deactivated' 27 + import {Takendown} from '#/screens/Takendown' 26 28 import {atoms as a, select, useTheme} from '#/alf' 27 29 import {setSystemUITheme} from '#/alf/util/systemUI' 28 30 import {AgeAssuranceRedirectDialog} from '#/components/ageAssurance/AgeAssuranceRedirectDialog' ··· 195 197 export function Shell() { 196 198 const t = useTheme() 197 199 const aa = useAgeAssurance() 200 + const {currentAccount} = useSession() 198 201 const fullyExpandedCount = useDialogFullyExpandedCountContext() 199 202 200 203 useIntentHandler() ··· 214 217 navigationBar: t.name !== 'light' ? 'light' : 'dark', 215 218 }} 216 219 /> 217 - {aa.state.access === aa.Access.None ? ( 218 - <NoAccessScreen /> 220 + {currentAccount?.status === 'takendown' ? ( 221 + <Takendown /> 222 + ) : currentAccount?.status === 'deactivated' ? ( 223 + <Deactivated /> 219 224 ) : ( 220 - <RoutesContainer> 221 - <ShellInner /> 222 - </RoutesContainer> 223 - )} 225 + <> 226 + {aa.state.access === aa.Access.None ? ( 227 + <NoAccessScreen /> 228 + ) : ( 229 + <RoutesContainer> 230 + <ShellInner /> 231 + </RoutesContainer> 232 + )} 224 233 225 - <RedirectOverlay /> 234 + <RedirectOverlay /> 235 + </> 236 + )} 226 237 </View> 227 238 ) 228 239 }

+19 -7

src/view/shell/index.web.tsx

··· 8 8 import {useIntentHandler} from '#/lib/hooks/useIntentHandler' 9 9 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 10 10 import {type NavigationProp} from '#/lib/routes/types' 11 + import {useSession} from '#/state/session' 11 12 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' 12 13 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut' 13 14 import {useCloseAllActiveElements} from '#/state/util' 14 15 import {Lightbox} from '#/view/com/lightbox/Lightbox' 15 16 import {ModalsContainer} from '#/view/com/modals/Modal' 16 17 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 18 + import {Deactivated} from '#/screens/Deactivated' 19 + import {Takendown} from '#/screens/Takendown' 17 20 import {atoms as a, select, useTheme} from '#/alf' 18 21 import {AgeAssuranceRedirectDialog} from '#/components/ageAssurance/AgeAssuranceRedirectDialog' 19 22 import {EmailDialog} from '#/components/dialogs/EmailDialog' ··· 141 144 export function Shell() { 142 145 const t = useTheme() 143 146 const aa = useAgeAssurance() 147 + const {currentAccount} = useSession() 144 148 return ( 145 149 <View style={[a.util_screen_outer, t.atoms.bg]}> 146 - {aa.state.access === aa.Access.None ? ( 147 - <NoAccessScreen /> 150 + {currentAccount?.status === 'takendown' ? ( 151 + <Takendown /> 152 + ) : currentAccount?.status === 'deactivated' ? ( 153 + <Deactivated /> 148 154 ) : ( 149 - <RoutesContainer> 150 - <ShellInner /> 151 - </RoutesContainer> 155 + <> 156 + {aa.state.access === aa.Access.None ? ( 157 + <NoAccessScreen /> 158 + ) : ( 159 + <RoutesContainer> 160 + <ShellInner /> 161 + </RoutesContainer> 162 + )} 163 + 164 + <RedirectOverlay /> 165 + </> 152 166 )} 153 - 154 - <RedirectOverlay /> 155 167 </View> 156 168 ) 157 169 }