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

@@ -0,0 +1,74 @@
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
+import { formatDuration } from '@/utils/format-duration'
+import { Clock } from 'lucide-react'
+
+interface PlaylistStatsCardProps {
+  playlist: Playlist
+  sounds: PlaylistSound[]
+}
+
+export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps) {
+  const totalDuration = sounds.reduce(
+    (total, sound) => total + (sound.duration || 0),
+    0
+  )
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Clock className="h-5 w-5" />
+          Playlist Statistics
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="text-center p-3 bg-muted rounded-lg">
+            <div className="text-2xl font-bold">{sounds.length}</div>
+            <div className="text-sm text-muted-foreground">Tracks</div>
+          </div>
+          <div className="text-center p-3 bg-muted rounded-lg">
+            <div className="text-2xl font-bold">
+              {formatDuration(totalDuration)}
+            </div>
+            <div className="text-sm text-muted-foreground">Duration</div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between text-sm">
+            <span>Created:</span>
+            <span>
+              {new Date(playlist.created_at).toLocaleDateString()}
+            </span>
+          </div>
+          {playlist.updated_at && (
+            <div className="flex justify-between text-sm">
+              <span>Updated:</span>
+              <span>
+                {new Date(playlist.updated_at).toLocaleDateString()}
+              </span>
+            </div>
+          )}
+          <div className="flex justify-between text-sm">
+            <span>Status:</span>
+            <div className="flex gap-1">
+              {playlist.is_main && (
+                <Badge variant="outline" className="text-xs">
+                  Main
+                </Badge>
+              )}
+              {playlist.is_current && (
+                <Badge variant="default" className="text-xs">
+                  Current
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}