Implement account muting

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

@@ -282,7 +282,12 @@ export const PostThreadItem = observer(function PostThreadItem({
                 onCopyPostText={onCopyPostText}
                 onDeletePost={onDeletePost}
               />
-              {record.text ? (
+              {item.post.author.viewer?.muted ? (
+                <View style={[styles.mutedWarning, pal.btn]}>
+                  <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
+                  <Text type="body2">This post is by a muted account.</Text>
+                </View>
+              ) : record.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
                     text={record.text}
@@ -367,6 +372,14 @@ const styles = StyleSheet.create({
     paddingRight: 5,
     maxWidth: 240,
   },
+  mutedWarning: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    marginTop: 2,
+    marginBottom: 6,
+    borderRadius: 2,
+  },
   postTextContainer: {
     flexDirection: 'row',
     alignItems: 'center',

src/view/com/post/Post.tsx

@@ -184,7 +184,12 @@ export const Post = observer(function Post({
               </Link>
             </View>
           )}
-          {record.text ? (
+          {item.post.author.viewer?.muted ? (
+            <View style={[styles.mutedWarning, pal.btn]}>
+              <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
+              <Text type="body2">This post is by a muted account.</Text>
+            </View>
+          ) : record.text ? (
             <View style={styles.postTextContainer}>
               <RichText text={record.text} entities={record.entities} />
             </View>
@@ -222,6 +227,14 @@ const styles = StyleSheet.create({
   layoutContent: {
     flex: 1,
   },
+  mutedWarning: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    marginTop: 2,
+    marginBottom: 6,
+    borderRadius: 2,
+  },
   postTextContainer: {
     flexDirection: 'row',
     alignItems: 'center',

src/view/com/posts/FeedItem.tsx

@@ -106,6 +106,7 @@ export const FeedItem = observer(function ({
     isNoTop ? styles.outerNoTop : undefined,
     item._isThreadParent ? styles.outerNoBottom : undefined,
   ]
+
   return (
     <>
       {isChild && !item._isThreadChild && item.replyParent ? (
@@ -200,7 +201,12 @@ export const FeedItem = observer(function ({
                 </Link>
               </View>
             )}
-            {record.text ? (
+            {item.post.author.viewer?.muted ? (
+              <View style={[styles.mutedWarning, pal.btn]}>
+                <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
+                <Text type="body2">This post is by a muted account.</Text>
+              </View>
+            ) : record.text ? (
               <View style={styles.postTextContainer}>
                 <RichText
                   type="body1"
@@ -303,6 +309,14 @@ const styles = StyleSheet.create({
   layoutContent: {
     flex: 1,
   },
+  mutedWarning: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    marginTop: 2,
+    marginBottom: 6,
+    borderRadius: 2,
+  },
   postTextContainer: {
     flexDirection: 'row',
     alignItems: 'center',

src/view/com/profile/ProfileHeader.tsx

@@ -89,6 +89,24 @@ export const ProfileHeader = observer(function ProfileHeader({
     }
     onRefreshAll()
   }
+  const onPressMuteAccount = async () => {
+    try {
+      await view.muteAccount()
+      Toast.show('Account muted')
+    } catch (e: any) {
+      console.error(e)
+      Toast.show(`There was an issue! ${e.toString()}`)
+    }
+  }
+  const onPressUnmuteAccount = async () => {
+    try {
+      await view.unmuteAccount()
+      Toast.show('Account unmuted')
+    } catch (e: any) {
+      console.error(e)
+      Toast.show(`There was an issue! ${e.toString()}`)
+    }
+  }
   const onPressReportAccount = () => {
     store.shell.openModal(new ReportAccountModal(view.did))
   }
@@ -143,6 +161,10 @@ export const ProfileHeader = observer(function ProfileHeader({
   let dropdownItems: DropdownItem[] | undefined
   if (!isMe) {
     dropdownItems = dropdownItems || []
+    dropdownItems.push({
+      label: view.myState.muted ? 'Unmute Account' : 'Mute Account',
+      onPress: view.myState.muted ? onPressUnmuteAccount : onPressMuteAccount,
+    })
     dropdownItems.push({
       label: 'Report Account',
       onPress: onPressReportAccount,
@@ -286,7 +308,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           />
         ) : undefined}
         {view.isScene && view.creator ? (
-          <View style={styles.relationshipsLine}>
+          <View style={styles.detailLine}>
             <FontAwesomeIcon
               icon={['far', 'user']}
               style={[pal.textLight, s.mr5]}
@@ -304,7 +326,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           </View>
         ) : undefined}
         {view.isScene && view.myState.member ? (
-          <View style={styles.relationshipsLine}>
+          <View style={styles.detailLine}>
             <FontAwesomeIcon
               icon={['far', 'circle-check']}
               style={[pal.textLight, s.mr5]}
@@ -314,6 +336,17 @@ export const ProfileHeader = observer(function ProfileHeader({
             </Text>
           </View>
         ) : undefined}
+        {view.myState.muted ? (
+          <View style={[styles.detailLine, pal.btn, s.p5]}>
+            <FontAwesomeIcon
+              icon={['far', 'eye-slash']}
+              style={[pal.text, s.mr5]}
+            />
+            <Text type="body2" style={[s.mr2, pal.text]}>
+              Account muted.
+            </Text>
+          </View>
+        ) : undefined}
       </View>
       {view.isScene && view.creator === store.me.did ? (
         <View style={[styles.sceneAdminContainer, pal.border]}>
@@ -421,7 +454,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
 
-  relationshipsLine: {
+  detailLine: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 5,

src/view/index.ts

@@ -30,6 +30,7 @@ import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass'
 import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis'
 import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope'
 import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation'
+import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash'
 import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
 import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe'
 import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
@@ -96,6 +97,7 @@ export function setup() {
     faEllipsis,
     faEnvelope,
     faExclamation,
+    farEyeSlash,
     faGear,
     faGlobe,
     faHeart,