Split software arch desc for easier manintenance. Many fixes related to next video playing and remote playback

src/lib/components/library/TrackList.svelte

@@ -8,6 +8,7 @@
   import type { MediaItem } from "$lib/api/types";
   import DownloadButton from "./DownloadButton.svelte";
   import Portal from "$lib/components/Portal.svelte";
+  import AddToPlaylistModal from "$lib/components/playlist/AddToPlaylistModal.svelte";
   import { calculateMenuPosition, type MenuPosition } from "$lib/utils/menuPosition";
   import { formatDuration } from "$lib/utils/duration";
 
@@ -41,6 +42,7 @@
   let isPlayingTrack = $state<string | null>(null);
   let openMenuId = $state<string | null>(null);
   let menuPosition = $state<MenuPosition | null>(null);
+  let addToPlaylistTrackId = $state<string | null>(null);
 
   // Track which track is currently playing (from player store)
   const currentlyPlayingId = $derived($currentMedia?.id ?? null);
@@ -494,10 +496,31 @@
           </svg>
           Add to Queue
         </button>
+        <button
+          type="button"
+          onclick={(e) => {
+            e.stopPropagation();
+            addToPlaylistTrackId = selectedTrack.id;
+            closeMenu();
+          }}
+          class="w-full px-4 py-2 text-left text-sm text-white hover:bg-white/10 transition-colors flex items-center gap-2"
+        >
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>
+          </svg>
+          Add to Playlist
+        </button>
       </div>
     </Portal>
   {/if}
 {/if}
 
+<!-- Add to Playlist Modal -->
+<AddToPlaylistModal
+  isOpen={addToPlaylistTrackId !== null}
+  onClose={() => addToPlaylistTrackId = null}
+  trackIds={addToPlaylistTrackId ? [addToPlaylistTrackId] : []}
+/>
+
 <!-- Click outside to close menu -->
 <svelte:window onclick={closeMenu} />