feat: implement ThemeProvider and SoundCard components; add utility functions for formatting duration and size

src/components/ThemeProvider.tsx

@@ -1,6 +1,5 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
-
+import { ThemeProviderContext, type Theme } from '@/contexts/ThemeContext'
-type Theme = 'dark' | 'light' | 'system'
 
 type ThemeProviderProps = {
   children: React.ReactNode
@@ -8,22 +7,10 @@ type ThemeProviderProps = {
   storageKey?: string
 }
 
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
-
 export function ThemeProvider({
   children,
   defaultTheme = 'system',
-  storageKey = 'vite-ui-theme',
+  storageKey = 'theme',
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
@@ -62,12 +49,3 @@ export function ThemeProvider({
     </ThemeProviderContext.Provider>
   )
 }
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext)
-
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider')
-
-  return context
-}

src/components/sounds/SoundCard.tsx

@@ -0,0 +1,47 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Play, Clock, Weight } from 'lucide-react'
+import { type Sound } from '@/lib/api/services/sounds'
+import { cn } from '@/lib/utils'
+import { formatDuration } from '@/utils/format-duration'
+import { formatSize } from '@/utils/format-size'
+import NumberFlow from '@number-flow/react'
+
+interface SoundCardProps {
+  sound: Sound
+  playSound: (sound: Sound) => void
+  colorClasses: string
+}
+
+export function SoundCard({ sound, playSound, colorClasses }: SoundCardProps) {
+  const handlePlaySound = () => {
+    playSound(sound)
+  }
+
+  return (
+    <Card
+      onClick={handlePlaySound}
+      className={cn(
+        'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
+        colorClasses,
+      )}
+    >
+      <CardContent className="grid grid-cols-1 pl-3 pr-3 gap-1">
+        <h3 className="font-medium text-s truncate">{sound.name}</h3>
+        <div className="grid grid-cols-3 gap-1 text-xs text-muted-foreground">
+          <div className="flex">
+            <Clock className="h-3.5 w-3.5 mr-0.5" />
+            <span>{formatDuration(sound.duration)}</span>
+          </div>
+          <div className="flex justify-center">
+            <Weight className="h-3.5 w-3.5 mr-0.5" />
+            <span>{formatSize(sound.size)}</span>
+          </div>
+          <div className="flex justify-end items-center">
+            <Play className="h-3.5 w-3.5 mr-0.5" />
+            <NumberFlow value={sound.play_count} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/contexts/ThemeContext.tsx

@@ -0,0 +1,16 @@
+import { createContext } from 'react'
+
+type Theme = 'dark' | 'light' | 'system'
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+}
+
+export const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+export type { Theme, ThemeProviderState }

src/hooks/use-theme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { ThemeProviderContext } from '@/contexts/ThemeContext'
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider')
+
+  return context
+}

src/lib/api/services/index.ts

@@ -0,0 +1,2 @@
+export * from './auth'
+export * from './sounds'

src/lib/api/services/sounds.ts

