Replace old ProfileCard with new (#8195)

* Replace usages of old ProfileCard

* Replace Pills with Labels component

* Replace impl of ProfileCardWithFollowButton

* Remove never-used LikesDialog

* Handle missing mod opts

* Add missing profile hover

* use modern button in listmembers

* remove follow button from muted accounts list

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/screens/ModerationMutedAccounts.tsx

@@ -6,35 +6,38 @@ import {
   StyleSheet,
   View,
 } from 'react-native'
-import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {type NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams} from '#/lib/routes/types'
+import {type CommonNavigatorParams} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {ProfileCard} from '#/view/com/profile/ProfileCard'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {Text} from '#/view/com/util/text/Text'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import * as Layout from '#/components/Layout'
+import * as ProfileCard from '#/components/ProfileCard'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'ModerationMutedAccounts'
 >
 export function ModerationMutedAccounts({}: Props) {
+  const t = useTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
+  const moderationOpts = useModerationOpts()
 
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
@@ -87,14 +90,34 @@ export function ModerationMutedAccounts({}: Props) {
   }: {
     item: ActorDefs.ProfileView
     index: number
-  }) => (
-    <ProfileCard
-      testID={`mutedAccount-${index}`}
-      key={item.did}
-      profile={item}
-      noModFilter
-    />
-  )
+  }) => {
+    if (!moderationOpts) return null
+    return (
+      <View
+        style={[a.py_md, a.px_xl, a.border_t, t.atoms.border_contrast_low]}
+        key={item.did}>
+        <ProfileCard.Link profile={item} testID={`mutedAccount-${index}`}>
+          <ProfileCard.Outer>
+            <ProfileCard.Header>
+              <ProfileCard.Avatar
+                profile={item}
+                moderationOpts={moderationOpts}
+              />
+              <ProfileCard.NameAndHandle
+                profile={item}
+                moderationOpts={moderationOpts}
+              />
+            </ProfileCard.Header>
+            <ProfileCard.Labels
+              profile={item}
+              moderationOpts={moderationOpts}
+            />
+            <ProfileCard.Description profile={item} />
+          </ProfileCard.Outer>
+        </ProfileCard.Link>
+      </View>
+    )
+  }
   return (
     <Layout.Screen testID="mutedAccountsScreen">
       <ViewHeader title={_(msg`Muted Accounts`)} showOnDesktop />