Always show window controls, and open Linux settings in dialog

src-web/components/HeaderSize.tsx

@@ -1,27 +1,31 @@
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
-import { useIsFullscreen } from '../hooks/useIsFullscreen';
-import { useOsInfo } from '../hooks/useOsInfo';
+import React from 'react';
 import { useSettings } from '../hooks/useSettings';
+import { useStoplightsVisible } from '../hooks/useStoplightsVisible';
+import { WINDOW_CONTROLS_WIDTH, WindowControls } from './WindowControls';
 
 interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   size: 'md' | 'lg';
-  ignoreStoplights?: boolean;
+  ignoreControlsSpacing?: boolean;
+  onlyXWindowControl?: boolean;
 }
 
+export const HEADER_SIZE_MD = '27px';
+export const HEADER_SIZE_LG = '38px';
+
 export function HeaderSize({
   className,
   style,
   size,
-  ignoreStoplights,
-  ...props
+  ignoreControlsSpacing,
+  onlyXWindowControl,
+  children,
 }: HeaderSizeProps) {
   const settings = useSettings();
-  const platform = useOsInfo();
-  const fullscreen = useIsFullscreen();
-  const stoplightsVisible = platform?.osType === 'macos' && !fullscreen && !ignoreStoplights;
+  const stoplightsVisible = useStoplightsVisible();
   return (
     <div
       data-tauri-drag-region
@@ -33,18 +37,23 @@ export function HeaderSize({
         ...style,
         // Add padding for macOS stoplights, but keep it the same width (account for the interface scale)
         paddingLeft: stoplightsVisible ? 72 / settings.interfaceScale : undefined,
+        ...(size === 'md' ? { height: HEADER_SIZE_MD } : {}),
+        ...(size === 'lg' ? { height: HEADER_SIZE_LG } : {}),
+        ...(stoplightsVisible || ignoreControlsSpacing
+          ? { paddingRight: '2px' }
+          : { paddingLeft: '2px', paddingRight: WINDOW_CONTROLS_WIDTH }),
       }}
       className={classNames(
         className,
-        'select-none',
+        'select-none relative',
         'pt-[1px] w-full border-b border-border-subtle min-w-0',
-        stoplightsVisible ? 'pr-1' : 'pl-1',
-        size === 'md' && 'h-[27px]',
-        size === 'lg' && 'h-[38px]',
       )}
     >
       {/* NOTE: This needs display:grid or else the element shrinks (even though scrollable) */}
-      <div className="h-full w-full overflow-x-auto hide-scrollbars grid" {...props} />
+      <div className="pointer-events-none h-full w-full overflow-x-auto hide-scrollbars grid">
+        {children}
+      </div>
+      <WindowControls onlyX={onlyXWindowControl} />
     </div>
   );
 }