make triggers accessible

src/components/dms/ActionsWrapper.web.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import {View} from 'react-native'
+import {StyleSheet, 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,
@@ -32,44 +31,39 @@ export function ActionsWrapper({
     <View
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      style={[a.flex_1, a.flex_row]}>
+      onFocus={onMouseEnter}
+      onBlur={onMouseLeave}
+      style={StyleSheet.flatten([a.flex_1, a.flex_row])}>
       {isFromSelf && (
         <View
           style={[
+            a.mr_md,
             {
-              width: 100,
               marginLeft: 'auto',
-              alignItems: 'flex-end',
             },
           ]}>
-          <ActionBar control={menuControl} message={message} />
+          <MessageMenu
+            message={message}
+            control={menuControl}
+            triggerOpacity={showActions ? 1 : 0}
+          />
         </View>
       )}
       <View
-        style={[
+        style={{
-          {
+          maxWidth: '65%',
-            maxWidth: '65%',
+        }}>
-          },
-        ]}>
         {children}
       </View>
       {!isFromSelf && (
-        <View style={[{width: 100}]}>{showActions && <Text>Hello</Text>}</View>
+        <View style={[a.flex_row, a.align_center, a.ml_xl]}>
+          <MessageMenu
+            message={message}
+            control={menuControl}
+            triggerOpacity={showActions ? 1 : 0}
+          />
+        </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/MessageMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -17,8 +17,10 @@ export let MessageMenu = ({
   message,
   control,
   hideTrigger,
+  triggerOpacity,
 }: {
   hideTrigger?: boolean
+  triggerOpacity?: number
   message: ChatBskyConvoDefs.MessageView
   control: Menu.MenuControlProps
 }): React.ReactNode => {
@@ -41,21 +43,23 @@ export let MessageMenu = ({
     <>
       <Menu.Root control={control}>
         {!hideTrigger && (
-          <Menu.Trigger label={_(msg`Chat settings`)}>
+          <View style={{opacity: triggerOpacity}}>
-            {({props, state}) => (
+            <Menu.Trigger label={_(msg`Chat settings`)}>
-              <Pressable
+              {({props, state}) => (
-                {...props}
+                <Pressable
-                style={[
+                  {...props}
-                  a.p_sm,
+                  style={[
-                  a.rounded_full,
+                    a.p_sm,
-                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                    a.rounded_full,
-                  // make sure pfp is in the middle
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
-                  {marginLeft: -10},
+                    // make sure pfp is in the middle
-                ]}>
+                    {marginLeft: -10},
-                <DotsHorizontal size="sm" style={t.atoms.text} />
+                  ]}>
-              </Pressable>
+                  <DotsHorizontal size="sm" style={t.atoms.text} />
-            )}
+                </Pressable>
-          </Menu.Trigger>
+              )}
+            </Menu.Trigger>
+          </View>
         )}
 
         <Menu.Outer>