configurable native menu

packages/web/src/App.svelte

@@ -16,7 +16,8 @@
   import { subscribePermissionCompiler } from './utility/hasPermission';
   import { apiCall } from './utility/api';
   import { getUsedApps } from './utility/metadataLoaders';
-import AppTitleProvider from './utility/AppTitleProvider.svelte';
+  import AppTitleProvider from './utility/AppTitleProvider.svelte';
+  import { initTitleBarVisibility } from './utility/common';
 
   let loadedApi = false;
 
@@ -26,6 +27,8 @@ import AppTitleProvider from './utility/AppTitleProvider.svelte';
     //   return;
     // }
 
+    await initTitleBarVisibility();
+
     try {
       // console.log('************** LOADING API');
 

packages/web/src/Screen.svelte

@@ -24,18 +24,12 @@
   import dragDropFileTarget from './utility/dragDropFileTarget';
   import TitleBar from './widgets/TitleBar.svelte';
   import { onMount } from 'svelte';
-  import { shouldDrawTitleBar } from './utility/common';
+  import { getTitleBarVisibility } from './utility/common';
   
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   let domTabs;
 
-  let drawTitleBar = false;
-  onMount(async () => {
-    drawTitleBar = await shouldDrawTitleBar();
-    document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0);
-  });
-
   function handleTabsWheel(e) {
     if (!e.shiftKey) {
       e.preventDefault();
@@ -57,7 +51,7 @@
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
-  {#if drawTitleBar}
+  {#if getTitleBarVisibility()}
     <div class="titlebar">
       <TitleBar />
     </div>

packages/web/src/settings/SettingsModal.svelte

@@ -3,6 +3,7 @@
 
   import FormButton from '../forms/FormButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
 
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
@@ -14,6 +15,9 @@
   import { closeCurrentModal } from '../modals/modalTools';
   import { getCurrentSettings, getVisibleToolbar, getZoomKoef, visibleToolbar, zoomKoef } from '../stores';
   import { apiCall } from '../utility/api';
+  import { getTitleBarVisibility } from '../utility/common';
+  import getElectron from '../utility/getElectron';
+  import { showSnackbarInfo } from '../utility/snackbar';
 
   function handleOk(e) {
     apiCall(
@@ -22,8 +26,14 @@
     );
     visibleToolbar.set(!!e.detail[':visibleToolbar']);
     zoomKoef.set(e.detail[':zoomKoef']);
+    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
@@ -31,6 +41,7 @@
     ...getCurrentSettings(),
     ':visibleToolbar': getVisibleToolbar(),
     ':zoomKoef': getZoomKoef(),
+    ':useNativeMenu': !getTitleBarVisibility(),
   }}
 >
   <ModalBase {...$$restProps}>
@@ -39,6 +50,9 @@
     <FormValues let:values>
       <div class="heading">Appearance</div>
       <FormCheckboxField name=":visibleToolbar" label="Show toolbar" defaultValue={true} />
+      {#if electron}
+        <FormCheckboxField name=":useNativeMenu" label="Use system native menu" />
+      {/if}
       <FormSelectField
         name=":zoomKoef"
         label="Zoom"

packages/web/src/utility/common.ts

@@ -40,13 +40,23 @@ export async function asyncFilter(arr, predicate) {
   return arr.filter((_v, index) => results[index]);
 }
 
-export async function shouldDrawTitleBar() {
+async function computeTitleBarVisibility() {
   const electron = getElectron();
   if (!electron) {
     return false;
   }
-  if (await electron.isNativeMenu()) {
+  if (await electron.useNativeMenu()) {
     return false;
   }
   return true;
 }
+
+let titleBarVisibility = false;
+export async function initTitleBarVisibility() {
+  titleBarVisibility = await computeTitleBarVisibility();
+  document.documentElement.style.setProperty('--dim-visible-titlebar', titleBarVisibility ? '1' : '0');
+}
+
+export function getTitleBarVisibility() {
+  return titleBarVisibility;
+}

packages/web/src/utility/getElectron.ts

@@ -26,8 +26,8 @@ class ElectronApi {
     await this.ipcRenderer.invoke('openExternal', url);
   }
 
-  async isNativeMenu() {
-    const res = await this.ipcRenderer.invoke('isNativeMenu');
+  async useNativeMenu() {
+    const res = await this.ipcRenderer.invoke('useNativeMenu');
     return res;
   }
 

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { currentDropDownMenu, selectedWidget, visibleCommandPalette } from '../stores';
-  import { shouldDrawTitleBar } from '../utility/common';
+  import { getTitleBarVisibility } from '../utility/common';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
 
   let domSettings;
@@ -78,15 +78,10 @@
     const items = mainMenuDefinition;
     currentDropDownMenu.set({ left, top, items });
   }
-
-  let showMainMenu = false;
-  onMount(async () => {
-    showMainMenu = !(await shouldDrawTitleBar());
-  });
 </script>
 
 <div class="main">
-  {#if showMainMenu}
+  {#if !getTitleBarVisibility()}
     <div class="wrapper mb-3" on:click={handleMainMenu} bind:this={domMainMenu}>
       <FontIcon icon="icon menu" />
     </div>