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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.4.0-rc.0",
+  "version": "4.4.0-rc.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "0539b5f633f3d60712eb79c502ca354180a9f0ac"
+  "gitHead": "4b22c1a4ec8c6b491b71fe443842fe7be3cd3ff4"
 }

package/src/components/conversation/__tests__/message_list.test.tsx

@@ -28,6 +28,15 @@ import { getMessagesQueryKey } from '../../../utils/request/get_messages'
 import { MessageList } from '../message_list'
 
 jest.mock('../../../hooks/use_api_client')
+const mockFlash = jest.fn()
+jest.mock('../../../hooks/use_animated_message_background_color', () => ({
+  useAnimatedMessageBackgroundColor: () => ({
+    animatedBackgroundColor: {},
+    flash: mockFlash,
+    handleMessagePressIn: jest.fn(),
+    handleMessagePressOut: jest.fn(),
+  }),
+}))
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ navigate: jest.fn() }),
@@ -105,7 +114,7 @@ let queryClient: QueryClient
 // A top-level rerender would rebuild the wrapper context and redraw every row.
 let setHarnessConversation: (next: ConversationResource) => void = () => {}
 
-function Harness() {
+function Harness({ anchorMessageId }: { anchorMessageId?: string }) {
   const [current, setCurrent] = React.useState(conversation)
   React.useEffect(() => {
     setHarnessConversation = setCurrent
@@ -117,6 +126,7 @@ function Harness() {
       conversation={current}
       conversationId={CONVERSATION_ID}
       messages={loaded}
+      anchorMessageId={anchorMessageId}
       hasNextPage
       onEndReached={() => {}}
     />
@@ -151,16 +161,24 @@ const renderedRowIds = () => {
   return Array.from(new Set(ids)).sort()
 }
 
-const renderList = (seed: MessageResource[] = messages) => {
+const renderList = (seed: MessageResource[] = messages, anchorMessageId?: string) => {
   queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, {
     pages: [{ data: seed, links: {}, meta: { count: seed.length, totalCount: seed.length } }],
     pageParams: [{}],
   })
-  render(<Harness />, { wrapper: Wrapper })
+  render(<Harness anchorMessageId={anchorMessageId} />, { wrapper: Wrapper })
   seed.forEach(m => screen.getByTestId(`message-${m.id}`))
   renderSpy.mockClear()
 }
 
+const reportViewable = (items: MessageResource[]) =>
+  act(() =>
+    screen.UNSAFE_getByType(FlatList).props.onViewableItemsChanged({
+      viewableItems: items.map(item => ({ item, key: item.id, index: null, isViewable: true })),
+      changed: [],
+    })
+  )
+
 // TanStack notifies observers on a setTimeout; deliver inline so one write is one act().
 beforeAll(() => notifyManager.setScheduler(callback => callback()))
 afterAll(() => notifyManager.setScheduler(callback => setTimeout(callback, 0)))
@@ -274,4 +292,54 @@ describe('MessageList', () => {
     expect(screen.queryByTestId(`message-${target.id}`)).toBeNull()
     expect(renderedRowIds()).toEqual([])
   })
+
+  describe('opened at an anchor message', () => {
+    const anchor = messages[4]
+
+    it('flashes the anchor row once it comes into view, redrawing only that row', () => {
+      renderList(messages, anchor.id)
+
+      reportViewable([messages[1], messages[2]])
+      expect(mockFlash).not.toHaveBeenCalled()
+      expect(renderedRowIds()).toEqual([])
+
+      reportViewable([messages[3], anchor])
+      expect(mockFlash).toHaveBeenCalledTimes(1)
+      expect(renderedRowIds()).toEqual([anchor.id])
+    })
+
+    it('flashes only once, through later viewability changes, redraws, and a remount', () => {
+      renderList(messages, anchor.id)
+      reportViewable([anchor])
+      expect(mockFlash).toHaveBeenCalledTimes(1)
+
+      reportViewable([anchor, messages[5]])
+      act(() => updateCacheWithReaction(queryClient, messagesQueryKey, reactionEvent(anchor), ME))
+      expect(screen.getByTestId(`reaction-${anchor.id}-heart`)).toBeTruthy()
+
+      act(() =>
+        queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, prev =>
+          deleteRecordInPagesData({ data: prev, record: anchor })
+        )
+      )
+      expect(screen.queryByTestId(`message-${anchor.id}`)).toBeNull()
+      act(() =>
+        queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, prev =>
+          addRecordInPagesData({ data: prev, record: anchor })
+        )
+      )
+      expect(screen.getByTestId(`message-${anchor.id}`)).toBeTruthy()
+      reportViewable([anchor])
+
+      expect(mockFlash).toHaveBeenCalledTimes(1)
+    })
+
+    it('never flashes when there is no anchor', () => {
+      renderList()
+
+      reportViewable([messages[0], messages[1]])
+
+      expect(mockFlash).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/components/conversation/message.tsx

@@ -46,6 +46,8 @@ interface MessageProps extends MessageResource {
   conversation_id: number
   readByOthers?: boolean
   inReplyScreen?: boolean
+  highlighted?: boolean
+  onHighlightShown?: () => void
 }
 
 export const Message = memo(function MessageRow({
@@ -53,6 +55,8 @@ export const Message = memo(function MessageRow({
   conversation_id,
   readByOthers,
   inReplyScreen,
+  highlighted = false,
+  onHighlightShown,
   ...message
 }: MessageProps) {
   const { reactionCounts, pending, error, attachments, author } = message
@@ -71,7 +75,7 @@ export const Message = memo(function MessageRow({
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
-  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
+  const { animatedBackgroundColor, flash, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
@@ -116,6 +120,13 @@ export const Message = memo(function MessageRow({
     messageText || ''
   } ${saveStatusLabel} ${timestamp} ${replyCountLabel}`
 
+  useEffect(() => {
+    if (!highlighted) return
+
+    flash()
+    onHighlightShown?.()
+  }, [highlighted, flash, onHighlightShown])
+
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {

package/src/components/conversation/message_list.tsx

@@ -1,6 +1,6 @@
 import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { noop } from 'lodash'
-import React, { RefObject, useRef } from 'react'
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types/resources/conversation'
@@ -45,6 +45,7 @@ interface MessageListProps extends ScrollHandlers {
 }
 
 const ANCHOR_CLEARS_JUMP_BUTTON = 56
+const ANCHOR_VIEWABILITY = { itemVisiblePercentThreshold: 50 }
 
 /** MessageList
  * The inverted list of messages, reply previews, and date separators for a conversation
@@ -80,6 +81,13 @@ export function MessageList({
   const contentHeight = useRef(0)
   const userHasScrolled = useRef(false)
   const draggedSinceStartReached = useRef(false)
+  const latestAnchorMessageId = useRef(anchorMessageId)
+  const flashedAnchorId = useRef<string | null>(null)
+  const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null)
+
+  useEffect(() => {
+    latestAnchorMessageId.current = anchorMessageId
+  }, [anchorMessageId])
 
   // Row heights keep settling after the first layout (images, attachments), so we
   // re-pin on every layout pass until the reader takes over with a drag.
@@ -119,6 +127,19 @@ export function MessageList({
     onScrollBeginDrag?.(event)
   }
 
+  const flashAnchorOnceViewable: FlatListProps<EnrichedMessage>['onViewableItemsChanged'] = ({
+    viewableItems,
+  }) => {
+    const anchorId = latestAnchorMessageId.current
+    if (!anchorId || anchorId === flashedAnchorId.current) return
+    if (!viewableItems.some(token => token.item.id === anchorId)) return
+
+    flashedAnchorId.current = anchorId
+    setHighlightedMessageId(anchorId)
+  }
+
+  const clearHighlight = useCallback(() => setHighlightedMessageId(null), [])
+
   // VirtualizedList re-checks its edges on every content size change using a JS offset
   // the native hold never updates, so without this each merged page re-fires it.
   const handleStartReached = () => {
@@ -143,6 +164,8 @@ export function MessageList({
       onScrollToIndexFailed={noop}
       onScrollEndDrag={onScrollEndDrag}
       onMomentumScrollEnd={onMomentumScrollEnd}
+      onViewableItemsChanged={flashAnchorOnceViewable}
+      viewabilityConfig={ANCHOR_VIEWABILITY}
       scrollEventThrottle={10}
       maintainVisibleContentPosition={behind ? HOLD_ONLY : HOLD_AND_FOLLOW}
       ListFooterComponent={
@@ -181,6 +204,8 @@ export function MessageList({
             conversation_id={conversationId}
             readByOthers={readByOthers}
             inReplyScreen={inReplyScreen}
+            highlighted={item.id === highlightedMessageId}
+            onHighlightShown={clearHighlight}
           />
         )
       }}

package/src/hooks/use_animated_message_background_color.ts

@@ -1,43 +1,68 @@
+import { useCallback } from 'react'
 import { Platform } from 'react-native'
 import {
   useSharedValue,
   useAnimatedStyle,
+  withDelay,
+  withSequence,
   withTiming,
   interpolateColor,
   Easing,
+  ReduceMotion,
 } from 'react-native-reanimated'
 import { useTheme } from './use_theme'
 
+const FLASH_IN_MS = 150
+const FLASH_HOLD_MS = 500
+const FLASH_OUT_MS = 1500
+
 export function useAnimatedMessageBackgroundColor() {
   const { colors } = useTheme()
-  const bgFadeProgress = useSharedValue(0)
+  const pressProgress = useSharedValue(0)
+  const flashProgress = useSharedValue(0)
 
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
+  const tintColor = colors.fillColorNeutral050Base
+  const tintsOnPress = Platform.OS === 'ios'
 
   const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
+    const pressTint = tintsOnPress ? pressProgress.value : 0
+    const progress = Math.max(pressTint, flashProgress.value)
+    const backgroundColor = interpolateColor(progress, [0, 1], ['transparent', tintColor])
     return {
       backgroundColor,
     }
   })
 
   const handleMessagePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
   const handleMessagePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
+  const flash = useCallback(() => {
+    flashProgress.value = withSequence(
+      withTiming(1, {
+        duration: FLASH_IN_MS,
+        easing: Easing.out(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      }),
+      withDelay(
+        FLASH_HOLD_MS,
+        withTiming(0, {
+          duration: FLASH_OUT_MS,
+          easing: Easing.out(Easing.ease),
+          reduceMotion: ReduceMotion.System,
+        }),
+        ReduceMotion.Never
+      )
+    )
+  }, [flashProgress])
+
   return {
     animatedBackgroundColor,
+    flash,
     handleMessagePressIn,
     handleMessagePressOut,
   }

package/src/hooks/use_product_analytics.ts

@@ -12,6 +12,8 @@ export interface EventMetadata {
 export const analyticsEvents = {
   conversation_index_opened: 'chat.mobile.conversations.index.opened',
   conversation_show_opened: 'chat.mobile.conversations.show.opened',
+  search_performed: 'chat.mobile.search.performed',
+  search_result_opened: 'chat.mobile.search.result.opened',
 } as const satisfies Record<string, `chat.mobile.${string}`>
 
 type AnalyticsEventName = (typeof analyticsEvents)[keyof typeof analyticsEvents]
@@ -53,7 +55,7 @@ function sendEvents(events: AnalyticsEvent[], config: ProductAnalyticsConfig): P
   })
 }
 
-const useProductAnalytics = () => {
+export const useProductAnalytics = () => {
   const { productAnalyticsConfig } = useChatContext()
 
   const snakeCasedBaseMeta = useMemo(

package/src/hooks/use_search_enabled.ts

@@ -0,0 +1,9 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useSearchEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.search) || featureEnabled(availableFeatures.search_rollout)
+  )
+}

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

@@ -0,0 +1,71 @@
+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 { ConversationsScreen } from '../conversations_screen'
+
+const mockGet = jest.fn()
+jest.mock('../../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { get: mockGet } }),
+}))
+jest.mock('../../../hooks/use_product_analytics', () => ({
+  ...jest.requireActual('../../../hooks/use_product_analytics'),
+  usePublishProductAnalyticsEvent: () => {},
+}))
+jest.mock('../../../contexts/conversations_context', () => ({
+  ConversationsContextProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+jest.mock('../../../components', () => ({
+  Conversations: ({ ListHeaderComponent }: { ListHeaderComponent: React.ComponentType }) => (
+    <ListHeaderComponent />
+  ),
+}))
+jest.mock('../components/list_header_component', () => {
+  const { Text } = require('react-native')
+  return { ListHeaderComponent: () => <Text>Default header</Text> }
+})
+jest.mock('../components/search_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { SearchListHeaderComponent: () => <Text>Search header</Text> }
+})
+
+const renderWithFeatures = (enabledFeatures: string[]) => {
+  mockGet.mockResolvedValue({
+    data: enabledFeatures.map((name, index) => ({
+      type: 'Feature',
+      id: String(index + 1),
+      name,
+      enabled: true,
+    })),
+    links: {},
+    meta: { count: enabledFeatures.length, totalCount: enabledFeatures.length },
+  })
+
+  return render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <Suspense fallback={null}>
+        <ConversationsScreen route={{ params: {} }} />
+      </Suspense>
+    </QueryClientProvider>
+  )
+}
+
+describe('ConversationsScreen header gating', () => {
+  it('shows the search header with only the QA flag on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
+  it('shows the search header with only the rollout flag on', async () => {
+    const view = renderWithFeatures(['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'])
+
+    expect(await view.findByText('Default header')).toBeTruthy()
+  })
+})

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

@@ -264,7 +264,7 @@ const useStyles = ({
   return StyleSheet.create({
     listHeader: {
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.statusErrorBorder,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
       paddingBottom: 16,
       gap: 16,
     },

package/src/screens/conversations/conversations_screen.tsx

@@ -3,8 +3,8 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Conversations } from '../../components'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
-import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { analyticsEvents, usePublishProductAnalyticsEvent } from '../../hooks/use_product_analytics'
+import { useSearchEnabled } from '../../hooks/use_search_enabled'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
 import { ListHeaderComponent } from './components/list_header_component'
@@ -19,8 +19,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {
   const styles = useStyles()
-  const { featureEnabled } = useFeatures()
-  const searchEnabled = featureEnabled(availableFeatures.search)
+  const searchEnabled = useSearchEnabled()
   const Header = searchEnabled ? SearchListHeaderComponent : ListHeaderComponent
 
   usePublishProductAnalyticsEvent(analyticsEvents.conversation_index_opened)

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -18,6 +18,11 @@ const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [strin
 jest.mock('../../../hooks/use_search_results', () => ({
   useSearchResults: (term: string) => mockUseSearchResults(term),
 }))
+const mockPublishEvent = jest.fn()
+jest.mock('../../../hooks/use_product_analytics', () => ({
+  ...jest.requireActual('../../../hooks/use_product_analytics'),
+  useProductAnalytics: () => ({ publishEvent: mockPublishEvent }),
+}))
 jest.mock('../../../components/display/keyboard_view', () => ({
   ...jest.requireActual('../../../components/display/keyboard_view'),
   KeyboardView: ({ children }: { children: React.ReactNode }) => children,
@@ -47,9 +52,17 @@ const messageResult: MessageSearchResultResource = {
   },
 }
 
+const secondMessageResult: MessageSearchResultResource = {
+  ...messageResult,
+  id: '01JSECONDULID',
+  title: 'Youth',
+  url: '/conversations/9/messages/01JSECONDULID',
+  extra: { ...messageResult.extra, conversationId: 9, authorName: 'Bob' },
+}
+
 const renderWithResults = () => {
   mockUseSearchResults.mockReturnValue({
-    results: [conversationResult, messageResult],
+    results: [conversationResult, messageResult, secondMessageResult],
     failedTypes: [],
     isPending: false,
     isError: false,
@@ -59,7 +72,9 @@ const renderWithResults = () => {
     isFetchingNextPage: false,
   })
   const view = render(<SearchScreen />)
-  fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')
+  const input = view.getByLabelText(inputLabel)
+  fireEvent.changeText(input, 'bud')
+  fireEvent.changeText(input, 'budget')
   act(() => jest.advanceTimersByTime(200))
   return view
 }
@@ -67,6 +82,7 @@ const renderWithResults = () => {
 beforeEach(() => {
   jest.useFakeTimers()
   mockNavigate.mockReset()
+  mockPublishEvent.mockReset()
   mockUseSearchResults.mockReset().mockReturnValue({
     results: [],
     failedTypes: [],
@@ -137,4 +153,42 @@ describe('SearchScreen', () => {
       title: 'Finance',
     })
   })
+
+  it('publishes one search event per settled term with result counts, never the term', () => {
+    renderWithResults()
+
+    expect(mockPublishEvent).toHaveBeenCalledTimes(1)
+    expect(mockPublishEvent).toHaveBeenCalledWith('chat.mobile.search.performed', {
+      term_length: 6,
+      conversation_result_count: 1,
+      message_result_count: 2,
+    })
+    expect(JSON.stringify(mockPublishEvent.mock.calls)).not.toContain('budget')
+  })
+
+  it('does not publish a retyped term whose results are already cached', () => {
+    const view = renderWithResults()
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'budge')
+    act(() => jest.advanceTimersByTime(200))
+    fireEvent.changeText(input, 'budget')
+    act(() => jest.advanceTimersByTime(200))
+
+    const performed = mockPublishEvent.mock.calls.filter(
+      ([name]) => name === 'chat.mobile.search.performed'
+    )
+    expect(performed.map(([, meta]) => meta.term_length)).toEqual([6, 5])
+  })
+
+  it('publishes the opened result type and its position within its section', () => {
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText(/^Youth, Bob: budget/))
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('chat.mobile.search.result.opened', {
+      result_type: 'message',
+      position: 1,
+    })
+  })
 })

package/src/screens/search/components/__tests__/conversation_results.test.tsx

@@ -43,13 +43,13 @@ describe('ConversationResults', () => {
     expect(view.getByText('View less')).toBeTruthy()
   })
 
-  it('passes the pressed result to onSelect', () => {
+  it('passes the pressed result and its position to onSelect', () => {
     const onSelect = jest.fn()
     const results = buildResults(2)
     const view = render(<ConversationResults results={results} onSelect={onSelect} />)
 
     fireEvent.press(view.getByText('Conversation 2'))
 
-    expect(onSelect).toHaveBeenCalledWith(results[1])
+    expect(onSelect).toHaveBeenCalledWith(results[1], 1)
   })
 })

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -49,9 +49,15 @@ const messageResult = (id: string): MessageSearchResultResource => ({
   },
 })
 
-const renderList = (state: Partial<SearchState>) => {
+const renderList = (state: Partial<SearchState>, onSettled = jest.fn()) => {
   mockUseSearchResults.mockReturnValue(searchState(state))
-  return render(<SearchResultsList term="potluck" onSelect={jest.fn()} />)
+  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
+  const view = render(list())
+  const rerenderWith = (next: Partial<SearchState>) => {
+    mockUseSearchResults.mockReturnValue(searchState(next))
+    view.rerender(list())
+  }
+  return { ...view, rerenderWith }
 }
 
 describe('SearchResultsList', () => {
@@ -119,6 +125,45 @@ describe('SearchResultsList', () => {
     expect(loadMore).not.toHaveBeenCalled()
   })
 
+  it('passes a message result and its position within the section to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    mockUseSearchResults.mockReturnValue(searchState({ results }))
+    const view = render(
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
+    )
+
+    fireEvent.press(view.getByLabelText(/^Message 2/))
+
+    expect(onSelect).toHaveBeenCalledWith(results[2], 1)
+  })
+
+  it('reports the settled term and counts once, not while pending or after paging', () => {
+    const onSettled = jest.fn()
+    const view = renderList({ isPending: true }, onSettled)
+    expect(onSettled).not.toHaveBeenCalled()
+
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    view.rerenderWith({ results })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+    expect(onSettled).toHaveBeenCalledWith('potluck', {
+      conversationResultCount: 1,
+      messageResultCount: 2,
+    })
+
+    view.rerenderWith({ results: [...results, messageResult('3')] })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not report a failed search', () => {
+    const onSettled = jest.fn()
+    renderList({ isError: true }, onSettled)
+
+    expect(onSettled).not.toHaveBeenCalled()
+  })
+
   it('offers a retry after a paging failure', () => {
     const loadMore = jest.fn()
     const view = renderList({

package/src/screens/search/components/conversation_results.tsx

@@ -8,7 +8,7 @@ const COLLAPSED_COUNT = 5
 
 interface ConversationResultsProps {
   results: ConversationSearchResultResource[]
-  onSelect: (result: ConversationSearchResultResource) => void
+  onSelect: (result: ConversationSearchResultResource, position: number) => void
 }
 
 export function ConversationResults({ results, onSelect }: ConversationResultsProps) {
@@ -31,8 +31,12 @@ export function ConversationResults({ results, onSelect }: ConversationResultsPr
 
   return (
     <ResultsSection title="Conversations" footer={footer}>
-      {visible.map(result => (
-        <ConversationResultRow key={result.id} result={result} onPress={() => onSelect(result)} />
+      {visible.map((result, index) => (
+        <ConversationResultRow
+          key={result.id}
+          result={result}
+          onPress={() => onSelect(result, index)}
+        />
       ))}
     </ResultsSection>
   )