News Tab with Markdown

2025-12-30 18:11:41 +01:00
parent cfd3f68077
commit d4fb4701c3
6 changed files with 346 additions and 6 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,6 +16,8 @@ serde-wasm-bindgen = "0.6"
 console_error_panic_hook = "0.1.7"
 serde_json = "1.0.148"
 gloo-timers = "0.3.0"
+reqwest = { version = "0.13.0", features = ["json"] }
+pulldown-cmark = "0.13.0"

 [workspace]
 members = ["src-tauri"]
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -24,3 +24,4 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 easy-nostr = { path = "./easy-nostr" }
 tokio = { version = "1", features = ["full"] }
+reqwest = { version = "0.12", features = ["json"] }
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,18 +1,23 @@
 mod chat;
 mod home;
+mod news;

-use tokio::sync::Mutex; // Wichtig für den State
+use tokio::sync::Mutex;

 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
-        // DIESE ZEILE HINZUGEFÜGT: Registriert den State für alle Commands
+        // Registriert den Nostr-State
        .manage(chat::NostrState(Mutex::new(None)))
+        // HINZUGEFÜGT: Registriert den News-State für den API-Key
+        .manage(news::NewsState::default())
        .invoke_handler(tauri::generate_handler![
            home::fetch_nostr_posts,
            chat::send_nostr_message,
-            chat::get_nostr_messages
+            chat::get_nostr_messages,
+            news::save_openrouter_key,
+            news::fetch_ai_news,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
--- a/src-tauri/src/news.rs
+++ b/src-tauri/src/news.rs
@@ -0,0 +1,76 @@
+use serde::{Deserialize, Serialize};
+use std::sync::Mutex;
+use tauri::State;
+
+#[derive(Default)]
+pub struct NewsState {
+    pub openrouter_key: Mutex<String>,
+}
+
+#[derive(Serialize, Deserialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct NewsArticle {
+    pub content: String,
+    pub author: String,
+    pub created_at: u64,
+}
+
+#[tauri::command]
+pub async fn save_openrouter_key(key: String, state: State<'_, NewsState>) -> Result<(), String> {
+    let mut lock = state
+        .openrouter_key
+        .lock()
+        .map_err(|_| "Lock failed".to_string())?;
+    *lock = key.trim().to_string();
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn fetch_ai_news(state: State<'_, NewsState>) -> Result<Vec<NewsArticle>, String> {
+    let key = {
+        let lock = state
+            .openrouter_key
+            .lock()
+            .map_err(|_| "Lock failed".to_string())?;
+        lock.clone()
+    };
+
+    if key.is_empty() {
+        return Err("API Key fehlt.".to_string());
+    }
+
+    let client = reqwest::Client::new();
+    let body = serde_json::json!({
+        "model": "minimax/minimax-m2.1",
+        "messages": [
+            {"role": "system", "content": "Kurze News, 1-2 Sätze, Deutsch."},
+            {"role": "user", "content": "Tech-News."}
+        ]
+    });
+
+    let response = client
+        .post("https://openrouter.ai/api/v1/chat/completions")
+        .header("Authorization", format!("Bearer {}", key))
+        .header("HTTP-Referer", "http://localhost:1420")
+        .json(&body)
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if !response.status().is_success() {
+        return Err(format!("API Fehler: {}", response.status()));
+    }
+
+    let json_res: serde_json::Value = response.json().await.map_err(|e| e.to_string())?;
+
+    let content = json_res["choices"][0]["message"]["content"]
+        .as_str()
+        .ok_or_else(|| "Kein Content im JSON".to_string())?
+        .to_string();
+
+    Ok(vec![NewsArticle {
+        content,
+        author: "OpenRouter AI".to_string(),
+        created_at: 0,
+    }])
+}
--- a/src/pages/news.rs
+++ b/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>
    }
 }
--- a/styles.css
+++ b/styles.css
@@ -2,7 +2,10 @@
 body {
    background-color: #0f0f13;
    color: #e2e2e7;
-    font-family: "Inter", -apple-system, sans-serif;
+    font-family:
+        "Inter",
+        -apple-system,
+        sans-serif;
    margin: 0;
    line-height: 1.5;
    display: flex;
@@ -243,3 +246,79 @@ html {
    background-color: #facc15; /* Gelb/Orange für "Connecting" */
    box-shadow: 0 0 8px #facc15;
 }
+
+/* --- Markdown Styling für KI News --- */
+.markdown-body {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: #e2e2e7;
+}
+
+/* Fettgedruckter Text in Blau-Weiß-Verlauf Optik */
+.markdown-body strong {
+    color: #ffffff;
+    font-weight: 700;
+}
+
+/* Kursiv für Akzente */
+.markdown-body em {
+    color: #a0a0b0;
+    font-style: italic;
+}
+
+/* Links im KI-Text */
+.markdown-body a {
+    color: #4a90e2;
+    text-decoration: none;
+    border-bottom: 1px solid rgba(74, 144, 226, 0.3);
+    transition: all 0.2s ease;
+}
+
+.markdown-body a:hover {
+    color: #5294e2;
+    border-bottom-color: #5294e2;
+}
+
+/* Listen-Design */
+.markdown-body ul,
+.markdown-body ol {
+    padding-left: 20px;
+    margin: 10px 0;
+}
+
+.markdown-body li {
+    margin-bottom: 6px;
+}
+
+/* Code-Blöcke (falls die KI Code generiert) */
+.markdown-body code {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2px 6px;
+    border-radius: 6px;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.85rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Überschriften innerhalb der Post-Card */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3 {
+    color: #4a90e2;
+    margin-top: 15px;
+    margin-bottom: 8px;
+    font-weight: 700;
+}
+
+.markdown-body h3 {
+    font-size: 1.1rem;
+}
+
+/* Zitate / Blockquotes */
+.markdown-body blockquote {
+    margin: 10px 0;
+    padding-left: 15px;
+    border-left: 3px solid #4a90e2;
+    color: #8e8e93;
+    font-style: italic;
+}