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

shine-UI/js/pages/network-view.js

@@ -1,5 +1,6 @@
 import { renderHeader } from '../components/header.js';
 import { authService, state } from '../state.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
 
 export const pageMeta = { id: 'network-view', title: 'Связи' };
 
@@ -56,11 +57,20 @@ function getMarkByLogin(allUsers) {
       shine: Boolean(row?.shine),
       officialLabel: String(row?.officialLabel || (row?.official ? 'официальный' : 'неофициальный')),
       shineLabel: String(row?.shineLabel || (row?.shine ? 'сияющий' : 'несияющий')),
+      avatar: normalizeAvatar(row),
     });
   });
   return map;
 }
 
+function normalizeAvatar(row) {
+  const txFromAvatar = String(row?.avatar?.ar || '').trim();
+  if (txFromAvatar) return { ar: txFromAvatar };
+  const txFallback = String(row?.avatarTxId || '').trim();
+  if (txFallback) return { ar: txFallback };
+  return null;
+}
+
 function applyRelativeGender(map, rows) {
   (Array.isArray(rows) ? rows : []).forEach((row) => {
     const login = normalizeLogin(row?.login);
@@ -108,12 +118,23 @@ function buildNodeElement({ login, kind = 'friend', isCenter = false, mark = nul
   const metaText = metaParts.join(', ');
   node.title = metaText ? `${login}\n${metaText}` : login;
 
-  const officialBadge = mark?.official ? '<span class="node-badge-official" aria-hidden="true">ОФ</span>' : '';
-  node.innerHTML = `
-    ${officialBadge}
-    <span class="node-dot">${(login[0] || '?').toUpperCase()}</span>
-    <span class="node-label">${login}</span>
-  `;
+  if (mark?.official) {
+    const officialBadge = document.createElement('span');
+    officialBadge.className = 'node-badge-official';
+    officialBadge.setAttribute('aria-hidden', 'true');
+    officialBadge.textContent = 'ОФ';
+    node.append(officialBadge);
+  }
+  node.append(renderUserAvatar({
+    login,
+    avatar: mark?.avatar || null,
+    size: 'node',
+    title: login,
+  }));
+  const label = document.createElement('span');
+  label.className = 'node-label';
+  label.textContent = login;
+  node.append(label);
   return node;
 }