[Feature] Added a Custom Titlebar

desktop-app/package.json

@@ -111,6 +111,7 @@
     "bluebird": "^3.7.2",
     "browser-sync": "^2.27.10",
     "classnames": "^2.3.1",
+    "custom-electron-titlebar": "^4.2.7",
     "electron-args": "^0.1.0",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",

desktop-app/src/main/main.ts

@@ -12,6 +12,10 @@ import path from 'path';
 import { app, BrowserWindow, shell, screen, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
+import {
+  setupTitlebar,
+  attachTitlebarToWindow,
+} from 'custom-electron-titlebar/main';
 import cli from './cli';
 import { PROTOCOL } from '../common/constants';
 import MenuBuilder from './menu';
@@ -100,6 +104,14 @@ const installExtensions = async () => {
     .catch(console.log);
 };
 
+// Custom titlebar config for windows
+const customTitlebarStatus = store.get(
+  'userPreferences.customTitlebar'
+) as boolean;
+if (customTitlebarStatus && process.platform === 'win32') {
+  setupTitlebar();
+}
+
 const createWindow = async () => {
   windowShownOnOpen = false;
   await installExtensions();
@@ -119,6 +131,10 @@ const createWindow = async () => {
     width,
     height,
     icon: getAssetPath('icon.png'),
+    titleBarStyle:
+      customTitlebarStatus && process.platform === 'win32'
+        ? 'hidden'
+        : 'default',
     webPreferences: {
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')

desktop-app/src/main/preload.ts

@@ -1,5 +1,6 @@
 import { Channels } from 'common/constants';
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
+import { Titlebar, TitlebarColor } from 'custom-electron-titlebar';
 
 contextBridge.exposeInMainWorld('electron', {
   ipcRenderer: {
@@ -42,3 +43,18 @@ window.onerror = function (errorMsg, url, lineNumber) {
   console.log(`Unhandled error: ${errorMsg} ${url} ${lineNumber}`);
   // Code to run when an error has occurred on the page
 };
+
+window.addEventListener('DOMContentLoaded', () => {
+  const customTitlebarStatus = ipcRenderer.sendSync(
+    'electron-store-get',
+    'userPreferences.customTitlebar'
+  ) as boolean;
+
+  if (customTitlebarStatus && process.platform === 'win32') {
+    // eslint-disable-next-line no-new
+    new Titlebar({
+      backgroundColor: TitlebarColor.fromHex('#0f172a'), // slate-900
+      itemBackgroundColor: TitlebarColor.fromHex('#1e293b'), // slate-800
+    });
+  }
+});

desktop-app/src/renderer/AppContent.tsx

@@ -13,6 +13,10 @@ import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
 import ReleaseNotes from './components/ReleaseNotes';
 import { Sponsorship } from './components/Sponsorship';
 
+if ((navigator as any).userAgentData.platform === 'Windows') {
+  import('./titlebar-styles.css');
+}
+
 const Browser = () => {
   return (
     <div className="h-screen gap-2 overflow-hidden pt-2">

desktop-app/src/renderer/components/Toggle/index.tsx

@@ -14,7 +14,7 @@ const Toggle = ({ isOn, onChange }: Props) => {
         className="peer sr-only"
         onChange={onChange}
       />
-      <div className="peer h-5 w-9 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700" />
+      <div className="peer h-5 w-9 rounded-full bg-gray-300 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700" />
     </label>
   );
 };

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContent.tsx

@@ -1,6 +1,7 @@
 import { useId, useState } from 'react';
 
 import Button from 'renderer/components/Button';
+import Toggle from 'renderer/components/Toggle';
 
 interface Props {
   onClose: () => void;
@@ -11,6 +12,9 @@ export const SettingsContent = ({ onClose }: Props) => {
   const [screenshotSaveLocation, setScreenshotSaveLocation] = useState<string>(
     window.electron.store.get('userPreferences.screenshot.saveLocation')
   );
+  const [enableCustomTitlebar, setEnableCustomTitlebar] = useState<boolean>(
+    window.electron.store.get('userPreferences.customTitlebar')
+  );
 
   const onSave = () => {
     if (screenshotSaveLocation === '' || screenshotSaveLocation == null) {
@@ -23,6 +27,11 @@ export const SettingsContent = ({ onClose }: Props) => {
       'userPreferences.screenshot.saveLocation',
       screenshotSaveLocation
     );
+    window.electron.store.set(
+      'userPreferences.customTitlebar',
+      enableCustomTitlebar
+    );
+
     onClose();
   };
 
@@ -47,6 +56,31 @@ export const SettingsContent = ({ onClose }: Props) => {
         </div>
       </div>
 
+      {(navigator as any).userAgentData.platform === 'Windows' && (
+        <>
+          <h2>Preferences</h2>
+          <div className="my-4 flex flex-col space-y-4 text-sm">
+            <div className="flex w-1/2 items-center gap-5 space-y-2">
+              <div>
+                <p className="text-sm">Menus in Titlebar</p>
+                <p className="text-[10px] italic leading-snug tracking-wide text-blue-400">
+                  Restart Required
+                </p>
+              </div>
+              <Toggle
+                isOn={enableCustomTitlebar}
+                onChange={(value) => {
+                  setEnableCustomTitlebar(value.target.checked);
+                }}
+              />
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              Makes the titlebar compact by including the Menu inside it.
+            </p>
+          </div>
+        </>
+      )}
+
       <Button
         className="mt-6 px-5 py-1"
         onClick={onSave}

desktop-app/src/renderer/titlebar-styles.css

@@ -0,0 +1,8 @@
+/* CET - Custom Electron Titlebar styles */
+.cet-title {
+  color: white;
+}
+
+.cet-menubar {
+  color: white;
+}

desktop-app/yarn.lock

@@ -4988,6 +4988,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+custom-electron-titlebar@^4.2.7:
+  version "4.2.7"
+  resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-4.2.7.tgz#a5efa3ce85e2316809e4d32c7042855fbdade151"
+  integrity sha512-5sROnS5jH8jaFsjMwID7aPwnohBJ4HU0dSx81qSGAaznnblc3067D8pyl/zOwj/WosoOPHV2837jbT3j4whvHw==
+
 damerau-levenshtein@^1.0.6, damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"