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

feat: added confirm dialog for new chat

Browse Source
This commit is contained in:
Jarno
2026-02-25 20:19:09 +02:00
parent a91949a2fd
commit b7f9ac043d
5 changed files with 117 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@ pub struct AppConfig {
pub struct AppState {
grpc_client: Mutex<AiDaemonClient<tonic::transport::Channel>>,
config: Mutex<AppConfig>,
current_chat_id: Mutex<i32>,
}
#[tokio::main]
@@ -27,6 +28,7 @@ async fn main() {
.manage(AppState {
grpc_client: Mutex::new(client),
config: Mutex::new(AppConfig { dark_mode: true }),
current_chat_id: Mutex::new(-1),
})
.plugin(tauri_plugin_global_shortcut::Builder::new().build())
.invoke_handler(tauri::generate_handler![

26
frontend/src/components.rs
View File

@@ -99,3 +99,29 @@ pub fn DarkModeToggle() -> impl IntoView {
</div>
}
}
const DIALOG_BUTTON: &str = "primary-button p-3 m-3";
#[component]
pub fn ConfirmDialog(
is_open: ReadSignal<bool>,
on_confirm: Callback<()>,
on_cancel: Callback<()>,
title: String,
message: String,
) -> impl IntoView {
view! {
<Show when=move || is_open.get()>
<div class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur text-zinc-950 dark:text-white">
<div class="flex flex-col items-center justify-center p-4 rounded-lg bg-white/30 dark:bg-black/30">
<h3 class="text-lg font-bold mb-2">{ title.clone() }</h3>
<p>{ message.clone() }</p>
<div>
<button class="primary-button m-3" on:click=move |_| on_confirm.run(())>Confirm</button>
<button class="primary-button m-3" on:click=move |_| on_cancel.run(())>Cancel</button>
</div>
</div>
</div>
</Show>
}
}

13
frontend/src/popup.rs
View File

@@ -1,6 +1,6 @@
use crate::{
bridge::{invoke, invoke_typed},
components::{DaemonProvider, DarkModeToggle, ThemeProvider},
components::{ConfirmDialog, DaemonProvider, DarkModeToggle, ThemeProvider},
};
use feshared::{
chatmessage::{Message, MessageHistory, TauriCommand},
@@ -93,7 +93,15 @@ pub fn Popup() -> impl IntoView {
}
});
let (show_new_chat_confirm, set_new_chat_confirm) = signal(false);
view! {
<ConfirmDialog
is_open=show_new_chat_confirm
on_confirm=Callback::new(move |_| set_new_chat_confirm.set(false))
on_cancel=Callback::new(move |_| set_new_chat_confirm.set(false))
title="Open a new chat?".to_string()
message="Current chat is stored".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="relative p-3">
<input
@@ -114,7 +122,8 @@ pub fn Popup() -> impl IntoView {
<button class="absolute py-1 px-2 right-5 mt-2
rounded-full
dark:bg-slate-800
dark:hover:bg-slate-600">+</button>
dark:hover:bg-slate-600"
on:click=move |_| set_new_chat_confirm.set(true)>+</button>
</header>
<main class="flex-grow overflow-y-auto p-4">
<div class="flex flex-col">

4
frontend/styles-input.css
View File

@@ -14,6 +14,10 @@
.msg-user {
@apply self-end bg-slate-200 dark:bg-zinc-800;
}
.primary-button {
@apply bg-blue-300 dark:bg-gray-800 rounded-lg p-3;
}
}
body {

74
frontend/styles.css
View File

@@ -579,6 +579,9 @@
.sticky {
position: sticky;
}
.inset-0 {
inset: calc(var(--spacing) * 0);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
@@ -672,6 +675,9 @@
.m-0 {
margin: calc(var(--spacing) * 0);
}
.m-3 {
margin: calc(var(--spacing) * 3);
}
.-mx-1 {
margin-inline: calc(var(--spacing) * -1);
}
@@ -693,6 +699,9 @@
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
@@ -774,6 +783,10 @@
.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);
@@ -1280,6 +1293,9 @@
.justify-items-stretch {
justify-items: stretch;
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
@@ -1559,6 +1575,9 @@
.bg-\[\#fbf0df\] {
background-color: #fbf0df;
}
.bg-blue-300 {
background-color: var(--color-blue-300);
}
.bg-green-600 {
background-color: var(--color-green-600);
}
@@ -1574,6 +1593,12 @@
.bg-white {
background-color: var(--color-white);
}
.bg-white\/30 {
background-color: color-mix(in srgb, #fff 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
}
.bg-yellow-600 {
background-color: var(--color-yellow-600);
}
@@ -2025,6 +2050,10 @@
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2805,11 +2834,48 @@
line-height: var(--tw-leading, var(--text-sm--line-height));
}
}
.dark\:bg-black\/10 {
&:where(.dark, .dark *) {
background-color: color-mix(in srgb, #000 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
}
}
}
.dark\:bg-black\/30 {
&:where(.dark, .dark *) {
background-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
}
}
.dark\:bg-gray-800 {
&:where(.dark, .dark *) {
background-color: var(--color-gray-800);
}
}
.dark\:bg-slate-800 {
&:where(.dark, .dark *) {
background-color: var(--color-slate-800);
}
}
.dark\:bg-white\/10 {
&:where(.dark, .dark *) {
background-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
}
.dark\:bg-white\/50 {
&:where(.dark, .dark *) {
background-color: color-mix(in srgb, #fff 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
}
}
}
.dark\:bg-zinc-900 {
&:where(.dark, .dark *) {
background-color: var(--color-zinc-900);
@@ -2923,6 +2989,14 @@
background-color: var(--color-zinc-800);
}
}
.primary-button {
border-radius: var(--radius-lg);
background-color: var(--color-blue-300);
padding: calc(var(--spacing) * 3);
&:where(.dark, .dark *) {
background-color: var(--color-gray-800);
}
}
}
body {
background-color: transparent !important;