fix(ui): titlebar on windows

main.ts

@@ -26,7 +26,7 @@ export class Main {
   mainWindow: BrowserWindow | null = null;
 
   WIDTH = 1200;
-  HEIGHT = 900;
+  HEIGHT = process.platform === 'win32' ? 926 : 900;
 
   constructor() {
     this.icon = this.isDevelopment
@@ -86,10 +86,18 @@ export class Main {
         contextIsolation: false, // TODO: Switch this off
         nodeIntegration: true,
       },
-      frame: this.isLinux,
+      autoHideMenuBar: true,
+      frame: !this.isMac,
       resizable: true,
     };
 
+    if (!this.isMac) {
+      options.titleBarOverlay = {
+        color: '#FFFFFF',
+        height: 26,
+      };
+    }
+
     if (this.isDevelopment || this.isLinux) {
       Object.assign(options, { icon: this.icon });
     }

src/App.vue

@@ -3,8 +3,11 @@
     id="app"
     class="h-screen flex flex-col font-sans overflow-hidden antialiased"
   >
-    <WindowsTitleBar v-if="platform === 'Windows'" />
-
+    <WindowsTitleBar
+      v-if="platform === 'Windows'"
+      :db-path="dbPath"
+      :company-name="companyName"
+    />
     <!-- Main Contents -->
     <Desk
       class="flex-1"
@@ -36,7 +39,6 @@
 import { ConfigKeys } from 'fyo/core/types';
 import { ModelNameEnum } from 'models/types';
 import { incrementOpenCount } from 'src/utils/misc';
-import WindowsTitleBar from './components/WindowsTitleBar.vue';
 import { handleErrorWithDialog } from './errorHandling';
 import { fyo, initializeInstance } from './initFyo';
 import DatabaseSelector from './pages/DatabaseSelector.vue';
@@ -46,12 +48,15 @@ import setupInstance from './setup/setupInstance';
 import './styles/index.css';
 import { checkForUpdates } from './utils/ipcCalls';
 import { routeTo } from './utils/ui';
+import WindowsTitleBar from './components/WindowsTitleBar.vue';
 
 export default {
   name: 'App',
   data() {
     return {
       activeScreen: null,
+      dbPath: '',
+      companyName: '',
     };
   },
   components: {
@@ -76,7 +81,7 @@ export default {
       await this.fileSelected(lastSelectedFilePath, false);
     } catch (err) {
       await handleErrorWithDialog(err, undefined, true, true);
-      await this.showDbSelector()
+      await this.showDbSelector();
     }
   },
   methods: {
@@ -86,6 +91,11 @@ export default {
       const openCount = await incrementOpenCount(filePath);
       await fyo.telemetry.start(openCount);
       await checkForUpdates(false);
+      this.dbPath = filePath;
+      this.companyName = await fyo.getValue(
+        ModelNameEnum.AccountingSettings,
+        'companyName'
+      );
     },
     async fileSelected(filePath, isNew) {
       fyo.config.set(ConfigKeys.LastSelectedFilePath, filePath);
@@ -130,6 +140,8 @@ export default {
       fyo.telemetry.stop();
       fyo.purgeCache();
       this.activeScreen = 'DatabaseSelector';
+      this.dbPath = '';
+      this.companyName = '';
     },
   },
 };

src/components/Icons/18/fb.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="19"
+    height="13"
+    viewBox="0 0 19 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.25935 12.128V0.727295H13.8241C14.6628 0.727295 15.3624 0.851619 15.9227 1.10027C16.4831 1.34892 16.9043 1.69405 17.1864 2.13568C17.4684 2.5736 17.6095 3.07832 17.6095 3.64984C17.6095 4.09518 17.5204 4.4867 17.3423 4.82442C17.1641 5.15843 16.9192 5.43305 16.6075 5.6483C16.2994 5.85984 15.9469 6.01014 15.5498 6.09921V6.21054C15.984 6.2291 16.3904 6.35156 16.7689 6.57795C17.1511 6.80433 17.461 7.12163 17.6985 7.52986C17.9361 7.93438 18.0548 8.41683 18.0548 8.97721C18.0548 9.58213 17.9045 10.1221 17.6039 10.5971C17.307 11.0685 16.8672 11.4414 16.2846 11.7161C15.7019 11.9907 14.9838 12.128 14.1303 12.128H9.25935ZM11.6698 10.1574H13.6348C14.3065 10.1574 14.7964 10.0293 15.1044 9.77326C15.4125 9.51348 15.5665 9.16834 15.5665 8.73784C15.5665 8.42239 15.4904 8.14406 15.3382 7.90283C15.1861 7.66161 14.969 7.47234 14.6869 7.33502C14.4086 7.19771 14.0764 7.12905 13.6905 7.12905H11.6698V10.1574ZM11.6698 5.498H13.4567C13.787 5.498 14.0802 5.44047 14.3362 5.32543C14.596 5.20667 14.8001 5.03967 14.9486 4.82442C15.1007 4.60917 15.1768 4.35125 15.1768 4.05064C15.1768 3.6387 15.0302 3.30655 14.737 3.05419C14.4476 2.80184 14.0356 2.67566 13.5012 2.67566H11.6698V5.498Z"
+      fill="#505A62"
+    />
+    <path
+      d="M7.73114 2.75564V0.75855H0.0548096V2.75564H7.73114Z"
+      fill="#0089FF"
+    />
+    <path
+      d="M2.48876 7.43646H7.35669V5.43935H0.0548096V12.1796H2.48876V7.43646Z"
+      fill="#0089FF"
+    />
+  </svg>
+</template>
+<script>
+import Base from '../base';
+export default {
+  name: 'FB',
+  extends: Base,
+};
+</script>

src/components/SearchBar.vue

@@ -20,7 +20,7 @@
     >
       <feather-icon name="search" class="w-4 h-4" />
       <p>{{ t`Search` }}</p>
-      <div v-if="!inputValue" class="text-gray-500 ml-auto">
+      <div v-if="!inputValue" class="text-gray-400 ml-auto text-sm">
         {{ modKey('k') }}
       </div>
     </button>

src/components/Sidebar.vue

@@ -9,7 +9,7 @@
       <!-- Company name and DB Switcher -->
       <div
         class="px-2 flex flex-row items-center justify-between mb-4"
-        :class="platform === 'Mac' ? 'mt-10' : 'mt-4'"
+        :class="platform === 'Mac' ? 'mt-10' : 'mt-2'"
       >
         <h6
           class="

src/components/WindowsTitleBar.vue

@@ -1,50 +1,24 @@
 <template>
-  <div class="bg-white text-base flex justify-between window-drag border-b">
-    <div
-      class="py-1 px-2 window-no-drag hover:bg-gray-100 cursor-pointer"
-      @click="openMenu"
-    >
-      <feather-icon name="menu" class="w-4 h-4" />
-    </div>
-    <div class="flex window-no-drag">
-      <div
-        class="py-1 px-2 hover:bg-gray-100 cursor-pointer"
-        @click="action('minimize')"
-      >
-        <feather-icon name="minus" class="w-4 h-4" />
-      </div>
-      <div
-        class="flex-center py-1 px-2 hover:bg-gray-100 cursor-pointer"
-        @click="action('maximize')"
-      >
-        <feather-icon name="square" class="w-3 h-3" />
-      </div>
-      <div
-        class="py-1 px-2 hover:bg-red-500 hover:text-white cursor-pointer"
-        @click="action('close')"
-      >
-        <feather-icon name="x" class="w-4 h-4" />
-      </div>
-    </div>
+  <div
+    class="window-drag flex items-center border-b text-gray-900 border-gray-100"
+    style="height: 28px"
+  >
+    <Fb class="ml-2" />
+    <p class="mx-auto text-sm" v-if="companyName && dbPath">
+      {{ companyName }} - {{ dbPath }}
+    </p>
   </div>
 </template>
 
 <script>
-import { ipcRenderer } from 'electron';
-import { runWindowAction } from 'src/utils/ipcCalls';
-import { IPC_MESSAGES } from 'utils/messages';
+import Fb from './Icons/18/fb.vue';
 
 export default {
   name: 'WindowsTitleBar',
-  emits: ['close', 'minimize', 'maximize', 'unmaximize'],
-  methods: {
-    async action(name) {
-      const actionRan = await runWindowAction(name);
-      this.$emit(actionRan);
-    },
-    openMenu() {
-      ipcRenderer.send(IPC_MESSAGES.OPEN_MENU);
-    },
+  components: { Fb },
+  props: {
+    dbPath: String,
+    companyName: String,
   },
 };
 </script>

src/pages/GetStarted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader :title="t`Setup Your Workspace`" />
-    <div class="flex-1 mx-4 overflow-y-auto">
+    <div class="flex-1 mx-4 overflow-y-auto overflow-x-hidden">
       <div class="my-4" v-for="section in sections" :key="section.label">
         <h2 class="font-medium">{{ section.label }}</h2>
         <div class="flex mt-4 -mx-2">
@@ -14,7 +14,7 @@
               class="
                 flex flex-col
                 justify-between
-                h-full
+                h-40
                 p-4
                 border
                 rounded-lg