settings WIP

packages/web/src/forms/SettingsCheckboxField.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import SettingsCheckboxFieldRaw from './SettingsCheckboxFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let disabled = false;
+  export let templateProps = {};
+
+  const { template, setFieldValue, values } = getFormContext();
+</script>
+
+<svelte:component
+  this={template}
+  on:change
+  type="checkbox"
+  {label}
+  {disabled}
+  {...templateProps}
+  labelProps={disabled ? { disabled: true } : { onClick: () => setFieldValue(name, !$values[name]) }}
+>
+  <SettingsCheckboxFieldRaw {name} {...$$restProps} {disabled} />
+</svelte:component>

packages/web/src/forms/SettingsCheckboxFieldRaw.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import CheckboxField from './CheckboxField.svelte';
+  import { apiCall } from '../utility/api';
+  import _ from 'lodash';
+  import { useSettings } from '../utility/metadataLoaders';
+
+  export let name;
+  export let defaultValue;
+
+  const settings = useSettings();
+
+  function handleChange(e) {
+    apiCall('config/update-settings', { [name]: e.target['checked'] });
+  }
+</script>
+
+<CheckboxField {...$$restProps} checked={($settings || {})[name] ?? defaultValue} on:change={handleChange} on:change />

packages/web/src/forms/SettingsFormProvider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+
+  const contextKey = 'formProviderContextKey';
+
+  export function getFormContext(): any {
+    return getContext(contextKey);
+  }
+</script>
+
+<script lang="ts">
+  import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
+  import createRef from '../utility/createRef';
+  import { apiCall } from '../utility/api';
+  import { useSettings } from '../utility/metadataLoaders';
+  import { derived } from 'svelte/store';
+
+  export let template = FormFieldTemplateLarge;
+
+  const settings = useSettings();
+  const values = derived(settings, $settings => {
+    if (!$settings) {
+      return {};
+    }
+    return $settings;
+  });
+
+  const setFieldValue = (name, value) => {
+    apiCall('config/update-settings', { [name]: value });
+  };
+
+  const context = {
+    values,
+    template,
+    setFieldValue,
+    submitActionRef: createRef(null),
+  };
+
+  setContext(contextKey, context);
+</script>
+
+<slot />

packages/web/src/forms/SettingsTextField.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import SettingsTextFieldRaw from './SettingsTextFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+  export let focused = false;
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  <SettingsTextFieldRaw {name} {...$$restProps} {focused} />
+</svelte:component>

packages/web/src/forms/SettingsTextFieldRaw.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { apiCall } from '../utility/api';
+
+  import { useSettings } from '../utility/metadataLoaders';
+
+  import TextField from './TextField.svelte';
+
+  export let name;
+  export let defaultValue;
+
+  const settings = useSettings();
+
+  function handleChange(e) {
+    apiCall('config/update-settings', { [name]: e.target['value'] });
+  }
+</script>
+
+<TextField {...$$restProps} value={($settings || {})[name] ?? defaultValue} on:input={handleChange} />

packages/web/src/settings/SettingsModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
 
   import FormButton from '../forms/FormButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
@@ -10,6 +11,9 @@
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FormValues from '../forms/FormValues.svelte';
+  import SettingsCheckboxField from '../forms/SettingsCheckboxField.svelte';
+  import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
+  import SettingsTextField from '../forms/SettingsTextField.svelte';
 
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
@@ -19,36 +23,34 @@
   import getElectron from '../utility/getElectron';
   import { showSnackbarInfo } from '../utility/snackbar';
 
-  function handleOk(e) {
-    apiCall(
-      'config/update-settings',
-      _.omitBy(e.detail, (v, k) => k.startsWith(':'))
-    );
-    visibleToolbar.set(!!e.detail[':visibleToolbar']);
-    if (electron && !getTitleBarVisibility() != !!e.detail[':useNativeMenu']) {
-      electron.send('set-use-native-menu', !!e.detail[':useNativeMenu']);
-      showSnackbarInfo('Native menu settings will be applied after app restart');
-    }
-    closeCurrentModal();
-  }
+  // function handleOk(e) {
+  //   apiCall(
+  //     'config/update-settings',
+  //     _.omitBy(e.detail, (v, k) => k.startsWith(':'))
+  //   );
+  //   visibleToolbar.set(!!e.detail[':visibleToolbar']);
+  //   if (electron && !getTitleBarVisibility() != !!e.detail[':useNativeMenu']) {
+  //     electron.send('set-use-native-menu', !!e.detail[':useNativeMenu']);
+  //     showSnackbarInfo('Native menu settings will be applied after app restart');
+  //   }
+  //   closeCurrentModal();
+  // }
 
   const electron = getElectron();
 </script>
 
-<FormProvider
-  initialValues={{
-    ...getCurrentSettings(),
-    ':visibleToolbar': getVisibleToolbar(),
-    ':useNativeMenu': !getTitleBarVisibility(),
-  }}
->
+<SettingsFormProvider>
   <ModalBase {...$$restProps}>
     <div slot="header">Settings</div>
 
     <FormValues let:values>
       {#if electron}
         <div class="heading">Appearance</div>
-        <FormCheckboxField name=":useNativeMenu" label="Use system native menu" />
+        <FormCheckboxField
+          name="app.useNativeMenu"
+          label="Use system native menu"
+          on:change={() => showSnackbarInfo('Native menu settings will be applied after app restart')}
+        />
       {/if}
 
       <div class="heading">Data grid</div>
@@ -58,6 +60,7 @@
         defaultValue="100"
       />
       <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} />
+      <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
 
       <FormCheckboxField name="dataGrid.thousandsSeparator" label="Use thousands separator for numbers" />
 
@@ -76,11 +79,11 @@
     </FormValues>
 
     <div slot="footer">
-      <FormSubmit value="OK" on:click={handleOk} />
-      <FormButton value="Cancel" on:click={closeCurrentModal} />
+      <!-- <FormSubmit value="OK" on:click={handleOk} /> -->
+      <FormStyledButton value="Close" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
-</FormProvider>
+</SettingsFormProvider>
 
 <style>
   .heading {

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -67,7 +67,7 @@
     const rect = domSettings.getBoundingClientRect();
     const left = rect.right;
     const top = rect.bottom;
-    const items = [{ command: 'settings.commands' }, { command: 'theme.changeTheme' }, { command: 'settings.show' }];
+    const items = [{ command: 'settings.show' }, { command: 'theme.changeTheme' }, { command: 'settings.commands' }];
     currentDropDownMenu.set({ left, top, items });
   }