fix(ui): update audio title link to include playlist support (#4175)

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/audioplayer/AudioTitle.jsx

@@ -38,16 +38,14 @@ const AudioTitle = React.memo(({ audioInfo, gainInfo, isMobile }) => {
   const subtitle = song.tags?.['subtitle']
   const title = song.title + (subtitle ? ` (${subtitle})` : '')
 
+  const linkTo = audioInfo.isRadio
+    ? `/radio/${audioInfo.trackId}/show`
+    : song.playlistId
+      ? `/playlist/${song.playlistId}/show`
+      : `/album/${song.albumId}/show`
+
   return (
-    <Link
-      to={
-        audioInfo.isRadio
-          ? `/radio/${audioInfo.trackId}/show`
-          : `/album/${song.albumId}/show`
-      }
-      className={className}
-      ref={dragSongRef}
-    >
+    <Link to={linkTo} className={className} ref={dragSongRef}>
       <span>
         <span className={clsx(classes.songTitle, 'songTitle')}>{title}</span>
         {isDesktop && (

ui/src/audioplayer/AudioTitle.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import AudioTitle from './AudioTitle'
+
+vi.mock('@material-ui/core', async () => {
+  const actual = await import('@material-ui/core')
+  return {
+    ...actual,
+    useMediaQuery: vi.fn(),
+  }
+})
+
+vi.mock('react-router-dom', () => ({
+  Link: ({ to, children, ...props }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('react-dnd', () => ({
+  useDrag: vi.fn(() => [null, () => {}]),
+}))
+
+describe('<AudioTitle />', () => {
+  const baseSong = {
+    id: 'song-1',
+    albumId: 'album-1',
+    playlistId: 'playlist-1',
+    title: 'Test Song',
+    artist: 'Artist',
+    album: 'Album',
+    year: '2020',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('links to playlist when playlistId is provided', () => {
+    const audioInfo = { trackId: 'track-1', song: baseSong }
+    render(<AudioTitle audioInfo={audioInfo} gainInfo={{}} isMobile={false} />)
+    const link = screen.getByRole('link')
+    expect(link.getAttribute('href')).toBe('/playlist/playlist-1/show')
+  })
+
+  it('falls back to album link when no playlistId', () => {
+    const audioInfo = {
+      trackId: 'track-1',
+      song: { ...baseSong, playlistId: undefined },
+    }
+    render(<AudioTitle audioInfo={audioInfo} gainInfo={{}} isMobile={false} />)
+    const link = screen.getByRole('link')
+    expect(link.getAttribute('href')).toBe('/album/album-1/show')
+  })
+})