Звонки

client-web/src/modules/chats/presentation/components/GroupSettings.tsx

@@ -355,17 +355,12 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
             <div className="relative group">
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-knot-500/20 rounded-full blur-[40px] pointer-events-none" />
               <div className="relative z-10 p-1.5 rounded-full bg-gradient-to-br from-white/10 to-transparent backdrop-blur-md border border-white/10 shadow-2xl">
-                {chat.avatar ? (
-                  <img
-                    src={getMediaUrl(chat.avatar)}
-                    alt=""
-                    className="w-32 h-32 rounded-full object-cover shadow-inner"
-                  />
-                ) : (
-                  <div className="w-32 h-32 rounded-full bg-linear-to-br from-primary to-primary-container flex items-center justify-center text-on-primary font-black text-4xl shadow-inner">
-                    {initials}
-                  </div>
-                )}
+                <Avatar
+                  src={chat.avatar ? getMediaUrl(chat.avatar) : null}
+                  name={chat.name || '?'}
+                  size="2xl"
+                  className="shadow-inner"
+                />
               </div>
 
               {isAdmin && (
@@ -574,13 +569,12 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
                       onClick={() => handleAddMember(u.id)}
                       className="flex items-center gap-3 w-full px-3 py-2 rounded-xl hover:bg-surface-hover transition-colors"
                     >
-                      {u.avatar ? (
-                        <img src={getMediaUrl(u.avatar)} alt="" className="w-8 h-8 rounded-full object-cover" />
-                      ) : (
-                        <div className="w-8 h-8 rounded-full bg-linear-to-br from-primary/80 to-primary flex items-center justify-center text-on-primary text-xs font-black shadow-inner">
-                          {(u.displayName || u.username || '?')[0].toUpperCase()}
-                        </div>
-                      )}
+                      <Avatar 
+                        src={u.avatar ? getMediaUrl(u.avatar) : null} 
+                        name={u.displayName || u.username || '?'} 
+                        size="sm" 
+                        online={u.isOnline}
+                      />
                       <div className="flex-1 text-left min-w-0">
                         <p className="text-sm text-white truncate">{u.displayName || u.username}</p>
                         <p className="text-xs text-zinc-500">@{u.username}</p>
@@ -613,16 +607,12 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
                     className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-surface-hover/50 transition-colors group"
                   >
                     <div className="relative flex-shrink-0">
-                      {member.user.avatar ? (
-                        <img src={getMediaUrl(member.user.avatar)} alt="" className="w-9 h-9 rounded-full object-cover" />
-                      ) : (
-                        <div className="w-9 h-9 rounded-full bg-linear-to-br from-primary/80 to-primary flex items-center justify-center text-on-primary text-xs font-black shadow-inner">
-                          {(member.user.displayName || member.user.username || '?')[0].toUpperCase()}
-                        </div>
-                      )}
-                      {member.user.isOnline && (
-                        <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 rounded-full border-2 border-surface-secondary" />
-                      )}
+                      <Avatar 
+                        src={member.user.avatar ? getMediaUrl(member.user.avatar) : null} 
+                        name={member.user.displayName || member.user.username || '?'} 
+                        size="sm" 
+                        online={member.user.isOnline}
+                      />
                     </div>
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2">