Refactor API structure and integrate new modular API client

- Replaced legacy apiService with a new modular api client structure.
- Updated AuthContext, OAuthButtons, and AuthCallbackPage to use the new api client.
- Created separate services for auth, sounds, playlists, and users.
- Implemented centralized API configuration and error handling.
- Added support for OAuth providers and token exchange.
- Introduced a Toaster component for notifications in App.
- Updated API endpoints and request handling for better maintainability.

src/pages/AuthCallbackPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { useAuth } from '@/contexts/AuthContext'
-import { apiService } from '@/lib/api'
+import { api } from '@/lib/api'
 
 export function AuthCallbackPage() {
   const navigate = useNavigate()
@@ -23,25 +23,11 @@ export function AuthCallbackPage() {
         console.log('Exchanging OAuth code for tokens...')
         
         // Exchange the temporary code for proper auth cookies
-        const response = await fetch('http://localhost:8000/api/v1/auth/exchange-oauth-token', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ code }),
-          credentials: 'include', // Important for setting cookies
-        })
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => null)
-          throw new Error(errorData?.detail || 'Token exchange failed')
-        }
-
-        const result = await response.json()
+        const result = await api.auth.exchangeOAuthToken({ code })
         console.log('Token exchange successful:', result)
 
         // Now get the user info
-        const user = await apiService.getMe()
+        const user = await api.auth.getMe()
         console.log('User info retrieved:', user)
         
         // Update auth context