View columns store on statusbar

packages/web/src/datagrid/DataGrid.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <script lang="ts">
-  import { setContext } from 'svelte';
+  import { getContext, setContext } from 'svelte';
   import { writable } from 'svelte/store';
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
@@ -98,7 +98,8 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
-  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  const collapsedLeftColumnStore =
+    getContext('collapsedLeftColumnStore') || writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
   $: isJsonView = !!config?.isJsonView;

packages/web/src/icons/FontIcon.svelte

@@ -21,6 +21,9 @@
     'icon settings': 'mdi mdi-cog',
     'icon version': 'mdi mdi-ticket-confirmation',
 
+    'icon columns': 'mdi mdi-view-column',
+    'icon columns-outline': 'mdi mdi-view-column-outline',
+
     'icon database': 'mdi mdi-database',
     'icon server': 'mdi mdi-server',
     'icon table': 'mdi mdi-table',

packages/web/src/tabs/TableDataTab.svelte

@@ -51,6 +51,8 @@
   import { showSnackbarSuccess } from '../utility/snackbar';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import openNewTab from '../utility/openNewTab';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { setContext } from 'svelte';
 
   export let tabid;
   export let conid;
@@ -115,6 +117,9 @@
   }
 
   registerMenu({ command: 'tableData.save', tag: 'save' });
+
+  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
 </script>
 
 <TableDataGrid
@@ -148,3 +153,10 @@
     });
   }}
 />
+
+<StatusBarTabItem
+  text="View columns"
+  icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
+  clickable
+  onClick={() => collapsedLeftColumnStore.update(x => !x)}
+/>

packages/web/src/tabs/ViewDataTab.svelte

@@ -6,13 +6,16 @@
 <script lang="ts">
   import { createGridCache, ViewGridDisplay } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
+  import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
 
   import DataGrid from '../datagrid/DataGrid.svelte';
   import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
   import { extensions } from '../stores';
   import { useConnectionInfo, useDatabaseServerVersion, useViewInfo } from '../utility/metadataLoaders';
   import useGridConfig from '../utility/useGridConfig';
+  import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
 
   export let tabid;
   export let conid;
@@ -40,6 +43,9 @@
           $serverVersion
         )
       : null;
+
+  const collapsedLeftColumnStore = writable(!getBoolSettingsValue('dataGrid.showLeftColumn', false));
+  setContext('collapsedLeftColumnStore', collapsedLeftColumnStore);
 </script>
 
 {#if display}
@@ -54,3 +60,10 @@
     gridCoreComponent={SqlDataGridCore}
   />
 {/if}
+
+<StatusBarTabItem
+  text="View columns"
+  icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
+  clickable
+  onClick={() => collapsedLeftColumnStore.update(x => !x)}
+/>

packages/web/src/widgets/StatusBarTabItem.svelte

@@ -16,4 +16,6 @@
     updateStatuBarInfoItem(tabid, key, { text, icon, clickable, onClick });
   });
   onDestroy(() => updateStatuBarInfoItem(tabid, key, null));
+
+  $: updateStatuBarInfoItem(tabid, key, { text, icon, clickable, onClick });
 </script>