diff --git a/src/pages/PlaylistEditPage.tsx b/src/pages/PlaylistEditPage.tsx index 510b496..c879f3a 100644 --- a/src/pages/PlaylistEditPage.tsx +++ b/src/pages/PlaylistEditPage.tsx @@ -16,6 +16,7 @@ import { SimpleSortableRow } from '@/components/playlists/playlist-edit/SimpleSo import { SortableTableRow } from '@/components/playlists/playlist-edit/SortableTableRow' import { Button } from '@/components/ui/button' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Input } from '@/components/ui/input' import { Skeleton } from '@/components/ui/skeleton' import { Table, @@ -46,7 +47,7 @@ import { SortableContext, verticalListSortingStrategy, } from '@dnd-kit/sortable' -import { Minus, Music, Plus, RefreshCw } from 'lucide-react' +import { Minus, Music, Plus, RefreshCw, Search, X } from 'lucide-react' import { useCallback, useEffect, useState } from 'react' import { useNavigate, useParams } from 'react-router' import { toast } from 'sonner' @@ -74,6 +75,7 @@ export function PlaylistEditPage() { Sound | PlaylistSound | null >(null) const [dropPosition, setDropPosition] = useState(null) + const [searchQuery, setSearchQuery] = useState('') // dnd-kit sensors const sensors = useSensors( @@ -152,10 +154,18 @@ export function PlaylistEditPage() { if (!isAddMode) { // Entering add mode - fetch available sounds await fetchAvailableSounds() + } else { + // Exiting add mode - clear search + setSearchQuery('') } setIsAddMode(!isAddMode) } + // Filter available sounds based on search query + const filteredAvailableSounds = availableSounds.filter(sound => + sound.name.toLowerCase().includes(searchQuery.toLowerCase()) + ) + useEffect(() => { if (!isNaN(playlistId)) { fetchPlaylist() @@ -807,9 +817,30 @@ export function PlaylistEditPage() { {/* Available Sounds */}
-

- Available EXT Sounds ({availableSounds.length}) -

+
+

+ Available EXT Sounds ({filteredAvailableSounds.length}/{availableSounds.length}) +

+
+
+ + setSearchQuery(e.target.value)} + className="pl-8 pr-8" + /> + {searchQuery && ( + + )} +
{availableSoundsLoading ? (
{Array.from({ length: 3 }).map((_, i) => ( @@ -824,15 +855,23 @@ export function PlaylistEditPage() { All EXT sounds are already in this playlist

+ ) : filteredAvailableSounds.length === 0 ? ( +
+ +

No sounds match your search

+

+ Try a different search term +

+
) : ( `available-sound-${sound.id}`, )} strategy={verticalListSortingStrategy} >
- {availableSounds.map(sound => ( + {filteredAvailableSounds.map(sound => (