Updated styles.css

frontend/src-tauri/capabilities/default.json

@@ -3,8 +3,5 @@
   "identifier": "default",
   "description": "Capability for the main window",
   "windows": ["main"],
-  "permissions": [
+  "permissions": ["core:default", "opener:default"]
-    "core:default",
-    "opener:default"
-  ]
 }

frontend/src-tauri/capabilities/desktop.json

@@ -1,14 +1,6 @@
 {
   "identifier": "desktop-capability",
-  "platforms": [
+  "platforms": ["macOS", "windows", "linux"],
-    "macOS",
+  "windows": ["main", "dashboard", "popup"],
-    "windows",
+  "permissions": ["global-shortcut:default", "core:event:allow-listen"]
-    "linux"
+}
-  ],
-  "windows": [
-    "main"
-  ],
-  "permissions": [
-    "global-shortcut:default"
-  ]
-}

frontend/src-tauri/src/commands.rs

@@ -1,3 +1,4 @@
+use serde::Serialize;
 use tauri::{Emitter, Manager, State};
 
 use feshared::{
@@ -113,3 +114,26 @@ pub async fn daemon_state(state: State<'_, AppState>) -> Result<DaemonState, Str
         }),
     }
 }
+
+#[derive(Clone, Serialize)]
+struct DarkMode {
+    is_dark_mode: bool,
+}
+
+#[tauri::command]
+pub async fn toggle_dark_mode(
+    state: State<'_, AppState>,
+    handle: tauri::AppHandle,
+) -> Result<bool, String> {
+    let mut config = state.config.lock().await;
+    config.dark_mode = !config.dark_mode;
+    handle
+        .emit(
+            "dark-mode-changed",
+            DarkMode {
+                is_dark_mode: config.dark_mode,
+            },
+        )
+        .unwrap();
+    Ok(config.dark_mode)
+}

frontend/src-tauri/src/main.rs

@@ -6,12 +6,16 @@ mod commands;
 use tauri_plugin_global_shortcut::{Code, GlobalShortcutExt, Modifiers, Shortcut, ShortcutState};
 use tokio::sync::Mutex;
 
-use commands::{chat, chat_history, daemon_state, toggle_popup};
+use commands::{chat, chat_history, daemon_state, toggle_dark_mode, toggle_popup};
 use shared::ai::ai_daemon_client::AiDaemonClient;
 
+pub struct AppConfig {
+    dark_mode: bool,
+}
+
 pub struct AppState {
     grpc_client: Mutex<AiDaemonClient<tonic::transport::Channel>>,
-    current_chat: Mutex<Option<i64>>,
+    config: Mutex<AppConfig>,
 }
 
 #[tokio::main]
