feat: update tabs

Author: dancixx

.vscode/settings.json

@@ -1,14 +1,6 @@
 {
-  "emmet.includeLanguages": {
-    "rust": "html",
-    "*.rs": "html"
-  },
   "tailwindCSS.includeLanguages": {
-    "rust": "rust",
-    "*.rs": "rust"
-  },
-  "files.associations": {
-    "*.rs": "rust"
+    "rust": "html"
   },
   "editor.quickSuggestions": {
     "other": "on",

Cargo.toml

@@ -5,7 +5,7 @@ edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 [dependencies]
-leptos = { version = "0.6.6", features = ["csr", "nightly"] }
+leptos = { version = "0.6.8", features = ["csr", "nightly"] }
 leptos_devtools = { git = "https://github.com/luoxiaozero/leptos-devtools" }
 serde = { version = "1.0.192", features = ["derive"] }
 serde-wasm-bindgen = "0.6.3"
@@ -17,7 +17,7 @@ serde_json = "1.0.113"
 wasm-bindgen-futures = "0.4.39"
 monaco = "0.4.0"
 tauri-sys = { git = "https://github.com/JonasKruckenberg/tauri-sys", features = ["all"] }
-thaw = { version = "0.2.1", features = ["csr"] }
+thaw = { version = "0.2.2", features = ["csr"] }
 common = { path = "common" }
 futures = "0.3.30"
 async-stream = "0.3.5"

src/app.rs

@@ -1,5 +1,6 @@
 use leptos::*;
-use thaw::{Button, Tab, TabLabel, Tabs};
+use leptos_icons::*;
+use thaw::{Button, ButtonSize, Tab, TabLabel, Tabs};
 
 use crate::{
   enums::QueryTableLayout,
@@ -26,7 +27,7 @@ pub fn App() -> impl IntoView {
   provide_context(create_rw_signal(0.0f32));
   provide_context(ActiveProjectStore::default());
   provide_context(TabsStore::default());
-  let tabs = use_context::<tabs::TabsStore>().unwrap();
+  let mut tabs = use_context::<tabs::TabsStore>().unwrap();
 
   view! {
       <div class="flex h-screen">
@@ -40,10 +41,16 @@ pub fn App() -> impl IntoView {
                           children=move |index| {
                               view! {
                                   <Tab key=index.to_string()>
-                                      <TabLabel class="p-0" slot>
-                                          <div class="flex flex-row items-center justify-between w-20">
-                                              <div>{(index + 1).to_string()}</div>
-                                              <button class="rounded-md text-xs">X</button>
+                                      <TabLabel slot>
+                                          <div class="flex flex-row items-center justify-between gap-2 h-full text-sm">
+                                              <span>{format!("Tab {}", (index + 1).to_string())}</span>
+                                              <button
+                                                  class="rounded-full p-1 hover:bg-gray-100"
+                                                  on:click=move |_| { tabs.remove_editor(index) }
+                                              >
+
+                                                  <Icon icon=icondata::CgClose width="16" height="16"/>
+                                              </button>
                                           </div>
                                       </TabLabel>
                                       <QueryEditor/>
@@ -55,7 +62,9 @@ pub fn App() -> impl IntoView {
 
                   </Tabs>
                   <Button
-                      class="absolute top-2 right-2"
+                      size=ButtonSize::Small
+                      icon=icondata::TbPlus
+                      class="absolute top-2 right-2 text-sm"
                       on:click=move |_| {
                           tabs.active_tabs.update(|prev| *prev += 1);
                           tabs.selected_tab
@@ -69,7 +78,7 @@ pub fn App() -> impl IntoView {
                       }
                   >
 
-                      "+"
+                      {"Add Tab"}
                   </Button>
               </main>
               <Footer/>

src/store/tabs.rs

@@ -122,9 +122,21 @@ impl TabsStore {
 
   #[allow(dead_code)]
   pub fn remove_editor(&mut self, index: usize) {
+    if self.active_tabs.get() == 1 {
+      return;
+    }
+
+    self.active_tabs.update(|prev| {
+      *prev -= 1;
+    });
+
     self.editors.update(|prev| {
       prev.remove(index);
     });
+
+    self.sql_results.update(|prev| {
+      prev.remove(index);
+    });
   }
 
   pub fn select_active_editor(&self) -> ModelCell {
@@ -197,3 +209,4 @@ impl TabsStore {
     None
   }
 }
+