From fb0e4dabbaf3caa70e69064e44588a11febae788 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 20:52:54 +0300
Subject: [PATCH] fix(chat-list): show separate pin and mute indicators without
 replacing avatar

---
 web/src/components/ChatList.tsx | 50 ++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/web/src/components/ChatList.tsx b/web/src/components/ChatList.tsx
index 87a8c71..def24cd 100644
--- a/web/src/components/ChatList.tsx
+++ b/web/src/components/ChatList.tsx
@@ -240,7 +240,7 @@ export function ChatList() {
               <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">
-                {chat.pinned ? "📌" : (chat.display_title || chat.title || chat.type).slice(0, 1)}
+                {(chat.display_title || chat.title || chat.type).slice(0, 1)}
               </div>
             )}
             {chat.type === "private" && chat.counterpart_is_online ? (
@@ -250,24 +250,36 @@ export function ChatList() {
           <div className="min-w-0 flex-1">
             <div className="flex items-center justify-between gap-2">
               <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 items-center gap-1">
-                  {(chat.unread_mentions_count ?? 0) > 0 ? (
-                    <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>
-                  ) : 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="shrink-0 text-[11px] text-slate-400">
-                  {formatChatListTime(chat.last_message_created_at)}
-                </span>
-              )}
+              <span className="inline-flex shrink-0 items-center gap-1.5">
+                {chat.pinned ? (
+                  <span className="text-[11px] text-slate-400" title="Pinned chat">
+                    📌
+                  </span>
+                ) : null}
+                {chat.muted ? (
+                  <span className="text-[11px] text-slate-400" title="Muted chat">
+                    🔕
+                  </span>
+                ) : null}
+                {(chat.unread_count ?? 0) > 0 || (chat.unread_mentions_count ?? 0) > 0 ? (
+                  <span className="inline-flex items-center gap-1">
+                    {(chat.unread_mentions_count ?? 0) > 0 ? (
+                      <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>
+                    ) : 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>
             <p className="truncate text-xs text-slate-400">{chatPreviewLabel(chat)}</p>
           </div>