SYNC: diagram settings in premium

packages/web/src/designer/Designer.svelte

@@ -52,6 +52,7 @@
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import DragColumnMemory from './DragColumnMemory.svelte';
   import createRef from '../utility/createRef';
+  import { isProApp } from '../utility/proTools';
 
   export let value;
   export let onChange;
@@ -781,7 +782,7 @@
       menu,
       settings?.customizeStyle && [
         { divider: true },
-        {
+        isProApp() && {
           text: 'Column properties',
           submenu: [
             {
@@ -794,7 +795,7 @@
             },
           ],
         },
-        {
+        isProApp() && {
           text: `Columns - ${_.startCase(value?.style?.filterColumns || 'all')}`,
           submenu: [
             {

packages/web/src/designer/DiagramSettings.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { DIAGRAM_ZOOMS } from 'dbgate-tools';
-  import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
 
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
-  import { isProApp } from '../utility/proTools';
 
   export let values;
 </script>
@@ -59,7 +57,5 @@
 
   <FormTextField name="columnFilter" label="Column filter" />
 
-  {#if isProApp()}
-    <FormTextField name="topTables" label="Only N most important tables" type="number" />
-  {/if}
+  <FormTextField name="topTables" label="Only N most important tables" type="number" />
 </FormProviderCore>

packages/web/src/tabs/DiagramTab.svelte

@@ -31,6 +31,7 @@
   import ToolStripButton from '../buttons/ToolStripButton.svelte';
   import DiagramSettings from '../designer/DiagramSettings.svelte';
   import { derived } from 'svelte/store';
+  import { isProApp } from '../utility/proTools';
 
   export let tabid;
   export let conid;
@@ -116,11 +117,10 @@
       { command: 'diagram.redo' },
     ];
   }
-
 </script>
 
 <ToolStripContainer>
-  <HorizontalSplitter isSplitter={$styleStore.settingsVisible ?? true} initialSizeRight={300}>
+  <HorizontalSplitter isSplitter={isProApp() ? ($styleStore.settingsVisible ?? true) : false} initialSizeRight={300}>
     <svelte:fragment slot="1">
       <DiagramDesigner
         value={$modelState.value || {}}
@@ -155,11 +155,13 @@
     <ToolStripCommandButton command="diagram.export" />
     <ToolStripCommandButton command="diagram.undo" />
     <ToolStripCommandButton command="diagram.redo" />
-    <ToolStripButton
-      icon="icon settings"
-      on:click={() => {
-        styleStore.update(x => ({ ...x, settingsVisible: !x.settingsVisible }));
-      }}>Settings</ToolStripButton
-    >
+    {#if isProApp()}
+      <ToolStripButton
+        icon="icon settings"
+        on:click={() => {
+          styleStore.update(x => ({ ...x, settingsVisible: !x.settingsVisible }));
+        }}>Settings</ToolStripButton
+      >
+    {/if}
   </svelte:fragment>
 </ToolStripContainer>