chat refactors

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

@@ -366,12 +366,13 @@ const useScrolling = (p: {
 }
 
 const useItems = (p: {
+  centeredHighlightOrdinal: T.Chat.Ordinal | undefined
   messageOrdinals: ReadonlyArray<T.Chat.Ordinal>
   centeredOrdinal: T.Chat.Ordinal | undefined
   editingOrdinal: T.Chat.Ordinal | undefined
   messageTypeMap: ReadonlyMap<T.Chat.Ordinal, T.Chat.RenderMessageType> | undefined
 }) => {
-  const {messageTypeMap, messageOrdinals, centeredOrdinal, editingOrdinal} = p
+  const {messageTypeMap, messageOrdinals, centeredHighlightOrdinal, centeredOrdinal, editingOrdinal} = p
   const ordinalsInAWaypoint = 10
   const rowRenderer = (ordinal: T.Chat.Ordinal) => {
     const type = messageTypeMap?.get(ordinal) ?? 'text'
@@ -393,11 +394,14 @@ const useItems = (p: {
           'WrapperMessage-hoverBox',
           'WrapperMessage-decorated',
           'WrapperMessage-hoverColor',
-          {highlighted: centeredOrdinal === ordinal || editingOrdinal === ordinal}
+          {highlighted: centeredHighlightOrdinal === ordinal || editingOrdinal === ordinal}
         )}
       >
         <Separator trailingItem={ordinal} />
-        <Clazz ordinal={ordinal} />
+        <Clazz
+          isCenteredHighlight={centeredHighlightOrdinal === ordinal}
+          ordinal={ordinal}
+        />
       </div>
     )
   }
@@ -487,9 +491,11 @@ const ThreadWrapper = function ThreadWrapper() {
     C.useShallow(s => {
       const {messageTypeMap, editing: editingOrdinal, id: conversationIDKey} = s
       const {messageCenterOrdinal: mco, messageOrdinals = noOrdinals, loaded} = s
-      const centeredOrdinal = mco && mco.highlightMode !== 'none' ? mco.ordinal : undefined
+      const centeredHighlightOrdinal = mco && mco.highlightMode !== 'none' ? mco.ordinal : undefined
+      const centeredOrdinal = mco?.ordinal
       const containsLatestMessage = s.isCaughtUp()
       return {
+        centeredHighlightOrdinal,
         centeredOrdinal,
         containsLatestMessage,
         conversationIDKey,
@@ -500,7 +506,7 @@ const ThreadWrapper = function ThreadWrapper() {
       }
     })
   )
-  const {conversationIDKey, editingOrdinal, centeredOrdinal} = data
+  const {conversationIDKey, editingOrdinal, centeredHighlightOrdinal, centeredOrdinal} = data
   const {containsLatestMessage, messageOrdinals, loaded, messageTypeMap} = data
   const copyToClipboard = useConfigState(s => s.dispatch.defer.copyToClipboard)
   const listRef = React.useRef<HTMLDivElement | null>(null)
@@ -561,7 +567,13 @@ const ThreadWrapper = function ThreadWrapper() {
     }
   }
 
-  const items = useItems({centeredOrdinal, editingOrdinal, messageOrdinals, messageTypeMap})
+  const items = useItems({
+    centeredHighlightOrdinal,
+    centeredOrdinal,
+    editingOrdinal,
+    messageOrdinals,
+    messageTypeMap,
+  })
   const setListContents = useHandleListResize({
     centeredOrdinal,
     isLockedToBottom,

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

@@ -104,8 +104,12 @@ const ConversationList = function ConversationList() {
   const [lastED, setLastED] = React.useState(extraData)
 
   const loaded = Chat.useChatContext(s => s.loaded)
-  const centeredOrdinal =
-    Chat.useChatContext(s => s.messageCenterOrdinal)?.ordinal ?? T.Chat.numberToOrdinal(-1)
+  const messageCenterOrdinal = Chat.useChatContext(s => s.messageCenterOrdinal)
+  const centeredHighlightOrdinal =
+    messageCenterOrdinal && messageCenterOrdinal.highlightMode !== 'none'
+      ? messageCenterOrdinal.ordinal
+      : T.Chat.numberToOrdinal(-1)
+  const centeredOrdinal = messageCenterOrdinal?.ordinal ?? T.Chat.numberToOrdinal(-1)
   const messageTypeMap = Chat.useChatContext(s => s.messageTypeMap)
   const _messageOrdinals = Chat.useChatContext(s => s.messageOrdinals)
 
@@ -126,7 +130,14 @@ const ConversationList = function ConversationList() {
     const type = messageTypeMap.get(ordinal) ?? 'text'
     const Clazz = getMessageRender(type)
     if (!Clazz) return null
-    return <PerfProfiler id={`Msg-${type}`}><Clazz ordinal={ordinal} /></PerfProfiler>
+    return (
+      <PerfProfiler id={`Msg-${type}`}>
+        <Clazz
+          isCenteredHighlight={centeredHighlightOrdinal === ordinal}
+          ordinal={ordinal}
+        />
+      </PerfProfiler>
+    )
   }
 
   const recycleTypeRef = React.useRef(new Map<T.Chat.Ordinal, string>())

shared/chat/conversation/messages/account-payment/wrapper.tsx

@@ -3,8 +3,8 @@ import {WrapperMessage, useCommon, type Props} from '../wrapper/wrapper'
 import type PaymentMessageType from './container'
 
 function WrapperPayment(p: Props) {
-  const {ordinal} = p
-  const common = useCommon(ordinal)
+  const {ordinal, isCenteredHighlight} = p
+  const common = useCommon(ordinal, isCenteredHighlight)
   const message = Chat.useChatContext(s => s.messageMap.get(ordinal))
 
   if (message?.type !== 'requestPayment' && message?.type !== 'sendPayment') return null

shared/chat/conversation/messages/attachment/file.tsx

@@ -48,16 +48,22 @@ function FileContainer(p: OwnProps) {
 
   const switchTab = C.Router2.switchTab
   const navigateAppend = C.Router2.navigateAppend
-  const onSaltpackFileOpen = (path: string, name: typeof CryptoRoutes.decryptTab | typeof CryptoRoutes.verifyTab) => {
+  const onSaltpackFileOpen = (
+    path: string,
+    name: typeof CryptoRoutes.decryptTab | typeof CryptoRoutes.verifyTab
+  ) => {
     switchTab(C.Tabs.cryptoTab)
-    navigateAppend({
-      name,
-      params: {
-        entryNonce: makeUUID(),
-        seedInputPath: path,
-        seedInputType: 'file',
+    navigateAppend(
+      {
+        name,
+        params: {
+          entryNonce: makeUUID(),
+          seedInputPath: path,
+          seedInputType: 'file',
+        },
       },
-    }, true)
+      true
+    )
   }
   const openLocalPathInSystemFileManagerDesktop = useFSState(
     s => s.dispatch.defer.openLocalPathInSystemFileManagerDesktop
@@ -123,6 +129,7 @@ function FileContainer(p: OwnProps) {
       <Kb.Box2
         direction="vertical"
         fullWidth={true}
+        relative={true}
         style={Kb.Styles.collapseStyles([styles.containerStyle, getEditStyle(isEditing), styles.filename])}
       >
         <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" centerChildren={true}>
@@ -182,7 +189,7 @@ function FileContainer(p: OwnProps) {
           </Kb.Box2>
         )}
         {!!progressLabel && (
-          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
+          <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.progressOverlay}>
             <Kb.Text type="BodySmall" style={styles.progressLabelStyle}>
               {progressLabel}
             </Kb.Text>
@@ -245,6 +252,14 @@ const styles = Kb.Styles.styleSheetCreate(
         color: Kb.Styles.globalColors.black_50,
         marginRight: Kb.Styles.globalMargins.tiny,
       },
+      progressOverlay: {
+        backgroundColor: Kb.Styles.globalColors.greyLight,
+        bottom: 0,
+        left: 0,
+        opacity: 0.9,
+        position: 'absolute',
+        width: 'auto',
+      },
       retry: {
         color: Kb.Styles.globalColors.redDark,
         textDecorationLine: 'underline',

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

@@ -2,56 +2,56 @@ import type AudioAttachmentType from './audio'
 import type FileAttachmentType from './file'
 import type ImageAttachmentType from './image'
 import type VideoAttachmentType from './video'
-import {WrapperMessage, useCommonWithData, useMessageData, type Props} from '../wrapper/wrapper'
+import {WrapperMessageView, useCommonWithData, useMessageData, type Props} from '../wrapper/wrapper'
 
 export function WrapperAttachmentAudio(p: Props) {
-  const {ordinal} = p
-  const messageData = useMessageData(ordinal)
+  const {ordinal, isCenteredHighlight = false} = p
+  const messageData = useMessageData(ordinal, isCenteredHighlight)
   const common = useCommonWithData(ordinal, messageData)
   const {default: AudioAttachment} = require('./audio') as {default: typeof AudioAttachmentType}
   return (
-    <WrapperMessage {...p} {...common} messageData={messageData}>
+    <WrapperMessageView {...p} {...common} messageData={messageData}>
       <AudioAttachment />
-    </WrapperMessage>
+    </WrapperMessageView>
   )
 }
 export function WrapperAttachmentFile(p: Props) {
-  const {ordinal} = p
-  const messageData = useMessageData(ordinal)
+  const {ordinal, isCenteredHighlight = false} = p
+  const messageData = useMessageData(ordinal, isCenteredHighlight)
   const common = useCommonWithData(ordinal, messageData)
   const {showPopup} = common
 
   const {default: FileAttachment} = require('./file') as {default: typeof FileAttachmentType}
 
   return (
-    <WrapperMessage {...p} {...common} messageData={messageData}>
+    <WrapperMessageView {...p} {...common} messageData={messageData}>
       <FileAttachment showPopup={showPopup} />
-    </WrapperMessage>
+    </WrapperMessageView>
   )
 }
 export function WrapperAttachmentVideo(p: Props) {
-  const {ordinal} = p
-  const messageData = useMessageData(ordinal)
+  const {ordinal, isCenteredHighlight = false} = p
+  const messageData = useMessageData(ordinal, isCenteredHighlight)
   const common = useCommonWithData(ordinal, messageData)
   const {showPopup} = common
   const {default: VideoAttachment} = require('./video') as {default: typeof VideoAttachmentType}
 
   return (
-    <WrapperMessage {...p} {...common} messageData={messageData}>
+    <WrapperMessageView {...p} {...common} messageData={messageData}>
       <VideoAttachment showPopup={showPopup} />
-    </WrapperMessage>
+    </WrapperMessageView>
   )
 }
 export function WrapperAttachmentImage(p: Props) {
-  const {ordinal} = p
-  const messageData = useMessageData(ordinal)
+  const {ordinal, isCenteredHighlight = false} = p
+  const messageData = useMessageData(ordinal, isCenteredHighlight)
   const common = useCommonWithData(ordinal, messageData)
   const {showPopup} = common
   const {default: ImageAttachment} = require('./image') as {default: typeof ImageAttachmentType}
 
   return (
-    <WrapperMessage {...p} {...common} messageData={messageData}>
+    <WrapperMessageView {...p} {...common} messageData={messageData}>
       <ImageAttachment showPopup={showPopup} />
-    </WrapperMessage>
+    </WrapperMessageView>
   )
 }

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

@@ -3,8 +3,8 @@ import {WrapperMessage, useCommon, type Props} from '../wrapper/wrapper'
 import type PinType from '.'
 
 function WrapperPin(p: Props) {
-  const {ordinal} = p
-  const common = useCommon(ordinal)
+  const {ordinal, isCenteredHighlight} = p
+  const common = useCommon(ordinal, isCenteredHighlight)
   const message = Chat.useChatContext(s => s.messageMap.get(ordinal))
 
   if (message?.type !== 'pin') return null

shared/chat/conversation/messages/reactions-rows.tsx

@@ -1,4 +1,5 @@
 import * as C from '@/constants'
+import * as Message from '@/constants/chat/message'
 import * as Chat from '@/stores/chat'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
@@ -13,7 +14,14 @@ const emptyEmojis: ReadonlyArray<string> = []
 
 function ReactionsRowContainer() {
   const ordinal = useOrdinal()
-  const emojis = Chat.useChatContext(C.useShallow(s => s.reactionOrderMap.get(ordinal) ?? emptyEmojis))
+  const emojis = Chat.useChatContext(
+    C.useShallow(s => {
+      const fromMap = s.reactionOrderMap.get(ordinal)
+      if (fromMap?.length) return fromMap
+      const reactions = s.messageMap.get(ordinal)?.reactions
+      return reactions?.size ? Message.getReactionOrder(reactions) : emptyEmojis
+    })
+  )
 
   return emojis.length === 0 ? null : (
     <Kb.Box2 direction="horizontal" gap="xtiny" fullWidth={true} style={styles.container}>