feat: enhance artist navigation and display in details panel with support for multiple artists

AD-Archer · AD-Archer · commit 01a31e4393bc · 2026-04-02T09:52:54.000-04:00
diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -1103,6 +1103,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1342,6 +1346,9 @@
       border-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);
     }
   }
+  .border-t-emerald-500 {
+    border-top-color: var(--color-emerald-500);
+  }
   .bg-\[\#1f2a44\] {
     background-color: #1f2a44;
   }
diff --git a/src/components/song_details/details_panel.rs b/src/components/song_details/details_panel.rs
@@ -77,24 +77,94 @@ fn DetailsPanel(props: DetailsPanelProps) -> Element {
         .clone()
         .filter(|value| !value.trim().is_empty())
         .unwrap_or_else(|| "Unknown Artist".to_string());
+    let song_artist_names = parse_artist_names(
+        props
+            .song
+            .artist
+            .as_deref()
+            .unwrap_or_default(),
+    );
+    let direct_song_artist_id = if song_artist_names.len() == 1 {
+        props.song.artist_id.clone()
+    } else {
+        None
+    };
     let song_album = props
         .song
         .album
         .clone()
         .filter(|value| !value.trim().is_empty())
         .unwrap_or_else(|| "Unknown Album".to_string());
+    let panel_song_id = props.song.id.clone();
 
-    let on_open_artist = {
-        let mut controller = controller.clone();
+    let make_on_open_artist_named = {
+        let servers = servers.clone();
+        let controller = controller.clone();
         let navigation = navigation.clone();
-        let artist_id = props.song.artist_id.clone();
         let server_id = props.song.server_id.clone();
-        move |_| {
-            if let Some(artist_id) = artist_id.clone() {
-                controller.close();
-                navigation.navigate_to(AppView::ArtistDetailView {
-                    artist_id,
-                    server_id: server_id.clone(),
+        let direct_song_artist_id = direct_song_artist_id.clone();
+        let panel_song_id = panel_song_id.clone();
+        move |artist_name: String| {
+            let servers = servers.clone();
+            let mut controller = controller.clone();
+            let navigation = navigation.clone();
+            let server_id = server_id.clone();
+            let direct_song_artist_id = direct_song_artist_id.clone();
+            let panel_song_id = panel_song_id.clone();
+            move |evt: MouseEvent| {
+                evt.stop_propagation();
+                eprintln!(
+                    "[artist-nav.details.click] song_id={} server_id={} artist_name={}",
+                    panel_song_id, server_id, artist_name
+                );
+                if let Some(artist_id) = direct_song_artist_id.clone() {
+                    eprintln!(
+                        "[artist-nav.details.direct] song_id={} artist_id={} server_id={}",
+                        panel_song_id, artist_id, server_id
+                    );
+                    controller.close();
+                    navigation.navigate_to(AppView::ArtistDetailView {
+                        artist_id,
+                        server_id: server_id.clone(),
+                    });
+                    return;
+                }
+
+                let server = servers().iter().find(|entry| entry.id == server_id).cloned();
+                let Some(server) = server else {
+                    eprintln!(
+                        "[artist-nav.details.resolve] missing server for song_id={} server_id={}",
+                        panel_song_id, server_id
+                    );
+                    return;
+                };
+
+                let navigation = navigation.clone();
+                let server_id = server_id.clone();
+                let artist_name = artist_name.clone();
+                let mut controller = controller.clone();
+                let song_id = panel_song_id.clone();
+                spawn(async move {
+                    eprintln!(
+                        "[artist-nav.details.resolve.start] song_id={} query='{}' server_id={}",
+                        song_id, artist_name, server_id
+                    );
+                    if let Some(artist_id) = resolve_artist_id_for_name(server, artist_name).await {
+                        eprintln!(
+                            "[artist-nav.details.resolve.ok] song_id={} artist_id={} server_id={}",
+                            song_id, artist_id, server_id
+                        );
+                        controller.close();
+                        navigation.navigate_to(AppView::ArtistDetailView {
+                            artist_id,
+                            server_id,
+                        });
+                    } else {
+                        eprintln!(
+                            "[artist-nav.details.resolve.miss] song_id={} server_id={}",
+                            song_id, server_id
+                        );
+                    }
                 });
             }
         }
diff --git a/src/components/song_details/details_panel_view.rs b/src/components/song_details/details_panel_view.rs
@@ -53,11 +53,19 @@
                 h3 { class: "text-xl md:text-2xl font-semibold text-white leading-tight break-words", "{props.song.title}" }
                 div { class: "space-y-1 pt-1",
                     p { class: "text-[10px] uppercase tracking-[0.18em] text-zinc-500", "Artist" }
-                    if props.song.artist_id.is_some() {
-                        button {
-                            class: "text-sm text-emerald-300 hover:text-emerald-200 transition-colors whitespace-normal break-words leading-snug",
-                            onclick: on_open_artist,
-                            "{song_artist}"
+                    if !song_artist_names.is_empty() {
+                        div { class: "inline-flex flex-wrap items-center justify-center gap-1",
+                            for (index, artist_name) in song_artist_names.iter().enumerate() {
+                                button {
+                                    key: "song-details-artist-{props.song.id}-{artist_name}-{index}",
+                                    class: "text-sm text-emerald-300 hover:text-emerald-200 transition-colors whitespace-normal break-words leading-snug",
+                                    onclick: make_on_open_artist_named.clone()(artist_name.clone()),
+                                    "{artist_name}"
+                                }
+                                if index + 1 < song_artist_names.len() {
+                                    span { class: "text-zinc-500", "•" }
+                                }
+                            }
                         }
                     } else {
                         p { class: "text-sm text-zinc-300 whitespace-normal break-words leading-snug", "{song_artist}" }
diff --git a/src/components/song_details/mod.rs b/src/components/song_details/mod.rs
@@ -5,6 +5,7 @@ use crate::api::{
     search_lyrics_candidates, LyricLine, LyricsQuery, LyricsResult, LyricsSearchCandidate,
     NavidromeClient, ServerConfig, Song,
 };
+use crate::components::views::artist_links::{parse_artist_names, resolve_artist_id_for_name};
 use crate::components::{
     apply_collection_shuffle_mode, generate_queue_extension_from_seed,
     queue_should_generate_similar_on_end, seek_to, spawn_shuffle_queue, AddIntent,
diff --git a/src/components/views/artist_detail.rs b/src/components/views/artist_detail.rs
@@ -39,38 +39,110 @@ pub fn ArtistDetailView(artist_id: String, server_id: String) -> Element {
     let mut now_playing = use_context::<Signal<Option<Song>>>();
     let mut is_playing = use_context::<crate::components::IsPlayingSignal>().0;
     let shuffle_enabled = use_context::<crate::components::ShuffleEnabledSignal>().0;
-    let visible_album_count = use_signal(|| ARTIST_ALBUM_BATCH_SIZE);
+    let mut visible_album_count = use_signal(|| ARTIST_ALBUM_BATCH_SIZE);
+    let mut current_artist_id = use_signal(|| artist_id.clone());
+    let mut current_server_id = use_signal(|| server_id.clone());
 
-    let artist_server = servers().into_iter().find(|s| s.id == server_id);
-    let artist_server_for_artist = artist_server.clone();
-    let artist_server_for_top = artist_server.clone();
+    use_effect({
+        let artist_id = artist_id.clone();
+        let server_id = server_id.clone();
+        move || {
+            if current_artist_id() != artist_id {
+                eprintln!(
+                    "[artist-detail.route] artist_id change {} -> {}",
+                    current_artist_id(),
+                    artist_id
+                );
+                current_artist_id.set(artist_id.clone());
+                visible_album_count.set(ARTIST_ALBUM_BATCH_SIZE);
+            }
+            if current_server_id() != server_id {
+                eprintln!(
+                    "[artist-detail.route] server_id change {} -> {}",
+                    current_server_id(),
+                    server_id
+                );
+                current_server_id.set(server_id.clone());
+                visible_album_count.set(ARTIST_ALBUM_BATCH_SIZE);
+            }
+        }
+    });
+
+    let artist_server = servers().into_iter().find(|s| s.id == current_server_id());
 
     let artist_data = use_resource(move || {
-        let server = artist_server_for_artist.clone();
-        let artist_id = artist_id.clone();
+        let server_id = current_server_id();
+        let artist_id = current_artist_id();
+        let server = servers().into_iter().find(|s| s.id == server_id);
         async move {
             if let Some(server) = server {
+                eprintln!(
+                    "[artist-detail.fetch.start] artist_id={} server_id={}",
+                    artist_id, server_id
+                );
                 let client = NavidromeClient::new(server);
-                client.get_artist(&artist_id).await.ok()
+                match client.get_artist(&artist_id).await {
+                    Ok((artist, albums)) => {
+                        eprintln!(
+                            "[artist-detail.fetch.ok] requested_artist_id={} returned_artist_id={} server_id={} albums={}",
+                            artist_id,
+                            artist.id,
+                            server_id,
+                            albums.len()
+                        );
+                        Some((artist, albums))
+                    }
+                    Err(err) => {
+                        eprintln!(
+                            "[artist-detail.fetch.err] artist_id={} server_id={} err={}",
+                            artist_id, server_id, err
+                        );
+                        None
+                    }
+                }
             } else {
+                eprintln!(
+                    "[artist-detail.fetch.skip] missing server artist_id={} server_id={}",
+                    artist_id, server_id
+                );
                 None
             }
         }
     });
 
     let top_songs_data = use_resource({
-        let server = artist_server_for_top.clone();
         let artist_data = artist_data.clone();
         move || {
-            let server = server.clone();
+            let server_id = current_server_id();
+            let server = servers().into_iter().find(|s| s.id == server_id);
             let artist_name = artist_data()
                 .and_then(|value| value.map(|(artist, _)| artist.name.clone()))
                 .filter(|name| !name.is_empty());
             async move {
                 match (server, artist_name) {
                     (Some(server), Some(artist_name)) => {
+                        eprintln!(
+                            "[artist-detail.top.start] artist_name='{}' server_id={}",
+                            artist_name, server_id
+                        );
                         let client = NavidromeClient::new(server);
-                        client.get_top_songs(&artist_name, 20).await.ok()
+                        match client.get_top_songs(&artist_name, 20).await {
+                            Ok(songs) => {
+                                eprintln!(
+                                    "[artist-detail.top.ok] artist_name='{}' songs={}",
+                                    artist_name,
+                                    songs.len()
+                                );
+                                Some(songs)
+                            }
+                            Err(err) => {
+                                eprintln!(
+                                    "[artist-detail.top.err] artist_name='{}' err={}",
+                                    artist_name, err
+                                );
+                                None
+                            }
+                        }
                     }
                     _ => None,
                 }
@@ -151,42 +223,61 @@ pub fn ArtistDetailView(artist_id: String, server_id: String) -> Element {
         {
             match artist_data() {
                 Some(Some((artist, albums))) => {
-                    let top_songs = top_songs_data().flatten().unwrap_or_default();
-                    let cover_url = artist_server.as_ref().and_then(|server| {
-                        let client = NavidromeClient::new(server.clone());
-                        artist
-                            .cover_art
-                            .as_ref()
-                            .map(|ca| client.get_cover_art_url(ca, 500))
-                    });
-
-                    let total_albums = albums.len();
-                    let total_songs: u32 = albums.iter().map(|a| a.song_count).sum();
-                    let current_album_limit = visible_album_count().min(total_albums);
-                    let remaining_albums = total_albums.saturating_sub(current_album_limit);
-                    let cover_element = match cover_url {
-                        Some(url) => rsx! {
-                            img {
-                                src: "{url}",
-                                alt: "{artist.name}",
-                                class: "w-full h-full object-cover",
-                                loading: "lazy",
+                    let requested_artist_id = current_artist_id();
+                    let requested_server_id = current_server_id();
+                    let server_matches = artist.server_id.is_empty()
+                        || artist.server_id == requested_server_id;
+                    if artist.id != requested_artist_id || !server_matches {
+                        eprintln!(
+                            "[artist-detail.stale] requested_artist_id={} requested_server_id={} returned_artist_id={} returned_server_id={}",
+                            requested_artist_id,
+                            requested_server_id,
+                            artist.id,
+                            artist.server_id
+                        );
+                        rsx! {
+                            div { class: "flex flex-col items-center justify-center py-20",
+                                div { class: "w-16 h-16 rounded-full border-2 border-zinc-700 border-t-emerald-500 animate-spin mb-4" }
+                                p { class: "text-zinc-400", "Loading artist..." }
                             }
-                        },
-                        None => rsx! {
-                            div { class: "w-full h-full flex items-center justify-center bg-gradient-to-br from-emerald-600 to-teal-700",
-                                Icon {
-                                    name: "artist".to_string(),
-                                    class: "w-24 h-24 text-white/70".to_string(),
+                        }
+                    } else {
+                        let top_songs = top_songs_data().flatten().unwrap_or_default();
+                        let cover_url = artist_server.as_ref().and_then(|server| {
+                            let client = NavidromeClient::new(server.clone());
+                            artist
+                                .cover_art
+                                .as_ref()
+                                .map(|ca| client.get_cover_art_url(ca, 500))
+                        });
+
+                        let total_albums = albums.len();
+                        let total_songs: u32 = albums.iter().map(|a| a.song_count).sum();
+                        let current_album_limit = visible_album_count().min(total_albums);
+                        let remaining_albums = total_albums.saturating_sub(current_album_limit);
+                        let cover_element = match cover_url {
+                            Some(url) => rsx! {
+                                img {
+                                    src: "{url}",
+                                    alt: "{artist.name}",
+                                    class: "w-full h-full object-cover",
+                                    loading: "lazy",
                                 }
-                            }
-                        },
-                    };
+                            },
+                            None => rsx! {
+                                div { class: "w-full h-full flex items-center justify-center bg-gradient-to-br from-emerald-600 to-teal-700",
+                                    Icon {
+                                        name: "artist".to_string(),
+                                        class: "w-24 h-24 text-white/70".to_string(),
+                                    }
+                                }
+                            },
+                        };
 
-                    rsx! {
-                        div { class: "flex flex-col md:flex-row gap-8 mb-12",
-                            div { class: "w-48 h-48 md:w-64 md:h-64 rounded-full bg-zinc-800 overflow-hidden shadow-2xl flex-shrink-0 mx-auto md:mx-0",
-                                {cover_element}
+                        rsx! {
+                            div { class: "flex flex-col md:flex-row gap-8 mb-12",
+                                div { class: "w-48 h-48 md:w-64 md:h-64 rounded-full bg-zinc-800 overflow-hidden shadow-2xl flex-shrink-0 mx-auto md:mx-0",
+                                    {cover_element}
                             }
                             div { class: "flex flex-col justify-end text-center md:text-left",
                                 p { class: "text-sm text-zinc-400 uppercase tracking-wide mb-2 font-medium",
@@ -354,6 +445,7 @@ pub fn ArtistDetailView(artist_id: String, server_id: String) -> Element {
                         }
                     }
                 }
+                }
                 Some(None) => rsx! {
                     div { class: "flex flex-col items-center justify-center py-20",
                         Icon {
diff --git a/src/components/views/artist_links.rs b/src/components/views/artist_links.rs

Original file line number	Diff line number	Diff line change
`@@ -1103,6 +1103,10 @@`
`1103`	`1103`	`border-style: var(--tw-border-style);`
`1104`	`1104`	`border-width: 1px;`
`1105`	`1105`	`}`
	`1106`	`+ .border-2 {`
	`1107`	`+ border-style: var(--tw-border-style);`
	`1108`	`+ border-width: 2px;`
	`1109`	`+ }`
`1106`	`1110`	`.border-t {`
`1107`	`1111`	`border-top-style: var(--tw-border-style);`
`1108`	`1112`	`border-top-width: 1px;`
`@@ -1342,6 +1346,9 @@`
`1342`	`1346`	`border-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);`
`1343`	`1347`	`}`
`1344`	`1348`	`}`
	`1349`	`+ .border-t-emerald-500 {`
	`1350`	`+ border-top-color: var(--color-emerald-500);`
	`1351`	`+ }`
`1345`	`1352`	`.bg-\[\#1f2a44\] {`
`1346`	`1353`	`background-color: #1f2a44;`
`1347`	`1354`	`}`