feat: moved components to their own module, use ollama for the chat.

2026-02-21 14:59:31 +02:00
parent cafec90019
commit edc425e28f
9 changed files with 201 additions and 142 deletions
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -1,17 +1,19 @@
 use std::time::Duration;

 use feshared::daemon::DaemonState;
-use leptos::logging::log;
 use leptos::{prelude::*, reactive::spawn_local};
 use leptos_router::{
    components::{Route, Router, Routes},
    path,
 };
-use serde::{Deserialize, Serialize};
-use wasm_bindgen::{prelude::Closure, JsValue};
+use wasm_bindgen::JsValue;

-use crate::bridge::{invoke, listen};
 use crate::popup::PopupView;
+use crate::{bridge::invoke, components::DarkModeToggle};
+use crate::{
+    bridge::invoke_typed,
+    components::{DaemonProvider, ThemeProvider},
+};

 pub const BTN_PRIMARY: &str = "bg-slate-300 hover:bg-slate-400 dark:bg-slate-800 hover:dark-bg-slate-700 px-4 py-2 rounded-md";

@@ -35,18 +37,11 @@ fn Dashboard() -> impl IntoView {
            invoke("toggle_popup", empty_args).await;
        });
    };
-
-    let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
-        spawn_local(async {
-            let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
-        });
-    };
    view! {
        <ThemeProvider>
            <DaemonProvider>
                <div class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white">
                        <button class=BTN_PRIMARY on:click=on_click>Open chat</button>
-                        <button class=BTN_PRIMARY on:click=toggle_dark_mode>asdf?</button>
                </div>
            </DaemonProvider>
            <div class="fixed bottom-0 right-0 p-2">
@@ -56,22 +51,6 @@ fn Dashboard() -> impl IntoView {
    }
 }

-#[component]
-pub fn DarkModeToggle() -> impl IntoView {
-    let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
-        spawn_local(async {
-            let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
-        });
-    };
-    view! {
-        <div on:click=toggle_dark_mode class="text-gray-600 dark:text-gray-600">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-            </svg>
-        </div>
-    }
-}
-
 #[component]
 pub fn DaemonStatusIndicator() -> impl IntoView {
    let (poll_count, set_pool_count) = signal(0);
@@ -81,8 +60,7 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
    );
    let status = LocalResource::new(move || async move {
        poll_count.get();
-        let val = invoke("daemon_state", JsValue::NULL).await;
-        let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
+        let s: DaemonState = invoke_typed("daemon_state", JsValue::NULL).await;
        s
    });

@@ -115,82 +93,3 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
        </div>
    }
 }
-
-#[component]
-pub fn DaemonProvider(children: ChildrenFn) -> impl IntoView {
-    let (poll_count, set_pool_count) = signal(0);
-    set_interval(
-        move || set_pool_count.update(|v| *v += 1),
-        Duration::from_secs(1),
-    );
-    let status_res = LocalResource::new(move || async move {
-        poll_count.get();
-        let val = invoke("daemon_state", JsValue::NULL).await;
-        let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
-        s
-    });
-
-    let is_daemon_ok = Memo::new(move |_| status_res.get().map(|s| (s.is_ok, s.error)));
-
-    provide_context(status_res);
-
-    move || match is_daemon_ok.get() {
-        Some((true, _)) => children().into_any(),
-        Some((false, err)) => view! { <DaemonErrorStatus error=err/> }.into_any(),
-        None => view! { <p>Connecting...</p> }.into_any(),
-    }
-}
-
-#[component]
-fn DaemonErrorStatus(error: Option<String>) -> impl IntoView {
-    view! {
-        <ThemeProvider>
-            <div class="w-screen h-screen bg-white dark:bg-zinc-900">
-                <p>{ error.unwrap_or("Daemon error!".to_string()) } </p>
-            </div>
-        </ThemeProvider>
-    }
-}
-
-#[derive(Deserialize, Serialize, Clone)]
-struct DarkMode {
-    is_dark_mode: bool,
-}
-
-#[component]
-pub fn ThemeProvider(children: Children) -> impl IntoView {
-    let (is_dark, set_dark) = signal(false);
-
-    Effect::new(move |_| {
-        spawn_local(async move {
-            let handler = Closure::wrap(Box::new(move |evt: JsValue| {
-                log!("Received!!!");
-                #[derive(Deserialize)]
-                struct TauriEvent<T> {
-                    payload: T,
-                }
-                if let Ok(wrapper) = serde_wasm_bindgen::from_value::<TauriEvent<DarkMode>>(evt) {
-                    set_dark.set(wrapper.payload.is_dark_mode);
-                }
-            }) as Box<dyn FnMut(JsValue)>);
-            let unlisten = listen("dark-mode-changed", &handler).await;
-            // TODO use on_cleanup to call the unlisten JS function.
-            handler.forget()
-        });
-    });
-
-    Effect::new(move |_| {
-        let el = document()
-            .document_element()
-            .expect("HTML element not found!");
-        if is_dark.get() {
-            let _ = el.set_attribute("class", "dark");
-        } else {
-            let _ = el.set_attribute("class", "");
-        }
-    });
-
-    view! {
-        {children()}
-    }
-}
--- a/frontend/src/bridge.rs
+++ b/frontend/src/bridge.rs
@@ -1,3 +1,4 @@
+use serde::{de::DeserializeOwned, Deserialize};
 use wasm_bindgen::prelude::*;
 #[wasm_bindgen]
 extern "C" {
@@ -7,3 +8,29 @@ extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
    pub async fn listen(event: &str, handler: &Closure<dyn FnMut(JsValue)>) -> JsValue;
 }
