feat: added confirm dialog for new chat

frontend/src-tauri/src/main.rs

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

frontend/src/components.rs

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

frontend/src/popup.rs

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

frontend/styles-input.css

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

frontend/styles.css

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