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/App.tsx

@@ -1,100 +1,138 @@
-import { Routes, Route, Navigate } from 'react-router'
+import { Navigate, Route, Routes } from 'react-router'
 import { ThemeProvider } from './components/ThemeProvider'
+import { Toaster } from './components/ui/sonner'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
 import { SocketProvider } from './contexts/SocketContext'
-import { LoginPage } from './pages/LoginPage'
-import { RegisterPage } from './pages/RegisterPage'
+import { AccountPage } from './pages/AccountPage'
 import { AuthCallbackPage } from './pages/AuthCallbackPage'
 import { DashboardPage } from './pages/DashboardPage'
-import { SoundsPage } from './pages/SoundsPage'
-import { PlaylistsPage } from './pages/PlaylistsPage'
-import { PlaylistEditPage } from './pages/PlaylistEditPage'
 import { ExtractionsPage } from './pages/ExtractionsPage'
-import { UsersPage } from './pages/admin/UsersPage'
+import { LoginPage } from './pages/LoginPage'
+import { PlaylistEditPage } from './pages/PlaylistEditPage'
+import { PlaylistsPage } from './pages/PlaylistsPage'
+import { RegisterPage } from './pages/RegisterPage'
+import { SoundsPage } from './pages/SoundsPage'
 import { SettingsPage } from './pages/admin/SettingsPage'
-import { AccountPage } from './pages/AccountPage'
-import { Toaster } from './components/ui/sonner'
+import { UsersPage } from './pages/admin/UsersPage'
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth()
-  
+
   if (loading) {
-    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        Loading...
+      </div>
+    )
   }
-  
+
   if (!user) {
     return <Navigate to="/login" replace />
   }
-  
+
   return <>{children}</>
 }
 
 function AdminRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth()
-  
+
   if (loading) {
-    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        Loading...
+      </div>
+    )
   }
-  
+
   if (!user) {
     return <Navigate to="/login" replace />
   }
-  
+
   if (user.role !== 'admin') {
     return <Navigate to="/" replace />
   }
-  
+
   return <>{children}</>
 }
 
 function AppRoutes() {
   const { user } = useAuth()
-  
+
   return (
     <Routes>
-      <Route path="/login" element={user ? <Navigate to="/" replace /> : <LoginPage />} />
-      <Route path="/register" element={user ? <Navigate to="/" replace /> : <RegisterPage />} />
+      <Route
+        path="/login"
+        element={user ? <Navigate to="/" replace /> : <LoginPage />}
+      />
+      <Route
+        path="/register"
+        element={user ? <Navigate to="/" replace /> : <RegisterPage />}
+      />
       <Route path="/auth/callback" element={<AuthCallbackPage />} />
-      <Route path="/" element={
-        <ProtectedRoute>
-          <DashboardPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/sounds" element={
-        <ProtectedRoute>
-          <SoundsPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/playlists" element={
-        <ProtectedRoute>
-          <PlaylistsPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/playlists/:id/edit" element={
-        <ProtectedRoute>
-          <PlaylistEditPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/extractions" element={
-        <ProtectedRoute>
-          <ExtractionsPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/account" element={
-        <ProtectedRoute>
-          <AccountPage />
-        </ProtectedRoute>
-      } />
-      <Route path="/admin/users" element={
-        <AdminRoute>
-          <UsersPage />
-        </AdminRoute>
-      } />
-      <Route path="/admin/settings" element={
-        <AdminRoute>
-          <SettingsPage />
-        </AdminRoute>
-      } />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <DashboardPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/sounds"
+        element={
+          <ProtectedRoute>
+            <SoundsPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/playlists"
+        element={
+          <ProtectedRoute>
+            <PlaylistsPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/playlists/:id/edit"
+        element={
+          <ProtectedRoute>
+            <PlaylistEditPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/extractions"
+        element={
+          <ProtectedRoute>
+            <ExtractionsPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/account"
+        element={
+          <ProtectedRoute>
+            <AccountPage />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/admin/users"
+        element={
+          <AdminRoute>
+            <UsersPage />
+          </AdminRoute>
+        }
+      />
+      <Route
+        path="/admin/settings"
+        element={
+          <AdminRoute>
+            <SettingsPage />
+          </AdminRoute>
+        }
+      />
     </Routes>
   )
 }