[Chat] Add chat disabled banner (#10573)

src/screens/Messages/components/ChatDisabled.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useState} from 'react'
-import {View} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {ToolsOzoneReportDefs} from '@atproto/api'
 import {Trans, useLingui} from '@lingui/react/macro'
 import {useMutation} from '@tanstack/react-query'
@@ -15,19 +15,23 @@ import {Loader} from '#/components/Loader'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 
-export function ChatDisabled() {
+export function ChatDisabled({
+  shape = 'pill',
+  style,
+}: {
+  shape?: 'pill' | 'banner'
+  style?: StyleProp<ViewStyle>
+}) {
   const t = useTheme()
   return (
-    <View style={[a.p_md]}>
+    <View style={[shape === 'pill' && a.p_md, style]}>
       <View
         style={[
           a.align_center,
           a.justify_center,
           a.p_lg,
           t.atoms.bg_contrast_50,
-          {
-            borderRadius: 40,
-          },
+          shape === 'pill' && {borderRadius: 40},
         ]}>
         <WarningIcon fill={t.atoms.text.color} size="lg" style={[a.mb_xs]} />
         <Text

src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx

@@ -6,6 +6,7 @@ import {type NativeStackNavigationProp} from '@react-navigation/native-stack'
 
 import {type FlatNavigatorParams} from '#/lib/routes/types'
 import {ScrollProvider} from '#/lib/ScrollContext'
+import {useChatActorStatusQuery} from '#/state/queries/messages/get-status'
 import {type NativeStackNavigationOptionsWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {LEFT_NAV_MINIMAL_WIDTH} from '#/view/shell/desktop/LeftNav'
 import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
@@ -40,22 +41,37 @@ export function renderMessagesSplitViewLayout(props: LayoutProps) {
   return <MessagesSplitViewLayout {...props} />
 }
 
-function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
-  const {rightNavVisible, centerColumnOffset} = useLayoutBreakpoints()
+function MessagesSplitViewLayout({children, ...props}: LayoutProps) {
+  const {rightNavVisible} = useLayoutBreakpoints()
+  const aa = useAgeAssurance()
+
+  if (!IS_WEB || !rightNavVisible || aa.state.access !== aa.Access.Full) {
+    return children
+  }
+
+  return (
+    <MessagesSplitViewLayoutInner {...props}>
+      {children}
+    </MessagesSplitViewLayoutInner>
+  )
+}
+
+function MessagesSplitViewLayoutInner({
+  children,
+  navigation,
+  route,
+}: LayoutProps) {
+  const {centerColumnOffset} = useLayoutBreakpoints()
   const newChatControl = useDialogControl()
   const t = useTheme()
-  const aa = useAgeAssurance()
   const isFocused = useIsFocused()
+  const {data: chatStatus} = useChatActorStatusQuery()
 
   const onLeftColumnScroll = useCallback((e: ReanimatedScrollEvent) => {
     'worklet'
     splitViewLeftScroll.current = e.contentOffset.y
   }, [])
 
-  if (!IS_WEB || !rightNavVisible || aa.state.access !== aa.Access.Full) {
-    return children
-  }
-
   const onNewChat = (conversation: string) =>
     navigation.navigate('MessagesConversation', {conversation})
 
@@ -102,11 +118,15 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
             t.atoms.border_contrast_low,
             {width: leftColumnWidth},
           ]}>
-          <ChatListHeader newChatControl={newChatControl} />
+          <ChatListHeader
+            newChatControl={newChatControl}
+            chatStatus={chatStatus}
+          />
           <ScrollProvider onScroll={onLeftColumnScroll}>
             <ChatList
               newChatControl={newChatControl}
               selectedChat={selectedChat}
+              chatStatus={chatStatus}
             />
           </ScrollProvider>
           <NewChat onNewChat={onNewChat} control={newChatControl} />