add delete button

src/components/dms/GrowWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useImperativeHandle} from 'react'
+import React, {useCallback} from 'react'
 import {Pressable} from 'react-native'
 import Animated, {
   cancelAnimation,
@@ -8,22 +8,19 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 
+import {useHaptics} from 'lib/haptics'
+
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
-export interface GrowWrapperRef {
-  reset: () => void
-}
+export const GrowWrapper = function GrowWrapper({
+  onOpenMenu,
+  children,
+}: {
+  onOpenMenu: () => unknown
+  children: React.ReactNode
+}) {
+  const playHaptic = useHaptics()
 
-export const GrowWrapper = React.forwardRef(function GrowWrapper(
-  {
-    onOpenMenu,
-    children,
-  }: {
-    onOpenMenu: () => unknown
-    children: React.ReactNode
-  },
-  ref,
-) {
   const scale = useSharedValue(1)
   const animationDidComplete = useSharedValue(false)
 
@@ -31,31 +28,21 @@ export const GrowWrapper = React.forwardRef(function GrowWrapper(
     transform: [{scale: scale.value}],
   }))
 
-  const reset = useCallback(() => {
+  const onTouchStart = React.useCallback(() => {
+    scale.value = withTiming(1.05, {duration: 750}, finished => {
+      if (!finished) return
+      animationDidComplete.value = true
+      runOnJS(playHaptic)()
+      runOnJS(onOpenMenu)()
+    })
+  }, [scale, animationDidComplete, playHaptic, onOpenMenu])
+
+  const onTouchEnd = useCallback(() => {
     cancelAnimation(scale)
     animationDidComplete.value = false
     scale.value = withTiming(1, {duration: 200})
   }, [animationDidComplete, scale])
 
-  const onTouchStart = React.useCallback(() => {
-    scale.value = withTiming(1.05, {duration: 750}, finished => {
-      if (!finished) return
-
-      animationDidComplete.value = true
-      runOnJS(onOpenMenu)()
-    })
-  }, [scale, animationDidComplete, onOpenMenu])
-
-  const onTouchEnd = React.useCallback(() => {
-    if (!animationDidComplete.value) {
-      reset()
-    }
-  }, [animationDidComplete, reset])
-
-  useImperativeHandle(ref, () => ({
-    reset,
-  }))
-
   return (
     <AnimatedPressable
       style={animatedStyle}
@@ -65,4 +52,4 @@ export const GrowWrapper = React.forwardRef(function GrowWrapper(
       {children}
     </AnimatedPressable>
   )
-})
+}

src/components/dms/MessageMenu.tsx

@@ -1,32 +1,55 @@
 import React from 'react'
-import {View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a} from '#/alf'
-import * as Dialog from '#/components/Dialog'
+import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+import {usePromptControl} from '#/components/Prompt'
 
 export let MessageMenu = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   message,
-  onClose,
   control,
 }: {
   message: ChatBskyConvoDefs.MessageView
-  onClose: () => void
-  control: Dialog.DialogControlProps
+  control: Menu.MenuControlProps
 }): React.ReactNode => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {_} = useLingui()
+  const deleteControl = usePromptControl()
+
+  const onDelete = React.useCallback(() => {
+    // TODO delete the message
+  }, [])
 
   return (
-    <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
+    <>
+      <Menu.Root control={control}>
+        <Menu.Outer>
+          <Menu.Group>
+            <Menu.Item
+              testID="postDropdownDeleteBtn"
+              label={_(msg`Delete message`)}
+              onPress={deleteControl.open}>
+              <Menu.ItemText>{_(msg`Delete message`)}</Menu.ItemText>
+              <Menu.ItemIcon icon={Trash} position="right" />
+            </Menu.Item>
+          </Menu.Group>
+        </Menu.Outer>
+      </Menu.Root>
 
-      <Dialog.ScrollableInner label="Menu TODO">
-        <View style={{height: a.gap_lg.gap}} />
-      </Dialog.ScrollableInner>
-    </Dialog.Outer>
+      <Prompt.Basic
+        control={deleteControl}
+        title={_(msg`Delete message`)}
+        description={_(
+          msg`Are you sure you want to delete this message?? The message will be deleted for you, but not for other participants.`,
+        )}
+        confirmButtonCta={_(msg`Delete`)}
+        confirmButtonColor="negative"
+        onConfirm={onDelete}
+      />
+    </>
   )
 }
 MessageMenu = React.memo(MessageMenu)

src/screens/Messages/Conversation/MessageItem.tsx

@@ -1,17 +1,13 @@
 import React, {useMemo} from 'react'
 import {View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {useSession} from '#/state/session'
-import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {atoms as a, useTheme} from '#/alf'
-import {useDialogControl} from '#/components/Dialog'
 import {GrowWrapper} from '#/components/dms/GrowWrapper'
+import {MessageItemMetadata} from '#/components/dms/MesageItemMetadata'
 import {MessageMenu} from '#/components/dms/MessageMenu'
-import * as Prompt from '#/components/Prompt'
-import {usePromptControl} from '#/components/Prompt'
+import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 
 export function MessageItem({
@@ -25,10 +21,9 @@ export function MessageItem({
     | null
 }) {
   const t = useTheme()
-  const {_} = useLingui()
   const {currentAccount} = useSession()
 
-  const control = useDialogControl()
+  const menuControl = useMenuControl()
 
   const isFromSelf = item.sender?.did === currentAccount?.did
 
@@ -57,8 +52,8 @@ export function MessageItem({
   }, [item, next, isFromSelf, isNextFromSelf])
 
   const onOpenMenu = React.useCallback(() => {
-    control.open()
-  }, [control])
+    menuControl.open()
+  }, [menuControl])
 
   return (
     <View
@@ -94,17 +89,7 @@ export function MessageItem({
           isLastInGroup={isLastInGroup}
           style={isFromSelf ? a.text_right : a.text_left}
         />
-        <MessageMenu message={item} control={control} />
-        <Prompt.Basic
-          control={deleteControl}
-          title={_(msg`Delete message`)}
-          description={_(
-            msg`Are you sure you want to delete this message?? The message will be deleted for you, but not for other participants.`,
-          )}
-          confirmButtonCta={_(msg`Leave`)}
-          confirmButtonColor="negative"
-          onConfirm={onDelete}
-        />
+        <MessageMenu message={item} control={menuControl} />
       </GrowWrapper>
     </View>
   )