feat(chat): jump to the unread line with a Catch up pill

shared/chat/conversation/input-area/suggestors/commands.tsx

@@ -237,8 +237,8 @@ export const List = (p: ListProps) => {
   const {botCommands} = useConversationMeta(conversationIDKey)
   const items = useDataSource({conversationIDKey, filter, inputSnapshot, suppressCommandSuggestions})
   return (
-    <BotCommandSettingsContext.Provider value={botSettings}>
-      <BotCommandConversationContext.Provider value={{botCommands, conversationIDKey}}>
+    <BotCommandSettingsContext value={botSettings}>
+      <BotCommandConversationContext value={{botCommands, conversationIDKey}}>
         <Common.List
           {...rest}
           keyExtractor={keyExtractor}
@@ -247,7 +247,7 @@ export const List = (p: ListProps) => {
           loading={false}
           rowHeight={rowHeight}
         />
-      </BotCommandConversationContext.Provider>
-    </BotCommandSettingsContext.Provider>
+      </BotCommandConversationContext>
+    </BotCommandSettingsContext>
   )
 }

shared/chat/conversation/list-area/catch-up.test.tsx

@@ -0,0 +1,138 @@
+/** @jest-environment jsdom */
+/// <reference types="jest" />
+import * as React from 'react'
+import * as T from '@/constants/types'
+import {act, cleanup, fireEvent, render, screen} from '@testing-library/react'
+import {OrangeLineContext} from '../orange-line-context'
+import {CatchUp, shouldShowCatchUp, useCatchUp} from './catch-up'
+
+const ord = T.Chat.numberToOrdinal
+
+// The orange line sits at ordinal 10, the viewport starts at 50: the unread boundary is off
+// screen above.
+const scrolledPastTheOrangeLine = {
+  dismissedOrdinal: ord(0),
+  loaded: true,
+  oldestVisibleOrdinal: ord(50),
+  orangeLineOrdinal: ord(10),
+  threadSearchVisible: false,
+}
+
+test('shows when the orange line is older than the oldest visible message', () => {
+  expect(shouldShowCatchUp(scrolledPastTheOrangeLine)).toBe(true)
+})
+
+test('hides when there is no orange line at all', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, orangeLineOrdinal: ord(0)})).toBe(false)
+})
+
+test('hides when the orange line is the oldest visible message', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, orangeLineOrdinal: ord(50)})).toBe(false)
+})
+
+test('hides before the list has reported what it can see', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, oldestVisibleOrdinal: undefined})).toBe(false)
+})
+
+test('hides until the thread has loaded', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, loaded: false})).toBe(false)
+})
+
+test('hides while thread search is open', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, threadSearchVisible: true})).toBe(false)
+})
+
+test('stays hidden once dismissed for this orange line', () => {
+  expect(shouldShowCatchUp({...scrolledPastTheOrangeLine, dismissedOrdinal: ord(10)})).toBe(false)
+})
+
+test('comes back when a newer orange line replaces the dismissed one', () => {
+  expect(
+    shouldShowCatchUp({...scrolledPastTheOrangeLine, dismissedOrdinal: ord(10), orangeLineOrdinal: ord(20)})
+  ).toBe(true)
+})
+
+const mockCenterOnMessage = jest.fn()
+let mockRouteParams: {threadSearch?: {query?: string}} | undefined
+
+jest.mock('../center-context', () => ({
+  useConversationCenterActions: () => ({centerOnMessage: mockCenterOnMessage}),
+}))
+jest.mock('../thread-search-route', () => ({useChatThreadRouteParams: () => mockRouteParams}))
+
+let seen: ReturnType<typeof useCatchUp> | undefined
+
+const Probe = (p: {loaded: boolean}) => {
+  const catchUp = useCatchUp({loaded: p.loaded})
+  // captured in an effect: assigning module state during render is a side effect the lint rejects
+  React.useEffect(() => {
+    seen = catchUp
+  })
+  return null
+}
+
+const Tree = (p: {loaded?: boolean; orangeLineOrdinal: T.Chat.Ordinal}) => (
+  <OrangeLineContext value={p.orangeLineOrdinal}>
+    <Probe loaded={p.loaded ?? true} />
+  </OrangeLineContext>
+)
+
+describe('useCatchUp', () => {
+  beforeEach(() => {
+    mockCenterOnMessage.mockClear()
+    mockRouteParams = undefined
+    seen = undefined
+  })
+  afterEach(cleanup)
+
+  test('stays hidden until the list reports a viewport above the orange line', () => {
+    render(<Tree orangeLineOrdinal={ord(10)} />)
+    expect(seen?.showCatchUp).toBe(false)
+    act(() => {
+      seen?.onViewableOrdinalsChanged(ord(50))
+    })
+    expect(seen?.showCatchUp).toBe(true)
+  })
+
+  test('tapping centers on the orange line with no highlight', () => {
+    render(<Tree orangeLineOrdinal={ord(10)} />)
+    act(() => {
+      seen?.onViewableOrdinalsChanged(ord(50))
+    })
+    act(() => {
+      seen?.onCatchUp()
+    })
+    expect(mockCenterOnMessage).toHaveBeenCalledWith(T.Chat.numberToMessageID(10), 'none')
+  })
+
+  test('tapping dismisses the pill even though the viewport has not moved', () => {
+    render(<Tree orangeLineOrdinal={ord(10)} />)
+    act(() => {
+      seen?.onViewableOrdinalsChanged(ord(50))
+    })
+    act(() => {
+      seen?.onCatchUp()
+    })
+    expect(seen?.showCatchUp).toBe(false)
+  })
+})
+
+// The pill is a ClickableBox, which is a bare div by default: without button semantics it is not a
+// tab stop and enter/space do nothing, so keyboard users have no way to reach the unread line.
+describe('CatchUp', () => {
+  afterEach(cleanup)
+
+  test('is reachable from the keyboard', () => {
+    render(<CatchUp onClick={jest.fn()} />)
+    expect(screen.getByRole('button')).toHaveProperty('tabIndex', 0)
+  })
+
+  test('activates on enter and on space', () => {
+    const onClick = jest.fn()
+    render(<CatchUp onClick={onClick} />)
+    const pill = screen.getByRole('button')
+    fireEvent.keyDown(pill, {key: 'Enter'})
+    fireEvent.keyDown(pill, {key: ' '})
+    expect(onClick).toHaveBeenCalledTimes(2)
+  })
+})

