progress bars

frontend/src/pages/artist.rs

@@ -109,37 +109,9 @@ pub fn artist_page(props: &Props) -> Html {
         let is_watched = d.artist_status == "owned"
             || d.artist_status == "partial"
             || d.artist_status == "wanted";
-        if is_watched {
+        let is_fully_watched = d.artist_status == "owned";
-            // Unwatch All
+
-            let artist_id_num = d.artist.id;
+        let watch_btn = if !is_fully_watched {
-            let artist_name = d.artist.name.clone();
-            let message = message.clone();
-            let error = error.clone();
-            let fetch = fetch.clone();
-            let artist_id = id.clone();
-            html! {
-                <button class="btn btn-sm btn-secondary"
-                    onclick={Callback::from(move |_: MouseEvent| {
-                        let artist_name = artist_name.clone();
-                        let message = message.clone();
-                        let error = error.clone();
-                        let fetch = fetch.clone();
-                        let artist_id = artist_id.clone();
-                        wasm_bindgen_futures::spawn_local(async move {
-                            match api::unwatch_artist(artist_id_num).await {
-                                Ok(_) => {
-                                    message.set(Some(format!("Unwatched {artist_name}")));
-                                    fetch.emit(artist_id);
-                                }
-                                Err(e) => error.set(Some(e.0)),
-                            }
-                        });
-                    })}>
-                    { "Unwatch All" }
-                </button>
-            }
-        } else {
-            // Watch All — prefer enrichment MBID over DB record (import may not have set it)
             let artist_name = d.artist.name.clone();
             let artist_mbid = d
                 .artist_info
@@ -175,7 +147,43 @@ pub fn artist_page(props: &Props) -> Html {
                     { "Watch All" }
                 </button>
             }
+        } else {
+            html! {}
+        };
+
+        let unwatch_btn = if is_watched {
+            let artist_id_num = d.artist.id;
+            let artist_name = d.artist.name.clone();
+            let message = message.clone();
+            let error = error.clone();
+            let fetch = fetch.clone();
+            let artist_id = id.clone();
+            html! {
+                <button class="btn btn-sm btn-secondary"
+                    onclick={Callback::from(move |_: MouseEvent| {
+                        let artist_name = artist_name.clone();
+                        let message = message.clone();
+                        let error = error.clone();
+                        let fetch = fetch.clone();
+                        let artist_id = artist_id.clone();
+                        wasm_bindgen_futures::spawn_local(async move {
+                            match api::unwatch_artist(artist_id_num).await {
+                                Ok(_) => {
+                                    message.set(Some(format!("Unwatched {artist_name}")));
+                                    fetch.emit(artist_id);
                                 }
+                                Err(e) => error.set(Some(e.0)),
+                            }
+                        });
+                    })}>
+                    { "Unwatch All" }
+                </button>
+            }
+        } else {
+            html! {}
+        };
+
+        html! { <> { watch_btn } { unwatch_btn } </> }
     };
 
     let monitor_btn = {
@@ -253,10 +261,8 @@ pub fn artist_page(props: &Props) -> Html {
 
     html! {
         <div>
-            if let Some(ref banner) = d.artist_banner {
+            <div class={if d.artist_banner.is_some() { "artist-banner-wrap" } else { "" }}
-                <div class="artist-banner" style={format!("background-image: url('{banner}')")}>
+                style={d.artist_banner.as_ref().map(|b| format!("background-image: url('{b}')")).unwrap_or_default()}>
-                </div>
-            }
             <div class="page-header">
                 <div class="flex items-center justify-between">
                     <div class="flex gap-2 items-center">
@@ -329,6 +335,7 @@ pub fn artist_page(props: &Props) -> Html {
                     <p class="text-sm text-muted loading">{ "Loading track counts..." }</p>
                 }
             </div>
+            </div> // close artist-banner-wrap
 
             if let Some(ref msg) = *message {
                 <div class="card" style="border-color: var(--success);">
@@ -376,8 +383,40 @@ pub fn artist_page(props: &Props) -> Html {
 
                             let tc = album.track_count;
 
-                            // Watch/Unwatch toggle for albums
+                            // Progress bar styles
-                            let watch_btn = if is_unwatched {
+                            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";
+
+                            let album_watch_btn = {
                                 let artist_name = d.artist.name.clone();
                                 let album_title = album.title.clone();
                                 let album_mbid = album.mbid.clone();
@@ -386,7 +425,8 @@ pub fn artist_page(props: &Props) -> Html {
                                 let fetch = fetch.clone();
                                 let artist_id = id.clone();
                                 html! {
-                                    <button class="btn btn-sm btn-primary"
+                                    <button class="btn btn-sm btn-primary btn-fixed"
+                                        style={if is_fully_owned { "visibility:hidden;" } else { "" }}
                                         onclick={Callback::from(move |_: MouseEvent| {
                                             let artist_name = artist_name.clone();
                                             let album_title = album_title.clone();
@@ -411,7 +451,9 @@ pub fn artist_page(props: &Props) -> Html {
                                         { "Watch" }
                                     </button>
                                 }
-                            } else {
+                            };
+
+                            let album_unwatch_btn = {
                                 let album_title = album.title.clone();
                                 let album_mbid = album.mbid.clone();
                                 let message = message.clone();
@@ -419,7 +461,8 @@ pub fn artist_page(props: &Props) -> Html {
                                 let fetch = fetch.clone();
                                 let artist_id = id.clone();
                                 html! {
-                                    <button class="btn btn-sm btn-secondary"
+                                    <button class="btn btn-sm btn-secondary btn-fixed"
+                                        style={if !is_album_watched { "visibility:hidden;" } else { "" }}
                                         onclick={Callback::from(move |_: MouseEvent| {
                                             let album_title = album_title.clone();
                                             let album_mbid = album_mbid.clone();
@@ -442,6 +485,8 @@ pub fn artist_page(props: &Props) -> Html {
                                 }
                             };
 
+                            let watch_btn = html! { <span style="display:inline-flex;gap:0.5rem;">{ album_watch_btn } { album_unwatch_btn }</span> };
+
                             html! {
                                 <tr style={row_style}>
                                     <td>
@@ -457,23 +502,18 @@ pub fn artist_page(props: &Props) -> Html {
                                     <td class="text-muted">{ album.date.as_deref().unwrap_or("") }</td>
                                     <td>
                                         if tc > 0 {
-                                            <span class="text-sm" style={
+                                            <div class="progress-bar-wrap">
-                                                if album.owned_tracks >= tc { "color: var(--success);" }
+                                                <div class="progress-bar-fill" style={owned_bar_style}></div>
-                                                else if album.owned_tracks > 0 { "color: var(--warning);" }
+                                                <span class="progress-bar-text">{ format!("{}/{}", album.owned_tracks, tc) }</span>
-                                                else { "color: var(--text-muted);" }
+                                            </div>
-                                            }>
-                                                { format!("{}/{}", album.owned_tracks, tc) }
-                                            </span>
                                         }
                                     </td>
                                     <td>
                                         if tc > 0 {
-                                            <span class="text-sm" style={
+                                            <div class="progress-bar-wrap">
-                                                if album.watched_tracks > 0 { "color: var(--accent);" }
+                                                <div class="progress-bar-fill" style={watched_bar_style}></div>
-                                                else { "color: var(--text-muted);" }
+                                                <span class="progress-bar-text">{ format!("{}/{}", album.watched_tracks, tc) }</span>
-                                            }>
+                                            </div>
-                                                { format!("{}/{}", album.watched_tracks, tc) }
-                                            </span>
                                         }
                                     </td>
                                     <td>{ watch_btn }</td>

frontend/src/pages/library.rs

@@ -57,16 +57,22 @@ pub fn library_page() -> Html {
                             <th>{ "Monitored" }</th>
                             <th>{ "Owned" }</th>
                             <th>{ "Watched" }</th>
-                            <th>{ "Tracks" }</th>
                             <th></th>
                         </tr>
                     </thead>
                     <tbody>
                         { for artists.iter().map(|a| {
                             let artist_id = a.id;
+                            let artist_name = a.name.clone();
+                            let artist_mbid = a.musicbrainz_id.clone();
+                            let is_watched = a.total_watched > 0;
+                            let is_fully_watched = a.enriched && a.total_watched >= a.total_items && a.total_items > 0;
+                            let is_monitored = a.monitored;
+
+                            let on_remove = {
                                 let error = error.clone();
                                 let fetch = fetch_artists.clone();
-                            let on_remove = Callback::from(move |_: MouseEvent| {
+                                Callback::from(move |_: MouseEvent| {
                                     let error = error.clone();
                                     let fetch = fetch.clone();
                                     wasm_bindgen_futures::spawn_local(async move {
@@ -75,7 +81,81 @@ pub fn library_page() -> Html {
                                             Err(e) => error.set(Some(e.0)),
                                         }
                                     });
+                                })
+                            };
+
+                            let on_watch = {
+                                let error = error.clone();
+                                let fetch = fetch_artists.clone();
+                                let name = artist_name.clone();
+                                let mbid = artist_mbid.clone();
+                                Callback::from(move |_: MouseEvent| {
+                                    let error = error.clone();
+                                    let fetch = fetch.clone();
+                                    let name = name.clone();
+                                    let mbid = mbid.clone();
+                                    wasm_bindgen_futures::spawn_local(async move {
+                                        match api::add_artist(&name, mbid.as_deref()).await {
+                                            Ok(_) => fetch.emit(()),
+                                            Err(e) => error.set(Some(e.0)),
+                                        }
                                     });
+                                })
+                            };
+
+                            let on_unwatch = {
+                                let error = error.clone();
+                                let fetch = fetch_artists.clone();
+                                Callback::from(move |_: MouseEvent| {
+                                    let error = error.clone();
+                                    let fetch = fetch.clone();
+                                    wasm_bindgen_futures::spawn_local(async move {
+                                        match api::unwatch_artist(artist_id).await {
+                                            Ok(_) => fetch.emit(()),
+                                            Err(e) => error.set(Some(e.0)),
+                                        }
+                                    });
+                                })
+                            };
+
+                            let on_monitor_toggle = {
+                                let error = error.clone();
+                                let fetch = fetch_artists.clone();
+                                Callback::from(move |_: MouseEvent| {
+                                    let error = error.clone();
+                                    let fetch = fetch.clone();
+                                    wasm_bindgen_futures::spawn_local(async move {
+                                        match api::set_artist_monitored(artist_id, !is_monitored).await {
+                                            Ok(_) => fetch.emit(()),
+                                            Err(e) => error.set(Some(e.0)),
+                                        }
+                                    });
+                                })
+                            };
+
+                            // 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! {
                             <tr>
                                 <td>
@@ -90,34 +170,38 @@ pub fn library_page() -> Html {
                                 </td>
                                 if a.enriched {
                                     <td>
-                                        <span class="text-sm" style={
+                                        <div class="progress-bar-wrap">
-                                            if a.total_owned >= a.total_watched && a.total_watched > 0 { "color: var(--success);" }
+                                            <div class="progress-bar-fill" style={owned_bar_style.clone()}></div>
-                                            else if a.total_owned > 0 { "color: var(--warning);" }
+                                            <span class="progress-bar-text">{ format!("{}/{}", a.total_owned, a.total_watched) }</span>
-                                            else { "color: var(--text-muted);" }
+                                        </div>
-                                        }>
-                                            { format!("{}/{}", a.total_owned, a.total_watched) }
-                                        </span>
                                     </td>
                                     <td>
-                                        <span class="text-sm" style={
+                                        <div class="progress-bar-wrap">
-                                            if a.total_watched > 0 { "color: var(--accent);" }
+                                            <div class="progress-bar-fill" style={watched_bar_style.clone()}></div>
-                                            else { "color: var(--text-muted);" }
+                                            <span class="progress-bar-text">{ format!("{}/{}", a.total_watched, a.total_items) }</span>
-                                        }>
+                                        </div>
-                                            { format!("{}/{}", a.total_watched, a.total_items) }
-                                        </span>
                                     </td>
                                 } else {
                                     <td colspan="2" class="text-sm text-muted loading">
                                         { "Awaiting artist enrichment..." }
                                     </td>
                                 }
-                                <td class="text-muted text-sm">
+                                <td class="actions">
-                                    if a.enriched && a.total_items > 0 {
+                                    <button class="btn btn-sm btn-lib"
-                                        { a.total_items }
+                                        onclick={on_watch}
-                                    }
+                                        style={if is_fully_watched { "visibility:hidden;" } else { "" }}>
-                                </td>
+                                        { "Watch" }
-                                <td>
+                                    </button>
-                                    <button class="btn btn-sm btn-danger" onclick={on_remove}>
+                                    <button class="btn btn-sm btn-secondary btn-lib"
+                                        onclick={on_unwatch}
+                                        style={if !is_watched { "visibility:hidden;" } else { "" }}>
+                                        { "Unwatch" }
+                                    </button>
+                                    <button class={if is_monitored { "btn btn-sm btn-success btn-lib" } else { "btn btn-sm btn-secondary btn-lib" }}
+                                        onclick={on_monitor_toggle}>
+                                        { if is_monitored { "Monitored" } else { "Monitor" } }
+                                    </button>
+                                    <button class="btn btn-sm btn-danger btn-lib" onclick={on_remove}>
                                         { "Remove" }
                                     </button>
                                 </td>

frontend/style.css

@@ -148,13 +148,27 @@ a:hover { color: var(--accent-hover); }
     color: var(--text-secondary);
 }
 .artist-links a:hover { color: var(--accent); }
-.artist-banner {
+.artist-banner-wrap {
-    width: 100%;
+    background-size: 100% auto;
-    height: 200px;
+    background-position: top center;
-    background-size: cover;
+    background-repeat: no-repeat;
-    background-position: center;
     border-radius: var(--radius);
-    margin-bottom: 1rem;
+    margin: -2rem -2rem 1rem -2rem;
+    padding: 2rem;
+    padding-top: 30%;
+    position: relative;
+}
+.artist-banner-wrap::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.85) 60%, rgba(15,23,42,0.95) 100%);
+    border-radius: var(--radius);
+    pointer-events: none;
+}
+.artist-banner-wrap > * {
+    position: relative;
+    z-index: 1;
 }
 .artist-photo {
     width: 120px;
@@ -214,7 +228,7 @@ a:hover { color: var(--accent-hover); }
 /* Tables */
 table { width: 100%; border-collapse: collapse; }
 th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); }
-th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
+th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; text-align: center; }
 tr:hover { background: var(--bg-card); }
 
 /* Buttons */
@@ -234,6 +248,38 @@ tr:hover { background: var(--bg-card); }
 .btn-danger { background: var(--danger); color: white; }
 .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
 .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
+/* Progress bars for library columns */
+.progress-bar-wrap {
+    position: relative;
+    background: var(--bg-card);
+    border-radius: 4px;
+    height: 1.4rem;
+    min-width: 4.5rem;
+    overflow: hidden;
+}
+.progress-bar-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 4px;
+    opacity: 0.3;
+    transition: width 0.3s ease;
+}
+.progress-bar-text {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.btn-fixed { min-width: 5.5rem; text-align: center; }
+.btn-lib { min-width: 4.5rem; text-align: center; padding-left: 0.25rem; padding-right: 0.25rem; }
 
 /* Forms */
 input, select {

src/routes/artists.rs

@@ -95,9 +95,11 @@ async fn list_artists(
     auth::require_auth(&session)?;
     let artists = queries::artists::list(state.db.conn(), query.limit, query.offset).await?;
 
+    let wanted = queries::wanted::list(state.db.conn(), None, None).await?;
+
     let mut items: Vec<ArtistListItem> = Vec::new();
     for a in &artists {
-        // Check if we have cached artist-level totals from a prior detail page load
+        // Get total_items from enrichment cache (total available tracks from MB)
         let cache_key = format!("artist_totals:{}", a.id);
         let cached_totals: Option<(u32, u32, u32)> =
             if let Ok(Some(json)) = queries::cache::get(state.db.conn(), &cache_key).await {
@@ -107,12 +109,20 @@ async fn list_artists(
             };
 
         let enriched = cached_totals.is_some();
-        let (total_watched, total_owned, total_items) =
+        let total_items = cached_totals
-            if let Some((avail, watched, owned)) = cached_totals {
+            .map(|(avail, _, _)| avail as usize)
-                (watched as usize, owned as usize, avail as usize)
+            .unwrap_or(0);
-            } else {
+
-                (0, 0, 0)
+        // Compute watched/owned live from wanted_items (always current)
-            };
+        let artist_wanted: Vec<_> = wanted
+            .iter()
+            .filter(|w| w.artist_id == Some(a.id))
+            .collect();
+        let total_watched = artist_wanted.len();
+        let total_owned = artist_wanted
+            .iter()
+            .filter(|w| w.status == WantedStatus::Owned)
+            .count();
 
         items.push(ArtistListItem {
             id: a.id,