Reveal chat timestamp on tap (#10262)

src/components/dms/ActionsWrapper.web.tsx

@@ -1,8 +1,7 @@
 import {useCallback, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {useConvoActive} from '#/state/messages/convo'
 import {useSession} from '#/state/session'
@@ -16,16 +15,20 @@ import {hasReachedReactionLimit} from './util'
 
 export function ActionsWrapper({
   message,
+  hasReactions,
   isFromSelf,
   children,
+  onTap,
 }: {
   message: ChatBskyConvoDefs.MessageView
+  hasReactions?: boolean
   isFromSelf: boolean
   children: React.ReactNode
+  onTap?: () => void
 }) {
   const viewRef = useRef(null)
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const convo = useConvoActive()
   const {currentAccount} = useSession()
 
@@ -57,17 +60,17 @@ export function ActionsWrapper({
       ) {
         convo
           .removeReaction(message.id, emoji)
-          .catch(() => Toast.show(_(msg`Failed to remove emoji reaction`)))
+          .catch(() => Toast.show(l`Failed to remove emoji reaction`))
       } else {
         if (hasReachedReactionLimit(message, currentAccount?.did)) return
         convo.addReaction(message.id, emoji).catch(() =>
-          Toast.show(_(msg`Failed to add emoji reaction`), {
+          Toast.show(l`Failed to add emoji reaction`, {
             type: 'error',
           }),
         )
       }
     },
-    [_, convo, message, currentAccount?.did],
+    [l, convo, message, currentAccount?.did],
   )
 
   return (
@@ -87,6 +90,7 @@ export function ActionsWrapper({
           isFromSelf
             ? [a.mr_xs, {marginLeft: 'auto'}, a.flex_row_reverse]
             : [a.ml_xs, {marginRight: 'auto'}],
+          hasReactions ? [a.mb_2xl] : undefined,
         ]}>
         <EmojiReactionPicker message={message} onEmojiSelect={onEmojiSelect}>
           {({props, state, IS_NATIVE, control}) => {
@@ -133,10 +137,13 @@ export function ActionsWrapper({
           }}
         </MessageContextMenu>
       </View>
-      <View
+      <Pressable
+        accessibilityRole="button"
+        accessibilityHint={l`Click to view the date and time`}
+        onPress={onTap}
         style={[{maxWidth: '80%'}, isFromSelf ? a.align_end : a.align_start]}>
         {children}
-      </View>
+      </Pressable>
     </View>
   )
 }