feat(dashboard): added dashboard content and features (#7)

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

src/components/news_card.rs

@@ -1,40 +1,67 @@
-use crate::models::{NewsCard as NewsCardModel, NewsCategory};
+use crate::models::NewsCard as NewsCardModel;
 use dioxus::prelude::*;
 
 /// Renders a news feed card with title, source, category badge, and summary.
 ///
+/// When a thumbnail URL is present but the image fails to load, the card
+/// automatically switches to the centered no-thumbnail layout.
+///
 /// # Arguments
 ///
 /// * `card` - The news card model data to render
+/// * `on_click` - Event handler triggered when the card is clicked
+/// * `selected` - Whether this card is currently selected (highlighted)
 #[component]
-pub fn NewsCardView(card: NewsCardModel) -> Element {
-    let badge_class = format!("news-badge news-badge--{}", card.category.css_class());
+pub fn NewsCardView(
+    card: NewsCardModel,
+    on_click: EventHandler<NewsCardModel>,
+    #[props(default = false)] selected: bool,
+) -> Element {
+    // Derive a CSS class from the category string (lowercase, hyphenated)
+    let css_suffix = card.category.to_lowercase().replace(' ', "-");
+    let badge_class = format!("news-badge news-badge--{css_suffix}");
+
+    // Track whether the thumbnail loaded successfully.
+    // Starts as true if a URL is provided; set to false on image error.
+    let has_thumb_url = card.thumbnail_url.is_some();
+    let mut thumb_ok = use_signal(|| has_thumb_url);
+
+    let show_thumb = has_thumb_url && *thumb_ok.read();
+    let selected_cls = if selected { " news-card--selected" } else { "" };
+    let thumb_cls = if show_thumb {
+        ""
+    } else {
+        " news-card--no-thumb"
+    };
+    let card_class = format!("news-card{selected_cls}{thumb_cls}");
+
+    // Clone the card for the click handler closure
+    let card_for_click = card.clone();
 
     rsx! {
-        article { class: "news-card",
+        article {
+            class: "{card_class}",
+            onclick: move |_| on_click.call(card_for_click.clone()),
             if let Some(ref thumb) = card.thumbnail_url {
-                div { class: "news-card-thumb",
-                    img {
-                        src: "{thumb}",
-                        alt: "{card.title}",
-                        loading: "lazy",
+                if *thumb_ok.read() {
+                    div { class: "news-card-thumb",
+                        img {
+                            src: "{thumb}",
+                            alt: "",
+                            loading: "lazy",
+                            // Hide the thumbnail container if the image fails to load
+                            onerror: move |_| thumb_ok.set(false),
+                        }
                     }
                 }
             }
             div { class: "news-card-body",
                 div { class: "news-card-meta",
-                    span { class: "{badge_class}", "{card.category.label()}" }
+                    span { class: "{badge_class}", "{card.category}" }
                     span { class: "news-card-source", "{card.source}" }
                     span { class: "news-card-date", "{card.published_at}" }
                 }
-                h3 { class: "news-card-title",
-                    a {
-                        href: "{card.url}",
-                        target: "_blank",
-                        rel: "noopener",
-                        "{card.title}"
-                    }
-                }
+                h3 { class: "news-card-title", "{card.title}" }
                 p { class: "news-card-summary", "{card.summary}" }
             }
         }
@@ -48,7 +75,12 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "Llama 4 Released with 1M Context Window".into(),
             source: "Meta AI Blog".into(),
             summary: "Meta releases Llama 4 with a 1 million token context window.".into(),
-            category: NewsCategory::Llm,
+            content: "Meta has officially released Llama 4, their latest \
+                open-weight large language model featuring a groundbreaking \
+                1 million token context window. This represents a major \
+                leap in context length capabilities."
+                .into(),
+            category: "AI".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-18".into(),
@@ -57,7 +89,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "EU AI Act Enforcement Begins".into(),
             source: "TechCrunch".into(),
             summary: "The EU AI Act enters its enforcement phase across member states.".into(),
-            category: NewsCategory::Privacy,
+            content: "The EU AI Act has officially entered its enforcement \
+                phase. Member states are now required to comply with the \
+                comprehensive regulatory framework governing AI systems."
+                .into(),
+            category: "Privacy".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-17".into(),
@@ -66,7 +102,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "LangChain v0.4 Introduces Native MCP Support".into(),
             source: "LangChain Blog".into(),
             summary: "New version adds first-class MCP server integration.".into(),
-            category: NewsCategory::Agents,
+            content: "LangChain v0.4 introduces native Model Context Protocol \
+                support, enabling seamless integration with MCP servers for \
+                tool use and context management in agent workflows."
+                .into(),
+            category: "Technology".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-16".into(),
@@ -75,7 +115,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "Ollama Adds Multi-GPU Scheduling".into(),
             source: "Ollama".into(),
             summary: "Run large models across multiple GPUs with automatic sharding.".into(),
-            category: NewsCategory::Infrastructure,
+            content: "Ollama now supports multi-GPU scheduling with automatic \
+                model sharding. Users can run models across multiple GPUs \
+                for improved inference performance."
+                .into(),
+            category: "Infrastructure".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-15".into(),
@@ -84,7 +128,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "Mistral Open Sources Codestral 2".into(),
             source: "Mistral AI".into(),
             summary: "Codestral 2 achieves state-of-the-art on HumanEval benchmarks.".into(),
-            category: NewsCategory::OpenSource,
+            content: "Mistral AI has open-sourced Codestral 2, a code \
+                generation model that achieves state-of-the-art results \
+                on HumanEval and other coding benchmarks."
+                .into(),
+            category: "Open Source".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-14".into(),
@@ -93,7 +141,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "NVIDIA Releases NeMo 3.0 Framework".into(),
             source: "NVIDIA Developer".into(),
             summary: "Updated framework simplifies enterprise LLM fine-tuning.".into(),
-            category: NewsCategory::Infrastructure,
+            content: "NVIDIA has released NeMo 3.0, an updated framework \
+                that simplifies enterprise LLM fine-tuning with improved \
+                distributed training capabilities."
+                .into(),
+            category: "Infrastructure".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-13".into(),
@@ -102,7 +154,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "Anthropic Claude 4 Sets New Reasoning Records".into(),
             source: "Anthropic".into(),
             summary: "Claude 4 achieves top scores across major reasoning benchmarks.".into(),
-            category: NewsCategory::Llm,
+            content: "Anthropic's Claude 4 has set new records across major \
+                reasoning benchmarks, demonstrating significant improvements \
+                in mathematical and logical reasoning capabilities."
+                .into(),
+            category: "AI".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-12".into(),
@@ -111,7 +167,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "CrewAI Raises $52M for Agent Orchestration".into(),
             source: "VentureBeat".into(),
             summary: "Series B funding to expand multi-agent orchestration platform.".into(),
-            category: NewsCategory::Agents,
+            content: "CrewAI has raised $52M in Series B funding to expand \
+                its multi-agent orchestration platform, enabling teams \
+                to build and deploy complex AI agent workflows."
+                .into(),
+            category: "Technology".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-11".into(),
@@ -120,7 +180,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "DeepSeek V4 Released Under Apache 2.0".into(),
             source: "DeepSeek".into(),
             summary: "Latest open-weight model competes with proprietary offerings.".into(),
-            category: NewsCategory::OpenSource,
+            content: "DeepSeek has released V4 under the Apache 2.0 license, \
+                an open-weight model that competes with proprietary \
+                offerings in both performance and efficiency."
+                .into(),
+            category: "Open Source".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-10".into(),
@@ -129,7 +193,11 @@ pub fn mock_news() -> Vec<NewsCardModel> {
             title: "GDPR Fines for AI Training Data Reach Record High".into(),
             source: "Reuters".into(),
             summary: "European regulators issue largest penalties yet for AI data misuse.".into(),
-            category: NewsCategory::Privacy,
+            content: "European regulators have issued record-high GDPR fines \
+                for AI training data misuse, signaling stricter enforcement \
+                of data protection laws in the AI sector."
+                .into(),
+            category: "Privacy".into(),
             url: "#".into(),
             thumbnail_url: None,
             published_at: "2026-02-09".into(),