Import a shared playlist link and build it in Navidrome

Paste a Spotify, Apple Music or Deezer playlist URL; muse resolves it, matches
every track through the same Deezer path a pasted line takes, and writes an
.m3u the library scanner picks up.

Written per import rather than at the end, so the playlist appears in Navidrome
with the first track that lands and grows as the rest arrive -- twenty minutes
of nothing, then everything, is the worse shape. A track rejected in review
drops out on the next rewrite, and one that never resolves is reported instead
of silently vanishing.

Resolve is split from queue on purpose: a shared link is opaque, you cannot
tell twelve tracks from four hundred by looking at it, and four hundred is a
quota decision.

Two of the three sources are scrapes and the code says so plainly. Deezer has a
real API. Spotify and Apple Music have no free way to read a public playlist --
Apple's MusicKit needs a paid developer account -- so those read the public page
and parse the JSON it already embeds for its own player. No key, no OAuth, no
account, and no guarantee: they break whenever either company reshuffles their
frontend. So the resolvers fail loudly and name themselves, because an empty
playlist and a changed page must not produce the same message.

The .m3u uses MUSE_PLAYLIST_PREFIX (/music), not muse's own library path. Both
containers mount the same directory at different points and a playlist written
with muse's view resolves to nothing on Navidrome's side.

Also reorders the hooks in search-bar so the URL-seeding effect is declared
after the state it sets, rather than closing over a binding declared below it.

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

web/app/page.tsx

@@ -14,6 +14,7 @@ import { TrackRow } from "@/components/track-row";
 import { AlbumView } from "@/components/album-view";
 import { ArtistView } from "@/components/artist-view";
 import { BulkImport } from "@/components/bulk-import";
+import { PlaylistImport } from "@/components/playlist-import";
 import { Requests, type JobsSnapshot } from "@/components/requests";
 import { Review } from "@/components/review";
 import { DiscoverPanel } from "@/components/discover";
@@ -203,7 +204,12 @@ function Muse() {
             {nav.tab === "discover" && <DiscoverPanel onArtist={doSearch} />}
             {nav.tab === "jobs" && <Requests snap={snap} refresh={refresh} />}
             {nav.tab === "review" && <Review onDecided={refresh} />}
-            {nav.tab === "bulk" && <BulkImport onQueued={refresh} />}
+            {nav.tab === "bulk" && (
+              <div className="flex flex-col gap-4">
+                <PlaylistImport onQueued={refresh} />
+                <BulkImport onQueued={refresh} />
+              </div>
+            )}
             {nav.tab === "settings" && me && <Settings me={me} refresh={refresh} />}
             {nav.tab === "admin" && isAdmin && <AdminPanel me={me?.user ?? null} />}
           </motion.div>