@planningcenter/chat-react-native 4.4.0-rc.7 → 4.4.0

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -4,10 +4,13 @@ import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
 import {
   useAtFontScaleBreakpoint,
+  useCanBrowseArchivedConversations,
   useDirectMessagesEligible,
   useHasDirectMessages,
   useTheme,
 } from '../../../hooks'
+import { useFilterDropdownEnabled } from '../../../hooks/use_filter_dropdown_enabled'
+import { faBoxArchive } from '../../../vendor/font_awesome_pro_solid_icons'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -16,6 +19,8 @@ import {
   FilterRow,
   GroupRow,
   GroupRowProps,
+  OtherRow,
+  OtherRowProps,
   TeamRow,
   TeamRowProps,
   ViewMore,
@@ -32,6 +37,7 @@ enum SectionTypes {
   header,
   hidden,
   more,
+  other,
   teams,
 }
 
@@ -41,6 +47,7 @@ type SectionListData = Array<
   | DataItem<HeaderProps, SectionTypes.header>
   | DataItem<any, SectionTypes.hidden>
   | DataItem<ViewMoreRowProps, SectionTypes.more>
+  | DataItem<OtherRowProps, SectionTypes.other>
   | DataItem<TeamRowProps, SectionTypes.teams>
 >
 
@@ -57,11 +64,18 @@ interface DataItem<T, TName extends SectionTypes> {
 export const ConversationFilters = () => {
   const styles = useStyles()
   const { setScrollOffset, params } = useContext(FilterContext)
-  const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
+  const {
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+    show_archived,
+  } = params
 
+  const filterDropdownEnabled = useFilterDropdownEnabled()
   const directMessagesEligible = useDirectMessagesEligible()
   const hasDirectMessages = useHasDirectMessages()
   const canFilterByDMs = directMessagesEligible && hasDirectMessages
+  const canFilterByArchived = useCanBrowseArchivedConversations()
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -72,10 +86,12 @@ export const ConversationFilters = () => {
       return FilterTypes.Teams
     } else if (show_direct_messages) {
       return FilterTypes.DirectMessages
+    } else if (show_archived) {
+      return FilterTypes.Archived
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const { groups = [] } = useGroupsToFilter()
   const { teams = [] } = useTeamsToFilter()
@@ -101,8 +117,9 @@ export const ConversationFilters = () => {
   const groupItemData = selectActiveWithFirst(5)(groupItems)
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
-  const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
-  const showGeneralFilters = !hideAppFilters || canFilterByDMs
+  const showAppFilters = !filterDropdownEnabled && groupItems.length > 0 && teamItems.length > 0
+  const showDMFilter = !filterDropdownEnabled && canFilterByDMs
+  const showGeneralFilters = showAppFilters || showDMFilter
 
   const listData: SectionListData = [
     {
@@ -114,7 +131,7 @@ export const ConversationFilters = () => {
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Groups,
         group_source_app_name: 'groups',
@@ -122,7 +139,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showAppFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.Teams,
         group_source_app_name: 'services',
@@ -130,7 +147,7 @@ export const ConversationFilters = () => {
       },
     },
     {
-      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      type: showDMFilter ? SectionTypes.filter : SectionTypes.hidden,
       data: {
         filter: FilterTypes.DirectMessages,
         show_direct_messages: true,
@@ -155,6 +172,20 @@ export const ConversationFilters = () => {
       type: teamItems.length > 5 ? SectionTypes.more : SectionTypes.hidden,
       data: { routeName: 'TeamFilters' },
     },
+    {
+      type: canFilterByArchived ? SectionTypes.header : SectionTypes.hidden,
+      data: { title: 'Other', style: styles.extraHeaderScalableSpace },
+    },
+    {
+      type: canFilterByArchived ? SectionTypes.other : SectionTypes.hidden,
+      data: {
+        filter: FilterTypes.Archived,
+        description: 'Archived for everybody',
+        icon: faBoxArchive,
+        show_archived: true,
+        isActive: activeFilter === FilterTypes.Archived,
+      },
+    },
   ]
 
   return (
@@ -175,6 +206,8 @@ export const ConversationFilters = () => {
             return <TeamRow {...item.data} />
           case SectionTypes.more:
             return <ViewMore {...item.data} />
+          case SectionTypes.other:
+            return <OtherRow {...item.data} />
           default:
             return null
         }

package/src/screens/conversation_filters/components/rows.tsx

@@ -1,8 +1,9 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { PlatformPressable } from '@react-navigation/elements'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import React, { PropsWithChildren, useContext } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
-import { Heading, Icon, Image, Text, TextButton } from '../../../components'
+import { Heading, Icon, IconTile, Image, Text, TextButton } from '../../../components'
 import {
   useAtFontScaleBreakpoint,
   useFontScale,
@@ -115,6 +116,33 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   )
 }
 
+export type OtherRowProps = {
+  show_archived?: boolean
+  isActive: boolean
+  filter: FilterTypes
+  description: string
+  icon: IconDefinition
+}
+
+export const OtherRow = ({ show_archived, isActive, filter, description, icon }: OtherRowProps) => {
+  const styles = useRowStyles()
+  const { setAppFilter } = useContext(FilterContext)
+
+  return (
+    <PressableRow onPress={() => setAppFilter({ show_archived })} isActive={isActive}>
+      <IconTile icon={icon} shape="square" size="lg" />
+      <View style={styles.rowTextContainer}>
+        <Heading variant="h3" style={styles.rowTitle}>
+          {filter}
+        </Heading>
+        <Text variant="footnote" style={styles.rowSubtitle}>
+          {description}
+        </Text>
+      </View>
+    </PressableRow>
+  )
+}
+
 export type ViewMoreRowProps = { routeName: keyof ConversationFilterStackParamList }
 
 export const ViewMore = ({ routeName }: ViewMoreRowProps) => {

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -22,6 +22,7 @@ export const FilterContext = createContext<{
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
     show_direct_messages: undefined,
+    show_archived: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -57,6 +58,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
           show_direct_messages: undefined,
+          show_archived: undefined,
         })
       )
     },
@@ -65,6 +67,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
@@ -72,6 +75,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
         show_direct_messages: params.show_direct_messages,
+        show_archived: params.show_archived,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -3,5 +3,6 @@ export enum FilterTypes {
   DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
+  Archived = 'Archived conversations',
   More = 'More',
 }

package/src/screens/conversation_filters/screen_props.ts

@@ -5,6 +5,7 @@ export type ConversationFiltersParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
   show_direct_messages?: boolean
+  show_archived?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>

package/src/screens/conversation_filters_screen.tsx

@@ -1,11 +1,13 @@
-import { useHeaderHeight } from '@react-navigation/elements'
+import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements'
 import * as ReactNavigationNative from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/native'
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
+import { useTheme } from '../hooks'
+import { useFilterDropdownEnabled } from '../hooks/use_filter_dropdown_enabled'
 import { ConversationFilters } from './conversation_filters/components/conversation_filters'
 import {
   FilterProvider,
@@ -86,16 +88,19 @@ export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps
   return (
     <FilterProvider>
       <FormSheet.Root contentStyle={styles.contentContainer} showAndroidSheetGrabber={false}>
-        <FormSheetHeaderWithContext />
+        <ConversationFiltersHeader />
         <Filters />
       </FormSheet.Root>
     </FilterProvider>
   )
 }
 
-const FormSheetHeaderWithContext = () => {
+export const ConversationFiltersHeader = () => {
   const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
+  const navigation = useNavigation()
   const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const filterDropdownEnabled = useFilterDropdownEnabled()
+  const { colors } = useTheme()
   const styles = useStyles()
 
   const handleFormSheetHeaderLayout = useCallback(
@@ -108,7 +113,18 @@ const FormSheetHeaderWithContext = () => {
   return (
     <View onLayout={handleFormSheetHeaderLayout}>
       <FormSheet.Header style={styles.header}>
-        <FormSheet.HeaderTitle>Filters</FormSheet.HeaderTitle>
+        {Platform.OS === 'android' && (
+          <HeaderBackButton
+            displayMode="minimal"
+            accessibilityLabel="Back"
+            tintColor={colors.iconColorDefaultPrimary}
+            onPress={navigation.goBack}
+            style={styles.backButton}
+          />
+        )}
+        <FormSheet.HeaderTitle>
+          {filterDropdownEnabled ? 'More filters' : 'Filters'}
+        </FormSheet.HeaderTitle>
         <FormSheet.HeaderActions>
           <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
           <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />
@@ -141,5 +157,9 @@ const useStyles = () => {
       // separator the way the non-scrolling reaction sheet does.
       borderBottomWidth: 0,
     },
+    backButton: {
+      marginLeft: -3,
+      marginRight: 8,
+    },
   })
 }

package/src/screens/conversation_new/components/groups_form.tsx

@@ -125,6 +125,7 @@ export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: Gr
         memberData={groupMemberships.adultMembers}
         loadingMore={groupMemberships.isFetchingNextPage}
         onEndReached={groupMemberships.fetchNextPage}
+        listEmptyText={groupMemberships.isLoading ? 'Loading members...' : undefined}
         FormContent={
           <FormContent
             group={group}

package/src/screens/conversation_screen.tsx

@@ -40,6 +40,7 @@ import {
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
 import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge'
+import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
@@ -158,7 +159,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
       })
     } else {
       navigation.setParams({
-        title: title,
+        title: title ?? undefined,
         badge: badges?.[0],
         deleted: conversation?.deleted,
         muted,
@@ -265,12 +266,13 @@ function ConversationBottomBar({
   onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
+  const unarchiveAction = useUnarchiveConversationAction(conversation)
 
   if (conversation.disabled)
     return (
       <ConversationDisabledBanner
         message={conversation.disabledMessage ?? null}
-        messageLink={messageLink}
+        action={unarchiveAction ?? messageLink}
       />
     )
   if (!canReply) return <MemberMessagesDisabledBanner />

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -2,6 +2,14 @@ import { QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../../__utils__/query_client'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAdapter,
+  VideoAdapter,
+} from '../../../utils/native_adapters'
 import { ConversationsScreen } from '../conversations_screen'
 
 const mockGet = jest.fn()
@@ -28,6 +36,26 @@ jest.mock('../components/search_list_header_component', () => {
   const { Text } = require('react-native')
   return { SearchListHeaderComponent: () => <Text>Search header</Text> }
 })
+jest.mock('../components/filter_dropdown_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { FilterDropdownListHeaderComponent: () => <Text>Filter dropdown header</Text> }
+})
+
+const configureAdapters = ({ menu }: { menu: boolean }) => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    ...(menu ? { menu: new MenuAdapter({ View: () => null }) } : {}),
+  })
+}
 
 const renderWithFeatures = (enabledFeatures: string[]) => {
   mockGet.mockResolvedValue({
@@ -51,6 +79,10 @@ const renderWithFeatures = (enabledFeatures: string[]) => {
 }
 
 describe('ConversationsScreen header gating', () => {
+  beforeEach(() => {
+    configureAdapters({ menu: true })
+  })
+
   it('shows the search header with only the QA flag on', async () => {
     const view = renderWithFeatures(['QA_MOBILE_search'])
 
@@ -63,6 +95,26 @@ describe('ConversationsScreen header gating', () => {
     expect(await view.findByText('Search header')).toBeTruthy()
   })
 
+  it('shows the filter dropdown header over the search header when its flag is on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('shows the filter dropdown header with only its rollout flag on', async () => {
+    const view = renderWithFeatures(['ROLLOUT_MOBILE_filter_dropdown'])
+
+    expect(await view.findByText('Filter dropdown header')).toBeTruthy()
+  })
+
+  it('falls back to the search header when the host has no menu adapter', async () => {
+    configureAdapters({ menu: false })
+
+    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
   it('shows the default header with neither flag on', async () => {
     const view = renderWithFeatures(['ROLLOUT_WEB_search'])
 

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -0,0 +1,259 @@
+import { fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Pressable, Text } from 'react-native'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  ImagePickerAdapter,
+  MenuAction,
+  MenuAdapter,
+  MenuViewProps,
+  VideoAdapter,
+} from '../../../../utils/native_adapters'
+import { FilterDropdownListHeaderComponent } from '../filter_dropdown_list_header_component'
+
+const mockNavigate = jest.fn()
+const mockSetParams = jest.fn()
+const mockRouteParams: Record<string, unknown> = {}
+const mockCanDisplayGroups = jest.fn()
+const mockSearchEnabled = jest.fn()
+const mockCanBrowseArchived = jest.fn()
+const mockGroupsByGraphId: Record<string, { name: string }> = {}
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
+  useRoute: () => ({ params: mockRouteParams }),
+}))
+
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: ({ url }: { url: string }, { enabled }: { enabled: boolean }) => ({
+    data: enabled ? mockGroupsByGraphId[url.replace('/me/groups/', '')] : undefined,
+  }),
+}))
+jest.mock('../../../../hooks/use_groups', () => ({
+  useCanDisplayGroups: (args: { source_type: string }) => mockCanDisplayGroups(args),
+}))
+jest.mock('../../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => true,
+}))
+jest.mock('../../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => true,
+}))
+jest.mock('../../../../hooks/use_can_browse_archived_conversations', () => ({
+  useCanBrowseArchivedConversations: () => mockCanBrowseArchived(),
+}))
+jest.mock('../../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => true,
+}))
+jest.mock('../../../../hooks/use_new_conversation_entry', () => ({
+  useNewConversationEntry: () => 'select_type',
+}))
+jest.mock('../../../../hooks/use_current_person', () => ({
+  useCurrentPersonCache: () => ({ update: jest.fn() }),
+}))
+jest.mock('../../../../hooks/use_conversations_actions', () => ({
+  useMarkAllRead: () => ({ markAllRead: jest.fn(), isPending: false }),
+}))
+jest.mock('../../../../hooks/use_new_conversation_from_filter', () => ({
+  useNewConversationFromFilter: () => undefined,
+}))
+jest.mock('../../../../hooks/use_search_enabled', () => ({
+  useSearchEnabled: () => mockSearchEnabled(),
+}))
+
+const FakeMenuView = ({ actions, onPressAction, children }: MenuViewProps) => {
+  const flatten = (items: MenuAction[]): MenuAction[] =>
+    items.flatMap(item => (item.displayInline && item.subactions ? item.subactions : [item]))
+
+  return (
+    <>
+      {children}
+      {flatten(actions).map(action => (
+        <Pressable
+          key={action.id}
+          accessibilityRole="menuitem"
+          accessibilityLabel={action.title}
+          accessibilityState={{ selected: action.state === 'on' }}
+          onPress={() => onPressAction?.({ nativeEvent: { event: action.id ?? action.title } })}
+        >
+          <Text>{action.title}</Text>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+beforeAll(() => {
+  ChatAdapters.configure({
+    clipboard: new ClipboardAdapter({
+      getStringAsync: async () => '',
+      setStringAsync: async () => {},
+    }),
+    audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+    video: new VideoAdapter({ Player: (() => null) as any }),
+    imagePicker: new ImagePickerAdapter({
+      openCameraAsync: async () => ({ canceled: true, assets: null }),
+      openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+    }),
+    menu: new MenuAdapter({ View: FakeMenuView }),
+  })
+})
+
+const setCapabilities = ({ groups, teams }: { groups: boolean; teams: boolean }) => {
+  mockCanDisplayGroups.mockImplementation(({ source_type }: { source_type: string }) =>
+    source_type === 'Group' ? groups : teams
+  )
+}
+
+const setRouteParams = (params: Record<string, unknown>) => {
+  Object.keys(mockRouteParams).forEach(key => delete mockRouteParams[key])
+  Object.assign(mockRouteParams, params)
+}
+
+const menuItemNames = () =>
+  screen.getAllByRole('menuitem').map(item => item.props.accessibilityLabel)
+
+describe('FilterDropdownListHeaderComponent', () => {
+  beforeEach(() => {
+    mockNavigate.mockClear()
+    mockSetParams.mockClear()
+    mockSearchEnabled.mockReturnValue(true)
+    mockCanBrowseArchived.mockReturnValue(false)
+    setCapabilities({ groups: true, teams: true })
+    setRouteParams({})
+  })
+
+  it('offers every filter the person can use, then More filters', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'More filters'])
+    expect(screen.getByRole('button', { name: 'All conversations' })).toBeTruthy()
+  })
+
+  it('leaves out Teams and More filters when only DMs are filterable', () => {
+    setCapabilities({ groups: false, teams: false })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'DMs'])
+  })
+
+  it('selecting Groups filters to group conversations', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ group_source_app_name: 'Groups', show_direct_messages: undefined })
+    )
+  })
+
+  it('labels the trigger with the active filter and checks it', () => {
+    setRouteParams({ group_source_app_name: 'Services' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Teams' })).toBeTruthy()
+    expect(screen.getByRole('menuitem', { name: 'Teams' }).props.accessibilityState.selected).toBe(
+      true
+    )
+  })
+
+  it("labels the trigger with the group's name when filtered to one group from More filters", () => {
+    mockGroupsByGraphId['Group/1'] = { name: 'Youth Group' }
+    setRouteParams({ chat_group_graph_id: 'Group/1' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Youth Group' })).toBeTruthy()
+  })
+
+  it('falls back to the route title while the group is still loading', () => {
+    delete mockGroupsByGraphId['Group/2']
+    setRouteParams({ chat_group_graph_id: 'Group/2', title: 'Youth Group' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Youth Group' })).toBeTruthy()
+  })
+
+  it('offers More filters when archived conversations are the only extra filter', () => {
+    setCapabilities({ groups: false, teams: false })
+    mockCanBrowseArchived.mockReturnValue(true)
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'More filters'])
+  })
+
+  it('labels the archived list and carries it into More filters', () => {
+    setRouteParams({ show_archived: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Archived' })).toBeTruthy()
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      'ConversationFilters',
+      expect.objectContaining({ show_archived: true })
+    )
+  })
+
+  it('hides Mark all read on the archived list', () => {
+    const view = render(<FilterDropdownListHeaderComponent />)
+
+    expect(view.getByText('Mark all read')).toBeTruthy()
+
+    setRouteParams({ show_archived: true })
+    view.rerender(<FilterDropdownListHeaderComponent />)
+
+    expect(view.queryByText('Mark all read')).toBeNull()
+  })
+
+  it('leaves the archived list when another filter is picked', () => {
+    setRouteParams({ show_archived: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ group_source_app_name: 'Groups', show_archived: undefined })
+    )
+  })
+
+  it('More filters opens the filters sheet', () => {
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith('ConversationFilters', expect.any(Object))
+  })
+
+  it('shows the search button only when search is enabled', () => {
+    mockSearchEnabled.mockReturnValue(false)
+    const view = render(<FilterDropdownListHeaderComponent />)
+
+    expect(view.queryByTestId('conversations-search-button')).toBeNull()
+
+    mockSearchEnabled.mockReturnValue(true)
+    view.rerender(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(view.getByTestId('conversations-search-button'))
+
+    expect(mockNavigate).toHaveBeenCalledWith('Search')
+  })
+
+  it('renders the search button after the other actions', () => {
+    const view = render(<FilterDropdownListHeaderComponent />)
+
+    const buttons = view.getAllByRole('button').map(button => button.props.accessibilityLabel)
+
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('Chat settings'))
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('New conversation'))
+  })
+})