krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: FileBrowser matches FileSharing — no inline row buttons, context menu copy/cut/paste/rename/delete, selection Download+Delete panel, drag hint

Browse Source
This commit is contained in:
Krao Hasanee
2026-06-02 14:43:05 -04:00
parent 959dd571d2
commit 144bda426b
1 changed files with 158 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileBrowser.jsx
+158 -115
View File
@@ -6,6 +6,9 @@ import { popupMenuStyle } from '../lib/popupStyles';
const TABLE_TH = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px', border: 'none', background: 'transparent', verticalAlign: 'top' }; const TABLE_TH = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px', border: 'none', background: 'transparent', verticalAlign: 'top' };
const TABLE_TD = { padding: '5px', fontSize: 13, color: 'var(--text-primary)', border: 'none', background: 'transparent' }; const TABLE_TD = { padding: '5px', fontSize: 13, color: 'var(--text-primary)', border: 'none', background: 'transparent' };
const LABEL = { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' };
const ITEM_STYLE = { display: 'flex', alignItems: 'center', gap: 8, padding: '7px 14px', fontSize: 13, cursor: 'pointer', color: 'var(--text-primary)', background: 'none', border: 'none', width: '100%', textAlign: 'left', borderRadius: 4, whiteSpace: 'nowrap' };
const SEP = { height: 1, background: 'var(--border)', margin: '4px 0' };
function formatBytes(bytes) { function formatBytes(bytes) {
const value = Number(bytes || 0); const value = Number(bytes || 0);
@@ -81,6 +84,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
const [sortKey, setSortKey] = useState('name'); const [sortKey, setSortKey] = useState('name');
const [sortDir, setSortDir] = useState('asc'); const [sortDir, setSortDir] = useState('asc');
const [ctxMenu, setCtxMenu] = useState(null); const [ctxMenu, setCtxMenu] = useState(null);
const [clipboard, setClipboard] = useState(null);
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
const folderInputRef = useRef(null); const folderInputRef = useRef(null);
@@ -110,9 +114,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
}; };
const loadFiles = async (path = currentPath) => { const loadFiles = async (path = currentPath) => {
setLoading(true); setLoading(true); setError(''); setSelected(new Set());
setError('');
setSelected(new Set());
try { try {
const params = new URLSearchParams({ action: 'list', path }); const params = new URLSearchParams({ action: 'list', path });
const data = await apiFetch(`/api/filebrowser?${params}`); const data = await apiFetch(`/api/filebrowser?${params}`);
@@ -122,11 +124,8 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
setParentPath(data.parentPath || '/'); setParentPath(data.parentPath || '/');
setCanGoUp(data.canGoUp || false); setCanGoUp(data.canGoUp || false);
setReadOnly(data.readOnly || false); setReadOnly(data.readOnly || false);
} catch (err) { } catch (err) { setError(err.message); }
setError(err.message); finally { setLoading(false); }
} finally {
setLoading(false);
}
}; };
useEffect(() => { loadFiles(initialPath); }, [initialPath]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { loadFiles(initialPath); }, [initialPath]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -165,6 +164,17 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
finally { setWorking(''); } finally { setWorking(''); }
}; };
const downloadSelected = async () => {
if (!selected.size) return;
setWorking('dl-sel');
try {
for (const name of selected) {
const entry = entries.find(e => e.name === name);
if (entry && entry.type !== 'dir') await downloadFile(entry);
}
} finally { setWorking(''); }
};
const deleteEntry = async (entry) => { const deleteEntry = async (entry) => {
if (!window.confirm(`Delete "${entry.name}"? This cannot be undone.`)) return; if (!window.confirm(`Delete "${entry.name}"? This cannot be undone.`)) return;
setWorking(`del:${entry.path}`); setWorking(`del:${entry.path}`);
@@ -211,15 +221,28 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
finally { setWorking(''); } finally { setWorking(''); }
}; };
const pasteClipboard = async () => {
if (!clipboard) return;
setWorking('paste');
try {
for (const item of clipboard.items) {
await apiFetch('/api/filebrowser?action=' + (clipboard.mode === 'copy' ? 'copy' : 'move'), {
method: 'POST',
body: JSON.stringify({ srcPath: item.path, dstParentPath: currentPath }),
});
}
if (clipboard.mode === 'move') setClipboard(null);
await loadFiles(currentPath);
} catch (err) { setError(err.message); }
finally { setWorking(''); }
};
async function uploadOneFile(vPath, file, retries = 3) { async function uploadOneFile(vPath, file, retries = 3) {
for (let attempt = 1; attempt <= retries; attempt++) { for (let attempt = 1; attempt <= retries; attempt++) {
try { try {
const res = await apiFetch(`/api/filebrowser?action=upload&path=${encodeURIComponent(vPath)}`, { await apiFetch(`/api/filebrowser?action=upload&path=${encodeURIComponent(vPath)}`, {
method: 'POST', method: 'POST', headers: { 'Content-Type': 'application/octet-stream' }, body: file,
headers: { 'Content-Type': 'application/octet-stream' },
body: file,
}); });
if (!res) return;
return; return;
} catch (err) { } catch (err) {
if (attempt === retries) throw err; if (attempt === retries) throw err;
@@ -238,11 +261,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
setUploadProgress(Math.round(((i + 1) / sel.length) * 100)); setUploadProgress(Math.round(((i + 1) / sel.length) * 100));
} }
} catch (err) { setError(err.message); } } catch (err) { setError(err.message); }
finally { finally { setWorking(''); setUploadProgress(null); if (fileInputRef.current) fileInputRef.current.value = ''; setDragging(false); await loadFiles(currentPath); }
setWorking(''); setUploadProgress(null);
if (fileInputRef.current) fileInputRef.current.value = '';
setDragging(false); await loadFiles(currentPath);
}
}; };
const uploadFolder = async (files) => { const uploadFolder = async (files) => {
@@ -256,18 +275,14 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
for (let i = 1; i <= parts.length; i++) dirsNeeded.add(parts.slice(0, i).join('/')); for (let i = 1; i <= parts.length; i++) dirsNeeded.add(parts.slice(0, i).join('/'));
} }
for (const dir of [...dirsNeeded].sort((a, b) => a.split('/').length - b.split('/').length)) { for (const dir of [...dirsNeeded].sort((a, b) => a.split('/').length - b.split('/').length)) {
await apiFetch(`/api/filebrowser?action=mkdir`, { method: 'POST', body: JSON.stringify({ path: currentPath, name: dir.split('/').pop() }) }).catch(() => {}); await apiFetch('/api/filebrowser?action=mkdir', { method: 'POST', body: JSON.stringify({ path: currentPath, name: dir.split('/').pop() }) }).catch(() => {});
} }
for (let i = 0; i < sel.length; i++) { for (let i = 0; i < sel.length; i++) {
await uploadOneFile(joinVirtualPath(currentPath, sel[i].webkitRelativePath), sel[i]); await uploadOneFile(joinVirtualPath(currentPath, sel[i].webkitRelativePath), sel[i]);
setUploadProgress(Math.round(((i + 1) / sel.length) * 100)); setUploadProgress(Math.round(((i + 1) / sel.length) * 100));
} }
} catch (err) { setError(err.message); } } catch (err) { setError(err.message); }
finally { finally { setWorking(''); setUploadProgress(null); if (folderInputRef.current) folderInputRef.current.value = ''; await loadFiles(currentPath); }
setWorking(''); setUploadProgress(null);
if (folderInputRef.current) folderInputRef.current.value = '';
await loadFiles(currentPath);
}
}; };
const handleDragEnter = (e) => { e.preventDefault(); if (!readOnly) setDragging(true); }; const handleDragEnter = (e) => { e.preventDefault(); if (!readOnly) setDragging(true); };
@@ -280,23 +295,11 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
const fsEntries = items.map(i => i.webkitGetAsEntry?.()).filter(Boolean); const fsEntries = items.map(i => i.webkitGetAsEntry?.()).filter(Boolean);
if (fsEntries.some(en => en.isDirectory)) { if (fsEntries.some(en => en.isDirectory)) {
const readFsEntry = (entry) => new Promise(resolve => { const readFsEntry = (entry) => new Promise(resolve => {
if (entry.isFile) { if (entry.isFile) { entry.file(file => { Object.defineProperty(file, 'webkitRelativePath', { value: entry.fullPath.replace(/^\//, ''), writable: false, configurable: true }); resolve([file]); }); }
entry.file(file => { else if (entry.isDirectory) { const reader = entry.createReader(); const readAll = acc => reader.readEntries(async entries => { if (!entries.length) { resolve(acc); return; } const nested = await Promise.all(entries.map(readFsEntry)); readAll([...acc, ...nested.flat()]); }); readAll([]); }
Object.defineProperty(file, 'webkitRelativePath', { value: entry.fullPath.replace(/^\//, ''), writable: false, configurable: true }); else { resolve([]); }
resolve([file]);
});
} else if (entry.isDirectory) {
const reader = entry.createReader();
const readAll = acc => reader.readEntries(async entries => {
if (!entries.length) { resolve(acc); return; }
const nested = await Promise.all(entries.map(readFsEntry));
readAll([...acc, ...nested.flat()]);
});
readAll([]);
} else { resolve([]); }
}); });
const allFiles = (await Promise.all(fsEntries.map(readFsEntry))).flat(); uploadFolder((await Promise.all(fsEntries.map(readFsEntry))).flat());
uploadFolder(allFiles);
} else { } else {
if (!e.dataTransfer.files?.length) return; if (!e.dataTransfer.files?.length) return;
uploadFiles(e.dataTransfer.files); uploadFiles(e.dataTransfer.files);
@@ -305,20 +308,12 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
const toggleSelect = (name) => setSelected(prev => { const next = new Set(prev); next.has(name) ? next.delete(name) : next.add(name); return next; }); const toggleSelect = (name) => setSelected(prev => { const next = new Set(prev); next.has(name) ? next.delete(name) : next.add(name); return next; });
const openCtxMenu = (e, entry, childPath) => { const openCtxMenu = (e, entry, childPath) => { e.preventDefault(); e.stopPropagation(); setCtxMenu({ x: e.clientX, y: e.clientY, entry, childPath }); };
e.preventDefault(); e.stopPropagation();
setCtxMenu({ x: e.clientX, y: e.clientY, entry, childPath });
};
const CTX_ITEM = { display: 'flex', alignItems: 'center', gap: 8, padding: '7px 14px', fontSize: 13, cursor: 'pointer', color: 'var(--text-primary)', background: 'none', border: 'none', width: '100%', textAlign: 'left', borderRadius: 4, whiteSpace: 'nowrap' };
return ( return (
<div <div
style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, borderRadius: 8, border: `1px solid ${dragging ? 'var(--accent)' : 'var(--border)'}`, transition: 'border-color 140ms ease', position: 'relative', overflow: 'hidden' }} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, borderRadius: 8, border: `1px solid ${dragging ? 'var(--accent)' : 'var(--border)'}`, transition: 'border-color 140ms ease', position: 'relative', overflow: 'hidden' }}
onDragEnter={handleDragEnter} onDragEnter={handleDragEnter} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
> >
{dragging && ( {dragging && (
<div style={{ position: 'absolute', inset: 0, zIndex: 10, background: 'rgba(245,165,35,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}> <div style={{ position: 'absolute', inset: 0, zIndex: 10, background: 'rgba(245,165,35,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
@@ -330,43 +325,59 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
)} )}
{/* Toolbar */} {/* Toolbar */}
<div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}> <div style={{ padding: '18px 21px', borderBottom: '1px solid var(--border)', flexShrink: 0, position: 'relative' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--text-secondary)', flexWrap: 'wrap' }}> {/* Selection actions — absolute top-right like FileSharing */}
<button type="button" onClick={() => loadFiles(rootPath)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--text-primary)', fontFamily: 'inherit', padding: 0 }}>Files</button> {selected.size > 0 && (
{breadcrumbs.slice(pathParts(rootPath).length).map((part, i) => { <div style={{ position: 'absolute', top: 18, right: 21, display: 'flex', gap: 8 }}>
const absIdx = pathParts(rootPath).length + i; <button className="btn btn-outline" disabled={Boolean(working)} onClick={downloadSelected}>Download ({selected.size})</button>
return ( {!readOnly && <button className="btn btn-danger" disabled={Boolean(working)} onClick={deleteSelected}>Delete ({selected.size})</button>}
<span key={`${part}-${absIdx}`} style={{ display: 'flex', alignItems: 'center', gap: 4 }}> </div>
<span style={{ opacity: 0.4 }}>/</span> )}
<button type="button" onClick={() => loadFiles(pathTo(absIdx, breadcrumbs))} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: absIdx === breadcrumbs.length - 1 ? 'var(--accent)' : 'var(--text-primary)', fontFamily: 'inherit', padding: 0 }}>{part}</button>
</span>
);
})}
</div>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexShrink: 0 }}> <div style={{ paddingRight: selected.size > 0 ? 260 : 0 }}>
{uploadProgress !== null && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Uploading {uploadProgress}%</span>} <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
{selected.size > 0 && ( <div style={LABEL}>Files</div>
<button className="btn btn-danger" onClick={deleteSelected}>Delete ({selected.size})</button> <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
)} {uploadProgress !== null && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Uploading {uploadProgress}%</span>}
{!readOnly && (showFolderInput ? ( {clipboard && (
<form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}> <button className="btn btn-outline" disabled={Boolean(working)} onClick={pasteClipboard}>Paste ({clipboard.items.length})</button>
<input autoFocus type="text" value={folderName} onChange={e => setFolderName(e.target.value)} placeholder="Folder name" disabled={Boolean(working)} style={{ fontSize: 12, padding: '3px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--card-bg-2)', color: 'var(--text-primary)', width: 140 }} /> )}
<LoadingButton type="submit" className="btn btn-outline" loading={working === 'mkdir'} disabled={!folderName.trim() || Boolean(working)} loadingText="…">Create</LoadingButton> {!readOnly && (showFolderInput ? (
<button type="button" className="btn btn-outline" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button> <form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}>
</form> <input autoFocus type="text" value={folderName} onChange={e => setFolderName(e.target.value)} placeholder="Folder name" disabled={Boolean(working)} style={{ fontSize: 12, padding: '3px 8px', borderRadius: 4, border: '1px solid var(--border)', background: 'var(--card-bg-2)', color: 'var(--text-primary)', width: 140 }} />
) : ( <LoadingButton type="submit" className="btn btn-outline" loading={working === 'mkdir'} disabled={!folderName.trim() || Boolean(working)} loadingText="…">Create</LoadingButton>
<button className="btn btn-outline" disabled={Boolean(working)} onClick={() => setShowFolderInput(true)}>+ Folder</button> <button type="button" className="btn btn-outline" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button>
))} </form>
{!readOnly && ( ) : (
<> <button className="btn btn-outline" disabled={Boolean(working)} onClick={() => setShowFolderInput(true)}>+ Folder</button>
<input ref={folderInputRef} type="file" style={{ display: 'none' }} onChange={e => uploadFolder(e.target.files)} {...{ webkitdirectory: '' }} /> ))}
<input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={e => uploadFiles(e.target.files)} /> {!readOnly && (
<LoadingButton className="btn btn-outline" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => folderInputRef.current?.click()}>↑ Folder</LoadingButton> <>
<LoadingButton className="btn btn-primary" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => fileInputRef.current?.click()}>↑ Files</LoadingButton> <input ref={folderInputRef} type="file" style={{ display: 'none' }} onChange={e => uploadFolder(e.target.files)} {...{ webkitdirectory: '' }} />
</> <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={e => uploadFiles(e.target.files)} />
)} <LoadingButton className="btn btn-outline" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => folderInputRef.current?.click()}>↑ Folder</LoadingButton>
<LoadingButton className="btn btn-outline" loading={loading} disabled={Boolean(working)} loadingText="…" onClick={() => loadFiles(currentPath)}>⟳</LoadingButton> <LoadingButton className="btn btn-primary" loading={working === 'upload'} disabled={Boolean(working)} loadingText="Uploading…" onClick={() => fileInputRef.current?.click()}>↑ Files</LoadingButton>
</>
)}
<LoadingButton className="btn btn-outline" loading={loading} disabled={Boolean(working)} loadingText="…" onClick={() => loadFiles(currentPath)}>⟳</LoadingButton>
</div>
</div>
<div style={{ fontSize: 12, color: dragging ? 'var(--accent)' : 'var(--text-muted)', marginTop: 2, marginBottom: 14, transition: 'color 140ms ease' }}>
Drag and drop files or folders here.
</div>
{/* Breadcrumbs */}
<div style={{ fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
<button type="button" onClick={() => loadFiles(rootPath)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--text-primary)', fontFamily: 'inherit', padding: 0 }}>Files</button>
{breadcrumbs.slice(pathParts(rootPath).length).map((part, i) => {
const absIdx = pathParts(rootPath).length + i;
return (
<span key={`${part}-${absIdx}`} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<span style={{ opacity: 0.4 }}>/</span>
<button type="button" onClick={() => loadFiles(pathTo(absIdx, breadcrumbs))} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase', color: absIdx === breadcrumbs.length - 1 ? 'var(--accent)' : 'var(--text-primary)', fontFamily: 'inherit', padding: 0 }}>{part}</button>
</span>
);
})}
</div>
</div> </div>
</div> </div>
@@ -380,9 +391,9 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
<div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 21px' }}> <div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 21px' }}>
{error && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{error}</div>} {error && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{error}</div>}
{loading ? ( {loading ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 80, fontSize: 13, color: 'var(--text-muted)' }}>Loading…</div> <div className="card-empty-center">Loading…</div>
) : entries.length === 0 ? ( ) : entries.length === 0 ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 80, fontSize: 13, color: 'var(--text-muted)' }}>This folder is empty.</div> <div className="card-empty-center">This folder is empty.</div>
) : ( ) : (
<table className="table-sticky-head" style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse' }}> <table className="table-sticky-head" style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse' }}>
<colgroup> <colgroup>
@@ -390,7 +401,6 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
<col /> <col />
<col style={{ width: 90 }} /> <col style={{ width: 90 }} />
<col style={{ width: 180 }} /> <col style={{ width: 180 }} />
<col style={{ width: 80 }} />
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@@ -400,7 +410,6 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
<SortTh col="name" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'left', paddingLeft: 5 }}>Name</SortTh> <SortTh col="name" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'left', paddingLeft: 5 }}>Name</SortTh>
<SortTh col="size" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right' }}>Size</SortTh> <SortTh col="size" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right' }}>Size</SortTh>
<SortTh col="modified" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right' }}>Modified</SortTh> <SortTh col="modified" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right' }}>Modified</SortTh>
<th style={{ ...TABLE_TH }} />
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -415,7 +424,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
<span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Up one folder</span> <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Up one folder</span>
</div> </div>
</td> </td>
<td /><td /><td /> <td /><td />
</tr> </tr>
)} )}
{sortedEntries.map((entry, idx) => { {sortedEntries.map((entry, idx) => {
@@ -444,28 +453,15 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<FileIcon entry={entry} /> <FileIcon entry={entry} />
{isDir ? ( {isDir ? (
<button type="button" onClick={e => { e.stopPropagation(); loadFiles(childPath); }} style={{ fontSize: 13, fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--accent)' }}>{entry.name}</button> <button type="button" className="dashboard-inline-link" onClick={e => { e.stopPropagation(); loadFiles(childPath); }} style={{ fontSize: 13, fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>{entry.name}</button>
) : ( ) : (
<span style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</span> <span style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{entry.name}</span>
)} )}
</div> </div>
)} )}
</td> </td>
<td style={{ ...TABLE_TD, background: rowBg, textAlign: 'right', fontSize: 12, color: 'var(--text-muted)' }}>{isDir ? '—' : formatBytes(entry.size)}</td> <td style={{ ...TABLE_TD, background: rowBg, textAlign: 'right', fontSize: 12 }}>{isDir ? '—' : formatBytes(entry.size)}</td>
<td style={{ ...TABLE_TD, background: rowBg, textAlign: 'right', fontSize: 12, color: 'var(--text-muted)' }}>{formatDate(entry.mtime)}</td> <td style={{ ...TABLE_TD, background: rowBg, textAlign: 'right', fontSize: 12 }}>{formatDate(entry.mtime)}</td>
<td style={{ ...TABLE_TD, background: rowBg, textAlign: 'right' }} onClick={e => e.stopPropagation()}>
{!isRenaming && !readOnly && (
<div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
{!isDir && (
<LoadingButton className="btn btn-outline" loading={working === `dl:${entry.path}`} disabled={Boolean(working)} loadingText="↓" onClick={() => downloadFile(entry)}>↓</LoadingButton>
)}
<button className="btn btn-outline" disabled={Boolean(working)} onClick={() => { setRenamingEntry(entry); setRenameValue(entry.name); }}>
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</button>
<button className="btn btn-danger" disabled={Boolean(working)} onClick={() => deleteEntry(entry)}>✕</button>
</div>
)}
</td>
</tr> </tr>
); );
})} })}
@@ -476,22 +472,69 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
{/* Context menu */} {/* Context menu */}
{ctxMenu && ( {ctxMenu && (
<div onClick={e => e.stopPropagation()} style={{ ...popupMenuStyle, position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 1000, padding: '4px 0', minWidth: 150 }}> <div onClick={e => e.stopPropagation()} style={{ ...popupMenuStyle, position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 1000, padding: '4px 0', minWidth: 160 }}>
{ctxMenu.entry && ctxMenu.entry.type !== 'dir' && ( {ctxMenu.entry?.type === 'dir' && (
<button style={CTX_ITEM} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { downloadFile(ctxMenu.entry); setCtxMenu(null); }}> <button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { loadFiles(ctxMenu.childPath); setCtxMenu(null); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" /></svg>
Open
</button>
)}
{ctxMenu.entry?.type !== 'dir' && (
<button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { downloadFile(ctxMenu.entry); setCtxMenu(null); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Download Download
</button> </button>
)} )}
{ctxMenu.entry && ( {ctxMenu.entry && !readOnly && (
<> <>
<button style={CTX_ITEM} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { setRenamingEntry(ctxMenu.entry); setRenameValue(ctxMenu.entry.name); setCtxMenu(null); }}> <div style={SEP} />
<button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { setRenamingEntry(ctxMenu.entry); setRenameValue(ctxMenu.entry.name); setCtxMenu(null); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
Rename Rename
</button> </button>
<div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} /> </>
<button style={{ ...CTX_ITEM, color: 'var(--danger)' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { deleteEntry(ctxMenu.entry); setCtxMenu(null); }}> )}
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg> {ctxMenu.entry && (
<>
<div style={SEP} />
<button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'}
onClick={() => {
const items = selected.has(ctxMenu.entry.name)
? [...selected].map(n => { const en = entries.find(e => e.name === n); return { name: n, path: en?.path ?? joinVirtualPath(currentPath, n) }; })
: [{ name: ctxMenu.entry.name, path: ctxMenu.childPath }];
setClipboard({ items, mode: 'copy' }); setCtxMenu(null);
}}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
Copy
</button>
{!readOnly && (
<button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'}
onClick={() => {
const items = selected.has(ctxMenu.entry.name)
? [...selected].map(n => { const en = entries.find(e => e.name === n); return { name: n, path: en?.path ?? joinVirtualPath(currentPath, n) }; })
: [{ name: ctxMenu.entry.name, path: ctxMenu.childPath }];
setClipboard({ items, mode: 'move' }); setCtxMenu(null);
}}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg>
Cut
</button>
)}
</>
)}
{clipboard && (
<>
<div style={SEP} />
<button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { pasteClipboard(); setCtxMenu(null); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
Paste here{clipboard.items.length > 1 ? ` (${clipboard.items.length})` : ''}
</button>
</>
)}
{!readOnly && ctxMenu.entry && (
<>
<div style={SEP} />
<button style={{ ...ITEM_STYLE, color: 'var(--danger)' }} onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,80,80,0.08)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { setCtxMenu(null); deleteEntry(ctxMenu.entry); }}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
Delete Delete
</button> </button>
</> </>