[Chat] Request screen tweaks (#10747)

src/screens/Messages/Inbox.tsx

@@ -26,10 +26,9 @@ import {useLeftConvos} from '#/state/queries/messages/leave-conversation'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
 import {EmptyState} from '#/view/com/util/EmptyState'
-import {FAB} from '#/view/com/util/fab/FAB'
 import {List} from '#/view/com/util/List'
 import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -62,8 +61,6 @@ export function MessagesInboxScreen(props: Props) {
 }
 
 export function MessagesInboxScreenInner({}: Props) {
-  const {gtTablet} = useBreakpoints()
-
   const listConvosQuery = useListConvosQuery({status: 'request'})
   const {data} = listConvosQuery
 
@@ -94,21 +91,16 @@ export function MessagesInboxScreenInner({}: Props) {
     <Layout.Screen testID="messagesInboxScreen">
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
-        <Layout.Header.Content align={gtTablet ? 'left' : 'platform'}>
+        <Layout.Header.Content align="left">
           <Layout.Header.TitleText>
             <Trans>Chat requests</Trans>
           </Layout.Header.TitleText>
         </Layout.Header.Content>
-        {hasUnreadConvos && gtTablet ? (
+        {hasUnreadConvos ? <MarkAsReadHeaderButton /> : <Layout.Header.Slot />}
-          <MarkAsReadHeaderButton />
-        ) : (
-          <Layout.Header.Slot />
-        )}
       </Layout.Header.Outer>
       <RequestList
         listConvosQuery={listConvosQuery}
         conversations={conversations}
-        hasUnreadConvos={hasUnreadConvos}
       />
     </Layout.Screen>
   )
@@ -117,14 +109,12 @@ export function MessagesInboxScreenInner({}: Props) {
 function RequestList({
   listConvosQuery,
   conversations,
-  hasUnreadConvos,
 }: {
   listConvosQuery: UseInfiniteQueryResult<
     InfiniteData<ChatBskyConvoListConvos.OutputSchema>,
     Error
   >
   conversations: ChatBskyConvoDefs.ConvoView[]
-  hasUnreadConvos: boolean
 }) {
   const {t: l} = useLingui()
   const t = useTheme()
@@ -285,7 +275,6 @@ function RequestList({
         desktopFixedHeight
         sideBorders={false}
       />
-      {hasUnreadConvos && <MarkAllReadFAB />}
     </>
   )
 }
@@ -298,34 +287,6 @@ function renderItem({item}: {item: ChatBskyConvoDefs.ConvoView}) {
   return <RequestListItem convo={item} />
 }
 
-function MarkAllReadFAB() {
-  const {t: l} = useLingui()
-  const t = useTheme()
-  const {mutate: markAllRead} = useUpdateAllRead('request', {
-    onMutate: () => {
-      Toast.show(l`Marked all as read`, {
-        type: 'success',
-      })
-    },
-    onError: () => {
-      Toast.show(l`Failed to mark all requests as read`, {
-        type: 'error',
-      })
-    },
-  })
-
-  return (
-    <FAB
-      testID="markAllAsReadFAB"
-      onPress={() => markAllRead()}
-      icon={<CheckIcon size="lg" fill={t.palette.white} />}
-      accessibilityRole="button"
-      accessibilityLabel={l`Mark all as read`}
-      accessibilityHint=""
-    />
-  )
-}
-
 function MarkAsReadHeaderButton() {
   const {t: l} = useLingui()
   const {mutate: markAllRead} = useUpdateAllRead('request', {

src/screens/Messages/components/ChatListItem.tsx

@@ -122,7 +122,7 @@ function DirectChatItem({
 }) {
   const {t: l} = useLingui()
   const profile = useProfileShadow(convo.primaryMember)
-  const {isWithinSplitView} = useIsWithinSplitView()
+  const {isWithinLeftPanel} = useIsWithinSplitView()
 
   const moderation = useMemo(
     () => moderateProfile(profile, moderationOpts),
@@ -140,7 +140,7 @@ function DirectChatItem({
       avatar={
         <PreviewableUserAvatar
           profile={profile}
-          size={isWithinSplitView ? 48 : 52}
+          size={isWithinLeftPanel ? 48 : 52}
           moderation={moderation.ui('avatar')}
         />
       }
@@ -161,7 +161,7 @@ function DirectChatItem({
       isBlockedAccount={moderation.blocked}
       showProfileBadges
       postAlerts={
-        isWithinSplitView ? null : (
+        isWithinLeftPanel ? null : (
           <PostAlerts
             modui={moderation.ui('contentList')}
             size="sm"
@@ -189,7 +189,7 @@ function GroupChatItem({
 }) {
   const {t: l} = useLingui()
   const groupOwner = useMaybeProfileShadow(convo.primaryMember)
-  const {isWithinSplitView} = useIsWithinSplitView()
+  const {isWithinLeftPanel} = useIsWithinSplitView()
 
   const moderation = useMemo(
     () =>
@@ -205,7 +205,7 @@ function GroupChatItem({
       avatar={
         <AvatarBubbles
           profiles={convo.members}
-          size={isWithinSplitView ? 48 : 52}
+          size={isWithinLeftPanel ? 48 : 52}
           moderationOpts={moderationOpts}
         />
       }
@@ -278,7 +278,7 @@ function BaseChatItem({
   const leaveConvoControl = useDialogControl()
   const {mutate: markAsRead} = useMarkAsReadMutation()
   const {gtMobile} = useBreakpoints()
-  const {isWithinSplitView} = useIsWithinSplitView()
+  const {isWithinLeftPanel} = useIsWithinSplitView()
 
   const playHaptic = useHaptics()
   const queryClient = useQueryClient()
@@ -458,7 +458,7 @@ function BaseChatItem({
         leftFirst: deleteAction,
       }
 
-  const avatarSize = isWithinSplitView ? 48 : 52
+  const avatarSize = isWithinLeftPanel ? 48 : 52
 
   return (
     <ChatListItemPortal.Provider>
@@ -469,7 +469,7 @@ function BaseChatItem({
           // @ts-expect-error web only
           onFocus={onFocus}
           onBlur={onMouseLeave}
-          style={[a.relative, t.atoms.bg, isWithinSplitView && a.mx_sm]}>
+          style={[a.relative, t.atoms.bg, isWithinLeftPanel && a.mx_sm]}>
           <View
             style={[
               a.z_10,
@@ -512,7 +512,7 @@ function BaseChatItem({
                   a.px_lg,
                   a.py_md,
                   a.gap_md,
-                  isWithinSplitView && a.rounded_sm,
+                  isWithinLeftPanel && a.rounded_sm,
                   {
                     backgroundColor: hasUnread
                       ? t.palette.primary_25