@@ -22,14 +26,15 @@ async fn main() {
     tauri::Builder::default()
         .manage(AppState {
             grpc_client: Mutex::new(client),
-            current_chat: Mutex::new(None),
+            config: Mutex::new(AppConfig { dark_mode: true }),
         })
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .invoke_handler(tauri::generate_handler![
             toggle_popup,
             chat_history,
             chat,
-            daemon_state
+            daemon_state,
+            toggle_dark_mode,
         ])
         .setup(|app| {
             /* Auto-hide popup when focus is lost

frontend/src-tauri/tauri.conf.json

@@ -22,8 +22,8 @@
         "label": "popup",
         "title": "AI Quick Action",
         "url": "/popup",
-        "width": 800,
+        "width": 960,
-        "height": 400,
+        "height": 720,
         "decorations": false,
         "transparent": true,
         "alwaysOnTop": true,

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::bridge::{invoke, listen};
-use crate::popup::Popup;
+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">
+            <DaemonProvider>
-            <DaemonStatusIndicator />
+                <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">
+        {children()}
-            <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>
     }
 }

frontend/src/bridge.rs

@@ -3,4 +3,7 @@ use wasm_bindgen::prelude::*;
 extern "C" {
     #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
     pub async fn invoke(cmd: &str, args: JsValue) -> JsValue;
+
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
+    pub async fn listen(event: &str, handler: &Closure<dyn FnMut(JsValue)>) -> JsValue;
 }

frontend/src/popup.rs

@@ -1,18 +1,33 @@
 use crate::{
-    app::{DaemonStatusIndicator, ThemeProvider},
+    app::{DaemonProvider, DarkModeToggle, ThemeProvider},
     bridge::invoke,
 };
-use feshared::chatmessage::{Message, MessageHistory};
+use feshared::{
+    chatmessage::{Message, MessageHistory},
+    daemon::DaemonState,
+};
 use leptos::{ev::keydown, html::Input, prelude::*};
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue};
 use wasm_bindgen_futures::spawn_local;
 
+#[component]
+pub fn PopupView() -> impl IntoView {
+    view! {<ThemeProvider>
+        <DaemonProvider>
+        <Popup />
+        </DaemonProvider>
+    </ThemeProvider>
+    }
+}
+
 #[component]
 pub fn Popup() -> impl IntoView {
     // Prompt signals and and action
     let prompt_input_ref = NodeRef::<Input>::new();
     let (prompt_text, set_prompt_text) = signal(String::new());
     let (messages, set_messages) = signal(Vec::<Message>::new());
+    let status_res =
+        use_context::<LocalResource<DaemonState>>().expect("No daemon connection context!");
 
     let init_history = Action::new_local(|(): &()| async move {
         let response = invoke(
@@ -23,8 +38,12 @@ pub fn Popup() -> impl IntoView {
         let history: MessageHistory = serde_wasm_bindgen::from_value(response).unwrap();
         history
     });
-    Effect::new(move |_| {
+    Effect::new(move |prev_status: Option<bool>| {
-        init_history.dispatch(());
+        let current_ok = status_res.get().map(|s| s.is_ok).unwrap_or(false);
+        if current_ok && prev_status != Some(true) {
+            init_history.dispatch(());
+        }
+        current_ok
     });
     Effect::new(move |_| {
         if let Some(mut dat) = init_history.value().get() {
@@ -77,39 +96,35 @@ pub fn Popup() -> impl IntoView {
     });
 
     view! {
-        <ThemeProvider>
+        <div class="flex flex-col rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white h-screen w-full">
-            <main class="rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white">
+            <header class="p-3">
-                <div class="max-h-screen p-2 flex flex-col">
+                <input
-                    <input
+                    class="w-full p-3 rounded-lg bg-zinc-200 dark:bg-zinc-950"
-                        class="flex-none p-3 mb-5 rounded-lg bg-zinc-200 dark:bg-zinc-950"
+                    type="text"
-                        type="text"
+                    node_ref=prompt_input_ref
-                        node_ref=prompt_input_ref
+                    placeholder="Prompt..."
-                        placeholder="Prompt..."
+                    autofocus
-                        autofocus
+                    on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
-                        on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
+                    on:keydown=move |ev| {
-                        on:keydown=move |ev| {
+                        if ev.key() == "Enter" {
-                            if ev.key() == "Enter" {
+                            prompt_action.dispatch(prompt_text.get());
-                                prompt_action.dispatch(prompt_text.get());
+                            set_prompt_text.update(|s| *s = "".to_string());
-                                set_prompt_text.update(|s| *s = "".to_string());
-                            }
                         }
-                        prop:value=prompt_text
+                    }
-                        />
+                    prop:value=prompt_text
-                    <div class="flex-auto overflow-y-auto">
+                    />
-                        <div class="flex flex-col">
+            </header>
-                            <For each=move || messages.get()
+            <main class="flex-grow overflow-y-auto p-2">
-                            key=|msg| msg.id
+                <div class="flex flex-col">
-                            let(msg)
+                    <For each=move || messages.get()
-                            >
+                    key=|msg| msg.id
-                            <div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
+                    let(msg)
-                            </For>
+                    >
-                        </div>
+                    <div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
-                    </div>
+                    </For>
-                    <div class="flex-none pt-2">
-                    <DaemonStatusIndicator/>
-                    </div>
                 </div>
             </main>
-        </ThemeProvider>
+            <div class="fixed bottom-0 right-0 p-2"><DarkModeToggle /></div>
+        </div>
     }
 }

frontend/styles-input.css

@@ -21,25 +21,6 @@ body {
     margin: 0;
 }
 
-.dark-input {
-    padding: 12px 20px;
-    margin: 8px 0;
-
-    /* Colors & Background */
-    background-color: #1e1e1e;
-    color: #ffffff;
-    border: 1px solid #333333;
-    border-radius: 8px; /* Soft rounded corners */
-
-    /* Typography */
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-
-    /* Smooth Transition */
-    transition: all 0.3s ease;
-    outline: none;
-}
-
 @keyframes slideIn {
     from {
         opacity: 0;

frontend/styles.css

@@ -579,21 +579,18 @@
   .sticky {
     position: sticky;
   }
-  .top-4 {
+  .right-0 {
-    top: calc(var(--spacing) * 4);
+    right: calc(var(--spacing) * 0);
   }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .right-4 {
+  .bottom-0 {
-    right: calc(var(--spacing) * 4);
+    bottom: calc(var(--spacing) * 0);
   }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
   .isolate {
     isolation: isolate;
   }
@@ -693,9 +690,6 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mb-5 {
-    margin-bottom: calc(var(--spacing) * 5);
-  }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
@@ -1560,9 +1554,6 @@
   .border-\[\#fbf0df\] {
     border-color: #fbf0df;
   }
-  .border-zinc-200 {
-    border-color: var(--color-zinc-200);
-  }
   .bg-\[\#1a1a1a\] {
     background-color: #1a1a1a;
   }
@@ -1578,9 +1569,6 @@
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
-  .bg-slate-200 {
-    background-color: var(--color-slate-200);
-  }
   .bg-slate-300 {
     background-color: var(--color-slate-300);
   }
@@ -2154,6 +2142,9 @@
   .text-gray-400 {
     color: var(--color-gray-400);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
   .text-gray-950 {
     color: var(--color-gray-950);
   }
@@ -2450,10 +2441,6 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
-  .duration-500 {
-    --tw-duration: 500ms;
-    transition-duration: 500ms;
-  }
   .ease-in {
     --tw-ease: var(--ease-in);
     transition-timing-function: var(--ease-in);
@@ -2819,16 +2806,6 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .dark\:border-gray-700 {
-    &:where(.dark, .dark *) {
-      border-color: var(--color-gray-700);
-    }
-  }
-  .dark\:bg-gray-700 {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-gray-700);
-    }
-  }
   .dark\:bg-slate-800 {
     &:where(.dark, .dark *) {
       background-color: var(--color-slate-800);
@@ -2937,18 +2914,6 @@ body {
   background-color: transparent !important;
   margin: 0;
 }
-.dark-input {
-  padding: 12px 20px;
-  margin: 8px 0;
-  background-color: #1e1e1e;
-  color: #ffffff;
-  border: 1px solid #333333;
-  border-radius: 8px;
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  transition: all 0.3s ease;
-  outline: none;
-}
 @keyframes slideIn {
   from {
     opacity: 0;