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/DebugMod.tsx

@@ -1,29 +1,32 @@
-/* eslint-disable no-restricted-imports */
 import React from 'react'
 import {View} from 'react-native'
 import {
-  AppBskyActorDefs,
-  AppBskyFeedDefs,
-  AppBskyFeedPost,
-  ComAtprotoLabelDefs,
+  type AppBskyActorDefs,
+  type AppBskyFeedDefs,
+  type AppBskyFeedPost,
+  type ComAtprotoLabelDefs,
   interpretLabelValueDefinition,
-  LabelPreference,
+  type LabelPreference,
   LABELS,
   mock,
   moderatePost,
   moderateProfile,
-  ModerationBehavior,
-  ModerationDecision,
-  ModerationOpts,
+  type ModerationBehavior,
+  type ModerationDecision,
+  type ModerationOpts,
   RichText,
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts'
-import {FeedNotification} from '#/state/queries/notifications/types'
+import {type FeedNotification} from '#/state/queries/notifications/types'
 import {
   groupNotifications,
   shouldFilterNotif,
@@ -42,12 +45,12 @@ import {
   ChevronTop_Stroke2_Corner0_Rounded as ChevronTop,
 } from '#/components/icons/Chevron'
 import * as Layout from '#/components/Layout'
+import * as ProfileCard from '#/components/ProfileCard'
 import {H1, H3, P, Text} from '#/components/Typography'
 import {ScreenHider} from '../../components/moderation/ScreenHider'
 import {NotificationFeedItem} from '../com/notifications/NotificationFeedItem'
 import {PostThreadItem} from '../com/post-thread/PostThreadItem'
 import {PostFeedItem} from '../com/posts/PostFeedItem'
-import {ProfileCard} from '../com/profile/ProfileCard'
 
 const LABEL_VALUES: (keyof typeof LABELS)[] = Object.keys(
   LABELS,
@@ -890,6 +893,9 @@ function MockAccountCard({
   moderation: ModerationDecision
 }) {
   const t = useTheme()
+  const moderationOpts = useModerationOpts()
+
+  if (!moderationOpts) return null
 
   if (moderation.ui('profileList').filter) {
     return (
@@ -899,7 +905,7 @@ function MockAccountCard({
     )
   }
 
-  return <ProfileCard profile={profile} />
+  return <ProfileCard.Card profile={profile} moderationOpts={moderationOpts} />
 }
 
 function MockAccountScreen({

src/view/screens/ModerationBlockedAccounts.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 {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-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,
   'ModerationBlockedAccounts'
 >
 export function ModerationBlockedAccounts({}: 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,20 @@ export function ModerationBlockedAccounts({}: Props) {
   }: {
     item: ActorDefs.ProfileView
     index: number
-  }) => (
-    <ProfileCard
-      testID={`blockedAccount-${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.Default
+          testID={`blockedAccount-${index}`}
+          profile={item}
+          moderationOpts={moderationOpts}
+        />
+      </View>
+    )
+  }
   return (
     <Layout.Screen testID="blockedAccountsScreen">
       <Layout.Center style={[a.flex_1, {paddingBottom: 100}]}>

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 />