Check for Trans component

Move scrollview to `LoggedOutLayout` to fix scrolling on web

src/components/Button.tsx

@@ -1,19 +1,21 @@
 import React from 'react'
 import {
-  Pressable,
-  Text,
-  PressableProps,
-  TextProps,
-  ViewStyle,
   AccessibilityProps,
-  View,
-  TextStyle,
-  StyleSheet,
+  Pressable,
+  PressableProps,
   StyleProp,
+  StyleSheet,
+  Text,
+  TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import {Trans} from '@lingui/macro'
 
-import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
+import {logger} from '#/logger'
+import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {normalizeTextStyles} from '#/components/Typography'
 
@@ -403,18 +405,51 @@ export function Button({
         </View>
       )}
       <Context.Provider value={context}>
-        {typeof children === 'string' ? (
-          <ButtonText>{children}</ButtonText>
-        ) : typeof children === 'function' ? (
-          children(context)
-        ) : (
-          children
-        )}
+        <ButtonTextErrorBoundary>
+          {/* @ts-ignore */}
+          {typeof children === 'string' || children?.type === Trans ? (
+            /* @ts-ignore */
+            <ButtonText>{children}</ButtonText>
+          ) : typeof children === 'function' ? (
+            children(context)
+          ) : (
+            children
+          )}
+        </ButtonTextErrorBoundary>
       </Context.Provider>
     </Pressable>
   )
 }
 
+export class ButtonTextErrorBoundary extends React.Component<
+  React.PropsWithChildren<{}>,
+  {hasError: boolean; error: Error | undefined}
+> {
+  public state = {
+    hasError: false,
+    error: undefined,
+  }
+
+  public static getDerivedStateFromError(error: Error) {
+    return {hasError: true, error}
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    logger.error('ButtonTextErrorBoundary caught an error', {
+      message: error.message,
+      errorInfo,
+    })
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return <ButtonText>ERROR</ButtonText>
+    }
+
+    return this.props.children
+  }
+}
+
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()

src/lib/statsig/statsig.tsx

@@ -8,6 +8,7 @@ import {
   useGate as useStatsigGate,
 } from 'statsig-react-native-expo'
 
+import {logger} from '#/logger'
 import {useSession} from '../../state/session'
 import {LogEvents} from './events'
 
@@ -56,10 +57,7 @@ export function logEvent<E extends keyof LogEvents>(
     }
   } catch (e) {
     // A log should never interrupt the calling code, whatever happens.
-    // Rethrow on a clean stack.
-    setTimeout(() => {
-      throw e
-    })
+    logger.error('Failed to log an event', {message: e})
   }
 }
 

src/screens/Login/FormContainer.tsx

@@ -1,13 +1,6 @@
 import React from 'react'
-import {
-  ScrollView,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 
-import {isWeb} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
@@ -16,38 +9,24 @@ export function FormContainer({
   title,
   children,
   style,
-  contentContainerStyle,
 }: {
   testID?: string
   title?: React.ReactNode
   children: React.ReactNode
   style?: StyleProp<ViewStyle>
-  contentContainerStyle?: StyleProp<ViewStyle>
 }) {
   const {gtMobile} = useBreakpoints()
   const t = useTheme()
   return (
-    <ScrollView
+    <View
       testID={testID}
-      style={[styles.maxHeight, contentContainerStyle]}
-      keyboardShouldPersistTaps="handled">
-      <View
-        style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}>
-        {title && !gtMobile && (
-          <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
-            {title}
-          </Text>
-        )}
-        {children}
-      </View>
-    </ScrollView>
+      style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}>
+      {title && !gtMobile && (
+        <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
+          {title}
+        </Text>
+      )}
+      {children}
+    </View>
   )
 }
-
-const styles = StyleSheet.create({
-  maxHeight: {
-    // @ts-ignore web only -prf
-    maxHeight: isWeb ? '100vh' : undefined,
-    height: !isWeb ? '100%' : undefined,
-  },
-})

src/screens/Login/index.tsx

