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();

shine-UI/styles/components.css

@@ -2597,7 +2597,7 @@ textarea.input {
   background: rgba(255, 255, 255, 0.06);
   border-radius: 0.34rem;
   color: rgba(226, 232, 240, 0.86);
-  font-size: 0.46rem;
+  font-size: 0.56rem;
   line-height: 1.05;
   max-width: 100%;
   min-width: 0;
@@ -2647,7 +2647,7 @@ textarea.input {
   min-height: 100vh;
   max-width: 100%;
   overflow-x: hidden;
-  padding-top: 0;
+  padding-top: 3.25rem;
 }
 
 .arweave-uploads-toolbar {
@@ -2660,9 +2660,11 @@ textarea.input {
   gap: 0.42rem;
   grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem 2.4rem;
   justify-content: stretch;
-  margin: -1rem -1rem 0;
+  left: 0;
+  margin: 0;
   padding: max(0.35rem, env(safe-area-inset-top)) 0.45rem 0.45rem;
-  position: sticky;
+  position: fixed;
+  right: 0;
   top: 0;
   z-index: 15;
 }
@@ -2683,6 +2685,7 @@ textarea.input {
 .arweave-uploads-title {
   align-self: center;
   color: #f8fafc;
+  font-size: 0.94rem;
   font-weight: 800;
   min-width: 0;
   overflow: hidden;
@@ -2715,8 +2718,8 @@ textarea.input {
 }
 
 .arweave-uploads-list {
-  max-height: calc(100vh - 4.4rem);
-  min-height: calc(100vh - 4.4rem);
+  max-height: calc(100vh - 4.1rem);
+  min-height: calc(100vh - 4.1rem);
   width: 100%;
 }