Implement blocks (#554)

* Quick fix to prompt

* Add blocked accounts screen

* Add blocking tools to profile

* Blur avis/banners of blocked users

* Factor blocking state into moderation dsl

* Filter post slices from the feed if any are hidden

* Handle various block UIs

* Filter in the client on blockedBy

* Implement block list

* Fix some copy

* Bump deps

* Fix lint

bskyweb/cmd/bskyweb/server.go

@@ -93,6 +93,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/notifications", server.WebGeneric)
 	e.GET("/settings", server.WebGeneric)
 	e.GET("/settings/app-passwords", server.WebGeneric)
+	e.GET("/settings/blocked-accounts", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
 	e.GET("/support", server.WebGeneric)

package.json

@@ -22,7 +22,7 @@
     "e2e:run": "detox test --configuration ios.sim.debug --take-screenshots all"
   },
   "dependencies": {
-    "@atproto/api": "0.2.10",
+    "@atproto/api": "0.2.11",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@expo/webpack-config": "^18.0.1",
@@ -130,7 +130,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/pds": "^0.1.4",
+    "@atproto/pds": "^0.1.5",
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",

src/Navigation.tsx

@@ -27,6 +27,8 @@ import {colors} from 'lib/styles'
 import {isNative} from 'platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from './state'
 
 import {HomeScreen} from './view/screens/Home'
 import {SearchScreen} from './view/screens/Search'
@@ -46,9 +48,8 @@ import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
 import {TermsOfServiceScreen} from './view/screens/TermsOfService'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from './state'
 import {AppPasswords} from 'view/screens/AppPasswords'
+import {BlockedAccounts} from 'view/screens/BlockedAccounts'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -88,6 +89,7 @@ function commonScreens(Stack: typeof HomeTab) {
       />
       <Stack.Screen name="CopyrightPolicy" component={CopyrightPolicyScreen} />
       <Stack.Screen name="AppPasswords" component={AppPasswords} />
+      <Stack.Screen name="BlockedAccounts" component={BlockedAccounts} />
     </>
   )
 }

src/lib/labeling/helpers.ts

@@ -57,6 +57,7 @@ export function getPostModeration(
   let avatar = {
     warn: accountPref.pref === 'hide' || accountPref.pref === 'warn',
     blur:
+      postInfo.isBlocking ||
       accountPref.pref === 'hide' ||
       accountPref.pref === 'warn' ||
       profilePref.pref === 'hide' ||
@@ -75,6 +76,22 @@ export function getPostModeration(
   }
 
   // hide cases
+  if (postInfo.isBlocking) {
+    return {
+      avatar,
+      list: hide('Post from an account you blocked.'),
+      thread: hide('Post from an account you blocked.'),
+      view: warn('Post from an account you blocked.'),
+    }
+  }
+  if (postInfo.isBlockedBy) {
+    return {
+      avatar,
+      list: hide('Post from an account that has blocked you.'),
+      thread: hide('Post from an account that has blocked you.'),
+      view: warn('Post from an account that has blocked you.'),
+    }
+  }
   if (accountPref.pref === 'hide') {
     return {
       avatar,
@@ -144,21 +161,45 @@ export function getPostModeration(
   }
 }
 
+export function mergePostModerations(
+  moderations: PostModeration[],
+): PostModeration {
+  const merged: PostModeration = {
+    avatar: {warn: false, blur: false},
+    list: show(),
+    thread: show(),
+    view: show(),
+  }
+  for (const mod of moderations) {
+    if (mod.list.behavior === ModerationBehaviorCode.Hide) {
+      merged.list = mod.list
+    }
+    if (mod.thread.behavior === ModerationBehaviorCode.Hide) {
+      merged.thread = mod.thread
+    }
+    if (mod.view.behavior === ModerationBehaviorCode.Hide) {
+      merged.view = mod.view
+    }
+  }
+  return merged
+}
+
 export function getProfileModeration(
   store: RootStoreModel,
-  profileLabels: ProfileLabelInfo,
+  profileInfo: ProfileLabelInfo,
 ): ProfileModeration {
   const accountPref = store.preferences.getLabelPreference(
-    profileLabels.accountLabels,
+    profileInfo.accountLabels,
   )
   const profilePref = store.preferences.getLabelPreference(
-    profileLabels.profileLabels,
+    profileInfo.profileLabels,
   )
 
   // avatar
   let avatar = {
     warn: accountPref.pref === 'hide' || accountPref.pref === 'warn',
     blur:
+      profileInfo.isBlocking ||
       accountPref.pref === 'hide' ||
       accountPref.pref === 'warn' ||
       profilePref.pref === 'hide' ||
@@ -193,7 +234,10 @@ export function getProfileModeration(
   if (accountPref.pref === 'warn') {
     return {
       avatar,
-      list: warn(accountPref.desc.warning),
+      list:
+        profileInfo.isBlocking || profileInfo.isBlockedBy
+          ? hide('Blocked account')
+          : warn(accountPref.desc.warning),
       view: warn(accountPref.desc.warning),
     }
   }
@@ -208,7 +252,7 @@ export function getProfileModeration(
 
   return {
     avatar,
-    list: show(),
+    list: profileInfo.isBlocking ? hide('Blocked account') : show(),
     view: show(),
   }
 }
@@ -220,6 +264,7 @@ export function getProfileViewBasicLabelInfo(
     accountLabels: filterAccountLabels(profile.labels),
     profileLabels: filterProfileLabels(profile.labels),
     isMuted: profile.viewer?.muted || false,
+    isBlocking: !!profile.viewer?.blocking || false,
   }
 }
 
@@ -236,6 +281,45 @@ export function getEmbedLabels(embed?: Embed): Label[] {
   return []
 }
 
+export function getEmbedMuted(embed?: Embed): boolean {
+  if (!embed) {
+    return false
+  }
+  if (
+    AppBskyEmbedRecord.isView(embed) &&
+    AppBskyEmbedRecord.isViewRecord(embed.record)
+  ) {
+    return !!embed.record.author.viewer?.muted
+  }
+  return false
+}
+
+export function getEmbedBlocking(embed?: Embed): boolean {
+  if (!embed) {
+    return false
+  }
+  if (
+    AppBskyEmbedRecord.isView(embed) &&
+    AppBskyEmbedRecord.isViewRecord(embed.record)
+  ) {
+    return !!embed.record.author.viewer?.blocking
+  }
+  return false
+}
+
+export function getEmbedBlockedBy(embed?: Embed): boolean {
+  if (!embed) {
+    return false
+  }
+  if (
+    AppBskyEmbedRecord.isView(embed) &&
+    AppBskyEmbedRecord.isViewRecord(embed.record)
+  ) {
+    return !!embed.record.author.viewer?.blockedBy
+  }
+  return false
+}
+
 export function filterAccountLabels(labels?: Label[]): Label[] {
   if (!labels) {
     return []

src/lib/labeling/types.ts

@@ -17,12 +17,16 @@ export interface PostLabelInfo {
   accountLabels: Label[]
   profileLabels: Label[]
   isMuted: boolean
+  isBlocking: boolean
+  isBlockedBy: boolean
 }
 
 export interface ProfileLabelInfo {
   accountLabels: Label[]
   profileLabels: Label[]
   isMuted: boolean
+  isBlocking: boolean
+  isBlockedBy: boolean
 }
 
 export enum ModerationBehaviorCode {

src/lib/routes/types.ts

@@ -20,6 +20,7 @@ export type CommonNavigatorParams = {
   CommunityGuidelines: undefined
   CopyrightPolicy: undefined
   AppPasswords: undefined
+  BlockedAccounts: undefined
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {

src/routes.ts

@@ -14,6 +14,7 @@ export const router = new Router({
   Debug: '/sys/debug',
   Log: '/sys/log',
   AppPasswords: '/settings/app-passwords',
+  BlockedAccounts: '/settings/blocked-accounts',
   Support: '/support',
   PrivacyPolicy: '/support/privacy',
   TermsOfService: '/support/tos',

src/state/models/content/post-thread.ts

@@ -13,6 +13,9 @@ import {updateDataOptimistically} from 'lib/async/revertible'
 import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
 import {
   getEmbedLabels,
+  getEmbedMuted,
+  getEmbedBlocking,
+  getEmbedBlockedBy,
   filterAccountLabels,
   filterProfileLabels,
   getPostModeration,
@@ -30,7 +33,10 @@ export class PostThreadItemModel {
   // data
   post: AppBskyFeedDefs.PostView
   postRecord?: FeedPost.Record
-  parent?: PostThreadItemModel | AppBskyFeedDefs.NotFoundPost
+  parent?:
+    | PostThreadItemModel
+    | AppBskyFeedDefs.NotFoundPost
+    | AppBskyFeedDefs.BlockedPost
   replies?: (PostThreadItemModel | AppBskyFeedDefs.NotFoundPost)[]
   richText?: RichText
 
@@ -60,7 +66,18 @@ export class PostThreadItemModel {
       ),
       accountLabels: filterAccountLabels(this.post.author.labels),
       profileLabels: filterProfileLabels(this.post.author.labels),
-      isMuted: this.post.author.viewer?.muted || false,
+      isMuted:
+        this.post.author.viewer?.muted ||
+        getEmbedMuted(this.post.embed) ||
+        false,
+      isBlocking:
+        !!this.post.author.viewer?.blocking ||
+        getEmbedBlocking(this.post.embed) ||
+        false,
+      isBlockedBy:
+        !!this.post.author.viewer?.blockedBy ||
+        getEmbedBlockedBy(this.post.embed) ||
+        false,
     }
   }
 
@@ -114,6 +131,8 @@ export class PostThreadItemModel {
         this.parent = parentModel
       } else if (AppBskyFeedDefs.isNotFoundPost(v.parent)) {
         this.parent = v.parent
+      } else if (AppBskyFeedDefs.isBlockedPost(v.parent)) {
+        this.parent = v.parent
       }
     }
     // replies
@@ -218,6 +237,7 @@ export class PostThreadModel {
 
   // data
   thread?: PostThreadItemModel
+  isBlocked = false
 
   constructor(
     public rootStore: RootStoreModel,
@@ -377,11 +397,17 @@ export class PostThreadModel {
       this._replaceAll(res)
       this._xIdle()
     } catch (e: any) {
+      console.log(e)
       this._xIdle(e)
     }
   }
 
   _replaceAll(res: GetPostThread.Response) {
+    this.isBlocked = AppBskyFeedDefs.isBlockedPost(res.data.thread)
+    if (this.isBlocked) {
+      return
+    }
+    pruneReplies(res.data.thread)
     sortThread(res.data.thread)
     const thread = new PostThreadItemModel(
       this.rootStore,
@@ -399,7 +425,20 @@ export class PostThreadModel {
 type MaybePost =
   | AppBskyFeedDefs.ThreadViewPost
   | AppBskyFeedDefs.NotFoundPost
+  | AppBskyFeedDefs.BlockedPost
   | {[k: string]: unknown; $type: string}
+function pruneReplies(post: MaybePost) {
+  if (post.replies) {
+    post.replies = (post.replies as MaybePost[]).filter((reply: MaybePost) => {
+      if (reply.blocked) {
+        return false
+      }
+      pruneReplies(reply)
+      return true
+    })
+  }
+}
+
 function sortThread(post: MaybePost) {
   if (post.notFound) {
     return

src/state/models/content/profile.ts

@@ -1,5 +1,6 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {
+  AtUri,
   ComAtprotoLabelDefs,
   AppBskyActorGetProfile as GetProfile,
   AppBskyActorProfile,
@@ -23,6 +24,8 @@ export class ProfileViewerModel {
   muted?: boolean
   following?: string
   followedBy?: string
+  blockedBy?: boolean
+  blocking?: string
 
   constructor() {
     makeAutoObservable(this)
@@ -86,6 +89,8 @@ export class ProfileModel {
       accountLabels: filterAccountLabels(this.labels),
       profileLabels: filterProfileLabels(this.labels),
       isMuted: this.viewer?.muted || false,
+      isBlocking: !!this.viewer?.blocking || false,
+      isBlockedBy: !!this.viewer?.blockedBy || false,
     }
   }
 
@@ -185,6 +190,33 @@ export class ProfileModel {
     await this.refresh()
   }
 
+  async blockAccount() {
+    const res = await this.rootStore.agent.app.bsky.graph.block.create(
+      {
+        repo: this.rootStore.me.did,
+      },
+      {
+        subject: this.did,
+        createdAt: new Date().toISOString(),
+      },
+    )
+    this.viewer.blocking = res.uri
+    await this.refresh()
+  }
+
+  async unblockAccount() {
+    if (!this.viewer.blocking) {
+      return
+    }
+    const {rkey} = new AtUri(this.viewer.blocking)
+    await this.rootStore.agent.app.bsky.graph.block.delete({
+      repo: this.rootStore.me.did,
+      rkey,
+    })
+    this.viewer.blocking = undefined
+    await this.refresh()
+  }
+
   // state transitions
   // =
 

src/state/models/feeds/notifications.ts

@@ -111,6 +111,10 @@ export class NotificationsFeedItemModel {
         addedInfo?.profileLabels || [],
       ),
       isMuted: this.author.viewer?.muted || addedInfo?.isMuted || false,
+      isBlocking:
+        !!this.author.viewer?.blocking || addedInfo?.isBlocking || false,
+      isBlockedBy:
+        !!this.author.viewer?.blockedBy || addedInfo?.isBlockedBy || false,
     }
   }
 

src/state/models/feeds/posts.ts

@@ -23,7 +23,11 @@ import {updateDataOptimistically} from 'lib/async/revertible'
 import {PostLabelInfo, PostModeration} from 'lib/labeling/types'
 import {
   getEmbedLabels,
+  getEmbedMuted,
+  getEmbedBlocking,
+  getEmbedBlockedBy,
   getPostModeration,
+  mergePostModerations,
   filterAccountLabels,
   filterProfileLabels,
 } from 'lib/labeling/helpers'
@@ -97,7 +101,18 @@ export class PostsFeedItemModel {
       ),
       accountLabels: filterAccountLabels(this.post.author.labels),
       profileLabels: filterProfileLabels(this.post.author.labels),
-      isMuted: this.post.author.viewer?.muted || false,
+      isMuted:
+        this.post.author.viewer?.muted ||
+        getEmbedMuted(this.post.embed) ||
+        false,
+      isBlocking:
+        !!this.post.author.viewer?.blocking ||
+        getEmbedBlocking(this.post.embed) ||
+        false,
+      isBlockedBy:
+        !!this.post.author.viewer?.blockedBy ||
+        getEmbedBlockedBy(this.post.embed) ||
+        false,
     }
   }
 
@@ -240,6 +255,10 @@ export class PostsFeedSliceModel {
     return this.items[0]
   }
 
+  get moderation() {
+    return mergePostModerations(this.items.map(item => item.moderation))
+  }
+
   containsUri(uri: string) {
     return !!this.items.find(item => item.post.uri === uri)
   }
@@ -265,6 +284,8 @@ export class PostsFeedModel {
   isRefreshing = false
   hasNewLatest = false
   hasLoaded = false
+  isBlocking = false
+  isBlockedBy = false
   error = ''
   loadMoreError = ''
   params: GetTimeline.QueryParams | GetAuthorFeed.QueryParams
@@ -553,6 +574,8 @@ export class PostsFeedModel {
     this.isLoading = false
     this.isRefreshing = false
     this.hasLoaded = true
+    this.isBlocking = error instanceof GetAuthorFeed.BlockedActorError
+    this.isBlockedBy = error instanceof GetAuthorFeed.BlockedByActorError
     this.error = cleanError(error)
     this.loadMoreError = cleanError(loadMoreError)
     if (error) {

src/state/models/lists/blocked-accounts.ts

@@ -0,0 +1,106 @@
+import {makeAutoObservable} from 'mobx'
+import {
+  AppBskyGraphGetBlocks as GetBlocks,
+  AppBskyActorDefs as ActorDefs,
+} from '@atproto/api'
+import {RootStoreModel} from '../root-store'
+import {cleanError} from 'lib/strings/errors'
+import {bundleAsync} from 'lib/async/bundle'
+
+const PAGE_SIZE = 30
+
+export class BlockedAccountsModel {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  hasMore = true
+  loadMoreCursor?: string
+
+  // data
+  blocks: ActorDefs.ProfileView[] = []
+
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+      },
+      {autoBind: true},
+    )
+  }
+
+  get hasContent() {
+    return this.blocks.length > 0
+  }
+
+  get hasError() {
+    return this.error !== ''
+  }
+
+  get isEmpty() {
+    return this.hasLoaded && !this.hasContent
+  }
+
+  // public api
+  // =
+
+  async refresh() {
+    return this.loadMore(true)
+  }
+
+  loadMore = bundleAsync(async (replace: boolean = false) => {
+    if (!replace && !this.hasMore) {
+      return
+    }
+    this._xLoading(replace)
+    try {
+      const res = await this.rootStore.agent.app.bsky.graph.getBlocks({
+        limit: PAGE_SIZE,
+        cursor: replace ? undefined : this.loadMoreCursor,
+      })
+      if (replace) {
+        this._replaceAll(res)
+      } else {
+        this._appendAll(res)
+      }
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(e)
+    }
+  })
+
+  // state transitions
+  // =
+
+  _xLoading(isRefreshing = false) {
+    this.isLoading = true
+    this.isRefreshing = isRefreshing
+    this.error = ''
+  }
+
+  _xIdle(err?: any) {
+    this.isLoading = false
+    this.isRefreshing = false
+    this.hasLoaded = true
+    this.error = cleanError(err)
+    if (err) {
+      this.rootStore.log.error('Failed to fetch user followers', err)
+    }
+  }
+
+  // helper functions
+  // =
+
+  _replaceAll(res: GetBlocks.Response) {
+    this.blocks = []
+    this._appendAll(res)
+  }
+
+  _appendAll(res: GetBlocks.Response) {
+    this.loadMoreCursor = res.data.cursor
+    this.hasMore = !!this.loadMoreCursor
+    this.blocks = this.blocks.concat(res.data.blocks)
+  }
+}

src/view/com/composer/Composer.tsx

@@ -190,11 +190,7 @@ export const ComposePost = observer(function ComposePost({
 
   const canPost = graphemeLength <= MAX_GRAPHEME_LENGTH
 
-  const selectTextInputPlaceholder = replyTo
+  const selectTextInputPlaceholder = replyTo ? 'Write your reply' : "What's up?"
-    ? 'Write your reply'
-    : gallery.isEmpty
-    ? 'Write a comment'
-    : "What's up?"
 
   const canSelectImages = gallery.size < 4
   const viewStyles = {

src/view/com/modals/Confirm.tsx

@@ -11,6 +11,7 @@ import {s, colors} from 'lib/styles'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
 import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
 
 export const snapPoints = [300]
 
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 10,
-    paddingBottom: 60,
+    paddingBottom: isDesktopWeb ? 0 : 60,
   },
   title: {
     textAlign: 'center',

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

@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
+import {AppBskyFeedDefs} from '@atproto/api'
 import {CenteredView, FlatList} from '../util/Views'
 import {
   PostThreadModel,
@@ -27,11 +28,17 @@ import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 
 const REPLY_PROMPT = {_reactKey: '__reply__', _isHighlightedPost: false}
+const DELETED = {_reactKey: '__deleted__', _isHighlightedPost: false}
+const BLOCKED = {_reactKey: '__blocked__', _isHighlightedPost: false}
 const BOTTOM_COMPONENT = {
   _reactKey: '__bottom_component__',
   _isHighlightedPost: false,
 }
-type YieldedItem = PostThreadItemModel | typeof REPLY_PROMPT
+type YieldedItem =
+  | PostThreadItemModel
+  | typeof REPLY_PROMPT
+  | typeof DELETED
+  | typeof BLOCKED
 
 export const PostThread = observer(function PostThread({
   uri,
@@ -103,6 +110,22 @@ export const PostThread = observer(function PostThread({
     ({item}: {item: YieldedItem}) => {
       if (item === REPLY_PROMPT) {
         return <ComposePrompt onPressCompose={onPressReply} />
+      } else if (item === DELETED) {
+        return (
+          <View style={[pal.border, pal.viewLight, styles.missingItem]}>
+            <Text type="lg-bold" style={pal.textLight}>
+              Deleted post.
+            </Text>
+          </View>
+        )
+      } else if (item === BLOCKED) {
+        return (
+          <View style={[pal.border, pal.viewLight, styles.missingItem]}>
+            <Text type="lg-bold" style={pal.textLight}>
+              Blocked post.
+            </Text>
+          </View>
+        )
       } else if (item === BOTTOM_COMPONENT) {
         // HACK
         // due to some complexities with how flatlist works, this is the easiest way
@@ -177,6 +200,30 @@ export const PostThread = observer(function PostThread({
       </CenteredView>
     )
   }
+  if (view.isBlocked) {
+    return (
+      <CenteredView>
+        <View style={[pal.view, pal.border, styles.notFoundContainer]}>
+          <Text type="title-lg" style={[pal.text, s.mb5]}>
+            Post hidden
+          </Text>
+          <Text type="md" style={[pal.text, s.mb10]}>
+            You have blocked the author or you have been blocked by the author.
+          </Text>
+          <TouchableOpacity onPress={onPressBack}>
+            <Text type="2xl" style={pal.link}>
+              <FontAwesomeIcon
+                icon="angle-left"
+                style={[pal.link as FontAwesomeIconStyle, s.mr5]}
+                size={14}
+              />
+              Back
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </CenteredView>
+    )
+  }
 
   // loaded
   // =
@@ -208,8 +255,10 @@ function* flattenThread(
   isAscending = false,
 ): Generator<YieldedItem, void> {
   if (post.parent) {
-    if ('notFound' in post.parent && post.parent.notFound) {
+    if (AppBskyFeedDefs.isNotFoundPost(post.parent)) {
-      // TODO render not found
+      yield DELETED
+    } else if (AppBskyFeedDefs.isBlockedPost(post.parent)) {
+      yield BLOCKED
     } else {
       yield* flattenThread(post.parent as PostThreadItemModel, true)
     }
@@ -220,8 +269,8 @@ function* flattenThread(
   }
   if (post.replies?.length) {
     for (const reply of post.replies) {
-      if ('notFound' in reply && reply.notFound) {
+      if (AppBskyFeedDefs.isNotFoundPost(reply)) {
-        // TODO render not found
+        yield DELETED
       } else {
         yield* flattenThread(reply as PostThreadItemModel)
       }
@@ -238,6 +287,11 @@ const styles = StyleSheet.create({
     paddingVertical: 14,
     borderRadius: 6,
   },
+  missingItem: {
+    borderTop: 1,
+    paddingHorizontal: 18,
+    paddingVertical: 18,
+  },
   bottomBorder: {
     borderBottomWidth: 1,
   },

src/view/com/posts/FeedSlice.tsx

@@ -7,6 +7,7 @@ import {Text} from '../util/text/Text'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {FeedItem} from './FeedItem'
 import {usePalette} from 'lib/hooks/usePalette'
+import {ModerationBehaviorCode} from 'lib/labeling/types'
 
 export function FeedSlice({
   slice,
@@ -17,6 +18,9 @@ export function FeedSlice({
   showFollowBtn?: boolean
   ignoreMuteFor?: string
 }) {
+  if (slice.moderation.list.behavior === ModerationBehaviorCode.Hide) {
+    return null
+  }
   if (slice.isThread && slice.items.length > 3) {
     const last = slice.items.length - 1
     return (

src/view/com/profile/ProfileCard.tsx

@@ -23,6 +23,7 @@ export const ProfileCard = observer(
     noBg,
     noBorder,
     followers,
+    overrideModeration,
     renderButton,
   }: {
     testID?: string
@@ -30,6 +31,7 @@ export const ProfileCard = observer(
     noBg?: boolean
     noBorder?: boolean
     followers?: AppBskyActorDefs.ProfileView[] | undefined
+    overrideModeration?: boolean
     renderButton?: () => JSX.Element
   }) => {
     const store = useStores()
@@ -40,7 +42,10 @@ export const ProfileCard = observer(
       getProfileViewBasicLabelInfo(profile),
     )
 
-    if (moderation.list.behavior === ModerationBehaviorCode.Hide) {
+    if (
+      moderation.list.behavior === ModerationBehaviorCode.Hide &&
+      !overrideModeration
+    ) {
       return null
     }
 

src/view/com/profile/ProfileHeader.tsx

@@ -96,11 +96,8 @@ export const ProfileHeader = observer(
   },
 )
 
-const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
+const ProfileHeaderLoaded = observer(
-  view,
+  ({view, onRefreshAll, hideBackButton = false}: Props) => {
-  onRefreshAll,
-  hideBackButton = false,
-}: Props) {
     const pal = usePalette('default')
     const store = useStores()
     const navigation = useNavigation<NavigationProp>()
@@ -176,6 +173,46 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
       }
     }, [track, view, store])
 
+    const onPressBlockAccount = React.useCallback(async () => {
+      track('ProfileHeader:BlockAccountButtonClicked')
+      store.shell.openModal({
+        name: 'confirm',
+        title: 'Block Account',
+        message:
+          'Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you. You will not see their content and they will be prevented from seeing yours.',
+        onPressConfirm: async () => {
+          try {
+            await view.blockAccount()
+            onRefreshAll()
+            Toast.show('Account blocked')
+          } catch (e: any) {
+            store.log.error('Failed to block account', e)
+            Toast.show(`There was an issue! ${e.toString()}`)
+          }
+        },
+      })
+    }, [track, view, store, onRefreshAll])
+
+    const onPressUnblockAccount = React.useCallback(async () => {
+      track('ProfileHeader:UnblockAccountButtonClicked')
+      store.shell.openModal({
+        name: 'confirm',
+        title: 'Unblock Account',
+        message:
+          'The account will be able to interact with you after unblocking. (You can always block again in the future.)',
+        onPressConfirm: async () => {
+          try {
+            await view.unblockAccount()
+            onRefreshAll()
+            Toast.show('Account unblocked')
+          } catch (e: any) {
+            store.log.error('Failed to block unaccount', e)
+            Toast.show(`There was an issue! ${e.toString()}`)
+          }
+        },
+      })
+    }, [track, view, store, onRefreshAll])
+
     const onPressReportAccount = React.useCallback(() => {
       track('ProfileHeader:ReportAccountButtonClicked')
       store.shell.openModal({
@@ -191,16 +228,28 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
     const dropdownItems: DropdownItem[] = React.useMemo(() => {
       let items: DropdownItem[] = [
         {
-        testID: 'profileHeaderDropdownSahreBtn',
+          testID: 'profileHeaderDropdownShareBtn',
           label: 'Share',
           onPress: onPressShare,
         },
       ]
       if (!isMe) {
+        items.push({sep: true})
+        if (!view.viewer.blocking) {
           items.push({
             testID: 'profileHeaderDropdownMuteBtn',
             label: view.viewer.muted ? 'Unmute Account' : 'Mute Account',
-        onPress: view.viewer.muted ? onPressUnmuteAccount : onPressMuteAccount,
+            onPress: view.viewer.muted
+              ? onPressUnmuteAccount
+              : onPressMuteAccount,
+          })
+        }
+        items.push({
+          testID: 'profileHeaderDropdownBlockBtn',
+          label: view.viewer.blocking ? 'Unblock Account' : 'Block Account',
+          onPress: view.viewer.blocking
+            ? onPressUnblockAccount
+            : onPressBlockAccount,
         })
         items.push({
           testID: 'profileHeaderDropdownReportBtn',
@@ -212,11 +261,17 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
     }, [
       isMe,
       view.viewer.muted,
+      view.viewer.blocking,
       onPressShare,
       onPressUnmuteAccount,
       onPressMuteAccount,
+      onPressUnblockAccount,
+      onPressBlockAccount,
       onPressReportAccount,
     ])
+
+    const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
+
     return (
       <View style={pal.view}>
         <UserBanner banner={view.banner} moderation={view.moderation.avatar} />
@@ -231,7 +286,16 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
                   Edit Profile
                 </Text>
               </TouchableOpacity>
-          ) : (
+            ) : view.viewer.blocking ? (
+              <TouchableOpacity
+                testID="unblockBtn"
+                onPress={onPressUnblockAccount}
+                style={[styles.btn, styles.mainBtn, pal.btn]}>
+                <Text type="button" style={[pal.text, s.bold]}>
+                  Unblock
+                </Text>
+              </TouchableOpacity>
+            ) : !view.viewer.blockedBy ? (
               <>
                 {store.me.follows.getFollowState(view.did) ===
                 FollowState.Following ? (
@@ -263,7 +327,7 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
                   </TouchableOpacity>
                 )}
               </>
-          )}
+            ) : null}
             {dropdownItems?.length ? (
               <DropdownButton
                 testID="profileHeaderDropdownBtn"
@@ -283,7 +347,7 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
             </Text>
           </View>
           <View style={styles.handleLine}>
-          {view.viewer.followedBy ? (
+            {view.viewer.followedBy && !blockHide ? (
               <View style={[styles.pill, pal.btn, s.mr5]}>
                 <Text type="xs" style={[pal.text]}>
                   Follows you
@@ -292,6 +356,8 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
             ) : undefined}
             <Text style={pal.textLight}>@{view.handle}</Text>
           </View>
+          {!blockHide && (
+            <>
               <View style={styles.metricsLine}>
                 <TouchableOpacity
                   testID="profileHeaderFollowersButton"
@@ -332,11 +398,23 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
                   richText={view.descriptionRichText}
                 />
               ) : undefined}
+            </>
+          )}
           <ProfileHeaderWarnings moderation={view.moderation.view} />
-        {view.viewer.muted ? (
+          <View style={styles.moderationLines}>
+            {view.viewer.blocking ? (
+              <View
+                testID="profileHeaderBlockedNotice"
+                style={[styles.moderationNotice, pal.view, pal.border]}>
+                <FontAwesomeIcon icon="ban" style={[pal.text, s.mr5]} />
+                <Text type="md" style={[s.mr2, pal.text]}>
+                  Account blocked
+                </Text>
+              </View>
+            ) : view.viewer.muted ? (
               <View
                 testID="profileHeaderMutedNotice"
-            style={[styles.detailLine, pal.btn, s.p5]}>
+                style={[styles.moderationNotice, pal.view, pal.border]}>
                 <FontAwesomeIcon
                   icon={['far', 'eye-slash']}
                   style={[pal.text, s.mr5]}
@@ -346,9 +424,22 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
                 </Text>
               </View>
             ) : undefined}
+            {view.viewer.blockedBy && (
+              <View
+                testID="profileHeaderBlockedNotice"
+                style={[styles.moderationNotice, pal.view, pal.border]}>
+                <FontAwesomeIcon icon="ban" style={[pal.text, s.mr5]} />
+                <Text type="md" style={[s.mr2, pal.text]}>
+                  This account has blocked you
+                </Text>
+              </View>
+            )}
+          </View>
         </View>
         {!isDesktopWeb && !hideBackButton && (
-        <TouchableWithoutFeedback onPress={onPressBack} hitSlop={BACK_HITSLOP}>
+          <TouchableWithoutFeedback
+            onPress={onPressBack}
+            hitSlop={BACK_HITSLOP}>
             <View style={styles.backBtnWrapper}>
               <BlurView style={styles.backBtn} blurType="dark">
                 <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
@@ -360,7 +451,11 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
           testID="profileHeaderAviButton"
           onPress={onPressAvi}>
           <View
-          style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
+            style={[
+              pal.view,
+              {borderColor: pal.colors.background},
+              styles.avi,
+            ]}>
             <UserAvatar
               size={80}
               avatar={view.avatar}
@@ -370,7 +465,8 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
         </TouchableWithoutFeedback>
       </View>
     )
-})
+  },
+)
 
 const styles = StyleSheet.create({
   banner: {
@@ -460,6 +556,19 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
   },
 
+  moderationLines: {
+    gap: 6,
+  },
+
+  moderationNotice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+
   br40: {borderRadius: 40},
   br50: {borderRadius: 50},
 })

src/view/index.ts

@@ -15,6 +15,7 @@ import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotate
 import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate'
 import {faAt} from '@fortawesome/free-solid-svg-icons/faAt'
 import {faBars} from '@fortawesome/free-solid-svg-icons/faBars'
+import {faBan} from '@fortawesome/free-solid-svg-icons/faBan'
 import {faBell} from '@fortawesome/free-solid-svg-icons/faBell'
 import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell'
 import {faBookmark} from '@fortawesome/free-solid-svg-icons/faBookmark'
@@ -90,6 +91,7 @@ export function setup() {
     faArrowRotateLeft,
     faArrowsRotate,
     faAt,
+    faBan,
     faBars,
     faBell,
     farBell,

src/view/screens/AppPasswords.tsx

@@ -27,7 +27,7 @@ export const AppPasswords = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        screen('Settings')
+        screen('AppPasswords')
         store.shell.setMinimalShellMode(false)
       }, [screen, store]),
     )

src/view/screens/BlockedAccounts.tsx

@@ -0,0 +1,172 @@
+import React, {useMemo} from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  View,
+} from 'react-native'
+import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {Text} from '../com/util/text/Text'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {observer} from 'mobx-react-lite'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {BlockedAccountsModel} from 'state/models/lists/blocked-accounts'
+import {useAnalytics} from 'lib/analytics'
+import {useFocusEffect} from '@react-navigation/native'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'BlockedAccounts'>
+export const BlockedAccounts = withAuthRequired(
+  observer(({}: Props) => {
+    const pal = usePalette('default')
+    const store = useStores()
+    const {screen} = useAnalytics()
+    const blockedAccounts = useMemo(
+      () => new BlockedAccountsModel(store),
+      [store],
+    )
+
+    useFocusEffect(
+      React.useCallback(() => {
+        screen('BlockedAccounts')
+        store.shell.setMinimalShellMode(false)
+        blockedAccounts.refresh()
+      }, [screen, store, blockedAccounts]),
+    )
+
+    const onRefresh = React.useCallback(() => {
+      blockedAccounts.refresh()
+    }, [blockedAccounts])
+    const onEndReached = React.useCallback(() => {
+      blockedAccounts
+        .loadMore()
+        .catch(err =>
+          store.log.error('Failed to load more blocked accounts', err),
+        )
+    }, [blockedAccounts, store])
+
+    const renderItem = ({
+      item,
+      index,
+    }: {
+      item: ActorDefs.ProfileView
+      index: number
+    }) => (
+      <ProfileCard
+        testID={`blockedAccount-${index}`}
+        key={item.did}
+        profile={item}
+        overrideModeration
+      />
+    )
+    return (
+      <CenteredView
+        style={[
+          styles.container,
+          isDesktopWeb && styles.containerDesktop,
+          pal.view,
+          pal.border,
+        ]}
+        testID="blockedAccountsScreen">
+        <ViewHeader title="Blocked Accounts" showOnDesktop />
+        <Text
+          type="sm"
+          style={[
+            styles.description,
+            pal.text,
+            isDesktopWeb && styles.descriptionDesktop,
+          ]}>
+          Blocked accounts cannot reply in your threads, mention you, or
+          otherwise interact with you. You will not see their content and they
+          will be prevented from seeing yours.
+        </Text>
+        {!blockedAccounts.hasContent ? (
+          <View style={[pal.border, !isDesktopWeb && styles.flex1]}>
+            <View style={[styles.empty, pal.viewLight]}>
+              <Text type="lg" style={[pal.text, styles.emptyText]}>
+                You have not blocked any accounts yet. To block an account, go
+                to their profile and selected "Block account" from the menu on
+                their account.
+              </Text>
+            </View>
+          </View>
+        ) : (
+          <FlatList
+            style={[!isDesktopWeb && styles.flex1]}
+            data={blockedAccounts.blocks}
+            keyExtractor={(item: ActorDefs.ProfileView) => item.did}
+            refreshControl={
+              <RefreshControl
+                refreshing={blockedAccounts.isRefreshing}
+                onRefresh={onRefresh}
+                tintColor={pal.colors.text}
+                titleColor={pal.colors.text}
+              />
+            }
+            onEndReached={onEndReached}
+            renderItem={renderItem}
+            initialNumToRender={15}
+            ListFooterComponent={() => (
+              <View style={styles.footer}>
+                {blockedAccounts.isLoading && <ActivityIndicator />}
+              </View>
+            )}
+            extraData={blockedAccounts.isLoading}
+            // @ts-ignore our .web version only -prf
+            desktopFixedHeight
+          />
+        )}
+      </CenteredView>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isDesktopWeb ? 0 : 100,
+  },
+  containerDesktop: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 12,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 30,
+    marginBottom: 14,
+  },
+  descriptionDesktop: {
+    marginTop: 14,
+  },
+
+  flex1: {
+    flex: 1,
+  },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
+  emptyText: {
+    textAlign: 'center',
+  },
+
+  footer: {
+    height: 200,
+    paddingTop: 20,
+  },
+})

src/view/screens/Profile.tsx

@@ -116,6 +116,24 @@ export const ProfileScreen = withAuthRequired(
         } else if (item === ProfileUiModel.LOADING_ITEM) {
           return <PostFeedLoadingPlaceholder />
         } else if (item._reactKey === '__error__') {
+          if (uiState.feed.isBlocking) {
+            return (
+              <EmptyState
+                icon="ban"
+                message="Posts hidden"
+                style={styles.emptyState}
+              />
+            )
+          }
+          if (uiState.feed.isBlockedBy) {
+            return (
+              <EmptyState
+                icon="ban"
+                message="Posts hidden"
+                style={styles.emptyState}
+              />
+            )
+          }
           return (
             <View style={s.p5}>
               <ErrorMessage
@@ -137,7 +155,12 @@ export const ProfileScreen = withAuthRequired(
         }
         return <View />
       },
-      [onPressTryAgain, uiState.profile.did],
+      [
+        onPressTryAgain,
+        uiState.profile.did,
+        uiState.feed.isBlocking,
+        uiState.feed.isBlockedBy,
+      ],
     )
 
     return (

src/view/screens/Settings.tsx

@@ -255,7 +255,7 @@ export const SettingsScreen = withAuthRequired(
           <View style={styles.spacer20} />
 
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
-            Advanced
+            Moderation
           </Text>
           <TouchableOpacity
             testID="contentFilteringBtn"
@@ -271,6 +271,26 @@ export const SettingsScreen = withAuthRequired(
               Content moderation
             </Text>
           </TouchableOpacity>
+          <Link
+            testID="blockedAccountsBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            href="/settings/blocked-accounts">
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon="ban"
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+            <Text type="lg" style={pal.text}>
+              Blocked accounts
+            </Text>
+          </Link>
+
+          <View style={styles.spacer20} />
+
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
+            Advanced
+          </Text>
           <Link
             testID="appPasswordBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}

yarn.lock

@@ -30,10 +30,10 @@
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
-"@atproto/api@0.2.10":
+"@atproto/api@0.2.11":
-  version "0.2.10"
+  version "0.2.11"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.2.10.tgz#19c4d695f88ab4e45e4c9f2f4db5fad61590a3d2"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.2.11.tgz#53b70b0f4942b2e2dd5cb46433f133cde83917bf"
-  integrity sha512-97UBtvIXhsgNO7bXhHk0JwDNwyqTcL1N0JT2rnXjUeLKNf2hDvomFtI50Y4RFU942uUS5W5VtM+JJuZO5Ryw5w==
+  integrity sha512-5JY1Ii/81Bcy1ZTGRqALsaOdc8fIJTSlMNoSptpGH73uAPQE93weDrb8sc3KoxWi1G2ss3IIBSLPJWxALocJSQ==
   dependencies:
     "@atproto/common-web" "*"
     "@atproto/uri" "*"
@@ -122,10 +122,10 @@
   resolved "https://registry.yarnpkg.com/@atproto/nsid/-/nsid-0.0.1.tgz#0cdc00cefe8f0b1385f352b9f57b3ad37fff09a4"
   integrity sha512-t5M6/CzWBVYoBbIvfKDpqPj/+ZmyoK9ydZSStcTXosJ27XXwOPhz0VDUGKK2SM9G5Y7TPes8S5KTAU0UdVYFCw==
 
-"@atproto/pds@^0.1.4":
+"@atproto/pds@^0.1.5":
-  version "0.1.4"
+  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@atproto/pds/-/pds-0.1.4.tgz#43379912e127d6d4f79a514e785dab9b54fd7810"
+  resolved "https://registry.yarnpkg.com/@atproto/pds/-/pds-0.1.5.tgz#59411497f2d85b6706ab793e8f7f618bdb8c51a3"
-  integrity sha512-vrFYL+2nNm/0fJyUIgFK9h9FRuEf4rHjU/LJV7/nBO+HA3hP3U/mTgvVxuuHHvcRsRL5AVpAJR0xWFUoYsFmmg==
+  integrity sha512-QtTf2mbqO5MEsrXPTFU43dSb0WT3TzaLw5mL++9w18CZDMvdmv2uJXKeaSiU+u3WJEtRpRs5hoLSdfrJ2i3PuA==
   dependencies:
     "@atproto/api" "*"
     "@atproto/common" "*"
@@ -154,7 +154,7 @@
     nodemailer "^6.8.0"
     nodemailer-html-to-text "^3.2.0"
     p-queue "^6.6.2"
-    pg "^8.8.0"
+    pg "^8.10.0"
     pino "^8.6.1"
     pino-http "^8.2.1"
     sharp "^0.31.2"
@@ -13419,7 +13419,7 @@ pg-types@^2.1.0:
     postgres-date "~1.0.4"
     postgres-interval "^1.1.0"
 
-pg@^8.8.0, pg@^8.9.0:
+pg@^8.10.0, pg@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/pg/-/pg-8.10.0.tgz#5b8379c9b4a36451d110fc8cd98fc325fe62ad24"
   integrity sha512-ke7o7qSTMb47iwzOSaZMfeR7xToFdkE71ifIipOAAaLIM0DYzfOAXlgFFmYUIE2BcJtvnVlGCID84ZzCegE8CQ==