SYNC: new object modal WIP

packages/web/src/modals/NewObjectModal.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import newQuery from '../query/newQuery';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let multiTabIndex = undefined;
+</script>
+
+<ModalBase simple {...$$restProps}>
+  <FormStyledButton
+    value="Query"
+    on:click={() => {
+      newQuery({ multiTabIndex });
+      closeCurrentModal();
+    }}
+  />
+</ModalBase>

packages/web/src/tabpanel/TabsPanel.svelte

@@ -353,6 +353,7 @@
   import { getConnectionLabel } from 'dbgate-tools';
   import { handleAfterTabClick } from '../utility/changeCurrentDbByTab';
   import { getBoolSettingsValue } from '../settings/settingsTools';
+  import NewObjectModal from '../modals/NewObjectModal.svelte';
 
   export let multiTabIndex;
   export let shownTab;
@@ -716,7 +717,7 @@
     {/if}
     <div
       class="icon-button"
-      on:click={() => newQuery({ multiTabIndex })}
+      on:click={() => showModal(NewObjectModal, { multiTabIndex })}
       title="New query"
       data-testid="TabsPanel_buttonNewQuery"
     >

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -17,6 +17,8 @@
   import { openWebLink } from '../utility/simpleTools';
   import { apiCall } from '../utility/api';
   import getElectron from '../utility/getElectron';
+  import { showModal } from '../modals/modalTools';
+  import NewObjectModal from '../modals/NewObjectModal.svelte';
 
   let domSettings;
   let domCloudAccount;
@@ -171,6 +173,15 @@
     </div>
   {/each}
 
+  <div
+    class="wrapper"
+    on:click={() => showModal(NewObjectModal)}
+    data-testid="WidgetIconPanel_addButton"
+    title="Add New"
+  >
+    <FontIcon icon="icon add" />
+  </div>
+
   <div class="flex1">&nbsp;</div>
 
   <!-- <div