Merge assets-panel empty state into one dropzone
The Assets panel used to show a small always-visible dropzone plus a separate italic "No assets uploaded yet" line stacked underneath it when there were no assets -- two redundant messages for one state. Replace both with a single tall dropzone (icon + "Drag images here or click to upload") that also opens the file picker on click; it collapses back to the original slim "Drop files here to upload" bar once assets exist. Upload/drag-drop behavior is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -107,23 +107,41 @@ export const AssetsPanel: React.FC = () => {
|
||||
{loading ? 'Uploading...' : 'Upload File'}
|
||||
</button>
|
||||
|
||||
{/* Drop zone */}
|
||||
{/* Drop zone -- a single element that doubles as the empty state.
|
||||
Previously this was a small always-visible dropzone PLUS a
|
||||
separate italic "No assets uploaded yet" line stacked underneath
|
||||
it when empty; merged into one tall dropzone (icon + copy,
|
||||
click-or-drag) so the empty state isn't two redundant messages.
|
||||
Once assets exist it collapses back to a slim persistent drop
|
||||
target above the grid. */}
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={assets.length === 0 ? () => fileInputRef.current?.click() : undefined}
|
||||
role={assets.length === 0 ? 'button' : undefined}
|
||||
tabIndex={assets.length === 0 ? 0 : undefined}
|
||||
style={{
|
||||
padding: 20,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
padding: assets.length === 0 ? '36px 20px' : 16,
|
||||
border: `2px dashed ${isDragOver ? 'var(--color-accent)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--radius-md)',
|
||||
background: isDragOver ? 'var(--color-accent-subtle)' : 'transparent',
|
||||
textAlign: 'center',
|
||||
color: isDragOver ? 'var(--color-accent)' : 'var(--color-text-dim)',
|
||||
fontSize: 11,
|
||||
cursor: assets.length === 0 ? 'pointer' : 'default',
|
||||
transition: 'all var(--transition-fast)',
|
||||
}}
|
||||
>
|
||||
Drop files here to upload
|
||||
{assets.length === 0 && (
|
||||
<i className="fa fa-cloud-upload" aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
|
||||
)}
|
||||
{assets.length === 0 ? 'Drag images here or click to upload' : 'Drop files here to upload'}
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
@@ -143,20 +161,6 @@ export const AssetsPanel: React.FC = () => {
|
||||
)}
|
||||
|
||||
{/* Asset grid */}
|
||||
{assets.length === 0 && !loading && (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
padding: 20,
|
||||
color: 'var(--color-text-dim)',
|
||||
fontSize: 12,
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
No assets uploaded yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
|
||||
Reference in New Issue
Block a user