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'}
|
{loading ? 'Uploading...' : 'Upload File'}
|
||||||
</button>
|
</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
|
<div
|
||||||
onDrop={handleDrop}
|
onDrop={handleDrop}
|
||||||
onDragOver={handleDragOver}
|
onDragOver={handleDragOver}
|
||||||
onDragLeave={handleDragLeave}
|
onDragLeave={handleDragLeave}
|
||||||
|
onClick={assets.length === 0 ? () => fileInputRef.current?.click() : undefined}
|
||||||
|
role={assets.length === 0 ? 'button' : undefined}
|
||||||
|
tabIndex={assets.length === 0 ? 0 : undefined}
|
||||||
style={{
|
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)'}`,
|
border: `2px dashed ${isDragOver ? 'var(--color-accent)' : 'var(--color-border)'}`,
|
||||||
borderRadius: 'var(--radius-md)',
|
borderRadius: 'var(--radius-md)',
|
||||||
background: isDragOver ? 'var(--color-accent-subtle)' : 'transparent',
|
background: isDragOver ? 'var(--color-accent-subtle)' : 'transparent',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
color: isDragOver ? 'var(--color-accent)' : 'var(--color-text-dim)',
|
color: isDragOver ? 'var(--color-accent)' : 'var(--color-text-dim)',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
cursor: assets.length === 0 ? 'pointer' : 'default',
|
||||||
transition: 'all var(--transition-fast)',
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Error message */}
|
{/* Error message */}
|
||||||
@@ -143,20 +161,6 @@ export const AssetsPanel: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Asset grid */}
|
{/* 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
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
|
|||||||
Reference in New Issue
Block a user