fix(playback): pin queue playback to source server when browsing another library (#717)

* fix(playback): pin queue streams, cover art, and library links to queue server

When the active server changes while a queue from another server is playing,
keep streams and UI on queueServerId; switch back for artist/album links and
queue or player-bar context menus.

* fix(playback): switch to queue server when opening Now Playing

Ensure active server matches queueServerId before Subsonic fetches on the
Now Playing page, mobile player route, and queue info panel; scope caches
by server id.

* docs(credits): mention Now Playing in PR #717 contribution line

* fix(playback): route scrobble and queue sync to queue server

Address PR review: apiForServer for scrobble/now-playing/savePlayQueue,
clear queueServerId on server removal, mini-player queueServerId sync,
block cross-server enqueue with toast, and regression tests.

src/components/contextMenu/AlbumContextItems.tsx

@@ -22,10 +22,12 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
     orbitRole, entityRatingSupport, audiomuseNavidromeEnabled,
     applySongRating, applyAlbumRating, applyArtistRating,
     handleAction, startRadio, startInstantMix, downloadAlbum, copyShareLink, isStarred,
+    pinToPlaybackServer, navigateLibrary,
   } = props;
   const { t } = useTranslation();
   const auth = useAuthStore();
   const navigate = useNavigate();
+  const goLibrary = pinToPlaybackServer ? navigateLibrary : (path: string) => { navigate(path); };
 
   return (
     <>
@@ -34,7 +36,7 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
           const albumRatingDisabled = entityRatingSupport === 'track_only';
           return (
             <>
-              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${album.id}`))}>
+              <div className="context-menu-item" onClick={() => handleAction(() => goLibrary(`/album/${album.id}`))}>
                 <Play size={14} /> {t('contextMenu.openAlbum')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(async () => {
@@ -52,7 +54,7 @@ export default function AlbumContextItems(props: ContextMenuItemsProps) {
                 <ListPlus size={14} /> {t('contextMenu.enqueueAlbum')}
               </div>
               <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
+              <div className="context-menu-item" onClick={() => handleAction(() => goLibrary(`/artist/${album.artistId}`))}>
                 <User size={14} /> {t('contextMenu.goToArtist')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(() => {

src/components/contextMenu/QueueItemContextItems.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import { Play, Radio, Heart, ChevronRight, User, Disc3, ListMusic, Info, Sparkles, Star, Trash2, Share2 } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
 import { star, unstar } from '../../api/subsonicStarRating';
 import { lastfmLoveTrack, lastfmUnloveTrack } from '../../api/lastfm';
 import type { Track } from '../../store/playerStoreTypes';
@@ -21,10 +20,10 @@ export default function QueueItemContextItems(props: ContextMenuItemsProps) {
     orbitRole, entityRatingSupport, audiomuseNavidromeEnabled,
     applySongRating, applyAlbumRating, applyArtistRating,
     handleAction, startRadio, startInstantMix, downloadAlbum, copyShareLink, isStarred,
+    navigateLibrary,
   } = props;
   const { t } = useTranslation();
   const auth = useAuthStore();
-  const navigate = useNavigate();
 
   return (
     <>
@@ -54,12 +53,12 @@ export default function QueueItemContextItems(props: ContextMenuItemsProps) {
               </div>
               <div className="context-menu-divider" />
               {song.albumId && (
-                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
+                <div className="context-menu-item" onClick={() => handleAction(() => navigateLibrary(`/album/${song.albumId}`))}>
                   <Disc3 size={14} /> {t('contextMenu.openAlbum')}
                 </div>
               )}
               {song.artistId && (
-                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${song.artistId}`))}>
+                <div className="context-menu-item" onClick={() => handleAction(() => navigateLibrary(`/artist/${song.artistId}`))}>
                   <User size={14} /> {t('contextMenu.goToArtist')}
                 </div>
               )}

src/components/contextMenu/contextMenuItemTypes.ts

@@ -51,4 +51,7 @@ export interface ContextMenuItemsProps {
   downloadAlbum: (albumName: string, albumId: string) => Promise<void>;
   copyShareLink: (kind: EntityShareKind, id: string) => void;
   isStarred: (id: string, itemStarred?: string) => boolean;
+  /** When true, album/artist links switch to the queue server before routing. */
+  pinToPlaybackServer: boolean;
+  navigateLibrary: (path: string) => void | Promise<void>;
 }