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.
2025-08-15 13:02:35 +02:00
parent 1e76516cfc
commit 83f400acbb
9 changed files with 671 additions and 561 deletions
--- a/src/components/playlists/playlist-edit/PlaylistDetailsCard.tsx
+++ b/src/components/playlists/playlist-edit/PlaylistDetailsCard.tsx
@@ -0,0 +1,147 @@
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import type { Playlist } from '@/lib/api/services/playlists'
+import { Edit, Music, Save, X } from 'lucide-react'
+
+interface PlaylistDetailsCardProps {
+  playlist: Playlist
+  isEditMode: boolean
+  formData: {
+    name: string
+    description: string
+    genre: string
+  }
+  hasChanges: boolean
+  saving: boolean
+  onInputChange: (field: string, value: string) => void
+  onSave: () => void
+  onCancelEdit: () => void
+  onStartEdit: () => void
+}
+
+export function PlaylistDetailsCard({
+  playlist,
+  isEditMode,
+  formData,
+  hasChanges,
+  saving,
+  onInputChange,
+  onSave,
+  onCancelEdit,
+  onStartEdit,
+}: PlaylistDetailsCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Music className="h-5 w-5" />
+          Playlist Details
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isEditMode ? (
+          <>
+            <div className="space-y-2">
+              <Label htmlFor="name">Name *</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={e => onInputChange('name', e.target.value)}
+                placeholder="Playlist name"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={e => onInputChange('description', e.target.value)}
+                placeholder="Playlist description"
+                className="min-h-[100px]"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="genre">Genre</Label>
+              <Input
+                id="genre"
+                value={formData.genre}
+                onChange={e => onInputChange('genre', e.target.value)}
+                placeholder="Electronic, Rock, Comedy, etc."
+              />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="space-y-3">
+              <div>
+                <Label className="text-sm font-medium text-muted-foreground">
+                  Name
+                </Label>
+                <p className="text-lg font-semibold">{playlist.name}</p>
+              </div>
+
+              {playlist.description && (
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">
+                    Description
+                  </Label>
+                  <p className="text-sm">{playlist.description}</p>
+                </div>
+              )}
+
+              {playlist.genre && (
+                <div>
+                  <Label className="text-sm font-medium text-muted-foreground">
+                    Genre
+                  </Label>
+                  <Badge variant="secondary" className="mt-1">
+                    {playlist.genre}
+                  </Badge>
+                </div>
+              )}
+
+              {!playlist.description && !playlist.genre && (
+                <p className="text-sm text-muted-foreground italic">
+                  No additional details provided
+                </p>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* Edit/Save/Cancel buttons */}
+        <div className="pt-4 border-t">
+          {isEditMode ? (
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={onCancelEdit}>
+                <X className="h-4 w-4 mr-2" />
+                Cancel
+              </Button>
+              <Button
+                onClick={onSave}
+                disabled={!hasChanges || saving}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                {saving ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              onClick={onStartEdit}
+              className="w-full"
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}