@@ -0,0 +1,83 @@
+import { apiClient } from '../client'
+
+export interface Sound {
+  id: number
+  name: string
+  filename: string
+  duration: number
+  size: number
+  hash: string
+  type: 'SDB' | 'TTS' | 'EXT'
+  play_count: number
+  is_normalized: boolean
+  normalized_filename?: string
+  normalized_duration?: number
+  normalized_size?: number
+  normalized_hash?: string
+  thumbnail?: string
+  is_music: boolean
+  is_deletable: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface GetSoundsParams {
+  types?: string[]
+}
+
+export interface GetSoundsResponse {
+  sounds: Sound[]
+}
+
+export class SoundsService {
+  /**
+   * Get all sounds with optional type filtering
+   */
+  async getSounds(params?: GetSoundsParams): Promise<Sound[]> {
+    const queryParams: Record<string, string | number | boolean | undefined> = {}
+    
+    if (params?.types) {
+      // Handle multiple types by building query string manually
+      const searchParams = new URLSearchParams()
+      params.types.forEach(type => {
+        searchParams.append('types', type)
+      })
+      
+      const response = await apiClient.get<GetSoundsResponse>(`/api/v1/sounds/?${searchParams.toString()}`)
+      return response.sounds || []
+    }
+    
+    const response = await apiClient.get<GetSoundsResponse>('/api/v1/sounds/', { params: queryParams })
+    return response.sounds || []
+  }
+
+  /**
+   * Get sounds of a specific type
+   */
+  async getSoundsByType(type: string): Promise<Sound[]> {
+    return this.getSounds({ types: [type] })
+  }
+
+  /**
+   * Get SDB type sounds
+   */
+  async getSDBSounds(): Promise<Sound[]> {
+    return this.getSoundsByType('SDB')
+  }
+
+  /**
+   * Play a sound by ID
+   */
+  async playSound(soundId: number): Promise<void> {
+    await apiClient.post(`/api/v1/sounds/play/${soundId}`)
+  }
+
+  /**
+   * Stop all playing sounds
+   */
+  async stopSounds(): Promise<void> {
+    await apiClient.post('/api/v1/sounds/stop')
+  }
+}
+
+export const soundsService = new SoundsService()

src/pages/SoundsPage.tsx

@@ -1,6 +1,171 @@
+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 { Skeleton } from '@/components/ui/skeleton'
+import { AlertCircle } from 'lucide-react'
+import { toast } from 'sonner'
+import { useTheme } from '@/hooks/use-theme'
+import { soundEvents, SOUND_EVENTS } from '@/lib/events'
+
+interface SoundPlayedEventData {
+  sound_id: number
+  sound_name: string
+  user_id: number | null
+  user_name: string | null
+  play_count: number
+}
+
+const lightModeColors = [
+  'bg-red-600/30 hover:bg-red-600/40 text-red-900 border-red-600/20',
+  'bg-blue-700/30 hover:bg-blue-700/40 text-blue-900 border-blue-700/20',
+  'bg-yellow-400/30 hover:bg-yellow-400/40 text-yellow-800 border-yellow-400/20',
+  'bg-purple-700/30 hover:bg-purple-700/40 text-purple-900 border-purple-700/20',
+  'bg-green-600/30 hover:bg-green-600/40 text-green-900 border-green-600/20',
+  'bg-pink-500/30 hover:bg-pink-500/40 text-pink-900 border-pink-500/20',
+  'bg-cyan-500/30 hover:bg-cyan-500/40 text-cyan-900 border-cyan-500/20',
+  'bg-amber-500/30 hover:bg-amber-500/40 text-amber-900 border-amber-500/20',
+  'bg-indigo-800/30 hover:bg-indigo-800/40 text-indigo-900 border-indigo-800/20',
+  'bg-lime-500/30 hover:bg-lime-500/40 text-lime-900 border-lime-500/20',
+  'bg-fuchsia-600/30 hover:bg-fuchsia-600/40 text-fuchsia-900 border-fuchsia-600/20',
+  'bg-orange-600/30 hover:bg-orange-600/40 text-orange-900 border-orange-600/20',
+]
+
+const darkModeColors = [
+  'bg-red-700/40 hover:bg-red-700/50 text-red-100 border border-red-500/50',
+  'bg-blue-800/40 hover:bg-blue-800/50 text-blue-100 border border-blue-600/50',
+  'bg-yellow-600/40 hover:bg-yellow-600/50 text-yellow-100 border border-yellow-400/50',
+  'bg-purple-800/40 hover:bg-purple-800/50 text-purple-100 border border-purple-600/50',
+  'bg-green-700/40 hover:bg-green-700/50 text-green-100 border border-green-500/50',
+  'bg-pink-700/40 hover:bg-pink-700/50 text-pink-100 border border-pink-500/50',
+  'bg-cyan-700/40 hover:bg-cyan-700/50 text-cyan-100 border border-cyan-500/50',
+  'bg-amber-700/40 hover:bg-amber-700/50 text-amber-100 border border-amber-500/50',
+  'bg-indigo-900/40 hover:bg-indigo-900/50 text-indigo-100 border border-indigo-700/50',
+  'bg-lime-700/40 hover:bg-lime-700/50 text-lime-100 border border-lime-500/50',
+  'bg-fuchsia-800/40 hover:bg-fuchsia-800/50 text-fuchsia-100 border border-fuchsia-600/50',
+  'bg-orange-700/40 hover:bg-orange-700/50 text-orange-100 border border-orange-500/50',
+]
 
 export function SoundsPage() {
+  const [sounds, setSounds] = useState<Sound[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
+
+  const handlePlaySound = async (sound: Sound) => {
+    try {
+      await soundsService.playSound(sound.id)
+      toast.success(`Playing: ${sound.name || sound.filename}`)
+    } catch (error) {
+      toast.error(`Failed to play sound: ${error instanceof Error ? error.message : 'Unknown error'}`)
+    }
+  }
+  
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setCurrentColors(darkModeColors)
+    } else {
+      setCurrentColors(lightModeColors)
+    }
+  }, [theme])
+  
+  const getSoundColor = (soundIdx: number) => {
+    const index = soundIdx % currentColors.length
+    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)
+      }
+    }
+
+    fetchSounds()
+  }, [])
+
+  // Listen for sound_played events and update play_count
+  useEffect(() => {
+    const handleSoundPlayed = (eventData: SoundPlayedEventData) => {
+      setSounds(prevSounds => 
+        prevSounds.map(sound => 
+          sound.id === eventData.sound_id
+            ? { ...sound, play_count: eventData.play_count }
+            : sound
+        )
+      )
+    }
+
+    soundEvents.on(SOUND_EVENTS.SOUND_PLAYED, handleSoundPlayed)
+
+    return () => {
+      soundEvents.off(SOUND_EVENTS.SOUND_PLAYED, handleSoundPlayed)
+    }
+  }, [])
+
+  const renderContent = () => {
+    if (loading) {
+      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">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="space-y-3">
+              <Skeleton className="h-32 w-full rounded-lg" />
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-semibold mb-2">Failed to load sounds</h3>
+          <p className="text-muted-foreground mb-4">{error}</p>
+          <button 
+            onClick={() => window.location.reload()} 
+            className="text-primary hover:underline"
+          >
+            Try again
+          </button>
+        </div>
+      )
+    }
+
+    if (sounds.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">
+            <span className="text-2xl">🎵</span>
+          </div>
+          <h3 className="text-lg font-semibold mb-2">No sounds found</h3>
+          <p className="text-muted-foreground">
+            No SDB type sounds are available in your library.
+          </p>
+        </div>
+      )
+    }
+
+    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">
+        {sounds.map((sound, idx) => (
+          <SoundCard key={sound.id} sound={sound} playSound={handlePlaySound} colorClasses={getSoundColor(idx)} />
+        ))}
+      </div>
+    )
+  }
+
   return (
     <AppLayout 
       breadcrumb={{
@@ -11,10 +176,20 @@ export function SoundsPage() {
       }}
     >
       <div className="flex-1 rounded-xl bg-muted/50 p-4">
-        <h1 className="text-2xl font-bold mb-4">Sounds</h1>
+        <div className="flex items-center justify-between mb-6">
-        <p className="text-muted-foreground">
+          <div>
-          Sound management interface coming soon...
+            <h1 className="text-2xl font-bold">Sounds</h1>
-        </p>
+            <p className="text-muted-foreground">
+              Browse and play your soundboard library
+            </p>
+          </div>
+          {!loading && !error && (
+            <div className="text-sm text-muted-foreground">
+              {sounds.length} sound{sounds.length !== 1 ? 's' : ''}
+            </div>
+          )}
+        </div>
+        {renderContent()}
       </div>
     </AppLayout>
   )

src/utils/format-duration.ts

@@ -0,0 +1,18 @@
+export function formatDuration(ms: number): string {
+  if (isNaN(ms) || ms < 0) return '0:00'
+
+  // Convert milliseconds to seconds
+  const totalSeconds = Math.floor(ms / 1000)
+
+  // Calculate hours, minutes, and remaining seconds
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  // Format based on duration
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  } else {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+}

src/utils/format-size.ts

@@ -0,0 +1,65 @@
+/**
+ * Units for file sizes
+ */
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB']
+
+/**
+ * Interface for file size
+ */
+export interface FileSize {
+  value: number
+  unit: string
+}
+
+/**
+ * Base function to parse file size in bytes to value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+function parseSize(bytes: number, binary: boolean = false): FileSize {
+  // Handle invalid input
+  if (bytes === null || bytes === undefined || isNaN(bytes) || bytes < 0) {
+    return { value: 0, unit: 'B' }
+  }
+
+  // If the size is 0, return early
+  if (bytes === 0) {
+    return { value: 0, unit: 'B' }
+  }
+
+  // Otherwise, determine the appropriate unit based on the size
+  const unit = binary ? 1024 : 1000
+  const unitIndex = Math.floor(Math.log(bytes) / Math.log(unit))
+  const unitSize = Math.pow(unit, unitIndex)
+  const value = bytes / unitSize
+
+  // Make sure we don't exceed our units array
+  const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1)
+
+  return {
+    value: Math.round(value * 100) / 100, // Round to 2 decimal places
+    unit: FILE_SIZE_UNITS[safeUnitIndex]
+  }
+}
+
+/**
+ * Converts a file size in bytes to a human-readable string
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
+export function formatSize(bytes: number, binary: boolean = false): string {
+  const { value, unit } = parseSize(bytes, binary)
+  return `${value.toFixed(2)} ${unit}`
+}
+
+/**
+ * Converts a file size in bytes to an object with value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+export function formatSizeObject(bytes: number, binary: boolean = false): FileSize {
+  return parseSize(bytes, binary)
+}