diff --git a/craft/src/panels/left/AssetsPanel.tsx b/craft/src/panels/left/AssetsPanel.tsx
index e77455b..bc63160 100644
--- a/craft/src/panels/left/AssetsPanel.tsx
+++ b/craft/src/panels/left/AssetsPanel.tsx
@@ -107,23 +107,41 @@ export const AssetsPanel: React.FC = () => {
{loading ? 'Uploading...' : 'Upload File'}
- {/* 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. */}
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 && (
+
+ )}
+ {assets.length === 0 ? 'Drag images here or click to upload' : 'Drop files here to upload'}
{/* Error message */}
@@ -143,20 +161,6 @@ export const AssetsPanel: React.FC = () => {
)}
{/* Asset grid */}
- {assets.length === 0 && !loading && (
-
- No assets uploaded yet
-
- )}
-