Дизайн Артёма

2026-09-22 14:09:02 +03:00
parent cae64639bd
commit 8b12760dde
40 changed files with 3114 additions and 5008 deletions
@@ -300,6 +300,7 @@ export function openArweaveAttachmentManager({
  autoOpenFileDialog = true,
  shineType = '',
  extraUploadTags = [],
+  signal = null,
 } = {}) {
  const cleanLogin = String(login || '').trim();
  const cleanStoragePwd = String(storagePwd || '').trim();
@@ -359,6 +360,7 @@ export function openArweaveAttachmentManager({
  }

  function finish(resolve, attachment, { pendingPlacement = undefined } = {}) {
+    if (closed) return;
    const item = persistToHistory
      ? addArweaveAttachmentToHistory(cleanLogin, attachment, {
        pendingPlacement,
@@ -373,6 +375,9 @@ export function openArweaveAttachmentManager({
  }

  return new Promise((resolve) => {
+    const onAbort = () => close(resolve, null);
+    if (signal?.aborted) { onAbort(); return; }
+    signal?.addEventListener('abort', onAbort, { once: true });
    const bindBackdrop = () => {
      const modal = root.querySelector('[data-ar-attach-modal="true"]');
      modal?.addEventListener('click', (event) => {
@@ -0,0 +1,363 @@
+import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from './arweave-attachment-manager.js';
+import { composeMessageWithAttachments, MAX_MESSAGE_ATTACHMENTS } from '../services/attachment-format.js';
+import { state } from '../state.js';
+import { toUserMessage } from '../services/ui-error-texts.js';
+import { renderUserAvatar } from './avatar-image.js';
+import { openAuthRequiredModal } from '../services/auth-required-modal.js';
+
+const drafts = new Map();
+
+function draftKey(key) {
+  const login = String(state.session.login || 'guest').trim().toLowerCase();
+  return `${login}:${String(key || 'editor')}`;
+}
+
+function attachmentLabel(item) {
+  const name = String(item?.name || 'Файл');
+  const size = Number(item?.size || 0);
+  if (!size) return name;
+  if (size < 1024) return `${name} · ${size} Б`;
+  if (size < 1024 * 1024) return `${name} · ${Math.ceil(size / 1024)} КБ`;
+  return `${name} · ${(size / 1024 / 1024).toFixed(1)} МБ`;
+}
+
+export function openChannelEditor({
+  id = 'channel-editor',
+  title = 'Ответ',
+  submitLabel = 'Ответить',
+  placeholder = 'Напишите ответ',
+  context = null,
+  key = 'reply',
+  extraControl = null,
+  initialText = '',
+  allowEmptyText = false,
+  allowAttachments = true,
+  rawText = false,
+  onSubmit,
+  isActive = () => true,
+} = {}) {
+  if (!state.session.isAuthorized) {
+    openAuthRequiredModal({ title: 'Войдите, чтобы написать', text: 'Для публикации и ответа нужен активный профиль.' });
+    return null;
+  }
+  const root = document.getElementById('modal-root');
+  if (!root || typeof onSubmit !== 'function') return null;
+  if (root.querySelector('.channel-editor-overlay')) return null;
+
+  const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const storageKey = draftKey(key);
+  const login = state.session.login;
+  const saved = drafts.get(storageKey) || { text: initialText, attachments: [] };
+  const attachments = Array.isArray(saved.attachments) ? [...saved.attachments] : [];
+  const extraFields = extraControl ? [...extraControl.querySelectorAll('select,input')] : [];
+  extraFields.forEach((field, index) => {
+    if (saved.controls?.[index] !== undefined) field.value = saved.controls[index];
+  });
+  let inFlight = false;
+  let composing = false;
+  let closed = false;
+  let picking = false;
+  let completed = false;
+  const attachmentController = new AbortController();
+
+  const overlay = document.createElement('div');
+  overlay.className = 'channel-editor-overlay';
+  overlay.id = id;
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  overlay.setAttribute('aria-labelledby', `${id}-title`);
+
+  const dialog = document.createElement('div');
+  dialog.className = 'channel-editor';
+
+  const header = document.createElement('header');
+  header.className = 'channel-editor__header';
+  const closeButton = document.createElement('button');
+  closeButton.type = 'button';
+  closeButton.className = 'icon-btn channel-editor__close';
+  closeButton.setAttribute('aria-label', 'Закрыть редактор');
+  closeButton.textContent = '×';
+  const heading = document.createElement('h2');
+  heading.id = `${id}-title`;
+  heading.textContent = title;
+  header.append(closeButton, heading, document.createElement('span'));
+
+  const body = document.createElement('div');
+  body.className = 'channel-editor__body';
+
+  if (context && (context.author || context.text || context.attachmentLabel)) {
+    const contextBox = document.createElement('div');
+    contextBox.className = 'channel-editor__context';
+    const contextTitle = document.createElement('strong');
+    contextTitle.textContent = context.author ? `В ответ ${context.author}` : 'Контекст сообщения';
+    const quote = document.createElement('p');
+    quote.textContent = String(context.text || context.attachmentLabel || 'Сообщение без текста');
+    const expand = document.createElement('button');
+    expand.type = 'button';
+    expand.className = 'text-btn channel-editor__context-toggle';
+    expand.textContent = 'Показать целиком';
+    expand.setAttribute('aria-expanded', 'false');
+    expand.addEventListener('click', () => {
+      const expanded = contextBox.classList.toggle('is-expanded');
+      expand.textContent = expanded ? 'Свернуть' : 'Показать целиком';
+      expand.setAttribute('aria-expanded', String(expanded));
+    });
+    contextBox.append(contextTitle, quote, expand);
+    body.append(contextBox);
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.className = 'channel-editor__input';
+  textarea.maxLength = 2000;
+  textarea.placeholder = placeholder;
+  textarea.setAttribute('aria-label', placeholder);
+  textarea.value = String(saved.text || '');
+
+  const attachmentsBox = document.createElement('div');
+  attachmentsBox.className = 'channel-editor__attachments';
+  attachmentsBox.setAttribute('aria-live', 'polite');
+
+  const error = document.createElement('p');
+  error.className = 'channel-editor__error';
+  error.setAttribute('role', 'alert');
+
+  const clearButton = document.createElement('button');
+  clearButton.type = 'button';
+  clearButton.className = 'text-btn channel-editor__clear';
+  clearButton.textContent = 'Очистить черновик';
+
+  const author = document.createElement('div');
+  author.className = 'channel-editor__author';
+  author.append(renderUserAvatar({ login: login || 'guest', className: 'avatar-plain', size: 'md' }));
+  const authorName = document.createElement('strong');
+  authorName.textContent = login || 'Гость';
+  author.append(authorName);
+  body.append(author);
+  if (extraControl instanceof Node) body.append(extraControl);
+  body.append(textarea, attachmentsBox, error, clearButton);
+
+  const footer = document.createElement('footer');
+  footer.className = 'channel-editor__footer';
+  const attachButton = document.createElement('button');
+  attachButton.type = 'button';
+  attachButton.className = 'secondary-btn channel-editor__attach';
+  attachButton.textContent = 'Прикрепить';
+  attachButton.hidden = !allowAttachments;
+  const counter = document.createElement('span');
+  counter.className = 'channel-editor__counter';
+  const submitButton = document.createElement('button');
+  submitButton.type = 'button';
+  submitButton.className = 'primary-btn channel-editor__submit';
+  submitButton.textContent = submitLabel;
+  submitButton.title = 'Отправить · Ctrl+Enter / ⌘+Enter';
+  footer.append(attachButton);
+  footer.append(counter, submitButton);
+  dialog.append(header, body, footer);
+  overlay.append(dialog);
+  root.replaceChildren(overlay);
+
+  const saveDraft = () => {
+    const value = { text: textarea.value, attachments: [...attachments], controls: extraFields.map((field) => field.value) };
+    if (completed) { drafts.delete(storageKey); return; }
+    if (value.text || value.attachments.length) drafts.set(storageKey, value);
+    else drafts.delete(storageKey);
+  };
+
+  const sync = () => {
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.max(160, textarea.scrollHeight)}px`;
+    const length = textarea.value.length;
+    counter.textContent = `${length} / 2000`;
+    counter.classList.toggle('is-near-limit', length >= 1800);
+    submitButton.disabled = inFlight || picking || length > textarea.maxLength || (!allowEmptyText && !textarea.value.trim() && attachments.length === 0);
+    dialog.setAttribute('aria-busy', String(inFlight || picking));
+    clearButton.hidden = !textarea.value && attachments.length === 0;
+    attachmentsBox.replaceChildren();
+    attachments.forEach((item, index) => {
+      const card = document.createElement('div');
+      card.className = 'channel-editor__attachment';
+      const label = document.createElement('span');
+      label.textContent = attachmentLabel(item);
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'icon-btn';
+      remove.setAttribute('aria-label', `Убрать вложение ${item?.name || ''}`);
+      remove.textContent = '×';
+      remove.disabled = inFlight;
+      remove.addEventListener('click', () => {
+        attachments.splice(index, 1);
+        saveDraft();
+        sync();
+      });
+      card.append(label, remove);
+      attachmentsBox.append(card);
+    });
+  };
+
+  const openedUrl = location.href;
+  const historyId = `${Date.now()}:${Math.random()}`;
+  history.pushState({ ...history.state, channelEditor: historyId }, '', openedUrl);
+  const viewport = window.visualViewport;
+  const updateViewport = () => {
+    overlay.style.setProperty('--editor-height', `${viewport?.height || window.innerHeight}px`);
+    overlay.style.setProperty('--editor-top', `${viewport?.offsetTop || 0}px`);
+  };
+  const onBack = (event) => {
+    if (closed) return;
+    event.stopImmediatePropagation();
+    close({ fromHistory: true });
+  };
+  const observer = new MutationObserver(() => {
+    if (!overlay.isConnected) close({ restoreFocus: false });
+  });
+  const close = ({ fromHistory = false, restoreFocus = true } = {}) => {
+    if (closed) return;
+    closed = true;
+    saveDraft();
+    observer.disconnect();
+    attachmentController.abort();
+    document.removeEventListener('keydown', onDocumentKeydown);
+    viewport?.removeEventListener('resize', updateViewport);
+    viewport?.removeEventListener('scroll', updateViewport);
+    window.removeEventListener('resize', updateViewport);
+    window.removeEventListener('popstate', onBack, true);
+    overlay.remove();
+    if (!fromHistory && location.href === openedUrl && history.state?.channelEditor === historyId) {
+      window.addEventListener('popstate', (event) => {
+        if (location.href === openedUrl) event.stopImmediatePropagation();
+      }, { capture: true, once: true });
+      history.back();
+    }
+    if (restoreFocus && opener?.isConnected) opener.focus({ preventScroll: true });
+  };
+  overlay.cleanup = () => close({ restoreFocus: false });
+
+  const submit = async () => {
+    if (inFlight || submitButton.disabled) return;
+    inFlight = true;
+    error.textContent = '';
+    textarea.disabled = true;
+    attachButton.disabled = true;
+    clearButton.disabled = true;
+    if (extraControl) extraControl.querySelectorAll('select,button,input').forEach((el) => { el.disabled = true; });
+    submitButton.textContent = 'Отправляем…';
+    sync();
+    try {
+      await onSubmit({
+        text: rawText ? textarea.value.trim() : composeMessageWithAttachments(textarea.value.trim(), attachments),
+        attachments: [...attachments],
+      });
+      completed = true;
+      attachments.forEach((item) => markArweaveAttachmentPlaced(login, item));
+      // Не удаляем новый черновик, открытый после закрытия отправляющего редактора.
+      if (!closed || drafts.get(storageKey)?.text === textarea.value) drafts.delete(storageKey);
+      if (!isActive() || closed) return;
+      close();
+    } catch (submitError) {
+      if (!isActive() || closed) return;
+      inFlight = false;
+      textarea.disabled = false;
+      attachButton.disabled = false;
+      clearButton.disabled = false;
+      if (extraControl) extraControl.querySelectorAll('select,button,input').forEach((el) => { el.disabled = false; });
+      submitButton.textContent = submitLabel;
+      error.textContent = toUserMessage(submitError, 'Не удалось отправить. Текст сохранён.');
+      saveDraft();
+      sync();
+    }
+  };
+
+  const onDocumentKeydown = (event) => {
+    if (!overlay.isConnected || document.querySelector('.ar-attachment-manager-root')) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey) && !composing && !event.isComposing) {
+      event.preventDefault();
+      void submit();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const focusable = [...overlay.querySelectorAll('button:not(:disabled), textarea:not(:disabled), select:not(:disabled)')].filter((el) => !el.hidden);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  closeButton.addEventListener('click', () => close());
+  clearButton.addEventListener('click', () => {
+    textarea.value = '';
+    attachments.splice(0);
+    drafts.delete(storageKey);
+    error.textContent = '';
+    sync();
+    textarea.focus();
+  });
+  textarea.addEventListener('input', () => {
+    error.textContent = '';
+    saveDraft();
+    sync();
+  });
+  textarea.addEventListener('compositionstart', () => { composing = true; });
+  extraFields.forEach((field) => field.addEventListener('change', saveDraft));
+  textarea.addEventListener('compositionend', () => { composing = false; });
+  attachButton.addEventListener('click', async () => {
+    if (picking || inFlight) return;
+    if (attachments.length >= MAX_MESSAGE_ATTACHMENTS) {
+      error.textContent = `Можно прикрепить максимум ${MAX_MESSAGE_ATTACHMENTS} файлов.`;
+      return;
+    }
+    try {
+      picking = true;
+      dialog.inert = true;
+      sync();
+      const item = await openArweaveAttachmentManager({
+        login,
+        storagePwd: state.session.storagePwdInMemory,
+        gateway: state.entrySettings.arweaveServer,
+        selectedTxIds: attachments.map((attachment) => attachment.ar),
+        signal: attachmentController.signal,
+      });
+      if (!isActive() || !overlay.isConnected || !item) return;
+      attachments.push(item);
+      saveDraft();
+      sync();
+    } catch (attachError) {
+      if (isActive() && overlay.isConnected) {
+        error.textContent = toUserMessage(attachError, 'Не удалось добавить вложение.');
+      }
+    } finally {
+      picking = false;
+      dialog.inert = false;
+      if (!closed) { sync(); attachButton.focus(); }
+    }
+  });
+  submitButton.addEventListener('click', () => void submit());
+  document.addEventListener('keydown', onDocumentKeydown);
+  window.addEventListener('popstate', onBack, true);
+  viewport?.addEventListener('resize', updateViewport);
+  viewport?.addEventListener('scroll', updateViewport);
+  window.addEventListener('resize', updateViewport);
+  observer.observe(root, { childList: true });
+  updateViewport();
+  sync();
+  requestAnimationFrame(() => {
+    if (closed || !isActive()) return;
+    const quote = overlay.querySelector('.channel-editor__context p');
+    const expand = overlay.querySelector('.channel-editor__context-toggle');
+    if (quote && expand && quote.clientHeight > 0) expand.hidden = quote.scrollHeight <= quote.clientHeight;
+    sync();
+    textarea.focus();
+    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+  });
+  return { close };
+}
@@ -110,7 +110,7 @@ export function createDropdownMenu({
        event.preventDefault();
        event.stopPropagation();
        if (button.disabled) return;
-        close();
+        close({ focusAnchor: true });
        await item.action?.();
      });
      menuEl.append(button);
@@ -154,6 +154,7 @@ export function createDropdownMenu({
    setAnchorOpen(true);
    onOpen?.();
    position();
+    menuEl.querySelector('button:not(:disabled)')?.focus();
  };

  const toggle = () => {
@@ -172,8 +173,19 @@ export function createDropdownMenu({
    close();
  };
  const onKeydown = (event) => {
-    if (event.key !== 'Escape' || !portal) return;
-    close({ focusAnchor: true });
+    if (!portal) return;
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      if (event.key === 'Escape') event.preventDefault();
+      close({ focusAnchor: true });
+      return;
+    }
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    const buttons = [...menuEl.querySelectorAll('button:not(:disabled)')];
+    if (!buttons.length) return;
+    event.preventDefault();
+    const index = buttons.indexOf(document.activeElement);
+    const next = event.key === 'Home' ? 0 : event.key === 'End' ? buttons.length - 1 : (index + (event.key === 'ArrowUp' ? -1 : 1) + buttons.length) % buttons.length;
+    buttons[next].focus();
  };
  const onNavigation = () => close();
  const onViewportChange = () => position();
@@ -0,0 +1,12 @@
+import { createDropdownMenu } from './dropdown-menu.js';
+
+export function attachMessageMenu(card, head, items) {
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = 'icon-btn channel-message-more';
+  trigger.textContent = '⋯';
+  trigger.setAttribute('aria-label', 'Действия сообщения');
+  head.append(trigger);
+  const menu = createDropdownMenu({ anchorEl: trigger, items });
+  card.cleanup = () => menu.destroy();
+}
@@ -1,23 +1,18 @@
 import { resolveToolbarActive } from '../router.js';
 import { state, authService } from '../state.js';
 import { openAuthRequiredModal } from '../services/auth-required-modal.js';
-import { SHINE_CONNECTIONS_LOGO_SRC } from './shine-logo.js';
-
-// iconImg — путь к неоновой PNG (если есть, рисуем картинку вместо эмодзи); glow — цвет доп.свечения
-// активной/нажатой вкладки (var --tab-glow); hero — «герой»-вкладка (крупнее/ярче, всегда светится).
-// Пока подключена только «Связи»; остальные 4 — эмодзи до подготовки ассетов (имена подставлю).
+import { iconHtml as lineIcon } from './ui-icon.js';
 const ITEMS = [
-  { pageId: 'messages-list', label: 'Личные', icon: '💬', iconImg: '/assets/icon_lichnye.png', glow: 'rgba(0, 229, 255, .6)' },
-  { pageId: 'channels-list', label: 'Каналы', icon: '📢', iconImg: '/assets/icon_kanaly.png', glow: 'rgba(0, 229, 255, .6)' },
-  { pageId: 'network-view', label: 'Связи', icon: '🕸', iconImg: SHINE_CONNECTIONS_LOGO_SRC, glow: 'rgba(0, 229, 255, .6)', hero: true },
-  { pageId: 'notifications-view', label: 'Уведомления', icon: '🔔', iconImg: '/assets/icon_uvedomleniya.png', glow: 'rgba(0, 229, 255, .6)' },
-  { pageId: 'profile-view', label: 'Профиль', icon: '👤', iconImg: '/assets/icon_profil.png', glow: 'rgba(0, 229, 255, .6)' },
+  { pageId: 'messages-list', label: 'Личные' },
+  { pageId: 'channels-list', label: 'Каналы' },
+  { pageId: 'network-view', label: 'Связи' },
+  { pageId: 'notifications-view', label: 'Уведомления' },
+  { pageId: 'profile-view', label: 'Профиль' },
 ];

 function iconHtml(item) {
-  return item.iconImg
-    ? `<img class="toolbar-icon-img" src="${item.iconImg}" alt="" aria-hidden="true" style="--tab-glow:${item.glow}" />`
-    : `<span>${item.icon}</span>`;
+  const names = { 'messages-list': 'message', 'channels-list': 'channels', 'network-view': 'network', 'notifications-view': 'bell', 'profile-view': 'profile' };
+  return lineIcon(names[item.pageId]);
 }

 function normalizeCounters(payload = {}) {
@@ -126,6 +121,8 @@ export function renderToolbar(currentPageId, navigate) {
    const isMessages = item.pageId === 'messages-list';
    const isNetwork = item.pageId === 'network-view';
    const isNotifications = item.pageId === 'notifications-view';
+    btn.type = 'button';
+    if (item.pageId === active) btn.setAttribute('aria-current', 'page');
    btn.dataset.toolbarPage = item.pageId;
    btn.className = `toolbar-btn${item.pageId === active ? ' active' : ''}${isProfile ? ' toolbar-btn-profile' : ''}${isMessages ? ' toolbar-btn-messages' : ''}${isNetwork ? ' toolbar-btn-network' : ''}${item.hero ? ' toolbar-btn-hero' : ''}`;
    if (isProfile) {
@@ -0,0 +1,14 @@
+const paths = {
+  heart: '<path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z"/>',
+  message: '<path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5H4l-2 2v-9.5A8.5 8.5 0 0 1 10.5 4H13a8 8 0 0 1 8 7.5Z"/>',
+  channels: '<rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5"/>',
+  network: '<circle cx="12" cy="5" r="3"/><circle cx="5" cy="18" r="3"/><circle cx="19" cy="18" r="3"/><path d="m10 8-4 7m8-7 4 7M8 18h8"/>',
+  bell: '<path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4"/>',
+  profile: '<circle cx="12" cy="7" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/>',
+  share: '<path d="m8 12 8-8M9 4h7v7M20 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>',
+  search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+};
+
+export function iconHtml(name, filled = false) {
+  return `<svg viewBox="0 0 24 24" fill="${filled ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || paths.message}</svg>`;
+}