feat: add type filter to SoundsPage for improved sound categorization

src/components/player/Player.tsx

@@ -44,6 +44,7 @@ import {
 import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { Playlist } from './Playlist'
+import { NumberFlowDuration } from '../ui/number-flow-duration'
 
 export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
 
@@ -422,8 +423,8 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
             }}
           />
           <div className="flex justify-between text-xs text-muted-foreground mt-1">
-            <span>{formatDuration(state.position)}</span>
+            <NumberFlowDuration duration={state.position} />
-            <span>{formatDuration(state.duration || 0)}</span>
+            <NumberFlowDuration duration={state.duration || 0} />
           </div>
         </div>
 
@@ -645,8 +646,8 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
               }}
             />
             <div className="flex justify-between text-sm text-muted-foreground mt-2">
-              <span>{formatDuration(state.position)}</span>
+              <NumberFlowDuration duration={state.position} />
-              <span>{formatDuration(state.duration || 0)}</span>
+              <NumberFlowDuration duration={state.duration || 0} />
             </div>
           </div>
 

src/pages/SoundsPage.tsx

@@ -90,6 +90,7 @@ export function SoundsPage() {
   const [sortBy, setSortBy] = useState<SoundSortField>('name')
   const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
   const [showFavoritesOnly, setShowFavoritesOnly] = useState(false)
+  const [typeFilter, setTypeFilter] = useState<'all' | 'SDB' | 'TTS'>('all')
 
   const handlePlaySound = async (sound: Sound) => {
     // If WebSocket is connected, use WebSocket for immediate response
@@ -159,13 +160,18 @@ export function SoundsPage() {
     try {
       setLoading(true)
       setError(null)
-      const sdbSounds = await soundsService.getSDBSounds({
+
+      // Determine types to filter by
+      const types = typeFilter === 'all' ? undefined : [typeFilter]
+
+      const sounds = await soundsService.getSounds({
+        types,
         search: debouncedSearchQuery.trim() || undefined,
         sort_by: sortBy,
         sort_order: sortOrder,
         favorites_only: showFavoritesOnly,
       })
-      setSounds(sdbSounds)
+      setSounds(sounds)
     } catch (err) {
       const errorMessage =
         err instanceof Error ? err.message : 'Failed to fetch sounds'
@@ -189,7 +195,7 @@ export function SoundsPage() {
 
   useEffect(() => {
     fetchSounds()
-  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly])
+  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly, typeFilter])
 
   // Listen for sound_played events and update play_count
   useEffect(() => {
@@ -288,9 +294,11 @@ export function SoundsPage() {
             {showFavoritesOnly ? 'No favorite sounds found' : 'No sounds found'}
           </h3>
           <p className="text-muted-foreground">
-            {showFavoritesOnly 
+            {showFavoritesOnly
               ? 'You haven\'t favorited any sounds yet. Click the heart icon on sounds to add them to your favorites.'
-              : 'No SDB type sounds are available in your library.'
+              : typeFilter === 'all'
+                ? 'No sounds are available in your library.'
+                : `No ${typeFilter} type sounds are available in your library.`
             }
           </p>
         </div>
@@ -362,6 +370,20 @@ export function SoundsPage() {
           </div>
 
           <div className="flex gap-2">
+            <Select
+              value={typeFilter}
+              onValueChange={value => setTypeFilter(value as 'all' | 'SDB' | 'TTS')}
+            >
+              <SelectTrigger className="w-[120px]">
+                <SelectValue placeholder="Type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                <SelectItem value="SDB">Soundboard</SelectItem>
+                <SelectItem value="TTS">TTS</SelectItem>
+              </SelectContent>
+            </Select>
+
             <Select
               value={sortBy}
               onValueChange={value => setSortBy(value as SoundSortField)}