feat(web): merge Song Importer into Global Suche (one unified field)

The importer no longer has its own sidebar/bottom-nav entry. The Global
Suche field now handles both jobs: plain text runs the Deezer search;
a pasted Spotify/SoundCloud/YouTube link switches into importer mode
(badge + "Importieren" button + preview), matching the Android app and
tidying the left nav.

- New onGlobalInput/tryImporterResolve; importer DOM moved into
  page-discover; old page-spotify-importer removed; routing cleaned up.
- Existing resolvers unchanged (still read the mirrored importer-link-input).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -85,9 +85,6 @@
           <div class="nav-item" onclick="navigate('random')" data-page="random">
             <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"><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">
           <div class="nav-section-title">Hörbücher</div>
@@ -329,20 +326,76 @@
         <div id="search-results"></div>
       </div>
 
-      <!-- DISCOVER (Global) -->
+      <!-- DISCOVER (Global) — Deezer search + link importer unified in ONE field -->
       <div class="page" id="page-discover">
         <div class="page-header">
           <div class="page-title"><span class="blue">Global</span> Suche</div>
           <span class="badge badge-deezer" style="font-size:11px;padding:4px 10px">Deezer</span>
         </div>
-        <div class="search-wrap" style="padding:0 0 20px">
+        <div class="search-wrap" style="padding:0 0 12px">
-          <div class="search-box" style="background:var(--surface);border-color:var(--border2)">
+          <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="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-            <input id="global-search-input" type="text" placeholder="Künstler, Titel, Album suchen…" oninput="onGlobalSearch(this.value)" style="font-size:15px">
+              <div id="importer-badge" style="display:none;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--surface2);color:var(--text3);white-space:nowrap;flex-shrink:0">URL</div>
+              <input id="global-search-input" type="text" placeholder="Künstler, Titel, Album — oder Link zum Importieren einfügen…" oninput="onGlobalInput(this.value)" onkeydown="if(event.key==='Enter'){event.preventDefault();tryImporterResolve()}" style="font-size:15px">
+            </div>
+            <button id="importer-btn" class="btn-outline" style="display:none;padding:0 16px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0" onclick="resolveImporterLink()">Importieren</button>
           </div>
         </div>
+
+        <!-- Link importer — auto-detects Spotify / SoundCloud / YouTube; shown only when a link is in the field -->
+        <div id="importer-area" style="display:none">
+          <div id="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:8px">
+            <div style="display:flex;gap:16px;flex-wrap:wrap">
+              <div style="display:flex;align-items:center;gap:6px"><span style="color:#1DB954;font-weight:700">Spotify</span> — Track, Album oder Playlist</div>
+              <div style="display:flex;align-items:center;gap:6px"><span style="color:#ff5500;font-weight:700">SoundCloud</span> — Track oder Playlist</div>
+              <div style="display:flex;align-items:center;gap:6px"><span style="color:#FF0000;font-weight:700">YouTube</span> — Video oder Playlist</div>
+            </div>
+            <div style="margin-top:6px;color:var(--text3);font-size:11px">Link einfügen → Metadaten werden geladen → via yt-dlp in die Navidrome Library herunterladen.</div>
+          </div>
+
+          <!-- hidden inputs kept for compat with spotify.js / soundcloud.js resolvers -->
+          <input id="importer-link-input" type="hidden">
+          <input id="spotify-link-input" type="hidden">
+          <input id="sc-link-input" type="hidden">
+
+          <!-- SPOTIFY RESULTS -->
+          <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">
+              <div class="section-header" style="margin-top:8px">
+                <span class="section-title" id="spotify-tracks-title">Tracks</span>
+              </div>
+              <div id="spotify-tracks-list" class="song-list"></div>
+            </div>
+          </div>
+
+          <!-- SOUNDCLOUD RESULTS -->
+          <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>
+
+          <!-- YOUTUBE RESULTS -->
+          <div id="yt-preview" style="display:none;margin-bottom:8px">
+            <div id="yt-preview-inner"></div>
+            <div id="yt-tracks-section" style="display:none">
+              <div class="section-header" style="margin-top:8px">
+                <span class="section-title" id="yt-tracks-title">Tracks</span>
+              </div>
+              <div id="yt-tracks-list" class="song-list"></div>
+            </div>
+          </div>
+        </div>
+
         <div id="global-search-results">
-          <div class="empty-state"><div class="icon">🔍</div><p>Gib einen Suchbegriff ein um loszulegen</p></div>
+          <div class="empty-state"><div class="icon">🔍</div><p>Gib einen Suchbegriff ein — oder füge einen Spotify-/SoundCloud-/YouTube-Link ein zum Importieren</p></div>
         </div>
       </div>
 
