Added a toggle feature to switch Titlebar styles

desktop-app/src/main/main.ts

@@ -104,7 +104,13 @@ const installExtensions = async () => {
     .catch(console.log);
 };
 
-setupTitlebar();
+// Custom titlebar config
+const customTitlebarStatus = store.get(
+  'userPreferences.customTitlebar'
+) as boolean;
+if (customTitlebarStatus) {
+  setupTitlebar();
+}
 
 const createWindow = async () => {
   windowShownOnOpen = false;
@@ -125,9 +131,9 @@ const createWindow = async () => {
     width,
     height,
     icon: getAssetPath('icon.png'),
-    titleBarStyle: 'hidden',
+    titleBarStyle: customTitlebarStatus ? 'hidden' : 'default',
     webPreferences: {
-      sandbox: false,
+      sandbox: !customTitlebarStatus,
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')
         : path.join(__dirname, '../../.erb/dll/preload.js'),

desktop-app/src/main/preload.ts

@@ -45,8 +45,16 @@ window.onerror = function (errorMsg, url, lineNumber) {
 };
 
 window.addEventListener('DOMContentLoaded', () => {
-  // eslint-disable-next-line no-new
-  new Titlebar({
-    backgroundColor: TitlebarColor.fromHex('#37b598'),
-  });
+  const customTitlebarStatus = ipcRenderer.sendSync(
+    'electron-store-get',
+    'userPreferences.customTitlebar'
+  ) as boolean;
+
+  if (customTitlebarStatus) {
+    // eslint-disable-next-line no-new
+    new Titlebar({
+      backgroundColor: TitlebarColor.fromHex('#0f172a'), // slate-900
+      itemBackgroundColor: TitlebarColor.fromHex('#1e293b'), // slate-800
+    });
+  }
 });

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,27 @@ export const SettingsContent = ({ onClose }: Props) => {
         </div>
       </div>
 
+      <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}