feat: appwide darkmode toggle and daemon connection check

frontend/src/app.rs

@@ -1,15 +1,17 @@
 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 wasm_bindgen::JsValue;
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::{prelude::Closure, JsValue};
 
-use crate::bridge::invoke;
-use crate::popup::Popup;
+use crate::bridge::{invoke, listen};
+use crate::popup::PopupView;
 
 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";
 
@@ -19,7 +21,7 @@ pub fn App() -> impl IntoView {
         <Router>
             <Routes fallback=|| view! { "Page not found."}>
                 <Route path=path!("/") view=Dashboard />
-                <Route path=path!("/popup") view=Popup />
+                <Route path=path!("/popup") view=PopupView />
             </Routes>
         </Router>
     }
@@ -33,18 +35,43 @@ 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>
-            <div class="fixed left-4 bottom-4">
-            <DaemonStatusIndicator />
+            <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">
+                <DarkModeToggle />
             </div>
-            <main class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white p-3">
-                <button class=BTN_PRIMARY on:click=on_click>Open chat</button>
-            </main>
         </ThemeProvider>
     }
 }
 
+#[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);
@@ -89,9 +116,69 @@ pub fn DaemonStatusIndicator() -> impl IntoView {
     }
 }
 
+#[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()
@@ -104,13 +191,6 @@ pub fn ThemeProvider(children: Children) -> impl IntoView {
     });
 
     view! {
-        <div class="min-h-screen transition-colors duration-500">
-            <button
-                on:click=move |_| set_dark.update(|v| *v = !*v)
-                class="fixed top-4 right-4 p-2 bg-slate-200 dark:bg-slate-800 rounded-full">
-                    {move || if is_dark.get() { "🌙" } else { "☀️" }}
-                </button>
-            {children()}
-        </div>
+        {children()}
     }
 }