From 7b8e50aeb28b43119714716625d710be4e7cf491 Mon Sep 17 00:00:00 2001 From: DS Boyce <260543580+ds-boyce@users.noreply.github.com> Date: Wed, 2 Sep 2026 13:12:27 -0700 Subject: [PATCH] Create Mod Inbox account status banner (#11636) --- ...lamationCircle_stroke2_corner0_rounded.svg | 1 + src/components/icons/ExclamationCircle.tsx | 5 ++ .../components/AccountStatus.tsx | 79 +++++++++++++++++++ src/screens/ModerationInbox/index.tsx | 2 + 4 files changed, 87 insertions(+) create mode 100644 assets/icons/exclamationCircle_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/ExclamationCircle.tsx create mode 100644 src/screens/ModerationInbox/components/AccountStatus.tsx diff --git a/assets/icons/exclamationCircle_stroke2_corner0_rounded.svg b/assets/icons/exclamationCircle_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..e56e521960 --- /dev/null +++ b/assets/icons/exclamationCircle_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/icons/ExclamationCircle.tsx b/src/components/icons/ExclamationCircle.tsx new file mode 100644 index 0000000000..3bb1ab0583 --- /dev/null +++ b/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', +}) diff --git a/src/screens/ModerationInbox/components/AccountStatus.tsx b/src/screens/ModerationInbox/components/AccountStatus.tsx new file mode 100644 index 0000000000..8c96e6dca9 --- /dev/null +++ b/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 ( + <> + + + {title} + + + + + + + + + {title} + {description} + + + Nothing on your account is restricted right now. Strikes from + violations come off your record over time. + + + + + control.close()} /> + + + + ) +} diff --git a/src/screens/ModerationInbox/index.tsx b/src/screens/ModerationInbox/index.tsx index dca78b206a..2158f4234a 100644 --- a/src/screens/ModerationInbox/index.tsx +++ b/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() { ) : undefined} +