[🐴] Record message (#4230)

* send record via link in text

* re-trim text after removing link

* record message

* only show copy text if message + add translate

* reduce padding

* adjust padding

* Tweak spacing

* Stop clickthrough for hidden content

* Update bg to show labels

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 36 insertions, 11 deletions

diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx
index 21812d268..92913d1cb 100644
--- a/src/components/dms/MessageMenu.tsx
+++ b/src/components/dms/MessageMenu.tsx
@@ -6,12 +6,16 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {getTranslatorLink} from '#/locale/helpers'
+import {useLanguagePrefs} from '#/state/preferences'
+import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {isWeb} from 'platform/detection'
 import {useConvoActive} from 'state/messages/convo'
 import {useSession} from 'state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ReportDialog} from '#/components/dms/ReportDialog'
+import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
 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'
@@ -35,10 +39,12 @@ export let MessageMenu = ({
   const convo = useConvoActive()
   const deleteControl = usePromptControl()
   const reportControl = usePromptControl()
+  const langPrefs = useLanguagePrefs()
+  const openLink = useOpenLink()
 
   const isFromSelf = message.sender?.did === currentAccount?.did
 
-  const onCopyPostText = React.useCallback(() => {
+  const onCopyMessage = React.useCallback(() => {
     const str = richTextToString(
       new RichText({
         text: message.text,
@@ -51,6 +57,14 @@ export let MessageMenu = ({
     Toast.show(_(msg`Copied to clipboard`))
   }, [_, message.text, message.facets])
 
+  const onPressTranslateMessage = React.useCallback(() => {
+    const translatorUrl = getTranslatorLink(
+      message.text,
+      langPrefs.primaryLanguage,
+    )
+    openLink(translatorUrl)
+  }, [langPrefs.primaryLanguage, message.text, openLink])
+
   const onDelete = React.useCallback(() => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
     convo
@@ -81,16 +95,27 @@ export let MessageMenu = ({
         )}
 
         <Menu.Outer>
-          <Menu.Group>
-            <Menu.Item
-              testID="messageDropdownCopyBtn"
-              label={_(msg`Copy message text`)}
-              onPress={onCopyPostText}>
-              <Menu.ItemText>{_(msg`Copy message text`)}</Menu.ItemText>
-              <Menu.ItemIcon icon={ClipboardIcon} position="right" />
-            </Menu.Item>
-          </Menu.Group>
-          <Menu.Divider />
+          {message.text.length > 0 && (
+            <>
+              <Menu.Group>
+                <Menu.Item
+                  testID="messageDropdownTranslateBtn"
+                  label={_(msg`Translate`)}
+                  onPress={onPressTranslateMessage}>
+                  <Menu.ItemText>{_(msg`Translate`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={Translate} position="right" />
+                </Menu.Item>
+                <Menu.Item
+                  testID="messageDropdownCopyBtn"
+                  label={_(msg`Copy message text`)}
+                  onPress={onCopyMessage}>
+                  <Menu.ItemText>{_(msg`Copy message text`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={ClipboardIcon} position="right" />
+                </Menu.Item>
+              </Menu.Group>
+              <Menu.Divider />
+            </>
+          )}
           <Menu.Group>
             <Menu.Item
               testID="messageDropdownDeleteBtn"