Move New Folder inline next to Sync Folders button
Clicking '+ New Folder' expands an inline input in the action bar. Removed the separate form below the toolbar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
@@ -0,0 +1,368 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import Layout from '../../components/Layout';
|
||||
import LoadingButton from '../../components/LoadingButton';
|
||||
import { supabase } from '../../lib/supabase';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { syncSeafileFolders } from '../../lib/seafileFolders';
|
||||
|
||||
function formatBytes(bytes) {
|
||||
const value = Number(bytes || 0);
|
||||
if (!value) return '—';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
|
||||
return `${(value / (1024 ** index)).toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
|
||||
}
|
||||
|
||||
function formatDate(timestamp) {
|
||||
if (!timestamp) return '—';
|
||||
const millis = Number(timestamp) * 1000;
|
||||
if (!Number.isFinite(millis)) return '—';
|
||||
return new Date(millis).toLocaleDateString();
|
||||
}
|
||||
|
||||
function pathParts(path) {
|
||||
return String(path || '/').split('/').filter(Boolean);
|
||||
}
|
||||
|
||||
function pathTo(index, parts) {
|
||||
return `/${parts.slice(0, index + 1).join('/')}`;
|
||||
}
|
||||
|
||||
export default function FileSharing() {
|
||||
const { currentUser } = useAuth();
|
||||
const [currentPath, setCurrentPath] = useState('/');
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [usageBytes, setUsageBytes] = useState(0);
|
||||
const [configured, setConfigured] = useState(true);
|
||||
const [parentPath, setParentPath] = useState('/');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [working, setWorking] = useState('');
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [folderName, setFolderName] = useState('');
|
||||
const [showFolderInput, setShowFolderInput] = useState(false);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const breadcrumbs = useMemo(() => pathParts(currentPath), [currentPath]);
|
||||
|
||||
const apiFetch = async (url, options = {}) => {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session?.access_token) throw new Error('Your session expired. Please sign in again.');
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
Authorization: `Bearer ${session.access_token}`,
|
||||
...(options.body instanceof FormData ? {} : { 'Content-Type': 'application/json' }),
|
||||
...(options.headers || {}),
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) throw new Error(data.error || 'File sharing request failed.');
|
||||
return data;
|
||||
};
|
||||
|
||||
const loadFiles = async (path = currentPath, options = {}) => {
|
||||
const { invalidateUsage = false } = options;
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
action: 'list',
|
||||
path,
|
||||
});
|
||||
if (invalidateUsage) params.set('invalidateUsage', '1');
|
||||
|
||||
const data = await apiFetch(`/api/seafile?${params.toString()}`);
|
||||
setConfigured(data.configured !== false);
|
||||
setEntries(data.entries || []);
|
||||
setUsageBytes(Number(data.usageBytes || 0));
|
||||
setCurrentPath(data.path || '/');
|
||||
setParentPath(data.parentPath || '/');
|
||||
if (data.configured === false) setError(data.error || 'Seafile is not configured yet.');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setUsageBytes(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadFiles('/');
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleSyncFolders = async () => {
|
||||
setWorking('sync');
|
||||
setError('');
|
||||
try {
|
||||
await syncSeafileFolders();
|
||||
await loadFiles(currentPath, { invalidateUsage: true });
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setWorking('');
|
||||
}
|
||||
};
|
||||
|
||||
const openFolder = (entry) => {
|
||||
if (entry.type === 'dir') loadFiles(entry.path);
|
||||
};
|
||||
|
||||
const downloadFile = async (entry) => {
|
||||
setWorking(`download:${entry.path}`);
|
||||
setError('');
|
||||
try {
|
||||
const data = await apiFetch(`/api/seafile?action=download&path=${encodeURIComponent(entry.path)}`);
|
||||
if (data.url) window.open(data.url, '_blank');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setWorking('');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteEntry = async (entry) => {
|
||||
const kind = entry.type === 'dir' ? 'folder' : 'file';
|
||||
if (!window.confirm(`Delete "${entry.name}" ${kind}? This cannot be undone.`)) return;
|
||||
|
||||
setWorking(`delete:${entry.path}`);
|
||||
setError('');
|
||||
try {
|
||||
await apiFetch(`/api/seafile?action=delete&path=${encodeURIComponent(entry.path)}&type=${encodeURIComponent(entry.type)}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
await loadFiles(currentPath);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setWorking('');
|
||||
}
|
||||
};
|
||||
|
||||
const createFolder = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!folderName.trim()) return;
|
||||
|
||||
setWorking('mkdir');
|
||||
setError('');
|
||||
try {
|
||||
await apiFetch('/api/seafile?action=mkdir', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ path: currentPath, name: folderName }),
|
||||
});
|
||||
setFolderName('');
|
||||
setShowFolderInput(false);
|
||||
await loadFiles(currentPath, { invalidateUsage: true });
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setWorking('');
|
||||
}
|
||||
};
|
||||
|
||||
const uploadFiles = async (files) => {
|
||||
const selected = Array.from(files || []);
|
||||
if (!selected.length) return;
|
||||
|
||||
setWorking('upload');
|
||||
setError('');
|
||||
try {
|
||||
const data = await apiFetch('/api/seafile?action=upload-link', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ path: currentPath }),
|
||||
});
|
||||
|
||||
if (!data.uploadLink || !data.parentDir) throw new Error('Seafile did not return an upload link.');
|
||||
|
||||
const formData = new FormData();
|
||||
selected.forEach(file => formData.append('file', file));
|
||||
formData.append('parent_dir', data.parentDir);
|
||||
formData.append('replace', '0');
|
||||
|
||||
const uploadResponse = await fetch(`${data.uploadLink}${data.uploadLink.includes('?') ? '&' : '?'}ret-json=1`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!uploadResponse.ok) {
|
||||
const text = await uploadResponse.text();
|
||||
throw new Error(text || 'Upload failed.');
|
||||
}
|
||||
|
||||
await loadFiles(currentPath);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setWorking('');
|
||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||
setDragging(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnter = (e) => {
|
||||
e.preventDefault();
|
||||
if (!configured || loading || working) return;
|
||||
setDragging(true);
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
if (!configured || loading || working) return;
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
setDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e) => {
|
||||
e.preventDefault();
|
||||
if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
setDragging(false);
|
||||
if (!configured || loading || working) return;
|
||||
uploadFiles(e.dataTransfer.files);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="page-header">
|
||||
<div>
|
||||
<div className="page-title">File Sharing</div>
|
||||
<div className="page-subtitle">Shared Seafile workspace for team members and subcontractors.</div>
|
||||
</div>
|
||||
<div className="page-subtitle" style={{ marginTop: 6 }}>
|
||||
Used in this location: {formatBytes(usageBytes)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
className={`file-browser${dragging ? ' file-browser-dragging' : ''}`}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{dragging && (
|
||||
<div className="file-drop-overlay">
|
||||
<div className="file-drop-panel">
|
||||
<div className="file-drop-icon">↑</div>
|
||||
<div className="file-drop-title">Drop files to upload</div>
|
||||
<div className="file-drop-subtitle">Files will be added to the current folder.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="file-browser-toolbar">
|
||||
<div className="file-browser-breadcrumbs">
|
||||
<button type="button" onClick={() => loadFiles('/')} className="file-breadcrumb">Files</button>
|
||||
{breadcrumbs.map((part, index) => (
|
||||
<button type="button" key={`${part}-${index}`} onClick={() => loadFiles(pathTo(index, breadcrumbs))} className="file-breadcrumb">
|
||||
{part}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="file-browser-actions">
|
||||
{currentUser?.role === 'team' && (
|
||||
<LoadingButton className="btn btn-outline btn-sm" loading={working === 'sync'} disabled={loading || Boolean(working)} loadingText="Syncing..." onClick={handleSyncFolders}>
|
||||
Sync Folders
|
||||
</LoadingButton>
|
||||
)}
|
||||
{showFolderInput ? (
|
||||
<form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}>
|
||||
<input
|
||||
type="text"
|
||||
value={folderName}
|
||||
onChange={(e) => setFolderName(e.target.value)}
|
||||
placeholder="Folder name"
|
||||
autoFocus
|
||||
disabled={!configured || loading || Boolean(working)}
|
||||
style={{ fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
|
||||
/>
|
||||
<LoadingButton className="btn btn-outline btn-sm" loading={working === 'mkdir'} disabled={!folderName.trim() || !configured || loading || Boolean(working)} loadingText="Creating...">
|
||||
Create
|
||||
</LoadingButton>
|
||||
<button type="button" className="btn btn-outline btn-sm" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button>
|
||||
</form>
|
||||
) : (
|
||||
<button className="btn btn-outline btn-sm" disabled={!configured || loading || Boolean(working)} onClick={() => setShowFolderInput(true)}>
|
||||
+ New Folder
|
||||
</button>
|
||||
)}
|
||||
<LoadingButton className="btn btn-outline btn-sm" loading={loading} disabled={Boolean(working)} loadingText="Refreshing..." onClick={() => loadFiles(currentPath)}>
|
||||
⟳ Refresh
|
||||
</LoadingButton>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="file-upload-input"
|
||||
onChange={(e) => uploadFiles(e.target.files)}
|
||||
/>
|
||||
<LoadingButton className="btn btn-primary btn-sm" loading={working === 'upload'} disabled={!configured || loading || Boolean(working)} loadingText="Uploading..." onClick={() => fileInputRef.current?.click()}>
|
||||
↑ Upload
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="notification notification-info">{error}</div>}
|
||||
|
||||
<div className="file-list">
|
||||
{currentPath !== '/' && (
|
||||
<button type="button" className="file-row file-row-button" onClick={() => loadFiles(parentPath)} disabled={loading || Boolean(working)}>
|
||||
<span className="file-icon">↰</span>
|
||||
<span className="file-name">Up one folder</span>
|
||||
<span className="file-meta">—</span>
|
||||
<span className="file-meta">—</span>
|
||||
<span>Actions</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="file-row file-row-head">
|
||||
<span />
|
||||
<span>Name</span>
|
||||
<span>Size</span>
|
||||
<span>Modified</span>
|
||||
<span />
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="empty-state">Loading files...</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>No files here yet</h3>
|
||||
<p>Upload files or create a folder to start this workspace.</p>
|
||||
</div>
|
||||
) : entries.map(entry => (
|
||||
<div className="file-row" key={`${entry.type}:${entry.path}`}>
|
||||
<span className="file-icon">{entry.type === 'dir' ? '▣' : '□'}</span>
|
||||
{entry.type === 'dir' ? (
|
||||
<button type="button" className="file-name file-name-button" onClick={() => openFolder(entry)} disabled={Boolean(working)}>
|
||||
{entry.name}
|
||||
</button>
|
||||
) : (
|
||||
<span className="file-name">{entry.name}</span>
|
||||
)}
|
||||
<span className="file-meta">{formatBytes(entry.aggregateSize ?? entry.size)}</span>
|
||||
<span className="file-meta">{formatDate(entry.mtime)}</span>
|
||||
<span className="file-row-actions">
|
||||
{entry.type === 'file' && (
|
||||
<LoadingButton className="btn btn-outline btn-sm" loading={working === `download:${entry.path}`} disabled={Boolean(working)} loadingText="Opening..." onClick={() => downloadFile(entry)}>
|
||||
Download
|
||||
</LoadingButton>
|
||||
)}
|
||||
<LoadingButton className="btn btn-danger btn-sm" loading={working === `delete:${entry.path}`} disabled={Boolean(working)} loadingText="Deleting..." onClick={() => deleteEntry(entry)}>
|
||||
Delete
|
||||
</LoadingButton>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user