shared/chat/conversation/list-area/catch-up.tsx

@@ -0,0 +1,127 @@
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import * as T from '@/constants/types'
+import {OrangeLineContext} from '../orange-line-context'
+import {useChatThreadRouteParams} from '../thread-search-route'
+import {useConversationCenterActions} from '../center-context'
+
+const noOrdinal = T.Chat.numberToOrdinal(0)
+
+// The unreadline arrives as a MessageID and is carried as an Ordinal, which is sound because server
+// messages get ordinal === messageID. Centering wants it back as a MessageID.
+const orangeLineToMessageID = (ordinal: T.Chat.Ordinal) =>
+  T.Chat.numberToMessageID(T.Chat.ordinalToNumber(ordinal))
+
+// Ordinals are monotonic and the orange line is a MessageID coerced to one, so a plain comparison
+// tells us the unread boundary is above the viewport even when that message isn't loaded at all.
+export const shouldShowCatchUp = (p: {
+  dismissedOrdinal: T.Chat.Ordinal
+  loaded: boolean
+  oldestVisibleOrdinal: T.Chat.Ordinal | undefined
+  orangeLineOrdinal: T.Chat.Ordinal
+  threadSearchVisible: boolean
+}) => {
+  const {dismissedOrdinal, loaded, oldestVisibleOrdinal, orangeLineOrdinal, threadSearchVisible} = p
+  if (!loaded || threadSearchVisible) {
+    return false
+  }
+  if (oldestVisibleOrdinal === undefined || !T.Chat.ordinalToNumber(orangeLineOrdinal)) {
+    return false
+  }
+  // Dismissal is remembered per orange line, not per visit, so marking an older message unread
+  // re-arms the pill for the new boundary.
+  if (dismissedOrdinal === orangeLineOrdinal) {
+    return false
+  }
+  return orangeLineOrdinal < oldestVisibleOrdinal
+}
+
+// The viewport moves on every scroll frame, so the viewable ordinal lives in a ref and only the
+// show/hide answer is state: an unchanged answer bails out of re-rendering the message list.
+export const useCatchUp = (p: {loaded: boolean}) => {
+  const {loaded} = p
+  const orangeLineOrdinal = React.useContext(OrangeLineContext)
+  const routeParams = useChatThreadRouteParams()
+  const threadSearchVisible = !!routeParams?.threadSearch
+  const {centerOnMessage} = useConversationCenterActions()
+  const [dismissedOrdinal, setDismissedOrdinal] = React.useState(noOrdinal)
+  const [showCatchUp, setShowCatchUp] = React.useState(false)
+  const oldestVisibleOrdinalRef = React.useRef<T.Chat.Ordinal | undefined>(undefined)
+
+  const recompute = React.useEffectEvent(() => {
+    setShowCatchUp(
+      shouldShowCatchUp({
+        dismissedOrdinal,
+        loaded,
+        oldestVisibleOrdinal: oldestVisibleOrdinalRef.current,
+        orangeLineOrdinal,
+        threadSearchVisible,
+      })
+    )
+  })
+
+  React.useEffect(() => {
+    recompute()
+  }, [dismissedOrdinal, loaded, orangeLineOrdinal, threadSearchVisible])
+
+  // Held in state rather than a useCallback so the identity is stable for the lists, which capture
+  // this once inside their own scroll handlers.
+  const [onViewableOrdinalsChanged] = React.useState(
+    () => (oldestVisibleOrdinal?: T.Chat.Ordinal) => {
+      oldestVisibleOrdinalRef.current = oldestVisibleOrdinal
+      recompute()
+    }
+  )
+
+  const onCatchUp = React.useCallback(() => {
+    setDismissedOrdinal(orangeLineOrdinal)
+    setShowCatchUp(false)
+    centerOnMessage(orangeLineToMessageID(orangeLineOrdinal), 'none')
+  }, [centerOnMessage, orangeLineOrdinal])
+
+  return {onCatchUp, onViewableOrdinalsChanged, showCatchUp}
+}
+
+// Orange to match the unread line itself, so the pill reads as "that line, up there".
+export const CatchUp = (p: {onClick: () => void}) => {
+  const {onClick} = p
+  const styles = useStyles()
+  const theme = Kb.Styles.useTheme()
+  return (
+    <Kb.Box2 direction="vertical" style={styles.container} pointerEvents="box-none">
+      <Kb.ClickableBox
+        asButton={true}
+        direction="horizontal"
+        alignItems="center"
+        gap="xtiny"
+        onClick={onClick}
+        style={styles.pill}
+      >
+        <Kb.Icon type="iconfont-arrow-full-up" color={theme.whiteOrWhite} sizeType="Small" />
+        <Kb.Text type="BodySmallSemibold" style={styles.label}>
+          Catch up
+        </Kb.Text>
+      </Kb.ClickableBox>
+    </Kb.Box2>
+  )
+}
+
+const useStyles = Kb.Styles.createStyleHook(
+  theme =>
+    ({
+      container: {
+        position: 'absolute',
+        right: Kb.Styles.globalMargins.tiny,
+        top: Kb.Styles.globalMargins.tiny,
+      },
+      label: {color: theme.whiteOrWhite},
+      pill: {
+        backgroundColor: theme.orange,
+        borderRadius: 100,
+        paddingBottom: Kb.Styles.globalMargins.xtiny,
+        paddingLeft: Kb.Styles.globalMargins.tiny,
+        paddingRight: Kb.Styles.globalMargins.tiny,
+        paddingTop: Kb.Styles.globalMargins.xtiny,
+      },
+    }) as const
+)

