diff --git a/frontend/src/pages/artist.rs b/frontend/src/pages/artist.rs
index 8238763..737b90d 100644
--- a/frontend/src/pages/artist.rs
+++ b/frontend/src/pages/artist.rs
@@ -383,6 +383,35 @@ pub fn artist_page(props: &Props) -> Html {
let tc = album.track_count;
+ // Progress bar styles
+ let owned_pct = if tc > 0 {
+ (album.owned_tracks as f64 / tc as f64 * 100.0) as u32
+ } else {
+ 0
+ };
+ let owned_color = if album.owned_tracks >= tc && tc > 0 {
+ "var(--success)"
+ } else if album.owned_tracks > 0 {
+ "var(--warning)"
+ } else {
+ "var(--text-muted)"
+ };
+ let owned_bar_style =
+ format!("width:{owned_pct}%;background:{owned_color};");
+
+ let watched_pct = if tc > 0 {
+ (album.watched_tracks as f64 / tc as f64 * 100.0) as u32
+ } else {
+ 0
+ };
+ let watched_color = if album.watched_tracks > 0 {
+ "var(--accent)"
+ } else {
+ "var(--text-muted)"
+ };
+ let watched_bar_style =
+ format!("width:{watched_pct}%;background:{watched_color};");
+
// Watch/Unwatch buttons for albums — show both when partially watched
let is_fully_owned = album.status == "owned";
let is_album_watched = album.status != "unwatched";
@@ -473,23 +502,18 @@ pub fn artist_page(props: &Props) -> Html {
{ album.date.as_deref().unwrap_or("") } |
if tc > 0 {
- = tc { "color: var(--success);" }
- else if album.owned_tracks > 0 { "color: var(--warning);" }
- else { "color: var(--text-muted);" }
- }>
- { format!("{}/{}", album.owned_tracks, tc) }
-
+
+
+ { format!("{}/{}", album.owned_tracks, tc) }
+
}
|
if tc > 0 {
- 0 { "color: var(--accent);" }
- else { "color: var(--text-muted);" }
- }>
- { format!("{}/{}", album.watched_tracks, tc) }
-
+
+
+ { format!("{}/{}", album.watched_tracks, tc) }
+
}
|
{ watch_btn } |
diff --git a/frontend/src/pages/library.rs b/frontend/src/pages/library.rs
index 04e5246..113a920 100644
--- a/frontend/src/pages/library.rs
+++ b/frontend/src/pages/library.rs
@@ -57,7 +57,6 @@ pub fn library_page() -> Html {
{ "Monitored" } |
{ "Owned" } |
{ "Watched" } |
- { "Tracks" } |
|
@@ -134,6 +133,29 @@ pub fn library_page() -> Html {
})
};
+ // Pre-compute progress bar styles
+ let owned_pct = if a.total_watched > 0 {
+ (a.total_owned as f64 / a.total_watched as f64 * 100.0) as u32
+ } else {
+ 0
+ };
+ let owned_color = if a.total_owned >= a.total_watched && a.total_watched > 0 {
+ "var(--success)"
+ } else if a.total_owned > 0 {
+ "var(--warning)"
+ } else {
+ "var(--text-muted)"
+ };
+ let owned_bar_style = format!("width:{owned_pct}%;background:{owned_color};");
+
+ let watched_pct = if a.total_items > 0 {
+ (a.total_watched as f64 / a.total_items as f64 * 100.0) as u32
+ } else {
+ 0
+ };
+ let watched_color = if a.total_watched > 0 { "var(--accent)" } else { "var(--text-muted)" };
+ let watched_bar_style = format!("width:{watched_pct}%;background:{watched_color};");
+
html! {
|
@@ -148,32 +170,22 @@ pub fn library_page() -> Html {
|
if a.enriched {
- = a.total_watched && a.total_watched > 0 { "color: var(--success);" }
- else if a.total_owned > 0 { "color: var(--warning);" }
- else { "color: var(--text-muted);" }
- }>
- { format!("{}/{}", a.total_owned, a.total_watched) }
-
+
+
+ { format!("{}/{}", a.total_owned, a.total_watched) }
+
|
- 0 { "color: var(--accent);" }
- else { "color: var(--text-muted);" }
- }>
- { format!("{}/{}", a.total_watched, a.total_items) }
-
+
+
+ { format!("{}/{}", a.total_watched, a.total_items) }
+
|
} else {
{ "Awaiting artist enrichment..." }
|
}
-
- if a.enriched && a.total_items > 0 {
- { a.total_items }
- }
- |
|