moved edited to wrapper (keybase#25681)

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

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import {WrapperMessage, useCommon, type Props} from '../wrapper/wrapper'
+import type AudioAttachmentType from './audio'
 import type FileAttachmentType from './file/container'
 import type ImageAttachmentType from './image2'
 import type VideoAttachmentType from './video'
-import type AudioAttachmentType from './audio'
+import {WrapperMessage, useCommon, type Props} from '../wrapper/wrapper'
 
 export const WrapperAttachmentAudio = React.memo(function WrapperAttachmentAudio(p: Props) {
   const {ordinal} = p

shared/chat/conversation/messages/text/bottom.tsx

@@ -1,16 +1,13 @@
-import * as Kb from '../../../../common-adapters'
 import * as Container from '../../../../util/container'
 import * as React from 'react'
-import * as Styles from '../../../../styles'
-import {ConvoIDContext, HighlightedContext} from '../ids-context'
+import {ConvoIDContext} from '../ids-context'
 import type * as Types from '../../../../constants/types/chat2'
 import type CoinFlipType from './coinflip'
 import type UnfurlListType from './unfurl/unfurl-list'
 import type UnfurlPromptListType from './unfurl/prompt-list/container'
 import shallowEqual from 'shallowequal'
 
 type Props = {
-  hasBeenEdited: boolean
   hasUnfurlPrompts: boolean
   hasUnfurlList: boolean
   hasCoinFlip: boolean
@@ -19,7 +16,7 @@ type Props = {
 
 export const useBottom = (ordinal: Types.Ordinal, toggleShowingPopup: () => void) => {
   const conversationIDKey = React.useContext(ConvoIDContext)
-  const {hasBeenEdited, hasUnfurlPrompts, hasCoinFlip, hasUnfurlList} = Container.useSelector(state => {
+  const {hasUnfurlPrompts, hasCoinFlip, hasUnfurlList} = Container.useSelector(state => {
     const message = state.chat2.messageMap.get(conversationIDKey)?.get(ordinal)
     const hasCoinFlip = message?.type === 'text' && !!message.flipGameID
     const hasUnfurlList = (message?.unfurls?.size ?? 0) > 0
@@ -28,37 +25,24 @@ export const useBottom = (ordinal: Types.Ordinal, toggleShowingPopup: () => void
     const hasUnfurlPrompts = id
       ? (state.chat2.unfurlPromptMap.get(conversationIDKey)?.get(id)?.size ?? 0) > 0
       : false
-    const hasBeenEdited = message?.hasBeenEdited ?? false
-    return {hasBeenEdited, hasCoinFlip, hasUnfurlList, hasUnfurlPrompts}
+    return {hasCoinFlip, hasUnfurlList, hasUnfurlPrompts}
   }, shallowEqual)
 
   return React.useMemo(
     () => (
       <WrapperTextBottom
-        hasBeenEdited={hasBeenEdited}
         hasCoinFlip={hasCoinFlip}
         hasUnfurlList={hasUnfurlList}
         hasUnfurlPrompts={hasUnfurlPrompts}
         toggleShowingPopup={toggleShowingPopup}
       />
     ),
-    [hasBeenEdited, hasCoinFlip, hasUnfurlList, hasUnfurlPrompts, toggleShowingPopup]
+    [hasCoinFlip, hasUnfurlList, hasUnfurlPrompts, toggleShowingPopup]
   )
 }
 
 const WrapperTextBottom = function WrapperTextBottom(p: Props) {
-  const {hasBeenEdited, hasUnfurlPrompts, hasUnfurlList, hasCoinFlip} = p
-  const showCenteredHighlight = React.useContext(HighlightedContext)
-  const edited = hasBeenEdited ? (
-    <Kb.Text
-      key="isEdited"
-      type="BodyTiny"
-      fixOverdraw={!showCenteredHighlight}
-      style={showCenteredHighlight ? styles.editedHighlighted : styles.edited}
-    >
-      EDITED
-    </Kb.Text>
-  ) : null
+  const {hasUnfurlPrompts, hasUnfurlList, hasCoinFlip} = p
 
   const unfurlPrompts = (() => {
     if (hasUnfurlPrompts) {
@@ -87,18 +71,9 @@ const WrapperTextBottom = function WrapperTextBottom(p: Props) {
 
   return (
     <>
-      {edited}
       {unfurlPrompts}
       {unfurlList}
       {coinflip}
     </>
   )
 }
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      edited: {color: Styles.globalColors.black_20},
-      editedHighlighted: {color: Styles.globalColors.black_20OrBlack},
-    } as const)
-)

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

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import * as Container from '../../../../util/container'
+import * as Kb from '../../../../common-adapters'
+import * as Styles from '../../../../styles'
+import {ConvoIDContext, HighlightedContext, OrdinalContext} from '../ids-context'
+
+export const useEdited = () => {
+  const conversationIDKey = React.useContext(ConvoIDContext)
+  const ordinal = React.useContext(OrdinalContext)
+  const hasBeenEdited = Container.useSelector(state => {
+    const message = state.chat2.messageMap.get(conversationIDKey)?.get(ordinal)
+    const hasBeenEdited = message?.hasBeenEdited ?? false
+    return hasBeenEdited
+  })
+
+  const showCenteredHighlight = React.useContext(HighlightedContext)
+  const edited = React.useMemo(() => {
+    return hasBeenEdited ? (
+      <Kb.Text
+        key="isEdited"
+        type="BodyTiny"
+        fixOverdraw={!showCenteredHighlight}
+        style={showCenteredHighlight ? styles.editedHighlighted : styles.edited}
+      >
+        EDITED
+      </Kb.Text>
+    ) : null
+  }, [showCenteredHighlight, hasBeenEdited])
+
+  return edited
+}
+
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      edited: {color: Styles.globalColors.black_20},
+      editedHighlighted: {color: Styles.globalColors.black_20OrBlack},
+    } as const)
+)

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

@@ -17,6 +17,7 @@ import ReactionsRow from '../reactions-row'
 import SendIndicator from './send-indicator'
 import type * as Types from '../../../../constants/types/chat2'
 import capitalize from 'lodash/capitalize'
+import {useEdited} from './edited'
 // import {useDebugLayout} from '../../../../util/debug'
 
 export type Props = {
@@ -351,7 +352,7 @@ type BProps = {
   reactionsPopupPosition: 'none' | 'last' | 'middle'
   ecrType: EditCancelRetryType
 }
-// Edited, reactions
+// reactions
 const BottomSide = React.memo(function BottomSide(p: BProps) {
   const {showingPopup, setShowingPicker, bottomChildren, ecrType} = p
   const {hasReactions, reactionsPopupPosition} = p
@@ -368,8 +369,11 @@ const BottomSide = React.memo(function BottomSide(p: BProps) {
       />
     ) : null
 
+  const edited = useEdited()
+
   return (
     <>
+      {edited}
       {bottomChildren ?? null}
       {ecrType !== EditCancelRetryType.NONE ? <EditCancelRetry ecrType={ecrType} /> : null}
       {reactionsRow}
@@ -530,8 +534,6 @@ const styles = Styles.styleSheetCreate(
         flexShrink: 1,
         position: 'relative',
       },
-      edited: {color: Styles.globalColors.black_20},
-      editedHighlighted: {color: Styles.globalColors.black_20OrBlack},
       ellipsis: Styles.platformStyles({
         isElectron: {height: 4, paddingTop: 0},
         isMobile: {paddingTop: 4},