Update appearance of chat list item states (#10556)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/dms/getSystemMessageInfo.ts

@@ -46,14 +46,19 @@ function getProfileAction(
 export function getSystemMessageInfo(
   data: ChatBskyConvoDefs.SystemMessageView['data'],
   relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>,
+  opts = {short: false},
 ): SystemMessageInfo | null {
   if (ChatBskyConvoDefs.isSystemMessageDataAddMember(data)) {
     const action = getProfileAction(data.member, relatedProfiles)
     return {
       Icon: JoinIcon,
       message: action
-        ? msg`${action.displayName} was added to the group`
+        ? opts.short
-        : msg`Someone was added to the group`,
+          ? msg`${action.displayName} was added`
+          : msg`${action.displayName} was added to the group`
+        : opts.short
+          ? msg`Someone was added`
+          : msg`Someone was added to the group`,
       action: action ?? undefined,
     }
   } else if (ChatBskyConvoDefs.isSystemMessageDataRemoveMember(data)) {
@@ -61,8 +66,12 @@ export function getSystemMessageInfo(
     return {
       Icon: LeaveIcon,
       message: action
-        ? msg`${action.displayName} was removed from the group`
+        ? opts.short
-        : msg`Someone was removed from the group`,
+          ? msg`${action.displayName} was removed`
+          : msg`${action.displayName} was removed from the group`
+        : opts.short
+          ? msg`Someone was removed`
+          : msg`Someone was removed from the group`,
       action: action ?? undefined,
     }
   } else if (ChatBskyConvoDefs.isSystemMessageDataMemberJoin(data)) {
@@ -70,8 +79,12 @@ export function getSystemMessageInfo(
     return {
       Icon: JoinIcon,
       message: action
-        ? msg`${action.displayName} joined the group`
+        ? opts.short
-        : msg`Someone joined the group`,
+          ? msg`${action.displayName} joined`
+          : msg`${action.displayName} joined the group`
+        : opts.short
+          ? msg`Someone joined`
+          : msg`Someone joined the group`,
       action: action ?? undefined,
     }
   } else if (ChatBskyConvoDefs.isSystemMessageDataMemberLeave(data)) {
@@ -79,8 +92,12 @@ export function getSystemMessageInfo(
     return {
       Icon: LeaveIcon,
       message: action
-        ? msg`${action.displayName} left the group`
+        ? opts.short
-        : msg`Someone left the group`,
+          ? msg`${action.displayName} left`
+          : msg`${action.displayName} left the group`
+        : opts.short
+          ? msg`Someone left`
+          : msg`Someone left the group`,
       action: action ?? undefined,
     }
   } else if (ChatBskyConvoDefs.isSystemMessageDataLockConvo(data)) {
@@ -92,9 +109,10 @@ export function getSystemMessageInfo(
   } else if (ChatBskyConvoDefs.isSystemMessageDataEditGroup(data)) {
     return {
       Icon: PencilIcon,
-      message: data.newName
+      message:
-        ? msg`Chat title changed to ${data.newName}`
+        data.newName && !opts.short
-        : msg`Chat title changed`,
+          ? msg`Chat title changed to ${data.newName}`
+          : msg`Chat title changed`,
     }
   } else if (ChatBskyConvoDefs.isSystemMessageDataCreateJoinLink(data)) {
     return {

src/screens/Messages/components/ChatListItem.tsx

@@ -345,6 +345,7 @@ function BaseChatItem({
       const info = getSystemMessageInfo(
         convo.view.lastMessage.data,
         new Map(convo.view.members.map(m => [m.did, m])),
+        {short: true},
       )
       if (info) {
         lastMessage = i18n._(info.message)
@@ -425,6 +426,8 @@ function BaseChatItem({
     },
   }
 
+  const isGroupConvo = convo.kind === 'group'
+
   const actions = hasUnread
     ? {
         leftFirst: markReadAction,
@@ -481,12 +484,19 @@ function BaseChatItem({
               <View
                 style={[
                   a.flex_row,
-                  isDeletedAccount ? a.align_center : a.align_start,
+                  isDeletedAccount || isGroupConvo
+                    ? a.align_center
+                    : a.align_start,
                   a.flex_1,
                   a.px_lg,
                   a.py_md,
                   a.gap_md,
                   isWithinSplitView && a.rounded_sm,
+                  {
+                    backgroundColor: hasUnread
+                      ? t.palette.primary_25
+                      : t.palette.contrast_0,
+                  },
                   (hovered || pressed || focused) && t.atoms.bg_contrast_25,
                   selected && t.atoms.bg_contrast_50,
                 ]}>
@@ -495,7 +505,8 @@ function BaseChatItem({
 
                 <View
                   style={[a.flex_1, a.justify_center, web({paddingRight: 40})]}>
-                  <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}>
+                  <View
+                    style={[a.w_full, a.flex_row, a.align_center, a.pb_2xs]}>
                     <View style={[a.flex_shrink]}>
                       <Text
                         emoji
@@ -530,7 +541,7 @@ function BaseChatItem({
                                 t.atoms.text_contrast_medium,
                                 web({whiteSpace: 'preserve nowrap'}),
                               ]}>
-                              &middot; {timeElapsed}
+                              {timeElapsed}
                             </Text>
                           )}
                         </TimeElapsed>
@@ -545,13 +556,28 @@ function BaseChatItem({
                           web({whiteSpace: 'preserve nowrap'}),
                         ]}>
                         {' '}
-                        &middot;{' '}
                         <BellStroke
                           size="xs"
                           style={[t.atoms.text_contrast_medium]}
                         />
                       </Text>
                     )}
+                    {hasUnread && (
+                      <View
+                        style={[
+                          a.rounded_full,
+                          {
+                            backgroundColor: isDimStyle
+                              ? t.palette.contrast_200
+                              : t.palette.primary_500,
+                            height: 8,
+                            width: 8,
+                            marginLeft: 6,
+                          },
+                          web({whiteSpace: 'preserve nowrap'}),
+                        ]}
+                      />
+                    )}
                   </View>
 
                   {subtitle && (
@@ -569,7 +595,12 @@ function BaseChatItem({
                     {LastMessageIcon && (
                       <LastMessageIcon
                         size="xs"
-                        style={[a.mr_2xs, t.atoms.text_contrast_medium]}
+                        style={[
+                          a.mr_2xs,
+                          hasUnread
+                            ? t.atoms.text_contrast_high
+                            : t.atoms.text_contrast_medium,
+                        ]}
                       />
                     )}
                     <Text
@@ -578,9 +609,7 @@ function BaseChatItem({
                       style={[
                         a.text_sm,
                         a.leading_snug,
-                        hasUnread
+                        hasUnread ? a.font_medium : t.atoms.text_contrast_high,
-                          ? a.font_semi_bold
-                          : t.atoms.text_contrast_high,
                         isDimStyle && t.atoms.text_contrast_medium,
                       ]}>
                       {lastMessage}
@@ -589,24 +618,6 @@ function BaseChatItem({
 
                   {children}
                 </View>
-
-                {hasUnread && (
-                  <View
-                    style={[
-                      a.absolute,
-                      a.rounded_full,
-                      {
-                        backgroundColor: isDimStyle
-                          ? t.palette.contrast_200
-                          : t.palette.primary_500,
-                        height: 7,
-                        width: 7,
-                        top: 15,
-                        right: 12,
-                      },
-                    ]}
-                  />
-                )}
               </View>
             )}
           </Link>