WIP: try legends on native again

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

@@ -51,7 +51,7 @@ const HeaderAreaRight = (props: HeaderConversationProps) => {
       noShrink={true}
       style={Kb.Styles.collapseStyles([styles.headerRight, {opacity: pendingWaiting ? 0 : 1}])}
     >
-      <Kb.Icon type="iconfont-search" onClick={onToggleThreadSearch} />
+      <Kb.Icon type="iconfont-search" onClick={onToggleThreadSearch} testID={TestIDs.CHAT_HEADER_SEARCH_BUTTON} />
       <Kb.Icon type="iconfont-info" onClick={onShowInfoPanel} testID={TestIDs.CHAT_HEADER_INFO_BUTTON} />
     </Kb.Box2>
   )

shared/chat/conversation/messages/special-top-message.tsx

@@ -15,6 +15,7 @@ import {
 import {useConversationParticipantsSelector} from '../data-hooks'
 import * as FS from '@/constants/fs'
 import {useCurrentUserState} from '@/stores/current-user'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 
 const ErrorMessage = () => {
   const styles = useStyles()
@@ -153,7 +154,13 @@ function SpecialTopMessage() {
   }
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      style={styles.container}
+      testID={TestIDs.CHAT_THREAD_TOP}
+      collapsable={false}
+    >
       {hasLoadedEver && loadMoreType === 'noMoreToLoad' && showRetentionNotice && <RetentionNotice />}
       <Kb.Box2 direction="vertical" style={styles.spacer} />
       {hasOlderResetConversation && <ProfileResetNotice />}

shared/chat/conversation/messages/wrapper/long-pressable/index.tsx

@@ -16,6 +16,7 @@ type Props = {
 import {useConversationThreadToggleSearch} from '../../../thread-context'
 import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row'
 import {ThreadRefsContext} from '@/chat/conversation/normal/context'
+import {useAdaptiveRender} from '@legendapp/list/react-native'
 
 function ReplyIcon({progress}: {progress: Animated.Value}) {
   const styles = useStyles()
@@ -28,16 +29,23 @@ function ReplyIcon({progress}: {progress: Animated.Value}) {
 }
 
 function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
+  if (!isMobile) {
+    return <Kb.Box2 direction="horizontal" fullWidth={true} {...props} />
+  }
+  return <LongPressableMobile {...props} />
+}
+
+function LongPressableMobile(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
   const styles = useStyles()
   const toggleThreadSearch = useConversationThreadToggleSearch()
   const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
   const ordinal = useOrdinal()
   const {focusInput} = React.useContext(ThreadRefsContext)
   const swipeRef = React.useRef<SwipeableMethods | null>(null)
-
-  if (!isMobile) {
-    return <Kb.Box2 direction="horizontal" fullWidth={true} {...props} />
-  }
+  // Velocity-driven signal from LegendList: during fast scroll it flips to "light". We keep the
+  // Swipeable mounted (toggling its tree would remount children and flash images) and instead just
+  // disable its pan handlers in light mode, shedding the per-row touch evaluation during the fling.
+  const adaptiveMode = useAdaptiveRender()
 
   const {children, onLongPress, style} = props
 
@@ -68,6 +76,7 @@ function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
   return (
     <Swipeable
       ref={swipeRef}
+      enabled={adaptiveMode !== 'light'}
       renderRightActions={makeAction}
       onSwipeableWillOpen={onSwipeableWillOpen}
     >

shared/chat/conversation/messages/wrapper/sent.native.tsx

@@ -1,11 +1,11 @@
 import type * as React from 'react'
 import Animated, {FadeInDown} from 'react-native-reanimated'
 
-// Slide-up + fade for a message you just sent. The thread list is an inverted
-// FlatList (cells are flipped with scaleY: -1), so FadeInDown renders on screen
-// as sliding up from below. Runs entirely on the UI thread with no re-renders.
-// The entering animation only plays when this Animated.View MOUNTS — callers must
-// key it per message (recycled containers reuse instances).
+// Slide-up + fade for a message you just sent. The thread list (LegendList) is
+// NOT inverted, so FadeInDown (enters from 25px below, sliding up into place)
+// reads as the row rising from the input bar. Runs entirely on the UI thread
+// with no re-renders. The entering animation only plays when this Animated.View
+// MOUNTS — callers must key it per message (recycled containers reuse instances).
 export function Sent(p: {children: React.ReactNode}) {
   return (
     <Animated.View entering={FadeInDown.duration(200)} style={styles.container}>

shared/chat/conversation/messages/wrapper/wrapper.tsx

@@ -34,6 +34,7 @@ import {emptyParticipantInfo} from '../../data-hooks'
 import {useInboxMetadataState} from '@/chat/inbox/metadata'
 import type {ConversationInputState} from '../../input-area/input-state'
 import {useChatTeamMemberRole} from '../../team-hooks'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 
 type AccountsInfoMap = ReadonlyMap<T.RPCChat.MessageID, T.Chat.ChatRequestInfo | T.Chat.ChatPaymentInfo>
 type PaymentStatusMap = ReadonlyMap<T.Wallets.PaymentID, T.Chat.ChatPaymentInfo>
@@ -905,7 +906,11 @@ function RightSide(p: RProps) {
         )}
       >
         <Kb.Box2 direction="vertical">
-          <Kb.Icon type="iconfont-ellipsis" onClick={showPopup} />
+          <Kb.Icon
+            type="iconfont-ellipsis"
+            onClick={showPopup}
+            testID={TestIDs.CHAT_MESSAGE_MENU_BUTTON}
+          />
         </Kb.Box2>
       </Kb.Box2>
     )
@@ -1018,7 +1023,13 @@ export function WrapperMessage(p: WrapperMessageProps) {
   const messageContext = {isHighlighted: showCenteredHighlight, ordinal}
 
   const row = (
-    <Kb.Box2 direction="vertical" relative={true} fullWidth={true}>
+    <Kb.Box2
+      direction="vertical"
+      relative={true}
+      fullWidth={true}
+      collapsable={false}
+      testID={showCenteredHighlight ? TestIDs.CHAT_SEARCH_HIT : undefined}
+    >
       <AuthorHeader
         author={author}
         botAlias={botAlias}

shared/chat/conversation/search.tsx

@@ -15,6 +15,7 @@ import {
 } from './thread-context'
 import {useThreadSearchRoute} from './thread-search-route'
 import {ThreadSearchOverlayContext} from './thread-search-overlay-context'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 
 type OwnProps = {style?: Kb.Styles.StylesCrossPlatform}
 type CommonProps = OwnProps & {
@@ -434,8 +435,15 @@ const ThreadSearchDesktopInner = function ThreadSearchDesktopInner(p: CommonProp
           </Kb.Box2>
           <Kb.Box2 direction="horizontal" gap="tiny" noShrink={true}>
             {inProgress && <Kb.ProgressIndicator style={styles.progress} />}
+            {/* collapsable={false}: Android view flattening would drop this testID'd wrapper and
+                leave the count unreadable to the e2e suite. */}
             {hasResults && (
-              <Kb.Box2 direction="horizontal" gap="tiny">
+              <Kb.Box2
+                direction="horizontal"
+                gap="tiny"
+                collapsable={false}
+                testID={TestIDs.CHAT_THREAD_SEARCH_COUNT}
+              >
                 <Kb.Text type="BodySmall" style={styles.results}>
                   {noResults ? 'No results' : `${selectedIndex + 1} of ${hits.length}`}
                 </Kb.Text>
@@ -506,13 +514,28 @@ const ThreadSearchMobileInner = function ThreadSearchMobileInner(p: CommonProps)
   return (
     <Kb.Box2 direction="vertical" fullWidth={true} style={styles.mobileContainer} onLayout={onLayout}>
       <Kb.Box2 direction="horizontal" fullWidth={true} justifyContent="space-between" padding="tiny" style={styles.outerContainer} gap="tiny">
-        <Kb.Box2 direction="horizontal" centerChildren={true} noShrink={true}>
+        <Kb.Box2
+          direction="horizontal"
+          centerChildren={true}
+          noShrink={true}
+          collapsable={false}
+          testID={TestIDs.CHAT_THREAD_SEARCH_CANCEL}
+        >
           <Kb.Text type="BodySemibold" style={styles.done} onClick={onToggleThreadSearch}>
             Cancel
           </Kb.Text>
         </Kb.Box2>
         <Kb.Box2 direction="horizontal" justifyContent="space-between" style={styles.inputContainer}>
-          <Kb.Box2 direction="horizontal" gap="xtiny" flex={1} centerChildren={true}>
+          {/* collapsable={false}: keep this testID'd wrapper (and the EditText under it) as a real
+              view on Android, where view flattening would otherwise render it as an empty leaf. */}
+          <Kb.Box2
+            direction="horizontal"
+            gap="xtiny"
+            flex={1}
+            centerChildren={true}
+            collapsable={false}
+            testID={TestIDs.CHAT_THREAD_SEARCH_INPUT}
+          >
             <Kb.Input3
               ref={inputRef}
               autoFocus={false}
@@ -527,8 +550,15 @@ const ThreadSearchMobileInner = function ThreadSearchMobileInner(p: CommonProps)
           </Kb.Box2>
           <Kb.Box2 direction="horizontal" gap="tiny" noShrink={true}>
             {inProgress && <Kb.ProgressIndicator style={styles.progress} />}
+            {/* collapsable={false}: Android view flattening would drop this testID'd wrapper and
+                leave the count unreadable to the e2e suite. */}
             {hasResults && (
-              <Kb.Box2 direction="horizontal" gap="tiny">
+              <Kb.Box2
+                direction="horizontal"
+                gap="tiny"
+                collapsable={false}
+                testID={TestIDs.CHAT_THREAD_SEARCH_COUNT}
+              >
                 <Kb.Text type="BodySmall" style={styles.results}>
                   {status === 'done' && numHits === 0 ? 'No results' : `${selectedIndex + 1} of ${numHits}`}
                 </Kb.Text>
@@ -541,11 +571,13 @@ const ThreadSearchMobileInner = function ThreadSearchMobileInner(p: CommonProps)
             color={numHits > 0 ? theme.blue : theme.black_50}
             onClick={onUp}
             type="iconfont-arrow-up"
+            testID={TestIDs.CHAT_THREAD_SEARCH_PREV}
           />
           <Kb.Icon
             color={numHits > 0 ? theme.blue : theme.black_50}
             onClick={onDown}
             type="iconfont-arrow-down"
+            testID={TestIDs.CHAT_THREAD_SEARCH_NEXT}
           />
         </Kb.Box2>
       </Kb.Box2>

shared/chat/conversation/thread-context.tsx

@@ -96,9 +96,11 @@ ConversationThreadIDContext.displayName = 'ConversationThreadIDContext'
 
 export type ConversationThreadState = {
   accountsInfoMap: Map<T.RPCChat.MessageID, T.Chat.ChatRequestInfo | T.Chat.ChatPaymentInfo>
-  // Bumped on every messagesClear. The desktop list remounts on it: LegendList cannot recover
-  // from a non-empty -> empty -> non-empty data transition (it resets its layout state and waits
-  // for a container layout event that never comes), so the thread renders blank forever.
+  // Bumped on every messagesClear, and fed to the list as its dataKey (not as a React key - the
+  // list is not remounted). LegendList cannot recover from a non-empty -> empty -> non-empty data
+  // transition on its own (it resets its layout state and waits for a container layout event that
+  // never comes), so the thread renders blank forever; the dataKey change is what tells it this is
+  // a new dataset and makes it reset rather than wait.
   clearVersion: number
   explodingMode: number
   flipStatusMap: Map<string, T.RPCChat.UICoinFlipStatus>

shared/chat/inbox-and-conversation-header.tsx

@@ -16,6 +16,7 @@ import {navToPath} from '@/constants/fs'
 import {showConversationInfoPanel, toggleConversationThreadSearch} from '@/chat/conversation/thread-context'
 import {muteConversation} from '@/chat/conversation/status-actions'
 import AccountSwitchHeaderAvatar from '@/router-v2/account-switch-header-avatar'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 
 const emptyMeta = Chat.makeConversationMeta()
 const emptyParticipantInfo = Chat.uiParticipantsToParticipantInfo([])
@@ -245,7 +246,12 @@ const Header = () => {
         direction="vertical"
         tooltip={`Search in this chat (${C.shortcutSymbol}F)`}
       >
-        <Kb.Icon style={styles.clickable} type="iconfont-search" onClick={onToggleThreadSearch} />
+        <Kb.Icon
+          style={styles.clickable}
+          type="iconfont-search"
+          onClick={onToggleThreadSearch}
+          testID={TestIDs.CHAT_HEADER_SEARCH_BUTTON}
+        />
       </Kb.Box2>
       <Kb.Box2
         className="tooltip-left"

shared/chat/inbox/row/big-team-channel.tsx

@@ -3,6 +3,7 @@ import type * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as RowSizes from './sizes'
 import * as T from '@/constants/types'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {useInboxRowBig} from '@/chat/inbox/rows-state'
 type Props = {
   conversationIDKey: string
@@ -92,7 +93,13 @@ const BigTeamChannel = (props: Props) => {
   ) : null
 
   return (
-    <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={onSelectConversation} style={styles.container}>
+    <Kb.ClickableBox
+      direction="vertical"
+      fullWidth={true}
+      onClick={onSelectConversation}
+      style={styles.container}
+      testID={TestIDs.CHAT_INBOX_CHANNEL_ROW}
+    >
       <Kb.Box2 direction="horizontal" fullHeight={true} style={styles.rowContainer}>
         <Kb.Box2
           className="hover_background_color_blueGreyDark"