benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chat-list): show separate pin and mute indicators without replacing avatar
Some checks failed
CI / test (push) Failing after 1m38s
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 20:52:54 +03:00
parent f12f9e590c
commit fb0e4dabba
1 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/components/ChatList.tsx
View File

@@ -240,7 +240,7 @@ export function ChatList() {
<img alt="chat avatar" className="h-10 w-10 rounded-full object-cover" src={chatAvatar(chat)!} /> <img alt="chat avatar" className="h-10 w-10 rounded-full object-cover" src={chatAvatar(chat)!} />
) : ( ) : (
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sky-500/30 text-sm font-semibold uppercase text-sky-100">
{chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)} {(chat.display_title || chat.title || chat.type).slice(0, 1)}
</div> </div>
)} )}
{chat.type === "private" && chat.counterpart_is_online ? ( {chat.type === "private" && chat.counterpart_is_online ? (
@@ -250,24 +250,36 @@ export function ChatList() {
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<p className="truncate text-sm font-semibold">{chatLabel(chat)}</p> <p className="truncate text-sm font-semibold">{chatLabel(chat)}</p>
{(chat.unread_count ?? 0) > 0 || (chat.unread_mentions_count ?? 0) > 0 ? ( <span className="inline-flex shrink-0 items-center gap-1.5">
<span className="inline-flex items-center gap-1"> {chat.pinned ? (
{(chat.unread_mentions_count ?? 0) > 0 ? ( <span className="text-[11px] text-slate-400" title="Pinned chat">
<span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950"> 📌
@ </span>
</span> ) : null}
) : null} {chat.muted ? (
{(chat.unread_count ?? 0) > 0 ? ( <span className="text-[11px] text-slate-400" title="Muted chat">
<span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950"> 🔕
{chat.unread_count} </span>
</span> ) : null}
) : null} {(chat.unread_count ?? 0) > 0 || (chat.unread_mentions_count ?? 0) > 0 ? (
</span> <span className="inline-flex items-center gap-1">
) : ( {(chat.unread_mentions_count ?? 0) > 0 ? (
<span className="shrink-0 text-[11px] text-slate-400"> <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
{formatChatListTime(chat.last_message_created_at)} @
</span> </span>
)} ) : null}
{(chat.unread_count ?? 0) > 0 ? (
<span className="inline-flex min-w-5 items-center justify-center rounded-full bg-sky-500 px-1.5 py-0.5 text-[10px] font-semibold text-slate-950">
{chat.unread_count}
</span>
) : null}
</span>
) : (
<span className="text-[11px] text-slate-400">
{formatChatListTime(chat.last_message_created_at)}
</span>
)}
</span>
</div> </div>
<p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p> <p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
</div> </div>