@planningcenter/chat-react-native 3.35.0-rc.3 → 3.35.0-rc.5

package/src/screens/notification_settings_screen.tsx

@@ -90,7 +90,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
     ...chatTypes.map(type => ({
       type: SectionTypes.link,
       data: {
-        title: `${type.title} Conversations`,
+        title: `${type.title} conversations`,
         rightLabel: type.preferredApp,
         onPress: () =>
           navigation.navigate('PreferredAppSelection', {
@@ -284,7 +284,7 @@ function LinkRow({ title, subtitle, rightLabel, onPress }: LinkRowProps) {
           <Text style={styles.title} numberOfLines={2}>
             {title}
           </Text>
-          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+          {Boolean(subtitle) && <Text variant="tertiary">{subtitle}</Text>}
         </View>
         <View style={styles.rightContent}>
           {isSourceType ? (

package/src/screens/preferred_app_selection_screen.tsx

@@ -41,12 +41,12 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
     updateChatType(app)
   }
 
-  const sectionTitle = `${chatType?.title} Conversations`
+  const sectionTitle = `${chatType?.title} conversations`
 
   return (
     <View style={styles.container}>
       <View style={styles.section}>
-        <Heading variant="h3" style={styles.sectionHeading}>
+        <Heading variant="h2" style={styles.sectionHeading}>
           {sectionTitle}
         </Heading>
         {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (
@@ -120,7 +120,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   section: {
-    paddingTop: 16,
+    paddingTop: 24,
   },
   sectionHeading: {
     paddingHorizontal: 16,

package/src/utils/__tests__/group_messages.test.ts

@@ -124,6 +124,77 @@ describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbo
   })
 })
 
+describe('groupMessages — unread divider', () => {
+  it('inserts the divider between the read and unread boundary when jumpToUnreadActive', () => {
+    const messages = [
+      message('04', { createdAt: '2026-01-01T00:04:00Z' }),
+      message('03', { createdAt: '2026-01-01T00:03:00Z' }),
+      message('02', { createdAt: '2026-01-01T00:02:00Z' }),
+      message('01', { createdAt: '2026-01-01T00:01:00Z' }),
+    ]
+
+    const enriched = groupMessages({
+      ms: messages,
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const msg03Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '03' && !('type' in item && item.type !== 'Message')
+    )
+    const msg02Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '02' && !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(msg03Idx)
+    expect(dividerIdx).toBeLessThan(msg02Idx)
+  })
+
+  it('does not insert the divider when jumpToUnreadActive is false', () => {
+    const enriched = groupMessages({
+      ms: [message('02'), message('01')],
+      jumpToUnreadActive: false,
+      initialMessageId: '01',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('does not insert the divider when no message crosses the boundary', () => {
+    const enriched = groupMessages({
+      ms: [message('05'), message('04'), message('03')],
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('orders ULID-style ids consistently with backend sort_key comparisons', () => {
+    const enriched = groupMessages({
+      ms: [
+        message('01KQSTAY189PHCJBT8T13R9VMP'),
+        message('01KQST9HZAB10K3CXR7TYN2QWE'),
+        message('01KQST73KZRPXNRDA7TYN19KXQ'),
+        message('01KQST5JKZRPXNRDA7TYN19ABC'),
+      ],
+      jumpToUnreadActive: true,
+      initialMessageId: '01KQST73KZRPXNRDA7TYN19KXQ',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const newerIdx = enriched.findIndex(
+      item =>
+        'id' in item &&
+        item.id === '01KQST9HZAB10K3CXR7TYN2QWE' &&
+        !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(newerIdx)
+  })
+})
+
 describe('groupMessages — system messages', () => {
   it('flags lastInGroup true and renderAuthor false on system messages', () => {
     const messages = [

package/src/utils/__tests__/highest_seen_tracker.test.ts

@@ -0,0 +1,82 @@
+import { makeHighestSeenTracker } from '../highest_seen_tracker'
+
+describe('makeHighestSeenTracker', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('debounces and sends the highest sort key seen so far', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(42, send, 2000)
+
+    tracker.onSeen('10')
+    tracker.onSeen('15')
+    tracker.onSeen('12')
+
+    expect(send).not.toHaveBeenCalled()
+    jest.advanceTimersByTime(2000)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 42, sortKey: '15' })
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores sort keys that are not strictly greater than the current highest', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('20')
+    tracker.onSeen('20')
+    tracker.onSeen('19')
+    jest.advanceTimersByTime(1000)
+
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '20' })
+  })
+
+  it('does not re-send the same sort key on subsequent flushes', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('5')
+    jest.advanceTimersByTime(1000)
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('flushNow fires immediately without waiting for the debounce', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 5000)
+
+    tracker.onSeen('3')
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '3' })
+  })
+
+  it('cancel prevents a pending fire', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('7')
+    tracker.cancel()
+    jest.advanceTimersByTime(1000)
+
+    expect(send).not.toHaveBeenCalled()
+  })
+
+  it('orders fixed-width sort keys via lexicographic comparison', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 100)
+
+    tracker.onSeen('09')
+    tracker.onSeen('10')
+    jest.advanceTimersByTime(100)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '10' })
+  })
+})

package/src/utils/__tests__/message_viewability.test.ts

@@ -0,0 +1,168 @@
+import {
+  detectDividerExitTowardNewer,
+  reportViewableMessages,
+  type ViewabilityEvent,
+} from '../message_viewability'
+
+type Msg = { id: string; type: 'Message' }
+
+const event = (overrides: Partial<ViewabilityEvent<Msg>> = {}): ViewabilityEvent<Msg> => ({
+  viewableItems: [],
+  changed: [],
+  userHasScrolled: true,
+  ...overrides,
+})
+
+describe('reportViewableMessages', () => {
+  it('fires onMessageSeen for every viewable Message item by id', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: '10', isViewable: true, item: { id: '10', type: 'Message' } },
+          { key: '11', isViewable: true, item: { id: '11', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(2)
+    expect(onSeen).toHaveBeenNthCalledWith(1, '10')
+    expect(onSeen).toHaveBeenNthCalledWith(2, '11')
+  })
+
+  it('skips non-Message items (dividers, separators, shadows)', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<{ id?: string; type?: string }>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: 'divider', isViewable: true, item: { id: 'divider', type: 'UnreadDivider' } },
+          {
+            key: 'day-divider-05',
+            isViewable: true,
+            item: { id: 'day-divider-05', type: 'DateSeparator' },
+          },
+          { key: '5', isViewable: true, item: { id: '5', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(1)
+    expect(onSeen).toHaveBeenCalledWith('5')
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        userHasScrolled: false,
+        viewableItems: [{ key: '10', isViewable: true, item: { id: '10', type: 'Message' } }],
+      })
+    )
+
+    expect(onSeen).not.toHaveBeenCalled()
+  })
+})
+
+describe('detectDividerExitTowardNewer', () => {
+  const baseArgs = { dividerKey: 'unread-divider', initialMessageId: '050' }
+
+  it('fires onExited when the divider leaves and only newer messages remain visible', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '055', isViewable: true, item: { id: '055', type: 'Message' } },
+          { key: '056', isViewable: true, item: { id: '056', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire when divider leaves toward older messages', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '045', isViewable: true, item: { id: '045', type: 'Message' } },
+          { key: '048', isViewable: true, item: { id: '048', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        userHasScrolled: false,
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055', type: 'Message' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when initialMessageId is null (observer is always installed)', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      dividerKey: 'unread-divider',
+      initialMessageId: null,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [{ key: 'unread-divider', isViewable: false, item: { id: 'unread-divider' } }],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+})

package/src/utils/__tests__/unread_divider_helpers.test.ts

@@ -0,0 +1,85 @@
+import { dividerExitedTowardNewer } from '../unread_divider_helpers'
+
+const dividerKey = 'unread-divider'
+const initialMessageId = '050'
+const msg = (id: string) => ({ item: { id, type: 'Message' } })
+
+describe('dividerExitedTowardNewer', () => {
+  it('returns false while the divider is still viewable', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: true }],
+      viewableItems: [
+        msg('049'),
+        { item: { id: dividerKey, type: 'UnreadDivider' } },
+        msg('050'),
+        msg('051'),
+      ],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns true when divider exits and only newer messages are visible (scrolled toward newer)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('055'), msg('056'), msg('057')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(true)
+  })
+
+  it('returns false when divider exits and only older messages are visible (scrolled toward older)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('040'), msg('045'), msg('048')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when divider exits but the visible window straddles the boundary', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [msg('048'), msg('049'), msg('055')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when the divider entry is not in the changed set', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: '055', isViewable: true }],
+      viewableItems: [msg('055'), msg('056')],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('returns false when no message items are visible (only the divider was)', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+
+  it('ignores non-Message items (date separators, reply shadows) when deciding direction', () => {
+    const result = dividerExitedTowardNewer({
+      changed: [{ key: dividerKey, isViewable: false }],
+      viewableItems: [
+        { item: { id: 'day-divider-200', type: 'DateSeparator' } },
+        { item: { id: '055-rootA', type: 'ReplyShadowMessage' } },
+      ],
+      dividerKey,
+      initialMessageId,
+    })
+    expect(result).toBe(false)
+  })
+})

package/src/utils/cache/messages_cache.ts

@@ -131,6 +131,11 @@ export function getThreadedMessagesQueryKey(conversationId: number, replyRootId:
   return getRequestQueryKey(requestArgs)
 }
 
+export function hasUnloadedNewerPages(queryClient: QueryClient, queryKey: unknown[]): boolean {
+  const data = queryClient.getQueryData<MessagesQueryData>(queryKey)
+  return !!data?.pages?.[0]?.meta?.next?.idGt
+}
+
 export function mergeMessageUpdate(
   record: MessageResource,
   current?: MessageResource

package/src/utils/group_messages.ts

@@ -4,8 +4,12 @@ import { isSystemMessage } from './system_messages'
 
 const FIVE_MINUTES_MS = 5 * 60 * 1000
 
+export const UNREAD_DIVIDER_KEY = 'unread-divider'
+
 export type DateSeparator = { type: 'DateSeparator'; id: string; date: string }
 
+export type UnreadDividerItem = { type: 'UnreadDivider'; id: typeof UNREAD_DIVIDER_KEY }
+
 export type ReplyShadowMessage = {
   type: 'ReplyShadowMessage'
   id: string
@@ -14,14 +18,25 @@ export type ReplyShadowMessage = {
   nextRendersAuthor: boolean
 }
 
-export type EnrichedMessage = MessageResource | DateSeparator | ReplyShadowMessage
+export type EnrichedMessage =
+  | MessageResource
+  | DateSeparator
+  | UnreadDividerItem
+  | ReplyShadowMessage
 
 interface GroupMessagesProps {
   ms: MessageResource[]
   inReplyScreen?: boolean
+  jumpToUnreadActive?: boolean
+  initialMessageId?: string | null
 }
 
-export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): EnrichedMessage[] {
+export function groupMessages({
+  ms,
+  inReplyScreen,
+  jumpToUnreadActive,
+  initialMessageId,
+}: GroupMessagesProps): EnrichedMessage[] {
   const items: EnrichedMessage[] = []
   let myLatestSeen = false
   let nextNeighborEnriched: MessageResource | undefined
@@ -33,6 +48,9 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
     if (isSystemMessage(message)) {
       const enriched = enrichSystemMessage(message, next)
       items.push(enriched)
+      if (crossesUnreadBoundary(message, prev, jumpToUnreadActive, initialMessageId)) {
+        items.push(unreadDivider())
+      }
       if (datesDifferBetween(message, prev)) items.push(dateSeparator(message))
       nextNeighborEnriched = enriched
       return
@@ -44,6 +62,10 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
     const enriched = enrichRegularMessage(message, prev, next, isMyLatest, !!inReplyScreen)
     items.push(enriched)
 
+    if (crossesUnreadBoundary(message, prev, jumpToUnreadActive, initialMessageId)) {
+      items.push(unreadDivider())
+    }
+
     const shadow = replyShadowFor(enriched, prev)
     if (shadow) items.push(shadow)
 
@@ -57,6 +79,24 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
   return items
 }
 
+function crossesUnreadBoundary(
+  message: MessageResource,
+  prev: MessageResource | undefined,
+  jumpToUnreadActive: boolean | undefined,
+  initialMessageId: string | null | undefined
+): boolean {
+  if (!jumpToUnreadActive) return false
+  if (!initialMessageId) return false
+  if (!prev) return false
+  return (
+    prev.id.localeCompare(initialMessageId) <= 0 && message.id.localeCompare(initialMessageId) > 0
+  )
+}
+
+function unreadDivider(): UnreadDividerItem {
+  return { type: 'UnreadDivider', id: UNREAD_DIVIDER_KEY }
+}
+
 function neighborsOf<T>(arr: T[], i: number): { prev: T | undefined; next: T | undefined } {
   return { prev: arr[i + 1], next: arr[i - 1] }
 }

package/src/utils/highest_seen_tracker.ts

@@ -0,0 +1,42 @@
+export const FLUSH_DELAY_MS = 2000
+
+type SendFn = (args: { conversationId: number; sortKey: string }) => void
+
+export function makeHighestSeenTracker(
+  conversationId: number,
+  send: SendFn,
+  flushDelayMs: number = FLUSH_DELAY_MS
+) {
+  let highest: string | null = null
+  let lastSent: string | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const fire = () => {
+    timer = null
+    if (!highest || highest === lastSent) return
+    lastSent = highest
+    send({ conversationId, sortKey: highest })
+  }
+
+  return {
+    onSeen(sortKey: string) {
+      if (highest && sortKey.localeCompare(highest) <= 0) return
+      highest = sortKey
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(fire, flushDelayMs)
+    },
+    flushNow() {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      fire()
+    },
+    cancel() {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+    },
+  }
+}

package/src/utils/message_viewability.ts

@@ -0,0 +1,49 @@
+import { dividerExitedTowardNewer } from './unread_divider_helpers'
+
+export interface ViewableEntry<Item> {
+  key: string
+  isViewable: boolean
+  item: Item
+}
+
+export interface ViewabilityEvent<Item> {
+  viewableItems: ViewableEntry<Item>[]
+  changed: ViewableEntry<Item>[]
+  userHasScrolled: boolean
+}
+
+export type ViewabilityObserver<Item> = (event: ViewabilityEvent<Item>) => void
+
+export function reportViewableMessages<Item extends { id?: string; type?: string }>(
+  onMessageSeen: (id: string) => void
+): ViewabilityObserver<Item> {
+  return ({ viewableItems, userHasScrolled }) => {
+    if (!userHasScrolled) return
+    for (const entry of viewableItems) {
+      if (entry.item?.type !== 'Message') continue
+      const id = entry.item?.id
+      if (typeof id === 'string') onMessageSeen(id)
+    }
+  }
+}
+
+export function detectDividerExitTowardNewer<Item extends { id?: string; type?: string }>({
+  dividerKey,
+  initialMessageId,
+  onExited,
+}: {
+  dividerKey: string
+  initialMessageId: string | null
+  onExited: () => void
+}): ViewabilityObserver<Item> {
+  return ({ viewableItems, changed, userHasScrolled }) => {
+    if (!userHasScrolled || !initialMessageId) return
+    const exited = dividerExitedTowardNewer({
+      changed,
+      viewableItems,
+      dividerKey,
+      initialMessageId,
+    })
+    if (exited) onExited()
+  }
+}

package/src/utils/unread_divider_helpers.ts

@@ -0,0 +1,25 @@
+type ViewableChangeEntry = { key: string; isViewable: boolean }
+type ViewableItem = { item: { id?: string; type?: string } }
+
+export function dividerExitedTowardNewer({
+  changed,
+  viewableItems,
+  dividerKey,
+  initialMessageId,
+}: {
+  changed: ViewableChangeEntry[]
+  viewableItems: ViewableItem[]
+  dividerKey: string
+  initialMessageId: string
+}): boolean {
+  const dividerExited = changed.some(c => c.key === dividerKey && !c.isViewable)
+  if (!dividerExited) return false
+
+  const visibleMessageIds = viewableItems
+    .filter(v => v.item?.type === 'Message')
+    .map(v => v.item?.id)
+    .filter((id): id is string => !!id)
+  if (visibleMessageIds.length === 0) return false
+
+  return visibleMessageIds.every(id => id.localeCompare(initialMessageId) > 0)
+}