about summary refs log tree commit diff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/Splash.tsx15
-rw-r--r--src/components/AccountList.tsx22
-rw-r--r--src/screens/Deactivated.tsx4
-rw-r--r--src/state/shell/logged-out.tsx6
-rw-r--r--src/view/com/auth/LoggedOut.tsx60
-rw-r--r--src/view/com/util/ErrorBoundary.tsx4
-rw-r--r--src/view/com/util/layouts/LoggedOutLayout.tsx15
-rw-r--r--src/view/com/util/layouts/TitleColumnLayout.tsx69
-rw-r--r--src/view/shell/createNativeStackNavigatorWithAuth.tsx4
-rw-r--r--src/view/shell/index.tsx5
10 files changed, 75 insertions, 129 deletions
diff --git a/src/Splash.tsx b/src/Splash.tsx
index 42a21c083..8acf75875 100644
--- a/src/Splash.tsx
+++ b/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
diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index 68bb482af..fe0daed50 100644
--- a/src/components/AccountList.tsx
+++ b/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}{' '}
-            </Text>
+              {sanitizeDisplayName(
+                profile?.displayName || profile?.handle || account.handle,
+              )}
+            </Text>{' '}
             <Text emoji style={[t.atoms.text_contrast_medium]}>
-              {account.handle}
+              {sanitizeHandle(account.handle)}
             </Text>
           </Text>
           {isCurrentAccount ? (
diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx
index 9b0b5b166..2d14b18db 100644
--- a/src/screens/Deactivated.tsx
+++ b/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,
             },
           ]}>
diff --git a/src/state/shell/logged-out.tsx b/src/state/shell/logged-out.tsx
index dc78d03d5..66240f2c0 100644
--- a/src/state/shell/logged-out.tsx
+++ b/src/state/shell/logged-out.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
-import {useActiveStarterPack} from 'state/shell/starter-pack'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
+import {useActiveStarterPack} from '#/state/shell/starter-pack'
 
 type State = {
   showLoggedOut: boolean
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx
index 5b9e3932f..54b3432ea 100644
--- a/src/view/com/auth/LoggedOut.tsx
+++ b/src/view/com/auth/LoggedOut.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {View} from 'react-native'
+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
-            accessibilityHint={_(msg`Go back`)}
-            accessibilityLabel={_(msg`Go back`)}
-            accessibilityRole="button"
-            style={{
-              position: 'absolute',
-              top: isIOS ? 0 : 20,
-              right: 20,
-              padding: 10,
-              zIndex: 100,
-              backgroundColor: pal.text.color,
-              borderRadius: 100,
-            }}
+          <Button
+            label={_(msg`Go back`)}
+            variant="solid"
+            color="secondary_inverted"
+            size="small"
+            shape="round"
+            PressableComponent={native(PressableScale)}
+            style={[
+              a.absolute,
+              {
+                top: insets.top + tokens.space.xl,
+                right: tokens.space.xl,
+                zIndex: 100,
+              },
+            ]}
             onPress={onPressDismiss}>
-            <FontAwesomeIcon
-              icon="x"
-              size={12}
-              style={{
-                color: String(pal.textInverted.color),
-              }}
-            />
-          </Pressable>
+            <ButtonIcon icon={XIcon} />
+          </Button>
         ) : null}
 
         {screenState === ScreenState.S_StarterPack ? (
diff --git a/src/view/com/util/ErrorBoundary.tsx b/src/view/com/util/ErrorBoundary.tsx
index dccd2bbc9..46b94932b 100644
--- a/src/view/com/util/ErrorBoundary.tsx
+++ b/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>
       )
diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx
index c2c080c17..aadabd8cb 100644
--- a/src/view/com/util/layouts/LoggedOutLayout.tsx
+++ b/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,
diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx
deleted file mode 100644
index 49ad9fcdb..000000000
--- a/src/view/com/util/layouts/TitleColumnLayout.tsx
+++ /dev/null
@@ -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,
-  },
-})
diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx
index 7951eef75..7842fd5c8 100644
--- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx
+++ b/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'
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 6f3d82c13..6dc4f95a5 100644
--- a/src/view/shell/index.tsx
+++ b/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)}}
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 14:56:24 +0000