Доработать UI звонков и нижний тулбар

shine-UI/js/app.js

@@ -180,6 +180,7 @@ let uiVersionPeriodicIntervalId = null;
 let hiddenDmAudioContext = null;
 let hiddenDmAudioUnlocked = false;
 let initialConnectionCompleted = false;
+let orientationLockInFlight = false;
 const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1';
 const GUEST_ALLOWED_PAGES = new Set([
   'start-view',
@@ -258,6 +259,23 @@ async function playDmSignal({ extended = false } = {}) {
   }
 }
 
+async function tryLockPortraitOrientation() {
+  if (orientationLockInFlight) return false;
+
+  const orientationApi = window.screen?.orientation;
+  if (!orientationApi?.lock) return false;
+
+  orientationLockInFlight = true;
+  try {
+    await orientationApi.lock('portrait');
+    return true;
+  } catch {
+    return false;
+  } finally {
+    orientationLockInFlight = false;
+  }
+}
+
 async function notifyHiddenIncomingMessage(fromLogin, text) {
   const body = String(text || '').trim() || `Вам пришло сообщение от ${fromLogin}`;
   const title = `Сообщение от ${fromLogin}`;
@@ -1028,6 +1046,7 @@ async function ensureSessionRuntimeStarted() {
 
 async function init() {
   consumeCallPushActionFromUrlIfAny();
+  void tryLockPortraitOrientation();
 
   if (state.session.isLocalDemo) {
     setConnectionStatus('connected');
@@ -1411,8 +1430,12 @@ async function init() {
   }, { passive: true });
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState !== 'visible') return;
+    void tryLockPortraitOrientation();
     void checkConnectionHealth();
   });
+  window.addEventListener('orientationchange', () => {
+    void tryLockPortraitOrientation();
+  });
 }
 
 init();

shine-UI/js/components/arweave-attachment-manager.js

