feat: update loading skeleton and playlist handling for main playlists

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

@@ -117,7 +117,13 @@ export function PlaylistDetailsCard({
 
         {/* Edit/Save/Cancel buttons */}
         <div className="pt-4 border-t">
-          {isEditMode ? (
+          {playlist.is_main ? (
+            <div className="text-center">
+              <p className="text-sm text-muted-foreground">
+                Main playlist details cannot be edited
+              </p>
+            </div>
+          ) : isEditMode ? (
             <div className="flex justify-end gap-2">
               <Button variant="outline" onClick={onCancelEdit}>
                 <X className="h-4 w-4 mr-2" />

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

@@ -7,13 +7,15 @@ import { Music, X } from 'lucide-react'
 interface SimpleSortableRowProps {
   sound: PlaylistSound
   index: number
-  onRemoveSound: (soundId: number) => void
+  onRemoveSound?: (soundId: number) => void
+  isMainPlaylist?: boolean
 }
 
 export function SimpleSortableRow({
   sound,
   index,
   onRemoveSound,
+  isMainPlaylist = false,
 }: SimpleSortableRowProps) {
   const {
     attributes,
@@ -48,18 +50,20 @@ export function SimpleSortableRow({
         <div className="font-medium truncate">{sound.name}</div>
       </div>
 
-      <Button
-        size="sm"
-        variant="ghost"
-        onClick={e => {
-          e.stopPropagation()
-          onRemoveSound(sound.id)
-        }}
-        className="h-4 w-4 p-0 text-destructive hover:text-destructive flex-shrink-0"
-        title="Remove from playlist"
-      >
-        <X className="h-3 w-3" />
-      </Button>
+      {onRemoveSound && !isMainPlaylist && (
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={e => {
+            e.stopPropagation()
+            onRemoveSound(sound.id)
+          }}
+          className="h-4 w-4 p-0 text-destructive hover:text-destructive flex-shrink-0"
+          title="Remove from playlist"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      )}
     </div>
   )
 }

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

@@ -12,8 +12,9 @@ interface SortableTableRowProps {
   index: number
   onMoveSoundUp: (index: number) => void
   onMoveSoundDown: (index: number) => void
-  onRemoveSound: (soundId: number) => void
+  onRemoveSound?: (soundId: number) => void
   totalSounds: number
+  isMainPlaylist?: boolean
 }
 
 export function SortableTableRow({
@@ -23,6 +24,7 @@ export function SortableTableRow({
   onMoveSoundDown,
   onRemoveSound,
   totalSounds,
+  isMainPlaylist = false,
 }: SortableTableRowProps) {
   const {
     attributes,
@@ -97,15 +99,17 @@ export function SortableTableRow({
           >
             <ChevronDown className="h-4 w-4" />
           </Button>
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => onRemoveSound(sound.id)}
-            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-            title="Remove from playlist"
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
+          {onRemoveSound && !isMainPlaylist && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onRemoveSound(sound.id)}
+              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              title="Remove from playlist"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
         </div>
       </TableCell>
     </TableRow>