open structure/data from status bar

packages/web/src/icons/FontIcon.svelte

@@ -41,6 +41,7 @@
     'icon query-design': 'mdi mdi-vector-polyline-edit',
     'icon form': 'mdi mdi-form-select',
     'icon history': 'mdi mdi-history',
+    'icon structure': 'mdi mdi-tools',
 
     'icon edit': 'mdi mdi-pencil',
     'icon delete': 'mdi mdi-delete',

packages/web/src/tabs/TableDataTab.svelte

@@ -49,6 +49,8 @@
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
   import { showSnackbarSuccess } from '../utility/snackbar';
+  import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
+  import openNewTab from '../utility/openNewTab';
 
   export let tabid;
   export let conid;
@@ -126,3 +128,23 @@
   {changeSetStore}
   {dispatchChangeSet}
 />
+
+<StatusBarTabItem
+  text="Open structure"
+  icon="icon structure"
+  clickable
+  onClick={() => {
+    openNewTab({
+      title: pureName,
+      icon: 'img table-structure',
+      tabComponent: 'TableStructureTab',
+      props: {
+        schemaName,
+        pureName,
+        conid,
+        database,
+        objectTypeField: 'tables',
+      },
+    });
+  }}
+/>

packages/web/src/tabs/TableStructureTab.svelte

@@ -56,6 +56,8 @@
   import { showSnackbarSuccess } from '../utility/snackbar';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { changeTab } from '../utility/common';
+  import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
+  import openNewTab from '../utility/openNewTab';
 
   export let tabid;
   export let conid;
@@ -187,3 +189,25 @@
         )
     : null}
 />
+
+{#if objectTypeField == 'tables'}
+  <StatusBarTabItem
+    text="Open data"
+    icon="icon table"
+    clickable
+    onClick={() => {
+      openNewTab({
+        title: pureName,
+        icon: 'img table',
+        tabComponent: 'TableDataTab',
+        props: {
+          schemaName,
+          pureName,
+          conid,
+          database,
+          objectTypeField: 'tables',
+        },
+      });
+    }}
+  />
+{/if}

packages/web/src/widgets/StatusBar.svelte

@@ -126,7 +126,7 @@
   </div>
   <div class="container">
     {#each contextItems || [] as item}
-      <div class="item">
+      <div class="item" class:clickable={item.clickable} on:click={item.onClick}>
         {#if item.icon}
           <FontIcon icon={item.icon} />
         {/if}

packages/web/src/widgets/StatusBarTabItem.svelte

@@ -5,12 +5,15 @@
   import { updateStatuBarInfoItem } from './StatusBar.svelte';
 
   export let text;
+  export let clickable = false;
+  export let icon = null;
+  export let onClick = null;
 
   const key = uuidv1();
   const tabid = getContext('tabid');
 
   onMount(() => {
-    updateStatuBarInfoItem(tabid, key, { text });
+    updateStatuBarInfoItem(tabid, key, { text, icon, clickable, onClick });
   });
   onDestroy(() => updateStatuBarInfoItem(tabid, key, null));
 </script>