Always show window controls, and open Linux settings in dialog

src-web/components/Settings/Settings.tsx

@@ -7,11 +7,14 @@ import { capitalize } from '../../lib/capitalize';
 import { HStack } from '../core/Stacks';
 import { TabContent, Tabs } from '../core/Tabs/Tabs';
 import { HeaderSize } from '../HeaderSize';
-import { WindowControls } from '../WindowControls';
 import { SettingsAppearance } from './SettingsAppearance';
 import { SettingsGeneral } from './SettingsGeneral';
 import { SettingsPlugins } from './SettingsPlugins';
 
+interface Props {
+  hide?: () => void;
+}
+
 enum Tab {
   General = 'general',
   Appearance = 'appearance',
@@ -20,33 +23,45 @@ enum Tab {
 
 const tabs = [Tab.General, Tab.Appearance, Tab.Plugins];
 
-export default function Settings() {
+export default function Settings({ hide }: Props) {
   const osInfo = useOsInfo();
   const [tab, setTab] = useState<string>(Tab.General);
 
   // Close settings window on escape
   // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
-  useKeyPressEvent('Escape', () => getCurrentWebviewWindow().close());
+  useKeyPressEvent('Escape', async () => {
+    if (hide != null) {
+      // It's being shown in a dialog, so close the dialog
+      hide();
+    } else {
+      // It's being shown in a window, so close the window
+      await getCurrentWebviewWindow().close();
+    }
+  });
 
   return (
     <div className={classNames('grid grid-rows-[auto_minmax(0,1fr)] h-full')}>
-      <HeaderSize
-        data-tauri-drag-region
-        ignoreStoplights
-        size="md"
-        className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
-      >
-        <HStack
-          space={2}
-          justifyContent="center"
-          className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
+      {hide ? (
+        <span />
+      ) : (
+        <HeaderSize
+          data-tauri-drag-region
+          ignoreControlsSpacing
+          onlyXWindowControl
+          size="md"
+          className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
         >
-          <div className={classNames(osInfo?.osType === 'macos' ? 'text-center' : 'pl-2')}>
-            Settings
-          </div>
-          <WindowControls className="ml-auto" onlyX />
-        </HStack>
-      </HeaderSize>
+          <HStack
+            space={2}
+            justifyContent="center"
+            className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
+          >
+            <div className={classNames(osInfo?.osType === 'macos' ? 'text-center' : 'pl-2')}>
+              Settings
+            </div>
+          </HStack>
+        </HeaderSize>
+      )}
       <Tabs
         value={tab}
         addBorders