Update appearance of chat list item states (#10556)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
DS Boyce
2026-05-20 07:17:25 -07:00
committed by GitHub
parent 46a4f6cbee
commit 9cad883ab8
2 changed files with 66 additions and 37 deletions
+29 -11
View File
@@ -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`
: msg`Someone was added to the group`,
? opts.short
? 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`
: msg`Someone was removed from the group`,
? opts.short
? 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`
: msg`Someone joined the group`,
? opts.short
? 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`
: msg`Someone left the group`,
? opts.short
? 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
? msg`Chat title changed to ${data.newName}`
: msg`Chat title changed`,
message:
data.newName && !opts.short
? msg`Chat title changed to ${data.newName}`
: msg`Chat title changed`,
}
} else if (ChatBskyConvoDefs.isSystemMessageDataCreateJoinLink(data)) {
return {
@@ -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
? a.font_semi_bold
: t.atoms.text_contrast_high,
hasUnread ? a.font_medium : 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>