Add setting to use native window titlebar (#312)

src-web/components/HeaderSize.tsx

@@ -27,6 +27,7 @@ export function HeaderSize({
 }: HeaderSizeProps) {
   const settings = useAtomValue(settingsAtom);
   const isFullscreen = useIsFullscreen();
+  const nativeTitlebar = settings.useNativeTitlebar;
   const finalStyle = useMemo<CSSProperties>(() => {
     const s = { ...style };
 
@@ -34,7 +35,9 @@ export function HeaderSize({
     if (size === 'md') s.minHeight = HEADER_SIZE_MD;
     if (size === 'lg') s.minHeight = HEADER_SIZE_LG;
 
-    if (type() === 'macos') {
+    if (nativeTitlebar) {
+      // No style updates when using native titlebar
+    } else if (type() === 'macos') {
       if (!isFullscreen) {
         // Add large padding for window controls
         s.paddingLeft = 72 / settings.interfaceScale;
@@ -51,6 +54,7 @@ export function HeaderSize({
     settings.interfaceScale,
     size,
     style,
+    nativeTitlebar,
   ]);
 
   return (
@@ -73,7 +77,7 @@ export function HeaderSize({
       >
         {children}
       </div>
-      {!hideControls && <WindowControls onlyX={onlyXWindowControl} />}
+      {!hideControls && !nativeTitlebar && <WindowControls onlyX={onlyXWindowControl} />}
     </div>
   );
 }

src-web/components/Settings/SettingsInterface.tsx

@@ -4,11 +4,14 @@ import { useLicense } from '@yaakapp-internal/license';
 import type { EditorKeymap, Settings } from '@yaakapp-internal/models';
 import { patchModel, settingsAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
+import { useState } from 'react';
 
 import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace';
 import { clamp } from '../../lib/clamp';
 import { showConfirm } from '../../lib/confirm';
+import { invokeCmd } from '../../lib/tauri';
 import { CargoFeature } from '../CargoFeature';
+import { Button } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
 import { Icon } from '../core/Icon';
 import { Link } from '../core/Link';
@@ -154,6 +157,8 @@ export function SettingsInterface() {
         <LicenseSettings settings={settings} />
       </CargoFeature>
 
+      <NativeTitlebarSetting settings={settings} />
+
       {type() !== 'macos' && (
         <Checkbox
           checked={settings.hideWindowControls}
@@ -165,6 +170,33 @@ export function SettingsInterface() {
     </VStack>
   );
 }
+
+function NativeTitlebarSetting({ settings }: { settings: Settings }) {
+  const [nativeTitlebar, setNativeTitlebar] = useState(settings.useNativeTitlebar);
+  return (
+    <div className="flex gap-1 overflow-hidden h-2xs">
+      <Checkbox
+        checked={nativeTitlebar}
+        title="Native title bar"
+        help="Use the operating system's standard title bar and window controls"
+        onChange={setNativeTitlebar}
+      />
+      {settings.useNativeTitlebar !== nativeTitlebar && (
+        <Button
+          color="primary"
+          size="2xs"
+          onClick={async () => {
+            await patchModel(settings, { useNativeTitlebar: nativeTitlebar });
+            await invokeCmd('cmd_restart');
+          }}
+        >
+          Apply and Restart
+        </Button>
+      )}
+    </div>
+  );
+}
+
 function LicenseSettings({ settings }: { settings: Settings }) {
   const license = useLicense();
   if (license.check.data?.type !== 'personal_use') {

src-web/components/WindowControls.tsx

@@ -18,7 +18,7 @@ export function WindowControls({ className, onlyX }: Props) {
   const [maximized, setMaximized] = useState<boolean>(false);
   const settings = useAtomValue(settingsAtom);
   // Never show controls on macOS or if hideWindowControls is true
-  if (type() === 'macos' || settings.hideWindowControls) {
+  if (type() === 'macos' || settings.hideWindowControls || settings.useNativeTitlebar) {
     return null;
   }