added a logo on the custom titlebar for Windows

app/scripts/views/app-view.js

@@ -25,7 +25,7 @@ import { OpenView } from 'views/open-view';
 import { SettingsView } from 'views/settings/settings-view';
 import { TagView } from 'views/tag-view';
 import { ImportCsvView } from 'views/import-csv-view';
-import { TitlebarButtonsView } from 'views/titlebar-buttons-view';
+import { TitlebarView } from 'views/titlebar-view';
 import template from 'templates/app.hbs';
 
 class AppView extends View {
@@ -59,7 +59,7 @@ class AppView extends View {
         this.views.details = new DetailsView(undefined, { ownParent: true });
         this.views.details.appModel = this.model;
         if (this.titlebarStyle !== 'default' && Features.renderCustomTitleBar()) {
-            this.views.titlebarButtons = new TitlebarButtonsView(this.model);
+            this.views.titlebar = new TitlebarView(this.model);
         }
 
         this.views.menu.listenDrag(this.views.menuDrag);
@@ -148,7 +148,7 @@ class AppView extends View {
         this.views.list.render();
         this.views.listDrag.render();
         this.views.details.render();
-        this.views.titlebarButtons?.render();
+        this.views.titlebar?.render();
         this.showLastOpenFile();
     }
 

app/scripts/views/titlebar-view.js

@@ -1,9 +1,10 @@
 import { View } from 'framework/views/view';
 import { Events } from 'framework/events';
 import { Launcher } from 'comp/launcher';
-import template from 'templates/titlebar-buttons.hbs';
+import { KeeWebLogo } from 'const/inline-images';
+import template from 'templates/titlebar.hbs';
 
-class TitlebarButtonsView extends View {
+class TitlebarView extends View {
     parent = '.app__titlebar';
 
     template = template;
@@ -26,7 +27,8 @@ class TitlebarButtonsView extends View {
 
     render() {
         super.render({
-            maximized: this.maximized
+            maximized: this.maximized,
+            iconSrc: KeeWebLogo
         });
     }
 
@@ -57,4 +59,4 @@ class TitlebarButtonsView extends View {
     }
 }
 
-export { TitlebarButtonsView };
+export { TitlebarView };

app/styles/areas/_app.scss

@@ -28,18 +28,6 @@
         pointer-events: none;
     }
 
-    &__titlebar {
-        .titlebar-custom & {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            -webkit-app-region: drag;
-            display: flex;
-            justify-content: flex-end;
-        }
-    }
-
     &__menu {
         flex: 0 0 auto;
         display: flex;
@@ -57,6 +45,10 @@
         .titlebar-hidden-inset & {
             padding-top: $titlebar-padding-large;
         }
+        .titlebar-custom.titlebar-hidden &,
+        .titlebar-custom.titlebar-hidden-inset & {
+            padding-top: $custom-titlebar-height;
+        }
         .fullscreen .app & {
             padding-top: 0;
         }

app/styles/areas/_titlebar.scss

@@ -1,8 +1,27 @@
-.titlebar-buttons {
+.titlebar {
     font-size: 0;
 
+    .titlebar-custom & {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        display: flex;
+        height: $custom-titlebar-height;
+    }
+
+    &__logo {
+        @include size(30px);
+        padding: 6px;
+        pointer-events: none;
+    }
+
+    &__grow {
+        flex-grow: 1;
+        -webkit-app-region: drag;
+    }
+
     > .fa {
-        -webkit-app-region: no-drag;
         font-size: 16px;
         padding: 4px 16px;
         height: $custom-titlebar-height;

app/styles/main.scss

@@ -38,4 +38,4 @@ $fa-font-path: '~font-awesome/fonts';
 @import 'areas/open';
 @import 'areas/settings';
 @import 'areas/import-csv';
-@import 'areas/titlebar-buttons';
+@import 'areas/titlebar';

app/templates/titlebar-buttons.hbs

@@ -1,9 +0,0 @@
-<div class="titlebar-buttons">
-    <i class="fa fa-titlebar-minimize titlebar-buttons-minimize"></i>
-    {{#if maximized}}
-        <i class="fa fa-titlebar-restore titlebar-buttons-restore"></i>
-    {{else}}
-        <i class="fa fa-titlebar-maximize titlebar-buttons-maximize"></i>
-    {{/if}}
-    <i class="fa fa-titlebar-close titlebar-buttons-close"></i>
-</div>

app/templates/titlebar.hbs

@@ -0,0 +1,15 @@
+<div class="titlebar">
+    <div class="titlebar__icon">
+        <img src="{{iconSrc}}" alt="logo" class="titlebar__logo" />
+    </div>
+
+    <div class="titlebar__grow"></div>
+
+    <i class="fa fa-titlebar-minimize titlebar__minimize"></i>
+    {{#if maximized}}
+        <i class="fa fa-titlebar-restore titlebar__restore"></i>
+    {{else}}
+        <i class="fa fa-titlebar-maximize titlebar__maximize"></i>
+    {{/if}}
+    <i class="fa fa-titlebar-close titlebar__close"></i>
+</div>

desktop/main.js

@@ -263,16 +263,21 @@ function createMainWindow() {
         theme = selectDarkOrLightTheme(theme);
     }
     const bgColor = themeBgColors[theme] || defaultBgColor;
-    const frameless =
-        process.platform === 'win32' &&
-        ['hidden', 'hidden-inset'].includes(appSettings.titlebarStyle);
+
+    const isWindows = process.platform === 'win32';
+    let titlebarStyle = appSettings.titlebarStyle;
+    if (titlebarStyle === 'hidden-inset') {
+        titlebarStyle = 'hiddenInset';
+    }
+    const frameless = isWindows && ['hidden', 'hiddenInset'].includes(titlebarStyle);
+
     const windowOptions = {
         show: false,
         width: 1000,
         height: 700,
         minWidth: 700,
         minHeight: 400,
-        titleBarStyle: appSettings.titlebarStyle,
+        titleBarStyle: titlebarStyle,
         frame: !frameless,
         backgroundColor: bgColor,
         webPreferences: {