[🐴] 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, 109 insertions, 0 deletions

diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx
new file mode 100644
index 000000000..d64563b91
--- /dev/null
+++ b/src/components/dms/MessageItemEmbed.tsx
@@ -0,0 +1,109 @@
+import React, {useMemo} from 'react'
+import {View} from 'react-native'
+import {
+  AppBskyEmbedRecord,
+  AppBskyFeedPost,
+  AtUri,
+  RichText as RichTextAPI,
+} from '@atproto/api'
+
+import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
+import {makeProfileLink} from '#/lib/routes/links'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {usePostQuery} from '#/state/queries/post'
+import {PostEmbeds} from '#/view/com/util/post-embeds'
+import {PostMeta} from '#/view/com/util/PostMeta'
+import {atoms as a, useTheme} from '#/alf'
+import {Link} from '#/components/Link'
+import {ContentHider} from '#/components/moderation/ContentHider'
+import {PostAlerts} from '#/components/moderation/PostAlerts'
+import {RichText} from '#/components/RichText'
+
+let MessageItemEmbed = ({
+  embed,
+}: {
+  embed: AppBskyEmbedRecord.Main
+}): React.ReactNode => {
+  const t = useTheme()
+  const {data: post} = usePostQuery(embed.record.uri)
+
+  const moderationOpts = useModerationOpts()
+  const moderation = useMemo(
+    () =>
+      moderationOpts && post ? moderatePost(post, moderationOpts) : undefined,
+    [moderationOpts, post],
+  )
+
+  const {rt, record} = useMemo(() => {
+    if (
+      post &&
+      AppBskyFeedPost.isRecord(post.record) &&
+      AppBskyFeedPost.validateRecord(post.record).success
+    ) {
+      return {
+        rt: new RichTextAPI({
+          text: post.record.text,
+          facets: post.record.facets,
+        }),
+        record: post.record,
+      }
+    }
+
+    return {rt: undefined, record: undefined}
+  }, [post])
+
+  if (!post || !moderation || !rt || !record) {
+    return null
+  }
+
+  const itemUrip = new AtUri(post.uri)
+  const itemHref = makeProfileLink(post.author, 'post', itemUrip.rkey)
+
+  return (
+    <Link to={itemHref}>
+      <View
+        style={[
+          a.w_full,
+          t.atoms.bg,
+          t.atoms.border_contrast_low,
+          a.rounded_md,
+          a.border,
+          a.p_md,
+          a.my_xs,
+        ]}>
+        <PostMeta
+          showAvatar
+          author={post.author}
+          moderation={moderation}
+          authorHasWarning={!!post.author.labels?.length}
+          timestamp={post.indexedAt}
+          postHref={itemHref}
+        />
+        <ContentHider modui={moderation.ui('contentView')}>
+          <PostAlerts modui={moderation.ui('contentView')} style={a.py_xs} />
+          {rt.text && (
+            <View style={a.mt_xs}>
+              <RichText
+                enableTags
+                testID="postText"
+                value={rt}
+                style={[a.text_sm, t.atoms.text_contrast_high]}
+                authorHandle={post.author.handle}
+              />
+            </View>
+          )}
+          {post.embed && (
+            <PostEmbeds
+              embed={post.embed}
+              moderation={moderation}
+              style={a.mt_xs}
+              quoteTextStyle={[a.text_sm, t.atoms.text_contrast_high]}
+            />
+          )}
+        </ContentHider>
+      </View>
+    </Link>
+  )
+}
+MessageItemEmbed = React.memo(MessageItemEmbed)
+export {MessageItemEmbed}