+
+pub async fn invoke_typed<T>(cmd: &str, args: JsValue) -> T
+where
+    T: DeserializeOwned,
+{
+    let response = invoke(cmd, args).await;
+    let result: T = serde_wasm_bindgen::from_value(response).unwrap();
+    result
+}
+
+pub fn event_handler<T, F>(callback: F) -> Closure<dyn FnMut(JsValue)>
+where
+    T: DeserializeOwned + 'static,
+    F: Fn(T) + 'static,
+{
+    Closure::new(move |val: JsValue| {
+        #[derive(Deserialize)]
+        struct TauriEvent<T> {
+            payload: T,
+        }
+
+        if let Ok(wrapper) = serde_wasm_bindgen::from_value::<TauriEvent<T>>(val) {
+            callback(wrapper.payload)
+        }
+    })
+}
--- a/frontend/src/components.rs
+++ b/frontend/src/components.rs
@@ -0,0 +1,101 @@
+use std::time::Duration;
+
+use feshared::daemon::DaemonState;
+use leptos::{component, prelude::*, reactive::spawn_local, view, IntoView};
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::JsValue;
+
+use crate::bridge::{event_handler, invoke, invoke_typed, listen};
+
+#[component]
+pub fn DaemonProvider(children: ChildrenFn) -> impl IntoView {
+    let (poll_count, set_pool_count) = signal(0);
+    set_interval(
+        move || set_pool_count.update(|v| *v += 1),
+        Duration::from_secs(1),
+    );
+    let status_res = LocalResource::new(move || async move {
+        poll_count.get();
+        let s: DaemonState = invoke_typed("daemon_state", JsValue::NULL).await;
+        s
+    });
+
+    let is_daemon_ok = Memo::new(move |_| status_res.get().map(|s| (s.is_ok, s.error)));
+
+    provide_context(status_res);
+
+    move || match is_daemon_ok.get() {
+        Some((true, _)) => children().into_any(),
+        Some((false, err)) => view! { <DaemonErrorStatus error=err/> }.into_any(),
+        None => view! { <p>Connecting...</p> }.into_any(),
+    }
+}
+
+#[component]
+pub fn DaemonErrorStatus(error: Option<String>) -> impl IntoView {
+    view! {
+        <div class="w-screen h-screen
+            text-gray-950 dark:text-white
+            bg-white dark:bg-zinc-900
+            flex justify-center items-center">
+            <div class="text-zinc-100 dark:text-zinc-800 fixed w-full">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+            </div>
+            <span class="fixed">{ error.unwrap_or("Daemon error!".to_string()) } </span>
+        </div>
+    }
+}
+
+#[derive(Deserialize, Serialize, Clone)]
+pub struct DarkMode {
+    is_dark_mode: bool,
+}
+
+#[component]
+pub fn ThemeProvider(children: Children) -> impl IntoView {
+    let (is_dark, set_dark) = signal(true);
+
+    Effect::new(move |_| {
+        spawn_local(async move {
+            let hndlr = event_handler(move |mode: DarkMode| {
+                set_dark.set(mode.is_dark_mode);
+            });
+            // TODO use on_cleanup to call the unlisten JS function.
+            let unlisten = listen("dark-mode-changed", &hndlr).await;
+            hndlr.forget()
+        });
+    });
+
+    Effect::new(move |_| {
+        let el = document()
+            .document_element()
+            .expect("HTML element not found!");
+        if is_dark.get() {
+            let _ = el.set_attribute("class", "dark");
+        } else {
+            let _ = el.set_attribute("class", "");
+        }
+    });
+
+    view! {
+        {children()}
+    }
+}
+
+#[component]
+pub fn DarkModeToggle() -> impl IntoView {
+    let toggle_dark_mode = |_ev: leptos::ev::MouseEvent| {
+        spawn_local(async {
+            let _ = invoke("toggle_dark_mode", JsValue::UNDEFINED).await;
+        });
+    };
+    view! {
+        <div on:click=toggle_dark_mode class="text-gray-600 dark:text-gray-600">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+            </svg>
+        </div>
+    }
+}
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -1,5 +1,6 @@
 mod app;
 mod bridge;
