add a wep specific wrapper

src/components/dms/ActionsWrapper.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 import Animated, {
   cancelAnimation,
   runOnJS,
@@ -9,13 +9,16 @@ import Animated, {
 } from 'react-native-reanimated'
 
 import {useHaptics} from 'lib/haptics'
+import {atoms as a} from '#/alf'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
-export const GrowWrapper = function GrowWrapper({
+export const ActionsWrapper = function GrowWrapper({
+  isFromSelf,
   onOpenMenu,
   children,
 }: {
+  isFromSelf: boolean
   onOpenMenu: () => unknown
   children: React.ReactNode
 }) {
@@ -49,12 +52,20 @@ export const GrowWrapper = function GrowWrapper({
   }, [scale, animationDidComplete, playHaptic, onOpenMenu, shrink])
 
   return (
-    <AnimatedPressable
+    <View
-      style={animatedStyle}
+      style={[
-      unstable_pressDelay={200}
+        {
-      onPressIn={grow}
+          maxWidth: '65%',
-      onTouchEnd={shrink}>
+        },
-      {children}
+        isFromSelf ? a.self_end : a.self_start,
-    </AnimatedPressable>
+      ]}>
+      <AnimatedPressable
+        style={animatedStyle}
+        unstable_pressDelay={200}
+        onPressIn={grow}
+        onTouchEnd={shrink}>
+        {children}
+      </AnimatedPressable>
+    </View>
   )
 }

src/components/dms/ActionsWrapper.web.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {View} from 'react-native'
+
+export function ActionsWrapper({
+  isFromSelf,
+  onOpenMenu,
+  children,
+}: {
+  isFromSelf: boolean
+  onOpenMenu: () => unknown
+  children: React.ReactNode
+}) {
+  return <View>{children}</View>
+}

src/components/dms/MessageItem.tsx

@@ -4,7 +4,7 @@ import {ChatBskyConvoDefs} from '@atproto-labs/api'
 
 import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {GrowWrapper} from '#/components/dms/GrowWrapper'
+import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {MessageItemMetadata} from '#/components/dms/MesageItemMetadata'
 import {MessageMenu} from '#/components/dms/MessageMenu'
 import {useMenuControl} from '#/components/Menu'
@@ -56,46 +56,38 @@ export function MessageItem({
   }, [menuControl])
 
   return (
-    <View
+    <ActionsWrapper onOpenMenu={onOpenMenu} isFromSelf={isFromSelf}>
-      style={[
+      <View
-        {
+        style={[
-          maxWidth: '65%',
+          a.py_sm,
-        },
+          a.px_lg,
-        isFromSelf ? a.self_end : a.self_start,
+          a.my_2xs,
-      ]}>
+          a.rounded_md,
-      <GrowWrapper onOpenMenu={onOpenMenu}>
+          {
-        <View
+            backgroundColor: isFromSelf
+              ? t.palette.primary_500
+              : t.palette.contrast_50,
+            borderRadius: 17,
+          },
+          isFromSelf
+            ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+            : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+        ]}>
+        <Text
           style={[
-            a.py_sm,
+            a.text_md,
-            a.px_lg,
+            a.leading_snug,
-            a.my_2xs,
+            isFromSelf && {color: t.palette.white},
-            a.rounded_md,
-            {
-              backgroundColor: isFromSelf
-                ? t.palette.primary_500
-                : t.palette.contrast_50,
-              borderRadius: 17,
-            },
-            isFromSelf
-              ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
-              : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
           ]}>
-          <Text
+          {item.text}
-            style={[
+        </Text>
-              a.text_md,
+      </View>
-              a.leading_snug,
+      <MessageItemMetadata
-              isFromSelf && {color: t.palette.white},
+        message={item}
-            ]}>
+        isLastInGroup={isLastInGroup}
-            {item.text}
+        style={isFromSelf ? a.text_right : a.text_left}
-          </Text>
+      />
-        </View>
+      <MessageMenu message={item} control={menuControl} />
-        <MessageItemMetadata
+    </ActionsWrapper>
-          message={item}
-          isLastInGroup={isLastInGroup}
-          style={isFromSelf ? a.text_right : a.text_left}
-        />
-        <MessageMenu message={item} control={menuControl} />
-      </GrowWrapper>
-    </View>
   )
 }