feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/components/tool_card.rs

@@ -0,0 +1,44 @@
+use crate::models::McpTool;
+use dioxus::prelude::*;
+
+/// Renders an MCP tool card with name, description, status indicator, and toggle.
+///
+/// # Arguments
+///
+/// * `tool` - The MCP tool data to render
+/// * `on_toggle` - Callback fired when the enable/disable toggle is clicked
+#[component]
+pub fn ToolCard(tool: McpTool, on_toggle: EventHandler<String>) -> Element {
+    let status_class = format!("tool-status tool-status--{}", tool.status.css_class());
+    let toggle_class = if tool.enabled {
+        "tool-toggle tool-toggle--on"
+    } else {
+        "tool-toggle tool-toggle--off"
+    };
+
+    rsx! {
+        div { class: "tool-card",
+            div { class: "tool-card-header",
+                div { class: "tool-card-icon", "\u{2699}" }
+                span { class: "{status_class}", "" }
+            }
+            h3 { class: "tool-card-name", "{tool.name}" }
+            p { class: "tool-card-desc", "{tool.description}" }
+            div { class: "tool-card-footer",
+                span { class: "tool-card-category", "{tool.category.label()}" }
+                button {
+                    class: "{toggle_class}",
+                    onclick: {
+                        let id = tool.id.clone();
+                        move |_| on_toggle.call(id.clone())
+                    },
+                    if tool.enabled {
+                        "ON"
+                    } else {
+                        "OFF"
+                    }
+                }
+            }
+        }
+    }
+}