[APP-635] Mutelists (#601)

* Add lists and profilelist screens

* Implement lists screen and lists-list in profiles

* Add empty states to the lists screen

* Switch (mostly) from blocklists to mutelists

* Rework: create a new moderation screen and move everything related under it

* Fix moderation screen on desktop web

* Tune the empty state code

* Change content moderation modal to content filtering

* Add CreateMuteList modal

* Implement mutelist creation

* Add lists listings

* Add the ability to create new mutelists

* Add 'add to list' tool

* Satisfy the hashtag hyphen haters

* Add update/delete/subscribe/unsubscribe to lists

* Show which list caused a mute

* Add list un/subscribe

* Add the mute override when viewing a profile's posts

* Update to latest backend

* Add simulation tests and tune some behaviors

* Fix lint

* Bump deps

* Fix list refresh after creation

* Mute list subscriptions -> Mute lists

16 files changed, 1507 insertions, 35 deletions

diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx
new file mode 100644
index 000000000..7cbdaaf64
--- /dev/null
+++ b/src/view/com/lists/ListCard.tsx
@@ -0,0 +1,155 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api'
+import {Link} from '../util/Link'
+import {Text} from '../util/text/Text'
+import {RichText as RichTextCom} from '../util/text/RichText'
+import {UserAvatar} from '../util/UserAvatar'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+
+export const ListCard = ({
+  testID,
+  list,
+  noBg,
+  noBorder,
+  renderButton,
+}: {
+  testID?: string
+  list: AppBskyGraphDefs.ListView
+  noBg?: boolean
+  noBorder?: boolean
+  renderButton?: () => JSX.Element
+}) => {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const rkey = React.useMemo(() => {
+    try {
+      const urip = new AtUri(list.uri)
+      return urip.rkey
+    } catch {
+      return ''
+    }
+  }, [list])
+
+  const descriptionRichText = React.useMemo(() => {
+    if (list.description) {
+      return new RichText({
+        text: list.description,
+        facets: list.descriptionFacets,
+      })
+    }
+    return undefined
+  }, [list])
+
+  return (
+    <Link
+      testID={testID}
+      style={[
+        styles.outer,
+        pal.border,
+        noBorder && styles.outerNoBorder,
+        !noBg && pal.view,
+      ]}
+      href={`/profile/${list.creator.did}/lists/${rkey}`}
+      title={list.name}
+      asAnchor
+      anchorNoUnderline>
+      <View style={styles.layout}>
+        <View style={styles.layoutAvi}>
+          <UserAvatar size={40} avatar={list.avatar} />
+        </View>
+        <View style={styles.layoutContent}>
+          <Text
+            type="lg"
+            style={[s.bold, pal.text]}
+            numberOfLines={1}
+            lineHeight={1.2}>
+            {sanitizeDisplayName(list.name)}
+          </Text>
+          <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+            {list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'} by{' '}
+            {list.creator.did === store.me.did
+              ? 'you'
+              : `@${list.creator.handle}`}
+          </Text>
+          {!!list.viewer?.muted && (
+            <View style={s.flexRow}>
+              <View style={[s.mt5, pal.btn, styles.pill]}>
+                <Text type="xs" style={pal.text}>
+                  Subscribed
+                </Text>
+              </View>
+            </View>
+          )}
+        </View>
+        {renderButton ? (
+          <View style={styles.layoutButton}>{renderButton()}</View>
+        ) : undefined}
+      </View>
+      {descriptionRichText ? (
+        <View style={styles.details}>
+          <RichTextCom
+            style={pal.text}
+            numberOfLines={20}
+            richText={descriptionRichText}
+          />
+        </View>
+      ) : undefined}
+    </Link>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    borderTopWidth: 1,
+    paddingHorizontal: 6,
+  },
+  outerNoBorder: {
+    borderTopWidth: 0,
+  },
+  layout: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  layoutAvi: {
+    width: 54,
+    paddingLeft: 4,
+    paddingTop: 8,
+    paddingBottom: 10,
+  },
+  avi: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    resizeMode: 'cover',
+  },
+  layoutContent: {
+    flex: 1,
+    paddingRight: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  layoutButton: {
+    paddingRight: 10,
+  },
+  details: {
+    paddingLeft: 54,
+    paddingRight: 10,
+    paddingBottom: 10,
+  },
+  pill: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+  },
+  btn: {
+    paddingVertical: 7,
+    borderRadius: 50,
+    marginLeft: 6,
+    paddingHorizontal: 14,
+  },
+})
diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx
new file mode 100644
index 000000000..52b728cb9
--- /dev/null
+++ b/src/view/com/lists/ListItems.tsx
@@ -0,0 +1,387 @@
+import React, {MutableRefObject} from 'react'
+import {
+  ActivityIndicator,
+  RefreshControl,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {AppBskyActorDefs, AppBskyGraphDefs, RichText} from '@atproto/api'
+import {observer} from 'mobx-react-lite'
+import {FlatList} from '../util/Views'
+import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
+import {ProfileCard} from '../profile/ProfileCard'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import {RichText as RichTextCom} from '../util/text/RichText'
+import {UserAvatar} from '../util/UserAvatar'
+import {TextLink} from '../util/Link'
+import {ListModel} from 'state/models/content/list'
+import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useStores} from 'state/index'
+import {s} from 'lib/styles'
+import {isDesktopWeb} from 'platform/detection'
+
+const LOADING_ITEM = {_reactKey: '__loading__'}
+const HEADER_ITEM = {_reactKey: '__header__'}
+const EMPTY_ITEM = {_reactKey: '__empty__'}
+const ERROR_ITEM = {_reactKey: '__error__'}
+const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
+
+export const ListItems = observer(
+  ({
+    list,
+    style,
+    scrollElRef,
+    onPressTryAgain,
+    onToggleSubscribed,
+    onPressEditList,
+    onPressDeleteList,
+    renderEmptyState,
+    testID,
+    headerOffset = 0,
+  }: {
+    list: ListModel
+    style?: StyleProp<ViewStyle>
+    scrollElRef?: MutableRefObject<FlatList<any> | null>
+    onPressTryAgain?: () => void
+    onToggleSubscribed?: () => void
+    onPressEditList?: () => void
+    onPressDeleteList?: () => void
+    renderEmptyState?: () => JSX.Element
+    testID?: string
+    headerOffset?: number
+  }) => {
+    const pal = usePalette('default')
+    const store = useStores()
+    const {track} = useAnalytics()
+    const [isRefreshing, setIsRefreshing] = React.useState(false)
+
+    const data = React.useMemo(() => {
+      let items: any[] = [HEADER_ITEM]
+      if (list.hasLoaded) {
+        if (list.hasError) {
+          items = items.concat([ERROR_ITEM])
+        }
+        if (list.isEmpty) {
+          items = items.concat([EMPTY_ITEM])
+        } else {
+          items = items.concat(list.items)
+        }
+        if (list.loadMoreError) {
+          items = items.concat([LOAD_MORE_ERROR_ITEM])
+        }
+      } else if (list.isLoading) {
+        items = items.concat([LOADING_ITEM])
+      }
+      return items
+    }, [
+      list.hasError,
+      list.hasLoaded,
+      list.isLoading,
+      list.isEmpty,
+      list.items,
+      list.loadMoreError,
+    ])
+
+    // events
+    // =
+
+    const onRefresh = React.useCallback(async () => {
+      track('Lists:onRefresh')
+      setIsRefreshing(true)
+      try {
+        await list.refresh()
+      } catch (err) {
+        list.rootStore.log.error('Failed to refresh lists', err)
+      }
+      setIsRefreshing(false)
+    }, [list, track, setIsRefreshing])
+
+    const onEndReached = React.useCallback(async () => {
+      track('Lists:onEndReached')
+      try {
+        await list.loadMore()
+      } catch (err) {
+        list.rootStore.log.error('Failed to load more lists', err)
+      }
+    }, [list, track])
+
+    const onPressRetryLoadMore = React.useCallback(() => {
+      list.retryLoadMore()
+    }, [list])
+
+    const onPressEditMembership = React.useCallback(
+      (profile: AppBskyActorDefs.ProfileViewBasic) => {
+        store.shell.openModal({
+          name: 'list-add-remove-user',
+          subject: profile.did,
+          displayName: profile.displayName || profile.handle,
+          onUpdate() {
+            list.refresh()
+          },
+        })
+      },
+      [store, list],
+    )
+
+    // rendering
+    // =
+
+    const renderMemberButton = React.useCallback(
+      (profile: AppBskyActorDefs.ProfileViewBasic) => {
+        if (!list.isOwner) {
+          return null
+        }
+        return (
+          <Button
+            type="default"
+            label="Edit"
+            onPress={() => onPressEditMembership(profile)}
+          />
+        )
+      },
+      [list, onPressEditMembership],
+    )
+
+    const renderItem = React.useCallback(
+      ({item}: {item: any}) => {
+        if (item === EMPTY_ITEM) {
+          if (renderEmptyState) {
+            return renderEmptyState()
+          }
+          return <View />
+        } else if (item === HEADER_ITEM) {
+          return list.list ? (
+            <ListHeader
+              list={list.list}
+              isOwner={list.isOwner}
+              onToggleSubscribed={onToggleSubscribed}
+              onPressEditList={onPressEditList}
+              onPressDeleteList={onPressDeleteList}
+            />
+          ) : null
+        } else if (item === ERROR_ITEM) {
+          return (
+            <ErrorMessage
+              message={list.error}
+              onPressTryAgain={onPressTryAgain}
+            />
+          )
+        } else if (item === LOAD_MORE_ERROR_ITEM) {
+          return (
+            <LoadMoreRetryBtn
+              label="There was an issue fetching the list. Tap here to try again."
+              onPress={onPressRetryLoadMore}
+            />
+          )
+        } else if (item === LOADING_ITEM) {
+          return <ProfileCardFeedLoadingPlaceholder />
+        }
+        return (
+          <ProfileCard
+            testID={`user-${
+              (item as AppBskyGraphDefs.ListItemView).subject.handle
+            }`}
+            profile={(item as AppBskyGraphDefs.ListItemView).subject}
+            renderButton={renderMemberButton}
+          />
+        )
+      },
+      [
+        list,
+        onPressTryAgain,
+        onPressRetryLoadMore,
+        renderMemberButton,
+        onPressEditList,
+        onPressDeleteList,
+        onToggleSubscribed,
+        renderEmptyState,
+      ],
+    )
+
+    const Footer = React.useCallback(
+      () =>
+        list.isLoading ? (
+          <View style={styles.feedFooter}>
+            <ActivityIndicator />
+          </View>
+        ) : (
+          <View />
+        ),
+      [list],
+    )
+
+    return (
+      <View testID={testID} style={style}>
+        {data.length > 0 && (
+          <FlatList
+            testID={testID ? `${testID}-flatlist` : undefined}
+            ref={scrollElRef}
+            data={data}
+            keyExtractor={item => item._reactKey}
+            renderItem={renderItem}
+            ListFooterComponent={Footer}
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={onRefresh}
+                tintColor={pal.colors.text}
+                titleColor={pal.colors.text}
+                progressViewOffset={headerOffset}
+              />
+            }
+            contentContainerStyle={s.contentContainer}
+            style={{paddingTop: headerOffset}}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={0.6}
+            removeClippedSubviews={true}
+            contentOffset={{x: 0, y: headerOffset * -1}}
+            // @ts-ignore our .web version only -prf
+            desktopFixedHeight
+          />
+        )}
+      </View>
+    )
+  },
+)
+
+const ListHeader = observer(
+  ({
+    list,
+    isOwner,
+    onToggleSubscribed,
+    onPressEditList,
+    onPressDeleteList,
+  }: {
+    list: AppBskyGraphDefs.ListView
+    isOwner: boolean
+    onToggleSubscribed?: () => void
+    onPressEditList?: () => void
+    onPressDeleteList?: () => void
+  }) => {
+    const pal = usePalette('default')
+    const store = useStores()
+    const descriptionRT = React.useMemo(
+      () =>
+        list?.description &&
+        new RichText({text: list.description, facets: list.descriptionFacets}),
+      [list],
+    )
+    return (
+      <>
+        <View style={[styles.header, pal.border]}>
+          <View style={s.flex1}>
+            <Text testID="listName" type="title-xl" style={[pal.text, s.bold]}>
+              {list.name}
+            </Text>
+            {list && (
+              <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+                {list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list '}
+                by{' '}
+                {list.creator.did === store.me.did ? (
+                  'you'
+                ) : (
+                  <TextLink
+                    text={`@${list.creator.handle}`}
+                    href={`/profile/${list.creator.did}`}
+                  />
+                )}
+              </Text>
+            )}
+            {descriptionRT && (
+              <RichTextCom
+                testID="listDescription"
+                style={[pal.text, styles.headerDescription]}
+                richText={descriptionRT}
+              />
+            )}
+            {isDesktopWeb && (
+              <View style={styles.headerBtns}>
+                {list.viewer?.muted ? (
+                  <Button
+                    type="inverted"
+                    label="Unsubscribe"
+                    accessibilityLabel="Unsubscribe from this list"
+                    accessibilityHint="Stops muting the users included in this list"
+                    onPress={onToggleSubscribed}
+                  />
+                ) : (
+                  <Button
+                    type="primary"
+                    label="Subscribe & Mute"
+                    accessibilityLabel="Subscribe to this list"
+                    accessibilityHint="Mutes the users included in this list"
+                    onPress={onToggleSubscribed}
+                  />
+                )}
+                {isOwner && (
+                  <Button
+                    type="default"
+                    label="Edit List"
+                    accessibilityLabel="Edit list"
+                    accessibilityHint="Opens a modal to edit the mutelist"
+                    onPress={onPressEditList}
+                  />
+                )}
+                {isOwner && (
+                  <Button
+                    type="default"
+                    label="Delete List"
+                    accessibilityLabel="Delete list"
+                    accessibilityHint="Deletes the mutelist"
+                    onPress={onPressDeleteList}
+                  />
+                )}
+              </View>
+            )}
+          </View>
+          <View>
+            <UserAvatar avatar={list.avatar} size={64} />
+          </View>
+        </View>
+        <View style={[styles.fakeSelector, pal.border]}>
+          <View
+            style={[styles.fakeSelectorItem, {borderColor: pal.colors.link}]}>
+            <Text type="md-medium" style={[pal.text]}>
+              Muted users
+            </Text>
+          </View>
+        </View>
+      </>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+  },
+  headerDescription: {
+    marginTop: 8,
+  },
+  headerBtns: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 12,
+  },
+  fakeSelector: {
+    flexDirection: 'row',
+    paddingHorizontal: isDesktopWeb ? 16 : 6,
+  },
+  fakeSelectorItem: {
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    borderBottomWidth: 3,
+  },
+  feedFooter: {paddingTop: 20},
+})
diff --git a/src/view/com/lists/ListsList.tsx b/src/view/com/lists/ListsList.tsx
new file mode 100644
index 000000000..88b71acc0
--- /dev/null
+++ b/src/view/com/lists/ListsList.tsx
@@ -0,0 +1,240 @@
+import React, {MutableRefObject} from 'react'
+import {
+  ActivityIndicator,
+  RefreshControl,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {FlatList} from '../util/Views'
+import {ListCard} from './ListCard'
+import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import {ListsListModel} from 'state/models/lists/lists-list'
+import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+
+const LOADING_ITEM = {_reactKey: '__loading__'}
+const CREATENEW_ITEM = {_reactKey: '__loading__'}
+const EMPTY_ITEM = {_reactKey: '__empty__'}
+const ERROR_ITEM = {_reactKey: '__error__'}
+const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
+
+export const ListsList = observer(
+  ({
+    listsList,
+    showAddBtns,
+    style,
+    scrollElRef,
+    onPressTryAgain,
+    onPressCreateNew,
+    renderItem,
+    renderEmptyState,
+    testID,
+    headerOffset = 0,
+  }: {
+    listsList: ListsListModel
+    showAddBtns?: boolean
+    style?: StyleProp<ViewStyle>
+    scrollElRef?: MutableRefObject<FlatList<any> | null>
+    onPressCreateNew: () => void
+    onPressTryAgain?: () => void
+    renderItem?: (list: GraphDefs.ListView) => JSX.Element
+    renderEmptyState?: () => JSX.Element
+    testID?: string
+    headerOffset?: number
+  }) => {
+    const pal = usePalette('default')
+    const {track} = useAnalytics()
+    const [isRefreshing, setIsRefreshing] = React.useState(false)
+
+    const data = React.useMemo(() => {
+      let items: any[] = []
+      if (listsList.hasLoaded) {
+        if (listsList.hasError) {
+          items = items.concat([ERROR_ITEM])
+        }
+        if (listsList.isEmpty) {
+          items = items.concat([EMPTY_ITEM])
+        } else {
+          if (showAddBtns) {
+            items = items.concat([CREATENEW_ITEM])
+          }
+          items = items.concat(listsList.lists)
+        }
+        if (listsList.loadMoreError) {
+          items = items.concat([LOAD_MORE_ERROR_ITEM])
+        }
+      } else if (listsList.isLoading) {
+        items = items.concat([LOADING_ITEM])
+      }
+      return items
+    }, [
+      listsList.hasError,
+      listsList.hasLoaded,
+      listsList.isLoading,
+      listsList.isEmpty,
+      listsList.lists,
+      listsList.loadMoreError,
+      showAddBtns,
+    ])
+
+    // events
+    // =
+
+    const onRefresh = React.useCallback(async () => {
+      track('Lists:onRefresh')
+      setIsRefreshing(true)
+      try {
+        await listsList.refresh()
+      } catch (err) {
+        listsList.rootStore.log.error('Failed to refresh lists', err)
+      }
+      setIsRefreshing(false)
+    }, [listsList, track, setIsRefreshing])
+
+    const onEndReached = React.useCallback(async () => {
+      track('Lists:onEndReached')
+      try {
+        await listsList.loadMore()
+      } catch (err) {
+        listsList.rootStore.log.error('Failed to load more lists', err)
+      }
+    }, [listsList, track])
+
+    const onPressRetryLoadMore = React.useCallback(() => {
+      listsList.retryLoadMore()
+    }, [listsList])
+
+    // rendering
+    // =
+
+    const renderItemInner = React.useCallback(
+      ({item}: {item: any}) => {
+        if (item === EMPTY_ITEM) {
+          if (renderEmptyState) {
+            return renderEmptyState()
+          }
+          return <View />
+        } else if (item === CREATENEW_ITEM) {
+          return <CreateNewItem onPress={onPressCreateNew} />
+        } else if (item === ERROR_ITEM) {
+          return (
+            <ErrorMessage
+              message={listsList.error}
+              onPressTryAgain={onPressTryAgain}
+            />
+          )
+        } else if (item === LOAD_MORE_ERROR_ITEM) {
+          return (
+            <LoadMoreRetryBtn
+              label="There was an issue fetching your lists. Tap here to try again."
+              onPress={onPressRetryLoadMore}
+            />
+          )
+        } else if (item === LOADING_ITEM) {
+          return <ProfileCardFeedLoadingPlaceholder />
+        }
+        return renderItem ? (
+          renderItem(item)
+        ) : (
+          <ListCard list={item} testID={`list-${item.name}`} />
+        )
+      },
+      [
+        listsList,
+        onPressTryAgain,
+        onPressRetryLoadMore,
+        onPressCreateNew,
+        renderItem,
+        renderEmptyState,
+      ],
+    )
+
+    const Footer = React.useCallback(
+      () =>
+        listsList.isLoading ? (
+          <View style={styles.feedFooter}>
+            <ActivityIndicator />
+          </View>
+        ) : (
+          <View />
+        ),
+      [listsList],
+    )
+
+    return (
+      <View testID={testID} style={style}>
+        {data.length > 0 && (
+          <FlatList
+            testID={testID ? `${testID}-flatlist` : undefined}
+            ref={scrollElRef}
+            data={data}
+            keyExtractor={item => item._reactKey}
+            renderItem={renderItemInner}
+            ListFooterComponent={Footer}
+            refreshControl={
+              <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={onRefresh}
+                tintColor={pal.colors.text}
+                titleColor={pal.colors.text}
+                progressViewOffset={headerOffset}
+              />
+            }
+            contentContainerStyle={s.contentContainer}
+            style={{paddingTop: headerOffset}}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={0.6}
+            removeClippedSubviews={true}
+            contentOffset={{x: 0, y: headerOffset * -1}}
+            // @ts-ignore our .web version only -prf
+            desktopFixedHeight
+          />
+        )}
+      </View>
+    )
+  },
+)
+
+function CreateNewItem({onPress}: {onPress: () => void}) {
+  const pal = usePalette('default')
+
+  return (
+    <View style={[styles.createNewContainer]}>
+      <Button type="default" onPress={onPress} style={styles.createNewButton}>
+        <FontAwesomeIcon icon="plus" style={pal.text as FontAwesomeIconStyle} />
+        <Text type="button" style={pal.text}>
+          New Mute List
+        </Text>
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  createNewContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 18,
+    paddingTop: 18,
+    paddingBottom: 16,
+  },
+  createNewButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  feedFooter: {paddingTop: 20},
+})
diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx
index 30b465562..5db0ef5a5 100644
--- a/src/view/com/modals/ContentFilteringSettings.tsx
+++ b/src/view/com/modals/ContentFilteringSettings.tsx
@@ -21,8 +21,8 @@ export function Component({}: {}) {
   }, [store])
 
   return (
-    <View testID="contentModerationModal" style={[pal.view, styles.container]}>
-      <Text style={[pal.text, styles.title]}>Content Moderation</Text>
+    <View testID="contentFilteringModal" style={[pal.view, styles.container]}>
+      <Text style={[pal.text, styles.title]}>Content Filtering</Text>
       <ScrollView style={styles.scrollContainer}>
         <ContentLabelPref
           group="nsfw"
@@ -50,7 +50,7 @@ export function Component({}: {}) {
           testID="sendReportBtn"
           onPress={onPressDone}
           accessibilityRole="button"
-          accessibilityLabel="Confirm content moderation settings"
+          accessibilityLabel="Confirm content filtering settings"
           accessibilityHint="">
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx
new file mode 100644
index 000000000..0970770e2
--- /dev/null
+++ b/src/view/com/modals/CreateOrEditMuteList.tsx
@@ -0,0 +1,273 @@
+import React, {useState, useCallback} from 'react'
+import * as Toast from '../util/Toast'
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {Image as RNImage} from 'react-native-image-crop-picker'
+import {Text} from '../util/text/Text'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {useStores} from 'state/index'
+import {ListModel} from 'state/models/content/list'
+import {s, colors, gradients} from 'lib/styles'
+import {enforceLen} from 'lib/strings/helpers'
+import {compressIfNeeded} from 'lib/media/manip'
+import {UserAvatar} from '../util/UserAvatar'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
+import {useAnalytics} from 'lib/analytics'
+import {cleanError, isNetworkError} from 'lib/strings/errors'
+import {isDesktopWeb} from 'platform/detection'
+
+const MAX_NAME = 64 // todo
+const MAX_DESCRIPTION = 300 // todo
+
+export const snapPoints = ['fullscreen']
+
+export function Component({
+  onSave,
+  list,
+}: {
+  onSave?: (uri: string) => void
+  list?: ListModel
+}) {
+  const store = useStores()
+  const [error, setError] = useState<string>('')
+  const pal = usePalette('default')
+  const theme = useTheme()
+  const {track} = useAnalytics()
+
+  const [isProcessing, setProcessing] = useState<boolean>(false)
+  const [name, setName] = useState<string>(list?.list.name || '')
+  const [description, setDescription] = useState<string>(
+    list?.list.description || '',
+  )
+  const [avatar, setAvatar] = useState<string | undefined>(list?.list.avatar)
+  const [newAvatar, setNewAvatar] = useState<RNImage | undefined | null>()
+
+  const onPressCancel = useCallback(() => {
+    store.shell.closeModal()
+  }, [store])
+
+  const onSelectNewAvatar = useCallback(
+    async (img: RNImage | null) => {
+      if (!img) {
+        setNewAvatar(null)
+        setAvatar(null)
+        return
+      }
+      track('CreateMuteList:AvatarSelected')
+      try {
+        const finalImg = await compressIfNeeded(img, 1000000)
+        setNewAvatar(finalImg)
+        setAvatar(finalImg.path)
+      } catch (e: any) {
+        setError(cleanError(e))
+      }
+    },
+    [track, setNewAvatar, setAvatar, setError],
+  )
+
+  const onPressSave = useCallback(async () => {
+    track('CreateMuteList:Save')
+    const nameTrimmed = name.trim()
+    if (!nameTrimmed) {
+      setError('Name is required')
+      return
+    }
+    setProcessing(true)
+    if (error) {
+      setError('')
+    }
+    try {
+      if (list) {
+        await list.updateMetadata({
+          name: nameTrimmed,
+          description: description.trim(),
+          avatar: newAvatar,
+        })
+        Toast.show('Mute list updated')
+        onSave?.(list.uri)
+      } else {
+        const res = await ListModel.createModList(store, {
+          name,
+          description,
+          avatar: newAvatar,
+        })
+        Toast.show('Mute list created')
+        onSave?.(res.uri)
+      }
+      store.shell.closeModal()
+    } catch (e: any) {
+      if (isNetworkError(e)) {
+        setError(
+          'Failed to create the mute list. Check your internet connection and try again.',
+        )
+      } else {
+        setError(cleanError(e))
+      }
+    }
+    setProcessing(false)
+  }, [
+    track,
+    setProcessing,
+    setError,
+    error,
+    onSave,
+    store,
+    name,
+    description,
+    newAvatar,
+    list,
+  ])
+
+  return (
+    <KeyboardAvoidingView behavior="height">
+      <ScrollView
+        style={[pal.view, styles.container]}
+        testID="createOrEditMuteListModal">
+        <Text style={[styles.title, pal.text]}>
+          {list ? 'Edit Mute List' : 'New Mute List'}
+        </Text>
+        {error !== '' && (
+          <View style={styles.errorContainer}>
+            <ErrorMessage message={error} />
+          </View>
+        )}
+        <Text style={[styles.label, pal.text]}>List Avatar</Text>
+        <View style={[styles.avi, {borderColor: pal.colors.background}]}>
+          <UserAvatar
+            size={80}
+            avatar={avatar}
+            onSelectNewAvatar={onSelectNewAvatar}
+          />
+        </View>
+        <View style={styles.form}>
+          <View>
+            <Text style={[styles.label, pal.text]}>List Name</Text>
+            <TextInput
+              testID="editNameInput"
+              style={[styles.textInput, pal.border, pal.text]}
+              placeholder="e.g. Spammers"
+              placeholderTextColor={colors.gray4}
+              value={name}
+              onChangeText={v => setName(enforceLen(v, MAX_NAME))}
+              accessible={true}
+              accessibilityLabel="Name"
+              accessibilityHint="Set the list's name"
+            />
+          </View>
+          <View style={s.pb10}>
+            <Text style={[styles.label, pal.text]}>Description</Text>
+            <TextInput
+              testID="editDescriptionInput"
+              style={[styles.textArea, pal.border, pal.text]}
+              placeholder="e.g. Users that repeatedly reply with ads."
+              placeholderTextColor={colors.gray4}
+              keyboardAppearance={theme.colorScheme}
+              multiline
+              value={description}
+              onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
+              accessible={true}
+              accessibilityLabel="Description"
+              accessibilityHint="Edit your list's description"
+            />
+          </View>
+          {isProcessing ? (
+            <View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}>
+              <ActivityIndicator />
+            </View>
+          ) : (
+            <TouchableOpacity
+              testID="saveBtn"
+              style={s.mt10}
+              onPress={onPressSave}
+              accessibilityRole="button"
+              accessibilityLabel="Save"
+              accessibilityHint="Creates the mute list">
+              <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]}>Save</Text>
+              </LinearGradient>
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            testID="cancelBtn"
+            style={s.mt5}
+            onPress={onPressCancel}
+            accessibilityRole="button"
+            accessibilityLabel="Cancel creating the mute list"
+            accessibilityHint=""
+            onAccessibilityEscape={onPressCancel}>
+            <View style={[styles.btn]}>
+              <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: isDesktopWeb ? 0 : 16,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 18,
+  },
+  label: {
+    fontWeight: 'bold',
+    paddingHorizontal: 4,
+    paddingBottom: 4,
+    marginTop: 20,
+  },
+  form: {
+    paddingHorizontal: 6,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 16,
+  },
+  textArea: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    fontSize: 16,
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 10,
+    marginBottom: 10,
+  },
+  avi: {
+    width: 84,
+    height: 84,
+    borderWidth: 2,
+    borderRadius: 42,
+    marginTop: 4,
+  },
+  errorContainer: {marginTop: 20},
+})
diff --git a/src/view/com/modals/ListAddRemoveUser.tsx b/src/view/com/modals/ListAddRemoveUser.tsx
new file mode 100644
index 000000000..a2775df9f
--- /dev/null
+++ b/src/view/com/modals/ListAddRemoveUser.tsx
@@ -0,0 +1,255 @@
+import React, {useCallback} from 'react'
+import {observer} from 'mobx-react-lite'
+import {Pressable, StyleSheet, View} from 'react-native'
+import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../util/text/Text'
+import {UserAvatar} from '../util/UserAvatar'
+import {ListsList} from '../lists/ListsList'
+import {ListsListModel} from 'state/models/lists/lists-list'
+import {ListMembershipModel} from 'state/models/content/list-membership'
+import {EmptyStateWithButton} from '../util/EmptyStateWithButton'
+import {Button} from '../util/forms/Button'
+import * as Toast from '../util/Toast'
+import {useStores} from 'state/index'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb, isAndroid} from 'platform/detection'
+
+export const snapPoints = ['fullscreen']
+
+export const Component = observer(
+  ({
+    subject,
+    displayName,
+    onUpdate,
+  }: {
+    subject: string
+    displayName: string
+    onUpdate?: () => void
+  }) => {
+    const store = useStores()
+    const pal = usePalette('default')
+    const palPrimary = usePalette('primary')
+    const palInverted = usePalette('inverted')
+    const [selected, setSelected] = React.useState([])
+
+    const listsList: ListsListModel = React.useMemo(
+      () => new ListsListModel(store, store.me.did),
+      [store],
+    )
+    const memberships: ListMembershipModel = React.useMemo(
+      () => new ListMembershipModel(store, subject),
+      [store, subject],
+    )
+    React.useEffect(() => {
+      listsList.refresh()
+      memberships.fetch().then(
+        () => {
+          setSelected(memberships.memberships.map(m => m.value.list))
+        },
+        err => {
+          store.log.error('Failed to fetch memberships', {err})
+        },
+      )
+    }, [memberships, listsList, store, setSelected])
+
+    const onPressCancel = useCallback(() => {
+      store.shell.closeModal()
+    }, [store])
+
+    const onPressSave = useCallback(async () => {
+      try {
+        await memberships.updateTo(selected)
+      } catch (err) {
+        store.log.error('Failed to update memberships', {err})
+        return
+      }
+      Toast.show('Lists updated')
+      onUpdate?.()
+      store.shell.closeModal()
+    }, [store, selected, memberships, onUpdate])
+
+    const onPressNewMuteList = useCallback(() => {
+      store.shell.openModal({
+        name: 'create-or-edit-mute-list',
+        onSave: (_uri: string) => {
+          listsList.refresh()
+        },
+      })
+    }, [store, listsList])
+
+    const onToggleSelected = useCallback(
+      (uri: string) => {
+        if (selected.includes(uri)) {
+          setSelected(selected.filter(uri2 => uri2 !== uri))
+        } else {
+          setSelected([...selected, uri])
+        }
+      },
+      [selected, setSelected],
+    )
+
+    const renderItem = useCallback(
+      (list: GraphDefs.ListView) => {
+        const isSelected = selected.includes(list.uri)
+        return (
+          <Pressable
+            testID={`toggleBtn-${list.name}`}
+            style={[styles.listItem, pal.border]}
+            accessibilityLabel={`${isSelected ? 'Remove from' : 'Add to'} ${
+              list.name
+            }`}
+            accessibilityHint="Toggle their inclusion in this list"
+            onPress={() => onToggleSelected(list.uri)}>
+            <View style={styles.listItemAvi}>
+              <UserAvatar size={40} avatar={list.avatar} />
+            </View>
+            <View style={styles.listItemContent}>
+              <Text
+                type="lg"
+                style={[s.bold, pal.text]}
+                numberOfLines={1}
+                lineHeight={1.2}>
+                {sanitizeDisplayName(list.name)}
+              </Text>
+              <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+                {list.purpose === 'app.bsky.graph.defs#modlist' && 'Mute list'}{' '}
+                by{' '}
+                {list.creator.did === store.me.did
+                  ? 'you'
+                  : `@${list.creator.handle}`}
+              </Text>
+            </View>
+            <View
+              style={
+                isSelected
+                  ? [styles.checkbox, palPrimary.border, palPrimary.view]
+                  : [styles.checkbox, pal.borderDark]
+              }>
+              {isSelected && (
+                <FontAwesomeIcon
+                  icon="check"
+                  style={palInverted.text as FontAwesomeIconStyle}
+                />
+              )}
+            </View>
+          </Pressable>
+        )
+      },
+      [pal, palPrimary, palInverted, onToggleSelected, selected, store.me.did],
+    )
+
+    const renderEmptyState = React.useCallback(() => {
+      return (
+        <EmptyStateWithButton
+          icon="users-slash"
+          message="You can subscribe to mute lists to automatically mute all of the users they include. Mute lists are public but your subscription to a mute list is private."
+          buttonLabel="New Mute List"
+          onPress={onPressNewMuteList}
+        />
+      )
+    }, [onPressNewMuteList])
+
+    return (
+      <View testID="listAddRemoveUserModal" style={s.hContentRegion}>
+        <Text style={[styles.title, pal.text]}>Add {displayName} to lists</Text>
+        <ListsList
+          listsList={listsList}
+          showAddBtns
+          onPressCreateNew={onPressNewMuteList}
+          renderItem={renderItem}
+          renderEmptyState={renderEmptyState}
+          style={[styles.list, pal.border]}
+        />
+        <View style={[styles.btns, pal.border]}>
+          <Button
+            testID="cancelBtn"
+            type="default"
+            onPress={onPressCancel}
+            style={styles.footerBtn}
+            accessibilityRole="button"
+            accessibilityLabel="Cancel this modal"
+            accessibilityHint=""
+            onAccessibilityEscape={onPressCancel}
+            label="Cancel"
+          />
+          <Button
+            testID="saveBtn"
+            type="primary"
+            onPress={onPressSave}
+            style={styles.footerBtn}
+            accessibilityRole="button"
+            accessibilityLabel="Save these changes"
+            accessibilityHint=""
+            onAccessibilityEscape={onPressSave}
+            label="Save Changes"
+          />
+        </View>
+      </View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: isDesktopWeb ? 0 : 16,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 10,
+  },
+  list: {
+    flex: 1,
+    borderTopWidth: 1,
+  },
+  btns: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    paddingTop: 10,
+    paddingBottom: isAndroid ? 10 : 0,
+    borderTopWidth: 1,
+  },
+  footerBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  listItemAvi: {
+    width: 54,
+    paddingLeft: 4,
+    paddingTop: 8,
+    paddingBottom: 10,
+  },
+  listItemContent: {
+    flex: 1,
+    paddingRight: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  checkbox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    marginRight: 8,
+  },
+})
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index 18b7ae4c4..08ee74b02 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -12,6 +12,8 @@ import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as RepostModal from './Repost'
+import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
+import * as ListAddRemoveUserModal from './ListAddRemoveUser'
 import * as AltImageModal from './AltImage'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
