Improved mute alerting (#1355)

* Use a simpler mute alert when viewing a post by a muted user

* Dont mute self-QPs when we're overriding a mute

* Fix types

src/lib/embeds.ts

@@ -0,0 +1,24 @@
+import {
+  AppBskyFeedDefs,
+  AppBskyEmbedRecord,
+  AppBskyEmbedRecordWithMedia,
+} from '@atproto/api'
+
+export function isEmbedByEmbedder(
+  embed: AppBskyFeedDefs.PostView['embed'],
+  did: string,
+): boolean {
+  if (!embed) {
+    return false
+  }
+  if (AppBskyEmbedRecord.isViewRecord(embed.record)) {
+    return embed.record.author.did === did
+  }
+  if (
+    AppBskyEmbedRecordWithMedia.isView(embed) &&
+    AppBskyEmbedRecord.isViewRecord(embed.record.record)
+  ) {
+    return embed.record.record.author.did === did
+  }
+  return true
+}

src/view/com/post-thread/PostThreadItem.tsx

@@ -19,6 +19,7 @@ import {niceDate} from 'lib/strings/time'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {pluralize} from 'lib/strings/helpers'
+import {isEmbedByEmbedder} from 'lib/embeds'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
@@ -59,6 +60,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   const itemTitle = `Post by ${item.post.author.handle}`
   const authorHref = makeProfileLink(item.post.author)
   const authorTitle = item.post.author.handle
+  const isAuthorMuted = item.post.author.viewer?.muted
   const likesHref = React.useMemo(() => {
     const urip = new AtUri(item.post.uri)
     return makeProfileLink(item.post.author, 'post', urip.rkey, 'liked-by')
@@ -224,6 +226,30 @@ export const PostThreadItem = observer(function PostThreadItem({
                 </View>
               </View>
               <View style={styles.meta}>
+                {isAuthorMuted && (
+                  <View
+                    style={[
+                      pal.viewLight,
+                      {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 4,
+                        borderRadius: 6,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
+                        marginRight: 4,
+                      },
+                    ]}>
+                    <FontAwesomeIcon
+                      icon={['far', 'eye-slash']}
+                      size={12}
+                      color={pal.colors.textLight}
+                    />
+                    <Text type="sm-medium" style={pal.textLight}>
+                      Muted
+                    </Text>
+                  </View>
+                )}
                 <Link
                   style={styles.metaItem}
                   href={authorHref}
@@ -280,7 +306,13 @@ export const PostThreadItem = observer(function PostThreadItem({
                 </View>
               ) : undefined}
               {item.post.embed && (
-                <ContentHider moderation={item.moderation.embed} style={s.mb10}>
+                <ContentHider
+                  moderation={item.moderation.embed}
+                  ignoreMute={isEmbedByEmbedder(
+                    item.post.embed,
+                    item.post.author.did,
+                  )}
+                  style={s.mb10}>
                   <PostEmbeds
                     embed={item.post.embed}
                     moderation={item.moderation.embed}

src/view/com/posts/FeedItem.tsx

@@ -28,6 +28,7 @@ import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {makeProfileLink} from 'lib/routes/links'
+import {isEmbedByEmbedder} from 'lib/embeds'
 
 export const FeedItem = observer(function ({
   item,
@@ -292,6 +293,10 @@ export const FeedItem = observer(function ({
               <ContentHider
                 testID="contentHider-embed"
                 moderation={item.moderation.embed}
+                ignoreMute={isEmbedByEmbedder(
+                  item.post.embed,
+                  item.post.author.did,
+                )}
                 style={styles.embed}>
                 <PostEmbeds
                   embed={item.post.embed}

src/view/com/util/moderation/PostAlerts.tsx

@@ -9,7 +9,6 @@ import {useStores} from 'state/index'
 
 export function PostAlerts({
   moderation,
-  includeMute,
   style,
 }: {
   moderation: ModerationUI
@@ -19,10 +18,7 @@ export function PostAlerts({
   const store = useStores()
   const pal = usePalette('default')
 
-  const shouldAlert =
+  const shouldAlert = !!moderation.cause && moderation.alert
-    !!moderation.cause &&
-    (moderation.alert ||
-      (includeMute && moderation.blur && moderation.cause?.type === 'muted'))
   if (!shouldAlert) {
     return null
   }