Major early updates

frontend/src/pages/library.rs

@@ -0,0 +1,64 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::api;
+use crate::pages::Route;
+use crate::types::Artist;
+
+#[function_component(LibraryPage)]
+pub fn library_page() -> Html {
+    let artists = use_state(|| None::<Vec<Artist>>);
+    let error = use_state(|| None::<String>);
+
+    {
+        let artists = artists.clone();
+        let error = error.clone();
+        use_effect_with((), move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::list_artists(100, 0).await {
+                    Ok(a) => artists.set(Some(a)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref artists) = *artists else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Library" }</h2>
+                <p>{ format!("{} artists", artists.len()) }</p>
+            </div>
+
+            if artists.is_empty() {
+                <p class="text-muted">{ "No artists in library. Use Search to add some!" }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "Name" }</th><th>{ "MusicBrainz ID" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for artists.iter().map(|a| html! {
+                            <tr>
+                                <td>
+                                    <Link<Route> to={Route::Artist { id: a.id }}>
+                                        { &a.name }
+                                    </Link<Route>>
+                                </td>
+                                <td class="text-muted text-sm">{ a.musicbrainz_id.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}