Обновить UI профиля и навигации

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

@@ -7,16 +7,12 @@ import {
 } from '../components/arweave-attachment-manager.js';
 import { formatBytes } from '../services/attachment-format.js';
 import { createOverflowDots } from '../components/overflow-dots.js';
+import { createTopBar } from '../components/topbar.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { state } from '../state.js';
 
 export const pageMeta = { id: 'arweave-uploads-view', title: 'Загрузка файлов' };
 
-function closeUploadsMenu(controls) {
-  const menu = controls?.querySelector?.('[data-menu="true"]');
-  if (menu) menu.hidden = true;
-}
-
 function setStatusBadge(node, status, label) {
   if (!node) return;
   node.className = `ar-attachment-status ar-attachment-status--${status || 'pending'}`;
@@ -64,25 +60,10 @@ function renderTile(item, index) {
   return tile;
 }
 
-export function render({ navigate }) {
+export function render({navigate, chrome}) {
   const screen = document.createElement('section');
   screen.className = 'stack arweave-uploads-screen';
 
-  const controls = document.createElement('div');
-  controls.className = 'arweave-uploads-toolbar';
-  controls.innerHTML = `
-    <button class="secondary-btn arweave-uploads-back" type="button" data-action="back" aria-label="Назад">←</button>
-    <div class="arweave-uploads-title">Загрузка файлов в блокчейн</div>
-    <button class="primary-btn arweave-uploads-add" type="button" data-action="upload" aria-label="Добавить файл">+</button>
-    <button class="secondary-btn arweave-uploads-menu-btn" type="button" data-action="menu" aria-label="Меню"></button>
-    <div class="arweave-uploads-menu" data-menu="true" hidden>
-      <button class="shine-btn shine-btn--settings" type="button" data-action="upload-menu">Добавить файл</button>
-      <button class="shine-btn shine-btn--settings" type="button" data-action="clear">Очистить историю</button>
-      <button class="shine-btn shine-btn--settings" type="button" data-action="help">Справка</button>
-    </div>
-  `;
-  controls.querySelector('[data-action="menu"]')?.append(createOverflowDots());
-
   const statusLine = document.createElement('p');
   statusLine.className = 'meta-muted inline-error';
 
@@ -91,7 +72,6 @@ export function render({ navigate }) {
 
   const uploadFile = async () => {
     statusLine.textContent = '';
-    closeUploadsMenu(controls);
     try {
       await openArweaveAttachmentManager({
         login: state.session.login,
@@ -134,42 +114,50 @@ export function render({ navigate }) {
     }, 0);
   }
 
-  controls.querySelector('[data-action="upload"]')?.addEventListener('click', () => {
-    void uploadFile();
+  const topbar = createTopBar({
+    title: 'Загрузка файлов в блокчейн',
+    back: { onClick: () => navigate('settings-view') },
+    actions: [
+      {
+        label: '+',
+        title: 'Добавить файл',
+        ariaLabel: 'Добавить файл',
+        className: 'arweave-uploads-add',
+        onClick: () => { void uploadFile(); },
+      },
+      {
+        iconNode: createOverflowDots(),
+        title: 'Меню',
+        ariaLabel: 'Меню загрузок',
+        className: 'arweave-uploads-menu-btn',
+        menu: {
+          minWidth: 220,
+          items: [
+            { label: 'Добавить файл', action: () => uploadFile() },
+            {
+              label: 'Очистить историю',
+              action: () => {
+                const confirmed = window.confirm('Очистить журнал загруженных файлов этой сессии?');
+                if (!confirmed) return;
+                clearArweaveAttachmentHistory(state.session.login);
+                renderHistory();
+              },
+            },
+            {
+              label: 'Справка',
+              action: () => window.alert(
+                'Здесь вы можете заранее добавить файл в Arweave или через Turbo. По умолчанию сразу выбрана загрузка через Turbo, а маленькие файлы пока загружаются там бесплатно.\n\n'
+                + 'Потом при создании сообщения можно открыть историю загрузок и выбрать уже загруженный файл по txId. '
+                + 'Если файл только что загружен, gateway может несколько минут его не отдавать, поэтому статус может быть “ещё обновляется”.'
+              ),
+            },
+          ],
+        },
+      },
+    ],
   });
-  controls.querySelector('[data-action="upload-menu"]')?.addEventListener('click', () => {
-    void uploadFile();
-  });
-
-  controls.querySelector('[data-action="back"]')?.addEventListener('click', () => navigate('settings-view'));
-  controls.querySelector('[data-action="menu"]')?.addEventListener('click', (event) => {
-    event.stopPropagation();
-    const menu = controls.querySelector('[data-menu="true"]');
-    if (menu) menu.hidden = !menu.hidden;
-  });
-  controls.querySelector('[data-action="clear"]')?.addEventListener('click', () => {
-    const menu = controls.querySelector('[data-menu="true"]');
-    if (menu) menu.hidden = true;
-    const confirmed = window.confirm('Очистить журнал загруженных файлов этой сессии?');
-    if (!confirmed) return;
-    clearArweaveAttachmentHistory(state.session.login);
-    renderHistory();
-  });
-  controls.querySelector('[data-action="help"]')?.addEventListener('click', () => {
-    const menu = controls.querySelector('[data-menu="true"]');
-    if (menu) menu.hidden = true;
-    window.alert(
-      'Здесь вы можете заранее добавить файл в Arweave или через Turbo. По умолчанию сразу выбрана загрузка через Turbo, а маленькие файлы пока загружаются там бесплатно.\n\n'
-      + 'Потом при создании сообщения можно открыть историю загрузок и выбрать уже загруженный файл по txId. '
-      + 'Если файл только что загружен, gateway может несколько минут его не отдавать, поэтому статус может быть “ещё обновляется”.'
-    );
-  });
-  screen.addEventListener('click', (event) => {
-    if (controls.contains(event.target)) return;
-    closeUploadsMenu(controls);
-  });
-
-  screen.append(controls, statusLine, list);
+  chrome?.setTopbar(topbar);
+  screen.append(statusLine, list);
   renderHistory();
   return screen;
 }