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/contexts/SocketContext.tsx

@@ -1,8 +1,23 @@
-import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
-import { io, Socket } from 'socket.io-client'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { Socket, io } from 'socket.io-client'
 import { toast } from 'sonner'
+import {
+  AUTH_EVENTS,
+  PLAYER_EVENTS,
+  SOUND_EVENTS,
+  USER_EVENTS,
+  authEvents,
+  playerEvents,
+  soundEvents,
+  userEvents,
+} from '../lib/events'
 import { useAuth } from './AuthContext'
-import { authEvents, AUTH_EVENTS, soundEvents, SOUND_EVENTS, userEvents, USER_EVENTS, playerEvents, PLAYER_EVENTS } from '../lib/events'
 
 interface SocketContextType {
   socket: Socket | null
@@ -28,9 +43,9 @@ export function SocketProvider({ children }: SocketProviderProps) {
     if (!user) return null
 
     // Get socket URL - use relative URL in production with reverse proxy
-    const socketUrl = import.meta.env.PROD 
+    const socketUrl = import.meta.env.PROD
       ? '' // Use relative URL in production (same origin as frontend)
-      : (import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000')
+      : import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
 
     const newSocket = io(socketUrl, {
       withCredentials: true,
@@ -50,37 +65,37 @@ export function SocketProvider({ children }: SocketProviderProps) {
       setIsConnected(false)
     })
 
-    newSocket.on('connect_error', (error) => {
+    newSocket.on('connect_error', error => {
       setConnectionError(`Connection failed: ${error.message}`)
       setIsConnected(false)
       setIsReconnecting(false)
     })
 
     // Listen for message events
-    newSocket.on('user_message', (data) => {
+    newSocket.on('user_message', data => {
       toast.info(`Message from ${data.from_user_name}`, {
         description: data.message,
       })
     })
 
-    newSocket.on('broadcast_message', (data) => {
+    newSocket.on('broadcast_message', data => {
       toast.warning(`Broadcast from ${data.from_user_name}`, {
         description: data.message,
       })
     })
 
     // Listen for player events and emit them locally
-    newSocket.on('player_state', (data) => {
+    newSocket.on('player_state', data => {
       playerEvents.emit(PLAYER_EVENTS.PLAYER_STATE, data)
     })
 
     // Listen for sound events and emit them locally
-    newSocket.on('sound_played', (data) => {
+    newSocket.on('sound_played', data => {
       soundEvents.emit(SOUND_EVENTS.SOUND_PLAYED, data)
     })
 
     // Listen for user events and emit them locally
-    newSocket.on('user_credits_changed', (data) => {
+    newSocket.on('user_credits_changed', data => {
       userEvents.emit(USER_EVENTS.USER_CREDITS_CHANGED, data)
     })
 
@@ -92,10 +107,10 @@ export function SocketProvider({ children }: SocketProviderProps) {
     if (!user || !socket) return
 
     setIsReconnecting(true)
-    
+
     // Disconnect current socket
     socket.disconnect()
-    
+
     // Create new socket with fresh token
     const newSocket = createSocket()
     if (newSocket) {
@@ -106,13 +121,12 @@ export function SocketProvider({ children }: SocketProviderProps) {
   // Listen for token refresh events
   useEffect(() => {
     authEvents.on(AUTH_EVENTS.TOKEN_REFRESHED, handleTokenRefresh)
-    
+
     return () => {
       authEvents.off(AUTH_EVENTS.TOKEN_REFRESHED, handleTokenRefresh)
     }
   }, [handleTokenRefresh])
 
-
   // Initial socket connection
   useEffect(() => {
     if (loading) return
@@ -146,9 +160,7 @@ export function SocketProvider({ children }: SocketProviderProps) {
   }
 
   return (
-    <SocketContext.Provider value={value}>
-      {children}
-    </SocketContext.Provider>
+    <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
   )
 }
 
@@ -158,4 +170,4 @@ export function useSocket() {
     throw new Error('useSocket must be used within a SocketProvider')
   }
   return context
-}
+}