@@ -390,69 +443,6 @@
         <div id="abs-book-detail-content"></div>
       </div>
 
-      <!-- SPOTIFY IMPORTER -->
-      <div class="page" id="page-spotify-importer">
-        <div class="page-header">
-          <div class="page-title">Song <em>Importer</em></div>
-        </div>
-
-        <!-- UNIFIED INPUT — auto-detects Spotify vs SoundCloud -->
-        <div class="search-wrap" style="padding:0 0 8px">
-          <div style="display:flex;gap:8px">
-            <div class="search-box" style="background:var(--surface);border-color:var(--border2);flex:1">
-              <div id="importer-badge" style="font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--surface2);color:var(--text3);white-space:nowrap;flex-shrink:0">URL</div>
-              <input id="importer-link-input" type="url" placeholder="Spotify, SoundCloud oder YouTube Link einfügen…" style="font-size:14px" oninput="onImporterInput(this.value)" onkeydown="if(event.key==='Enter'){event.preventDefault();resolveImporterLink()}">
-            </div>
-            <button id="importer-btn" class="btn-outline" style="padding:0 16px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0" onclick="resolveImporterLink()">Importieren</button>
-          </div>
-        </div>
-        <div id="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">
-          <div style="display:flex;gap:16px;flex-wrap:wrap">
-            <div style="display:flex;align-items:center;gap:6px"><span style="color:#1DB954;font-weight:700">Spotify</span> — Track, Album oder Playlist</div>
-            <div style="display:flex;align-items:center;gap:6px"><span style="color:#ff5500;font-weight:700">SoundCloud</span> — Track oder Playlist</div>
-            <div style="display:flex;align-items:center;gap:6px"><span style="color:#FF0000;font-weight:700">YouTube</span> — Video oder Playlist</div>
-          </div>
-          <div style="margin-top:6px;color:var(--text3);font-size:11px">Link einfügen → Metadaten werden geladen → via yt-dlp in die Navidrome Library herunterladen.</div>
-        </div>
-
-        <!-- hidden inputs kept for compat with spotify.js / soundcloud.js -->
-        <input id="spotify-link-input" type="hidden">
-        <input id="sc-link-input" type="hidden">
-
-        <!-- SPOTIFY RESULTS -->
-        <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">
-            <div class="section-header" style="margin-top:8px">
-              <span class="section-title" id="spotify-tracks-title">Tracks</span>
-            </div>
-            <div id="spotify-tracks-list" class="song-list"></div>
-          </div>
-        </div>
-
-        <!-- SOUNDCLOUD RESULTS -->
-        <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>
-
-        <!-- YOUTUBE RESULTS -->
-        <div id="yt-preview" style="display:none;margin-bottom:8px">
-          <div id="yt-preview-inner"></div>
-          <div id="yt-tracks-section" style="display:none">
-            <div class="section-header" style="margin-top:8px">
-              <span class="section-title" id="yt-tracks-title">Tracks</span>
-            </div>
-            <div id="yt-tracks-list" class="song-list"></div>
-          </div>
-        </div>
-      </div>
 
     </main>
   </div>
@@ -1192,10 +1182,6 @@
         <svg width="22" height="22" 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
       </button>
-      <button class="bnav-item" onclick="navigate('spotify-importer')" data-page="spotify-importer">
-        <svg width="22" height="22" 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>
-        Importer
-      </button>
     </div>
   </div>
 </nav>

src/main.js

