Major early updates

frontend/src/pages/album.rs

@@ -0,0 +1,71 @@
+use yew::prelude::*;
+
+use crate::api;
+use crate::types::AlbumDetail;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub id: i32,
+}
+
+#[function_component(AlbumPage)]
+pub fn album_page(props: &Props) -> Html {
+    let detail = use_state(|| None::<AlbumDetail>);
+    let error = use_state(|| None::<String>);
+    let id = props.id;
+
+    {
+        let detail = detail.clone();
+        let error = error.clone();
+        use_effect_with(id, move |id| {
+            let id = *id;
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_album(id).await {
+                    Ok(d) => detail.set(Some(d)),
+                    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 d) = *detail else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ &d.album.name }</h2>
+                <p class="text-muted">{ format!("by {}", d.album.album_artist) }</p>
+                if let Some(year) = d.album.year {
+                    <p class="text-muted text-sm">{ format!("Year: {year}") }</p>
+                }
+            </div>
+
+            <h3 class="mb-1">{ format!("Tracks ({})", d.tracks.len()) }</h3>
+            if d.tracks.is_empty() {
+                <p class="text-muted">{ "No tracks found." }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "#" }</th><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Codec" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for d.tracks.iter().map(|t| html! {
+                            <tr>
+                                <td>{ t.track_number.map(|n| n.to_string()).unwrap_or_default() }</td>
+                                <td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
+                                <td>{ t.artist.as_deref().unwrap_or("") }</td>
+                                <td class="text-muted text-sm">{ t.codec.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}