Shanty/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added the watch/unwatch buttons for artists/albums

Browse Source
This commit is contained in:
Connor Johnstone
2026-03-25 15:08:37 -04:00
parent d20989f859
commit a893a84f16
4 changed files with 158 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/pages/artist.rs
View File

@@ -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 {
// Unwatch All
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 {
// Watch All — prefer enrichment MBID over DB record (import may not have set it)
let is_fully_watched = d.artist_status == "owned";
let watch_btn = if !is_fully_watched {
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 = {
@@ -375,8 +383,11 @@ pub fn artist_page(props: &Props) -> Html {
let tc = album.track_count;
// Watch/Unwatch toggle for albums
let watch_btn = if is_unwatched {
// 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();
@@ -385,7 +396,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();
@@ -410,7 +422,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();
@@ -418,7 +432,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();
@@ -441,6 +456,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>

98
frontend/src/pages/library.rs
View File

@@ -64,18 +64,76 @@ pub fn library_page() -> Html {
<tbody>
{ for artists.iter().map(|a| {
let artist_id = a.id;
let error = error.clone();
let fetch = fetch_artists.clone();
let on_remove = Callback::from(move |_: MouseEvent| {
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.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::delete_artist(artist_id).await {
Ok(_) => fetch.emit(()),
Err(e) => error.set(Some(e.0)),
}
});
});
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::delete_artist(artist_id).await {
Ok(_) => fetch.emit(()),
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)),
}
});
})
};
html! {
<tr>
<td>
@@ -116,8 +174,22 @@ pub fn library_page() -> Html {
{ a.total_items }
}
</td>
<td>
<button class="btn btn-sm btn-danger" onclick={on_remove}>
<td class="actions">
<button class="btn btn-sm btn-lib"
onclick={on_watch}
style={if is_fully_watched { "visibility:hidden;" } else { "" }}>
{ "Watch" }
</button>
<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>

2
frontend/style.css
View File

@@ -248,6 +248,8 @@ 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; }
.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 {