@@ -24,7 +24,7 @@ import {
   plReorderEnter, plReorderSave, plReorderCancel, toggleAllGenres,
 } from './views/views.js';
 import { loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll,
-         onImporterInput, resolveImporterLink } from './views/spotify.js';
+         onImporterInput, resolveImporterLink, onGlobalInput, tryImporterResolve } from './views/spotify.js';
 import { resolveYouTubeLink, executeYouTubeDownload } from './views/youtube.js';
 import { loadSoundCloudImporter, resolveSoundCloudLink, clearSoundCloudPreview, scDlAll, scDlSingle, scDlTrack } from './views/soundcloud.js';
 import {
@@ -343,7 +343,7 @@ Object.assign(window, {
   loadAlbums, loadStarred, loadRandom, filterStarred, filterPlaylist,
   plReorderEnter, plReorderSave, plReorderCancel, toggleAllGenres,
   loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll,
-  onImporterInput, resolveImporterLink,
+  onImporterInput, resolveImporterLink, onGlobalInput, tryImporterResolve,
   loadSoundCloudImporter, resolveSoundCloudLink, clearSoundCloudPreview, scDlAll, scDlSingle, scDlTrack,
   executeSpotifyDownload, resolveYouTubeLink, executeYouTubeDownload,
   openPlModal, closePlModal, addSongsToPlaylist, createAndAddPlaylist, createPlaylistPrompt,

src/views/navigation.js

@@ -62,12 +62,12 @@ export function navigate(page, data=null) {
   closeHeaderSearch();
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
   document.querySelectorAll('.nav-item,.bnav-item').forEach(n => n.classList.remove('active','active-blue'));
-  const cls = ['discover','new-releases','recommendations','spotify-importer'].includes(page) ? 'active-blue' : 'active';
+  const cls = ['discover','new-releases','recommendations'].includes(page) ? 'active-blue' : 'active';
   document.querySelectorAll(`[data-page="${page}"]`).forEach(el => el.classList.add(cls));
   const pageEl = document.getElementById(`page-${page}`);
   if(pageEl) { pageEl.classList.add('active'); document.getElementById('main-content').scrollTop = 0; }
   closeSidebar();
-  if(['discover','new-releases','recommendations','random','spotify-importer'].includes(page)) switchNavMode('discover');
+  if(['discover','new-releases','recommendations','random'].includes(page)) switchNavMode('discover');
   else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library');
 
   if(page==='home')    loadHomeData(!S._navJumping); // explicit Home click refreshes; back/forward keeps state
@@ -85,7 +85,6 @@ export function navigate(page, data=null) {
   if(page==='playlists')     loadPlaylists();
   if(page==='playlist-detail' && data) loadPlaylistDetail(data);
   if(page==='recommendations')  loadRecommendations();
-  if(page==='spotify-importer') { loadSpotifyImporter(); loadSoundCloudImporter(); }
   if(page==='audiobooks') {
     import('./abs.js').then(m => {
       if (S.abs.currentLibraryId) m.loadAbsBooks(S.abs.currentLibraryId);

src/views/spotify.js

@@ -47,6 +47,50 @@ export function onImporterInput(val) {
   }
 }
 
+// ─── UNIFIED GLOBAL-SUCHE FIELD ───
+// One field on the Global-Suche page handles both jobs: a pasted Spotify/SoundCloud/YouTube link
+// switches into the importer flow; any other text runs the Deezer library search. This replaces the
+// separate "Song Importer" sidebar entry (the importer now lives inside Global Suche).
+const _IMPORT_LINK_RE = /^https?:\/\//i;
+const _IMPORT_HOST_RE = /(?:spotify\.com|soundcloud\.com|youtube\.com|youtu\.be)/i;
+function _isImportLink(v) { return _IMPORT_LINK_RE.test(v) || _IMPORT_HOST_RE.test(v); }
+
+export function onGlobalInput(val) {
+  const v = (val || '').trim();
+  const area    = document.getElementById('importer-area');
+  const results  = document.getElementById('global-search-results');
+  const badge   = document.getElementById('importer-badge');
+  const btn     = document.getElementById('importer-btn');
+  if (_isImportLink(v)) {
+    // Link → importer mode
+    if (results) results.style.display = 'none';
+    if (area)    area.style.display    = '';
+    if (badge)   badge.style.display   = '';
+    if (btn)     btn.style.display     = '';
+    const hidden = document.getElementById('importer-link-input');
+    if (hidden) hidden.value = v;            // mirror so resolveImporterLink() reads it
+    onImporterInput(v);                      // badge styling + clear stale previews
+    const hint = document.getElementById('importer-hint');
+    if (hint) hint.style.display = '';       // keep the platform hint as a header until a preview loads
+  } else {
+    // Text → Deezer search
+    if (area)  area.style.display  = 'none';
+    if (badge) badge.style.display = 'none';
+    if (btn)   btn.style.display   = 'none';
+    if (results) results.style.display = '';
+    window.onGlobalSearch(v);
+  }
+}
+
+// Enter in the unified field: resolve the link if it is one (search is already live via oninput).
+export function tryImporterResolve() {
+  const v = (document.getElementById('global-search-input')?.value || '').trim();
+  if (!_isImportLink(v)) return;
+  const hidden = document.getElementById('importer-link-input');
+  if (hidden) hidden.value = v;
+  resolveImporterLink();
+}
+
 export async function resolveImporterLink() {
   const url = document.getElementById('importer-link-input')?.value.trim();
   if (!url) return;