Major early updates

frontend/src/components/mod.rs

@@ -0,0 +1,2 @@
+pub mod navbar;
+pub mod status_badge;

frontend/src/components/navbar.rs

@@ -0,0 +1,30 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::pages::Route;
+
+#[function_component(Navbar)]
+pub fn navbar() -> Html {
+    let route = use_route::<Route>();
+
+    let link = |to: Route, label: &str| {
+        let active = route.as_ref() == Some(&to);
+        let class = if active { "active" } else { "" };
+        html! {
+            <Link<Route> to={to} classes={classes!(class)}>{ label }</Link<Route>>
+        }
+    };
+
+    html! {
+        <div class="sidebar">
+            <h1>{ "Shanty" }</h1>
+            <nav>
+                { link(Route::Dashboard, "Dashboard") }
+                { link(Route::Search, "Search") }
+                { link(Route::Library, "Library") }
+                { link(Route::Downloads, "Downloads") }
+                { link(Route::Settings, "Settings") }
+            </nav>
+        </div>
+    }
+}

frontend/src/components/status_badge.rs

@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub status: String,
+}
+
+#[function_component(StatusBadge)]
+pub fn status_badge(props: &Props) -> Html {
+    let class = match props.status.to_lowercase().as_str() {
+        "wanted" => "badge badge-wanted",
+        "available" => "badge badge-available",
+        "downloaded" => "badge badge-downloaded",
+        "owned" => "badge badge-owned",
+        "pending" => "badge badge-pending",
+        "failed" => "badge badge-failed",
+        "completed" => "badge badge-completed",
+        "downloading" => "badge badge-available",
+        "cancelled" => "badge badge-pending",
+        _ => "badge",
+    };
+
+    html! {
+        <span class={class}>{ &props.status }</span>
+    }
+}