feat: Add keyboard shortcuts and queue management features
- Implement global keyboard shortcuts for playback controls, volume adjustments, and navigation. - Introduce drag-and-drop functionality for queue reordering with visual feedback. - Add context menus for tracks, albums, and artists with quick action options. - Develop Spotlight Search feature with Last.fm integration for enhanced music discovery. - Create GlobalSearchProvider for managing search state and keyboard shortcuts. - Ensure accessibility and keyboard navigation support across all new features.
This commit is contained in:
GitHub
653
app/components/SpotlightSearch.tsx
Normal file
653
app/components/SpotlightSearch.tsx
Normal file
@@ -0,0 +1,653 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Search,
|
||||
X,
|
||||
Music,
|
||||
Disc,
|
||||
User,
|
||||
Clock,
|
||||
Heart,
|
||||
Play,
|
||||
Plus,
|
||||
ExternalLink,
|
||||
Info,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Calendar,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useNavidrome } from '@/app/components/NavidromeContext';
|
||||
import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
|
||||
import { lastFmAPI } from '@/lib/lastfm-api';
|
||||
import { Song, Album, Artist, getNavidromeAPI } from '@/lib/navidrome';
|
||||
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
|
||||
import Image from 'next/image';
|
||||
|
||||
interface SpotlightSearchProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface LastFmTrackInfo {
|
||||
name: string;
|
||||
artist: {
|
||||
name: string;
|
||||
url: string;
|
||||
};
|
||||
album?: {
|
||||
title: string;
|
||||
image?: string;
|
||||
};
|
||||
wiki?: {
|
||||
summary: string;
|
||||
content: string;
|
||||
};
|
||||
duration?: string;
|
||||
playcount?: string;
|
||||
listeners?: string;
|
||||
tags?: Array<{
|
||||
name: string;
|
||||
url: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface LastFmTag {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface LastFmArtist {
|
||||
name: string;
|
||||
url: string;
|
||||
image?: Array<{ '#text': string; size: string }>;
|
||||
}
|
||||
|
||||
interface LastFmBio {
|
||||
summary: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface LastFmStats {
|
||||
listeners: string;
|
||||
playcount: string;
|
||||
}
|
||||
|
||||
interface LastFmArtistInfo {
|
||||
name: string;
|
||||
bio?: LastFmBio;
|
||||
stats?: LastFmStats;
|
||||
tags?: {
|
||||
tag: LastFmTag[];
|
||||
};
|
||||
similar?: {
|
||||
artist: LastFmArtist[];
|
||||
};
|
||||
image?: Array<{ '#text': string; size: string }>;
|
||||
}
|
||||
|
||||
interface SearchResult {
|
||||
type: 'track' | 'album' | 'artist';
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
image?: string;
|
||||
data: Song | Album | Artist;
|
||||
lastFmData?: LastFmArtistInfo;
|
||||
}
|
||||
|
||||
export function SpotlightSearch({ isOpen, onClose }: SpotlightSearchProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [results, setResults] = useState<SearchResult[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
const [selectedResult, setSelectedResult] = useState<SearchResult | null>(null);
|
||||
const [lastFmDetails, setLastFmDetails] = useState<LastFmArtistInfo | null>(null);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const resultsRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const api = getNavidromeAPI();
|
||||
|
||||
const { search2 } = useNavidrome();
|
||||
const { playTrack, addToQueue, insertAtBeginningOfQueue } = useAudioPlayer();
|
||||
|
||||
// Convert Song to Track with proper URL generation
|
||||
const songToTrack = useCallback((song: Song) => {
|
||||
if (!api) {
|
||||
throw new Error('Navidrome API not configured');
|
||||
}
|
||||
|
||||
return {
|
||||
id: song.id,
|
||||
name: song.title,
|
||||
url: api.getStreamUrl(song.id),
|
||||
artist: song.artist,
|
||||
album: song.album,
|
||||
duration: song.duration,
|
||||
coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
|
||||
albumId: song.albumId,
|
||||
artistId: song.artistId,
|
||||
starred: !!song.starred,
|
||||
replayGain: song.replayGain || 0
|
||||
};
|
||||
}, [api]);
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (isOpen && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Close on escape
|
||||
useKeyboardShortcuts({
|
||||
disabled: !isOpen
|
||||
});
|
||||
|
||||
// Handle keyboard navigation
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => Math.min(prev + 1, results.length - 1));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => Math.max(prev - 1, 0));
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (results[selectedIndex]) {
|
||||
handleResultSelect(results[selectedIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
if (showDetails) {
|
||||
setShowDetails(false);
|
||||
setSelectedResult(null);
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
break;
|
||||
case 'Tab':
|
||||
e.preventDefault();
|
||||
if (results[selectedIndex]) {
|
||||
handleShowDetails(results[selectedIndex]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, results, selectedIndex, showDetails, onClose]);
|
||||
|
||||
// Search function with debouncing
|
||||
const performSearch = useCallback(async (searchQuery: string) => {
|
||||
if (!searchQuery.trim()) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const searchResults = await search2(searchQuery);
|
||||
const formattedResults: SearchResult[] = [];
|
||||
|
||||
// Add tracks
|
||||
searchResults.songs?.forEach(song => {
|
||||
formattedResults.push({
|
||||
type: 'track',
|
||||
id: song.id,
|
||||
title: song.title,
|
||||
subtitle: `${song.artist} • ${song.album}`,
|
||||
image: song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 256) : undefined,
|
||||
data: song
|
||||
});
|
||||
});
|
||||
|
||||
// Add albums
|
||||
searchResults.albums?.forEach(album => {
|
||||
formattedResults.push({
|
||||
type: 'album',
|
||||
id: album.id,
|
||||
title: album.name,
|
||||
subtitle: `${album.artist} • ${album.songCount} tracks`,
|
||||
image: album.coverArt && api ? api.getCoverArtUrl(album.coverArt, 256) : undefined,
|
||||
data: album
|
||||
});
|
||||
});
|
||||
|
||||
// Add artists
|
||||
searchResults.artists?.forEach(artist => {
|
||||
formattedResults.push({
|
||||
type: 'artist',
|
||||
id: artist.id,
|
||||
title: artist.name,
|
||||
subtitle: `${artist.albumCount} albums`,
|
||||
image: artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 256) : undefined,
|
||||
data: artist
|
||||
});
|
||||
});
|
||||
|
||||
setResults(formattedResults);
|
||||
setSelectedIndex(0);
|
||||
} catch (error) {
|
||||
console.error('Search failed:', error);
|
||||
setResults([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [search2]);
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
performSearch(query);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [query, performSearch]);
|
||||
|
||||
const handleResultSelect = (result: SearchResult) => {
|
||||
switch (result.type) {
|
||||
case 'track':
|
||||
const songData = result.data as Song;
|
||||
const track = songToTrack(songData);
|
||||
playTrack(track, true);
|
||||
onClose();
|
||||
break;
|
||||
case 'album':
|
||||
router.push(`/album/${result.id}`);
|
||||
onClose();
|
||||
break;
|
||||
case 'artist':
|
||||
router.push(`/artist/${result.id}`);
|
||||
onClose();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowDetails = async (result: SearchResult) => {
|
||||
setSelectedResult(result);
|
||||
setShowDetails(true);
|
||||
setLastFmDetails(null);
|
||||
|
||||
// Fetch Last.fm data
|
||||
try {
|
||||
let lastFmData = null;
|
||||
|
||||
if (result.type === 'artist') {
|
||||
const artistData = result.data as Artist;
|
||||
lastFmData = await lastFmAPI.getArtistInfo(artistData.name);
|
||||
} else if (result.type === 'album') {
|
||||
// For albums, get artist info as Last.fm album info is limited
|
||||
const albumData = result.data as Album;
|
||||
lastFmData = await lastFmAPI.getArtistInfo(albumData.artist);
|
||||
} else if (result.type === 'track') {
|
||||
// For tracks, get artist info
|
||||
const songData = result.data as Song;
|
||||
lastFmData = await lastFmAPI.getArtistInfo(songData.artist);
|
||||
}
|
||||
|
||||
setLastFmDetails(lastFmData);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch Last.fm data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlayNext = (result: SearchResult) => {
|
||||
if (result.type === 'track') {
|
||||
const songData = result.data as Song;
|
||||
const track = songToTrack(songData);
|
||||
insertAtBeginningOfQueue(track);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddToQueue = (result: SearchResult) => {
|
||||
if (result.type === 'track') {
|
||||
const songData = result.data as Song;
|
||||
const track = songToTrack(songData);
|
||||
addToQueue(track);
|
||||
}
|
||||
};
|
||||
|
||||
const getResultIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'track': return <Music className="w-4 h-4" />;
|
||||
case 'album': return <Disc className="w-4 h-4" />;
|
||||
case 'artist': return <User className="w-4 h-4" />;
|
||||
default: return <Search className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-start justify-center pt-[10vh] px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
transition={{ type: "spring", duration: 0.4 }}
|
||||
className="w-full max-w-2xl bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Search Input */}
|
||||
<div className="flex items-center px-4 py-3 border-b border-border">
|
||||
<Search className="w-5 h-5 text-muted-foreground mr-3" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search tracks, albums, artists..."
|
||||
className="border-0 focus-visible:ring-0 text-lg bg-transparent"
|
||||
/>
|
||||
{query && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setQuery('')}
|
||||
className="p-1 h-auto"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-h-96 overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
||||
<span className="ml-2 text-muted-foreground">Searching...</span>
|
||||
</div>
|
||||
) : results.length > 0 ? (
|
||||
<ScrollArea className="max-h-96" ref={resultsRef}>
|
||||
<div className="py-2">
|
||||
{results.map((result, index) => (
|
||||
<div
|
||||
key={`${result.type}-${result.id}`}
|
||||
className={`flex items-center px-4 py-3 cursor-pointer transition-colors ${
|
||||
index === selectedIndex ? 'bg-accent' : 'hover:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => handleResultSelect(result)}
|
||||
onMouseEnter={() => setSelectedIndex(index)}
|
||||
>
|
||||
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
||||
{result.image ? (
|
||||
<Image
|
||||
src={result.image}
|
||||
alt={result.title}
|
||||
width={40}
|
||||
height={40}
|
||||
className="w-10 h-10 rounded object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
|
||||
{getResultIcon(result.type)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">{result.title}</div>
|
||||
<div className="text-sm text-muted-foreground truncate">
|
||||
{result.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{result.type}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex items-center space-x-1 ml-3">
|
||||
{result.type === 'track' && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePlayNext(result);
|
||||
}}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Play Next"
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleAddToQueue(result);
|
||||
}}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Add to Queue"
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleShowDetails(result);
|
||||
}}
|
||||
className="h-8 w-8 p-0"
|
||||
title="Show Details (Tab)"
|
||||
>
|
||||
<Info className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
) : query.trim() ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||||
<Search className="w-8 h-8 mb-2" />
|
||||
<p>No results found for “{query}”</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||||
<Music className="w-8 h-8 mb-2" />
|
||||
<p>Start typing to search your music library</p>
|
||||
<div className="text-xs mt-2 space-y-1">
|
||||
<p>• Use ↑↓ to navigate • Enter to select</p>
|
||||
<p>• Tab for details • Esc to close</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Details Panel */}
|
||||
<AnimatePresence>
|
||||
{showDetails && selectedResult && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 400 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 400 }}
|
||||
transition={{ type: "spring", duration: 0.4 }}
|
||||
className="fixed right-4 top-[10vh] bottom-4 w-80 bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<h3 className="font-semibold">Details</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowDetails(false)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Basic Info */}
|
||||
<div className="space-y-3">
|
||||
{selectedResult.image && (
|
||||
<Image
|
||||
src={selectedResult.image}
|
||||
alt={selectedResult.title}
|
||||
width={200}
|
||||
height={200}
|
||||
className="w-full aspect-square rounded object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg">{selectedResult.title}</h4>
|
||||
<p className="text-muted-foreground">{selectedResult.subtitle}</p>
|
||||
<Badge variant="secondary" className="mt-1 capitalize">
|
||||
{selectedResult.type}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last.fm Data */}
|
||||
{lastFmDetails && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
<span className="font-medium">Last.fm Info</span>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{lastFmDetails.stats && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="text-center p-2 bg-muted rounded">
|
||||
<div className="flex items-center justify-center space-x-1 mb-1">
|
||||
<Users className="w-3 h-3" />
|
||||
<span className="text-xs font-medium">Listeners</span>
|
||||
</div>
|
||||
<div className="text-sm font-semibold">
|
||||
{parseInt(lastFmDetails.stats.listeners).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-muted rounded">
|
||||
<div className="flex items-center justify-center space-x-1 mb-1">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
<span className="text-xs font-medium">Plays</span>
|
||||
</div>
|
||||
<div className="text-sm font-semibold">
|
||||
{parseInt(lastFmDetails.stats.playcount).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bio */}
|
||||
{lastFmDetails.bio?.summary && (
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">Biography</h5>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||
{lastFmDetails.bio.summary.replace(/<[^>]*>/g, '').split('\n')[0]}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{lastFmDetails.tags?.tag && (
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">Tags</h5>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{lastFmDetails.tags.tag.slice(0, 6).map((tag: LastFmTag, index: number) => (
|
||||
<Badge key={index} variant="outline" className="text-xs">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Similar Artists */}
|
||||
{lastFmDetails.similar?.artist && (
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">Similar Artists</h5>
|
||||
<div className="space-y-2">
|
||||
{lastFmDetails.similar.artist.slice(0, 4).map((artist: LastFmArtist, index: number) => (
|
||||
<div key={index} className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-muted rounded flex items-center justify-center">
|
||||
<User className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm">{artist.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<Separator />
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
onClick={() => handleResultSelect(selectedResult)}
|
||||
className="w-full"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{selectedResult.type === 'track' ? 'Play Track' :
|
||||
selectedResult.type === 'album' ? 'View Album' : 'View Artist'}
|
||||
</Button>
|
||||
{selectedResult.type === 'track' && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handlePlayNext(selectedResult)}
|
||||
className="w-full"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Play Next
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleAddToQueue(selectedResult)}
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add to Queue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user