Display icon on chat list for system messages (#10493)

src/screens/Messages/components/ChatListItem.tsx

@@ -39,6 +39,7 @@ import {getSystemMessageInfo} from '#/components/dms/getSystemMessageInfo'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
 import {type ConvoWithDetails, parseConvoView} from '#/components/dms/util'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Envelope_Open_Stroke2_Corner0_Rounded as EnvelopeOpen} from '#/components/icons/EnveopeOpen'
 import {Trash_Stroke2_Corner0_Rounded} from '#/components/icons/Trash'
 import {Link} from '#/components/Link'
@@ -264,10 +265,16 @@ function BaseChatItem({
     isDeletedAccount ||
     (convo.kind === 'group' && convo.details.lockStatus !== 'unlocked')
 
-  const {lastMessage, lastMessageSentAt, latestReportableMessage} =
+  const {
-    useMemo(() => {
+    lastMessage,
+    LastMessageIcon,
+    lastMessageSentAt,
+    latestReportableMessage,
+  } = useMemo(() => {
     let lastMessage = l`No messages yet`
 
+    let LastMessageIcon: React.ComponentType<SVGIconProps> | null = null
+
     let lastMessageSentAt: string | null = null
 
     let latestReportableMessage: ChatBskyConvoDefs.MessageView | undefined
@@ -320,12 +327,14 @@ function BaseChatItem({
       )
       if (info) {
         lastMessage = i18n._(info.message)
+        LastMessageIcon = info.Icon
         lastMessageSentAt = convo.view.lastMessage.sentAt
       }
     }
 
     return {
       lastMessage,
+      LastMessageIcon,
       lastMessageSentAt,
       latestReportableMessage,
     }
@@ -526,17 +535,27 @@ function BaseChatItem({
                     </Text>
                   )}
 
+                  <View style={[a.flex_row, a.align_center]}>
+                    {LastMessageIcon && (
+                      <LastMessageIcon
+                        size="xs"
+                        style={[a.mr_2xs, t.atoms.text_contrast_medium]}
+                      />
+                    )}
                     <Text
                       emoji
                       numberOfLines={2}
                       style={[
                         a.text_sm,
                         a.leading_snug,
-                      hasUnread ? a.font_semi_bold : t.atoms.text_contrast_high,
+                        hasUnread
+                          ? a.font_semi_bold
+                          : t.atoms.text_contrast_high,
                         isDimStyle && t.atoms.text_contrast_medium,
                       ]}>
                       {lastMessage}
                     </Text>
+                  </View>
 
                   {postAlerts}