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/lib/api/services/sounds.ts

@@ -21,7 +21,15 @@ export interface Sound {
   updated_at: string
 }
 
-export type SoundSortField = 'name' | 'filename' | 'duration' | 'size' | 'type' | 'play_count' | 'created_at' | 'updated_at'
+export type SoundSortField =
+  | 'name'
+  | 'filename'
+  | 'duration'
+  | 'size'
+  | 'type'
+  | 'play_count'
+  | 'created_at'
+  | 'updated_at'
 export type SortOrder = 'asc' | 'desc'
 
 export interface GetSoundsParams {
@@ -43,14 +51,14 @@ export class SoundsService {
    */
   async getSounds(params?: GetSoundsParams): Promise<Sound[]> {
     const searchParams = new URLSearchParams()
-    
+
     // Handle multiple types
     if (params?.types) {
       params.types.forEach(type => {
         searchParams.append('types', type)
       })
     }
-    
+
     // Handle other parameters
     if (params?.search) {
       searchParams.append('search', params.search)
@@ -67,8 +75,10 @@ export class SoundsService {
     if (params?.offset) {
       searchParams.append('offset', params.offset.toString())
     }
-    
-    const url = searchParams.toString() ? `/api/v1/sounds/?${searchParams.toString()}` : '/api/v1/sounds/'
+
+    const url = searchParams.toString()
+      ? `/api/v1/sounds/?${searchParams.toString()}`
+      : '/api/v1/sounds/'
     const response = await apiClient.get<GetSoundsResponse>(url)
     return response.sounds || []
   }
@@ -76,14 +86,19 @@ export class SoundsService {
   /**
    * Get sounds of a specific type
    */
-  async getSoundsByType(type: string, params?: Omit<GetSoundsParams, 'types'>): Promise<Sound[]> {
+  async getSoundsByType(
+    type: string,
+    params?: Omit<GetSoundsParams, 'types'>,
+  ): Promise<Sound[]> {
     return this.getSounds({ ...params, types: [type] })
   }
 
   /**
    * Get SDB type sounds
    */
-  async getSDBSounds(params?: Omit<GetSoundsParams, 'types'>): Promise<Sound[]> {
+  async getSDBSounds(
+    params?: Omit<GetSoundsParams, 'types'>,
+  ): Promise<Sound[]> {
     return this.getSoundsByType('SDB', params)
   }
 
@@ -102,4 +117,4 @@ export class SoundsService {
   }
 }
 
-export const soundsService = new SoundsService()
+export const soundsService = new SoundsService()