Аватары: общий компонент, кэш txId и avatar.ar в графе связей

shine-UI/js/pages/user-profile-view.js

@@ -1,11 +1,11 @@
 import { renderHeader } from '../components/header.js';
 import { authService, state } from '../state.js';
 import {
-  buildAvatarInitials,
   buildIdentityLines,
   loadRelationsForPair,
   loadUserProfileCard,
 } from '../services/user-connections.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
 
 export const pageMeta = { id: 'user-profile-view', title: 'Чужой профиль' };
 
@@ -54,16 +54,31 @@ function renderIdentity(card) {
     lastName: card.lastName,
   });
 
-  return `
-    <div class="row" style="gap:12px; align-items:center;">
-      <div class="avatar large">${escapeHtml(buildAvatarInitials(card))}</div>
-      <div class="profile-identity-lines">
-        ${lines.map((line, idx) => (
-          `<div class="profile-identity-line${idx === lines.length - 1 ? ' profile-identity-login' : ''}">${escapeHtml(line)}</div>`
-        )).join('')}
-      </div>
-    </div>
-  `;
+  const row = document.createElement('div');
+  row.className = 'row';
+  row.style.gap = '12px';
+  row.style.alignItems = 'center';
+
+  row.append(renderUserAvatar({
+    login: card.login,
+    firstName: card.firstName,
+    lastName: card.lastName,
+    avatar: card.avatar,
+    size: 'large',
+    className: 'profile-avatar',
+  }));
+
+  const identityLines = document.createElement('div');
+  identityLines.className = 'profile-identity-lines';
+  lines.forEach((line, idx) => {
+    const lineEl = document.createElement('div');
+    lineEl.className = `profile-identity-line${idx === lines.length - 1 ? ' profile-identity-login' : ''}`;
+    lineEl.textContent = line;
+    identityLines.append(lineEl);
+  });
+  row.append(identityLines);
+
+  return row;
 }
 
 function renderReadOnlyBadges(card) {
@@ -174,9 +189,6 @@ export function render({ navigate, route }) {
       currentFlags = flags;
 
       body.innerHTML = `
-        <div class="card stack">
-          ${renderIdentity(card)}
-        </div>
         ${renderReadOnlyBadges(card)}
         ${renderRelations(flags)}
         ${renderReadOnlyParams(card)}
@@ -186,6 +198,10 @@ export function render({ navigate, route }) {
           <button class="ghost-btn" type="button" data-relation-action="contact"></button>
         </div>
       `;
+      const identityCard = document.createElement('div');
+      identityCard.className = 'card stack';
+      identityCard.append(renderIdentity(card));
+      body.prepend(identityCard);
 
       syncActionButtons();
       status.className = 'status-line is-available';