Update song

frontend/src/components/artist/ArtistDetailPage.tsx

@@ -1,12 +1,12 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { artistApi, autoDownloadApi } from '@/api/client'
 import { Music, ArtistInfo, ArtistSongsResponse, OnlineSong } from '@/types'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { Button } from '@/components/ui/button'
 import { ArrowLeft, Play, Loader2, Music2, RefreshCw, Download } from 'lucide-react'
 import { formatDuration } from '@/lib/utils'
 import { toast } from 'sonner'
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -22,11 +22,14 @@ interface ArtistDetailProps {
 
 export default function ArtistDetailPage({ onPlayMusic }: ArtistDetailProps) {
   const { artistName } = useParams<{ artistName: string }>()
+  const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const decodedArtistName = decodeURIComponent(artistName || '')
   const [autoDownloadOpen, setAutoDownloadOpen] = useState(false)
   const [selectedSong, setSelectedSong] = useState<OnlineSong | null>(null)
+  const highlightSongId = searchParams.get('highlight') ? Number(searchParams.get('highlight')) : null
+  const songRefs = useRef<{ [key: number]: HTMLDivElement | null }>({})
 
   const { data: artistInfo } = useQuery({
     queryKey: ['artist-info', decodedArtistName],
@@ -75,6 +78,18 @@ export default function ArtistDetailPage({ onPlayMusic }: ArtistDetailProps) {
     },
   })
 
+  // Scroll to highlighted song
+  useEffect(() => {
+    if (highlightSongId && songRefs.current[highlightSongId]) {
+      setTimeout(() => {
+        songRefs.current[highlightSongId]?.scrollIntoView({ 
+          behavior: 'smooth', 
+          block: 'center' 
+        })
+      }, 300)
+    }
+  }, [highlightSongId, allSongs])
+
   const handlePlayAll = () => {
     if (allSongs?.local_songs && allSongs.local_songs.length > 0) {
       onPlayMusic(allSongs.local_songs[0], allSongs.local_songs)
@@ -189,7 +204,10 @@ export default function ArtistDetailPage({ onPlayMusic }: ArtistDetailProps) {
               {allSongs.local_songs.map((song, index) => (
                 <div
                   key={song.id}
-                  className="flex items-center gap-4 p-3 rounded-lg hover:bg-accent cursor-pointer group"
+                  ref={(el) => { songRefs.current[song.id] = el }}
+                  className={`flex items-center gap-4 p-3 rounded-lg hover:bg-accent cursor-pointer group transition-colors ${
+                    highlightSongId === song.id ? 'bg-accent/70 ring-2 ring-primary' : ''
+                  }`}
                   onClick={() => onPlayMusic(song, allSongs.local_songs)}
                 >
                   <div className="w-8 text-center text-muted-foreground group-hover:hidden">

frontend/src/components/player/Player.tsx

@@ -280,13 +280,17 @@ export default function Player({
               <div className="flex-1 min-w-0">
                 <h3 
                   className="font-semibold truncate cursor-pointer hover:underline"
-                  onClick={() => setShowFullScreen(true)}
+                  onClick={() => {
+                    if (currentMusic.artist && currentMusic.artist !== 'Unknown') {
+                      navigate(`/artists/${encodeURIComponent(currentMusic.artist)}?highlight=${currentMusic.id}`)
+                    }
+                  }}
                 >
                   {currentMusic.title}
                 </h3>
                 {currentMusic.artist && currentMusic.artist !== 'Unknown' ? (
                   <button
-                    onClick={() => navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}`)}
+                    onClick={() => navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}?highlight=${currentMusic.id}`)}
                     className="text-sm text-muted-foreground truncate hover:underline text-left"
                   >
                     {currentMusic.artist}
@@ -463,7 +467,7 @@ export default function Player({
           onShare={handleShare}
           onNavigateToArtist={() => {
             setShowFullScreen(false)
-            navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}`)
+            navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}?highlight=${currentMusic.id}`)
           }}
           showLyrics={showLyrics}
           onToggleLyrics={() => setShowLyrics(!showLyrics)}