shared/chat/conversation/list-area/index.tsx

@@ -3,7 +3,7 @@ import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as T from '@/constants/types'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
-import Separator from '../messages/separator'
+import Separator, {NativeSeparator} from '../messages/separator'
 import SpecialBottomMessage from '../messages/special-bottom-message'
 import SpecialTopMessage from '../messages/special-top-message'
 import {MessageRow} from '../messages/wrapper'
@@ -20,6 +20,7 @@ import {
   useConversationThreadSelector,
   useConversationThreadStore,
 } from '../thread-context'
+import {CatchUp, useCatchUp} from './catch-up'
 import {useJumpToRecent} from './jump-to-recent'
 import {useThreadLoadStatusOptionsGetter} from '../thread-load-status-context'
 import {getMessageRowType, getMessageShowUsername} from '../messages/row-metadata'
@@ -538,6 +539,15 @@ const DesktopThreadWrapper = function DesktopThreadWrapper() {
 
   const jumpToRecent = useJumpToRecent(scrollToBottom, messageOrdinals.length)
 
+  const {onCatchUp, onViewableOrdinalsChanged, showCatchUp} = useCatchUp({loaded})
+  // Data runs oldest-first here, so the first viewable row is the oldest one on screen.
+  const onViewableItemsChanged = React.useCallback(
+    (info: {viewableItems: ReadonlyArray<{item: T.Chat.Ordinal}>}) => {
+      onViewableOrdinalsChanged(info.viewableItems.at(0)?.item)
+    },
+    [onViewableOrdinalsChanged]
+  )
+
   const {focusInput} = React.useContext(ThreadRefsContext)
   const handleListClick = (ev: React.MouseEvent) => {
     const target = ev.target as {
@@ -657,8 +667,10 @@ const DesktopThreadWrapper = function DesktopThreadWrapper() {
           onStartReached={onStartReached}
           onStartReachedThreshold={2}
           onEndReached={onEndReached}
+          onViewableItemsChanged={onViewableItemsChanged}
         />
         {jumpToRecent}
+        {showCatchUp && <CatchUp onClick={onCatchUp} />}
       </div>
     </Kb.ErrorBoundary>
   )
@@ -947,6 +959,8 @@ const NativeConversationList = function NativeConversationList() {
 
   const jumpToRecent = useJumpToRecent(scrollToBottom, messageOrdinals.length)
 
+  const {onCatchUp, onViewableOrdinalsChanged, showCatchUp} = useCatchUp({loaded})
+
   // When keyboard is open, maintainVisibleContentPosition adjusts contentOffset by the new
   // message height when a message is added, undoing the scrollToBottom from onSubmit.
   // Defer the re-scroll past the native MPV adjustment (which runs on the UI thread after
@@ -1040,13 +1054,15 @@ const NativeConversationList = function NativeConversationList() {
 
   const onViewableItemsChanged = useNativeSafeOnViewableItemsChanged(onEndReached, messageOrdinals.length)
   const [onViewableItemsChangedNative] = React.useState(
-    () => (info: {viewableItems: Array<{index: number | null}>}) => {
+    () => (info: {viewableItems: Array<{index: number | null; item: T.Chat.Ordinal}>}) => {
       onViewableItemsChanged.current(info)
       const first = info.viewableItems.at(0)?.index
       const last = info.viewableItems.at(-1)?.index
       vFirstRef.current = first
       vLastRef.current = last
       correctCenter(first, last)
+      // The list is inverted and its data reversed, so the last viewable row is the oldest.
+      onViewableOrdinalsChanged(info.viewableItems.at(-1)?.item)
     }
   )
 
@@ -1086,7 +1102,7 @@ const NativeConversationList = function NativeConversationList() {
             estimatedItemSize={72}
             ListHeaderComponent={SpecialBottomMessage}
             ListFooterComponent={SpecialTopMessage}
-            ItemSeparatorComponent={Separator}
+            ItemSeparatorComponent={NativeSeparator}
             overScrollMode="never"
             contentContainerStyle={nativeContentContainerStyle}
             data={messageOrdinals}
@@ -1115,6 +1131,7 @@ const NativeConversationList = function NativeConversationList() {
               {jumpToRecent}
             </Animated.View>
           )}
+          {showCatchUp && <CatchUp onClick={onCatchUp} />}
         </Kb.Box2>
       </PerfProfiler>
     </Kb.ErrorBoundary>