[Explore] Moderate trending topic avis (#8123)

* moderate trending topic avis

* filter blurs too

2 files changed, 25 insertions, 4 deletions

diff --git a/src/components/AvatarStack.tsx b/src/components/AvatarStack.tsx
index 63f5ed77a..a341a2061 100644
--- a/src/components/AvatarStack.tsx
+++ b/src/components/AvatarStack.tsx
@@ -6,7 +6,7 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 export function AvatarStack({
   profiles,
diff --git a/src/screens/Search/modules/ExploreTrendingTopics.tsx b/src/screens/Search/modules/ExploreTrendingTopics.tsx
index 88d16b393..75ca19351 100644
--- a/src/screens/Search/modules/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/modules/ExploreTrendingTopics.tsx
@@ -1,9 +1,11 @@
+import {useMemo} from 'react'
 import {Pressable, View} from 'react-native'
-import {type AppBskyUnspeccedDefs} from '@atproto/api'
+import {type AppBskyUnspeccedDefs, moderateProfile} from '@atproto/api'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useTrendingSettings} from '#/state/preferences/trending'
 import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
 import {useTrendingConfig} from '#/state/trending-config'
@@ -78,6 +80,8 @@ export function TrendRow({
       )
     : null
 
+  const actors = useModerateTrendingActors(trend.actors)
+
   return (
     <Link
       testID={trend.link}
@@ -118,8 +122,8 @@ export function TrendRow({
                   a.align_center,
                   {paddingLeft: 20},
                 ]}>
-                {trend.actors.length > 0 && (
-                  <AvatarStack size={20} profiles={trend.actors} />
+                {actors.length > 0 && (
+                  <AvatarStack size={20} profiles={actors} />
                 )}
                 <Text
                   style={[
@@ -276,3 +280,20 @@ export function TrendingTopicRowSkeleton({}: {withPosts: boolean}) {
     </View>
   )
 }
+
+function useModerateTrendingActors(
+  actors: AppBskyUnspeccedDefs.TrendView['actors'],
+) {
+  const moderationOpts = useModerationOpts()
+
+  return useMemo(() => {
+    if (!moderationOpts) return []
+
+    return actors
+      .filter(actor => {
+        const decision = moderateProfile(actor, moderationOpts)
+        return !decision.ui('avatar').filter && !decision.ui('avatar').blur
+      })
+      .slice(0, 3)
+  }, [actors, moderationOpts])
+}