Major early updates

frontend/src/pages/dashboard.rs

@@ -0,0 +1,88 @@
+use yew::prelude::*;
+
+use crate::api;
+use crate::components::status_badge::StatusBadge;
+use crate::types::Status;
+
+#[function_component(DashboardPage)]
+pub fn dashboard() -> Html {
+    let status = use_state(|| None::<Status>);
+    let error = use_state(|| None::<String>);
+
+    {
+        let status = status.clone();
+        let error = error.clone();
+        use_effect_with((), move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_status().await {
+                    Ok(s) => status.set(Some(s)),
+                    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 s) = *status else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Dashboard" }</h2>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="value">{ s.library.total_items }</div>
+                    <div class="label">{ "Total Items" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.wanted }</div>
+                    <div class="label">{ "Wanted" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.downloaded }</div>
+                    <div class="label">{ "Downloaded" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.owned }</div>
+                    <div class="label">{ "Owned" }</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h3>{ "Download Queue" }</h3>
+                <p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
+            </div>
+
+            if !s.tasks.is_empty() {
+                <div class="card">
+                    <h3>{ "Background Tasks" }</h3>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>{ "Type" }</th>
+                                <th>{ "Status" }</th>
+                                <th>{ "Result" }</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { for s.tasks.iter().map(|t| html! {
+                                <tr>
+                                    <td>{ &t.task_type }</td>
+                                    <td><StatusBadge status={t.status.clone()} /></td>
+                                    <td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
+                                </tr>
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            }
+        </div>
+    }
+}