feat: update loading skeleton and playlist handling for main playlists

src/pages/DashboardPage.tsx

@@ -158,7 +158,7 @@ export function DashboardPage() {
   }, [fetchTopSounds])
 
   if (loading) {
-    return <LoadingSkeleton title="Dashboard" description="Loading dashboard statistics..." />
+    return <LoadingSkeleton />
   }
 
   if (error || !soundboardStatistics || !trackStatistics) {

src/pages/PlaylistEditPage.tsx

@@ -282,6 +282,11 @@ export function PlaylistEditPage() {
   }
 
   const handleAddSoundToPlaylist = async (soundId: number) => {
+    if (playlist?.is_main) {
+      toast.error('Cannot add sounds to the main playlist')
+      return
+    }
+    
     try {
       // Add at the end - backend should handle position gaps automatically
       const position = sounds.length
@@ -328,6 +333,11 @@ export function PlaylistEditPage() {
   }
 
   const handleRemoveSound = async (soundId: number) => {
+    if (playlist?.is_main) {
+      toast.error('Cannot remove sounds from the main playlist')
+      return
+    }
+    
     try {
       // Find the sound being removed
       const removedSound = sounds.find(s => s.id === soundId)
@@ -417,6 +427,12 @@ export function PlaylistEditPage() {
     const activeId = active.id as string
     const overId = over.id as string
 
+    // Prevent adding sounds to main playlist
+    if (playlist?.is_main && activeId.startsWith('available-sound-')) {
+      toast.error('Cannot add sounds to the main playlist')
+      return
+    }
+
     // Handle adding sound from available list to playlist
     if (
       activeId.startsWith('available-sound-') &&
@@ -585,22 +601,24 @@ export function PlaylistEditPage() {
                   Playlist Sounds ({sounds.length})
                 </CardTitle>
                 <div className="flex items-center gap-2">
-                  <Button
-                    variant={isAddMode ? 'default' : 'outline'}
-                    size="sm"
-                    onClick={toggleAddMode}
-                    title={
-                      isAddMode
-                        ? 'Exit add mode'
-                        : 'Enter add mode to add EXT sounds'
-                    }
-                  >
-                    {isAddMode ? (
-                      <Minus className="h-4 w-4" />
-                    ) : (
-                      <Plus className="h-4 w-4" />
-                    )}
-                  </Button>
+                  {!playlist.is_main && (
+                    <Button
+                      variant={isAddMode ? 'default' : 'outline'}
+                      size="sm"
+                      onClick={toggleAddMode}
+                      title={
+                        isAddMode
+                          ? 'Exit add mode'
+                          : 'Enter add mode to add EXT sounds'
+                      }
+                    >
+                      {isAddMode ? (
+                        <Minus className="h-4 w-4" />
+                      ) : (
+                        <Plus className="h-4 w-4" />
+                      )}
+                    </Button>
+                  )}
                   <Button
                     variant="outline"
                     size="sm"
@@ -621,6 +639,60 @@ export function PlaylistEditPage() {
                     <Skeleton key={i} className="h-12 w-full" />
                   ))}
                 </div>
+              ) : playlist.is_main ? (
+                // Main playlist: Only show sounds in read-only mode with reordering
+                sounds.length === 0 ? (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Music className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                    <p>No sounds in main playlist</p>
+                    <p className="text-xs mt-1">
+                      Main playlist sounds are managed automatically
+                    </p>
+                  </div>
+                ) : (
+                  <div className="rounded-md border">
+                    <SortableContext
+                      items={sounds.map(sound => `table-sound-${sound.id}`)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="w-16 text-center">
+                              <div className="flex items-center justify-center gap-1">
+                                <div className="flex flex-col">
+                                  <div className="w-1 h-1 bg-muted-foreground/40 rounded-full"></div>
+                                  <div className="w-1 h-1 bg-muted-foreground/40 rounded-full mt-0.5"></div>
+                                  <div className="w-1 h-1 bg-muted-foreground/40 rounded-full mt-0.5"></div>
+                                </div>
+                                <span className="text-xs">#</span>
+                              </div>
+                            </TableHead>
+                            <TableHead>Name</TableHead>
+                            <TableHead>Duration</TableHead>
+                            <TableHead>Type</TableHead>
+                            <TableHead>Plays</TableHead>
+                            <TableHead className="w-32">Actions</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {sounds.map((sound, index) => (
+                            <SortableTableRow
+                              key={sound.id}
+                              sound={sound}
+                              index={index}
+                              onMoveSoundUp={handleMoveSoundUp}
+                              onMoveSoundDown={handleMoveSoundDown}
+                              onRemoveSound={undefined} // Disable remove for main playlist
+                              totalSounds={sounds.length}
+                              isMainPlaylist={true}
+                            />
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </SortableContext>
+                  </div>
+                )
               ) : isAddMode ? (
                 // Add Mode: Split layout with simplified playlist and available sounds
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -785,6 +857,7 @@ export function PlaylistEditPage() {
                               onMoveSoundDown={handleMoveSoundDown}
                               onRemoveSound={handleRemoveSound}
                               totalSounds={sounds.length}
+                              isMainPlaylist={false}
                             />
                           ))}
                         </TableBody>

src/pages/SoundsPage.tsx

@@ -141,7 +141,8 @@ export function SoundsPage() {
 
   // Listen for sound_played events and update play_count
   useEffect(() => {
-    const handleSoundPlayed = (eventData: SoundPlayedEventData) => {
+    const handleSoundPlayed = (...args: unknown[]) => {
+      const eventData = args[0] as SoundPlayedEventData
       setSounds(prevSounds =>
         prevSounds.map(sound =>
           sound.id === eventData.sound_id