UI: закрепить панель журнала загрузок

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

@@ -11,6 +11,11 @@ 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'}`;
@@ -36,7 +41,7 @@ function renderTile(item, index) {
   size.textContent = formatBytes(item.size);
   const time = document.createElement('span');
   time.textContent = formatArweaveHistoryTime(item.uploadedAtMs);
-  meta.append(size, time, status);
+  meta.append(status, size, time);
   if (item.pendingPlacement) {
     const flag = document.createElement('span');
     flag.className = 'ar-attachment-placement-flag';
@@ -60,10 +65,11 @@ export function render({ navigate }) {
   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>
+    <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="text-btn" type="button" data-action="upload-menu">Добавить файл</button>
       <button class="text-btn" type="button" data-action="clear">Очистить историю</button>
       <button class="text-btn" type="button" data-action="help">Справка</button>
     </div>
@@ -75,6 +81,22 @@ export function render({ navigate }) {
   const list = document.createElement('div');
   list.className = 'ar-attachment-history-tiles arweave-uploads-list';
 
+  const uploadFile = async () => {
+    statusLine.textContent = '';
+    closeUploadsMenu(controls);
+    try {
+      await openArweaveAttachmentManager({
+        login: state.session.login,
+        storagePwd: state.session.storagePwdInMemory,
+        gateway: state.entrySettings.arweaveServer,
+        historyOnly: true,
+      });
+      renderHistory();
+    } catch (error) {
+      statusLine.textContent = toUserMessage(error, 'Не удалось загрузить файл.');
+    }
+  };
+
   function renderHistory() {
     const rows = readArweaveAttachmentHistory(state.session.login).slice().reverse();
     list.innerHTML = '';
@@ -104,23 +126,12 @@ export function render({ navigate }) {
     }, 0);
   }
 
-  controls.querySelector('[data-action="upload"]')?.addEventListener('click', async () => {
-    statusLine.textContent = '';
-    try {
-      await openArweaveAttachmentManager({
-        login: state.session.login,
-        storagePwd: state.session.storagePwdInMemory,
-        gateway: state.entrySettings.arweaveServer,
-        historyOnly: true,
-      });
-      renderHistory();
-    } catch (error) {
-      statusLine.textContent = toUserMessage(error, 'Не удалось загрузить файл.');
-    }
-  });
+  controls.querySelector('[data-action="upload"]')?.addEventListener('click', uploadFile);
+  controls.querySelector('[data-action="upload-menu"]')?.addEventListener('click', uploadFile);
 
   controls.querySelector('[data-action="back"]')?.addEventListener('click', () => navigate('settings-view'));
-  controls.querySelector('[data-action="menu"]')?.addEventListener('click', () => {
+  controls.querySelector('[data-action="menu"]')?.addEventListener('click', (event) => {
+    event.stopPropagation();
     const menu = controls.querySelector('[data-menu="true"]');
     if (menu) menu.hidden = !menu.hidden;
   });
@@ -141,6 +152,10 @@ export function render({ navigate }) {
       + 'Если файл только что загружен, gateway может несколько минут его не отдавать, поэтому статус может быть “ещё обновляется”.'
     );
   });
+  screen.addEventListener('click', (event) => {
+    if (controls.contains(event.target)) return;
+    closeUploadsMenu(controls);
+  });
 
   screen.append(controls, statusLine, list);
   renderHistory();