From 02295bef0e4ef5f92614847010a1a7e82e1d1ed3 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 2 Apr 2026 19:43:20 +0200
Subject: [PATCH] Add import audio button and display audio assets in App.tsx

---
 src/app/App.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index b50b0c8f..30473d71 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3333,6 +3333,15 @@ export function App({ store, initialStatusMessage }: AppProps) {
               >
                 Import Background Image
               </button>
+              <button
+                className="toolbar__button toolbar__button--accent"
+                type="button"
+                data-testid="import-audio-asset"
+                onClick={handleImportAudioButtonClick}
+                disabled={!projectAssetStorageReady || projectAssetStorage === null}
+              >
+                Import Audio
+              </button>
             </div>
 
             {assetStatusMessage === null ? null : (
@@ -3442,6 +3451,33 @@ export function App({ store, initialStatusMessage }: AppProps) {
                   </div>
                 )}
               </div>
+
+              <div className="outliner-section">
+                <div className="label">Audio Assets</div>
+                {audioAssetList.length === 0 ? (
+                  <div className="outliner-empty">No imported audio assets yet. Import a playable audio file to register the first audio asset.</div>
+                ) : (
+                  <div className="outliner-list">
+                    {audioAssetList.map((asset) => (
+                      <div key={asset.id} className="outliner-item asset-item">
+                        <div className="outliner-item__select">
+                          <span className="outliner-item__title">{asset.sourceName}</span>
+                          <span className="outliner-item__meta">{getProjectAssetKindLabel(asset.kind)}</span>
+                        </div>
+
+                        <div className="asset-item__summary">
+                          {formatByteLength(asset.byteLength)} | {asset.mimeType}
+                        </div>
+                        <div className="asset-item__summary">Storage key: {asset.storageKey}</div>
+                        <div className="asset-item__summary">{formatAudioAssetSummary(asset)}</div>
+                        {asset.metadata.warnings.length === 0 ? null : (
+                          <div className="asset-item__warnings">{asset.metadata.warnings.join(" | ")}</div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
             </div>
           </Panel>