Implement account muting

10 files changed, 96 insertions, 10 deletions

diff --git a/src/lib/images.ts b/src/lib/images.ts
index caeb96d27..d929a2e87 100644
--- a/src/lib/images.ts
+++ b/src/lib/images.ts
@@ -72,7 +72,6 @@ export async function resize(localUri: string, opts: ResizeOpts) {
       undefined,
       {mode: opts.mode},
     )
-    console.log(quality, resizeRes)
     if (resizeRes.size < opts.maxSize) {
       return resizeRes
     }
diff --git a/src/lib/link-meta.ts b/src/lib/link-meta.ts
index 53d5eed7c..49e75cde2 100644
--- a/src/lib/link-meta.ts
+++ b/src/lib/link-meta.ts
@@ -77,7 +77,7 @@ export async function getLinkMeta(
     meta.image = httpResMeta.image
   } catch (e) {
     // failed
-    console.log(e)
+    console.error(e)
     meta.error = 'Failed to fetch link'
   }
 
diff --git a/src/lib/strings.ts b/src/lib/strings.ts
index 1bbb4afd4..6758e2985 100644
--- a/src/lib/strings.ts
+++ b/src/lib/strings.ts
@@ -256,7 +256,7 @@ export function convertBskyAppUrlIfNeeded(url: string): string {
       const urlp = new URL(url)
       return urlp.pathname
     } catch (e) {
-      console.log('Unexpected error in convertBskyAppUrlIfNeeded()', e)
+      console.error('Unexpected error in convertBskyAppUrlIfNeeded()', e)
     }
   }
   return url
diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts
index 2c205d7c0..b5a3b29d7 100644
--- a/src/state/models/feed-view.ts
+++ b/src/state/models/feed-view.ts
@@ -593,6 +593,5 @@ function ts(item: FeedViewPost | FeedItemModel): string {
     // @ts-ignore need better type checks
     return item.reason.indexedAt
   }
-  console.log(item)
   return item.post.indexedAt
 }
diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts
index ce70867ae..2a69a1345 100644
--- a/src/state/models/profile-view.ts
+++ b/src/state/models/profile-view.ts
@@ -18,6 +18,7 @@ export const ACTOR_TYPE_SCENE = 'app.bsky.system.actorScene'
 export class ProfileViewMyStateModel {
   follow?: string
   member?: string
+  muted?: boolean
 
   constructor() {
     makeAutoObservable(this)
@@ -156,6 +157,18 @@ export class ProfileViewModel {
     await this.refresh()
   }
 
+  async muteAccount() {
+    await this.rootStore.api.app.bsky.graph.mute({user: this.did})
+    this.myState.muted = true
+    await this.refresh()
+  }
+
+  async unmuteAccount() {
+    await this.rootStore.api.app.bsky.graph.unmute({user: this.did})
+    this.myState.muted = false
+    await this.refresh()
+  }
+
   // state transitions
   // =
 
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 9bc8df110..ae2bd6681 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/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',
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 43fbb9ccb..e82498a7d 100644
--- a/src/view/com/post/Post.tsx
+++ b/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',
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 4d444fea2..3916ea453 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/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',
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 32fe86909..5f0fb6fe2 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/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))
   }
@@ -144,6 +162,10 @@ export const ProfileHeader = observer(function ProfileHeader({
   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,
diff --git a/src/view/index.ts b/src/view/index.ts
index 26695e5ce..b38c0aa50 100644
--- a/src/view/index.ts
+++ b/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,