weg dropdown menu

src/components/dms/ActionsWrapper.tsx

@@ -7,22 +7,26 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
 
 import {useHaptics} from 'lib/haptics'
 import {atoms as a} from '#/alf'
+import {MessageMenu} from '#/components/dms/MessageMenu'
+import {useMenuControl} from '#/components/Menu'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
 export const ActionsWrapper = function GrowWrapper({
+  message,
   isFromSelf,
-  onOpenMenu,
   children,
 }: {
+  message: ChatBskyConvoDefs.MessageView
   isFromSelf: boolean
-  onOpenMenu: () => unknown
   children: React.ReactNode
 }) {
   const playHaptic = useHaptics()
+  const menuControl = useMenuControl()
 
   const scale = useSharedValue(1)
   const animationDidComplete = useSharedValue(false)
@@ -45,11 +49,11 @@ export const ActionsWrapper = function GrowWrapper({
       if (!finished) return
       animationDidComplete.value = true
       runOnJS(playHaptic)()
-      runOnJS(onOpenMenu)()
+      runOnJS(menuControl.open)()
 
       shrink()
     })
-  }, [scale, animationDidComplete, playHaptic, onOpenMenu, shrink])
+  }, [scale, animationDidComplete, playHaptic, shrink, menuControl])
 
   return (
     <View
@@ -66,6 +70,7 @@ export const ActionsWrapper = function GrowWrapper({
         onTouchEnd={shrink}>
         {children}
       </AnimatedPressable>
+      <MessageMenu message={message} control={menuControl} hideTrigger={true} />
     </View>
   )
 }

src/components/dms/ActionsWrapper.web.tsx

@@ -1,14 +1,75 @@
 import React from 'react'
 import {View} from 'react-native'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+
+import {atoms as a} from '#/alf'
+import {MessageMenu} from '#/components/dms/MessageMenu'
+import {useMenuControl} from '#/components/Menu'
+import {Text} from '#/components/Typography'
 
 export function ActionsWrapper({
+  message,
   isFromSelf,
-  onOpenMenu,
   children,
 }: {
+  message: ChatBskyConvoDefs.MessageView
   isFromSelf: boolean
-  onOpenMenu: () => unknown
   children: React.ReactNode
 }) {
-  return <View>{children}</View>
+  const [showActions, setShowActions] = React.useState(false)
+
+  const menuControl = useMenuControl()
+
+  const onMouseEnter = React.useCallback(() => {
+    setShowActions(true)
+  }, [])
+
+  const onMouseLeave = React.useCallback(() => {
+    setShowActions(false)
+  }, [])
+
+  return (
+    <View
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={[a.flex_1, a.flex_row]}>
+      {isFromSelf && (
+        <View
+          style={[
+            {
+              width: 100,
+              marginLeft: 'auto',
+              alignItems: 'flex-end',
+            },
+          ]}>
+          <ActionBar control={menuControl} message={message} />
+        </View>
+      )}
+      <View
+        style={[
+          {
+            maxWidth: '65%',
+          },
+        ]}>
+        {children}
+      </View>
+      {!isFromSelf && (
+        <View style={[{width: 100}]}>{showActions && <Text>Hello</Text>}</View>
+      )}
+    </View>
+  )
+}
+
+function ActionBar({
+  control,
+  message,
+}: {
+  control: Menu.MenuControlProps
+  message: ChatBskyConvoDefs.MessageView
+}) {
+  return (
+    <View style={[a.flex_row, a.mx_md]}>
+      <MessageMenu message={message} control={control} />
+    </View>
+  )
 }

src/components/dms/MessageItem.tsx

@@ -6,8 +6,6 @@ import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {MessageItemMetadata} from '#/components/dms/MesageItemMetadata'
-import {MessageMenu} from '#/components/dms/MessageMenu'
-import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 
 export function MessageItem({
@@ -23,8 +21,6 @@ export function MessageItem({
   const t = useTheme()
   const {currentAccount} = useSession()
 
-  const menuControl = useMenuControl()
-
   const isFromSelf = item.sender?.did === currentAccount?.did
 
   const isNextFromSelf =
@@ -51,12 +47,8 @@ export function MessageItem({
     return true
   }, [item, next, isFromSelf, isNextFromSelf])
 
-  const onOpenMenu = React.useCallback(() => {
-    menuControl.open()
-  }, [menuControl])
-
   return (
-    <ActionsWrapper onOpenMenu={onOpenMenu} isFromSelf={isFromSelf}>
+    <ActionsWrapper isFromSelf={isFromSelf} message={item}>
       <View
         style={[
           a.py_sm,
@@ -87,7 +79,6 @@ export function MessageItem({
         isLastInGroup={isLastInGroup}
         style={isFromSelf ? a.text_right : a.text_left}
       />
-      <MessageMenu message={item} control={menuControl} />
     </ActionsWrapper>
   )
 }

src/components/dms/MessageMenu.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
+import {Pressable} 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 {atoms as a, useTheme} from '#/alf'
+import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import * as Menu from '#/components/Menu'
@@ -13,11 +16,14 @@ import {usePromptControl} from '#/components/Prompt'
 export let MessageMenu = ({
   message,
   control,
+  hideTrigger,
 }: {
+  hideTrigger?: boolean
   message: ChatBskyConvoDefs.MessageView
   control: Menu.MenuControlProps
 }): React.ReactNode => {
   const {_} = useLingui()
+  const t = useTheme()
   const {currentAccount} = useSession()
   const deleteControl = usePromptControl()
 
@@ -34,6 +40,24 @@ export let MessageMenu = ({
   return (
     <>
       <Menu.Root control={control}>
+        {!hideTrigger && (
+          <Menu.Trigger label={_(msg`Chat settings`)}>
+            {({props, state}) => (
+              <Pressable
+                {...props}
+                style={[
+                  a.p_sm,
+                  a.rounded_full,
+                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                  // make sure pfp is in the middle
+                  {marginLeft: -10},
+                ]}>
+                <DotsHorizontal size="sm" style={t.atoms.text} />
+              </Pressable>
+            )}
+          </Menu.Trigger>
+        )}
+
         <Menu.Outer>
           <Menu.Group>
             <Menu.Item