@@ -164,7 +164,11 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
 
   return (
     <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
-      <LoggedOutLayout leadin="" title={title} description={description}>
+      <LoggedOutLayout
+        leadin=""
+        title={title}
+        description={description}
+        scrollable>
         <LayoutAnimationConfig skipEntering skipExiting>
           <ScreenTransition key={currentForm}>{content}</ScreenTransition>
         </LayoutAnimationConfig>

src/screens/Signup/StepCaptcha/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {createFullHandle} from '#/lib/strings/handles'
-import {isWeb} from '#/platform/detection'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state'
 import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
@@ -54,7 +53,14 @@ export function StepCaptcha() {
   return (
     <ScreenTransition>
       <View style={[a.gap_lg]}>
-        <View style={[styles.container, completed && styles.center]}>
+        <View
+          style={[
+            a.w_full,
+            a.pb_xl,
+            a.overflow_hidden,
+            {minHeight: 500},
+            completed && [a.align_center, a.justify_center],
+          ]}>
           {!completed ? (
             <CaptchaWebView
               url={url}
@@ -72,24 +78,3 @@ export function StepCaptcha() {
     </ScreenTransition>
   )
 }
-
-const styles = StyleSheet.create({
-  error: {
-    borderRadius: 6,
-    marginTop: 10,
-  },
-  // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
-  touchable: {
-    ...(isWeb && {cursor: 'pointer'}),
-  },
-  container: {
-    minHeight: 500,
-    width: '100%',
-    paddingBottom: 20,
-    overflow: 'hidden',
-  },
-  center: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})

src/screens/Signup/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {ScrollView, View} from 'react-native'
+import {View} from 'react-native'
+import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -20,7 +21,7 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {InlineLink} from '#/components/Link'
@@ -32,6 +33,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   const {screen} = useAnalytics()
   const [state, dispatch] = React.useReducer(reducer, initialState)
   const submit = useSubmitSignup({state, dispatch})
+  const {gtMobile} = useBreakpoints()
 
   const {
     data: serviceInfo,
@@ -125,13 +127,16 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
       <LoggedOutLayout
         leadin=""
         title={_(msg`Create Account`)}
-        description={_(msg`We're so excited to have you join us!`)}>
-        <ScrollView
-          testID="createAccount"
-          keyboardShouldPersistTaps="handled"
-          style={a.h_full}
-          keyboardDismissMode="on-drag">
-          <View style={[a.flex_1, a.px_xl, a.pt_2xl, {paddingBottom: 100}]}>
+        description={_(msg`We're so excited to have you join us!`)}
+        scrollable>
+        <View testID="createAccount" style={a.flex_1}>
+          <View
+            style={[
+              a.flex_1,
+              a.px_xl,
+              a.pt_2xl,
+              !gtMobile && {paddingBottom: 100},
+            ]}>
             <View style={[a.gap_sm, a.pb_3xl]}>
               <Text style={[a.font_semibold, t.atoms.text_contrast_medium]}>
                 <Trans>Step</Trans> {state.activeStep + 1} <Trans>of</Trans>{' '}
@@ -152,13 +157,15 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             </View>
 
             <View style={[a.pb_3xl]}>
-              {state.activeStep === SignupStep.INFO ? (
-                <StepInfo />
-              ) : state.activeStep === SignupStep.HANDLE ? (
-                <StepHandle />
-              ) : (
-                <StepCaptcha />
-              )}
+              <LayoutAnimationConfig skipEntering skipExiting>
+                {state.activeStep === SignupStep.INFO ? (
+                  <StepInfo />
+                ) : state.activeStep === SignupStep.HANDLE ? (
+                  <StepHandle />
+                ) : (
+                  <StepCaptcha />
+                )}
+              </LayoutAnimationConfig>
             </View>
 
             <View style={[a.flex_row, a.justify_between, a.pb_lg]}>
@@ -208,7 +215,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
               </Text>
             </View>
           </View>
-        </ScrollView>
+        </View>
       </LoggedOutLayout>
     </SignupContext.Provider>
   )

src/view/com/auth/HomeLoggedOutCTA.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
-import {ScrollView} from '../util/Views'
-import {Text} from '../util/text/Text'
+
 import {usePalette} from '#/lib/hooks/usePalette'
-import {colors, s} from '#/lib/styles'
-import {TextLink} from '../util/Link'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {colors, s} from '#/lib/styles'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {TextLink} from '../util/Link'
+import {Text} from '../util/text/Text'
+import {ScrollView} from '../util/Views'
 
 export function HomeLoggedOutCTA() {
   const pal = usePalette('default')
@@ -79,7 +80,7 @@ export function HomeLoggedOutCTA() {
               styles.btnLabel,
               isMobile && styles.btnLabelMobile,
             ]}>
-            <Trans>Sign In</Trans>
+            <Trans>Sign in</Trans>
           </Text>
         </TouchableOpacity>
       </View>

src/view/com/auth/SplashScreen.tsx

@@ -87,7 +87,7 @@ export const SplashScreen = ({
             variant="solid"
             color="secondary">
             <ButtonText>
-              <Trans>Sign In</Trans>
+              <Trans>Sign in</Trans>
             </ButtonText>
           </Button>
         </View>

src/view/com/auth/SplashScreen.web.tsx

@@ -116,7 +116,7 @@ export const SplashScreen = ({
                 variant="solid"
                 color="secondary">
                 <ButtonText>
-                  <Trans>Sign In</Trans>
+                  <Trans>Sign in</Trans>
                 </ButtonText>
               </Button>
             </View>

src/view/com/composer/Composer.tsx

@@ -1,5 +1,4 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   BackHandler,
@@ -12,60 +11,62 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {RichText} from '@atproto/api'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
-import {ExternalEmbed} from './ExternalEmbed'
-import {Text} from '../util/text/Text'
-import * as Toast from '../util/Toast'
-// TODO: Prevent naming components that coincide with RN primitives
-// due to linting false positives
-import {TextInput, TextInputRef} from './text-input/TextInput'
-import {CharProgress} from './char-progress/CharProgress'
-import {UserAvatar} from '../util/UserAvatar'
-import * as apilib from 'lib/api/index'
-import {ComposerOpts} from 'state/shell/composer'
-import {s, colors, gradients} from 'lib/styles'
-import {cleanError} from 'lib/strings/errors'
-import {shortenLinks} from 'lib/strings/rich-text-manip'
-import {toShortUrl} from 'lib/strings/url-helpers'
-import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
-import {OpenCameraBtn} from './photos/OpenCameraBtn'
-import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection'
-import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
-import {GalleryModel} from 'state/models/media/gallery'
-import {Gallery} from './photos/Gallery'
-import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
-import {LabelsBtn} from './labels/LabelsBtn'
-import {SelectLangBtn} from './select-language/SelectLangBtn'
-import {SuggestedLanguage} from './select-language/SuggestedLanguage'
-import {insertMentionAt} from 'lib/strings/mention-manip'
-import {Trans, msg} from '@lingui/macro'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {observer} from 'mobx-react-lite'
+
+import {logEvent} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
+import {emitPostCreated} from '#/state/events'
 import {useModals} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
 import {
+  toPostLanguages,
   useLanguagePrefs,
   useLanguagePrefsApi,
-  toPostLanguages,
 } from '#/state/preferences/languages'
-import {useSession, getAgent} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
-import {useComposerControls} from '#/state/shell/composer'
-import {emitPostCreated} from '#/state/events'
 import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {logger} from '#/logger'
+import {getAgent, useSession} from '#/state/session'
+import {useComposerControls} from '#/state/shell/composer'
+import {useAnalytics} from 'lib/analytics/analytics'
+import * as apilib from 'lib/api/index'
+import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
+import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {cleanError} from 'lib/strings/errors'
+import {insertMentionAt} from 'lib/strings/mention-manip'
+import {shortenLinks} from 'lib/strings/rich-text-manip'
+import {toShortUrl} from 'lib/strings/url-helpers'
+import {colors, gradients, s} from 'lib/styles'
+import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
+import {useDialogStateControlContext} from 'state/dialogs'
+import {GalleryModel} from 'state/models/media/gallery'
+import {ComposerOpts} from 'state/shell/composer'
 import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
 import * as Prompt from '#/components/Prompt'
-import {useDialogStateControlContext} from 'state/dialogs'
-import {logEvent} from '#/lib/statsig/statsig'
+import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
+import {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
+import {UserAvatar} from '../util/UserAvatar'
+import {CharProgress} from './char-progress/CharProgress'
+import {ExternalEmbed} from './ExternalEmbed'
+import {LabelsBtn} from './labels/LabelsBtn'
+import {Gallery} from './photos/Gallery'
+import {OpenCameraBtn} from './photos/OpenCameraBtn'
+import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
+import {SelectLangBtn} from './select-language/SelectLangBtn'
+import {SuggestedLanguage} from './select-language/SuggestedLanguage'
+// TODO: Prevent naming components that coincide with RN primitives
+// due to linting false positives
+import {TextInput, TextInputRef} from './text-input/TextInput'
+import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
+import {useExternalLinkFetch} from './useExternalLinkFetch'
 
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
@@ -506,7 +507,9 @@ export const ComposePost = observer(function ComposePost({
         control={discardPromptControl}
         title={_(msg`Discard draft?`)}
         description={_(msg`Are you sure you'd like to discard this draft?`)}
-        onConfirm={onClose}
+        onConfirm={() => {
+          discardPromptControl.close(onClose)
+        }}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
       />

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

@@ -1,19 +1,24 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Text} from '../text/Text'
+import {ScrollView, StyleSheet, View} from 'react-native'
+
+import {isWeb} from '#/platform/detection'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {atoms as a} from '#/alf'
+import {Text} from '../text/Text'
 
 export const LoggedOutLayout = ({
   leadin,
   title,
   description,
   children,
+  scrollable,
 }: React.PropsWithChildren<{
   leadin: string
   title: string
   description: string
+  scrollable?: boolean
 }>) => {
   const {isMobile, isTabletOrMobile} = useWebMediaQueries()
   const pal = usePalette('default')
@@ -25,7 +30,18 @@ export const LoggedOutLayout = ({
   })
 
   if (isMobile) {
-    return <View style={{paddingTop: 10}}>{children}</View>
+    if (scrollable) {
+      return (
+        <ScrollView
+          style={styles.scrollview}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag">
+          <View style={a.pt_md}>{children}</View>
+        </ScrollView>
+      )
+    } else {
+      return <View style={a.pt_md}>{children}</View>
+    }
   }
   return (
     <View style={styles.container}>
@@ -50,9 +66,23 @@ export const LoggedOutLayout = ({
           {description}
         </Text>
       </View>
-      <View style={[styles.content, contentBg]}>
-        <View style={styles.contentWrapper}>{children}</View>
-      </View>
+      {scrollable ? (
+        <View style={[styles.scrollableContent, contentBg]}>
+          <ScrollView
+            style={styles.scrollview}
+            contentContainerStyle={styles.scrollViewContentContainer}
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode="on-drag">
+            <View style={[styles.contentWrapper, isWeb && a.my_auto]}>
+              {children}
+            </View>
+          </ScrollView>
+        </View>
+      ) : (
+        <View style={[styles.content, contentBg]}>
+          <View style={styles.contentWrapper}>{children}</View>
+        </View>
+      )}
     </View>
   )
 }
@@ -74,7 +104,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: 40,
     justifyContent: 'center',
   },
-
+  scrollableContent: {
+    flex: 2,
+  },
+  scrollview: {
+    flex: 1,
+  },
+  scrollViewContentContainer: {
+    flex: 1,
+    paddingHorizontal: 40,
+  },
   leadinText: {
     fontSize: 36,
     fontWeight: '800',