Add setting to use native window titlebar (#312)

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') {