feat: Refactor playlist edit components for improved structure and functionality

- Added AvailableSound component for displaying and adding sounds to playlists.
- Introduced DragOverlayComponents for drag-and-drop functionality with inline previews and drop areas.
- Created PlaylistDetailsCard for editing playlist details with save and cancel options.
- Implemented PlaylistEditHeader for displaying playlist title and current status.
- Added PlaylistStatsCard to show statistics about the playlist.
- Refactored PlaylistEditPage to utilize new components, enhancing readability and maintainability.
- Introduced loading and error states with PlaylistEditLoading and PlaylistEditError components.
- Updated SortableTableRow and SimpleSortableRow for better drag-and-drop handling.

src/components/playlists/playlist-edit/DragOverlayComponents.tsx

@@ -0,0 +1,77 @@
+import type { PlaylistSound } from '@/lib/api/services/playlists'
+import type { Sound } from '@/lib/api/services/sounds'
+import { useDroppable } from '@dnd-kit/core'
+import { Music } from 'lucide-react'
+
+// Simple drop area for the end of the playlist
+export function EndDropArea() {
+  const { setNodeRef } = useDroppable({
+    id: 'playlist-end',
+    data: { type: 'playlist-end' },
+  })
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="h-8 w-full" // Invisible drop area
+    />
+  )
+}
+
+// Inline preview component that shows where the sound will be dropped
+interface InlinePreviewProps {
+  sound: Sound | PlaylistSound
+  position: number
+}
+
+export function InlinePreview({ sound, position }: InlinePreviewProps) {
+  return (
+    <div className="flex items-center gap-3 p-3 border-2 border-dashed border-primary rounded-lg bg-primary/10 animate-pulse">
+      <span className="text-sm font-mono text-primary min-w-[1.5rem] text-center flex-shrink-0">
+        {position + 1}
+      </span>
+
+      <Music className="h-4 w-4 text-primary flex-shrink-0" />
+
+      <div className="min-w-0 flex-1">
+        <div className="font-medium truncate text-primary">{sound.name}</div>
+      </div>
+    </div>
+  )
+}
+
+// Drag overlay component that shows the dragged item
+interface DragOverlayContentProps {
+  sound: Sound | PlaylistSound
+  position?: number
+}
+
+export function DragOverlayContent({ sound, position }: DragOverlayContentProps) {
+  // If position is provided, show as current playlist style
+  if (position !== undefined) {
+    return (
+      <div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
+        <span className="text-sm font-mono text-muted-foreground min-w-[1.5rem] text-center flex-shrink-0">
+          {position + 1}
+        </span>
+
+        <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+
+        <div className="min-w-0 flex-1">
+          <div className="font-medium truncate">{sound.name}</div>
+        </div>
+      </div>
+    )
+  }
+
+  // Default available sound style
+  return (
+    <div className="flex items-center gap-3 p-3 border rounded-lg bg-background shadow-lg">
+      <Music className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+
+      <div className="min-w-0 flex-1">
+        <div className="font-medium truncate">{sound.name}</div>
+      </div>
+    </div>
+  )
+}