Fix review findings in file picker

upload/frontend/table/add_file_with_dedup.js

@@ -2,8 +2,8 @@ export function addFileWithDedup(state, fileNode) {
   const accept = (node) => {
     if (node.kind === 'file') {
       const key = `${node.path}\u0000${node.file.size}`;
-      if (state.fileMeta.has(key)) return null;
-      state.fileMeta.set(key, node.id);
+      if (state.fileKeys.has(key)) return null;
+      state.fileKeys.add(key);
       return node;
     }
     node.children = node.children.map(accept).filter(Boolean);

upload/frontend/table/init_upload_table.js

@@ -1,8 +1,22 @@
-import { addFiles } from './on_files_change.js';
-import { onFilesChange } from './on_files_change.js';
+import { addFiles, onFilesChange } from './on_files_change.js';
 import { onFolderChange } from './on_folder_change.js';
 import { findNode, flattenFiles, render } from './render.js';
 
+function removeFileMeta(state, node) {
+  if (node.kind === 'file') {
+    state.fileKeys.delete(`${node.path}\u0000${node.file.size}`);
+    return;
+  }
+  node.children.forEach((child) => removeFileMeta(state, child));
+}
+
+function removeNode(state, id) {
+  const found = findNode(state.nodes, id);
+  if (!found) return;
+  removeFileMeta(state, found.node);
+  found.nodes.splice(found.nodes.indexOf(found.node), 1);
+}
+
 export function initUploadTable(cfg) {
   const elements = {
     fileInputEl: cfg.fileInputEl,
@@ -10,7 +24,7 @@ export function initUploadTable(cfg) {
     tableBodyEl: cfg.tableBodyEl,
     countEl: cfg.countEl,
   };
-  const state = { nodes: [], fileMeta: new Map(), busy: false };
+  const state = { nodes: [], fileKeys: new Set(), busy: false };
   elements.fileInputEl.addEventListener('change', onFilesChange(state, cfg, elements));
   elements.folderInputEl.addEventListener('change', onFolderChange(state, cfg, elements));
   elements.tableBodyEl.addEventListener('click', (event) => {
@@ -23,8 +37,7 @@ export function initUploadTable(cfg) {
     }
     const remove = event.target.closest('[data-remove]');
     if (remove) {
-      const found = findNode(state.nodes, remove.dataset.remove);
-      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
+      removeNode(state, remove.dataset.remove);
       render(state, elements);
     }
   });
@@ -35,14 +48,13 @@ export function initUploadTable(cfg) {
     addFiles: (files) => addFiles(state, cfg, files, elements),
     getFiles: () => flattenFiles(state.nodes),
     remove: (id) => {
-      const found = findNode(state.nodes, id);
-      if (found) found.nodes.splice(found.nodes.indexOf(found.node), 1);
+      removeNode(state, id);
       render(state, elements);
     },
     render: () => render(state, elements),
     clear: () => {
       state.nodes = [];
-      state.fileMeta.clear();
+      state.fileKeys.clear();
       render(state, elements);
     },
     setBusy: (busy) => {

upload/frontend/table/render.js

@@ -9,9 +9,9 @@ function renderNode(node, depth) {
     ? `<button class="tree-name tree-group tree-${node.kind}" style="padding-left:${padding}ch" data-toggle="${node.id}" `
       + `aria-expanded="${node.expanded}"><span class="tree-chevron">${node.expanded ? '▼' : '▶'}</span>${name}</button>`
     : `<span class="tree-name" style="padding-left:${padding}ch">${name}</span>`;
-  const indent = isGroup ? '' : ` style="padding-left:${padding}ch"`;
   const remove = `<button class="remove-btn" type="button" data-remove="${node.id}" aria-label="Удалить ${name}">×</button>`;
-  const row = `<tr class="tree-row tree-${node.kind}"><td${indent}>${action}</td>`
+  const pathAttribute = node.kind === 'file' ? ` data-path="${esc(node.path)}"` : '';
+  const row = `<tr class="tree-row tree-${node.kind}"${pathAttribute}><td>${action}</td>`
     + `<td>${node.kind === 'file' ? fs(node.file.size) : ''}</td>`
     + `<td>${node.error ? esc(node.error) : node.kind === 'file' ? 'готов' : ''}</td><td>${remove}</td></tr>`;
   if (!isGroup || !node.expanded) return row;
@@ -31,10 +31,10 @@ export function render(state, elements) {
   elements.countEl.textContent = `${files.length} файлов · ${fs(files.reduce((sum, node) => sum + node.file.size, 0))}`;
 }
 
-export function findNode(nodes, id, parent = null) {
+export function findNode(nodes, id) {
   for (const node of nodes) {
-    if (node.id === id) return { node, parent, nodes };
-    const found = findNode(node.children || [], id, node);
+    if (node.id === id) return { node, nodes };
+    const found = findNode(node.children || [], id);
     if (found) return found;
   }
   return null;

upload/frontend/table/set_status.js

@@ -1,5 +1,10 @@
+import { flattenFiles } from './render.js';
+
 export function setStatus(path, html, state, elements) {
-  const index = state.files.findIndex((file) => file.name === path);
-  const cell = elements.tableBodyEl.querySelector(`#st-${index}`);
+  const file = flattenFiles(state.nodes).find((item) => item.path === path);
+  if (!file) return;
+  const cell = Array.from(elements.tableBodyEl.querySelectorAll('.tree-row.tree-file'))
+    .find((row) => row.dataset.path === file.path)
+    ?.querySelector('td:nth-child(3)');
   if (cell) cell.innerHTML = html;
 }