Group runs of system messages under a single toggle (#10388)

src/components/dms/SystemMessageItem.tsx

@@ -2,9 +2,13 @@ import {View} from 'react-native'
 import {type ChatBskyActorDefs} from '@atproto/api'
 import {useLingui} from '@lingui/react/macro'
 
+import {makeProfileLink} from '#/lib/routes/links'
 import {type ConvoItem} from '#/state/messages/convo/types'
+import {useInviteLinkDialog} from '#/screens/Messages/components/InviteLinkDialogProvider'
 import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {getSystemMessageInfo} from '#/components/dms/getSystemMessageInfo'
+import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function SystemMessageItem({
@@ -15,14 +19,16 @@ export function SystemMessageItem({
   relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
 }) {
   const t = useTheme()
-  const {i18n} = useLingui()
+  const {i18n, t: l} = useLingui()
+  const inviteLinkControl = useInviteLinkDialog()
 
   const info = getSystemMessageInfo(item.message.data, relatedProfiles)
   if (!info) return null
 
-  const {Icon, message} = info
+  const {Icon, action} = info
+  const text = i18n._(info.message)
 
-  return (
+  const row = (
     <View
       style={[
         a.w_full,
@@ -40,8 +46,30 @@ export function SystemMessageItem({
           t.atoms.text_contrast_medium,
           {includeFontPadding: false, textAlignVertical: 'center'},
         ]}>
-        {i18n._(message)}
+        {text}
       </Text>
     </View>
   )
+
+  switch (action?.kind) {
+    case 'profile':
+      return (
+        <Link
+          to={makeProfileLink(action.profile)}
+          label={text}
+          accessibilityHint={l`Opens profile`}
+          style={a.w_full}>
+          {row}
+        </Link>
+      )
+    case 'inviteLink':
+      if (!inviteLinkControl) return row
+      return (
+        <Button label={text} onPress={inviteLinkControl.open} style={a.w_full}>
+          {row}
+        </Button>
+      )
+    default:
+      return row
+  }
 }