🐛 fix(electron): reserve titlebar control space (#13204)

* 🐛 fix(electron): reserve titlebar control space

* 🐛 fix(electron): update titlebar padding for Windows control space

src/features/Electron/titlebar/TitleBar.tsx

@@ -1,35 +1,27 @@
 import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';
 import { Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 import { electronStylish } from '@/styles/electron';
-import { getPlatform, isMacOS } from '@/utils/platform';
+import { getPlatform } from '@/utils/platform';
 
 import Connection from '../connection/Connection';
 import { useTabNavigation } from '../navigation/useTabNavigation';
 import { useWatchThemeUpdate } from '../system/useWatchThemeUpdate';
 import { UpdateNotification } from '../updater/UpdateNotification';
+import { getTitleBarLayoutConfig } from './layout';
 import NavigationBar from './NavigationBar';
 import TabBar from './TabBar';
 import WinControl from './WinControl';
 
-const isMac = isMacOS();
-const isLinux = getPlatform() === 'Linux';
+const platform = getPlatform();
 
 const TitleBar = memo(() => {
   useWatchThemeUpdate();
   useTabNavigation();
 
-  const showWinControl = isLinux && !isMac;
-
-  const padding = useMemo(() => {
-    if (showWinControl) {
-      return '0 12px 0 0';
-    }
-
-    return '0 12px';
-  }, [showWinControl]);
+  const { padding, showCustomWinControl } = getTitleBarLayoutConfig(platform);
 
   return (
     <Flexbox
@@ -49,7 +41,7 @@ const TitleBar = memo(() => {
           <UpdateNotification />
           <Connection />
         </Flexbox>
-        {showWinControl && (
+        {showCustomWinControl && (
           <>
             <Divider orientation={'vertical'} />
             <WinControl />

src/features/Electron/titlebar/layout.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+
+import { getTitleBarLayoutConfig, TITLE_BAR_HORIZONTAL_PADDING } from './layout';
+import { WINDOW_CONTROL_WIDTH } from './WinControl';
+
+describe('getTitleBarLayoutConfig', () => {
+  it('reserves right-side space for native Windows controls', () => {
+    expect(getTitleBarLayoutConfig('Windows')).toEqual({
+      padding: `0 ${WINDOW_CONTROL_WIDTH + TITLE_BAR_HORIZONTAL_PADDING}px 0 ${TITLE_BAR_HORIZONTAL_PADDING}px`,
+      reserveNativeControlSpace: true,
+      showCustomWinControl: false,
+    });
+  });
+
+  it('keeps Linux custom controls flush right without extra native inset', () => {
+    expect(getTitleBarLayoutConfig('Linux')).toEqual({
+      padding: `0 ${TITLE_BAR_HORIZONTAL_PADDING}px 0 0`,
+      reserveNativeControlSpace: false,
+      showCustomWinControl: true,
+    });
+  });
+
+  it('uses default padding on macOS', () => {
+    expect(getTitleBarLayoutConfig('Mac OS')).toEqual({
+      padding: `0 ${TITLE_BAR_HORIZONTAL_PADDING}px`,
+      reserveNativeControlSpace: false,
+      showCustomWinControl: false,
+    });
+  });
+});

src/features/Electron/titlebar/layout.ts

@@ -0,0 +1,36 @@
+export const TITLE_BAR_HORIZONTAL_PADDING = 12;
+
+export interface TitleBarLayoutConfig {
+  padding: string;
+  reserveNativeControlSpace: boolean;
+  showCustomWinControl: boolean;
+}
+
+const WINDOWS_CONTROL_WIDTH = 150;
+
+export const getTitleBarLayoutConfig = (platform?: string): TitleBarLayoutConfig => {
+  const showCustomWinControl = platform === 'Linux';
+  const reserveNativeControlSpace = platform === 'Windows';
+
+  if (showCustomWinControl) {
+    return {
+      padding: `0 ${TITLE_BAR_HORIZONTAL_PADDING}px 0 0`,
+      reserveNativeControlSpace,
+      showCustomWinControl,
+    };
+  }
+
+  if (reserveNativeControlSpace) {
+    return {
+      padding: `0 ${WINDOWS_CONTROL_WIDTH + TITLE_BAR_HORIZONTAL_PADDING}px 0 ${TITLE_BAR_HORIZONTAL_PADDING}px`,
+      reserveNativeControlSpace,
+      showCustomWinControl,
+    };
+  }
+
+  return {
+    padding: `0 ${TITLE_BAR_HORIZONTAL_PADDING}px`,
+    reserveNativeControlSpace,
+    showCustomWinControl,
+  };
+};