@@ -66,6 +68,12 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'report-account') {
     snapPoints = ReportAccountModal.snapPoints
     element = <ReportAccountModal.Component {...activeModal} />
+  } else if (activeModal?.name === 'create-or-edit-mute-list') {
+    snapPoints = CreateOrEditMuteListModal.snapPoints
+    element = <CreateOrEditMuteListModal.Component {...activeModal} />
+  } else if (activeModal?.name === 'list-add-remove-user') {
+    snapPoints = ListAddRemoveUserModal.snapPoints
+    element = <ListAddRemoveUserModal.Component {...activeModal} />
   } else if (activeModal?.name === 'delete-account') {
     snapPoints = DeleteAccountModal.snapPoints
     element = <DeleteAccountModal.Component />
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index c9f2c4952..f2cf72a03 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -11,6 +11,8 @@ import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as ReportAccountModal from './ReportAccount'
+import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
+import * as ListAddRemoveUserModal from './ListAddRemoveUser'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as RepostModal from './Repost'
 import * as CropImageModal from './crop-image/CropImage.web'
@@ -69,6 +71,10 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <ReportPostModal.Component {...modal} />
   } else if (modal.name === 'report-account') {
     element = <ReportAccountModal.Component {...modal} />
+  } else if (modal.name === 'create-or-edit-mute-list') {
+    element = <CreateOrEditMuteListModal.Component {...modal} />
+  } else if (modal.name === 'list-add-remove-user') {
+    element = <ListAddRemoveUserModal.Component {...modal} />
   } else if (modal.name === 'crop-image') {
     element = <CropImageModal.Component {...modal} />
   } else if (modal.name === 'delete-account') {
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 628128e8f..a0b72a93f 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -65,7 +65,7 @@ export function TabBar({
     ],
   }
 
-  const onLayout = () => {
+  const onLayout = React.useCallback(() => {
     const promises = []
     for (let i = 0; i < items.length; i++) {
       promises.push(
@@ -86,14 +86,17 @@ export function TabBar({
     Promise.all(promises).then((layouts: Layout[]) => {
       setItemLayouts(layouts)
     })
-  }
+  }, [containerRef, itemRefs, setItemLayouts, items.length])
 
-  const onPressItem = (index: number) => {
-    onSelect?.(index)
-    if (index === selectedPage) {
-      onPressSelected?.()
-    }
-  }
+  const onPressItem = React.useCallback(
+    (index: number) => {
+      onSelect?.(index)
+      if (index === selectedPage) {
+        onPressSelected?.()
+      }
+    },
+    [onSelect, onPressSelected, selectedPage],
+  )
 
   return (
     <View
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index b4708cf53..1084fb6fc 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -8,6 +8,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {PostsFeedItemModel} from 'state/models/feeds/posts'
+import {ModerationBehaviorCode} from 'lib/labeling/types'
 import {Link, DesktopWebTextLink} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {UserInfoText} from '../util/UserInfoText'
@@ -31,13 +32,14 @@ export const FeedItem = observer(function ({
   isThreadChild,
   isThreadParent,
   showFollowBtn,
+  ignoreMuteFor,
 }: {
   item: PostsFeedItemModel
   isThreadChild?: boolean
   isThreadParent?: boolean
   showReplyLine?: boolean
   showFollowBtn?: boolean
-  ignoreMuteFor?: string // NOTE currently disabled, will be addressed in the next PR -prf
+  ignoreMuteFor?: string
 }) {
   const store = useStores()
   const pal = usePalette('default')
@@ -142,12 +144,22 @@ export const FeedItem = observer(function ({
     isThreadParent ? styles.outerNoBottom : undefined,
   ]
 
+  // moderation override
+  let moderation = item.moderation.list
+  if (
+    ignoreMuteFor === item.post.author.did &&
+    moderation.isMute &&
+    !moderation.noOverride
+  ) {
+    moderation = {behavior: ModerationBehaviorCode.Show}
+  }
+
   return (
     <PostHider
       testID={`feedItem-by-${item.post.author.handle}`}
       style={outerStyles}
       href={itemHref}
-      moderation={item.moderation.list}>
+      moderation={moderation}>
       {isThreadChild && (
         <View
           style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
@@ -237,7 +249,7 @@ export const FeedItem = observer(function ({
             </View>
           )}
           <ContentHider
-            moderation={item.moderation.list}
+            moderation={moderation}
             containerStyle={styles.contentHider}>
             {item.richText?.text ? (
               <View style={styles.postTextContainer}>
diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx
index 5a191ac10..824fd0c4b 100644
--- a/src/view/com/posts/FeedSlice.tsx
+++ b/src/view/com/posts/FeedSlice.tsx
@@ -19,7 +19,9 @@ export function FeedSlice({
   ignoreMuteFor?: string
 }) {
   if (slice.moderation.list.behavior === ModerationBehaviorCode.Hide) {
-    return null
+    if (!ignoreMuteFor && !slice.moderation.list.noOverride) {
+      return null
+    }
   }
   if (slice.isThread && slice.items.length > 3) {
     const last = slice.items.length - 1
diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index 12d631833..42c4edef5 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -32,7 +32,7 @@ export const ProfileCard = observer(
     noBorder?: boolean
     followers?: AppBskyActorDefs.ProfileView[] | undefined
     overrideModeration?: boolean
-    renderButton?: () => JSX.Element
+    renderButton?: (profile: AppBskyActorDefs.ProfileViewBasic) => JSX.Element
   }) => {
     const store = useStores()
     const pal = usePalette('default')
@@ -92,7 +92,7 @@ export const ProfileCard = observer(
             )}
           </View>
           {renderButton ? (
-            <View style={styles.layoutButton}>{renderButton()}</View>
+            <View style={styles.layoutButton}>{renderButton(profile)}</View>
           ) : undefined}
         </View>
         {profile.description ? (
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index dee788aff..3b9ca67c9 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -23,6 +23,7 @@ import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton'
 import * as Toast from '../util/Toast'
 import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {Text} from '../util/text/Text'
+import {TextLink} from '../util/Link'
 import {RichText} from '../util/text/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
@@ -30,6 +31,7 @@ import {ProfileHeaderWarnings} from '../util/moderation/ProfileHeaderWarnings'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
+import {listUriToHref} from 'lib/strings/url-helpers'
 import {isDesktopWeb, isNative} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'
 import {shareUrl} from 'lib/sharing'
@@ -146,12 +148,21 @@ const ProfileHeaderLoaded = observer(
       navigation.push('ProfileFollows', {name: view.handle})
     }, [track, navigation, view])
 
-    const onPressShare = React.useCallback(async () => {
+    const onPressShare = React.useCallback(() => {
       track('ProfileHeader:ShareButtonClicked')
       const url = toShareUrl(`/profile/${view.handle}`)
       shareUrl(url)
     }, [track, view])
 
+    const onPressAddRemoveLists = React.useCallback(() => {
+      track('ProfileHeader:AddToListsButtonClicked')
+      store.shell.openModal({
+        name: 'list-add-remove-user',
+        subject: view.did,
+        displayName: view.displayName || view.handle,
+      })
+    }, [track, view, store])
+
     const onPressMuteAccount = React.useCallback(async () => {
       track('ProfileHeader:MuteAccountButtonClicked')
       try {
@@ -233,6 +244,11 @@ const ProfileHeaderLoaded = observer(
           label: 'Share',
           onPress: onPressShare,
         },
+        {
+          testID: 'profileHeaderDropdownListAddRemoveBtn',
+          label: 'Add to Lists',
+          onPress: onPressAddRemoveLists,
+        },
       ]
       if (!isMe) {
         items.push({sep: true})
@@ -269,6 +285,7 @@ const ProfileHeaderLoaded = observer(
       onPressUnblockAccount,
       onPressBlockAccount,
       onPressReportAccount,
+      onPressAddRemoveLists,
     ])
 
     const blockHide = !isMe && (view.viewer.blocking || view.viewer.blockedBy)
@@ -422,31 +439,42 @@ const ProfileHeaderLoaded = observer(
             {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]}>
+                style={[styles.moderationNotice, pal.viewLight]}>
+                <FontAwesomeIcon icon="ban" style={[pal.text]} />
+                <Text type="lg-medium" style={pal.text}>
                   Account blocked
                 </Text>
               </View>
             ) : view.viewer.muted ? (
               <View
                 testID="profileHeaderMutedNotice"
-                style={[styles.moderationNotice, pal.view, pal.border]}>
+                style={[styles.moderationNotice, pal.viewLight]}>
                 <FontAwesomeIcon
                   icon={['far', 'eye-slash']}
-                  style={[pal.text, s.mr5]}
+                  style={[pal.text]}
                 />
-                <Text type="md" style={[s.mr2, pal.text]}>
-                  Account muted
+                <Text type="lg-medium" style={pal.text}>
+                  Account muted{' '}
+                  {view.viewer.mutedByList && (
+                    <Text type="lg-medium" style={pal.text}>
+                      by{' '}
+                      <TextLink
+                        type="lg-medium"
+                        style={pal.link}
+                        href={listUriToHref(view.viewer.mutedByList.uri)}
+                        text={view.viewer.mutedByList.name}
+                      />
+                    </Text>
+                  )}
                 </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]}>
+                style={[styles.moderationNotice, pal.viewLight]}>
+                <FontAwesomeIcon icon="ban" style={[pal.text]} />
+                <Text type="lg-medium" style={pal.text}>
                   This account has blocked you
                 </Text>
               </View>
@@ -595,10 +623,10 @@ const styles = StyleSheet.create({
   moderationNotice: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 1,
     borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    gap: 8,
   },
 
   br40: {borderRadius: 40},
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
index 2b2c4e657..a495fcd3f 100644
--- a/src/view/com/util/EmptyState.tsx
+++ b/src/view/com/util/EmptyState.tsx
@@ -10,17 +10,19 @@ import {UserGroupIcon} from 'lib/icons'
 import {usePalette} from 'lib/hooks/usePalette'
 
 export function EmptyState({
+  testID,
   icon,
   message,
   style,
 }: {
+  testID?: string
   icon: IconProp | 'user-group'
   message: string
   style?: StyleProp<ViewStyle>
 }) {
   const pal = usePalette('default')
   return (
-    <View style={[styles.container, style]}>
+    <View testID={testID} style={[styles.container, style]}>
       <View style={styles.iconContainer}>
         {icon === 'user-group' ? (
           <UserGroupIcon size="64" style={styles.icon} />
diff --git a/src/view/com/util/EmptyStateWithButton.tsx b/src/view/com/util/EmptyStateWithButton.tsx
new file mode 100644
index 000000000..008ca2bdb
--- /dev/null
+++ b/src/view/com/util/EmptyStateWithButton.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {Text} from './text/Text'
+import {Button} from './forms/Button'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+
+interface Props {
+  testID?: string
+  icon: IconProp
+  message: string
+  buttonLabel: string
+  onPress: () => void
+}
+
+export function EmptyStateWithButton(props: Props) {
+  const pal = usePalette('default')
+  const palInverted = usePalette('inverted')
+
+  return (
+    <View testID={props.testID} style={styles.container}>
+      <View style={styles.iconContainer}>
+        <FontAwesomeIcon
+          icon={props.icon}
+          style={[styles.icon, pal.text]}
+          size={62}
+        />
+      </View>
+      <Text type="xl-medium" style={[s.textCenter, pal.text]}>
+        {props.message}
+      </Text>
+      <View style={styles.btns}>
+        <Button
+          testID={props.testID ? `${props.testID}-button` : undefined}
+          type="inverted"
+          style={styles.btn}
+          onPress={props.onPress}>
+          <FontAwesomeIcon
+            icon="plus"
+            style={palInverted.text as FontAwesomeIconStyle}
+            size={14}
+          />
+          <Text type="lg-medium" style={palInverted.text}>
+            {props.buttonLabel}
+          </Text>
+        </Button>
+      </View>
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    paddingVertical: 40,
+    paddingHorizontal: 30,
+  },
+  iconContainer: {
+    marginBottom: 16,
+  },
+  icon: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  btns: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  btn: {
+    gap: 10,
+    marginVertical: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 30,
+  },
+  notice: {
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginHorizontal: 30,
+  },
+})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 7f5b5b7c2..97802394e 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -20,11 +20,13 @@ export const ViewHeader = observer(function ({
   canGoBack,
   hideOnScroll,
   showOnDesktop,
+  renderButton,
 }: {
   title: string
   canGoBack?: boolean
   hideOnScroll?: boolean
   showOnDesktop?: boolean
+  renderButton?: () => JSX.Element
 }) {
   const pal = usePalette('default')
   const store = useStores()
@@ -46,7 +48,7 @@ export const ViewHeader = observer(function ({
 
   if (isDesktopWeb) {
     if (showOnDesktop) {
-      return <DesktopWebHeader title={title} />
+      return <DesktopWebHeader title={title} renderButton={renderButton} />
     }
     return null
   } else {
@@ -79,13 +81,23 @@ export const ViewHeader = observer(function ({
             {title}
           </Text>
         </View>
-        <View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
+        {renderButton ? (
+          renderButton()
+        ) : (
+          <View style={canGoBack ? styles.backBtn : styles.backBtnWide} />
+        )}
       </Container>
     )
   }
 })
 
-function DesktopWebHeader({title}: {title: string}) {
+function DesktopWebHeader({
+  title,
+  renderButton,
+}: {
+  title: string
+  renderButton?: () => JSX.Element
+}) {
   const pal = usePalette('default')
   return (
     <CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
@@ -94,6 +106,7 @@ function DesktopWebHeader({title}: {title: string}) {
           {title}
         </Text>
       </View>
+      {renderButton?.()}
     </CenteredView>
   )
 }