Add some component utils, no design, gate chat

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -0,0 +1,36 @@
+import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
+
+import {atoms as a} from '#/alf'
+import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+export function AgeRestrictedScreen({children}: {children: React.ReactNode}) {
+  return (
+    <>
+      <IsAgeRestricted.True>
+        <Layout.Screen testID="messagesSettingsScreen">
+          <Layout.Header.Outer>
+            <Layout.Header.BackButton />
+            <Layout.Header.Content>
+              <Layout.Header.TitleText>
+                <Trans>Not allowed</Trans>
+              </Layout.Header.TitleText>
+            </Layout.Header.Content>
+            <Layout.Header.Slot />
+          </Layout.Header.Outer>
+          <Layout.Content>
+            <View style={[a.p_lg, a.gap_md]}>
+              <Text style={[a.text_lg, a.font_bold]}>
+                <Trans>We're sorry, but this content is unavailable.</Trans>
+              </Text>
+            </View>
+          </Layout.Content>
+        </Layout.Screen>
+      </IsAgeRestricted.True>
+
+      <IsAgeRestricted.False>{children}</IsAgeRestricted.False>
+    </>
+  )
+}

src/components/ageAssurance/IsAgeRestricted.tsx

@@ -0,0 +1,16 @@
+import {useAgeAssuranceContext} from '#/state/ageAssurance'
+
+export function True({children}: {children: React.ReactNode}) {
+  const {isAgeRestricted} = useAgeAssuranceContext()
+  return isAgeRestricted ? children : null
+}
+
+export function False({children}: {children: React.ReactNode}) {
+  const {isAgeRestricted} = useAgeAssuranceContext()
+  return !isAgeRestricted ? children : null
+}
+
+export const IsAgeRestricted = {
+  True,
+  False,
+}

src/screens/Messages/ChatList.tsx

@@ -23,6 +23,7 @@ import {useSession} from '#/state/session'
 import {List, type ListRef} from '#/view/com/util/List'
 import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
@@ -64,7 +65,16 @@ function keyExtractor(item: ListItem) {
 }
 
 type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
-export function MessagesScreen({navigation, route}: Props) {
+
+export function MessagesScreen(props: Props) {
+  return (
+    <AgeRestrictedScreen>
+      <MessagesScreenInner {...props} />
+    </AgeRestrictedScreen>
+  )
+}
+
+export function MessagesScreenInner({navigation, route}: Props) {
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()

src/screens/Messages/Conversation.tsx

@@ -32,6 +32,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {
   EmailDialogScreenID,
   useEmailDialogControl,
@@ -46,7 +47,16 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'MessagesConversation'
 >
-export function MessagesConversationScreen({route}: Props) {
+
+export function MessagesConversationScreen(props: Props) {
+  return (
+    <AgeRestrictedScreen>
+      <MessagesConversationScreenInner {...props} />
+    </AgeRestrictedScreen>
+  )
+}
+
+export function MessagesConversationScreenInner({route}: Props) {
   const {gtMobile} = useBreakpoints()
   const setMinimalShellMode = useSetMinimalShellMode()
 

src/screens/Messages/Inbox.tsx

@@ -1,17 +1,23 @@
 import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
-import {ChatBskyConvoDefs, ChatBskyConvoListConvos} from '@atproto/api'
+import {
+  type ChatBskyConvoDefs,
+  type ChatBskyConvoListConvos,
+} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
-import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
+import {
+  type InfiniteData,
+  type UseInfiniteQueryResult,
+} from '@tanstack/react-query'
 
 import {useAppState} from '#/lib/hooks/useAppState'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {
-  CommonNavigatorParams,
+  type CommonNavigatorParams,
-  NativeStackScreenProps,
+  type NativeStackScreenProps,
-  NavigationProp,
+  type NavigationProp,
 } from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
@@ -26,6 +32,7 @@ import {List} from '#/view/com/util/List'
 import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -39,7 +46,16 @@ import {Text} from '#/components/Typography'
 import {RequestListItem} from './components/RequestListItem'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesInbox'>
-export function MessagesInboxScreen({}: Props) {
+
+export function MessagesInboxScreen(props: Props) {
+  return (
+    <AgeRestrictedScreen>
+      <MessagesInboxScreenInner {...props} />
+    </AgeRestrictedScreen>
+  )
+}
+
+export function MessagesInboxScreenInner({}: Props) {
   const {gtTablet} = useBreakpoints()
 
   const listConvosQuery = useListConvosQuery({status: 'request'})

src/screens/Messages/Settings.tsx

@@ -12,6 +12,7 @@ import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
+import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
 import * as Layout from '#/components/Layout'
@@ -21,7 +22,16 @@ import {useBackgroundNotificationPreferences} from '../../../modules/expo-backgr
 type AllowIncoming = 'all' | 'none' | 'following'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
-export function MessagesSettingsScreen({}: Props) {
+
+export function MessagesSettingsScreen(props: Props) {
+  return (
+    <AgeRestrictedScreen>
+      <MessagesSettingsScreenInner {...props} />
+    </AgeRestrictedScreen>
+  )
+}
+
+export function MessagesSettingsScreenInner({}: Props) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({