fixes

packages/web/src/forms/FormCheckboxField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
   import FormCheckboxFieldRaw from './FormCheckboxFieldRaw.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let label;
   export let name;
@@ -8,7 +9,7 @@
   export let templateProps = {};
 
   const { template, setFieldValue, values } = getFormContext();
-
+  const dispatch = createEventDispatcher();
 </script>
 
 <svelte:component
@@ -17,7 +18,14 @@
   {label}
   {disabled}
   {...templateProps}
-  labelProps={disabled ? { disabled: true } : { onClick: () => setFieldValue(name, !$values[name]) }}
+  labelProps={disabled
+    ? { disabled: true }
+    : {
+        onClick: () => {
+          setFieldValue(name, !$values[name]);
+          dispatch('change');
+        },
+      }}
 >
-  <FormCheckboxFieldRaw {name} {...$$restProps} {disabled} />
+  <FormCheckboxFieldRaw {name} {...$$restProps} {disabled} on:change />
 </svelte:component>

packages/web/src/forms/FormCheckboxFieldRaw.svelte

@@ -11,4 +11,4 @@
   }
 </script>
 
-<CheckboxField {...$$restProps} checked={$values[name] ?? defaultValue} on:change={handleChange} />
+<CheckboxField {...$$restProps} checked={$values[name] ?? defaultValue} on:change={handleChange} on:change />

packages/web/src/settings/SettingsModal.svelte

@@ -6,13 +6,15 @@
   import FormTextField from '../forms/FormTextField.svelte';
   import FormValues from '../forms/FormValues.svelte';
   import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
-  
+  import FontIcon from '../icons/FontIcon.svelte';
+
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
   import getElectron from '../utility/getElectron';
   import { showSnackbarInfo } from '../utility/snackbar';
 
   const electron = getElectron();
+  let restartWarning = false;
 </script>
 
 <SettingsFormProvider>
@@ -25,8 +27,15 @@
         <FormCheckboxField
           name="app.useNativeMenu"
           label="Use system native menu"
-          on:change={() => showSnackbarInfo('Native menu settings will be applied after app restart')}
+          on:change={() => {
+            restartWarning = true;
+          }}
         />
+        {#if restartWarning}
+          <div class="ml-5 mb-3">
+            <FontIcon icon="img warn" /> Native menu settings will be applied after app restart
+          </div>
+        {/if}
       {/if}
 
       <div class="heading">Data grid</div>

packages/web/src/stores.ts

@@ -76,12 +76,16 @@ export const currentThemeDefinition = derived([currentTheme, extensions], ([$cur
   $extensions.themes.find(x => x.themeClassName == $currentTheme)
 );
 
+let nativeMenuOnStartup = null;
 export const visibleTitleBar = derived(useSettings(), $settings => {
   const electron = getElectron();
   if (!electron) return false;
   // console.log('visibleTitleBar:settings', $settings);
   if (!$settings) return false;
-  return !$settings['app.fullscreen'] && !$settings['app.useNativeMenu'];
+  if (nativeMenuOnStartup == null) {
+    nativeMenuOnStartup = !!$settings['app.useNativeMenu'];
+  }
+  return !$settings['app.fullscreen'] && !nativeMenuOnStartup;
 });
 
 export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => {