feat: enhance PlaylistEditPage with edit mode functionality; add cancel and save options for playlist details

src/pages/PlaylistEditPage.tsx

@@ -10,7 +10,7 @@ import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { AlertCircle, Save, ArrowLeft, Music, Clock, ChevronUp, ChevronDown, GripVertical, Trash2, RefreshCw } from 'lucide-react'
+import { AlertCircle, Save, Music, Clock, ChevronUp, ChevronDown, Trash2, RefreshCw, Edit, X, ArrowLeft } from 'lucide-react'
 import { toast } from 'sonner'
 import { formatDuration } from '@/utils/format-duration'
 
@@ -25,6 +25,7 @@ export function PlaylistEditPage() {
   const [soundsLoading, setSoundsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
+  const [isEditMode, setIsEditMode] = useState(false)
   
   // Form state
   const [formData, setFormData] = useState({
@@ -109,8 +110,9 @@ export function PlaylistEditPage() {
       
       toast.success('Playlist updated successfully')
       
-      // Refresh playlist data
+      // Refresh playlist data and exit edit mode
       await fetchPlaylist()
+      setIsEditMode(false)
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to update playlist'
       toast.error(errorMessage)
@@ -119,6 +121,18 @@ export function PlaylistEditPage() {
     }
   }
 
+  const handleCancelEdit = () => {
+    if (playlist) {
+      // Reset form data to original values
+      setFormData({
+        name: playlist.name,
+        description: playlist.description || '',
+        genre: playlist.genre || ''
+      })
+      setIsEditMode(false)
+    }
+  }
+
   const handleSetCurrent = async () => {
     if (!playlist) return
 
@@ -251,16 +265,24 @@ export function PlaylistEditPage() {
       <div className="flex-1 rounded-xl bg-muted/50 p-4">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate('/playlists')}
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
             <div>
-              <h1 className="text-2xl font-bold">Edit Playlist</h1>
+              <h1 className="text-2xl font-bold">{playlist.name}</h1>
               <p className="text-muted-foreground">
-                Modify playlist details and manage sounds
+                View and manage your playlist
               </p>
             </div>
           </div>
           
           <div className="flex items-center gap-2">
-            {!playlist.is_current && (
+            {!playlist.is_current && !isEditMode && (
               <Button
                 variant="outline"
                 onClick={handleSetCurrent}
@@ -275,7 +297,7 @@ export function PlaylistEditPage() {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Playlist Details Form */}
+          {/* Playlist Details */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
@@ -284,45 +306,96 @@ export function PlaylistEditPage() {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="name">Name *</Label>
-                <Input
-                  id="name"
-                  value={formData.name}
-                  onChange={(e) => handleInputChange('name', e.target.value)}
-                  placeholder="Playlist name"
-                />
-              </div>
+              {isEditMode ? (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="name">Name *</Label>
+                    <Input
+                      id="name"
+                      value={formData.name}
+                      onChange={(e) => handleInputChange('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) => handleInputChange('description', e.target.value)}
-                  placeholder="Playlist description"
-                  className="min-h-[100px]"
-                />
-              </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="description">Description</Label>
+                    <Textarea
+                      id="description"
+                      value={formData.description}
+                      onChange={(e) => handleInputChange('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) => handleInputChange('genre', e.target.value)}
-                  placeholder="Electronic, Rock, Comedy, etc."
-                />
-              </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="genre">Genre</Label>
+                    <Input
+                      id="genre"
+                      value={formData.genre}
+                      onChange={(e) => handleInputChange('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>
                     
-              <div className="flex justify-end gap-2 pt-4">
-                <Button
-                  onClick={handleSave}
-                  disabled={!hasChanges || saving}
-                >
-                  <Save className="h-4 w-4 mr-2" />
-                  {saving ? 'Saving...' : 'Save Changes'}
-                </Button>
+                    {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={handleCancelEdit}
+                    >
+                      <X className="h-4 w-4 mr-2" />
+                      Cancel
+                    </Button>
+                    <Button
+                      onClick={handleSave}
+                      disabled={!hasChanges || saving}
+                    >
+                      <Save className="h-4 w-4 mr-2" />
+                      {saving ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                ) : (
+                  <Button
+                    onClick={() => setIsEditMode(true)}
+                    className="w-full"
+                  >
+                    <Edit className="h-4 w-4 mr-2" />
+                    Edit
+                  </Button>
+                )}
               </div>
             </CardContent>
           </Card>