@planningcenter/chat-react-native 4.2.0-rc.0 → 4.2.0-rc.2

package/src/components/conversation/reply_shadow_message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React from 'react'
+import React, { memo } from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {
@@ -37,18 +37,20 @@ interface ReplyShadowMessageProps extends MessageResource {
   nextRendersAuthor: boolean
 }
 
-export function ReplyShadowMessage({
+export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
   conversation_id,
   inReplyScreen,
   messageId,
+  replyRoot,
   isReplyShadowMessage,
   nextRendersAuthor,
 }: ReplyShadowMessageProps) {
-  const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })
+  const fetched = useConversationMessage({ conversation_id, messageId, enabled: !replyRoot })
+  const message = replyRoot ?? fetched.message
 
   if (inReplyScreen) return null
-  if (isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
+  if (!message && fetched.isLoading) return <ShadowMessageFallback text="Loading..." />
+  if (!message) return <ShadowMessageFallback text="Message deleted" />
 
   const enrichedMessage = {
     ...message,
@@ -57,7 +59,7 @@ export function ReplyShadowMessage({
   }
 
   return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
-}
+})
 
 interface ShadowMessageContentProps extends MessageResource {
   conversation_id: number
@@ -82,7 +84,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
       conversation_id,
-      reply_root_id: message.replyRootId,
+      reply_root_id: message.replyRootId ?? message.id,
       reply_root_author_name: message.author.name,
     })
   }

package/src/contexts/api_provider.tsx

@@ -10,6 +10,7 @@ import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { featuresQueryOptions } from '../hooks/use_features'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
@@ -81,10 +82,13 @@ export function ApiProvider({ children }: ViewProps) {
 // This needs to live in the provider so that it can access the api client
 // and the chat query client
 const PrefetchQueries = () => {
+  const client = useApiClient()
+
   usePrefetchQuery({
     queryKey: getRequestQueryKey(appGrantsRequestArgs),
     queryFn: defaultQueryFn,
   })
+  usePrefetchQuery(featuresQueryOptions(client))
 
   return null
 }

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
+import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -10,7 +11,10 @@ export const useConversationMessages = (
   const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      opts
+      {
+        structuralSharing: replaceEqualById,
+        ...opts,
+      }
     )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -11,6 +11,7 @@ import {
   updateCacheWithMessage,
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
+  updateCacheReplyRoots,
   getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
@@ -44,6 +45,7 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       data,
       currentPersonId: currentPerson.id,
     })
+    const isReplyRootUpdate = e.event === 'message.updated' && data.reply_root_id === data.sort_key
 
     if (e.event === 'message.created' && data.author_id) {
       removeAllTypingEventsByAuthorId(data.author_id)
@@ -62,6 +64,11 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
         data.reply_root_id
       )
       updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+
+      if (isReplyRootUpdate) {
+        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
+        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
+      }
     }
 
     // Update individual message query cache so reply shadow messages update immediately

package/src/hooks/use_features.ts

@@ -1,26 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
-import { FIVE_MINUTES } from '../utils/time'
-import { useApiClient } from './use_api_client'
+import { FIVE_MINUTES, ONE_MINUTE } from '../utils/time'
+import { ApiClient, useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
 
+type FeaturesCollection = ApiCollection<FeatureResource> & {
+  failure?: { status?: number }
+}
+
 export function useFeatures() {
   const apiClient = useApiClient()
-  const requestArgs = getFeaturesRequestArgs()
-
-  const { data } = useSuspenseQuery({
-    queryKey: getFeaturesQueryKey(),
-    queryFn: () => {
-      return apiClient.chat
-        .get<ApiCollection<FeatureResource>>(requestArgs)
-        .catch(() => stableEmptyFeatures)
-    },
-    staleTime: FIVE_MINUTES,
-  })
+  const { data } = useSuspenseQuery(featuresQueryOptions(apiClient))
 
   const features = data.data
 
@@ -36,6 +30,23 @@ export function useFeatures() {
   }
 }
 
+export const featuresQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: (): Promise<FeaturesCollection> => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs())
+        .catch(error => ({ ...stableEmptyFeatures, failure: { status: error?.status } }))
+    },
+    staleTime: query => {
+      const failure = query.state.data?.failure
+      if (!failure) return FIVE_MINUTES
+
+      return failure.status === 429 ? ONE_MINUTE : 0
+    },
+    gcTime: Infinity,
+  })
+
 export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
