feat: SoundCloud downloader + rename page to Song Importer

- New src/soundcloud.js: resolves SoundCloud URLs via yt-dlp --dump-single-json,
  renders track/playlist preview with per-track download buttons
- Backend POST /api/soundcloud/resolve: extracts metadata (title, artist, genre,
  artwork, duration) directly from SoundCloud — no iTunes lookup needed
- ytdlp.js: sourceUrl param — if set, downloads directly from URL instead of
  ytsearch cascade (used for SoundCloud tracks)
- Spotify importer page renamed to Song Importer, now contains both
  Spotify and SoundCloud sections in one view

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -84,7 +84,7 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/></svg>Zufällig
           </div>
           <div class="nav-item" onclick="navigate('spotify-importer')" data-page="spotify-importer">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>Spotify Importer
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>Song Importer
           </div>
         </div>
         <div class="nav-section" id="nav-abs-section" style="display:none">
@@ -378,26 +378,27 @@
       <!-- SPOTIFY IMPORTER -->
       <div class="page" id="page-spotify-importer">
         <div class="page-header">
-          <div class="page-title">Spotify <em>Importer</em></div>
-          <span style="background:rgba(29,185,84,.15);color:#1DB954;border:1px solid rgba(29,185,84,.3);font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;flex-shrink:0">Spotify</span>
+          <div class="page-title">Song <em>Importer</em></div>
         </div>
-        <div class="search-wrap" style="padding:0 0 20px">
+
+        <!-- SPOTIFY SECTION -->
+        <div class="importer-section-label" style="color:#1DB954">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="#1DB954"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1" stroke="#000" stroke-width="2" fill="none"/></svg>
+          Spotify
+        </div>
+        <div class="search-wrap" style="padding:0 0 12px">
           <div style="display:flex;gap:8px">
             <div class="search-box" style="background:var(--surface);border-color:var(--border2);flex:1">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>
-              <input id="spotify-link-input" type="url" placeholder="Spotify Link einfügen (Track, Album oder Playlist)…" style="font-size:15px" oninput="clearSpotifyPreview()">
+              <input id="spotify-link-input" type="url" placeholder="Spotify Link (Track, Album oder Playlist)…" style="font-size:14px" oninput="clearSpotifyPreview()">
             </div>
-            <button class="btn-outline" style="padding:0 20px;font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;border-color:transparent" onclick="resolveSpotifyLink()">Importieren</button>
+            <button class="btn-outline" style="padding:0 16px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;background:#1DB954;color:#000;border-color:transparent" onclick="resolveSpotifyLink()">Importieren</button>
           </div>
         </div>
-        <div id="spotify-importer-hint" style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;font-size:13px;color:var(--text2);line-height:1.8">
-          <div style="font-weight:700;color:var(--text);margin-bottom:8px">So funktioniert's</div>
-          <div>1. Spotify Link für Track, Album oder Playlist einfügen</div>
-          <div>2. Metadaten werden direkt von Spotify geladen</div>
-          <div>3. Songs via yt-dlp herunterladen → direkt in Navidrome Library</div>
-          <div style="margin-top:10px;color:var(--text3);font-size:12px">Kein Spotify-Account erforderlich — funktioniert direkt über das Backend.</div>
+        <div id="spotify-importer-hint" style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;font-size:12px;color:var(--text2);line-height:1.8;margin-bottom:4px">
+          Track, Album oder Playlist-Link einfügen — Metadaten werden direkt von Spotify geladen und Songs via yt-dlp in die Library heruntergeladen.
         </div>
-        <div id="spotify-preview" style="display:none;margin-top:20px">
+        <div id="spotify-preview" style="display:none;margin-bottom:8px">
           <div id="spotify-preview-inner"></div>
           <div id="spotify-enrich-status" style="display:none"></div>
           <div id="spotify-tracks-section" style="display:none">
@@ -407,6 +408,33 @@
             <div id="spotify-tracks-list" class="song-list"></div>
           </div>
         </div>
+
+        <!-- SOUNDCLOUD SECTION -->
+        <div class="importer-section-label" style="color:#ff5500;margin-top:20px">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ff5500" stroke-width="2"><path d="M2 16.5c0 1.1.9 2 2 2h14c2.2 0 4-1.8 4-4s-1.8-4-4-4c-.3 0-.6 0-.9.1C16.8 8.4 14.6 7 12 7c-3.3 0-6 2.7-6 6H4c-1.1 0-2 .9-2 1.5z"/></svg>
+          SoundCloud
+        </div>
+        <div class="search-wrap" style="padding:0 0 12px">
+          <div style="display:flex;gap:8px">
+            <div class="search-box" style="background:var(--surface);border-color:var(--border2);flex:1">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 16.5c0 1.1.9 2 2 2h14c2.2 0 4-1.8 4-4s-1.8-4-4-4c-.3 0-.6 0-.9.1C16.8 8.4 14.6 7 12 7c-3.3 0-6 2.7-6 6H4c-1.1 0-2 .9-2 1.5z"/></svg>
+              <input id="sc-link-input" type="url" placeholder="SoundCloud Link (Track oder Playlist)…" style="font-size:14px" oninput="clearSoundCloudPreview()">
+            </div>
+            <button class="btn-outline" style="padding:0 16px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;background:#ff5500;color:#fff;border-color:transparent" onclick="resolveSoundCloudLink()">Importieren</button>
+          </div>
+        </div>
+        <div id="sc-importer-hint" style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;font-size:12px;color:var(--text2);line-height:1.8;margin-bottom:4px">
+          Track oder Playlist-Link einfügen — Metadaten (Titel, Artist, Genre, Artwork) werden direkt von SoundCloud geladen und der Audio-Stream heruntergeladen.
+        </div>
+        <div id="sc-preview" style="display:none;margin-bottom:8px">
+          <div id="sc-preview-inner"></div>
+          <div id="sc-tracks-section" style="display:none">
+            <div class="section-header" style="margin-top:8px">
+              <span class="section-title" id="sc-tracks-title">Tracks</span>
+            </div>
+            <div id="sc-tracks-list" class="song-list"></div>
+          </div>
+        </div>
       </div>
 
     </main>