News Tab with Markdown

src/pages/news.rs

@@ -1,10 +1,187 @@
+use pulldown_cmark::{html as md_html, Options, Parser};
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::spawn_local;
+use web_sys::{HtmlInputElement, MouseEvent};
 use yew::prelude::*;
 
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"], catch)]
+    async fn invoke(cmd: &str, args: JsValue) -> Result<JsValue, JsValue>;
+}
+
+#[derive(Serialize, Deserialize, Clone, PartialEq, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct NewsArticle {
+    pub content: String,
+    pub author: String,
+    pub created_at: u64,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct ApiKeyArgs {
+    pub key: String,
+}
+
 #[function_component(News)]
 pub fn news() -> Html {
+    let articles = use_state(|| None::<Vec<NewsArticle>>);
+    let error_msg = use_state(|| None::<String>);
+    let show_config = use_state(|| false);
+    let api_key_ref = use_node_ref();
+
+    let load_news = {
+        let articles = articles.clone();
+        let error_msg = error_msg.clone();
+        Callback::from(move |_e: MouseEvent| {
+            let articles = articles.clone();
+            let error_msg = error_msg.clone();
+
+            articles.set(None);
+            error_msg.set(None);
+
+            spawn_local(async move {
+                match invoke("fetch_ai_news", JsValue::NULL).await {
+                    Ok(res) => match serde_wasm_bindgen::from_value::<Vec<NewsArticle>>(res) {
+                        Ok(new_news) => articles.set(Some(new_news)),
+                        Err(e) => error_msg.set(Some(format!("Datenfehler: {}", e))),
+                    },
+                    Err(e) => {
+                        let msg = e.as_string().unwrap_or_else(|| "API Fehler".into());
+                        error_msg.set(Some(msg));
+                    }
+                }
+            });
+        })
+    };
+
+    let save_key = {
+        let show_config = show_config.clone();
+        let api_key_ref = api_key_ref.clone();
+        let load_news = load_news.clone();
+        Callback::from(move |_| {
+            let input = api_key_ref.cast::<HtmlInputElement>().unwrap();
+            let key = input.value();
+            let show_config_handle = show_config.clone();
+            let load_news_handle = load_news.clone();
+
+            spawn_local(async move {
+                let args = serde_wasm_bindgen::to_value(&ApiKeyArgs { key }).unwrap();
+                if invoke("save_openrouter_key", args).await.is_ok() {
+                    show_config_handle.set(false);
+                    load_news_handle.emit(MouseEvent::new("click").unwrap());
+                }
+            });
+        })
+    };
+
+    {
+        let load_news = load_news.clone();
+        use_effect_with((), move |_| {
+            load_news.emit(MouseEvent::new("click").unwrap());
+            || ()
+        });
+    }
+
+    let is_config_visible = *show_config;
+    let toggle_config_handle = show_config.clone();
+    let current_error = (*error_msg).clone();
+    let articles_list = (*articles).clone();
+
     html! {
-        <div>
-            <h1>{"News Page"}</h1>
+        <div class="feed-container">
+            <div class="feed-header">
+                <h1 class="feed-title">{"📰 KI News"}</h1>
+                <div style="display: flex; gap: 10px;">
+                    <button class="reload-btn" onclick={move |_| toggle_config_handle.set(!is_config_visible)}>
+                        {"⚙️"}
+                    </button>
+                    <button class="reload-btn" onclick={load_news.clone()}>
+                        {"🔄"}
+                    </button>
+                </div>
+            </div>
+
+            if is_config_visible {
+                <div class="post-card" style="border-color: #4a90e2; animation: slideIn 0.3s ease;">
+                    <h3 style="margin-top: 0;">{"Modell: OpenRouter"}</h3>
+                    <input
+                        ref={api_key_ref}
+                        type="password"
+                        placeholder="OpenRouter API Key..."
+                        class="recipient-input"
+                        style="margin-bottom: 12px;"
+                    />
+                    <button class="reload-btn-large" onclick={save_key}>{"Key Speichern"}</button>
+                </div>
+            }
+
+            {
+                if let Some(msg) = current_error {
+                    html! {
+                        <div class="post-card" style="border-color: #ef4444;">
+                            <p style="color: #ef4444; margin: 0;">{ format!("⚠️ {}", msg) }</p>
+                        </div>
+                    }
+                } else if let Some(list) = articles_list {
+                    html! {
+                        <div class="posts-list">
+                            { for list.iter().map(|a| html! { <NewsCard article={a.clone()} /> }) }
+                            <div class="footer-action">
+                                <button class="reload-btn-large" onclick={load_news}>
+                                    {"Mehr News generieren"}
+                                </button>
+                            </div>
+                        </div>
+                    }
+                } else {
+                    html! { <p class="status-msg">{"KI schreibt gerade News..."}</p> }
+                }
+            }
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct NewsProps {
+    pub article: NewsArticle,
+}
+
+#[function_component(NewsCard)]
+pub fn news_card(props: &NewsProps) -> Html {
+    let a = &props.article;
+
+    // Markdown zu HTML konvertieren
+    let markdown_html = {
+        let mut options = Options::empty();
+        options.insert(Options::ENABLE_STRIKETHROUGH);
+        let parser = Parser::new_ext(&a.content, options);
+        let mut html_output = String::new();
+        md_html::push_html(&mut html_output, parser);
+        html_output
+    };
+
+    // Das HTML sicher in ein AttrValue packen
+    let div = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .create_element("div")
+        .unwrap();
+    div.set_inner_html(&markdown_html);
+
+    html! {
+        <div class="post-card">
+            <div class="post-header">
+                <span class="post-author" style="color: #facc15;">{ &a.author }</span>
+                <span class="post-date">{"AI Generated"}</span>
+            </div>
+            // Hier nutzen wir das div-Element von oben als VNode
+            <div class="post-content markdown-body">
+                { Html::from_html_unchecked(AttrValue::from(markdown_html)) }
+            </div>
         </div>
     }
 }