Update asset display logic in App.tsx

This commit is contained in:
2026-03-31 17:46:31 +02:00
parent 9676abb6a3
commit 5e69653810

View File

@@ -2443,44 +2443,55 @@ export function App({ store, initialStatusMessage }: AppProps) {
<div className="outliner-empty">Project asset storage is unavailable. Imported assets cannot be persisted.</div> <div className="outliner-empty">Project asset storage is unavailable. Imported assets cannot be persisted.</div>
) : null} ) : null}
{modelAssetList.length === 0 ? ( {projectAssetList.length === 0 ? (
<div className="outliner-empty"> <div className="outliner-empty">
No imported model assets yet. Import a GLB or GLTF to register the first project asset. No imported model assets yet. Import a GLB or GLTF to register the first project asset.
</div> </div>
) : ( ) : (
<div className="outliner-list" data-testid="asset-list"> <div className="outliner-list" data-testid="asset-list">
{modelAssetList.map((asset) => ( {projectAssetList.map((asset) => (
<div key={asset.id} className="outliner-item asset-item"> <div key={asset.id} className="outliner-item asset-item">
<div className="outliner-item__select"> <div className="outliner-item__select">
<span className="outliner-item__title">{asset.sourceName}</span> <span className="outliner-item__title">{asset.sourceName}</span>
<span className="outliner-item__meta">Model Asset</span> <span className="outliner-item__meta">{getProjectAssetKindLabel(asset.kind)}</span>
</div> </div>
<div className="asset-item__summary">{formatModelAssetSummary(asset)}</div> <div className="asset-item__summary">
<div className="asset-item__summary">{formatModelBoundingBoxLabel(asset)}</div> {formatByteLength(asset.byteLength)} | {asset.mimeType}
{asset.metadata.materialNames.length === 0 ? null : (
<div className="asset-item__summary">Materials: {asset.metadata.materialNames.join(", ")}</div>
)}
{asset.metadata.textureNames.length === 0 ? null : (
<div className="asset-item__summary">Textures: {asset.metadata.textureNames.join(", ")}</div>
)}
{asset.metadata.animationNames.length === 0 ? null : (
<div className="asset-item__summary">Animations: {asset.metadata.animationNames.join(", ")}</div>
)}
{asset.metadata.warnings.length === 0 ? null : (
<div className="asset-item__warnings">{asset.metadata.warnings.join(" | ")}</div>
)}
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid={`place-model-instance-${asset.id}`}
onClick={() => handlePlaceModelInstance(asset.id)}
>
Place Instance
</button>
</div> </div>
<div className="asset-item__summary">Storage key: {asset.storageKey}</div>
{asset.kind !== "model" ? (
<div className="asset-item__summary">This asset kind is registered for future slices but is not placeable yet.</div>
) : (
<>
<div className="asset-item__summary">{formatModelAssetSummary(asset)}</div>
<div className="asset-item__summary">{formatModelBoundingBoxLabel(asset)}</div>
{asset.metadata.materialNames.length === 0 ? null : (
<div className="asset-item__summary">Materials: {asset.metadata.materialNames.join(", ")}</div>
)}
{asset.metadata.textureNames.length === 0 ? null : (
<div className="asset-item__summary">Textures: {asset.metadata.textureNames.join(", ")}</div>
)}
{asset.metadata.animationNames.length === 0 ? null : (
<div className="asset-item__summary">Animations: {asset.metadata.animationNames.join(", ")}</div>
)}
{asset.metadata.warnings.length === 0 ? null : (
<div className="asset-item__warnings">{asset.metadata.warnings.join(" | ")}</div>
)}
<div className="inline-actions">
<button
className="toolbar__button"
type="button"
data-testid={`place-model-instance-${asset.id}`}
onClick={() => handlePlaceModelInstance(asset.id)}
>
Place Instance
</button>
</div>
</>
)}
</div> </div>
))} ))}
</div> </div>