[APP-601] Add muted accounts list (#565)

* Add muted accounts list

* Fix icon for muted accounts

bskyweb/cmd/bskyweb/server.go

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

src/Navigation.tsx

@@ -49,6 +49,7 @@ import {TermsOfServiceScreen} from './view/screens/TermsOfService'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
 import {AppPasswords} from 'view/screens/AppPasswords'
+import {MutedAccounts} from 'view/screens/MutedAccounts'
 import {BlockedAccounts} from 'view/screens/BlockedAccounts'
 import {getRoutingInstrumentation} from 'lib/sentry'
 
@@ -90,6 +91,7 @@ function commonScreens(Stack: typeof HomeTab) {
       />
       <Stack.Screen name="CopyrightPolicy" component={CopyrightPolicyScreen} />
       <Stack.Screen name="AppPasswords" component={AppPasswords} />
+      <Stack.Screen name="MutedAccounts" component={MutedAccounts} />
       <Stack.Screen name="BlockedAccounts" component={BlockedAccounts} />
     </>
   )

src/lib/routes/types.ts

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

src/routes.ts

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

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

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

src/view/com/profile/ProfileCard.tsx

@@ -60,7 +60,8 @@ export const ProfileCard = observer(
         ]}
         href={`/profile/${profile.handle}`}
         title={profile.handle}
-        asAnchor>
+        asAnchor
+        anchorNoUnderline>
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <UserAvatar

src/view/com/util/Link.tsx

@@ -37,6 +37,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> {
   children?: React.ReactNode
   noFeedback?: boolean
   asAnchor?: boolean
+  anchorNoUnderline?: boolean
 }
 
 export const Link = observer(function Link({
@@ -48,6 +49,7 @@ export const Link = observer(function Link({
   noFeedback,
   asAnchor,
   accessible,
+  anchorNoUnderline,
   ...props
 }: Props) {
   const store = useStores()
@@ -78,6 +80,14 @@ export const Link = observer(function Link({
       </TouchableWithoutFeedback>
     )
   }
+
+  if (anchorNoUnderline) {
+    // @ts-ignore web only -prf
+    props.dataSet = props.dataSet || {}
+    // @ts-ignore web only -prf
+    props.dataSet.noUnderline = 1
+  }
+
   return (
     <TouchableOpacity
       testID={testID}

src/view/screens/MutedAccounts.tsx

@@ -0,0 +1,168 @@
+import React, {useMemo} from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  View,
+} from 'react-native'
+import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {Text} from '../com/util/text/Text'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {observer} from 'mobx-react-lite'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {MutedAccountsModel} from 'state/models/lists/muted-accounts'
+import {useAnalytics} from 'lib/analytics'
+import {useFocusEffect} from '@react-navigation/native'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'MutedAccounts'>
+export const MutedAccounts = withAuthRequired(
+  observer(({}: Props) => {
+    const pal = usePalette('default')
+    const store = useStores()
+    const {screen} = useAnalytics()
+    const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store])
+
+    useFocusEffect(
+      React.useCallback(() => {
+        screen('MutedAccounts')
+        store.shell.setMinimalShellMode(false)
+        mutedAccounts.refresh()
+      }, [screen, store, mutedAccounts]),
+    )
+
+    const onRefresh = React.useCallback(() => {
+      mutedAccounts.refresh()
+    }, [mutedAccounts])
+    const onEndReached = React.useCallback(() => {
+      mutedAccounts
+        .loadMore()
+        .catch(err =>
+          store.log.error('Failed to load more muted accounts', err),
+        )
+    }, [mutedAccounts, store])
+
+    const renderItem = ({
+      item,
+      index,
+    }: {
+      item: ActorDefs.ProfileView
+      index: number
+    }) => (
+      <ProfileCard
+        testID={`mutedAccount-${index}`}
+        key={item.did}
+        profile={item}
+        overrideModeration
+      />
+    )
+    return (
+      <CenteredView
+        style={[
+          styles.container,
+          isDesktopWeb && styles.containerDesktop,
+          pal.view,
+          pal.border,
+        ]}
+        testID="mutedAccountsScreen">
+        <ViewHeader title="Muted Accounts" showOnDesktop />
+        <Text
+          type="sm"
+          style={[
+            styles.description,
+            pal.text,
+            isDesktopWeb && styles.descriptionDesktop,
+          ]}>
+          Muted accounts have their posts removed from your feed and from your
+          notifications. Mutes are completely private.
+        </Text>
+        {!mutedAccounts.hasContent ? (
+          <View style={[pal.border, !isDesktopWeb && styles.flex1]}>
+            <View style={[styles.empty, pal.viewLight]}>
+              <Text type="lg" style={[pal.text, styles.emptyText]}>
+                You have not muted any accounts yet. To mute an account, go to
+                their profile and selected "Mute account" from the menu on their
+                account.
+              </Text>
+            </View>
+          </View>
+        ) : (
+          <FlatList
+            style={[!isDesktopWeb && styles.flex1]}
+            data={mutedAccounts.mutes}
+            keyExtractor={(item: ActorDefs.ProfileView) => item.did}
+            refreshControl={
+              <RefreshControl
+                refreshing={mutedAccounts.isRefreshing}
+                onRefresh={onRefresh}
+                tintColor={pal.colors.text}
+                titleColor={pal.colors.text}
+              />
+            }
+            onEndReached={onEndReached}
+            renderItem={renderItem}
+            initialNumToRender={15}
+            ListFooterComponent={() => (
+              <View style={styles.footer}>
+                {mutedAccounts.isLoading && <ActivityIndicator />}
+              </View>
+            )}
+            extraData={mutedAccounts.isLoading}
+            // @ts-ignore our .web version only -prf
+            desktopFixedHeight
+          />
+        )}
+      </CenteredView>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isDesktopWeb ? 0 : 100,
+  },
+  containerDesktop: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 12,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 30,
+    marginBottom: 14,
+  },
+  descriptionDesktop: {
+    marginTop: 14,
+  },
+
+  flex1: {
+    flex: 1,
+  },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
+  emptyText: {
+    textAlign: 'center',
+  },
+
+  footer: {
+    height: 200,
+    paddingTop: 20,
+  },
+})

src/view/screens/Settings.tsx

@@ -288,6 +288,20 @@ export const SettingsScreen = withAuthRequired(
               Content moderation
             </Text>
           </TouchableOpacity>
+          <Link
+            testID="mutedAccountsBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            href="/settings/muted-accounts">
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon={['far', 'eye-slash']}
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+            <Text type="lg" style={pal.text}>
+              Muted accounts
+            </Text>
+          </Link>
           <Link
             testID="blockedAccountsBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}

web/index.html

@@ -67,6 +67,9 @@
       a[role="link"]:hover {
         text-decoration: underline;
       }
+      a[role="link"][data-no-underline="1"]:hover {
+        text-decoration: none;
+      }
 
       /* Styling hacks */
       *[data-word-wrap] {