Logged out improvments (#5771)

* fetch all accounts in one go

* delete unused component

* add safeareaview to logged out layout

* add safe area insets to LoggedOut view

* add safe area insets to the error boundary

* sanitize displaynames/handles

* use button for X

* increase spacing

src/Splash.tsx

@@ -1,28 +1,27 @@
 import React, {useCallback, useEffect} from 'react'
 import {
-  View,
-  StyleSheet,
-  Image as RNImage,
   AccessibilityInfo,
+  Image as RNImage,
+  StyleSheet,
   useColorScheme,
+  View,
 } from 'react-native'
-import * as SplashScreen from 'expo-splash-screen'
-import {Image} from 'expo-image'
 import Animated, {
+  Easing,
   interpolate,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  Easing,
 } from 'react-native-reanimated'
-import MaskedView from '@react-native-masked-view/masked-view'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'
+import {Image} from 'expo-image'
+import * as SplashScreen from 'expo-splash-screen'
+import MaskedView from '@react-native-masked-view/masked-view'
 
 import {isAndroid} from '#/platform/detection'
 import {Logotype} from '#/view/icons/Logotype'
-
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
 // @ts-ignore

src/components/AccountList.tsx

@@ -1,9 +1,12 @@
 import React, {useCallback} from 'react'
 import {View} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useProfileQuery} from '#/state/queries/profile'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {useProfilesQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
@@ -26,6 +29,9 @@ export function AccountList({
   const {currentAccount, accounts} = useSession()
   const t = useTheme()
   const {_} = useLingui()
+  const {data: profiles} = useProfilesQuery({
+    handles: accounts.map(acc => acc.did),
+  })
 
   const onPressAddAccount = useCallback(() => {
     onSelectOther()
@@ -43,6 +49,7 @@ export function AccountList({
       {accounts.map(account => (
         <React.Fragment key={account.did}>
           <AccountItem
+            profile={profiles?.profiles.find(p => p.did === account.did)}
             account={account}
             onSelect={onSelectAccount}
             isCurrentAccount={account.did === currentAccount?.did}
@@ -84,11 +91,13 @@ export function AccountList({
 }
 
 function AccountItem({
+  profile,
   account,
   onSelect,
   isCurrentAccount,
   isPendingAccount,
 }: {
+  profile?: AppBskyActorDefs.ProfileViewDetailed
   account: SessionAccount
   onSelect: (account: SessionAccount) => void
   isCurrentAccount: boolean
@@ -96,9 +105,8 @@ function AccountItem({
 }) {
   const t = useTheme()
   const {_} = useLingui()
-  const {data: profile} = useProfileQuery({did: account.did})
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect(account)
   }, [account, onSelect])
 
@@ -127,10 +135,12 @@ function AccountItem({
           </View>
           <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
             <Text emoji style={[a.font_bold]}>
-              {profile?.displayName || account.handle}{' '}
+              {sanitizeDisplayName(
-            </Text>
+                profile?.displayName || profile?.handle || account.handle,
+              )}
+            </Text>{' '}
             <Text emoji style={[t.atoms.text_contrast_medium]}>
-              {account.handle}
+              {sanitizeHandle(account.handle)}
             </Text>
           </Text>
           {isCurrentAccount ? (

src/screens/Deactivated.tsx

@@ -104,7 +104,7 @@ export function Deactivated() {
   }, [_, agent, setPending, setError, queryClient])
 
   return (
-    <View style={[a.h_full_vh, a.flex_1, t.atoms.bg]}>
+    <View style={[a.util_screen_outer, a.flex_1, t.atoms.bg]}>
       <ScrollView
         style={[a.h_full, a.w_full]}
         contentContainerStyle={{borderWidth: 0}}>
@@ -112,7 +112,7 @@ export function Deactivated() {
           style={[
             a.px_2xl,
             {
-              paddingTop: isWeb ? 64 : insets.top,
+              paddingTop: isWeb ? 64 : insets.top + 16,
               paddingBottom: isWeb ? 64 : insets.bottom,
             },
           ]}>

src/state/shell/logged-out.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import {isWeb} from 'platform/detection'
+import {isWeb} from '#/platform/detection'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
-import {useActiveStarterPack} from 'state/shell/starter-pack'
+import {useActiveStarterPack} from '#/state/shell/starter-pack'
 
 type State = {
   showLoggedOut: boolean

src/view/com/auth/LoggedOut.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
+import {View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {usePalette} from '#/lib/hooks/usePalette'
+import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {logEvent} from '#/lib/statsig/statsig'
-import {s} from '#/lib/styles'
-import {isIOS} from '#/platform/detection'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
@@ -17,6 +15,9 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Login} from '#/screens/Login'
 import {Signup} from '#/screens/Signup'
 import {LandingScreen} from '#/screens/StarterPack/StarterPackLandingScreen'
+import {atoms as a, native, tokens, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
 import {SplashScreen} from './SplashScreen'
 
 enum ScreenState {
@@ -29,7 +30,8 @@ export {ScreenState as LoggedOutScreenState}
 
 export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const {_} = useLingui()
-  const pal = usePalette('default')
+  const t = useTheme()
+  const insets = useSafeAreaInsets()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {requestedAccountSwitchTo} = useLoggedOutView()
   const [screenState, setScreenState] = React.useState<ScreenState>(() => {
@@ -57,31 +59,33 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   }, [clearRequestedAccount, onDismiss])
 
   return (
-    <View testID="noSessionView" style={[s.hContentRegion, pal.view]}>
+    <View
+      testID="noSessionView"
+      style={[
+        a.util_screen_outer,
+        t.atoms.bg,
+        {paddingTop: insets.top, paddingBottom: insets.bottom},
+      ]}>
       <ErrorBoundary>
         {onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (
-          <Pressable
+          <Button
-            accessibilityHint={_(msg`Go back`)}
+            label={_(msg`Go back`)}
-            accessibilityLabel={_(msg`Go back`)}
+            variant="solid"
-            accessibilityRole="button"
+            color="secondary_inverted"
-            style={{
+            size="small"
-              position: 'absolute',
+            shape="round"
-              top: isIOS ? 0 : 20,
+            PressableComponent={native(PressableScale)}
-              right: 20,
+            style={[
-              padding: 10,
+              a.absolute,
-              zIndex: 100,
+              {
-              backgroundColor: pal.text.color,
+                top: insets.top + tokens.space.xl,
-              borderRadius: 100,
+                right: tokens.space.xl,
-            }}
+                zIndex: 100,
+              },
+            ]}
             onPress={onPressDismiss}>
-            <FontAwesomeIcon
+            <ButtonIcon icon={XIcon} />
-              icon="x"
+          </Button>
-              size={12}
-              style={{
-                color: String(pal.textInverted.color),
-              }}
-            />
-          </Pressable>
         ) : null}
 
         {screenState === ScreenState.S_StarterPack ? (

src/view/com/util/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React, {Component, ErrorInfo, ReactNode} from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -9,6 +10,7 @@ import {CenteredView} from './Views'
 interface Props {
   children?: ReactNode
   renderError?: (error: any) => ReactNode
+  style?: StyleProp<ViewStyle>
 }
 
 interface State {
@@ -37,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <CenteredView style={{height: '100%', flex: 1}}>
+        <CenteredView style={[{height: '100%', flex: 1}, this.props.style]}>
           <TranslatedErrorScreen details={this.state.error.toString()} />
         </CenteredView>
       )

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
 
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
+import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {isWeb} from '#/platform/detection'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {atoms as a} from '#/alf'
 import {Text} from '../text/Text'
 
@@ -36,7 +36,7 @@ export const LoggedOutLayout = ({
     if (scrollable) {
       return (
         <ScrollView
-          style={styles.scrollview}
+          style={a.flex_1}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="none"
           contentContainerStyle={[
@@ -75,7 +75,7 @@ export const LoggedOutLayout = ({
       {scrollable ? (
         <View style={[styles.scrollableContent, contentBg]}>
           <ScrollView
-            style={styles.scrollview}
+            style={a.flex_1}
             contentContainerStyle={styles.scrollViewContentContainer}
             keyboardShouldPersistTaps="handled"
             keyboardDismissMode="on-drag">
@@ -113,9 +113,6 @@ const styles = StyleSheet.create({
   scrollableContent: {
     flex: 2,
   },
-  scrollview: {
-    flex: 1,
-  },
   scrollViewContentContainer: {
     flex: 1,
     paddingHorizontal: 40,

src/view/com/util/layouts/TitleColumnLayout.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-
-interface Props {
-  testID?: string
-  title: JSX.Element
-  horizontal: boolean
-  titleStyle?: StyleProp<ViewStyle>
-  contentStyle?: StyleProp<ViewStyle>
-}
-
-export function TitleColumnLayout({
-  testID,
-  title,
-  horizontal,
-  children,
-  titleStyle,
-  contentStyle,
-}: React.PropsWithChildren<Props>) {
-  const pal = usePalette('default')
-  const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
-  const contentBg = useColorSchemeStyle(pal.view, {
-    backgroundColor: pal.colors.background,
-    borderColor: pal.colors.border,
-    borderLeftWidth: 1,
-  })
-
-  const layoutStyles = horizontal ? styles2Column : styles1Column
-  return (
-    <View testID={testID} style={layoutStyles.container}>
-      <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
-      <View style={[layoutStyles.content, contentBg, contentStyle]}>
-        {children}
-      </View>
-    </View>
-  )
-}
-
-const styles2Column = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    height: '100%',
-  },
-  title: {
-    flex: 1,
-    paddingHorizontal: 40,
-    paddingBottom: 80,
-    justifyContent: 'center',
-  },
-  content: {
-    flex: 2,
-    paddingHorizontal: 40,
-    justifyContent: 'center',
-  },
-})
-
-const styles1Column = StyleSheet.create({
-  container: {},
-  title: {
-    paddingHorizontal: 40,
-    paddingVertical: 40,
-  },
-  content: {
-    paddingHorizontal: 40,
-    paddingVertical: 40,
-  },
-})

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -23,17 +23,17 @@ import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src
 
 import {PWI_ENABLED} from '#/lib/build-flags'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {isNative, isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
 } from '#/state/shell/logged-out'
-import {isNative, isWeb} from 'platform/detection'
+import {LoggedOut} from '#/view/com/auth/LoggedOut'
 import {Deactivated} from '#/screens/Deactivated'
 import {Onboarding} from '#/screens/Onboarding'
 import {SignupQueued} from '#/screens/SignupQueued'
-import {LoggedOut} from '../com/auth/LoggedOut'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {DesktopLeftNav} from './desktop/LeftNav'
 import {DesktopRightNav} from './desktop/RightNav'

src/view/shell/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native'
 import {Drawer} from 'react-native-drawer-layout'
 import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -41,6 +42,7 @@ function ShellInner() {
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
+  const insets = useSafeAreaInsets()
 
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
   const onOpenDrawer = React.useCallback(
@@ -94,7 +96,8 @@ function ShellInner() {
   return (
     <>
       <Animated.View style={[a.h_full]}>
-        <ErrorBoundary>
+        <ErrorBoundary
+          style={{paddingTop: insets.top, paddingBottom: insets.bottom}}>
           <Drawer
             renderDrawerContent={renderDrawerContent}
             drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}