Refactor and enhance UI components across multiple pages

- Improved import organization and formatting in PlaylistsPage, RegisterPage, SoundsPage, SettingsPage, and UsersPage for better readability.
- Added error handling and user feedback with toast notifications in SoundsPage and SettingsPage.
- Enhanced user experience by implementing debounced search functionality in PlaylistsPage and SoundsPage.
- Updated the layout and structure of forms in SettingsPage and UsersPage for better usability.
- Improved accessibility and semantics by ensuring proper labeling and descriptions in forms.
- Fixed minor bugs related to state management and API calls in various components.

src/components/auth/LoginForm.tsx

@@ -1,11 +1,17 @@
-import { useState } from 'react'
-import { useAuth } from '@/contexts/AuthContext'
 import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { OAuthButtons } from './OAuthButtons'
+import { useAuth } from '@/contexts/AuthContext'
 import { ApiError } from '@/lib/api'
+import { useState } from 'react'
+import { OAuthButtons } from './OAuthButtons'
 
 export function LoginForm() {
   const { login } = useAuth()
@@ -44,7 +50,9 @@ export function LoginForm() {
   return (
     <Card className="w-full max-w-md">
       <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold text-center">Sign in</CardTitle>
+        <CardTitle className="text-2xl font-bold text-center">
+          Sign in
+        </CardTitle>
         <CardDescription className="text-center">
           Enter your email and password to sign in to your account
         </CardDescription>
@@ -63,7 +71,7 @@ export function LoginForm() {
               disabled={loading}
             />
           </div>
-          
+
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
             <Input
@@ -83,11 +91,7 @@ export function LoginForm() {
             </div>
           )}
 
-          <Button 
-            type="submit" 
-            className="w-full" 
-            disabled={loading}
-          >
+          <Button type="submit" className="w-full" disabled={loading}>
             {loading ? 'Signing in...' : 'Sign In'}
           </Button>
         </form>
@@ -96,4 +100,4 @@ export function LoginForm() {
       </CardContent>
     </Card>
   )
-}
+}

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 { api } from '@/lib/api'
+import { useEffect, useState } from 'react'
 
 export function OAuthButtons() {
   const [providers, setProviders] = useState<string[]>([])
@@ -24,10 +24,10 @@ export function OAuthButtons() {
     setLoading(provider)
     try {
       const response = await api.auth.getOAuthUrl(provider)
-      
+
       // Store state in sessionStorage for verification
       sessionStorage.setItem('oauth_state', response.state)
-      
+
       // Redirect to OAuth provider
       window.location.href = response.authorization_url
     } catch (error) {
@@ -90,9 +90,9 @@ export function OAuthButtons() {
           </span>
         </div>
       </div>
-      
+
       <div className="grid grid-cols-1 gap-3">
-        {providers.map((provider) => (
+        {providers.map(provider => (
           <Button
             key={provider}
             variant="outline"
@@ -107,14 +107,13 @@ export function OAuthButtons() {
               getProviderIcon(provider)
             )}
             <span className="ml-2">
-              {loading === provider 
-                ? 'Connecting...' 
-                : `Continue with ${getProviderName(provider)}`
-              }
+              {loading === provider
+                ? 'Connecting...'
+                : `Continue with ${getProviderName(provider)}`}
             </span>
           </Button>
         ))}
       </div>
     </div>
   )
-}
+}

src/components/auth/RegisterForm.tsx

@@ -1,11 +1,17 @@
-import { useState } from 'react'
-import { useAuth } from '@/contexts/AuthContext'
 import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { OAuthButtons } from './OAuthButtons'
+import { useAuth } from '@/contexts/AuthContext'
 import { ApiError } from '@/lib/api'
+import { useState } from 'react'
+import { OAuthButtons } from './OAuthButtons'
 
 export function RegisterForm() {
   const { register } = useAuth()
@@ -62,7 +68,9 @@ export function RegisterForm() {
   return (
     <Card className="w-full max-w-md">
       <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold text-center">Create account</CardTitle>
+        <CardTitle className="text-2xl font-bold text-center">
+          Create account
+        </CardTitle>
         <CardDescription className="text-center">
           Enter your information to create your account
         </CardDescription>
@@ -94,7 +102,7 @@ export function RegisterForm() {
               disabled={loading}
             />
           </div>
-          
+
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
             <Input
@@ -128,11 +136,7 @@ export function RegisterForm() {
             </div>
           )}
 
-          <Button 
-            type="submit" 
-            className="w-full" 
-            disabled={loading}
-          >
+          <Button type="submit" className="w-full" disabled={loading}>
             {loading ? 'Creating account...' : 'Create Account'}
           </Button>
         </form>
@@ -141,4 +145,4 @@ export function RegisterForm() {
       </CardContent>
     </Card>
   )
-}
+}