d0ab1755bb
Users can now paste a list of songs as text to create a playlist without needing any service integration. Supports multiple formats: "Artist - Title", "Title by Artist", "Artist: Title", and numbered lists. Includes a live song count preview in the modal and free tier playlist limit enforcement.
561 lines
25 KiB
TypeScript
561 lines
25 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { ListMusic, Plus, Loader2, Music, ChevronRight, Download, X, Youtube, Link2, ClipboardPaste } from 'lucide-react'
|
|
import { getPlaylists, getSpotifyPlaylists, importSpotifyPlaylist, importYouTubePlaylist, previewLastfm, importLastfm, importPastedSongs, type PlaylistResponse, type SpotifyPlaylistItem, type LastfmPreviewResponse } from '../lib/api'
|
|
|
|
export default function Playlists() {
|
|
const [playlists, setPlaylists] = useState<PlaylistResponse[]>([])
|
|
const [spotifyPlaylists, setSpotifyPlaylists] = useState<SpotifyPlaylistItem[]>([])
|
|
const [showImport, setShowImport] = useState(false)
|
|
const [showYouTubeImport, setShowYouTubeImport] = useState(false)
|
|
const [youtubeUrl, setYoutubeUrl] = useState('')
|
|
const [importingYouTube, setImportingYouTube] = useState(false)
|
|
const [importing, setImporting] = useState<string | null>(null)
|
|
const [loadingSpotify, setLoadingSpotify] = useState(false)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
const [showLastfmImport, setShowLastfmImport] = useState(false)
|
|
const [lastfmUsername, setLastfmUsername] = useState('')
|
|
const [lastfmPeriod, setLastfmPeriod] = useState('overall')
|
|
const [lastfmPreview, setLastfmPreview] = useState<LastfmPreviewResponse | null>(null)
|
|
const [loadingLastfmPreview, setLoadingLastfmPreview] = useState(false)
|
|
const [importingLastfm, setImportingLastfm] = useState(false)
|
|
const [showPasteImport, setShowPasteImport] = useState(false)
|
|
const [pasteName, setPasteName] = useState('')
|
|
const [pasteText, setPasteText] = useState('')
|
|
const [importingPaste, setImportingPaste] = useState(false)
|
|
|
|
useEffect(() => {
|
|
loadPlaylists()
|
|
}, [])
|
|
|
|
const loadPlaylists = async () => {
|
|
try {
|
|
const data = await getPlaylists()
|
|
setPlaylists(data)
|
|
} catch {
|
|
setError('Failed to load playlists')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const openImportModal = async () => {
|
|
setShowImport(true)
|
|
setLoadingSpotify(true)
|
|
try {
|
|
const data = await getSpotifyPlaylists()
|
|
setSpotifyPlaylists(data)
|
|
} catch {
|
|
setError('Failed to load Spotify playlists. Make sure your Spotify account is connected.')
|
|
} finally {
|
|
setLoadingSpotify(false)
|
|
}
|
|
}
|
|
|
|
const handleYouTubeImport = async () => {
|
|
if (!youtubeUrl.trim()) return
|
|
setImportingYouTube(true)
|
|
setError('')
|
|
try {
|
|
const imported = await importYouTubePlaylist(youtubeUrl.trim())
|
|
setPlaylists((prev) => [...prev, imported])
|
|
setYoutubeUrl('')
|
|
setShowYouTubeImport(false)
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.detail || 'Failed to import YouTube Music playlist')
|
|
} finally {
|
|
setImportingYouTube(false)
|
|
}
|
|
}
|
|
|
|
const handleLastfmPreview = async () => {
|
|
if (!lastfmUsername.trim()) return
|
|
setLoadingLastfmPreview(true)
|
|
setError('')
|
|
setLastfmPreview(null)
|
|
try {
|
|
const data = await previewLastfm(lastfmUsername.trim())
|
|
setLastfmPreview(data)
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.detail || 'Last.fm user not found')
|
|
} finally {
|
|
setLoadingLastfmPreview(false)
|
|
}
|
|
}
|
|
|
|
const handleLastfmImport = async () => {
|
|
if (!lastfmUsername.trim()) return
|
|
setImportingLastfm(true)
|
|
setError('')
|
|
try {
|
|
const imported = await importLastfm(lastfmUsername.trim(), lastfmPeriod)
|
|
setPlaylists((prev) => [...prev, imported])
|
|
setLastfmUsername('')
|
|
setLastfmPreview(null)
|
|
setShowLastfmImport(false)
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.detail || 'Failed to import from Last.fm')
|
|
} finally {
|
|
setImportingLastfm(false)
|
|
}
|
|
}
|
|
|
|
const handlePasteImport = async () => {
|
|
if (!pasteName.trim() || !pasteText.trim()) return
|
|
setImportingPaste(true)
|
|
setError('')
|
|
try {
|
|
const imported = await importPastedSongs(pasteName.trim(), pasteText.trim())
|
|
setPlaylists((prev) => [...prev, imported])
|
|
setPasteName('')
|
|
setPasteText('')
|
|
setShowPasteImport(false)
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.detail || 'Failed to import pasted songs')
|
|
} finally {
|
|
setImportingPaste(false)
|
|
}
|
|
}
|
|
|
|
const parsedLineCount = pasteText
|
|
.split('\n')
|
|
.filter((line) => line.trim().length > 0).length
|
|
|
|
const handleImport = async (playlistId: string) => {
|
|
setImporting(playlistId)
|
|
try {
|
|
const imported = await importSpotifyPlaylist(playlistId)
|
|
setPlaylists((prev) => [...prev, imported])
|
|
setSpotifyPlaylists((prev) => prev.filter((p) => p.id !== playlistId))
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.detail || 'Failed to import playlist')
|
|
} finally {
|
|
setImporting(null)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-8 h-8 text-purple animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-charcoal">Playlists</h1>
|
|
<p className="text-charcoal-muted mt-1">Manage your imported playlists</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={openImportModal}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-purple text-white font-medium rounded-xl hover:bg-purple-dark transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Import from Spotify
|
|
</button>
|
|
<button
|
|
onClick={() => setShowYouTubeImport(true)}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Youtube className="w-4 h-4" />
|
|
Import from YouTube Music
|
|
</button>
|
|
<button
|
|
onClick={() => setShowLastfmImport(true)}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Music className="w-4 h-4" />
|
|
Import from Last.fm
|
|
</button>
|
|
<button
|
|
onClick={() => setShowPasteImport(true)}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<ClipboardPaste className="w-4 h-4" />
|
|
Paste Your Songs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Playlist Grid */}
|
|
{playlists.length === 0 ? (
|
|
<div className="bg-white rounded-2xl border border-purple-100 p-12 text-center">
|
|
<div className="w-16 h-16 rounded-2xl bg-purple-50 flex items-center justify-center mx-auto mb-4">
|
|
<ListMusic className="w-8 h-8 text-purple" />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-charcoal mb-2">No playlists yet</h2>
|
|
<p className="text-charcoal-muted mb-6 max-w-md mx-auto">
|
|
Import your playlists from Spotify or YouTube Music to start getting personalized music recommendations
|
|
</p>
|
|
<div className="flex items-center justify-center gap-3">
|
|
<button
|
|
onClick={openImportModal}
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-purple text-white font-medium rounded-xl hover:bg-purple-dark transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
Import from Spotify
|
|
</button>
|
|
<button
|
|
onClick={() => setShowYouTubeImport(true)}
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Youtube className="w-4 h-4" />
|
|
Import from YouTube Music
|
|
</button>
|
|
<button
|
|
onClick={() => setShowLastfmImport(true)}
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<Music className="w-4 h-4" />
|
|
Import from Last.fm
|
|
</button>
|
|
<button
|
|
onClick={() => setShowPasteImport(true)}
|
|
className="inline-flex items-center gap-2 px-6 py-3 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm"
|
|
>
|
|
<ClipboardPaste className="w-4 h-4" />
|
|
Paste Your Songs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{playlists.map((playlist) => (
|
|
<Link
|
|
key={playlist.id}
|
|
to={`/playlists/${playlist.id}`}
|
|
className="bg-white rounded-2xl border border-purple-100 p-5 hover:shadow-md transition-shadow no-underline group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-200 to-purple-400 flex-shrink-0 flex items-center justify-center overflow-hidden">
|
|
{playlist.image_url ? (
|
|
<img
|
|
src={playlist.image_url}
|
|
alt={playlist.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<Music className="w-7 h-7 text-white/80" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-charcoal truncate group-hover:text-purple transition-colors">
|
|
{playlist.name}
|
|
</h3>
|
|
<p className="text-sm text-charcoal-muted mt-0.5">
|
|
{playlist.track_count} tracks
|
|
</p>
|
|
<span className="inline-block mt-2 px-2 py-0.5 bg-purple-50 text-purple text-xs font-medium rounded-full">
|
|
{playlist.source}
|
|
</span>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-charcoal-muted/30 group-hover:text-purple transition-colors flex-shrink-0 mt-1" />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* YouTube Music Import Modal */}
|
|
{showYouTubeImport && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden">
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-purple-100">
|
|
<h2 className="text-lg font-semibold text-charcoal">Import from YouTube Music</h2>
|
|
<button
|
|
onClick={() => setShowYouTubeImport(false)}
|
|
className="p-1.5 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
|
|
>
|
|
<X className="w-5 h-5 text-charcoal-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
<p className="text-sm text-charcoal-muted">
|
|
Paste a public YouTube Music playlist URL to import its tracks.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Link2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-charcoal-muted/50" />
|
|
<input
|
|
type="url"
|
|
value={youtubeUrl}
|
|
onChange={(e) => setYoutubeUrl(e.target.value)}
|
|
placeholder="https://music.youtube.com/playlist?list=..."
|
|
className="w-full pl-10 pr-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleYouTubeImport}
|
|
disabled={importingYouTube || !youtubeUrl.trim()}
|
|
className="w-full py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{importingYouTube ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Importing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="w-4 h-4" />
|
|
Import Playlist
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Last.fm Import Modal */}
|
|
{showLastfmImport && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden">
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-purple-100">
|
|
<h2 className="text-lg font-semibold text-charcoal">Import from Last.fm</h2>
|
|
<button
|
|
onClick={() => { setShowLastfmImport(false); setLastfmPreview(null); setLastfmUsername(''); }}
|
|
className="p-1.5 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
|
|
>
|
|
<X className="w-5 h-5 text-charcoal-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
<p className="text-sm text-charcoal-muted">
|
|
Enter your Last.fm username to import your top tracks. No login required.
|
|
</p>
|
|
<div>
|
|
<label className="block text-sm font-medium text-charcoal mb-1">Username</label>
|
|
<input
|
|
type="text"
|
|
value={lastfmUsername}
|
|
onChange={(e) => { setLastfmUsername(e.target.value); setLastfmPreview(null); }}
|
|
placeholder="your-lastfm-username"
|
|
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-charcoal mb-1">Time Period</label>
|
|
<select
|
|
value={lastfmPeriod}
|
|
onChange={(e) => setLastfmPeriod(e.target.value)}
|
|
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
|
>
|
|
<option value="overall">All Time</option>
|
|
<option value="7day">Last 7 Days</option>
|
|
<option value="1month">Last Month</option>
|
|
<option value="3month">Last 3 Months</option>
|
|
<option value="6month">Last 6 Months</option>
|
|
<option value="12month">Last Year</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleLastfmPreview}
|
|
disabled={loadingLastfmPreview || !lastfmUsername.trim()}
|
|
className="flex-1 py-3 bg-charcoal/10 text-charcoal font-medium rounded-xl hover:bg-charcoal/20 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{loadingLastfmPreview ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Checking...
|
|
</>
|
|
) : (
|
|
'Preview'
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={handleLastfmImport}
|
|
disabled={importingLastfm || !lastfmUsername.trim()}
|
|
className="flex-1 py-3 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{importingLastfm ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Importing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="w-4 h-4" />
|
|
Import
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{lastfmPreview && (
|
|
<div className="bg-cream/50 rounded-xl p-4 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-charcoal">{lastfmPreview.display_name}</span>
|
|
<span className="text-xs text-charcoal-muted">{lastfmPreview.track_count} top tracks</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{lastfmPreview.sample_tracks.map((t, i) => (
|
|
<div key={i} className="flex items-center gap-3 text-sm">
|
|
<span className="text-charcoal-muted w-5 text-right">{i + 1}.</span>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-charcoal font-medium truncate block">{t.title}</span>
|
|
<span className="text-charcoal-muted text-xs">{t.artist} · {t.playcount} plays</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Paste Songs Import Modal */}
|
|
{showPasteImport && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden">
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-purple-100">
|
|
<h2 className="text-lg font-semibold text-charcoal">Paste Your Songs</h2>
|
|
<button
|
|
onClick={() => setShowPasteImport(false)}
|
|
className="p-1.5 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
|
|
>
|
|
<X className="w-5 h-5 text-charcoal-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-charcoal mb-1.5">Playlist name</label>
|
|
<input
|
|
type="text"
|
|
value={pasteName}
|
|
onChange={(e) => setPasteName(e.target.value)}
|
|
placeholder="My favorite songs"
|
|
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<label className="block text-sm font-medium text-charcoal">Songs</label>
|
|
{parsedLineCount > 0 && (
|
|
<span className="text-xs text-purple font-medium">
|
|
{parsedLineCount} {parsedLineCount === 1 ? 'song' : 'songs'} detected
|
|
</span>
|
|
)}
|
|
</div>
|
|
<textarea
|
|
value={pasteText}
|
|
onChange={(e) => setPasteText(e.target.value)}
|
|
placeholder={`Paste your songs, one per line:\n\nRadiohead - Everything In Its Right Place\nTame Impala - Let It Happen\nBeach House - Space Song\nLevitation by Beach House\nPink Floyd: Comfortably Numb`}
|
|
rows={8}
|
|
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm resize-none font-mono"
|
|
/>
|
|
<p className="text-xs text-charcoal-muted mt-1.5">
|
|
Supports formats: Artist - Title, Title by Artist, Artist: Title
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handlePasteImport}
|
|
disabled={importingPaste || !pasteName.trim() || !pasteText.trim()}
|
|
className="w-full py-3 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{importingPaste ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Importing...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="w-4 h-4" />
|
|
Import {parsedLineCount > 0 ? `${parsedLineCount} Songs` : 'Songs'}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Import Modal */}
|
|
{showImport && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden">
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-purple-100">
|
|
<h2 className="text-lg font-semibold text-charcoal">Import from Spotify</h2>
|
|
<button
|
|
onClick={() => setShowImport(false)}
|
|
className="p-1.5 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
|
|
>
|
|
<X className="w-5 h-5 text-charcoal-muted" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="overflow-y-auto max-h-[60vh] p-4">
|
|
{loadingSpotify ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-6 h-6 text-purple animate-spin" />
|
|
</div>
|
|
) : spotifyPlaylists.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<p className="text-charcoal-muted">No playlists found on Spotify</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{spotifyPlaylists.map((sp) => (
|
|
<div
|
|
key={sp.id}
|
|
className="flex items-center gap-3 p-3 rounded-xl hover:bg-purple-50 transition-colors"
|
|
>
|
|
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-200 to-purple-400 flex-shrink-0 flex items-center justify-center overflow-hidden">
|
|
{sp.image_url ? (
|
|
<img
|
|
src={sp.image_url}
|
|
alt={sp.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<Music className="w-5 h-5 text-white/80" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-charcoal text-sm truncate">{sp.name}</p>
|
|
<p className="text-xs text-charcoal-muted">
|
|
{sp.track_count} tracks · {sp.owner}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => handleImport(sp.id)}
|
|
disabled={importing === sp.id}
|
|
className="px-4 py-2 bg-purple text-white text-xs font-medium rounded-lg hover:bg-purple-dark transition-colors cursor-pointer border-none disabled:opacity-50 flex items-center gap-1.5"
|
|
>
|
|
{importing === sp.id ? (
|
|
<Loader2 className="w-3 h-3 animate-spin" />
|
|
) : (
|
|
<Download className="w-3 h-3" />
|
|
)}
|
|
Import
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|