feat: add favorites filter to sounds retrieval and update SoundsPage component

src/lib/api/services/sounds.ts

@@ -41,6 +41,7 @@ export interface GetSoundsParams {
   sort_order?: SortOrder
   limit?: number
   offset?: number
+  favorites_only?: boolean
 }
 
 export interface GetSoundsResponse {
@@ -77,6 +78,9 @@ export class SoundsService {
     if (params?.offset) {
       searchParams.append('offset', params.offset.toString())
     }
+    if (params?.favorites_only) {
+      searchParams.append('favorites_only', 'true')
+    }
 
     const url = searchParams.toString()
       ? `/api/v1/sounds/?${searchParams.toString()}`

src/pages/SoundsPage.tsx

@@ -148,6 +148,7 @@ export function SoundsPage() {
         search: debouncedSearchQuery.trim() || undefined,
         sort_by: sortBy,
         sort_order: sortOrder,
+        favorites_only: showFavoritesOnly,
       })
       setSounds(sdbSounds)
     } catch (err) {
@@ -173,7 +174,7 @@ export function SoundsPage() {
 
   useEffect(() => {
     fetchSounds()
-  }, [debouncedSearchQuery, sortBy, sortOrder])
+  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly])
 
   // Listen for sound_played events and update play_count
   useEffect(() => {
@@ -224,10 +225,7 @@ export function SoundsPage() {
       )
     }
 
-    // Filter sounds based on favorites filter
+    if (sounds.length === 0) {
-    const filteredSounds = showFavoritesOnly ? sounds.filter(sound => sound.is_favorited) : sounds
-
-    if (filteredSounds.length === 0) {
       return (
         <div className="flex flex-col items-center justify-center py-12 text-center">
           <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
@@ -248,7 +246,7 @@ export function SoundsPage() {
 
     return (
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-        {filteredSounds.map((sound, idx) => (
+        {sounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}
             sound={sound}
@@ -278,7 +276,7 @@ export function SoundsPage() {
           {!loading && !error && (
             <div className="text-sm text-muted-foreground">
               {showFavoritesOnly 
-                ? `${sounds.filter(s => s.is_favorited).length} favorite sound${sounds.filter(s => s.is_favorited).length !== 1 ? 's' : ''}`
+                ? `${sounds.length} favorite sound${sounds.length !== 1 ? 's' : ''}`
                 : `${sounds.length} sound${sounds.length !== 1 ? 's' : ''}`
               }
             </div>