@@ -44,6 +55,7 @@ export const availableFeatures = {
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
+  search: 'ROLLOUT_search',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/screens/conversation_screen.tsx

@@ -1,4 +1,3 @@
-import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   CommonActions,
@@ -11,24 +10,21 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Badge, Icon, Text } from '../components'
+import { Badge, Icon } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
-import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
-import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
-import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
@@ -45,10 +41,6 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
-import { getRelativeDateStatus } from '../utils/date'
-import { groupMessages, type DateSeparator } from '../utils/group_messages'
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
-import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -101,16 +93,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
-  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
   const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
@@ -181,54 +168,19 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <ConversationStartBanner conversation={conversation} hasMessages={false} />
           </View>
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
+          <MessageList
+            listRef={listRef}
+            conversation={conversation}
+            conversationId={conversation_id}
+            messages={messages}
+            replyRootId={reply_root_id}
+            hasNextPage={hasNextPage}
+            onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
             onLayout={onLayout}
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={10}
-            ListFooterComponent={
-              hasNextPage ? null : (
-                <ConversationStartBanner conversation={conversation} hasMessages={true} />
-              )
-            }
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...(item as any)}
-                    conversation_id={conversation_id}
-                    inReplyScreen={!!reply_root_id}
-                  />
-                )
-              }
-
-              if (isSystemMessage(item)) {
-                return <SystemMessage message={item} conversationId={conversation_id} />
-              }
-
-              return (
-                <Message
-                  {...item}
-                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-                  conversation_id={conversation_id}
-                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-                  inReplyScreen={!!reply_root_id}
-                />
-              )
-            }}
-            onEndReached={() => fetchNextPage()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
@@ -295,44 +247,6 @@ function ConversationBottomBar({
   )
 }
 
-function InlineDateSeparator({ date }: DateSeparator) {
-  const styles = useDateSeparatorStyles()
-  const { isThisYear } = getRelativeDateStatus(date)
-  const showYear = !isThisYear
-  const dateStamp = formatDate(date, { style: 'long', year: showYear })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.separator} />
-      <Text variant="footnote" style={styles.dateText}>
-        {dateStamp}
-      </Text>
-      <View style={styles.separator} />
-    </View>
-  )
-}
-
-const useDateSeparatorStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-      paddingVertical: 16,
-    },
-    separator: {
-      flex: 1,
-      height: 1,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.borderColorDefaultBase,
-    },
-    dateText: {
-      paddingHorizontal: 8,
-    },
-  })
-}
-
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -429,13 +343,6 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
-    listHeader: {
-      // Just whitespace to provide space where the typing indicator can be
-      height: 16,
-    },
   })
 }
 

package/src/screens/conversations/components/search_list_header_component.tsx

