refactor: new tab addition

src/dashboard/index.rs

@@ -33,7 +33,7 @@ pub fn Dashboard() -> impl IntoView {
                                   </button>
                               </div>
                           </TabLabel>
-                          <QueryEditor/>
+                          <QueryEditor index/>
                           <QueryTable/>
                       </Tab>
                   }

src/dashboard/query_editor.rs

@@ -18,8 +18,12 @@ pub type ModelCell = Rc<RefCell<Option<CodeEditor>>>;
 pub const MODE_ID: &str = "pgsql";
 
 #[component]
-pub fn QueryEditor() -> impl IntoView {
+pub fn QueryEditor(index: usize) -> impl IntoView {
   let tabs_store = expect_context::<TabsStore>();
+  let active_project = move || match tabs_store.selected_projects.get().get(index) {
+    Some(project) => Some(project.clone()),
+    _ => None,
+  };
   let tabs_store_rc = Rc::new(RefCell::new(tabs_store));
   let show = create_rw_signal(false);
   let _ = use_event_listener(use_document(), ev::keydown, move |event| {
@@ -84,8 +88,16 @@ pub fn QueryEditor() -> impl IntoView {
   view! {
       <div _ref=node_ref class="border-b-1 border-neutral-200 h-72 sticky">
           // <AddCustomQuery show=show/>
-          <div class="absolute bottom-0 items-center flex justify-end px-4 left-0 w-full h-10 bg-gray-50">
-              <div class="flex flex-row gap-2 text-xs">
+          <div class="absolute bottom-0 items-center text-xs flex justify-between px-4 left-0 w-full h-10 bg-gray-50">
+              <Show
+                  when=move || active_project().is_some() && !active_project().unwrap().is_empty()
+                  fallback=|| view! { <div></div> }
+              >
+                  <div class="appearance-auto py-1 px-2 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md">
+                      {active_project}
+                  </div>
+              </Show>
+              <div class="flex flex-row gap-2">
                   <button
                       class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
                       on:click=move |_| show.set(true)
@@ -102,16 +114,6 @@ pub fn QueryEditor() -> impl IntoView {
 
                       "Query"
                   </button>
-                  <button
-                      class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
-                      on:click=move |_| {
-                          let tabs_store = tabs_store_rc.clone();
-                          tabs_store.borrow_mut().add_tab();
-                      }
-                  >
-
-                      "+ Tab"
-                  </button>
               </div>
           </div>
       </div>

src/databases/pgsql/driver.rs

@@ -99,6 +99,14 @@ impl<'a> Pgsql<'a> {
   pub async fn run_default_table_query(&self, sql: &str) {
     let tabs_store = expect_context::<TabsStore>();
     tabs_store.set_editor_value(sql);
+    tabs_store.selected_projects.update(|prev| {
+      let index = tabs_store.convert_selected_tab_to_index();
+      match prev.get_mut(index) {
+        Some(project) => *project = self.project_id.get().clone(),
+        None => prev.push(self.project_id.get().clone()),
+      }
+    });
+
     let query = invoke::<_, PgsqlRunQuery>(
       Invoke::PgsqlRunQuery.as_ref(),
       &InvokePgsqlRunQueryArgs {
@@ -116,7 +124,6 @@ impl<'a> Pgsql<'a> {
         None => prev.push((cols, rows)),
       }
     });
-
     let qp_store = expect_context::<QueryPerformanceContext>();
     qp_store.update(|prev| {
       prev.push_front(QueryPerformanceAtom {

src/databases/pgsql/index.rs

@@ -3,11 +3,12 @@ use leptos_icons::*;
 use leptos_toaster::{Toast, ToastId, ToastVariant, Toasts};
 
 use super::{driver::Pgsql, schema::Schema};
-use crate::store::projects::ProjectsStore;
+use crate::store::{projects::ProjectsStore, tabs::TabsStore};
 use common::enums::ProjectConnectionStatus;
 
 #[component]
 pub fn Pgsql(project_id: String) -> impl IntoView {
+  let tabs_store = expect_context::<TabsStore>();
   let projects_store = expect_context::<ProjectsStore>();
   let project_details = projects_store.select_project_by_name(&project_id).unwrap();
   let connection_params = project_details
@@ -112,18 +113,32 @@ pub fn Pgsql(project_id: String) -> impl IntoView {
 
                       {pgsql.project_id}
                   </button>
-                  <button
-                      class="px-2 rounded-full hover:bg-gray-200"
-                      on:click={
-                          let project_id = project_id.clone();
-                          move |_| {
-                              delete_project.dispatch((projects_store, project_id.clone()));
+                  <div>
+                      <button
+                          class="p-1 rounded-full hover:bg-gray-200"
+                          on:click={
+                              let project_id = project_id.clone();
+                              move |_| {
+                                  tabs_store.add_tab(&project_id);
+                              }
                           }
-                      }
-                  >
+                      >
 
-                      "-"
-                  </button>
+                          <Icon icon=icondata::HiCircleStackOutlineLg width="12" height="12"/>
+                      </button>
+                      <button
+                          class="p-1 rounded-full hover:bg-gray-200"
+                          on:click={
+                              let project_id = project_id.clone();
+                              move |_| {
+                                  delete_project.dispatch((projects_store, project_id.clone()));
+                              }
+                          }
+                      >
+
+                          <Icon icon=icondata::HiTrashOutlineLg width="12" height="12"/>
+                      </button>
+                  </div>
               </div>
               <div class="pl-4">
                   <Show when=move || !pgsql.schemas.get().is_empty() fallback=|| view! {}>

src/databases/pgsql/schema.rs

@@ -45,34 +45,28 @@ pub fn Schema(schema: String) -> impl IntoView {
 
               {(*schema).clone()}
           </button>
+          <div class="pl-2">
+              <Show when=show fallback=|| view! {}>
+                  <For
+                      each={
+                          let schema = schema.clone();
+                          move || {
+                              let schema = (*schema).clone();
+                              pgsql.select_tables_by_schema(&schema).unwrap()
+                          }
+                      }
 
-          {
-              view! {
-                  <div class="pl-2">
-                      <Show when=show fallback=|| view! {}>
-                          <For
-                              each={
-                                  let schema = schema.clone();
-                                  move || {
-                                      let schema = (*schema).clone();
-                                      pgsql.select_tables_by_schema(&schema).unwrap()
-                                  }
-                              }
-
-                              key=|table| table.0.clone()
-                              children={
-                                  let schema = schema.clone();
-                                  move |table| {
-                                      view! { <Table table schema=schema.to_string()/> }
-                                  }
-                              }
-                          />
-
-                      </Show>
-                  </div>
-              }
-          }
+                      key=|table| table.0.clone()
+                      children={
+                          let schema = schema.clone();
+                          move |table| {
+                              view! { <Table table schema=schema.to_string()/> }
+                          }
+                      }
+                  />
 
+              </Show>
+          </div>
       </div>
   }
 }

src/modals/add_custom_query.rs

@@ -1,18 +1,16 @@
 use leptos::*;
 use thaw::{Modal, ModalFooter};
 
-use crate::store::{
-  active_project::ActiveProjectStore, projects::ProjectsStore, query::QueryStore,
-};
+use crate::store::{projects::ProjectsStore, query::QueryStore};
 
 #[component]
 pub fn AddCustomQuery(show: RwSignal<bool>) -> impl IntoView {
   let projects_store = expect_context::<ProjectsStore>();
   let query_store = expect_context::<QueryStore>();
   let (query_title, set_query_title) = create_signal(String::new());
   //let projects = create_memo(move |_| projects_store.get_projects().unwrap());
-  let active_project = expect_context::<ActiveProjectStore>();
-  let (project_name, set_project_name) = create_signal(active_project.0.get().unwrap_or_default());
+
+  let (project_name, set_project_name) = create_signal("".to_string());
   //   create_effect(move |_| {
   //     if !projects.get().is_empty() {
   //       set_project_name(projects.get()[0].clone());

src/store/mod.rs

@@ -1,4 +1,3 @@
-pub mod active_project;
 pub mod atoms;
 pub mod projects;
 pub mod query;