@@ -286,7 +286,7 @@ export function openArweaveAttachmentManager({
   historyOnly = false,
   mode = 'attachment',
   historyPurpose = '',
-  uploadTransport = 'arweave',
+  uploadTransport = 'turbo',
   turboKeySource = 'client',
 } = {}) {
   const cleanLogin = String(login || '').trim();
@@ -303,7 +303,7 @@ export function openArweaveAttachmentManager({
   let turboKeyChoices = [];
   let selectedWalletId = readLastWalletId(cleanLogin) || 'derived-client-key';
   let selectedTurboKeySource = readLastTurboKeySource(cleanLogin, turboKeySource);
-  let selectedUploadTransport = String(uploadTransport || '').trim().toLowerCase() === 'turbo' ? 'turbo' : 'arweave';
+  let selectedUploadTransport = String(uploadTransport || '').trim().toLowerCase() === 'arweave' ? 'arweave' : 'turbo';
   let selectedFile = null;
   let selectedSha256 = '';
   let selectedPreviewEnabled = false;
@@ -592,6 +592,7 @@ export function openArweaveAttachmentManager({
         <div class="modal" data-ar-attach-modal="true">
           <div class="modal-card stack ar-attachment-manager-card">
             <h3 class="modal-title">${turboMode ? 'Загрузить через Turbo' : (isAvatarMode ? 'Загрузить аватар' : (historyOnly ? 'Загрузить файл в блокчейн' : 'Добавить вложение'))}</h3>
+            <p class="meta-muted" style="margin-top:-6px; color:#15803d;">Маленькие файлы и аватары через Turbo пока загружаются бесплатно.</p>
             <div class="form-actions-grid">
               <button class="${turboMode ? 'secondary-btn' : 'primary-btn'}" type="button" data-action="switch-arweave">Загрузка используя свой Arweave кошелёк</button>
               <button class="${turboMode ? 'primary-btn' : 'secondary-btn'}" type="button" data-action="switch-turbo">Загрузить через Turbo</button>
@@ -602,7 +603,7 @@ export function openArweaveAttachmentManager({
               ? `
                 <label class="meta-muted" for="turbo-key-source">Подписывать и пополнять через</label>
                 <select class="input ar-attachment-wallet-select" id="turbo-key-source"></select>
-                <p class="meta-muted">Turbo использует Solana-ключ пользователя. Файлы до 100 KB пока бесплатно. Если файл больше, пополните Turbo со своего SOL-кошелька.</p>
+                <p class="meta-muted">Turbo использует Solana-ключ пользователя. Маленькие файлы и аватары пока бесплатно. Если файл больше, пополните Turbo со своего SOL-кошелька.</p>
               `
               : `
                 <label class="meta-muted" for="ar-attach-wallet">Кошелёк оплаты Arweave</label>

shine-UI/js/components/toolbar.js

@@ -78,7 +78,6 @@ export function renderToolbar(currentPageId, navigate) {
         <span class="toolbar-label-wrap">
           <span>${item.label}</span>
           <span id="toolbar-connection-indicator" class="toolbar-connection-indicator is-unknown">
-            <span class="toolbar-connection-text">connected</span>
             <span class="toolbar-connection-dot" aria-hidden="true"></span>
           </span>
         </span>

shine-UI/js/pages/arweave-uploads-view.js

@@ -157,7 +157,7 @@ export function render({ navigate }) {
     const menu = controls.querySelector('[data-menu="true"]');
     if (menu) menu.hidden = true;
     window.alert(
-      'Здесь вы можете заранее добавить файл в Arweave или через Turbo. Кнопка «Загрузить через Turbo» находится внутри стандартного окна загрузки.\n\n'
+      'Здесь вы можете заранее добавить файл в Arweave или через Turbo. По умолчанию сразу выбрана загрузка через Turbo, а маленькие файлы пока загружаются там бесплатно.\n\n'
       + 'Потом при создании сообщения можно открыть историю загрузок и выбрать уже загруженный файл по txId. '
       + 'Если файл только что загружен, gateway может несколько минут его не отдавать, поэтому статус может быть “ещё обновляется”.'
     );

shine-UI/js/pages/channels-list.js

@@ -1147,11 +1147,12 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
   container.append(list);
 }
 
-function updateBottomCta({ button, listState, navigate, isTabEmpty = false }) {
-  const baseClass = `primary-btn channels-bottom-action${isTabEmpty ? ' is-empty-lift' : ''}`;
-  button.textContent = 'Поиск каналов';
-  button.className = baseClass;
-  button.onclick = () => openChannelFinderModal({ navigate });
+function updateBottomCta({ button }) {
+  if (!button) return;
+  button.hidden = true;
+  button.textContent = '';
+  button.className = 'channels-bottom-action';
+  button.onclick = null;
 }
 
 async function loadFeedAndRender({ screen, listState, contentEl, navigate }) {
@@ -1306,12 +1307,7 @@ export function render({ navigate, route }) {
     createInMyBtn.style.display = '';
     if (topTitle.parentElement !== topBarLeft) topBarLeft.append(topTitle);
 
-    updateBottomCta({
-      button: bottomCta,
-      listState,
-      navigate,
-      isTabEmpty,
-    });
+    updateBottomCta({ button: bottomCta });
   };
 
   screen.append(topBarEl, contentEl, bottomCta);
@@ -1320,12 +1316,7 @@ export function render({ navigate, route }) {
     showToast(createSuccessFlash);
   }
 
-  updateBottomCta({
-    button: bottomCta,
-    listState,
-    navigate,
-    isTabEmpty: true,
-  });
+  updateBottomCta({ button: bottomCta });
 
   // Применяем корректное состояние хедера сразу на первом рендере,
   // чтобы не показывать лишние кнопки до первой перерисовки.

shine-UI/js/services/call-ui-service.js

@@ -7,6 +7,8 @@ import {
   subscribeCallState,
   toggleSpeakerMode,
 } from './call-service.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
+import { loadProfileSnapshot } from './user-profile-params.js';
 
 const MINIMIZED_BAR_HEIGHT_PX = 44;
 
@@ -18,9 +20,13 @@ let titleEl = null;
 let statusEl = null;
 let mediaStageEl = null;
 let remoteVideoEl = null;
-let remoteVideoPlaceholderEl = null;
 let localPreviewWrapEl = null;
 let localVideoEl = null;
+let heroEl = null;
+let avatarSlotEl = null;
+let peerLoginEl = null;
+let kindEl = null;
+let topStatusEl = null;
 let incomingActionsEl = null;
 let activeActionsEl = null;
 let speakerBtn = null;
@@ -41,6 +47,16 @@ let unbind = null;
 let tickerId = 0;
 let currentSnapshot = null;
 let minimized = false;
+let activeAvatarLogin = '';
+let activeAvatarLoadToken = 0;
+let localPreviewDragPointerId = null;
+let localPreviewDragRect = null;
+let localPreviewDragOffsetX = 0;
+let localPreviewDragOffsetY = 0;
+let localPreviewPosition = null;
+
+const avatarSnapshotCache = new Map();
+const avatarPendingByLogin = new Map();
 
 function resolveAppShell() {
   return document.querySelector('.app-shell') || document.body;
@@ -72,11 +88,75 @@ function buildBarText(snapshot) {
   return `${kind} с ${peer} · ${elapsed}`;
 }
 
+async function loadAvatarSnapshot(login) {
+  const cleanLogin = String(login || '').trim();
+  if (!cleanLogin) return null;
+  const key = cleanLogin.toLowerCase();
+  if (avatarSnapshotCache.has(key)) return avatarSnapshotCache.get(key);
+  if (avatarPendingByLogin.has(key)) return avatarPendingByLogin.get(key);
+  const pending = loadProfileSnapshot(cleanLogin)
+    .then((snapshot) => {
+      avatarSnapshotCache.set(key, snapshot || null);
+      avatarPendingByLogin.delete(key);
+      return snapshot || null;
+    })
+    .catch(() => {
+      avatarSnapshotCache.set(key, null);
+      avatarPendingByLogin.delete(key);
+      return null;
+    });
+  avatarPendingByLogin.set(key, pending);
+  return pending;
+}
+
+function renderPeerAvatar(login, avatar = null) {
+  const hasAvatar = Boolean(String(avatar?.ar || '').trim());
+  const avatarEl = renderUserAvatar({
+    login: String(login || '').trim() || 'unknown',
+    avatar,
+    size: 'large',
+    className: 'call-peer-avatar',
+    title: login ? `Профиль ${login}` : 'Профиль собеседника',
+  });
+  if (!hasAvatar) {
+    avatarEl.classList.add('call-peer-avatar--empty');
+    const fallbackEl = avatarEl.querySelector('.avatar-fallback');
+    if (fallbackEl) fallbackEl.textContent = '';
+  }
+  return avatarEl;
+}
+
+function updatePeerAvatar(login) {
+  if (!avatarSlotEl) return;
+  const cleanLogin = String(login || '').trim();
+  if (activeAvatarLogin === cleanLogin && avatarSlotEl.childElementCount > 0) return;
+  activeAvatarLogin = cleanLogin;
+  const loadToken = ++activeAvatarLoadToken;
+  avatarSlotEl.innerHTML = '';
+  avatarSlotEl.append(renderPeerAvatar(cleanLogin));
+  if (!cleanLogin) return;
+  void loadAvatarSnapshot(cleanLogin).then((snapshot) => {
+    if (!avatarSlotEl || loadToken !== activeAvatarLoadToken || activeAvatarLogin !== cleanLogin) return;
+    const avatar = snapshot?.avatar?.txId
+      ? {
+        ar: String(snapshot.avatar.txId || '').trim(),
+        sha256Hex: String(snapshot.avatar.sha256Hex || '').trim().toLowerCase(),
+      }
+      : null;
+    const upgraded = renderPeerAvatar(cleanLogin, avatar);
+    avatarSlotEl.replaceChildren(upgraded);
+  });
+}
+
 function stopEvent(event) {
   event.preventDefault();
   event.stopPropagation();
 }
 
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
 function getIconSvg(name) {
   if (name === 'mic-on') {
     return '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3.5" width="6" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M6 11.5a6 6 0 0 0 12 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 17.5v3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M8.5 20.5h7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
@@ -185,6 +265,60 @@ function ensureTicker() {
   }
 }
 
+function applyLocalPreviewPosition() {
+  if (!localPreviewWrapEl) return;
+  if (!localPreviewPosition) {
+    localPreviewWrapEl.style.left = '';
+    localPreviewWrapEl.style.top = '';
+    localPreviewWrapEl.style.right = '';
+    localPreviewWrapEl.style.bottom = '';
+    return;
+  }
+  localPreviewWrapEl.style.left = `${localPreviewPosition.leftPx}px`;
+  localPreviewWrapEl.style.top = `${localPreviewPosition.topPx}px`;
+  localPreviewWrapEl.style.right = 'auto';
+  localPreviewWrapEl.style.bottom = 'auto';
+}
+
+function updateLocalPreviewPositionFromPointer(clientX, clientY) {
+  if (!mediaStageEl || !localPreviewWrapEl || !localPreviewDragRect) return;
+  const stageRect = mediaStageEl.getBoundingClientRect();
+  const width = localPreviewDragRect.width;
+  const height = localPreviewDragRect.height;
+  const nextLeft = clamp(clientX - stageRect.left - localPreviewDragOffsetX, 8, Math.max(8, stageRect.width - width - 8));
+  const nextTop = clamp(clientY - stageRect.top - localPreviewDragOffsetY, 8, Math.max(8, stageRect.height - height - 8));
+  localPreviewPosition = {
+    leftPx: Math.round(nextLeft),
+    topPx: Math.round(nextTop),
+  };
+  applyLocalPreviewPosition();
+}
+
+function handleLocalPreviewPointerDown(event) {
+  if (!localPreviewWrapEl || event.pointerType === 'mouse' && event.button !== 0) return;
+  localPreviewDragPointerId = event.pointerId;
+  localPreviewDragRect = localPreviewWrapEl.getBoundingClientRect();
+  localPreviewDragOffsetX = event.clientX - localPreviewDragRect.left;
+  localPreviewDragOffsetY = event.clientY - localPreviewDragRect.top;
+  try { localPreviewWrapEl.setPointerCapture(event.pointerId); } catch {}
+  stopEvent(event);
+}
+
+function handleLocalPreviewPointerMove(event) {
+  if (localPreviewDragPointerId !== event.pointerId) return;
+  updateLocalPreviewPositionFromPointer(event.clientX, event.clientY);
+  stopEvent(event);
+}
+
+function stopLocalPreviewDrag(event = null) {
+  if (event && localPreviewDragPointerId !== event.pointerId) return;
+  if (event && localPreviewWrapEl) {
+    try { localPreviewWrapEl.releasePointerCapture(event.pointerId); } catch {}
+  }
+  localPreviewDragPointerId = null;
+  localPreviewDragRect = null;
+}
+
 function ensureUi() {
   if (rootEl) return;
 
@@ -240,7 +374,7 @@ function ensureUi() {
   headerEl = document.createElement('div');
   headerEl.className = 'call-overlay-head';
 
-  titleEl = document.createElement('h2');
+  titleEl = document.createElement('div');
   titleEl.className = 'call-overlay-title';
 
   minimizeBtn = document.createElement('button');
@@ -265,12 +399,12 @@ function ensureUi() {
   remoteVideoEl.playsInline = true;
   remoteVideoEl.muted = true;
 
-  remoteVideoPlaceholderEl = document.createElement('div');
-  remoteVideoPlaceholderEl.className = 'call-video-placeholder';
-  remoteVideoPlaceholderEl.textContent = 'Собеседник пока без видео';
-
   localPreviewWrapEl = document.createElement('div');
   localPreviewWrapEl.className = 'call-local-preview';
+  localPreviewWrapEl.addEventListener('pointerdown', handleLocalPreviewPointerDown);
+  localPreviewWrapEl.addEventListener('pointermove', handleLocalPreviewPointerMove);
+  localPreviewWrapEl.addEventListener('pointerup', stopLocalPreviewDrag);
+  localPreviewWrapEl.addEventListener('pointercancel', stopLocalPreviewDrag);
 
   localVideoEl = document.createElement('video');
   localVideoEl.className = 'call-local-video';
@@ -278,8 +412,24 @@ function ensureUi() {
   localVideoEl.playsInline = true;
   localVideoEl.muted = true;
 
+  heroEl = document.createElement('div');
+  heroEl.className = 'call-hero';
+
+  avatarSlotEl = document.createElement('div');
+  avatarSlotEl.className = 'call-peer-avatar-slot';
+
+  peerLoginEl = document.createElement('div');
+  peerLoginEl.className = 'call-peer-login';
+
+  kindEl = document.createElement('div');
+  kindEl.className = 'call-kind';
+
+  topStatusEl = document.createElement('div');
+  topStatusEl.className = 'call-hero-status';
+
+  heroEl.append(avatarSlotEl, peerLoginEl, kindEl, topStatusEl);
   localPreviewWrapEl.append(localVideoEl);
-  mediaStageEl.append(remoteVideoEl, remoteVideoPlaceholderEl, localPreviewWrapEl);
+  mediaStageEl.append(remoteVideoEl, heroEl, localPreviewWrapEl);
 
   incomingActionsEl = document.createElement('div');
   incomingActionsEl.className = 'call-overlay-controls call-overlay-controls--incoming';
@@ -327,7 +477,7 @@ function ensureUi() {
   incomingActionsEl.append(acceptBtn, declineBtn);
   activeActionsEl.append(speakerBtn, muteBtn, cameraBtn, hangupBtn);
   headerEl.append(titleEl, minimizeBtn);
-  panelEl.append(headerEl, statusEl, mediaStageEl, incomingActionsEl, activeActionsEl);
+  panelEl.append(mediaStageEl, headerEl, statusEl, incomingActionsEl, activeActionsEl);
   overlayEl.append(panelEl);
   rootEl.append(barEl, overlayEl);
   resolveAppShell().append(rootEl);
@@ -337,14 +487,21 @@ function applyExpandedState(snapshot) {
   overlayEl.hidden = false;
   barEl.hidden = true;
 
-  titleEl.textContent = `${snapshot.titleText || 'Звонок'}: ${snapshot.peerLogin || 'пользователь'}`;
-  statusEl.textContent = snapshot.statusText || '';
+  titleEl.textContent = '';
+  statusEl.textContent = '';
+  peerLoginEl.textContent = snapshot.peerLogin || 'пользователь';
+  kindEl.textContent = snapshot.titleText || 'Звонок';
+  topStatusEl.textContent = snapshot.statusText || '';
+  updatePeerAvatar(snapshot.peerLogin || '');
 
   const incomingStage = Boolean(snapshot.canAnswer || snapshot.canDecline);
   const muted = Boolean(snapshot.muted);
   updateMuteButtons(muted);
   updateSpeakerButtons(Boolean(snapshot.speakerEnabled));
   updateCameraButtons(Boolean(snapshot.cameraEnabled));
+  panelEl.classList.toggle('call-overlay-panel--remote-video', Boolean(snapshot.hasRemoteVideo));
+  mediaStageEl.classList.toggle('call-video-stage--remote-video', Boolean(snapshot.hasRemoteVideo));
+  heroEl.hidden = Boolean(snapshot.hasRemoteVideo);
 
   minimizeBtn.hidden = incomingStage;
   minimizeBtn.disabled = incomingStage;
@@ -365,15 +522,18 @@ function applyExpandedState(snapshot) {
   declineBtn.hidden = !incomingStage || !snapshot.canDecline;
   hangupBtn.hidden = !snapshot.canHangup;
 
-  mediaStageEl.hidden = incomingStage;
+  mediaStageEl.hidden = false;
   const remoteStream = snapshot.remoteMediaStream || null;
   const localStream = snapshot.localPreviewStream || null;
   const remoteVideoSource = snapshot.hasRemoteVideo ? remoteStream : null;
   if (remoteVideoEl.srcObject !== remoteVideoSource) remoteVideoEl.srcObject = remoteVideoSource;
   if (localVideoEl.srcObject !== localStream) localVideoEl.srcObject = localStream;
   remoteVideoEl.hidden = !snapshot.hasRemoteVideo;
-  remoteVideoPlaceholderEl.hidden = snapshot.hasRemoteVideo;
   localPreviewWrapEl.hidden = !snapshot.hasLocalVideo;
+  if (!snapshot.hasLocalVideo) {
+    localPreviewPosition = null;
+    applyLocalPreviewPosition();
+  }
 }
 
 function applyMinimizedState(snapshot) {