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

@@ -1,11 +1,4 @@
-import { 
-  Home, 
-  Music, 
-  Users, 
-  Settings, 
-  Download,
-  PlayCircle
-} from 'lucide-react'
+import { Separator } from '@/components/ui/separator'
 import {
   Sidebar,
   SidebarContent,
@@ -13,13 +6,20 @@ import {
   SidebarHeader,
   SidebarRail,
 } from '@/components/ui/sidebar'
+import { useAuth } from '@/contexts/AuthContext'
+import {
+  Download,
+  Home,
+  Music,
+  PlayCircle,
+  Settings,
+  Users,
+} from 'lucide-react'
+import { CreditsNav } from './nav/CreditsNav'
 import { NavGroup } from './nav/NavGroup'
 import { NavItem } from './nav/NavItem'
 import { UserNav } from './nav/UserNav'
-import { CreditsNav } from './nav/CreditsNav'
 import { CompactPlayer } from './player/CompactPlayer'
-import { Separator } from '@/components/ui/separator'
-import { useAuth } from '@/contexts/AuthContext'
 
 interface AppSidebarProps {
   showCompactPlayer?: boolean
@@ -35,7 +35,9 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
       <SidebarHeader>
         <div className="flex items-center gap-2 px-2 py-2">
           <Music className="h-6 w-6" />
-          <span className="font-semibold text-lg group-data-[collapsible=icon]:hidden">SDB v2</span>
+          <span className="font-semibold text-lg group-data-[collapsible=icon]:hidden">
+            SDB v2
+          </span>
         </div>
       </SidebarHeader>
 
@@ -47,7 +49,7 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
           <NavItem href="/extractions" icon={Download} title="Extractions" />
         </NavGroup>
 
-        {user.role === "admin" && (
+        {user.role === 'admin' && (
           <NavGroup label="Admin">
             <NavItem href="/admin/users" icon={Users} title="Users" />
             <NavItem href="/admin/settings" icon={Settings} title="Settings" />
@@ -73,4 +75,4 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
       <SidebarRail />
     </Sidebar>
   )
-}
+}