@@ -0,0 +1,291 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, ScrollView, StyleSheet, View } from 'react-native'
+import { Heading, TextButton, ToggleButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { GraphId } from '../../../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
+import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
+import { ConversationsScreenProps } from '../conversations_screen'
+import { ChatGroupBadge } from './chat_group_badge'
+import { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+export const SearchListHeaderComponent = () => {
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const directMessagesEligible = useDirectMessagesEligible()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+  } = route.params || {}
+  const currentPersonCache = useCurrentPersonCache()
+  const { markAllRead, isPending } = useMarkAllRead()
+  const canCreateConversations = useCanCreateConversations()
+  const entryMode = useNewConversationEntry()
+  const newConversationFromFilter = useNewConversationFromFilter(
+    chat_group_graph_id as GraphId | undefined
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DMs
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleNewConversationNavigation = useCallback(() => {
+    if (newConversationFromFilter || entryMode === 'select_type') {
+      return navigation.navigate('ConversationSelectType', {
+        ...route.params,
+        newConversationFromFilter,
+      })
+    }
+
+    if (entryMode === 'groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectGroupRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'teams') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectTeamsILeadRecipients',
+        params: { ...route.params },
+      })
+    }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
+  }, [navigation, route.params, entryMode, newConversationFromFilter])
+
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleChatSettings = useCallback(() => {
+    navigation.navigate('ChatSettings', {})
+  }, [navigation])
+
+  const handleOpenConversationFilters = useCallback(() => {
+    navigation.navigate('ConversationFilters', {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    Haptic.notificationSuccess()
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
+  const hasSomeSourceFilterCapability = canFilterByTeams || canFilterByGroups
+  const hasMultiSourceFilterCapabilities = canFilterByTeams && canFilterByGroups
+  const showFilterRow = hasMultiSourceFilterCapabilities || canFilterByDMs
+  const shouldShowHeaderFiltersButton = hasSomeSourceFilterCapability && !showFilterRow
+  const moreFiltersButtonA11yLabel = shouldShowHeaderFiltersButton
+    ? 'View filters'
+    : 'View more filters'
+
+  const moreFiltersButtonProps = {
+    onPress: handleOpenConversationFilters,
+    active: active === FilterTypes.More,
+    iconNameRight: 'general.threeReducingHorizontalBars' as const,
+    accessibilityLabel: moreFiltersButtonA11yLabel,
+  }
+
+  const styles = useStyles({ shouldShowHeaderFiltersButton })
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton
+            onPress={alertMarkAllRead}
+            disabled={isPending}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Mark all read"
+          >
+            Mark all read
+          </TextButton>
+        </View>
+        <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            testID="conversations-chat-settings-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
+          {canCreateConversations && (
+            <ListHeaderActionButton
+              name="churchCenter.signups"
+              onPress={handleNewConversationNavigation}
+              accessibilityLabel="New conversation"
+              testID="conversations-new-conversation-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+          {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
+        </View>
+      </View>
+      {showFilterRow && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterRow}
+          accessibilityRole="toolbar"
+        >
+          <ToggleButton
+            title={FilterTypes.All}
+            active={active === FilterTypes.All}
+            onPress={() => handleSetFilter({})}
+            accessibilityLabel="Show all conversations"
+            style={styles.filterButton}
+          />
+          {canFilterByGroups && (
+            <ToggleButton
+              title={FilterTypes.Groups}
+              active={active === FilterTypes.Groups}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
+              accessibilityLabel="Filter to group conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByTeams && (
+            <ToggleButton
+              title={FilterTypes.Teams}
+              active={active === FilterTypes.Teams}
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
+              accessibilityLabel="Filter to team conversations"
+              style={styles.filterButton}
+            />
+          )}
+          {canFilterByDMs && (
+            <ToggleButton
+              title={FilterTypes.DMs}
+              active={active === FilterTypes.DMs}
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
+              accessibilityLabel="Filter to direct message conversations"
+              style={styles.filterButton}
+            />
+          )}
+          <ToggleButton {...moreFiltersButtonProps} />
+        </ScrollView>
+      )}
+      <ChatGroupBadge rowPaddingHorizontal={ROW_PADDING_HORIZONTAL} />
+    </View>
+  )
+}
+
+const useStyles = ({
+  shouldShowHeaderFiltersButton,
+}: {
+  shouldShowHeaderFiltersButton: boolean
+}) => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(
+    shouldShowHeaderFiltersButton ? 1.2 : undefined
+  )
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.statusErrorBorder,
+      paddingBottom: 16,
+      gap: 16,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      gap: 8,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      paddingBottom: 4,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+      flexGrow: 1,
+    },
+    filterButton: {
+      flex: 1,
+      minWidth: 65,
+    },
+  })
+}