Top ten button

frontend/src/pages/artist.rs

@@ -21,6 +21,7 @@ pub fn artist_page(props: &Props) -> Html {
     let message = use_state(|| None::<String>);
     let active_tab = use_state(|| "discography".to_string());
     let top_songs_limit = use_state(|| 25usize);
+    let watch_top_count = use_state(|| 10usize);
     // Track top song status overrides — use Rc<RefCell> so async callbacks always see latest state
     let top_song_overrides: Rc<std::cell::RefCell<std::collections::HashMap<usize, Option<String>>>> =
         use_mut_ref(std::collections::HashMap::new);
@@ -304,8 +305,71 @@ pub fn artist_page(props: &Props) -> Html {
             })
         };
 
+        let on_count_change = {
+            let watch_top_count = watch_top_count.clone();
+            Callback::from(move |e: Event| {
+                let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                if let Ok(v) = input.value().parse::<usize>() {
+                    if v >= 1 {
+                        watch_top_count.set(v);
+                    }
+                }
+            })
+        };
+
+        let on_watch_top = {
+            let overrides = top_song_overrides.clone();
+            let version = overrides_version.clone();
+            let songs: Vec<_> = d.top_songs.iter().take(*watch_top_count).cloned().collect();
+            let artist = artist_name.clone();
+            Callback::from(move |_: MouseEvent| {
+                // Collect indices of unwatched songs
+                let to_watch: Vec<(usize, String, Option<String>)> = songs
+                    .iter()
+                    .enumerate()
+                    .filter(|(i, song)| {
+                        let has_override = overrides.borrow().get(i).is_some();
+                        !has_override && song.status.is_none()
+                    })
+                    .map(|(i, song)| (i, song.name.clone(), song.mbid.clone()))
+                    .collect();
+
+                // Mark all as pending immediately
+                for (i, _, _) in &to_watch {
+                    overrides.borrow_mut().insert(*i, Some("pending".to_string()));
+                }
+                version.set(*version + 1);
+
+                // Watch sequentially so the user sees progress
+                let overrides = overrides.clone();
+                let version = version.clone();
+                let artist = artist.clone();
+                wasm_bindgen_futures::spawn_local(async move {
+                    for (i, name, mbid) in to_watch {
+                        let status = match api::watch_track(Some(&artist), &name, mbid.as_deref().unwrap_or("")).await {
+                            Ok(resp) => resp.status,
+                            Err(_) => "wanted".to_string(),
+                        };
+                        overrides.borrow_mut().insert(i, Some(status));
+                        version.set(*version + 1);
+                    }
+                });
+            })
+        };
+
+        let watch_count_val = *watch_top_count;
+
         html! {
             <div>
+                <div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.5rem;">
+                    <button class="btn btn-sm" onclick={on_watch_top}>
+                        { format!("Watch Top {}", watch_count_val) }
+                    </button>
+                    <input type="number" min="1"
+                        value={watch_count_val.to_string()}
+                        onchange={on_count_change}
+                        style="width:4rem;" />
+                </div>
                 <table>
                     <thead>
                         <tr>