SYNC: new object modal

packages/web/src/buttons/NewObjectButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let icon;
+  export let title;
+  export let description;
+</script>
+
+<div class="new-object-button" on:click>
+  <div class="icon">
+    <FontIcon {icon} />
+  </div>
+  <span class="title">{title}</span>
+  {#if description}
+    <div class="description">{description}</div>
+  {/if}
+</div>
+
+<style>
+  .new-object-button {
+    width: 150px;
+    height: 150px;
+    background-color: var(--theme-bg-1);
+    border-radius: 4px;
+    border: 1px solid var(--theme-border);
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .new-object-button:hover {
+    background-color: var(--theme-bg-2);
+  }
+  .icon {
+    font-size: 3em;
+    margin-top: 20px;
+    color: var(--theme-font-1);
+  }
+  .title {
+    margin-top: 0.2em;
+    font-weight: bold;
+  }
+  .description {
+    margin-top: 0.2em;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    font-size: 0.9em;
+    color: var(--theme-font-2);
+  }
+</style>

packages/web/src/commands/stdCommands.ts

@@ -5,6 +5,7 @@ import {
   emptyConnectionGroupNames,
   extensions,
   getAppUpdaterActive,
+  getCloudSigninTokenHolder,
   getExtensions,
   getVisibleToolbar,
   visibleToolbar,
@@ -132,7 +133,8 @@ registerCommand({
   category: 'New',
   toolbarOrder: 1,
   name: 'Connection on Cloud',
-  testEnabled: () => !getCurrentConfig()?.runAsPortal && !getCurrentConfig()?.storageDatabase,
+  testEnabled: () =>
+    !getCurrentConfig()?.runAsPortal && !getCurrentConfig()?.storageDatabase && !!getCloudSigninTokenHolder(),
   onClick: () => {
     openNewTab({
       title: 'New Connection on Cloud',

packages/web/src/elements/Chip.svelte

@@ -17,14 +17,14 @@
     padding: 0.25em 0.5em;
     border-radius: 1em;
     background-color: var(--theme-bg-2);
-    color: var(--theme-text-1);
+    color: var(--theme-font-1);
     font-size: 0.875em;
     cursor: pointer;
     margin: 2px;
   }
   .chip .close {
     margin-left: 0.2em;
-    color: var(--theme-text-2);
+    color: var(--theme-font-2);
     cursor: pointer;
   }
   .chip .close:hover {

packages/web/src/icons/FontIcon.svelte

@@ -334,6 +334,9 @@
     'img db-restore': 'mdi mdi-database-import color-icon-red',
     'img settings': 'mdi mdi-cog color-icon-blue',
     'img data-deploy': 'mdi mdi-database-settings color-icon-green',
+
+    'img new-sql-file': 'mdi mdi-file color-icon-blue',
+    'img new-connection': 'mdi mdi-connection color-icon-yellow',
   };
 </script>
 

packages/web/src/modals/ModalBase.svelte

@@ -9,6 +9,7 @@
   export let fullScreen = false;
   export let noPadding = false;
   export let simple = false;
+  export let simplefix = false;
   export let modalId;
 
   function handleCloseModal() {
@@ -43,6 +44,7 @@
     class="window"
     class:fullScreen
     class:simple
+    class:simplefix
     use:clickOutside
     on:clickOutside={handleClickOutside}
     data-testid="ModalBase_window"
@@ -92,7 +94,7 @@
     flex-direction: column;
   }
 
-  .window:not(.fullScreen):not(.simple) {
+  .window:not(.fullScreen):not(.simple):not(.simplefix) {
     border-radius: 10px;
     margin: auto;
     margin-top: 15vh;
@@ -114,6 +116,12 @@
     width: 30%;
   }
 
+  .window.simplefix {
+    margin: auto;
+    max-width: 600px;
+    margin-top: 10vh;
+  }
+
   .close {
     font-size: 12pt;
     padding: 5px 10px;

packages/web/src/modals/NewObjectModal.svelte

@@ -1,18 +1,109 @@
 <script lang="ts">
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import NewObjectButton from '../buttons/NewObjectButton.svelte';
+  import runCommand from '../commands/runCommand';
   import newQuery from '../query/newQuery';
+  import { commandsCustomized, selectedWidget } from '../stores';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
   export let multiTabIndex = undefined;
 </script>
 
-<ModalBase simple {...$$restProps}>
-  <FormStyledButton
-    value="Query"
+<ModalBase simplefix {...$$restProps}>
+  <div class="create-header">Create new</div>
+  <div class="wrapper">
+    <NewObjectButton
+      icon="img new-sql-file"
+      title="Query"
+      description="SQL query editor"
       on:click={() => {
         newQuery({ multiTabIndex });
         closeCurrentModal();
       }}
     />
+    {#if $commandsCustomized['new.connection']?.enabled}
+      <NewObjectButton
+        icon="img new-connection"
+        title="Connection"
+        description="Database connection stored locally"
+        on:click={() => {
+          $selectedWidget = 'database';
+          runCommand('new.connection');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+    {#if $commandsCustomized['new.connectionOnCloud']?.enabled}
+      <NewObjectButton
+        icon="img cloud-connection"
+        title="Connection on Cloud"
+        description="Database connection stored on DbGate Cloud"
+        on:click={() => {
+          $selectedWidget = 'cloud-private';
+          runCommand('new.connectionOnCloud');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+    {#if $commandsCustomized['new.queryDesign']?.enabled}
+      <NewObjectButton
+        icon="img query-design"
+        title="Query Designer"
+        description="Design SQL queries visually"
+        on:click={() => {
+          runCommand('new.queryDesign');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+    {#if $commandsCustomized['new.diagram']?.enabled}
+      <NewObjectButton
+        icon="img diagram"
+        title="ER Diagram"
+        description="Visualize database structure"
+        on:click={() => {
+          runCommand('new.diagram');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+    {#if $commandsCustomized['new.perspective']?.enabled}
+      <NewObjectButton
+        icon="img perspective"
+        title="Perspective"
+        description="Join complex data from multiple databases"
+        on:click={() => {
+          runCommand('new.perspective');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+    {#if $commandsCustomized['new.table']?.enabled}
+      <NewObjectButton
+        icon="img table"
+        title="Table"
+        description="Create table in the current database"
+        on:click={() => {
+          runCommand('new.table');
+          closeCurrentModal();
+        }}
+      />
+    {/if}
+  </div>
 </ModalBase>
+
+<style>
+  .wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    padding: 20px;
+  }
+  .create-header {
+    text-transform: uppercase;
+    color: var(--theme-font-3);
+    font-size: 150%;
+    text-align: center;
+  }
+</style>

packages/web/src/stores.ts

@@ -485,4 +485,10 @@ export const currentActiveCloudTags = derived(currentDatabase, $currentDatabase
   return res;
 });
 
+let cloudSigninTokenHolderValue = null;
+cloudSigninTokenHolder.subscribe(value => {
+  cloudSigninTokenHolderValue = value;
+});
+export const getCloudSigninTokenHolder = () => cloudSigninTokenHolderValue;
+
 window['__changeCurrentTheme'] = theme => currentTheme.set(theme);