Create Mod Inbox account status banner (#11636)

assets/icons/exclamationCircle_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M20 12a8 8 0 1 0-16 0 8 8 0 0 0 16 0m2 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-10.843.256-.47-3.768a1.324 1.324 0 1 1 2.627 0l-.47 3.768a.85.85 0 0 1-1.687 0M12 17a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4"/></svg>

src/components/icons/ExclamationCircle.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ExclamationCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M20 12a8 8 0 1 0-16 0 8 8 0 0 0 16 0m2 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-10.843.256-.47-3.768a1.324 1.324 0 1 1 2.627 0l-.47 3.768a.85.85 0 0 1-1.687 0M12 17a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4',
+})

src/screens/ModerationInbox/components/AccountStatus.tsx

@@ -0,0 +1,79 @@
+import {Pressable, View} from 'react-native'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {atoms as a, useTheme} from '#/alf'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {ExclamationCircle_Stroke2_Corner0_Rounded as ExclamationCircleIcon} from '#/components/icons/ExclamationCircle'
+import * as Prompt from '#/components/Prompt'
+import {Text} from '#/components/Typography'
+
+export function AccountStatus({
+  status,
+}: {
+  status: 'good' | 'warning' | 'atRisk'
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+
+  const control = Prompt.usePromptControl()
+
+  if (status === 'good') {
+    return null
+  }
+
+  const Icon = status === 'atRisk' ? ExclamationCircleIcon : CircleInfoIcon
+  const iconColor =
+    status === 'atRisk' ? t.palette.negative_500 : t.palette.yellow
+
+  const title =
+    status === 'atRisk'
+      ? l`Your account is at risk of permanent suspension`
+      : l`Your account has strikes on record`
+  const description =
+    status === 'atRisk'
+      ? l`Your account has repeated violations of our Community Guidelines. Another violation may result in your account being permanently suspended.`
+      : l`Bluesky has taken action on your account or content for violating our community guidelines. Further violations will lead to stronger enforcement, including suspension.`
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={l`Show account status`}
+        accessibilityHint=""
+        onPress={control.open}
+        style={[
+          a.p_lg,
+          a.flex_row,
+          a.align_center,
+          a.justify_between,
+          a.gap_sm,
+          a.border_b,
+          t.atoms.border_contrast_low,
+        ]}>
+        <Icon size="md" style={{color: iconColor}} />
+        <Text style={[a.flex_1, a.text_sm, a.font_semi_bold]}>{title}</Text>
+        <ChevronRightIcon size="md" style={[t.atoms.text_contrast_medium]} />
+      </Pressable>
+
+      <Prompt.Outer control={control}>
+        <Prompt.Content>
+          <View style={[a.py_lg, a.align_center, a.justify_center]}>
+            <Icon size="4xl" style={{color: iconColor}} />
+          </View>
+          <Prompt.TitleText>{title}</Prompt.TitleText>
+          <Prompt.DescriptionText>{description}</Prompt.DescriptionText>
+          <Prompt.DescriptionText>
+            <Trans>
+              Nothing on your account is restricted right now. Strikes from
+              violations come off your record over time.
+            </Trans>
+          </Prompt.DescriptionText>
+        </Prompt.Content>
+        <Prompt.Actions>
+          <Prompt.Action cta={l`Done`} onPress={() => control.close()} />
+        </Prompt.Actions>
+      </Prompt.Outer>
+    </>
+  )
+}

src/screens/ModerationInbox/index.tsx

@@ -10,6 +10,7 @@ import {atoms as a, useTheme} from '#/alf'
 import * as Layout from '#/components/Layout'
 import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
 import {useAnalytics} from '#/analytics'
+import {AccountStatus} from './components/AccountStatus'
 import {FilterMenu} from './components/FilterMenu'
 import {ReportRow} from './components/ReportRow'
 
@@ -171,6 +172,7 @@ function YourAccount() {
           </SimpleInlineLinkText>
         ) : undefined}
       </View>
+      <AccountStatus status="warning" />
       <ReportRow
         subject={l({
           context: 'moderation-report-action',