From c4785ef96e13d02b217dce4e777269c0e895507d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 21 Mar 2025 18:29:14 +0200
Subject: New `ContextMenu` menu type for DM messages (#8014)

* get context menu somewhat working ish

* take screenshot rather than double rendering

* get animations somewhat working

* get transform animation working

* rm log

* upwards safe area

* get working on android

* get android working once and for all

* fix positioning on both platforms

* use dark blur on ios always, fix dark mode

* allow closing with hardware back press

* try and fix type error

* add note about ts-ignore

* round post

* add image capture error handling

* extract magic numbers

* set explicit embed width, rm top margin

* Message embed width tweaks

* Format

* fix position of embeds

* same as above for web

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/components/dms/ActionsWrapper.web.tsx | 68 +++++++++++++++----------------
 1 file changed, 34 insertions(+), 34 deletions(-)

(limited to 'src/components/dms/ActionsWrapper.web.tsx')

diff --git a/src/components/dms/ActionsWrapper.web.tsx b/src/components/dms/ActionsWrapper.web.tsx
index 29cc89dd1..188d18eb7 100644
--- a/src/components/dms/ActionsWrapper.web.tsx
+++ b/src/components/dms/ActionsWrapper.web.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto/api'
 
-import {atoms as a} from '#/alf'
-import {MessageMenu} from '#/components/dms/MessageMenu'
-import {useMenuControl} from '#/components/Menu'
+import {atoms as a, useTheme} from '#/alf'
+import {MessageContextMenu} from '#/components/dms/MessageContextMenu'
+import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontalIcon} from '../icons/DotGrid'
 
 export function ActionsWrapper({
   message,
@@ -15,8 +15,8 @@ export function ActionsWrapper({
   isFromSelf: boolean
   children: React.ReactNode
 }) {
-  const menuControl = useMenuControl()
   const viewRef = React.useRef(null)
+  const t = useTheme()
 
   const [showActions, setShowActions] = React.useState(false)
 
@@ -42,39 +42,39 @@ export function ActionsWrapper({
       onMouseLeave={onMouseLeave}
       onFocus={onFocus}
       onBlur={onMouseLeave}
-      style={StyleSheet.flatten([a.flex_1, a.flex_row])}
+      style={[a.flex_1, isFromSelf ? a.flex_row : a.flex_row_reverse]}
       ref={viewRef}>
-      {isFromSelf && (
-        <View
-          style={[
-            a.mr_xl,
-            a.justify_center,
-            {
-              marginLeft: 'auto',
-            },
-          ]}>
-          <MessageMenu
-            message={message}
-            control={menuControl}
-            triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
-          />
-        </View>
-      )}
       <View
-        style={{
-          maxWidth: '80%',
-        }}>
+        style={[
+          a.justify_center,
+          isFromSelf
+            ? [a.mr_xl, {marginLeft: 'auto'}]
+            : [a.ml_xl, {marginRight: 'auto'}],
+        ]}>
+        <MessageContextMenu message={message}>
+          {({props, state, isNative, control}) => {
+            // always false, file is platform split
+            if (isNative) return null
+            const showMenuTrigger = showActions || control.isOpen ? 1 : 0
+            return (
+              <Pressable
+                {...props}
+                style={[
+                  {opacity: showMenuTrigger},
+                  a.p_sm,
+                  a.rounded_full,
+                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                ]}>
+                <DotsHorizontalIcon size="md" style={t.atoms.text} />
+              </Pressable>
+            )
+          }}
+        </MessageContextMenu>
+      </View>
+      <View
+        style={[{maxWidth: '80%'}, isFromSelf ? a.align_end : a.align_start]}>
         {children}
       </View>
-      {!isFromSelf && (
-        <View style={[a.flex_row, a.align_center, a.ml_xl]}>
-          <MessageMenu
-            message={message}
-            control={menuControl}
-            triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
-          />
-        </View>
-      )}
     </View>
   )
 }
-- 
cgit 1.4.1