{/* Floating CTA — hidden when the vault is empty, since the empty-
state card already shows a prominent "Nuevo documento" button.
Without this guard both buttons render at once and look duplicated. */}
{totalDocs > 0 && (
)}
{showNew && setShowNew(false)} onCreated={(path) => { setShowNew(false); onOpenDoc && onOpenDoc(path); }} />}
);
}
// ── Vault Folder view ───────────────────────────────────────────────
// `folder` is the per-project slug from the URL hash (e.g. "specs"). After
// the per-project folder migration, VAULT_TREE entries are keyed by their
// UUID `id` plus a separate `slug` field; match on slug to keep the URL
// stable across UUIDs.
function VaultFolder({ folder, onOpenDoc, isEmpty }) {
const meta = VAULT_TREE.find(f => (f.slug || f.id) === folder) || { id: folder, slug: folder, children: [] };
const allFiles = meta.children || [];
const [selected, setSelected] = React.useState(new Set());
const [showNew, setShowNew] = React.useState(false);
const [uploads, setUploads] = React.useState([]);
const [uploadingCount, setUploadingCount] = React.useState(0);
const [uploadError, setUploadError] = React.useState(null);
const [dragOver, setDragOver] = React.useState(false);
const fileInputRef = React.useRef(null);
// Filter / sort / search state. Reset selection whenever any of these
// changes so we never act on rows that aren't visible.
const [authorFilter, setAuthorFilter] = React.useState('all'); // 'all' | actorId
const [sortKey, setSortKey] = React.useState('recent'); // 'recent' | 'title' | 'author' | 'oldest'
const [search, setSearch] = React.useState('');
// Authors actually present in this folder — drives the dropdown options.
const authorIds = React.useMemo(() => {
const ids = new Set();
for (const f of allFiles) ids.add(f.author);
return Array.from(ids);
}, [allFiles]);
// Apply filter → search → sort. `mins` is "minutes ago" so smaller = recent.
const files = React.useMemo(() => {
const q = search.trim().toLowerCase();
let out = allFiles;
if (authorFilter !== 'all') out = out.filter((f) => f.author === authorFilter);
if (q) out = out.filter((f) => (f.title || '').toLowerCase().includes(q) || (f.id || '').toLowerCase().includes(q));
out = [...out];
if (sortKey === 'title') out.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
else if (sortKey === 'oldest') out.sort((a, b) => (b.mins || 0) - (a.mins || 0));
else if (sortKey === 'author') out.sort((a, b) => {
const an = (ACTORS[a.author]?.name || a.author || '').toLowerCase();
const bn = (ACTORS[b.author]?.name || b.author || '').toLowerCase();
return an.localeCompare(bn) || (a.mins || 0) - (b.mins || 0);
});
else out.sort((a, b) => (a.mins || 0) - (b.mins || 0)); // 'recent' default
return out;
}, [allFiles, authorFilter, sortKey, search]);
// Lazy-load folder children if the sidebar didn't already.
React.useEffect(() => {
if (window.ensureFolderChildren) window.ensureFolderChildren(folder).catch(() => {});
}, [folder]);
// Load file uploads for this folder.
const refreshUploads = React.useCallback(async () => {
try { setUploads(await window.listUploadsInFolder(folder)); }
catch (e) { console.error(e); }
}, [folder]);
React.useEffect(() => { refreshUploads(); }, [refreshUploads]);
const uploadFiles = async (fileList) => {
if (!fileList || fileList.length === 0) return;
setUploadError(null);
setUploadingCount(fileList.length);
let ok = 0;
for (const f of fileList) {
try { await window.uploadFileToFolder(folder, f); ok++; }
catch (e) {
const msg = `${f.name}: ${e.message || 'error'}`;
setUploadError(msg);
console.error(e);
}
}
setUploadingCount(0);
await refreshUploads();
};
const onDrop = (e) => {
e.preventDefault(); setDragOver(false);
const filesArr = Array.from(e.dataTransfer.files || []);
if (filesArr.length) uploadFiles(filesArr);
};
const onDeleteUpload = async (id) => {
if (!confirm('¿Borrar este archivo?')) return;
try { await window.deleteUpload(id); await refreshUploads(); }
catch (e) { console.error(e); }
};
// Soft-delete a single Markdown doc from the row trash icon.
const onDeleteDoc = async (docId, title) => {
if (!confirm(`¿Borrar "${title || docId}"?\n\nVa a la papelera (soft-delete).`)) return;
try { await window.deleteDoc(docId); }
catch (e) { alert(e?.message || 'No se pudo borrar el documento.'); }
};
// Bulk soft-delete every selected doc id. Sequential to avoid hammering
// the server; fast enough for the few-dozen-row case.
const onBulkDelete = async () => {
if (selected.size === 0) return;
if (!confirm(`¿Borrar ${selected.size} documento${selected.size === 1 ? '' : 's'}?\n\nVa${selected.size === 1 ? '' : 'n'} a la papelera (soft-delete).`)) return;
const ids = Array.from(selected);
let failed = 0;
for (const id of ids) {
try { await window.deleteDoc(id); }
catch { failed++; }
}
setSelected(new Set());
if (failed > 0) alert(`${failed} de ${ids.length} no se pudieron borrar.`);
};
const isFolderEmpty = isEmpty || (files.length === 0 && uploads.length === 0);
if (isFolderEmpty) {
return (
{ e.preventDefault(); if (!dragOver) setDragOver(true); }}
onDragLeave={(e) => { if (e.currentTarget.contains(e.relatedTarget)) return; setDragOver(false); }}
onDrop={onDrop}>
{dragOver && }
/{folder}
0 archivos · carpeta vacía
{/* Upload status — shown ABOVE the empty-state CTA so a failed upload doesn't disappear silently while the folder is still rendered as empty. */}
{uploadingCount > 0 && (
);
}
// Small controlled search input for the folder view. Local-only — filters
// the already-loaded `files` array by title/slug substring. The global
// full-text search lives in the ⌘K palette.
function FolderSearchInput({ value, onChange, placeholder }) {
return (
setExpanded((v) => !v)} />
: