✨ Show warning for high profile accounts based on follower count (#235)

* ✨ Show warning for high profile accounts based on follower count

* 💄 Use better number formatting

app/actions/ModActionPanel/QuickAction.tsx

@@ -1,6 +1,7 @@
 // TODO: This is badly named so that we can rebuild this component without breaking the old one
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
+  AtUri,
   ComAtprotoModerationDefs,
   ToolsOzoneModerationDefs,
   ToolsOzoneModerationEmitEvent,
@@ -12,7 +13,6 @@ import { Checkbox, FormLabel, Input, Textarea } from '@/common/forms'
 import { PropsOf } from '@/lib/types'
 import { BlobList } from './BlobList'
 import {
-  LabelChip,
   LabelList,
   LabelListEmpty,
   diffLabels,
@@ -55,6 +55,7 @@ import {
   usePermission,
 } from '@/shell/ConfigurationContext'
 import { SubjectTag } from 'components/tags/SubjectTag'
+import { HighProfileWarning } from '@/repositories/HighProfileWarning'
 
 const FORM_ID = 'mod-action-panel'
 const useBreakpoint = createBreakpoint({ xs: 340, sm: 640 })
@@ -168,7 +169,7 @@ function Form(
   const { data: subjectStatus, refetch: refetchSubjectStatus } =
     useSubjectStatusQuery(subject)
 
-  const { data: { record, repo } = {}, refetch: refetchSubject } =
+  const { data: { record, repo, profile } = {}, refetch: refetchSubject } =
     useSubjectQuery(subject)
 
   const isSubjectDid = subject.startsWith('did:')
@@ -621,6 +622,11 @@ function Form(
               <ModEventList subject={subject} />
             ) : (
               <div className="px-1">
+                {profile && (
+                  <div className="mb-2">
+                    <HighProfileWarning profile={profile} />
+                  </div>
+                )}
                 <div className="relative flex flex-row gap-1 items-center">
                   <ModEventSelectorButton
                     subjectStatus={subjectStatus}
@@ -828,22 +834,37 @@ function Form(
 function useSubjectQuery(subject: string) {
   const labelerAgent = useLabelerAgent()
 
+  const getProfile = async (actor: string) => {
+    try {
+      const { data: profile } = await labelerAgent.app.bsky.actor.getProfile({
+        actor,
+      })
+      return profile
+    } catch (e) {
+      return undefined
+    }
+  }
+
   return useQuery({
     // subject of the report
     queryKey: ['modActionSubject', { subject }],
     queryFn: async () => {
       if (subject.startsWith('did:')) {
-        const { data: repo } =
-          await labelerAgent.api.tools.ozone.moderation.getRepo({
+        const [{ data: repo }, profile] = await Promise.all([
+          labelerAgent.tools.ozone.moderation.getRepo({
             did: subject,
-          })
-        return { repo }
+          }),
+          getProfile(subject),
+        ])
+        return { repo, profile }
       } else if (subject.startsWith('at://')) {
-        const { data: record } =
-          await labelerAgent.api.tools.ozone.moderation.getRecord({
+        const [{ data: record }, profile] = await Promise.all([
+          labelerAgent.tools.ozone.moderation.getRecord({
             uri: subject,
-          })
-        return { record }
+          }),
+          getProfile(new AtUri(subject).host),
+        ])
+        return { record, profile }
       } else {
         return {}
       }

components/repositories/HighProfileWarning.tsx

@@ -0,0 +1,32 @@
+import { Alert } from '@/common/Alert'
+import { HIGH_PROFILE_FOLLOWER_THRESHOLD } from '@/lib/constants'
+import { AppBskyActorDefs } from '@atproto/api'
+
+const numberFormatter = new Intl.NumberFormat('en', {
+  notation: 'compact',
+  compactDisplay: 'short',
+})
+
+export const HighProfileWarning = ({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+}) => {
+  const { followersCount } = profile
+
+  if (!followersCount || followersCount < HIGH_PROFILE_FOLLOWER_THRESHOLD) {
+    return null
+  }
+
+  return (
+    <Alert
+      type="warning"
+      title="High profile account"
+      body={`This user has more than ${numberFormatter.format(
+        HIGH_PROFILE_FOLLOWER_THRESHOLD,
+      )} followers (${numberFormatter.format(
+        followersCount,
+      )} total). Please take caution when moderating this account.`}
+    />
+  )
+}

lib/constants.ts

@@ -46,3 +46,8 @@ export const YOUNG_ACCOUNT_MARKER_THRESHOLD_IN_DAYS = process.env
 export const DOMAINS_ALLOWING_EMAIL_COMMUNICATION = (
   process.env.NEXT_PUBLIC_DOMAINS_ALLOWING_EMAIL_COMMUNICATION || ''
 ).split(',')
+
+export const HIGH_PROFILE_FOLLOWER_THRESHOLD = process.env
+  .NEXT_PUBLIC_HIGH_PROFILE_FOLLOWER_THRESHOLD
+  ? parseInt(process.env.NEXT_PUBLIC_HIGH_PROFILE_FOLLOWER_THRESHOLD)
+  : Infinity