@planningcenter/chat-react-native 4.4.1-qa-staging.16 → 4.4.1-qa-staging.18

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

@@ -0,0 +1,248 @@
+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('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'))
+  })
+})

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

@@ -3,13 +3,12 @@ import React from 'react'
 import { ListHeaderComponent } from '../list_header_component'
 
 const mockSetParams = jest.fn()
+let mockParams: Record<string, unknown> = {}
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
-  useRoute: () => ({
-    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
-  }),
+  useRoute: () => ({ params: mockParams }),
 }))
 
 jest.mock('../../../../hooks/use_groups', () => ({
@@ -45,10 +44,14 @@ const clearedFilter = {
   chat_group_graph_id: undefined,
   group_source_app_name: undefined,
   show_direct_messages: undefined,
+  show_archived: undefined,
 }
 
 describe('ListHeaderComponent filter toggles', () => {
-  beforeEach(() => mockSetParams.mockClear())
+  beforeEach(() => {
+    mockSetParams.mockClear()
+    mockParams = { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' }
+  })
 
   it.each([
     ['Show all conversations', clearedFilter],
@@ -64,3 +67,17 @@ describe('ListHeaderComponent filter toggles', () => {
     expect(mockSetParams.mock.calls[0][0]).toStrictEqual(expected)
   })
 })
+
+describe('ListHeaderComponent mark all read', () => {
+  it('shows Mark all read on the active list', () => {
+    mockParams = {}
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).not.toBeNull()
+  })
+
+  it('hides Mark all read on the archived list', () => {
+    mockParams = { show_archived: true }
+
+    expect(render(<ListHeaderComponent />).queryByText('Mark all read')).toBeNull()
+  })
+})

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

@@ -0,0 +1,284 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { FilterDropdown, FilterDropdownOption, TextButton } from '../../../components'
+import {
+  useAtFontScaleBreakpoint,
+  useCanBrowseArchivedConversations,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEligible,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
+import { useApiGet } from '../../../hooks/use_api'
+import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
+import { useCanDisplayGroups } from '../../../hooks/use_groups'
+import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
+import { useSearchEnabled } from '../../../hooks/use_search_enabled'
+import { GraphId, GroupResource } 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 { ListHeaderActionButton } from './list_header_action_button'
+
+const ROW_PADDING_HORIZONTAL = 16
+const ALL_CONVERSATIONS_LABEL = 'All conversations'
+const ARCHIVED_LABEL = 'Archived'
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  DMs = 'DMs',
+  More = 'More',
+}
+
+const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, ConversationFiltersParams> = {
+  [FilterTypes.All]: {},
+  [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
+  [FilterTypes.Teams]: { group_source_app_name: 'Services' },
+  [FilterTypes.DMs]: { show_direct_messages: true },
+}
+
+export const FilterDropdownListHeaderComponent = () => {
+  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 canBrowseArchived = useCanBrowseArchivedConversations()
+  const searchEnabled = useSearchEnabled()
+  const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
+  const {
+    title,
+    chat_group_graph_id,
+    group_source_app_name = '',
+    show_direct_messages,
+    show_archived,
+  } = 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 { data: group } = useApiGet<GroupResource>(
+    { url: `/me/groups/${chat_group_graph_id}`, data: { fields: { Group: [] } }, app: 'chat' },
+    { enabled: !!chat_group_graph_id }
+  )
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id || show_archived) {
+      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, show_archived])
+
+  const options: FilterDropdownOption[] = useMemo(
+    () => [
+      { id: FilterTypes.All, label: FilterTypes.All },
+      ...(canFilterByGroups ? [{ id: FilterTypes.Groups, label: FilterTypes.Groups }] : []),
+      ...(canFilterByTeams ? [{ id: FilterTypes.Teams, label: FilterTypes.Teams }] : []),
+      ...(canFilterByDMs ? [{ id: FilterTypes.DMs, label: FilterTypes.DMs }] : []),
+    ],
+    [canFilterByGroups, canFilterByTeams, canFilterByDMs]
+  )
+
+  const triggerLabel = useMemo(() => {
+    if (chat_group_graph_id) return group?.name || title || ALL_CONVERSATIONS_LABEL
+    if (show_archived) return ARCHIVED_LABEL
+    if (active === FilterTypes.All) return ALL_CONVERSATIONS_LABEL
+
+    return active
+  }, [chat_group_graph_id, group?.name, title, show_archived, active])
+
+  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,
+        show_archived: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
+  const handleSelectFilter = useCallback(
+    (id: string) => {
+      const params = FILTER_PARAMS[id as keyof typeof FILTER_PARAMS]
+      if (params) handleSetFilter(params)
+    },
+    [handleSetFilter]
+  )
+
+  const handleSearch = useCallback(() => {
+    navigation.navigate('Search')
+  }, [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,
+      show_archived,
+    })
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+
+  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 showMoreFilters = canFilterByGroups || canFilterByTeams || canBrowseArchived
+
+  const styles = useStyles()
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.headingRow}>
+        <View style={styles.titleContainer}>
+          <FilterDropdown
+            options={options}
+            selectedId={active}
+            onSelect={handleSelectFilter}
+            onMoreFilters={handleOpenConversationFilters}
+            showMoreFilters={showMoreFilters}
+            triggerLabel={triggerLabel}
+          />
+        </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}
+            />
+          )}
+          {searchEnabled && (
+            <ListHeaderActionButton
+              name="general.search"
+              onPress={handleSearch}
+              accessibilityLabel="Search"
+              testID="conversations-search-button"
+              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            />
+          )}
+        </View>
+      </View>
+      <View style={styles.markAllReadRow}>
+        <TextButton
+          onPress={alertMarkAllRead}
+          disabled={isPending}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle="Mark all read"
+        >
+          Mark all read
+        </TextButton>
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  return StyleSheet.create({
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingBottom: 16,
+      gap: 8,
+    },
+    headingRow: {
+      gap: 12,
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
+      alignItems: atFontScaleBreakpoint ? 'flex-start' : 'center',
+      justifyContent: 'space-between',
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+    titleContainer: {
+      flexShrink: 1,
+      minWidth: 0,
+    },
+    actionsContainer: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    markAllReadRow: {
+      alignItems: 'flex-start',
+      paddingHorizontal: ROW_PADDING_HORIZONTAL,
+    },
+  })
+}

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

@@ -44,6 +44,7 @@ export const ListHeaderComponent = () => {
     chat_group_graph_id,
     group_source_app_name = '',
     show_direct_messages,
+    show_archived,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -54,7 +55,7 @@ export const ListHeaderComponent = () => {
   )
 
   const active: FilterTypes = useMemo(() => {
-    if (chat_group_graph_id) {
+    if (chat_group_graph_id || show_archived) {
       return FilterTypes.More
     } else if (/groups/i.test(group_source_app_name)) {
       return FilterTypes.Groups
@@ -65,7 +66,7 @@ export const ListHeaderComponent = () => {
     }
 
     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 handleNewConversationNavigation = useCallback(() => {
     if (newConversationFromFilter || entryMode === 'select_type') {
@@ -104,6 +105,7 @@ export const ListHeaderComponent = () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
         ...params,
       })
     },
@@ -119,8 +121,9 @@ export const ListHeaderComponent = () => {
       chat_group_graph_id,
       group_source_app_name,
       show_direct_messages,
+      show_archived,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -161,15 +164,17 @@ export const ListHeaderComponent = () => {
           <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>
+          {!show_archived && (
+            <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