[Chat] Improve gate (#10359)

src/components/Prompt.tsx

@@ -3,7 +3,7 @@ import {type GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme, type ViewStyleProp, web} from '#/alf'
+import {atoms as a, type TextStyleProp, useTheme, web} from '#/alf'
 import {
   Button,
   type ButtonColor,
@@ -34,6 +34,8 @@ export function Outer({
   control,
   testID,
   nativeOptions,
+  webOptions,
+  onClose,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
@@ -41,6 +43,13 @@ export function Outer({
    * Native-specific options for the prompt. Extends `BottomSheetViewProps`
    */
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
+  /**
+   * Web-specific options for the prompt
+   */
+  webOptions?: {
+    onBackgroundPress?: (e: GestureResponderEvent) => void
+  }
+  onClose?: () => void
 }>) {
   const titleId = useId()
   const descriptionId = useId()
@@ -54,7 +63,8 @@ export function Outer({
     <Dialog.Outer
       control={control}
       testID={testID}
-      webOptions={{alignCenter: true}}
+      onClose={onClose}
+      webOptions={{alignCenter: true, ...webOptions}}
       nativeOptions={{preventExpansion: true, ...nativeOptions}}>
       <Dialog.Handle />
       <Context.Provider value={context}>
@@ -72,7 +82,7 @@ export function Outer({
 export function TitleText({
   children,
   style,
-}: React.PropsWithChildren<ViewStyleProp>) {
+}: React.PropsWithChildren<TextStyleProp>) {
   const {titleId} = useContext(Context)
   return (
     <Text
@@ -93,14 +103,21 @@ export function TitleText({
 export function DescriptionText({
   children,
   selectable,
-}: React.PropsWithChildren<{selectable?: boolean}>) {
+  style,
+}: React.PropsWithChildren<{selectable?: boolean} & TextStyleProp>) {
   const t = useTheme()
   const {descriptionId} = useContext(Context)
   return (
     <Text
       nativeID={descriptionId}
       selectable={selectable}
-      style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
+      style={[
+        a.text_md,
+        a.leading_snug,
+        t.atoms.text_contrast_high,
+        a.pb_lg,
+        style,
+      ]}>
       {children}
     </Text>
   )

src/screens/Messages/Conversation.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type LayoutChangeEvent, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {moderateProfile} from '@atproto/api'
@@ -319,7 +319,10 @@ function GroupChatGate() {
     ax.features.GroupChatsHasBeenReleased,
   )
 
+  const isAlreadyGoingBackRef = useRef(false)
   const onGoBack = () => {
+    if (isAlreadyGoingBackRef.current) return
+    isAlreadyGoingBackRef.current = true
     if (navigation.canGoBack()) {
       navigation.goBack()
     } else {
@@ -330,27 +333,29 @@ function GroupChatGate() {
   return (
     <Prompt.Outer
       control={groupChatGateDialogControl}
+      onClose={onGoBack}
       nativeOptions={{preventDismiss: true, preventExpansion: true}}
       testID="groupChatGateDialog">
       <Prompt.Content>
-        <View style={[a.w_full, a.align_center, a.py_2xl]}>
+        <View style={[a.w_full, a.align_center, a.py_3xl]}>
-          <Text style={{fontSize: 48}} emoji>
+          <Text style={{fontSize: 72}} emoji>
             🐴
           </Text>
         </View>
-        <Prompt.TitleText>
+        <Prompt.TitleText style={[a.text_center]}>
           {hasBeenReleased ? (
             <Trans>Group chats are now available</Trans>
           ) : (
             <Trans>Group chats are not yet available</Trans>
           )}
         </Prompt.TitleText>
-        <Prompt.DescriptionText>
+        <Prompt.DescriptionText style={[a.text_center]}>
           {hasBeenReleased ? (
             <Trans>Update your app to the latest version to join in!</Trans>
           ) : (
             <Trans>
-              This feature isn't available to you yet. Please check back later.
+              Hold your horses! This feature isn't available to you yet. Please
+              check back later.
             </Trans>
           )}
         </Prompt.DescriptionText>