jarno/ws-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: appwide darkmode toggle and daemon connection check

Browse Source
This commit is contained in:
Jarno
2026-02-18 22:20:25 +02:00
parent 2717dde5af
commit d88501a872
9 changed files with 190 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src-tauri/capabilities/default.json
View File

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

16
frontend/src-tauri/capabilities/desktop.json
View File

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

24
frontend/src-tauri/src/commands.rs
View File

@@ -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)
}

13
frontend/src-tauri/src/main.rs
View File

@@ -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

4
frontend/src-tauri/tauri.conf.json
View File

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

114
frontend/src/app.rs
View File

@@ -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()}
}
}

3
frontend/src/bridge.rs
View File

@@ -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;
}

85
frontend/src/popup.rs
View File

@@ -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 |_| {
init_history.dispatch(());
Effect::new(move |prev_status: Option<bool>| {
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>
<main class="rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white">
<div class="max-h-screen p-2 flex flex-col">
<input
class="flex-none p-3 mb-5 rounded-lg bg-zinc-200 dark:bg-zinc-950"
type="text"
node_ref=prompt_input_ref
placeholder="Prompt..."
autofocus
on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
on:keydown=move |ev| {
if ev.key() == "Enter" {
prompt_action.dispatch(prompt_text.get());
set_prompt_text.update(|s| *s = "".to_string());
}
<div class="flex flex-col rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white h-screen w-full">
<header class="p-3">
<input
class="w-full p-3 rounded-lg bg-zinc-200 dark:bg-zinc-950"
type="text"
node_ref=prompt_input_ref
placeholder="Prompt..."
autofocus
on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
on:keydown=move |ev| {
if ev.key() == "Enter" {
prompt_action.dispatch(prompt_text.get());
set_prompt_text.update(|s| *s = "".to_string());
}
prop:value=prompt_text
/>
<div class="flex-auto overflow-y-auto">
<div class="flex flex-col">
<For each=move || messages.get()
key=|msg| msg.id
let(msg)
>
<div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
</For>
</div>
</div>
<div class="flex-none pt-2">
<DaemonStatusIndicator/>
</div>
}
prop:value=prompt_text
/>
</header>
<main class="flex-grow overflow-y-auto p-2">
<div class="flex flex-col">
<For each=move || messages.get()
key=|msg| msg.id
let(msg)
>
<div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
</For>
</div>
</main>
</ThemeProvider>
<div class="fixed bottom-0 right-0 p-2"><DarkModeToggle /></div>
</div>
}
}

19
frontend/styles-input.css
View File

@@ -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;