custom titlebar POC

packages/web/src/Screen.svelte

@@ -22,11 +22,26 @@
   import ModalLayer from './modals/ModalLayer.svelte';
   import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
   import dragDropFileTarget from './utility/dragDropFileTarget';
+  import TitleBar from './widgets/TitleBar.svelte';
+  import { onMount } from 'svelte';
+  import getElectron from './utility/getElectron';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   let domTabs;
 
+  let drawTitleBar = false;
+  onMount(async () => {
+    let draw = true;
+    const electron = getElectron();
+    if (electron && (await electron.isNativeMenu())) {
+      draw = false;
+    }
+    drawTitleBar = draw;
+    document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0);
+    console.log('drawTitleBar', drawTitleBar);
+  });
+
   function handleTabsWheel(e) {
     if (!e.shiftKey) {
       e.preventDefault();
@@ -37,7 +52,7 @@
 
 <svelte:head>
   {#if $currentThemeDefinition?.themeCss}
-    {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
+  {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
   {/if}
 </svelte:head>
 
@@ -46,6 +61,11 @@
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
+  {#if drawTitleBar}
+    <div class="titlebar">
+      <TitleBar />
+    </div>
+  {/if}
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
@@ -153,7 +173,7 @@
   }
   .toolbar {
     position: fixed;
-    top: 0;
+    top: var(--dim-toolbar-top);
     height: var(--dim-toolbar-height);
     left: 0;
     right: 0;
@@ -172,4 +192,12 @@
     right: 0;
     bottom: var(--dim-statusbar-height);
   }
+
+  .titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--dim-titlebar-height);
+  }
 </style>

packages/web/src/icons/FontIcon.svelte

@@ -29,6 +29,11 @@
     'icon app': 'mdi mdi-layers-triple',
     'icon open-in-new': 'mdi mdi-open-in-new',
 
+    'icon window-restore': 'mdi mdi-window-restore',
+    'icon window-close': 'mdi mdi-window-close',
+    'icon window-minimize': 'mdi mdi-window-minimize',
+    'img dbgate': 'mdi mdi-database color-icon-gold',
+
     'icon columns': 'mdi mdi-view-column',
     'icon columns-outline': 'mdi mdi-view-column-outline',
 

packages/web/src/utility/getElectron.ts

@@ -27,6 +27,10 @@ class ElectronApi {
     await this.ipcRenderer.invoke('openExternal', url);
   }
 
+  async isNativeMenu() {
+    await this.ipcRenderer.invoke('isNativeMenu');
+  }
+
   async invoke(route, args) {
     const res = await this.ipcRenderer.invoke(route, args);
     return res;

packages/web/src/widgets/TitleBar.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import { activeTab, currentDatabase } from '../stores';
+  import getElectron from '../utility/getElectron';
+
+  $: title = _.compact([$activeTab?.title, $currentDatabase?.name, 'DbGate']).join(' - ');
+  const electron = getElectron();
+</script>
+
+<div class="container">
+  <div class="icon"><FontIcon icon="img dbgate" /></div>
+  <div class="menu">File Edit Window</div>
+  <div class="title">{title}</div>
+
+  <div class="actions">
+    <div class="button" on:click={() => electron.send('window-action', 'minimize')}>
+      <FontIcon icon="icon window-minimize" />
+    </div>
+    <div class="button">
+      <FontIcon icon="icon window-restore" on:click={() => electron.send('window-action', 'maximize')} />
+    </div>
+    <div class="button close-button" on:click={() => electron.send('window-action', 'close')}>
+      <FontIcon icon="icon window-close" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    -webkit-app-region: drag;
+    user-select: none;
+    height: var(--dim-titlebar-height);
+    display: flex;
+    align-items: center;
+    background: var(--theme-bg-3);
+    color: var(--theme-font-1);
+  }
+
+  .title {
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  .icon {
+    padding: 5px;
+    font-size: 12pt;
+  }
+
+  .button {
+    padding: 5px;
+  }
+
+  .close-button {
+    padding: 5px 7px;
+  }
+
+  .button:hover {
+    background: var(--theme-bg-hover);
+  }
+
+  .close-button:hover {
+    background: var(--theme-icon-red);
+  }
+
+  .menu {
+    margin-left: 10px;
+  }
+
+  .actions {
+    display: flex;
+    margin-left: 0;
+    -webkit-app-region: no-drag;
+  }
+</style>