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/components/auth/OAuthButtons.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
-import { apiService } from '@/lib/api'
+import { api } from '@/lib/api'
 
 export function OAuthButtons() {
   const [providers, setProviders] = useState<string[]>([])
@@ -10,7 +10,7 @@ export function OAuthButtons() {
   useEffect(() => {
     const fetchProviders = async () => {
       try {
-        const response = await apiService.getOAuthProviders()
+        const response = await api.auth.getOAuthProviders()
         setProviders(response.providers)
       } catch (error) {
         console.error('Failed to fetch OAuth providers:', error)
@@ -23,7 +23,7 @@ export function OAuthButtons() {
   const handleOAuthLogin = async (provider: string) => {
     setLoading(provider)
     try {
-      const response = await apiService.getOAuthUrl(provider)
+      const response = await api.auth.getOAuthUrl(provider)
       
       // Store state in sessionStorage for verification
       sessionStorage.setItem('oauth_state', response.state)