feat: make file picker embeddable

upload/frontend/table/render.js

@@ -1,6 +1,31 @@
 import { esc } from './esc.js';
 import { fs } from './fs.js';
 
+const DEFAULT_RENDER_CONFIG = {
+  labels: {
+    statusReady: 'готов',
+    remove: 'Удалить',
+    empty: 'Нет выбранных файлов',
+    columns: { path: 'Путь', size: 'Размер', status: 'Статус' },
+    count: (count, bytes) => `${count} файлов · ${fs(bytes)}`,
+  },
+  layout: { columns: ['path', 'size', 'status'] },
+};
+
+function renderConfig(cfg = {}) {
+  return {
+    labels: {
+      ...DEFAULT_RENDER_CONFIG.labels,
+      ...(cfg.labels || {}),
+      columns: {
+        ...DEFAULT_RENDER_CONFIG.labels.columns,
+        ...(cfg.labels?.columns || {}),
+      },
+    },
+    layout: { ...DEFAULT_RENDER_CONFIG.layout, ...(cfg.layout || {}) },
+  };
+}
+
 /**
  * Рендерит один узел дерева и его раскрытых потомков в HTML-строки таблицы.
  *
@@ -12,7 +37,7 @@ import { fs } from './fs.js';
  * Имена и пути проходят через esc до вставки в innerHTML. Группа получает
  * кнопку раскрытия, leaf-файл — размер, статус и data-path для будущего API статусов.
  */
-function renderNode(node, depth) {
+function renderNode(node, depth, cfg) {
   const isGroup = node.kind !== 'file';
   const padding = depth * 4;
   const name = esc(node.name);
@@ -20,14 +45,22 @@ 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 remove = `<button class="remove-btn" type="button" data-remove="${node.id}" aria-label="Удалить ${name}">×</button>`;
+  const remove = `<button class="remove-btn" type="button" data-remove="${node.id}" aria-label="${esc(cfg.labels.remove)} ${name}">×</button>`;
   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>`;
+  const cells = {
+    path: action,
+    size: node.kind === 'file' ? fs(node.file.size) : '',
+    status: node.error ? esc(node.error) : node.kind === 'file' ? esc(cfg.labels.statusReady) : '',
+  };
+  const columns = cfg.layout.columns?.length
+    ? cfg.layout.columns
+    : Object.keys(DEFAULT_RENDER_CONFIG.labels.columns);
+  const row = `<tr class="tree-row tree-${node.kind}"${pathAttribute}>`
+    + columns.map((column) => `<td>${cells[column] || ''}</td>`).join('')
+    + `<td>${remove}</td></tr>`;
   if (!isGroup || !node.expanded) return row;
   // Дочерние строки добавляются только для раскрытой группы.
-  return row + node.children.map((child) => renderNode(child, depth + 1)).join('');
+  return row + node.children.map((child) => renderNode(child, depth + 1, cfg)).join('');
 }
 
 /**
@@ -40,10 +73,14 @@ function renderNode(node, depth) {
  * Обход для счётчика независим от раскрытия: свернутая группа всё равно входит
  * в количество leaf-файлов и суммарный размер.
  */
-export function render(state, elements) {
+export function render(state, elements, cfg) {
+  const normalized = renderConfig(cfg);
+  const columns = normalized.layout.columns?.length
+    ? normalized.layout.columns
+    : Object.keys(DEFAULT_RENDER_CONFIG.labels.columns);
   elements.tableBodyEl.innerHTML = state.nodes.length
-    ? state.nodes.map((node) => renderNode(node, 0)).join('')
-    : '<tr><td colspan="4">Нет выбранных файлов</td></tr>';
+    ? state.nodes.map((node) => renderNode(node, 0, normalized)).join('')
+    : `<tr><td colspan="${columns.length + 1}">${esc(normalized.labels.empty)}</td></tr>`;
   const files = [];
   // Собирает все leaf-файлы, включая содержимое свернутых групп.
   const visit = (node) => {
@@ -51,7 +88,8 @@ export function render(state, elements) {
     else node.children.forEach(visit);
   };
   state.nodes.forEach(visit);
-  elements.countEl.textContent = `${files.length} файлов · ${fs(files.reduce((sum, node) => sum + node.file.size, 0))}`;
+  const totalBytes = files.reduce((sum, node) => sum + node.file.size, 0);
+  elements.countEl.textContent = normalized.labels.count(files.length, totalBytes);
 }
 
 /**