Add first round of labeling tools (#467)

* Rework notifications to sync locally in full and give users better control

* Fix positioning of load more btn on web

* Improve behavior of load more notifications btn

* Fix to post rendering

* Fix notification fetch abort condition

* Add start of post-hiding by labels

* Create a standard postcontainer and improve show/hide UI on posts

* Add content hiding to expanded post form

* Improve label rendering to give more context to users when appropriate

* Fix rendering bug

* Add user/profile labeling

* Implement content filtering preferences

* Filter notifications by content prefs

* Update test-pds config

* Bump deps

jest/test-pds.ts

@@ -79,6 +79,8 @@ export async function createServer(
     maxSubscriptionBuffer: 200,
     repoBackfillLimitMs: HOUR,
     userInviteInterval: 1,
+    labelerDid: 'did:example:labeler',
+    labelerKeywords: {},
   })
 
   const db =

package.json

@@ -21,7 +21,7 @@
     "e2e:run": "detox test --configuration ios.sim.debug --take-screenshots all"
   },
   "dependencies": {
-    "@atproto/api": "0.2.5",
+    "@atproto/api": "0.2.6",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@expo/webpack-config": "^18.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -123,7 +123,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/pds": "^0.1.3",
+    "@atproto/pds": "^0.1.4",
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",

src/lib/labeling/const.ts

@@ -0,0 +1,50 @@
+import {LabelPreferencesModel} from 'state/models/ui/preferences'
+
+export interface LabelValGroup {
+  id: keyof LabelPreferencesModel | 'illegal' | 'unknown'
+  title: string
+  values: string[]
+}
+
+export const ILLEGAL_LABEL_GROUP: LabelValGroup = {
+  id: 'illegal',
+  title: 'Illegal Content',
+  values: ['csam', 'dmca-violation', 'nudity-nonconsentual'],
+}
+
+export const UNKNOWN_LABEL_GROUP: LabelValGroup = {
+  id: 'unknown',
+  title: 'Unknown Label',
+  values: [],
+}
+
+export const CONFIGURABLE_LABEL_GROUPS: Record<
+  keyof LabelPreferencesModel,
+  LabelValGroup
+> = {
+  nsfw: {
+    id: 'nsfw',
+    title: 'Sexual Content',
+    values: ['porn', 'nudity', 'sexual'],
+  },
+  gore: {
+    id: 'gore',
+    title: 'Violent / Bloody',
+    values: ['gore', 'self-harm', 'torture'],
+  },
+  hate: {
+    id: 'hate',
+    title: 'Political Hate-Groups',
+    values: ['icon-kkk', 'icon-nazi', 'icon-confederate'],
+  },
+  spam: {
+    id: 'spam',
+    title: 'Spam',
+    values: ['spam'],
+  },
+  impersonation: {
+    id: 'impersonation',
+    title: 'Impersonation',
+    values: ['impersonation'],
+  },
+}

src/lib/labeling/helpers.ts

@@ -0,0 +1,19 @@
+import {
+  LabelValGroup,
+  CONFIGURABLE_LABEL_GROUPS,
+  ILLEGAL_LABEL_GROUP,
+  UNKNOWN_LABEL_GROUP,
+} from './const'
+
+export function getLabelValueGroup(labelVal: string): LabelValGroup {
+  let id: keyof typeof CONFIGURABLE_LABEL_GROUPS
+  for (id in CONFIGURABLE_LABEL_GROUPS) {
+    if (ILLEGAL_LABEL_GROUP.values.includes(labelVal)) {
+      return ILLEGAL_LABEL_GROUP
+    }
+    if (CONFIGURABLE_LABEL_GROUPS[id].values.includes(labelVal)) {
+      return CONFIGURABLE_LABEL_GROUPS[id]
+    }
+  }
+  return UNKNOWN_LABEL_GROUP
+}

src/state/models/content/profile.ts

@@ -1,6 +1,7 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {PickedMedia} from 'lib/media/picker'
 import {
+  ComAtprotoLabelDefs,
   AppBskyActorGetProfile as GetProfile,
   AppBskyActorProfile,
   RichText,
@@ -41,6 +42,7 @@ export class ProfileModel {
   followersCount: number = 0
   followsCount: number = 0
   postsCount: number = 0
+  labels?: ComAtprotoLabelDefs.Label[] = undefined
   viewer = new ProfileViewerModel()
 
   // added data
@@ -210,6 +212,7 @@ export class ProfileModel {
     this.followersCount = res.data.followersCount || 0
     this.followsCount = res.data.followsCount || 0
     this.postsCount = res.data.postsCount || 0
+    this.labels = res.data.labels
     if (res.data.viewer) {
       Object.assign(this.viewer, res.data.viewer)
       this.rootStore.me.follows.hydrate(this.did, res.data.viewer.following)

src/state/models/feeds/notifications.ts

@@ -6,6 +6,7 @@ import {
   AppBskyFeedRepost,
   AppBskyFeedLike,
   AppBskyGraphFollow,
+  ComAtprotoLabelDefs,
 } from '@atproto/api'
 import AwaitLock from 'await-lock'
 import {bundleAsync} from 'lib/async/bundle'
@@ -20,6 +21,8 @@ const MS_2DAY = MS_1HR * 48
 
 let _idCounter = 0
 
+type CondFn = (notif: ListNotifications.Notification) => boolean
+
 export interface GroupedNotification extends ListNotifications.Notification {
   additional?: ListNotifications.Notification[]
 }
@@ -47,6 +50,7 @@ export class NotificationsFeedItemModel {
   record?: SupportedRecord
   isRead: boolean = false
   indexedAt: string = ''
+  labels?: ComAtprotoLabelDefs.Label[]
   additional?: NotificationsFeedItemModel[]
 
   // additional data
@@ -71,6 +75,7 @@ export class NotificationsFeedItemModel {
     this.record = this.toSupportedRecord(v.record)
     this.isRead = v.isRead
     this.indexedAt = v.indexedAt
+    this.labels = v.labels
     if (v.additional?.length) {
       this.additional = []
       for (const add of v.additional) {
@@ -83,6 +88,27 @@ export class NotificationsFeedItemModel {
     }
   }
 
+  get numUnreadInGroup(): number {
+    if (this.additional?.length) {
+      return (
+        this.additional.reduce(
+          (acc, notif) => acc + notif.numUnreadInGroup,
+          0,
+        ) + (this.isRead ? 0 : 1)
+      )
+    }
+    return this.isRead ? 0 : 1
+  }
+
+  markGroupRead() {
+    if (this.additional?.length) {
+      for (const notif of this.additional) {
+        notif.markGroupRead()
+      }
+    }
+    this.isRead = true
+  }
+
   get isLike() {
     return this.reason === 'like'
   }
@@ -192,7 +218,6 @@ export class NotificationsFeedModel {
   hasLoaded = false
   error = ''
   loadMoreError = ''
-  params: ListNotifications.QueryParams
   hasMore = true
   loadMoreCursor?: string
 
@@ -201,25 +226,21 @@ export class NotificationsFeedModel {
 
   // data
   notifications: NotificationsFeedItemModel[] = []
+  queuedNotifications: undefined | ListNotifications.Notification[] = undefined
   unreadCount = 0
 
   // this is used to help trigger push notifications
   mostRecentNotificationUri: string | undefined
 
-  constructor(
+  constructor(public rootStore: RootStoreModel) {
-    public rootStore: RootStoreModel,
-    params: ListNotifications.QueryParams,
-  ) {
     makeAutoObservable(
       this,
       {
         rootStore: false,
-        params: false,
         mostRecentNotificationUri: false,
       },
       {autoBind: true},
     )
-    this.params = params
   }
 
   get hasContent() {
@@ -234,6 +255,10 @@ export class NotificationsFeedModel {
     return this.hasLoaded && !this.hasContent
   }
 
+  get hasNewLatest() {
+    return this.queuedNotifications && this.queuedNotifications?.length > 0
+  }
+
   // public api
   // =
 
@@ -258,19 +283,17 @@ export class NotificationsFeedModel {
    * Load for first render
    */
   setup = bundleAsync(async (isRefreshing: boolean = false) => {
-    this.rootStore.log.debug('NotificationsModel:setup', {isRefreshing})
+    this.rootStore.log.debug('NotificationsModel:refresh', {isRefreshing})
-    if (isRefreshing) {
-      this.isRefreshing = true // set optimistically for UI
-    }
     await this.lock.acquireAsync()
     try {
       this._xLoading(isRefreshing)
       try {
-        const params = Object.assign({}, this.params, {
+        const res = await this._fetchUntil(notif => notif.isRead, {
-          limit: PAGE_SIZE,
+          breakAt: 'page',
         })
-        const res = await this.rootStore.agent.listNotifications(params)
         await this._replaceAll(res)
+        this._setQueued(undefined)
+        this._countUnread()
         this._xIdle()
       } catch (e: any) {
         this._xIdle(e)
@@ -284,9 +307,65 @@ export class NotificationsFeedModel {
    * Reset and load
    */
   async refresh() {
+    this.isRefreshing = true // set optimistically for UI
     return this.setup(true)
   }
 
+  /**
+   * Sync the next set of notifications to show
+   * returns true if the number changed
+   */
+  syncQueue = bundleAsync(async () => {
+    this.rootStore.log.debug('NotificationsModel:syncQueue')
+    await this.lock.acquireAsync()
+    try {
+      const res = await this._fetchUntil(
+        notif =>
+          this.notifications.length
+            ? isEq(notif, this.notifications[0])
+            : notif.isRead,
+        {breakAt: 'record'},
+      )
+      this._setQueued(res.data.notifications)
+      this._countUnread()
+    } catch (e) {
+      this.rootStore.log.error('NotificationsModel:syncQueue failed', {e})
+    } finally {
+      this.lock.release()
+    }
+  })
+
+  /**
+   *
+   */
+  processQueue = bundleAsync(async () => {
+    this.rootStore.log.debug('NotificationsModel:processQueue')
+    if (!this.queuedNotifications) {
+      return
+    }
+    this.isRefreshing = true
+    await this.lock.acquireAsync()
+    try {
+      runInAction(() => {
+        this.mostRecentNotificationUri = this.queuedNotifications?.[0].uri
+      })
+      const itemModels = await this._processNotifications(
+        this.queuedNotifications,
+      )
+      this._setQueued(undefined)
+      runInAction(() => {
+        this.notifications = itemModels.concat(this.notifications)
+      })
+    } catch (e) {
+      this.rootStore.log.error('NotificationsModel:processQueue failed', {e})
+    } finally {
+      runInAction(() => {
+        this.isRefreshing = false
+      })
+      this.lock.release()
+    }
+  })
+
   /**
    * Load more posts to the end of the notifications
    */
@@ -294,15 +373,14 @@ export class NotificationsFeedModel {
     if (!this.hasMore) {
       return
     }
-    this.lock.acquireAsync()
+    await this.lock.acquireAsync()
     try {
       this._xLoading()
       try {
-        const params = Object.assign({}, this.params, {
+        const res = await this.rootStore.agent.listNotifications({
           limit: PAGE_SIZE,
           cursor: this.loadMoreCursor,
         })
-        const res = await this.rootStore.agent.listNotifications(params)
         await this._appendAll(res)
         this._xIdle()
       } catch (e: any) {
@@ -325,101 +403,37 @@ export class NotificationsFeedModel {
     return this.loadMore()
   }
 
-  /**
+  // unread notification in-place
-   * Load more posts at the start of the notifications
-   */
-  loadLatest = bundleAsync(async () => {
-    if (this.notifications.length === 0 || this.unreadCount > PAGE_SIZE) {
-      return this.refresh()
-    }
-    this.lock.acquireAsync()
-    try {
-      this._xLoading()
-      try {
-        const res = await this.rootStore.agent.listNotifications({
-          limit: PAGE_SIZE,
-        })
-        await this._prependAll(res)
-        this._xIdle()
-      } catch (e: any) {
-        this._xIdle() // don't bubble the error to the user
-        this.rootStore.log.error('NotificationsView: Failed to load latest', {
-          params: this.params,
-          e,
-        })
-      }
-    } finally {
-      this.lock.release()
-    }
-  })
-
-  /**
-   * Update content in-place
-   */
-  update = bundleAsync(async () => {
-    await this.lock.acquireAsync()
-    try {
-      if (!this.notifications.length) {
-        return
-      }
-      this._xLoading()
-      let numToFetch = this.notifications.length
-      let cursor
-      try {
-        do {
-          const res: ListNotifications.Response =
-            await this.rootStore.agent.listNotifications({
-              cursor,
-              limit: Math.min(numToFetch, 100),
-            })
-          if (res.data.notifications.length === 0) {
-            break // sanity check
-          }
-          this._updateAll(res)
-          numToFetch -= res.data.notifications.length
-          cursor = res.data.cursor
-        } while (cursor && numToFetch > 0)
-        this._xIdle()
-      } catch (e: any) {
-        this._xIdle() // don't bubble the error to the user
-        this.rootStore.log.error('NotificationsView: Failed to update', {
-          params: this.params,
-          e,
-        })
-      }
-    } finally {
-      this.lock.release()
-    }
-  })
-
-  // unread notification apis
   // =
-
+  async update() {
-  /**
+    const promises = []
-   * Get the current number of unread notifications
+    for (const item of this.notifications) {
-   * returns true if the number changed
+      if (item.additionalPost) {
-   */
+        promises.push(item.additionalPost.update())
-  loadUnreadCount = bundleAsync(async () => {
+      }
-    const old = this.unreadCount
+    }
-    const res = await this.rootStore.agent.countUnreadNotifications()
+    await Promise.all(promises).catch(e => {
-    runInAction(() => {
+      this.rootStore.log.error(
-      this.unreadCount = res.data.count
+        'Uncaught failure during notifications update()',
+        e,
+      )
     })
-    this.rootStore.emitUnreadNotifications(this.unreadCount)
+  }
-    return this.unreadCount !== old
-  })
 
   /**
    * Update read/unread state
    */
-  async markAllRead() {
+  async markAllUnqueuedRead() {
     try {
-      this.unreadCount = 0
-      this.rootStore.emitUnreadNotifications(0)
       for (const notif of this.notifications) {
-        notif.isRead = true
+        notif.markGroupRead()
+      }
+      this._countUnread()
+      if (this.notifications[0]) {
+        await this.rootStore.agent.updateSeenNotifications(
+          this.notifications[0].indexedAt,
+        )
       }
-      await this.rootStore.agent.updateSeenNotifications()
     } catch (e: any) {
       this.rootStore.log.warn('Failed to update notifications read state', e)
     }
@@ -472,6 +486,40 @@ export class NotificationsFeedModel {
   // helper functions
   // =
 
+  async _fetchUntil(
+    condFn: CondFn,
+    {breakAt}: {breakAt: 'page' | 'record'},
+  ): Promise<ListNotifications.Response> {
+    const accRes: ListNotifications.Response = {
+      success: true,
+      headers: {},
+      data: {cursor: undefined, notifications: []},
+    }
+    for (let i = 0; i <= 10; i++) {
+      const res = await this.rootStore.agent.listNotifications({
+        limit: PAGE_SIZE,
+        cursor: accRes.data.cursor,
+      })
+      accRes.data.cursor = res.data.cursor
+
+      let pageIsDone = false
+      for (const notif of res.data.notifications) {
+        if (condFn(notif)) {
+          if (breakAt === 'record') {
+            return accRes
+          } else {
+            pageIsDone = true
+          }
+        }
+        accRes.data.notifications.push(notif)
+      }
+      if (pageIsDone || res.data.notifications.length < PAGE_SIZE) {
+        return accRes
+      }
+    }
+    return accRes
+  }
+
   async _replaceAll(res: ListNotifications.Response) {
     if (res.data.notifications[0]) {
       this.mostRecentNotificationUri = res.data.notifications[0].uri
@@ -482,25 +530,7 @@ export class NotificationsFeedModel {
   async _appendAll(res: ListNotifications.Response, replace = false) {
     this.loadMoreCursor = res.data.cursor
     this.hasMore = !!this.loadMoreCursor
-    const promises = []
+    const itemModels = await this._processNotifications(res.data.notifications)
-    const itemModels: NotificationsFeedItemModel[] = []
-    for (const item of groupNotifications(res.data.notifications)) {
-      const itemModel = new NotificationsFeedItemModel(
-        this.rootStore,
-        `item-${_idCounter++}`,
-        item,
-      )
-      if (itemModel.needsAdditionalData) {
-        promises.push(itemModel.fetchAdditionalData())
-      }
-      itemModels.push(itemModel)
-    }
-    await Promise.all(promises).catch(e => {
-      this.rootStore.log.error(
-        'Uncaught failure during notifications-view _appendAll()',
-        e,
-      )
-    })
     runInAction(() => {
       if (replace) {
         this.notifications = itemModels
@@ -510,16 +540,18 @@ export class NotificationsFeedModel {
     })
   }
 
-  async _prependAll(res: ListNotifications.Response) {
+  async _processNotifications(
+    items: ListNotifications.Notification[],
+  ): Promise<NotificationsFeedItemModel[]> {
     const promises = []
     const itemModels: NotificationsFeedItemModel[] = []
-    const dedupedNotifs = res.data.notifications.filter(
+    items = items.filter(item => {
-      n1 =>
+      return (
-        !this.notifications.find(
+        this.rootStore.preferences.getLabelPreference(item.labels).pref !==
-          n2 => isEq(n1, n2) || n2.additional?.find(n3 => isEq(n1, n3)),
+        'hide'
-        ),
+      )
-    )
+    })
-    for (const item of groupNotifications(dedupedNotifs)) {
+    for (const item of groupNotifications(items)) {
       const itemModel = new NotificationsFeedItemModel(
         this.rootStore,
         `item-${_idCounter++}`,
@@ -532,22 +564,27 @@ export class NotificationsFeedModel {
     }
     await Promise.all(promises).catch(e => {
       this.rootStore.log.error(
-        'Uncaught failure during notifications-view _prependAll()',
+        'Uncaught failure during notifications _processNotifications()',
         e,
       )
     })
-    runInAction(() => {
+    return itemModels
-      this.notifications = itemModels.concat(this.notifications)
-    })
   }
 
-  _updateAll(res: ListNotifications.Response) {
+  _setQueued(queued: undefined | ListNotifications.Notification[]) {
-    for (const item of res.data.notifications) {
+    this.queuedNotifications = queued
-      const existingItem = this.notifications.find(item2 => isEq(item, item2))
+  }
-      if (existingItem) {
+
-        existingItem.copy(item, true)
+  _countUnread() {
-      }
+    let unread = 0
+    for (const notif of this.notifications) {
+      unread += notif.numUnreadInGroup
     }
+    if (this.queuedNotifications) {
+      unread += this.queuedNotifications.length
+    }
+    this.unreadCount = unread
+    this.rootStore.emitUnreadNotifications(unread)
   }
 }
 

src/state/models/me.ts

@@ -119,7 +119,7 @@ export class MeModel {
       await this.fetchProfile()
       await this.fetchInviteCodes()
     }
-    await this.notifications.loadUnreadCount()
+    await this.notifications.syncQueue()
   }
 
   async fetchProfile() {

src/state/models/ui/preferences.ts

@@ -1,11 +1,33 @@
 import {makeAutoObservable} from 'mobx'
 import {getLocales} from 'expo-localization'
 import {isObj, hasProp} from 'lib/type-guards'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {getLabelValueGroup} from 'lib/labeling/helpers'
+import {
+  LabelValGroup,
+  UNKNOWN_LABEL_GROUP,
+  ILLEGAL_LABEL_GROUP,
+} from 'lib/labeling/const'
 
 const deviceLocales = getLocales()
 
+export type LabelPreference = 'show' | 'warn' | 'hide'
+
+export class LabelPreferencesModel {
+  nsfw: LabelPreference = 'warn'
+  gore: LabelPreference = 'hide'
+  hate: LabelPreference = 'hide'
+  spam: LabelPreference = 'hide'
+  impersonation: LabelPreference = 'warn'
+
+  constructor() {
+    makeAutoObservable(this, {}, {autoBind: true})
+  }
+}
+
 export class PreferencesModel {
   _contentLanguages: string[] | undefined
+  contentLabels = new LabelPreferencesModel()
 
   constructor() {
     makeAutoObservable(this, {}, {autoBind: true})
@@ -22,6 +44,7 @@ export class PreferencesModel {
   serialize() {
     return {
       contentLanguages: this._contentLanguages,
+      contentLabels: this.contentLabels,
     }
   }
 
@@ -34,6 +57,46 @@ export class PreferencesModel {
       ) {
         this._contentLanguages = v.contentLanguages
       }
+      if (hasProp(v, 'contentLabels') && typeof v.contentLabels === 'object') {
+        Object.assign(this.contentLabels, v.contentLabels)
+      }
     }
   }
+
+  setContentLabelPref(
+    key: keyof LabelPreferencesModel,
+    value: LabelPreference,
+  ) {
+    this.contentLabels[key] = value
+  }
+
+  getLabelPreference(labels: ComAtprotoLabelDefs.Label[] | undefined): {
+    pref: LabelPreference
+    desc: LabelValGroup
+  } {
+    let res: {pref: LabelPreference; desc: LabelValGroup} = {
+      pref: 'show',
+      desc: UNKNOWN_LABEL_GROUP,
+    }
+    if (!labels?.length) {
+      return res
+    }
+    for (const label of labels) {
+      const group = getLabelValueGroup(label.val)
+      if (group.id === 'illegal') {
+        return {pref: 'hide', desc: ILLEGAL_LABEL_GROUP}
+      } else if (group.id === 'unknown') {
+        continue
+      }
+      let pref = this.contentLabels[group.id]
+      if (pref === 'hide') {
+        res.pref = 'hide'
+        res.desc = group
+      } else if (pref === 'warn' && res.pref === 'show') {
+        res.pref = 'warn'
+        res.desc = group
+      }
+    }
+    return res
+  }
 }

src/state/models/ui/shell.ts

@@ -65,6 +65,10 @@ export interface InviteCodesModal {
   name: 'invite-codes'
 }
 
+export interface ContentFilteringSettingsModal {
+  name: 'content-filtering-settings'
+}
+
 export type Modal =
   | ConfirmModal
   | EditProfileModal
@@ -77,6 +81,7 @@ export type Modal =
   | ChangeHandleModal
   | WaitlistModal
   | InviteCodesModal
+  | ContentFilteringSettingsModal
 
 interface LightboxModel {}
 

src/view/com/discover/SuggestedFollows.tsx

@@ -31,6 +31,7 @@ export const SuggestedFollows = ({
             handle={item.handle}
             displayName={item.displayName}
             avatar={item.avatar}
+            labels={item.labels}
             noBg
             noBorder
             description={

src/view/com/modals/ContentFilteringSettings.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {LabelPreference} from 'state/models/ui/preferences'
+import {s, colors, gradients} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {CONFIGURABLE_LABEL_GROUPS} from 'lib/labeling/const'
+
+export const snapPoints = [500]
+
+export function Component({}: {}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const onPressDone = React.useCallback(() => {
+    store.shell.closeModal()
+  }, [store])
+
+  return (
+    <View testID="reportPostModal" style={[pal.view, styles.container]}>
+      <Text style={[pal.text, styles.title]}>Content Filtering</Text>
+      <ContentLabelPref group="nsfw" />
+      <ContentLabelPref group="gore" />
+      <ContentLabelPref group="hate" />
+      <ContentLabelPref group="spam" />
+      <ContentLabelPref group="impersonation" />
+      <View style={s.flex1} />
+      <TouchableOpacity testID="sendReportBtn" onPress={onPressDone}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[styles.btn]}>
+          <Text style={[s.white, s.bold, s.f18]}>Done</Text>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const ContentLabelPref = observer(
+  ({group}: {group: keyof typeof CONFIGURABLE_LABEL_GROUPS}) => {
+    const store = useStores()
+    const pal = usePalette('default')
+    return (
+      <View style={[styles.contentLabelPref, pal.border]}>
+        <Text type="md-medium" style={[pal.text]}>
+          {CONFIGURABLE_LABEL_GROUPS[group].title}
+        </Text>
+        <SelectGroup
+          current={store.preferences.contentLabels[group]}
+          onChange={v => store.preferences.setContentLabelPref(group, v)}
+        />
+      </View>
+    )
+  },
+)
+
+function SelectGroup({
+  current,
+  onChange,
+}: {
+  current: LabelPreference
+  onChange: (v: LabelPreference) => void
+}) {
+  return (
+    <View style={styles.selectableBtns}>
+      <SelectableBtn
+        current={current}
+        value="hide"
+        label="Hide"
+        left
+        onChange={onChange}
+      />
+      <SelectableBtn
+        current={current}
+        value="warn"
+        label="Warn"
+        onChange={onChange}
+      />
+      <SelectableBtn
+        current={current}
+        value="show"
+        label="Show"
+        right
+        onChange={onChange}
+      />
+    </View>
+  )
+}
+
+function SelectableBtn({
+  current,
+  value,
+  label,
+  left,
+  right,
+  onChange,
+}: {
+  current: string
+  value: LabelPreference
+  label: string
+  left?: boolean
+  right?: boolean
+  onChange: (v: LabelPreference) => void
+}) {
+  const pal = usePalette('default')
+  const palPrimary = usePalette('inverted')
+  return (
+    <TouchableOpacity
+      style={[
+        styles.selectableBtn,
+        left && styles.selectableBtnLeft,
+        right && styles.selectableBtnRight,
+        pal.border,
+        current === value ? palPrimary.view : pal.view,
+      ]}
+      onPress={() => onChange(value)}>
+      <Text style={current === value ? palPrimary.text : pal.text}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingBottom: 40,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    paddingHorizontal: 2,
+    marginBottom: 10,
+  },
+
+  contentLabelPref: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingLeft: 4,
+    marginBottom: 10,
+    borderTopWidth: 1,
+  },
+
+  selectableBtns: {
+    flexDirection: 'row',
+  },
+  selectableBtn: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  },
+  selectableBtnLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderLeftWidth: 1,
+  },
+  selectableBtnRight: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -1,9 +1,10 @@
 import React, {useRef, useEffect} from 'react'
-import {View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import BottomSheet from '@gorhom/bottom-sheet'
 import {useStores} from 'state/index'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
+import {usePalette} from 'lib/hooks/usePalette'
 
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
@@ -15,8 +16,7 @@ import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
 import * as InviteCodesModal from './InviteCodes'
-import {usePalette} from 'lib/hooks/usePalette'
+import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
-import {StyleSheet} from 'react-native'
 
 const DEFAULT_SNAPPOINTS = ['90%']
 
@@ -77,6 +77,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'invite-codes') {
     snapPoints = InviteCodesModal.snapPoints
     element = <InviteCodesModal.Component />
+  } else if (activeModal?.name === 'content-filtering-settings') {
+    snapPoints = ContentFilteringSettingsModal.snapPoints
+    element = <ContentFilteringSettingsModal.Component />
   } else {
     return <View />
   }

src/view/com/modals/Modal.web.tsx

@@ -17,6 +17,7 @@ import * as CropImageModal from './crop-image/CropImage.web'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
 import * as InviteCodesModal from './InviteCodes'
+import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 
 export const ModalsContainer = observer(function ModalsContainer() {
   const store = useStores()
@@ -75,6 +76,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <WaitlistModal.Component />
   } else if (modal.name === 'invite-codes') {
     element = <InviteCodesModal.Component />
+  } else if (modal.name === 'content-filtering-settings') {
+    element = <ContentFilteringSettingsModal.Component />
   } else {
     return null
   }

src/view/com/notifications/Feed.tsx

@@ -45,7 +45,6 @@ export const Feed = observer(function Feed({
   const onRefresh = React.useCallback(async () => {
     try {
       await view.refresh()
-      await view.markAllRead()
     } catch (err) {
       view.rootStore.log.error('Failed to refresh notifications feed', err)
     }

src/view/com/notifications/FeedItem.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native'
 import {AppBskyEmbedImages} from '@atproto/api'
-import {AtUri} from '@atproto/api'
+import {AtUri, ComAtprotoLabelDefs} from '@atproto/api'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -38,6 +38,7 @@ interface Author {
   handle: string
   displayName?: string
   avatar?: string
+  labels?: ComAtprotoLabelDefs.Label[]
 }
 
 export const FeedItem = observer(function FeedItem({
@@ -129,6 +130,7 @@ export const FeedItem = observer(function FeedItem({
       handle: item.author.handle,
       displayName: item.author.displayName,
       avatar: item.author.avatar,
+      labels: item.author.labels,
     },
   ]
   if (item.additional?.length) {
@@ -138,6 +140,7 @@ export const FeedItem = observer(function FeedItem({
         handle: item2.author.handle,
         displayName: item2.author.displayName,
         avatar: item2.author.avatar,
+        labels: item.author.labels,
       })),
     )
   }
@@ -255,7 +258,11 @@ function CondensedAuthorsList({
           href={authors[0].href}
           title={`@${authors[0].handle}`}
           asAnchor>
-          <UserAvatar size={35} avatar={authors[0].avatar} />
+          <UserAvatar
+            size={35}
+            avatar={authors[0].avatar}
+            hasWarning={!!authors[0].labels?.length}
+          />
         </Link>
       </View>
     )
@@ -264,7 +271,11 @@ function CondensedAuthorsList({
     <View style={styles.avis}>
       {authors.slice(0, MAX_AUTHORS).map(author => (
         <View key={author.href} style={s.mr5}>
-          <UserAvatar size={35} avatar={author.avatar} />
+          <UserAvatar
+            size={35}
+            avatar={author.avatar}
+            hasWarning={!!author.labels?.length}
+          />
         </View>
       ))}
       {authors.length > MAX_AUTHORS ? (
@@ -317,7 +328,11 @@ function ExpandedAuthorsList({
           style={styles.expandedAuthor}
           asAnchor>
           <View style={styles.expandedAuthorAvi}>
-            <UserAvatar size={35} avatar={author.avatar} />
+            <UserAvatar
+              size={35}
+              avatar={author.avatar}
+              hasWarning={!!author.labels?.length}
+            />
           </View>
           <View style={s.flex1}>
             <Text

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

@@ -53,6 +53,7 @@ export const PostLikedBy = observer(function ({uri}: {uri: string}) {
       handle={item.actor.handle}
       displayName={item.actor.displayName}
       avatar={item.actor.avatar}
+      labels={item.actor.labels}
       isFollowedBy={!!item.actor.viewer?.followedBy}
     />
   )

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

@@ -64,6 +64,7 @@ export const PostRepostedBy = observer(function PostRepostedBy({
       handle={item.handle}
       displayName={item.displayName}
       avatar={item.avatar}
+      labels={item.labels}
       isFollowedBy={!!item.viewer?.followedBy}
     />
   )

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

@@ -22,7 +22,8 @@ import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostMutedWrapper} from '../util/PostMuted'
+import {PostHider} from '../util/moderation/PostHider'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 
@@ -137,7 +138,11 @@ export const PostThreadItem = observer(function PostThreadItem({
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <Link href={authorHref} title={authorTitle} asAnchor>
-              <UserAvatar size={52} avatar={item.post.author.avatar} />
+              <UserAvatar
+                size={52}
+                avatar={item.post.author.avatar}
+                hasWarning={!!item.post.author.labels?.length}
+              />
             </Link>
           </View>
           <View style={styles.layoutContent}>
@@ -193,17 +198,24 @@ export const PostThreadItem = observer(function PostThreadItem({
           </View>
         </View>
         <View style={[s.pl10, s.pr10, s.pb10]}>
-          {item.richText?.text ? (
+          <ContentHider
-            <View
+            isMuted={item.post.author.viewer?.muted === true}
-              style={[styles.postTextContainer, styles.postTextLargeContainer]}>
+            labels={item.post.labels}>
-              <RichText
+            {item.richText?.text ? (
-                type="post-text-lg"
+              <View
-                richText={item.richText}
+                style={[
-                lineHeight={1.3}
+                  styles.postTextContainer,
-              />
+                  styles.postTextLargeContainer,
-            </View>
+                ]}>
-          ) : undefined}
+                <RichText
-          <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                  type="post-text-lg"
+                  richText={item.richText}
+                  lineHeight={1.3}
+                />
+              </View>
+            ) : undefined}
+            <PostEmbeds embed={item.post.embed} style={s.mb10} />
+          </ContentHider>
           {item._isHighlightedPost && hasEngagement ? (
             <View style={[styles.expandedInfo, pal.border]}>
               {item.post.repostCount ? (
@@ -270,13 +282,13 @@ export const PostThreadItem = observer(function PostThreadItem({
     )
   } else {
     return (
-      <PostMutedWrapper isMuted={item.post.author.viewer?.muted === true}>
+      <>
-        <Link
+        <PostHider
           testID={`postThreadItem-by-${item.post.author.handle}`}
-          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
           href={itemHref}
-          title={itemTitle}
+          style={[styles.outer, {borderColor: pal.colors.border}, pal.view]}
-          noFeedback>
+          isMuted={item.post.author.viewer?.muted === true}
+          labels={item.post.labels}>
           {item._showParentReplyLine && (
             <View
               style={[
@@ -296,28 +308,37 @@ export const PostThreadItem = observer(function PostThreadItem({
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle} asAnchor>
-                <UserAvatar size={52} avatar={item.post.author.avatar} />
+                <UserAvatar
+                  size={52}
+                  avatar={item.post.author.avatar}
+                  hasWarning={!!item.post.author.labels?.length}
+                />
               </Link>
             </View>
             <View style={styles.layoutContent}>
               <PostMeta
                 authorHandle={item.post.author.handle}
                 authorDisplayName={item.post.author.displayName}
+                authorHasWarning={!!item.post.author.labels?.length}
                 timestamp={item.post.indexedAt}
                 postHref={itemHref}
                 did={item.post.author.did}
               />
-              {item.richText?.text ? (
+              <ContentHider
-                <View style={styles.postTextContainer}>
+                labels={item.post.labels}
-                  <RichText
+                containerStyle={styles.contentHider}>
-                    type="post-text"
+                {item.richText?.text ? (
-                    richText={item.richText}
+                  <View style={styles.postTextContainer}>
-                    style={pal.text}
+                    <RichText
-                    lineHeight={1.3}
+                      type="post-text"
-                  />
+                      richText={item.richText}
-                </View>
+                      style={pal.text}
-              ) : undefined}
+                      lineHeight={1.3}
-              <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                    />
+                  </View>
+                ) : undefined}
+                <PostEmbeds embed={item.post.embed} style={s.mb10} />
+              </ContentHider>
               <PostCtrls
                 itemUri={itemUri}
                 itemCid={itemCid}
@@ -345,7 +366,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               />
             </View>
           </View>
-        </Link>
+        </PostHider>
         {item._hasMore ? (
           <Link
             style={[
@@ -364,7 +385,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
         ) : undefined}
-      </PostMutedWrapper>
+      </>
     )
   }
 })
@@ -433,6 +454,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 0,
     paddingBottom: 10,
   },
+  contentHider: {
+    marginTop: 4,
+  },
   expandedInfo: {
     flexDirection: 'row',
     padding: 10,

src/view/com/post/Post.tsx

@@ -7,17 +7,22 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
+import {AppBskyFeedPost as FeedPost} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {PostThreadModel} from 'state/models/content/post-thread'
+import {
+  PostThreadModel,
+  PostThreadItemModel,
+} from 'state/models/content/post-thread'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostMutedWrapper} from '../util/PostMuted'
+import {PostHider} from '../util/moderation/PostHider'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
@@ -61,7 +66,11 @@ export const Post = observer(function Post({
 
   // loading
   // =
-  if (!view || view.isLoading || view.params.uri !== uri) {
+  if (
+    !view ||
+    (!view.hasContent && view.isLoading) ||
+    view.params.uri !== uri
+  ) {
     return (
       <View style={pal.view}>
         <ActivityIndicator />
@@ -84,85 +93,122 @@ export const Post = observer(function Post({
 
   // loaded
   // =
-  const item = view.thread
-  const record = view.thread.postRecord
-
-  const itemUri = item.post.uri
-  const itemCid = item.post.cid
-  const itemUrip = new AtUri(item.post.uri)
-  const itemHref = `/profile/${item.post.author.handle}/post/${itemUrip.rkey}`
-  const itemTitle = `Post by ${item.post.author.handle}`
-  const authorHref = `/profile/${item.post.author.handle}`
-  const authorTitle = item.post.author.handle
-  let replyAuthorDid = ''
-  if (record.reply) {
-    const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
-    replyAuthorDid = urip.hostname
-  }
-  const onPressReply = () => {
-    store.shell.openComposer({
-      replyTo: {
-        uri: item.post.uri,
-        cid: item.post.cid,
-        text: record.text as string,
-        author: {
-          handle: item.post.author.handle,
-          displayName: item.post.author.displayName,
-          avatar: item.post.author.avatar,
-        },
-      },
-    })
-  }
-  const onPressToggleRepost = () => {
-    return item
-      .toggleRepost()
-      .catch(e => store.log.error('Failed to toggle repost', e))
-  }
-  const onPressToggleLike = () => {
-    return item
-      .toggleLike()
-      .catch(e => store.log.error('Failed to toggle like', e))
-  }
-  const onCopyPostText = () => {
-    Clipboard.setString(record.text)
-    Toast.show('Copied to clipboard')
-  }
-  const onOpenTranslate = () => {
-    Linking.openURL(
-      encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
-    )
-  }
-  const onDeletePost = () => {
-    item.delete().then(
-      () => {
-        setDeleted(true)
-        Toast.show('Post deleted')
-      },
-      e => {
-        store.log.error('Failed to delete post', e)
-        Toast.show('Failed to delete post, please try again')
-      },
-    )
-  }
 
   return (
-    <PostMutedWrapper isMuted={item.post.author.viewer?.muted === true}>
+    <PostLoaded
-      <Link
+      item={view.thread}
-        style={[styles.outer, pal.view, pal.border, style]}
+      record={view.thread.postRecord}
+      setDeleted={setDeleted}
+      showReplyLine={showReplyLine}
+      style={style}
+    />
+  )
+})
+
+const PostLoaded = observer(
+  ({
+    item,
+    record,
+    setDeleted,
+    showReplyLine,
+    style,
+  }: {
+    item: PostThreadItemModel
+    record: FeedPost.Record
+    setDeleted: (v: boolean) => void
+    showReplyLine?: boolean
+    style?: StyleProp<ViewStyle>
+  }) => {
+    const pal = usePalette('default')
+    const store = useStores()
+
+    const itemUri = item.post.uri
+    const itemCid = item.post.cid
+    const itemUrip = new AtUri(item.post.uri)
+    const itemHref = `/profile/${item.post.author.handle}/post/${itemUrip.rkey}`
+    const itemTitle = `Post by ${item.post.author.handle}`
+    const authorHref = `/profile/${item.post.author.handle}`
+    const authorTitle = item.post.author.handle
+    let replyAuthorDid = ''
+    if (record.reply) {
+      const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
+      replyAuthorDid = urip.hostname
+    }
+    const onPressReply = React.useCallback(() => {
+      store.shell.openComposer({
+        replyTo: {
+          uri: item.post.uri,
+          cid: item.post.cid,
+          text: record.text as string,
+          author: {
+            handle: item.post.author.handle,
+            displayName: item.post.author.displayName,
+            avatar: item.post.author.avatar,
+          },
+        },
+      })
+    }, [store, item, record])
+
+    const onPressToggleRepost = React.useCallback(() => {
+      return item
+        .toggleRepost()
+        .catch(e => store.log.error('Failed to toggle repost', e))
+    }, [item, store])
+
+    const onPressToggleLike = React.useCallback(() => {
+      return item
+        .toggleLike()
+        .catch(e => store.log.error('Failed to toggle like', e))
+    }, [item, store])
+
+    const onCopyPostText = React.useCallback(() => {
+      Clipboard.setString(record.text)
+      Toast.show('Copied to clipboard')
+    }, [record])
+
+    const onOpenTranslate = React.useCallback(() => {
+      Linking.openURL(
+        encodeURI(
+          `https://translate.google.com/#auto|en|${record?.text || ''}`,
+        ),
+      )
+    }, [record])
+
+    const onDeletePost = React.useCallback(() => {
+      item.delete().then(
+        () => {
+          setDeleted(true)
+          Toast.show('Post deleted')
+        },
+        e => {
+          store.log.error('Failed to delete post', e)
+          Toast.show('Failed to delete post, please try again')
+        },
+      )
+    }, [item, setDeleted, store])
+
+    return (
+      <PostHider
         href={itemHref}
-        title={itemTitle}
+        style={[styles.outer, pal.view, pal.border, style]}
-        noFeedback>
+        isMuted={item.post.author.viewer?.muted === true}
+        labels={item.post.labels}>
         {showReplyLine && <View style={styles.replyLine} />}
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <Link href={authorHref} title={authorTitle} asAnchor>
-              <UserAvatar size={52} avatar={item.post.author.avatar} />
+              <UserAvatar
+                size={52}
+                avatar={item.post.author.avatar}
+                hasWarning={!!item.post.author.labels?.length}
+              />
             </Link>
           </View>
           <View style={styles.layoutContent}>
             <PostMeta
               authorHandle={item.post.author.handle}
               authorDisplayName={item.post.author.displayName}
+              authorHasWarning={!!item.post.author.labels?.length}
               timestamp={item.post.indexedAt}
               postHref={itemHref}
               did={item.post.author.did}
@@ -185,16 +231,20 @@ export const Post = observer(function Post({
                 />
               </View>
             )}
-            {item.richText?.text ? (
+            <ContentHider
-              <View style={styles.postTextContainer}>
+              labels={item.post.labels}
-                <RichText
+              containerStyle={styles.contentHider}>
-                  type="post-text"
+              {item.richText?.text ? (
-                  richText={item.richText}
+                <View style={styles.postTextContainer}>
-                  lineHeight={1.3}
+                  <RichText
-                />
+                    type="post-text"
-              </View>
+                    richText={item.richText}
-            ) : undefined}
+                    lineHeight={1.3}
-            <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                  />
+                </View>
+              ) : undefined}
+              <PostEmbeds embed={item.post.embed} style={s.mb10} />
+            </ContentHider>
             <PostCtrls
               itemUri={itemUri}
               itemCid={itemCid}
@@ -222,10 +272,10 @@ export const Post = observer(function Post({
             />
           </View>
         </View>
-      </Link>
+      </PostHider>
-    </PostMutedWrapper>
+    )
-  )
+  },
-})
+)
 
 const styles = StyleSheet.create({
   outer: {
@@ -257,4 +307,7 @@ const styles = StyleSheet.create({
     borderLeftWidth: 2,
     borderLeftColor: colors.gray2,
   },
+  contentHider: {
+    marginTop: 4,
+  },
 })

src/view/com/posts/FeedItem.tsx

@@ -14,7 +14,8 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {PostEmbeds} from '../util/post-embeds'
-import {PostMutedWrapper} from '../util/PostMuted'
+import {PostHider} from '../util/moderation/PostHider'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -59,7 +60,7 @@ export const FeedItem = observer(function ({
     return urip.hostname
   }, [record?.reply])
 
-  const onPressReply = () => {
+  const onPressReply = React.useCallback(() => {
     track('FeedItem:PostReply')
     store.shell.openComposer({
       replyTo: {
@@ -73,29 +74,34 @@ export const FeedItem = observer(function ({
         },
       },
     })
-  }
+  }, [item, track, record, store])
-  const onPressToggleRepost = () => {
+
+  const onPressToggleRepost = React.useCallback(() => {
     track('FeedItem:PostRepost')
     return item
       .toggleRepost()
       .catch(e => store.log.error('Failed to toggle repost', e))
-  }
+  }, [track, item, store])
-  const onPressToggleLike = () => {
+
+  const onPressToggleLike = React.useCallback(() => {
     track('FeedItem:PostLike')
     return item
       .toggleLike()
       .catch(e => store.log.error('Failed to toggle like', e))
-  }
+  }, [track, item, store])
-  const onCopyPostText = () => {
+
+  const onCopyPostText = React.useCallback(() => {
     Clipboard.setString(record?.text || '')
     Toast.show('Copied to clipboard')
-  }
+  }, [record])
+
   const onOpenTranslate = React.useCallback(() => {
     Linking.openURL(
       encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
     )
   }, [record])
-  const onDeletePost = () => {
+
+  const onDeletePost = React.useCallback(() => {
     track('FeedItem:PostDelete')
     item.delete().then(
       () => {
@@ -107,7 +113,7 @@ export const FeedItem = observer(function ({
         Toast.show('Failed to delete post, please try again')
       },
     )
-  }
+  }, [track, item, setDeleted, store])
 
   if (!record || deleted) {
     return <View />
@@ -127,97 +133,103 @@ export const FeedItem = observer(function ({
   ]
 
   return (
-    <PostMutedWrapper isMuted={isMuted}>
+    <PostHider
-      <Link
+      testID={`feedItem-by-${item.post.author.handle}`}
-        testID={`feedItem-by-${item.post.author.handle}`}
+      style={outerStyles}
-        style={outerStyles}
+      href={itemHref}
-        href={itemHref}
+      isMuted={isMuted}
-        title={itemTitle}
+      labels={item.post.labels}>
-        noFeedback>
+      {isThreadChild && (
-        {isThreadChild && (
+        <View
-          <View
+          style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
-            style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
+        />
-          />
+      )}
-        )}
+      {isThreadParent && (
-        {isThreadParent && (
+        <View
-          <View
+          style={[
+            styles.bottomReplyLine,
+            {borderColor: pal.colors.replyLine},
+            isNoTop ? styles.bottomReplyLineNoTop : undefined,
+          ]}
+        />
+      )}
+      {item.reasonRepost && (
+        <Link
+          style={styles.includeReason}
+          href={`/profile/${item.reasonRepost.by.handle}`}
+          title={sanitizeDisplayName(
+            item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
+          )}>
+          <FontAwesomeIcon
+            icon="retweet"
             style={[
-              styles.bottomReplyLine,
+              styles.includeReasonIcon,
-              {borderColor: pal.colors.replyLine},
+              {color: pal.colors.textLight} as FontAwesomeIconStyle,
-              isNoTop ? styles.bottomReplyLineNoTop : undefined,
             ]}
           />
-        )}
+          <Text
-        {item.reasonRepost && (
+            type="sm-bold"
-          <Link
+            style={pal.textLight}
-            style={styles.includeReason}
+            lineHeight={1.2}
-            href={`/profile/${item.reasonRepost.by.handle}`}
+            numberOfLines={1}>
-            title={sanitizeDisplayName(
+            Reposted by{' '}
-              item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
+            <DesktopWebTextLink
-            )}>
-            <FontAwesomeIcon
-              icon="retweet"
-              style={[
-                styles.includeReasonIcon,
-                {color: pal.colors.textLight} as FontAwesomeIconStyle,
-              ]}
-            />
-            <Text
               type="sm-bold"
               style={pal.textLight}
               lineHeight={1.2}
-              numberOfLines={1}>
+              numberOfLines={1}
-              Reposted by{' '}
+              text={sanitizeDisplayName(
-              <DesktopWebTextLink
+                item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
-                type="sm-bold"
+              )}
-                style={pal.textLight}
+              href={`/profile/${item.reasonRepost.by.handle}`}
-                lineHeight={1.2}
-                numberOfLines={1}
-                text={sanitizeDisplayName(
-                  item.reasonRepost.by.displayName ||
-                    item.reasonRepost.by.handle,
-                )}
-                href={`/profile/${item.reasonRepost.by.handle}`}
-              />
-            </Text>
-          </Link>
-        )}
-        <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
-            <Link href={authorHref} title={item.post.author.handle} asAnchor>
-              <UserAvatar size={52} avatar={item.post.author.avatar} />
-            </Link>
-          </View>
-          <View style={styles.layoutContent}>
-            <PostMeta
-              authorHandle={item.post.author.handle}
-              authorDisplayName={item.post.author.displayName}
-              timestamp={item.post.indexedAt}
-              postHref={itemHref}
-              did={item.post.author.did}
-              showFollowBtn={showFollowBtn}
             />
-            {!isThreadChild && replyAuthorDid !== '' && (
+          </Text>
-              <View style={[s.flexRow, s.mb2, s.alignCenter]}>
+        </Link>
-                <FontAwesomeIcon
+      )}
-                  icon="reply"
+      <View style={styles.layout}>
-                  size={9}
+        <View style={styles.layoutAvi}>
-                  style={[
+          <Link href={authorHref} title={item.post.author.handle} asAnchor>
-                    {color: pal.colors.textLight} as FontAwesomeIconStyle,
+            <UserAvatar
-                    s.mr5,
+              size={52}
-                  ]}
+              avatar={item.post.author.avatar}
-                />
+              hasWarning={!!item.post.author.labels?.length}
-                <Text type="md" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
+            />
-                  Reply to
+          </Link>
-                </Text>
+        </View>
-                <UserInfoText
+        <View style={styles.layoutContent}>
-                  type="md"
+          <PostMeta
-                  did={replyAuthorDid}
+            authorHandle={item.post.author.handle}
-                  attr="displayName"
+            authorDisplayName={item.post.author.displayName}
-                  style={[pal.textLight, s.ml2]}
+            authorHasWarning={!!item.post.author.labels?.length}
-                />
+            timestamp={item.post.indexedAt}
-              </View>
+            postHref={itemHref}
-            )}
+            did={item.post.author.did}
+            showFollowBtn={showFollowBtn}
+          />
+          {!isThreadChild && replyAuthorDid !== '' && (
+            <View style={[s.flexRow, s.mb2, s.alignCenter]}>
+              <FontAwesomeIcon
+                icon="reply"
+                size={9}
+                style={[
+                  {color: pal.colors.textLight} as FontAwesomeIconStyle,
+                  s.mr5,
+                ]}
+              />
+              <Text type="md" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
+                Reply to
+              </Text>
+              <UserInfoText
+                type="md"
+                did={replyAuthorDid}
+                attr="displayName"
+                style={[pal.textLight, s.ml2]}
+              />
+            </View>
+          )}
+          <ContentHider
+            labels={item.post.labels}
+            containerStyle={styles.contentHider}>
             {item.richText?.text ? (
               <View style={styles.postTextContainer}>
                 <RichText
@@ -228,36 +240,36 @@ export const FeedItem = observer(function ({
               </View>
             ) : undefined}
             <PostEmbeds embed={item.post.embed} style={styles.embed} />
-            <PostCtrls
+          </ContentHider>
-              style={styles.ctrls}
+          <PostCtrls
-              itemUri={itemUri}
+            style={styles.ctrls}
-              itemCid={itemCid}
+            itemUri={itemUri}
-              itemHref={itemHref}
+            itemCid={itemCid}
-              itemTitle={itemTitle}
+            itemHref={itemHref}
-              author={{
+            itemTitle={itemTitle}
-                avatar: item.post.author.avatar!,
+            author={{
-                handle: item.post.author.handle,
+              avatar: item.post.author.avatar!,
-                displayName: item.post.author.displayName!,
+              handle: item.post.author.handle,
-              }}
+              displayName: item.post.author.displayName!,
-              text={item.richText?.text || record.text}
+            }}
-              indexedAt={item.post.indexedAt}
+            text={item.richText?.text || record.text}
-              isAuthor={item.post.author.did === store.me.did}
+            indexedAt={item.post.indexedAt}
-              replyCount={item.post.replyCount}
+            isAuthor={item.post.author.did === store.me.did}
-              repostCount={item.post.repostCount}
+            replyCount={item.post.replyCount}
-              likeCount={item.post.likeCount}
+            repostCount={item.post.repostCount}
-              isReposted={!!item.post.viewer?.repost}
+            likeCount={item.post.likeCount}
-              isLiked={!!item.post.viewer?.like}
+            isReposted={!!item.post.viewer?.repost}
-              onPressReply={onPressReply}
+            isLiked={!!item.post.viewer?.like}
-              onPressToggleRepost={onPressToggleRepost}
+            onPressReply={onPressReply}
-              onPressToggleLike={onPressToggleLike}
+            onPressToggleRepost={onPressToggleRepost}
-              onCopyPostText={onCopyPostText}
+            onPressToggleLike={onPressToggleLike}
-              onOpenTranslate={onOpenTranslate}
+            onCopyPostText={onCopyPostText}
-              onDeletePost={onDeletePost}
+            onOpenTranslate={onOpenTranslate}
-            />
+            onDeletePost={onDeletePost}
-          </View>
+          />
         </View>
-      </Link>
+      </View>
-    </PostMutedWrapper>
+    </PostHider>
   )
 })
 
@@ -320,6 +332,9 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     paddingBottom: 4,
   },
+  contentHider: {
+    marginTop: 4,
+  },
   embed: {
     marginBottom: 6,
   },

src/view/com/profile/ProfileCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {AppBskyActorDefs} from '@atproto/api'
+import {AppBskyActorDefs, ComAtprotoLabelDefs} from '@atproto/api'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
@@ -17,6 +17,7 @@ export function ProfileCard({
   displayName,
   avatar,
   description,
+  labels,
   isFollowedBy,
   noBg,
   noBorder,
@@ -28,6 +29,7 @@ export function ProfileCard({
   displayName?: string
   avatar?: string
   description?: string
+  labels: ComAtprotoLabelDefs.Label[] | undefined
   isFollowedBy?: boolean
   noBg?: boolean
   noBorder?: boolean
@@ -50,7 +52,7 @@ export function ProfileCard({
       asAnchor>
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
-          <UserAvatar size={40} avatar={avatar} />
+          <UserAvatar size={40} avatar={avatar} hasWarning={!!labels?.length} />
         </View>
         <View style={styles.layoutContent}>
           <Text
@@ -114,6 +116,7 @@ export const ProfileCardWithFollowBtn = observer(
     displayName,
     avatar,
     description,
+    labels,
     isFollowedBy,
     noBg,
     noBorder,
@@ -124,6 +127,7 @@ export const ProfileCardWithFollowBtn = observer(
     displayName?: string
     avatar?: string
     description?: string
+    labels: ComAtprotoLabelDefs.Label[] | undefined
     isFollowedBy?: boolean
     noBg?: boolean
     noBorder?: boolean
@@ -138,6 +142,7 @@ export const ProfileCardWithFollowBtn = observer(
         displayName={displayName}
         avatar={avatar}
         description={description}
+        labels={labels}
         isFollowedBy={isFollowedBy}
         noBg={noBg}
         noBorder={noBorder}

src/view/com/profile/ProfileFollowers.tsx

@@ -67,6 +67,7 @@ export const ProfileFollowers = observer(function ProfileFollowers({
       handle={item.handle}
       displayName={item.displayName}
       avatar={item.avatar}
+      labels={item.labels}
       isFollowedBy={!!item.viewer?.followedBy}
     />
   )

src/view/com/profile/ProfileFollows.tsx

@@ -64,6 +64,7 @@ export const ProfileFollows = observer(function ProfileFollows({
       handle={item.handle}
       displayName={item.displayName}
       avatar={item.avatar}
+      labels={item.labels}
       isFollowedBy={!!item.viewer?.followedBy}
     />
   )

src/view/com/profile/ProfileHeader.tsx

@@ -27,6 +27,7 @@ import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
+import {ProfileHeaderLabels} from '../util/moderation/ProfileHeaderLabels'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
@@ -320,6 +321,7 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
             richText={view.descriptionRichText}
           />
         ) : undefined}
+        <ProfileHeaderLabels labels={view.labels} />
         {view.viewer.muted ? (
           <View
             testID="profileHeaderMutedNotice"
@@ -348,7 +350,11 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoaded({
         onPress={onPressAvi}>
         <View
           style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
-          <UserAvatar size={80} avatar={view.avatar} />
+          <UserAvatar
+            size={80}
+            avatar={view.avatar}
+            hasWarning={!!view.labels?.length}
+          />
         </View>
       </TouchableWithoutFeedback>
     </View>

src/view/com/search/SearchResults.tsx

@@ -101,6 +101,7 @@ const Profiles = observer(({model}: {model: SearchUIModel}) => {
           displayName={item.displayName}
           avatar={item.avatar}
           description={item.description}
+          labels={item.labels}
         />
       ))}
       <View style={s.footerSpacer} />

src/view/com/util/LoadLatestBtn.tsx

@@ -10,31 +10,33 @@ import {useStores} from 'state/index'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const LoadLatestBtn = observer(({onPress}: {onPress: () => void}) => {
+export const LoadLatestBtn = observer(
-  const store = useStores()
+  ({onPress, label}: {onPress: () => void; label: string}) => {
-  const safeAreaInsets = useSafeAreaInsets()
+    const store = useStores()
-  return (
+    const safeAreaInsets = useSafeAreaInsets()
-    <TouchableOpacity
+    return (
-      style={[
+      <TouchableOpacity
-        styles.loadLatest,
+        style={[
-        !store.shell.minimalShellMode && {
+          styles.loadLatest,
-          bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
+          !store.shell.minimalShellMode && {
-        },
+            bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
-      ]}
+          },
-      onPress={onPress}
+        ]}
-      hitSlop={HITSLOP}>
+        onPress={onPress}
-      <LinearGradient
+        hitSlop={HITSLOP}>
-        colors={[gradients.blueLight.start, gradients.blueLight.end]}
+        <LinearGradient
-        start={{x: 0, y: 0}}
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-        end={{x: 1, y: 1}}
+          start={{x: 0, y: 0}}
-        style={styles.loadLatestInner}>
+          end={{x: 1, y: 1}}
-        <Text type="md-bold" style={styles.loadLatestText}>
+          style={styles.loadLatestInner}>
-          Load new posts
+          <Text type="md-bold" style={styles.loadLatestText}>
-        </Text>
+            Load new {label}
-      </LinearGradient>
+          </Text>
-    </TouchableOpacity>
+        </LinearGradient>
-  )
+      </TouchableOpacity>
-})
+    )
+  },
+)
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/com/util/LoadLatestBtn.web.tsx

@@ -6,7 +6,13 @@ import {UpIcon} from 'lib/icons'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const LoadLatestBtn = ({onPress}: {onPress: () => void}) => {
+export const LoadLatestBtn = ({
+  onPress,
+  label,
+}: {
+  onPress: () => void
+  label: string
+}) => {
   const pal = usePalette('default')
   return (
     <TouchableOpacity
@@ -15,7 +21,7 @@ export const LoadLatestBtn = ({onPress}: {onPress: () => void}) => {
       hitSlop={HITSLOP}>
       <Text type="md-bold" style={pal.text}>
         <UpIcon size={16} strokeWidth={1} style={[pal.text, styles.icon]} />
-        Load new posts
+        Load new {label}
       </Text>
     </TouchableOpacity>
   )
@@ -25,7 +31,9 @@ const styles = StyleSheet.create({
   loadLatest: {
     flexDirection: 'row',
     position: 'absolute',
-    left: 'calc(50vw - 80px)',
+    left: '50vw',
+    // @ts-ignore web only -prf
+    transform: 'translateX(-50%)',
     top: 30,
     shadowColor: '#000',
     shadowOpacity: 0.2,

src/view/com/util/PostMeta.tsx

@@ -15,6 +15,7 @@ interface PostMetaOpts {
   authorAvatar?: string
   authorHandle: string
   authorDisplayName: string | undefined
+  authorHasWarning: boolean
   postHref: string
   timestamp: string
   did?: string
@@ -93,7 +94,11 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
     <View style={styles.meta}>
       {typeof opts.authorAvatar !== 'undefined' && (
         <View style={[styles.metaItem, styles.avatar]}>
-          <UserAvatar avatar={opts.authorAvatar} size={16} />
+          <UserAvatar
+            avatar={opts.authorAvatar}
+            size={16}
+            hasWarning={opts.authorHasWarning}
+          />
         </View>
       )}
       <View style={[styles.metaItem, styles.maxWidth]}>

src/view/com/util/PostMuted.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Text} from './text/Text'
-
-export function PostMutedWrapper({
-  isMuted,
-  children,
-}: React.PropsWithChildren<{isMuted?: boolean}>) {
-  const pal = usePalette('default')
-  const [override, setOverride] = React.useState(false)
-  if (!isMuted || override) {
-    return <>{children}</>
-  }
-  return (
-    <View style={[styles.container, pal.view, pal.border]}>
-      <FontAwesomeIcon
-        icon={['far', 'eye-slash']}
-        style={[styles.icon, pal.text]}
-      />
-      <Text type="md" style={pal.textLight}>
-        Post from an account you muted.
-      </Text>
-      <TouchableOpacity
-        style={styles.showBtn}
-        onPress={() => setOverride(true)}>
-        <Text type="md" style={pal.link}>
-          Show post
-        </Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 14,
-    paddingHorizontal: 18,
-    borderTopWidth: 1,
-  },
-  icon: {
-    marginRight: 10,
-  },
-  showBtn: {
-    marginLeft: 'auto',
-  },
-})

src/view/com/util/UserAvatar.tsx

@@ -44,10 +44,12 @@ function DefaultAvatar({size}: {size: number}) {
 export function UserAvatar({
   size,
   avatar,
+  hasWarning,
   onSelectNewAvatar,
 }: {
   size: number
   avatar?: string | null
+  hasWarning?: boolean
   onSelectNewAvatar?: (img: PickedMedia | null) => void
 }) {
   const store = useStores()
@@ -105,6 +107,22 @@ export function UserAvatar({
       },
     },
   ]
+
+  const warning = React.useMemo(() => {
+    if (!hasWarning) {
+      return <></>
+    }
+    return (
+      <View style={[styles.warningIconContainer, pal.view]}>
+        <FontAwesomeIcon
+          icon="exclamation-circle"
+          style={styles.warningIcon}
+          size={Math.floor(size / 3)}
+        />
+      </View>
+    )
+  }, [hasWarning, size, pal])
+
   // onSelectNewAvatar is only passed as prop on the EditProfile component
   return onSelectNewAvatar ? (
     <DropdownButton
@@ -137,14 +155,20 @@ export function UserAvatar({
       </View>
     </DropdownButton>
   ) : avatar ? (
-    <HighPriorityImage
+    <View style={{width: size, height: size}}>
-      testID="userAvatarImage"
+      <HighPriorityImage
-      style={{width: size, height: size, borderRadius: Math.floor(size / 2)}}
+        testID="userAvatarImage"
-      resizeMode="stretch"
+        style={{width: size, height: size, borderRadius: Math.floor(size / 2)}}
-      source={{uri: avatar}}
+        resizeMode="stretch"
-    />
+        source={{uri: avatar}}
+      />
+      {warning}
+    </View>
   ) : (
-    <DefaultAvatar size={size} />
+    <View style={{width: size, height: size}}>
+      <DefaultAvatar size={size} />
+      {warning}
+    </View>
   )
 }
 
@@ -165,4 +189,13 @@ const styles = StyleSheet.create({
     height: 80,
     borderRadius: 40,
   },
+  warningIconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    borderRadius: 100,
+  },
+  warningIcon: {
+    color: colors.red3,
+  },
 })

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

@@ -0,0 +1,109 @@
+import React from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {Text} from '../text/Text'
+import {addStyle} from 'lib/styles'
+
+export function ContentHider({
+  testID,
+  isMuted,
+  labels,
+  style,
+  containerStyle,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  isMuted?: boolean
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+  style?: StyleProp<ViewStyle>
+  containerStyle?: StyleProp<ViewStyle>
+}>) {
+  const pal = usePalette('default')
+  const [override, setOverride] = React.useState(false)
+  const store = useStores()
+  const labelPref = store.preferences.getLabelPreference(labels)
+
+  if (!isMuted && labelPref.pref === 'show') {
+    return (
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    )
+  }
+
+  if (labelPref.pref === 'hide') {
+    return <></>
+  }
+
+  return (
+    <View style={[styles.container, pal.view, pal.border, containerStyle]}>
+      <View
+        style={[
+          styles.description,
+          pal.viewLight,
+          override && styles.descriptionOpen,
+        ]}>
+        <Text type="md" style={pal.textLight}>
+          {isMuted ? (
+            <>Post from an account you muted.</>
+          ) : (
+            <>Warning: {labelPref.desc.title}</>
+          )}
+        </Text>
+        <TouchableOpacity
+          style={styles.showBtn}
+          onPress={() => setOverride(v => !v)}>
+          <Text type="md" style={pal.link}>
+            {override ? 'Hide' : 'Show'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      {override && (
+        <View style={[styles.childrenContainer, pal.border]}>
+          <View testID={testID} style={addStyle(style, styles.child)}>
+            {children}
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+    borderWidth: 1,
+    borderRadius: 12,
+  },
+  description: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingLeft: 14,
+    paddingRight: 18,
+    borderRadius: 12,
+  },
+  descriptionOpen: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  showBtn: {
+    marginLeft: 'auto',
+  },
+  childrenContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+  },
+  child: {},
+})

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

@@ -0,0 +1,105 @@
+import React from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Link} from '../Link'
+import {Text} from '../text/Text'
+import {addStyle} from 'lib/styles'
+import {useStores} from 'state/index'
+
+export function PostHider({
+  testID,
+  href,
+  isMuted,
+  labels,
+  style,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  href: string
+  isMuted: boolean | undefined
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+  style: StyleProp<ViewStyle>
+}>) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const [override, setOverride] = React.useState(false)
+  const bg = override ? pal.viewLight : pal.view
+
+  const labelPref = store.preferences.getLabelPreference(labels)
+  if (labelPref.pref === 'hide') {
+    return <></>
+  }
+
+  if (!isMuted) {
+    // NOTE: any further label enforcement should occur in ContentContainer
+    return (
+      <Link testID={testID} style={style} href={href} noFeedback>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <>
+      <View style={[styles.description, bg, pal.border]}>
+        <FontAwesomeIcon
+          icon={['far', 'eye-slash']}
+          style={[styles.icon, pal.text]}
+        />
+        <Text type="md" style={pal.textLight}>
+          Post from an account you muted.
+        </Text>
+        <TouchableOpacity
+          style={styles.showBtn}
+          onPress={() => setOverride(v => !v)}>
+          <Text type="md" style={pal.link}>
+            {override ? 'Hide' : 'Show'} post
+          </Text>
+        </TouchableOpacity>
+      </View>
+      {override && (
+        <View style={[styles.childrenContainer, pal.border, bg]}>
+          <Link
+            testID={testID}
+            style={addStyle(style, styles.child)}
+            href={href}
+            noFeedback>
+            {children}
+          </Link>
+        </View>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  description: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderTopWidth: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  showBtn: {
+    marginLeft: 'auto',
+  },
+  childrenContainer: {
+    paddingHorizontal: 6,
+    paddingBottom: 6,
+  },
+  child: {
+    borderWidth: 1,
+    borderRadius: 12,
+  },
+})

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {getLabelValueGroup} from 'lib/labeling/helpers'
+
+export function ProfileHeaderLabels({
+  labels,
+}: {
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+}) {
+  const palErr = usePalette('error')
+  if (!labels?.length) {
+    return null
+  }
+  return (
+    <>
+      {labels.map((label, i) => {
+        const labelGroup = getLabelValueGroup(label?.val || '')
+        return (
+          <View
+            key={`${label.val}-${i}`}
+            style={[styles.container, palErr.border, palErr.view]}>
+            <FontAwesomeIcon
+              icon="circle-exclamation"
+              style={palErr.text as FontAwesomeIconStyle}
+              size={20}
+            />
+            <Text style={palErr.text}>
+              This account has been flagged for{' '}
+              {labelGroup.title.toLocaleLowerCase()}.
+            </Text>
+          </View>
+        )
+      })}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+})

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -42,6 +42,7 @@ export function QuoteEmbed({
         authorAvatar={quote.author.avatar}
         authorHandle={quote.author.handle}
         authorDisplayName={quote.author.displayName}
+        authorHasWarning={false}
         postHref={itemHref}
         timestamp={quote.indexedAt}
       />

src/view/index.ts

@@ -34,6 +34,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 {faEye} from '@fortawesome/free-solid-svg-icons/faEye'
 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'
@@ -106,8 +107,8 @@ export function setup() {
     faCompass,
     faEllipsis,
     faEnvelope,
+    faEye,
     faExclamation,
-    faQuoteLeft,
     farEyeSlash,
     faGear,
     faGlobe,
@@ -128,6 +129,7 @@ export function setup() {
     faPenNib,
     faPenToSquare,
     faPlus,
+    faQuoteLeft,
     faReply,
     faRetweet,
     faRss,

src/view/screens/Home.tsx

@@ -194,7 +194,7 @@ const FeedPage = observer(
           headerOffset={HEADER_OFFSET}
         />
         {feed.hasNewLatest && !feed.isRefreshing && (
-          <LoadLatestBtn onPress={onPressLoadLatest} />
+          <LoadLatestBtn onPress={onPressLoadLatest} label="posts" />
         )}
         <FAB
           testID="composeFAB"

src/view/screens/Notifications.tsx

@@ -1,8 +1,7 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {FlatList, View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
-import useAppState from 'react-native-appstate-hook'
 import {
   NativeStackScreenProps,
   NotificationsTabNavigatorParams,
@@ -11,13 +10,12 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
 import {InvitedUsers} from '../com/notifications/InvitedUsers'
+import {LoadLatestBtn} from 'view/com/util/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 
-const NOTIFICATIONS_POLL_INTERVAL = 15e3
-
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
   'Notifications'
@@ -28,46 +26,21 @@ export const NotificationsScreen = withAuthRequired(
     const onMainScroll = useOnMainScroll(store)
     const scrollElRef = React.useRef<FlatList>(null)
     const {screen} = useAnalytics()
-    const {appState} = useAppState({
-      onForeground: () => doPoll(true),
-    })
 
     // event handlers
     // =
-    const onPressTryAgain = () => {
+    const onPressTryAgain = React.useCallback(() => {
       store.me.notifications.refresh()
-    }
+    }, [store])
+
     const scrollToTop = React.useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: 0})
     }, [scrollElRef])
 
-    // periodic polling
+    const onPressLoadLatest = React.useCallback(() => {
-    // =
+      store.me.notifications.processQueue()
-    const doPoll = React.useCallback(
+      scrollToTop()
-      async (isForegrounding = false) => {
+    }, [store, scrollToTop])
-        if (isForegrounding) {
-          // app is foregrounding, refresh optimistically
-          store.log.debug('NotificationsScreen: Refreshing on app foreground')
-          await Promise.all([
-            store.me.notifications.loadUnreadCount(),
-            store.me.notifications.refresh(),
-          ])
-        } else if (appState === 'active') {
-          // periodic poll, refresh if there are new notifs
-          store.log.debug('NotificationsScreen: Polling for new notifications')
-          const didChange = await store.me.notifications.loadUnreadCount()
-          if (didChange) {
-            store.log.debug('NotificationsScreen: Loading new notifications')
-            await store.me.notifications.loadLatest()
-          }
-        }
-      },
-      [appState, store],
-    )
-    useEffect(() => {
-      const pollInterval = setInterval(doPoll, NOTIFICATIONS_POLL_INTERVAL)
-      return () => clearInterval(pollInterval)
-    }, [doPoll])
 
     // on-visible setup
     // =
@@ -75,16 +48,16 @@ export const NotificationsScreen = withAuthRequired(
       React.useCallback(() => {
         store.shell.setMinimalShellMode(false)
         store.log.debug('NotificationsScreen: Updating feed')
-        const softResetSub = store.onScreenSoftReset(scrollToTop)
+        const softResetSub = store.onScreenSoftReset(onPressLoadLatest)
-        store.me.notifications.loadUnreadCount()
+        store.me.notifications.syncQueue()
-        store.me.notifications.loadLatest()
+        store.me.notifications.update()
         screen('Notifications')
 
         return () => {
           softResetSub.remove()
-          store.me.notifications.markAllRead()
+          store.me.notifications.markAllUnqueuedRead()
         }
-      }, [store, screen, scrollToTop]),
+      }, [store, screen, onPressLoadLatest]),
     )
 
     return (
@@ -97,6 +70,10 @@ export const NotificationsScreen = withAuthRequired(
           onScroll={onMainScroll}
           scrollElRef={scrollElRef}
         />
+        {store.me.notifications.hasNewLatest &&
+          !store.me.notifications.isRefreshing && (
+            <LoadLatestBtn onPress={onPressLoadLatest} label="notifications" />
+          )}
       </View>
     )
   }),

src/view/screens/Search.tsx

@@ -155,6 +155,7 @@ export const SearchScreen = withAuthRequired(
                       testID={`searchAutoCompleteResult-${item.handle}`}
                       handle={item.handle}
                       displayName={item.displayName}
+                      labels={item.labels}
                       avatar={item.avatar}
                     />
                   ))}

src/view/screens/Settings.tsx

@@ -124,6 +124,11 @@ export const SettingsScreen = withAuthRequired(
       store.shell.openModal({name: 'invite-codes'})
     }, [track, store])
 
+    const onPressContentFiltering = React.useCallback(() => {
+      track('Settings:ContentfilteringButtonClicked')
+      store.shell.openModal({name: 'content-filtering-settings'})
+    }, [track, store])
+
     const onPressSignout = React.useCallback(() => {
       track('Settings:SignOutButtonClicked')
       store.session.logout()
@@ -248,6 +253,20 @@ export const SettingsScreen = withAuthRequired(
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Advanced
           </Text>
+          <TouchableOpacity
+            testID="contentFilteringBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            onPress={isSwitching ? undefined : onPressContentFiltering}>
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon="eye"
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+            <Text type="lg" style={pal.text}>
+              Content moderation
+            </Text>
+          </TouchableOpacity>
           <TouchableOpacity
             testID="changeHandleBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}

src/view/shell/desktop/Search.tsx

@@ -90,6 +90,7 @@ export const DesktopSearch = observer(function DesktopSearch() {
                   handle={item.handle}
                   displayName={item.displayName}
                   avatar={item.avatar}
+                  labels={item.labels}
                   noBorder={i === 0}
                 />
               ))}

yarn.lock

@@ -30,10 +30,10 @@
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
-"@atproto/api@0.2.5":
+"@atproto/api@0.2.6":
-  version "0.2.5"
+  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.2.5.tgz#24375497351469a522497c7f92016d0b4233a172"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.2.6.tgz#030d9d3385bb109cc028451ab26a5e24ee126b06"
-  integrity sha512-RJGhiwj6kOjrlVy7ES/SfJt3JyFwXdFZeBP4iw2ne/Ie0ZlanKhY0y9QHx5tI4rvEUP/wf0iKtaq2neczHi3bg==
+  integrity sha512-vw5D0o0ByuWd89ob8vG8RPd0tDhPi4NTyqn0lCJQDhxcYXx4I96sZ3iCUf61m7g3VNumBAoC2ZRo9kdn/6tb5w==
   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.3":
+"@atproto/pds@^0.1.4":
-  version "0.1.3"
+  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@atproto/pds/-/pds-0.1.3.tgz#601c556cd1e10306c9b741d9361bc54d70bb2869"
+  resolved "https://registry.yarnpkg.com/@atproto/pds/-/pds-0.1.4.tgz#43379912e127d6d4f79a514e785dab9b54fd7810"
-  integrity sha512-cVvmgXkzu7w1tDGGDK904sDzxF2AUqu0ij/1EU2rYmnZZAK+FTjKs8cqrJzRur9vm07A23JvBTuINtYzxHwSzA==
+  integrity sha512-vrFYL+2nNm/0fJyUIgFK9h9FRuEf4rHjU/LJV7/nBO+HA3hP3U/mTgvVxuuHHvcRsRL5AVpAJR0xWFUoYsFmmg==
   dependencies:
     "@atproto/api" "*"
     "@atproto/common" "*"
@@ -144,6 +144,7 @@
     express "^4.17.2"
     express-async-errors "^3.1.1"
     file-type "^16.5.4"
+    form-data "^4.0.0"
     handlebars "^4.7.7"
     http-errors "^2.0.0"
     http-terminator "^3.2.0"