diff --git a/services/web-ui/public/editor.html b/services/web-ui/public/editor.html index bccd830..3ee3111 100644 --- a/services/web-ui/public/editor.html +++ b/services/web-ui/public/editor.html @@ -183,6 +183,30 @@ } .media-asset-item.active .media-asset-meta { color: var(--accent); opacity: 0.7; } + /* ── Thumbnail wrapper in media panel ──────────────────────── */ + .media-thumb-wrap { + width: 48px; + height: 30px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-surface); + border-radius: 2px; + overflow: hidden; + } + .media-thumb { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + .media-thumb-icon { + display: none; + color: var(--text-tertiary); + margin-top: 0; + } + /* ── Timeline panel ────────────────────────────────────────── */ .timeline-panel { grid-area: timeline-panel; @@ -394,6 +418,14 @@ Tokens + + + Containers + + + + Cluster + @@ -738,7 +772,7 @@ function renderMediaList() { if (assets.length === 0) { list.innerHTML = '
' + - (query ? 'No clips match "' + esc(query) + '"' : 'No assets in this bin.') + '
'; + (query ? 'No clips match “' + esc(query) + '”' : 'No assets in this bin.') + ''; return; } @@ -754,11 +788,17 @@ function renderMediaList() { ].filter(Boolean); const metaStr = metaParts.join(' · '); + // Thumbnail wrapper: img with SVG fallback for assets without a thumbnail yet el.innerHTML = - '' + - '' + - '' + - '' + + '
' + + '' + + '' + + '' + + '' + + '' + + '
' + '
' + '' + esc(asset.display_name || asset.filename) +