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/playlists.ts

@@ -1,6 +1,12 @@
 import { apiClient } from '../client'
 
-export type PlaylistSortField = 'name' | 'genre' | 'created_at' | 'updated_at' | 'sound_count' | 'total_duration'
+export type PlaylistSortField =
+  | 'name'
+  | 'genre'
+  | 'created_at'
+  | 'updated_at'
+  | 'sound_count'
+  | 'total_duration'
 export type SortOrder = 'asc' | 'desc'
 
 export interface Playlist {
@@ -47,7 +53,7 @@ export class PlaylistsService {
    */
   async getPlaylists(params?: GetPlaylistsParams): Promise<Playlist[]> {
     const searchParams = new URLSearchParams()
-    
+
     // Handle parameters
     if (params?.search) {
       searchParams.append('search', params.search)
@@ -64,8 +70,10 @@ export class PlaylistsService {
     if (params?.offset) {
       searchParams.append('offset', params.offset.toString())
     }
-    
-    const url = searchParams.toString() ? `/api/v1/playlists/?${searchParams.toString()}` : '/api/v1/playlists/'
+
+    const url = searchParams.toString()
+      ? `/api/v1/playlists/?${searchParams.toString()}`
+      : '/api/v1/playlists/'
     return apiClient.get<Playlist[]>(url)
   }
 
@@ -104,11 +112,14 @@ export class PlaylistsService {
   /**
    * Update a playlist
    */
-  async updatePlaylist(id: number, data: {
-    name?: string
-    description?: string
-    genre?: string
-  }): Promise<Playlist> {
+  async updatePlaylist(
+    id: number,
+    data: {
+      name?: string
+      description?: string
+      genre?: string
+    },
+  ): Promise<Playlist> {
     return apiClient.put<Playlist>(`/api/v1/playlists/${id}`, data)
   }
 
@@ -154,28 +165,38 @@ export class PlaylistsService {
   /**
    * Add sound to playlist
    */
-  async addSoundToPlaylist(playlistId: number, soundId: number, position?: number): Promise<void> {
+  async addSoundToPlaylist(
+    playlistId: number,
+    soundId: number,
+    position?: number,
+  ): Promise<void> {
     await apiClient.post(`/api/v1/playlists/${playlistId}/sounds`, {
       sound_id: soundId,
-      position
+      position,
     })
   }
 
   /**
    * Remove sound from playlist
    */
-  async removeSoundFromPlaylist(playlistId: number, soundId: number): Promise<void> {
+  async removeSoundFromPlaylist(
+    playlistId: number,
+    soundId: number,
+  ): Promise<void> {
     await apiClient.delete(`/api/v1/playlists/${playlistId}/sounds/${soundId}`)
   }
 
   /**
    * Reorder sounds in playlist
    */
-  async reorderPlaylistSounds(playlistId: number, soundPositions: Array<[number, number]>): Promise<void> {
+  async reorderPlaylistSounds(
+    playlistId: number,
+    soundPositions: Array<[number, number]>,
+  ): Promise<void> {
     await apiClient.put(`/api/v1/playlists/${playlistId}/sounds/reorder`, {
-      sound_positions: soundPositions
+      sound_positions: soundPositions,
     })
   }
 }
 
-export const playlistsService = new PlaylistsService()
+export const playlistsService = new PlaylistsService()