feat: add search and sorting functionality to SoundsPage; update fetch logic to support new parameters

src/pages/SoundsPage.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react'
 import { AppLayout } from '@/components/AppLayout'
 import { SoundCard } from '@/components/sounds/SoundCard'
-import { soundsService, type Sound } from '@/lib/api/services/sounds'
+import { soundsService, type Sound, type SoundSortField, type SortOrder } from '@/lib/api/services/sounds'
 import { Skeleton } from '@/components/ui/skeleton'
-import { AlertCircle } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { AlertCircle, Search, SortAsc, SortDesc, X, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
 import { useTheme } from '@/hooks/use-theme'
 import { soundEvents, SOUND_EVENTS } from '@/lib/events'
@@ -51,6 +54,11 @@ export function SoundsPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
+  
+  // Search and sorting state
+  const [searchQuery, setSearchQuery] = useState('')
+  const [sortBy, setSortBy] = useState<SoundSortField>('name')
+  const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
 
   const handlePlaySound = async (sound: Sound) => {
     try {
@@ -76,24 +84,39 @@ export function SoundsPage() {
     return currentColors[index]
   }
 
-  useEffect(() => {
-    const fetchSounds = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-        const sdbSounds = await soundsService.getSDBSounds()
-        setSounds(sdbSounds)
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds'
-        setError(errorMessage)
-        toast.error(errorMessage)
-      } finally {
-        setLoading(false)
-      }
+  const fetchSounds = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const sdbSounds = await soundsService.getSDBSounds({
+        search: debouncedSearchQuery.trim() || undefined,
+        sort_by: sortBy,
+        sort_order: sortOrder,
+      })
+      setSounds(sdbSounds)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds'
+      setError(errorMessage)
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
     }
+  }
 
+  // Debounce search query
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery)
+  
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery)
+    }, 300)
+    
+    return () => clearTimeout(handler)
+  }, [searchQuery])
+
+  useEffect(() => {
     fetchSounds()
-  }, [])
+  }, [debouncedSearchQuery, sortBy, sortOrder])
 
   // Listen for sound_played events and update play_count
   useEffect(() => {
@@ -189,6 +212,68 @@ export function SoundsPage() {
             </div>
           )}
         </div>
+        
+        {/* Search and Sort Controls */}
+        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+          <div className="flex-1">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search sounds..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 pr-9"
+              />
+              {searchQuery && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-1 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-muted"
+                  title="Clear search"
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+          </div>
+          
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value) => setSortBy(value as SoundSortField)}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="name">Name</SelectItem>
+                <SelectItem value="duration">Duration</SelectItem>
+                <SelectItem value="play_count">Play Count</SelectItem>
+                <SelectItem value="size">File Size</SelectItem>
+                <SelectItem value="created_at">Created Date</SelectItem>
+                <SelectItem value="updated_at">Updated Date</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
+              title={sortOrder === 'asc' ? 'Sort ascending' : 'Sort descending'}
+            >
+              {sortOrder === 'asc' ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
+            </Button>
+            
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={fetchSounds}
+              disabled={loading}
+              title="Refresh sounds"
+            >
+              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+            </Button>
+          </div>
+        </div>
+        
         {renderContent()}
       </div>
     </AppLayout>