Create Mod Inbox action details screen (#11657)

src/Navigation.tsx

@@ -89,8 +89,9 @@ import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
 import {Screen as ModerationVerificationSettings} from '#/screens/Moderation/VerificationSettings'
 import {ModerationInboxScreen} from '#/screens/ModerationInbox'
-import {ModerationInboxReportDetailsScreen} from '#/screens/ModerationInbox/Details'
+import {ModerationInboxReportDetailsScreen} from '#/screens/ModerationInbox/Report'
 import {ModerationInboxSettingsScreen} from '#/screens/ModerationInbox/Settings'
+import {ModerationInboxSubjectDetailsScreen} from '#/screens/ModerationInbox/Subject'
 import {Screen as ModerationInteractionSettings} from '#/screens/ModerationInteractionSettings'
 import {NotificationsActivityListScreen} from '#/screens/Notifications/ActivityList'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
@@ -196,6 +197,11 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         getComponent={() => ModerationInboxReportDetailsScreen}
         options={{title: title(msg`Your report`), requireAuth: true}}
       />
+      <Stack.Screen
+        name="ModerationInboxSubjectDetails"
+        getComponent={() => ModerationInboxSubjectDetailsScreen}
+        options={{title: title(msg`Notice`), requireAuth: true}}
+      />
       <Stack.Screen
         name="ModerationModlists"
         getComponent={() => ModerationModlistsScreen}

src/lib/routes/types.ts

@@ -26,6 +26,7 @@ export type CommonNavigatorParams = {
   ModerationInbox: undefined
   ModerationInboxSettings: undefined
   ModerationInboxReportDetails: undefined
+  ModerationInboxSubjectDetails: undefined
   ModerationModlists: undefined
   ModerationMutedAccounts: undefined
   ModerationBlockedAccounts: undefined

src/routes.ts

@@ -20,6 +20,7 @@ export const router = new Router<AllNavigatableRoutes>({
   ModerationInbox: '/moderation/inbox',
   ModerationInboxSettings: '/moderation/inbox/settings',
   ModerationInboxReportDetails: '/moderation/inbox/report/details',
+  ModerationInboxSubjectDetails: '/moderation/inbox/subject/details',
   ModerationModlists: '/moderation/modlists',
   ModerationMutedAccounts: '/moderation/muted-accounts',
   ModerationBlockedAccounts: '/moderation/blocked-accounts',

src/screens/ModerationInbox/Subject.tsx

@@ -0,0 +1,94 @@
+import {View} from 'react-native'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {NotFoundScreen} from '#/view/screens/NotFound'
+import {atoms as a, useTheme} from '#/alf'
+import * as Layout from '#/components/Layout'
+import {InlineLinkText} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
+import {ActionSummaryText} from './components/ActionSummaryText'
+import {ContentBlock} from './components/ContentBlock'
+import {SubjectPreview} from './components/SubjectPreview'
+import {Timeline} from './components/Timeline'
+
+const ANTI_HARASSMENT =
+  'https://bsky.social/about/support/community-guidelines#:~:text=coordinated%20harassment%20campaigns.-,Anti%2DHarassment,-%3A%20We%20create%20space'
+
+export function ModerationInboxSubjectDetailsScreen() {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const ax = useAnalytics()
+
+  const isEnabled = ax.features.enabled(ax.features.ModerationInboxEnable)
+
+  if (!isEnabled) {
+    return <NotFoundScreen />
+  }
+
+  return (
+    <Layout.Screen testID="moderationInboxSubjectDetailsScreen">
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content align="left">
+          <Layout.Header.TitleText>
+            <Trans>Notice</Trans>
+          </Layout.Header.TitleText>
+          <Layout.Header.SubtitleText>
+            <Trans>Bluesky Moderation Service</Trans>
+          </Layout.Header.SubtitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+
+      <Layout.Content>
+        <View style={[a.p_lg, a.gap_lg]}>
+          <ActionSummaryText
+            header={l`Appeal approved: Your post has been restored`}>
+            <Trans>
+              A moderator reviewed your appeal and reversed the original
+              decision. Your post has been restored and is visible again.
+            </Trans>
+          </ActionSummaryText>
+
+          <ContentBlock header={l`Restored post`}>
+            <SubjectPreview />
+
+            <View style={[a.gap_2xs]}>
+              <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+                <Trans>Rule violated:</Trans>
+              </Text>
+              <Text style={[a.text_md]}>
+                <Trans>
+                  <InlineLinkText
+                    to={ANTI_HARASSMENT}
+                    label={l`Community Guidelines: Harassment`}
+                    style={[a.text_md]}>
+                    Community Guidelines: Harassment
+                  </InlineLinkText>
+                </Trans>
+              </Text>
+            </View>
+          </ContentBlock>
+
+          <Timeline
+            items={[
+              {
+                title: l`Post created`,
+              },
+              {
+                title: l`Post removed`,
+              },
+              {
+                title: l`Appeal submitted`,
+              },
+              {
+                title: l`Appeal approved, post restored`,
+              },
+            ]}
+          />
+        </View>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}

src/screens/ModerationInbox/components/ActionSummaryText.tsx

@@ -13,7 +13,9 @@ export function ActionSummaryText({
   // oxlint-disable-next-line bsky-internal/avoid-unwrapped-text
   return (
     <View style={[a.gap_xs]}>
-      <H1 accessibilityRole="header" style={[a.text_xl, a.font_semi_bold]}>
+      <H1
+        accessibilityRole="header"
+        style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
         {header}
       </H1>
       <Text style={[a.text_md, t.atoms.text_contrast_high]}>{children}</Text>

src/screens/ModerationInbox/components/ContentBlock.tsx

@@ -12,7 +12,8 @@ export function ContentBlock({
   return (
     <View
       style={[
-        a.p_md,
+        a.py_md,
+        a.px_lg,
         a.gap_md,
         a.rounded_md,
         a.border,

src/screens/ModerationInbox/index.tsx

@@ -197,7 +197,7 @@ function YourAccount() {
         })}
         action={l`Violates community guideline: ${guideline}`}
         date={new Date()}
-        to="/moderation/inbox/report/details"
+        to="/moderation/inbox/subject/details"
         unread
       />
       <ReportRow
@@ -207,16 +207,16 @@ function YourAccount() {
         })}
         action={l`“${label}” – shown behind a warning`}
         date={new Date()}
-        to="/moderation/inbox/report/details"
+        to="/moderation/inbox/subject/details"
       />
       <ReportRow
         subject={l({
           context: 'moderation-report-action',
-          message: `A label was added to your post`,
+          message: `Your account was suspended`,
         })}
         action={l`Ban evasion – ${duration}, now expired`}
         date={new Date()}
-        to="/moderation/inbox/report/details"
+        to="/moderation/inbox/subject/details"
       />
     </Layout.Center>
   )