+mod components;
 mod popup;

 use app::*;
--- a/frontend/src/popup.rs
+++ b/frontend/src/popup.rs
@@ -1,6 +1,6 @@
 use crate::{
-    app::{DaemonProvider, DarkModeToggle, ThemeProvider},
-    bridge::invoke,
+    bridge::{invoke, invoke_typed},
+    components::{DaemonProvider, DarkModeToggle, ThemeProvider},
 };
 use feshared::{
    chatmessage::{Message, MessageHistory},
@@ -14,7 +14,7 @@ use wasm_bindgen_futures::spawn_local;
 pub fn PopupView() -> impl IntoView {
    view! {<ThemeProvider>
        <DaemonProvider>
-        <Popup />
+            <Popup />
        </DaemonProvider>
    </ThemeProvider>
    }
@@ -30,12 +30,11 @@ pub fn Popup() -> impl IntoView {
        use_context::<LocalResource<DaemonState>>().expect("No daemon connection context!");

    let init_history = Action::new_local(|(): &()| async move {
-        let response = invoke(
+        let history: MessageHistory = invoke_typed(
            "chat_history",
            serde_wasm_bindgen::to_value(&serde_json::json!({"chat_id": 1})).unwrap(),
        )
        .await;
-        let history: MessageHistory = serde_wasm_bindgen::from_value(response).unwrap();
        history
    });
    Effect::new(move |prev_status: Option<bool>| {
@@ -55,12 +54,11 @@ pub fn Popup() -> impl IntoView {
    let prompt_action = Action::new_local(|prompt: &String| {
        let prompt = prompt.clone();
        async move {
-            let response = invoke(
+            let result: Vec<Message> = invoke_typed(
                "chat",
                serde_wasm_bindgen::to_value(&serde_json::json!({"prompt": prompt})).unwrap(),
            )
            .await;
-            let result: Vec<Message> = serde_wasm_bindgen::from_value(response).unwrap();
            result
        }
    });
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -588,9 +588,6 @@
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
  .isolate {
    isolation: isolate;
  }
@@ -771,10 +768,6 @@
  .field-sizing-fixed {
    field-sizing: fixed;
  }
-  .size-3 {
-    width: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 3);
-  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
@@ -1281,9 +1274,6 @@
  .justify-items-stretch {
    justify-items: stretch;
  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
@@ -1963,9 +1953,6 @@
  .py-\[0\.2rem\] {
    padding-block: 0.2rem;
  }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
@@ -2151,6 +2138,9 @@
  .text-white {
    color: var(--color-white);
  }
+  .text-zinc-100 {
+    color: var(--color-zinc-100);
+  }
  .text-zinc-950 {
    color: var(--color-zinc-950);
  }
@@ -2831,6 +2821,11 @@
      color: var(--color-white);
    }
  }
+  .dark\:text-zinc-800 {
+    &:where(.dark, .dark *) {
+      color: var(--color-zinc-800);
+    }
+  }
  .\[\&_svg\]\:pointer-events-none {
    & svg {
      pointer-events: none;